EVOgeek
/
Vmeda.Online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-3947 styles: Use math.div instead of division

main
Pau Ferrer Ocaña 2023-11-07 13:32:19 +01:00
parent fa7607a0d3
commit 730c26e5d8
3 changed files with 17 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/addons/mod/quiz/pages/player/player.scss
View File

@ -1,4 +1,5 @@
@import "~theme/globals";
@use "theme/globals" as *;
@use "sass:math" as math;
$quiz-timer-warn-color: $red !default;
$quiz-timer-iterations: 15 !default;
@ -13,9 +14,9 @@ $quiz-timer-iterations: 15 !default;
// Make the timer go red when it's reaching 0.
@for $i from 0 through $quiz-timer-iterations {
&.core-timer-timeleft-#{$i} {
$timer-background: rgba($quiz-timer-warn-color, 1 - ($i / $quiz-timer-iterations));
$timer-background: rgba($quiz-timer-warn-color, 1 - math.div($i, $quiz-timer-iterations));
--timer-background: #{$timer-background};
@if $i <= $quiz-timer-iterations / 2 {
@if $i <= math.div($quiz-timer-iterations, 2) {
--timer-text-color: var(--white);
}
}

7
src/theme/components/format-text.scss
View File

@ -1,6 +1,7 @@
/** Format Text - Show more styles. */
/** Styles of elements inside the directive should be placed in format-text.scss */
@use "theme/globals.variables" as global;
@use "sass:math" as math;
core-format-text {
--core-format-text-background: var(--background, var(--ion-item-background));
@ -182,19 +183,19 @@ core-format-text {
.embed-responsive-21by9 {
&::before {
padding-top: percentage(9 / 21);
padding-top: percentage(math.div(9, 21));
}
}
.embed-responsive-16by9 {
&::before {
padding-top: percentage(9 / 16);
padding-top: percentage(math.div(9, 16));
}
}
.embed-responsive-4by3 {
&::before {
padding-top: percentage(3 / 4);
padding-top: percentage(math.div(3, 4));
}
}

18
src/theme/helpers/custom.mixins.scss
View File

@ -248,7 +248,7 @@
// Color mixins.
@function get_brightness($color) {
@return (red($color) + green($color) + blue($color)) / 3;
@return math.div(red($color) + green($color) + blue($color), 3);
}
// Get the better color contrast using WCAG algorythm.
@ -256,9 +256,9 @@
$lumiance: luminance($color);
// White lumiance is 1.
$whiteContrast: ($lumiance + 0.05) / (1 + 0.05);
$whiteContrast: math.div($lumiance + 0.05, 1 + 0.05);
// White lumiance is 0.
$blackContrast: (0.05) / ($lumiance + 0.05);
$blackContrast: math.div(0.05, $lumiance + 0.05);
@return if($whiteContrast < $blackContrast, white, black);
}
@ -269,7 +269,7 @@
$g: green($color);
$b: blue($color);
$yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
$yiq: math.div(($r * 299) + ($g * 587) + ($b * 114), 1000);
@return if($yiq >= 128, $dark, $light);
}
@ -280,9 +280,9 @@
$backgroundLuminance: luminance($background);
@if ($backgroundLuminance < $foregroundLumiance) {
@return ($backgroundLuminance + 0.05) / ($foregroundLumiance + 0.05);
@return math.div($backgroundLuminance + 0.05, $foregroundLumiance + 0.05);
} @else {
@return ($foregroundLumiance + 0.05) / ($backgroundLuminance + 0.05);
@return math.div($foregroundLumiance + 0.05, $backgroundLuminance + 0.05);
}
}
@ -299,11 +299,11 @@
}
@function component-luminance($value) {
$value: $value / 255;
$value: math.div($value, 255);
@if ($value <= 0.03928) {
@return $value / 12.92;
@return math.div($value, 12.92);
} @else {
@return math.pow(($value + 0.055) / 1.055, 2.4);
@return math.pow(math.div($value + 0.055, 1.055), 2.4);
}
}