EVOgeek
/
Vmeda.Online
1
0
Fork 1
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-warn-color: $red !default;
$quiz-timer-iterations: 15 !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. // Make the timer go red when it's reaching 0.
@for $i from 0 through $quiz-timer-iterations { @for $i from 0 through $quiz-timer-iterations {
&.core-timer-timeleft-#{$i} { &.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}; --timer-background: #{$timer-background};
@if $i <= $quiz-timer-iterations / 2 { @if $i <= math.div($quiz-timer-iterations, 2) {
--timer-text-color: var(--white); --timer-text-color: var(--white);
} }
} }

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

@ -1,6 +1,7 @@
/** Format Text - Show more styles. */ /** Format Text - Show more styles. */
/** Styles of elements inside the directive should be placed in format-text.scss */ /** Styles of elements inside the directive should be placed in format-text.scss */
@use "theme/globals.variables" as global; @use "theme/globals.variables" as global;
@use "sass:math" as math;
core-format-text { core-format-text {
--core-format-text-background: var(--background, var(--ion-item-background)); --core-format-text-background: var(--background, var(--ion-item-background));
@ -182,19 +183,19 @@ core-format-text {
.embed-responsive-21by9 { .embed-responsive-21by9 {
&::before { &::before {
padding-top: percentage(9 / 21); padding-top: percentage(math.div(9, 21));
} }
} }
.embed-responsive-16by9 { .embed-responsive-16by9 {
&::before { &::before {
padding-top: percentage(9 / 16); padding-top: percentage(math.div(9, 16));
} }
} }
.embed-responsive-4by3 { .embed-responsive-4by3 {
&::before { &::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. // Color mixins.
@function get_brightness($color) { @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. // Get the better color contrast using WCAG algorythm.
@ -256,9 +256,9 @@
$lumiance: luminance($color); $lumiance: luminance($color);
// White lumiance is 1. // White lumiance is 1.
$whiteContrast: ($lumiance + 0.05) / (1 + 0.05); $whiteContrast: math.div($lumiance + 0.05, 1 + 0.05);
// White lumiance is 0. // White lumiance is 0.
$blackContrast: (0.05) / ($lumiance + 0.05); $blackContrast: math.div(0.05, $lumiance + 0.05);
@return if($whiteContrast < $blackContrast, white, black); @return if($whiteContrast < $blackContrast, white, black);
} }
@ -269,7 +269,7 @@
$g: green($color); $g: green($color);
$b: blue($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); @return if($yiq >= 128, $dark, $light);
} }
@ -280,9 +280,9 @@
$backgroundLuminance: luminance($background); $backgroundLuminance: luminance($background);
@if ($backgroundLuminance < $foregroundLumiance) { @if ($backgroundLuminance < $foregroundLumiance) {
@return ($backgroundLuminance + 0.05) / ($foregroundLumiance + 0.05); @return math.div($backgroundLuminance + 0.05, $foregroundLumiance + 0.05);
} @else { } @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) { @function component-luminance($value) {
$value: $value / 255; $value: math.div($value, 255);
@if ($value <= 0.03928) { @if ($value <= 0.03928) {
@return $value / 12.92; @return math.div($value, 12.92);
} @else { } @else {
@return math.pow(($value + 0.055) / 1.055, 2.4); @return math.pow(math.div($value + 0.055, 1.055), 2.4);
} }
} }