danbarber/chess
1
0
Fork 0
mirror of https://github.com/danbee/chess synced 2025-03-04 08:39:06 +00:00
Code Issues Releases Wiki Activity

Migrate SASS to use new math.div function

Browse Source
This commit is contained in:
Daniel Barber 2022-02-15 18:36:10 -06:00
parent d56502a001
commit 1d7fb6c87b
10 changed files with 41 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
assets/css/components/_player-finder.scss
View File

@ -1,3 +1,5 @@
@use "sass:math";
.opponent-finder__result { .opponent-finder__result {
border-bottom: 1px dotted $black; border-bottom: 1px dotted $black;
border-bottom-left-radius: $base-border-radius; border-bottom-left-radius: $base-border-radius;
@ -5,14 +7,14 @@
border-left: 1px dotted $black; border-left: 1px dotted $black;
border-right: 1px dotted $black; border-right: 1px dotted $black;
margin-top: -$small-spacing; margin-top: -$small-spacing;
padding: $small-spacing / 3; padding: math.div($small-spacing, 3);
} }
.opponent-finder__result-item { .opponent-finder__result-item {
border-radius: $base-border-radius / 2; border-radius: $base-border-radius * 0.5;
cursor: pointer; cursor: pointer;
display: block; display: block;
padding: $small-spacing / 3 $base-spacing / 2; padding: math.div($small-spacing, 3) $base-spacing * 0.5;
text-decoration: none; text-decoration: none;
&:hover, &:hover,

8
assets/css/elements/_forms.scss
View File

@ -1,3 +1,5 @@
@use "sass:math";
$_form-background-color: $background-color; $_form-background-color: $background-color;
fieldset { fieldset {
@ -9,14 +11,14 @@ fieldset {
legend { legend {
font-weight: $heavy-font-weight; font-weight: $heavy-font-weight;
margin-bottom: $small-spacing / 2; margin-bottom: $small-spacing * 0.5;
padding: 0; padding: 0;
} }
label { label {
display: block; display: block;
font-weight: $heavy-font-weight; font-weight: $heavy-font-weight;
margin-bottom: $small-spacing / 2; margin-bottom: $small-spacing * 0.5;
} }
input, input,
@ -35,7 +37,7 @@ textarea {
box-sizing: border-box; box-sizing: border-box;
color: $foreground-color; color: $foreground-color;
margin-bottom: $small-spacing; margin-bottom: $small-spacing;
padding: $base-spacing / 3; padding: math.div($base-spacing, 3);
transition: border-color $base-duration $base-timing; transition: border-color $base-duration $base-timing;
width: 100%; width: 100%;

4
assets/css/settings/_global.scss
View File

@ -1,7 +1,7 @@
$base-border-radius: 0.5rem; $base-border-radius: 0.5rem;
$base-spacing: 2rem; $base-spacing: 2rem;
$small-spacing: $base-spacing / 2; $small-spacing: $base-spacing * 0.5;
$x-small-spacing: $small-spacing / 2; $x-small-spacing: $small-spacing * 0.5;
$base-z-index: 0; $base-z-index: 0;
$container-width: 90%; $container-width: 90%;

2
assets/css/vendor/_family.scss vendored
View File

@ -130,7 +130,7 @@
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive] /// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
/// @param {number} $num - id of the child /// @param {number} $num - id of the child
@mixin middle($num) { @mixin middle($num) {
&:nth-child(#{round($num / 2)}) { &:nth-child(#{round($num * 0.5)}) {
@content; @content;
} }
} }

12
assets/css/vendor/bourbon/bourbon/library/_modular-scale.scss vendored
View File

@ -67,6 +67,8 @@
/// ///
/// @require {function} _fetch-bourbon-setting /// @require {function} _fetch-bourbon-setting
@use "sass:math";
@function modular-scale( @function modular-scale(
$increment, $increment,
$value: _fetch-bourbon-setting("modular-scale-base"), $value: _fetch-bourbon-setting("modular-scale-base"),
@ -78,7 +80,7 @@
// scale $v2 to just above $v1 // scale $v2 to just above $v1
@while $v2 > $v1 { @while $v2 > $v1 {
$v2: ($v2 / $ratio); // will be off-by-1 $v2: math.div($v2, $ratio); // will be off-by-1
} }
@while $v2 < $v1 { @while $v2 < $v1 {
$v2: ($v2 * $ratio); // will fix off-by-1 $v2: ($v2 * $ratio); // will fix off-by-1
@ -102,15 +104,15 @@
@if $increment < 0 { @if $increment < 0 {
// adjust $v2 to just below $v1 // adjust $v2 to just below $v1
@if $double-stranded { @if $double-stranded {
$v2: ($v2 / $ratio); $v2: math.div($v2, $ratio);
} }
@for $i from $increment through -1 { @for $i from $increment through -1 {
@if $double-stranded and ($v1 / $ratio) < $v2 { @if $double-stranded and math.div($v1, $ratio) < $v2 {
$value: $v2; $value: $v2;
$v2: ($v2 / $ratio); $v2: math.div($v2, $ratio);
} @else { } @else {
$v1: ($v1 / $ratio); $v1: math.div($v1, $ratio);
$value: $v1; $value: $v1;
} }
} }

4
assets/css/vendor/bourbon/bourbon/library/_strip-unit.scss vendored
View File

@ -12,6 +12,8 @@
/// // Output /// // Output
/// $dimension: 10; /// $dimension: 10;
@use "sass:math";
@function strip-unit($value) { @function strip-unit($value) {
@return ($value / ($value * 0 + 1)); @return math.div($value, $value * 0 + 1);
} }

8
assets/css/vendor/bourbon/bourbon/library/_triangle.scss vendored
View File

@ -55,25 +55,25 @@
@if $direction == "up" { @if $direction == "up" {
border-color: transparent transparent $color; border-color: transparent transparent $color;
border-width: 0 ($width / 2) $height; border-width: 0 ($width * 0.5) $height;
} @else if $direction == "up-right" { } @else if $direction == "up-right" {
border-color: transparent $color transparent transparent; border-color: transparent $color transparent transparent;
border-width: 0 $width $width 0; border-width: 0 $width $width 0;
} @else if $direction == "right" { } @else if $direction == "right" {
border-color: transparent transparent transparent $color; border-color: transparent transparent transparent $color;
border-width: ($height / 2) 0 ($height / 2) $width; border-width: ($height * 0.5) 0 ($height * 0.5) $width;
} @else if $direction == "down-right" { } @else if $direction == "down-right" {
border-color: transparent transparent $color; border-color: transparent transparent $color;
border-width: 0 0 $width $width; border-width: 0 0 $width $width;
} @else if $direction == "down" { } @else if $direction == "down" {
border-color: $color transparent transparent; border-color: $color transparent transparent;
border-width: $height ($width / 2) 0; border-width: $height ($width * 0.5) 0;
} @else if $direction == "down-left" { } @else if $direction == "down-left" {
border-color: transparent transparent transparent $color; border-color: transparent transparent transparent $color;
border-width: $width 0 0 $width; border-width: $width 0 0 $width;
} @else if $direction == "left" { } @else if $direction == "left" {
border-color: transparent $color transparent transparent; border-color: transparent $color transparent transparent;
border-width: ($height / 2) $width ($height / 2) 0; border-width: ($height * 0.5) $width ($height * 0.5) 0;
} @else if $direction == "up-left" { } @else if $direction == "up-left" {
border-color: $color transparent transparent; border-color: $color transparent transparent;
border-width: $width $width 0 0; border-width: $width $width 0 0;

6
assets/css/vendor/bourbon/bourbon/utilities/_contrast-ratio.scss vendored
View File

@ -19,13 +19,15 @@
/// ///
/// @access private /// @access private
@use "sass:math";
@function _contrast-ratio($color-1, $color-2) { @function _contrast-ratio($color-1, $color-2) {
$-local-lightness-1: _lightness($color-1) + 0.05; $-local-lightness-1: _lightness($color-1) + 0.05;
$-local-lightness-2: _lightness($color-2) + 0.05; $-local-lightness-2: _lightness($color-2) + 0.05;
@if $-local-lightness-1 > $-local-lightness-2 { @if $-local-lightness-1 > $-local-lightness-2 {
@return $-local-lightness-1 / $-local-lightness-2; @return math.div($-local-lightness-1, $-local-lightness-2);
} @else { } @else {
@return $-local-lightness-2 / $-local-lightness-1; @return math.div($-local-lightness-2, $-local-lightness-1);
} }
} }

8
assets/css/vendor/bourbon/bourbon/utilities/_gamma.scss vendored
View File

@ -11,11 +11,13 @@
/// ///
/// @access private /// @access private
@use "sass:math";
@function _gamma($channel) { @function _gamma($channel) {
@if $channel < 0.03928 { @if $channel < 0.03928 {
@return $channel / 12.92; @return math.div($channel, 12.92);
} @else { } @else {
$c: ($channel + 0.055) / 1.055; $c: math.div($channel + 0.055, 1.055);
@return (133 * $c * $c * $c + 155 * $c * $c) / 288; @return math.div(133 * $c * $c * $c + 155 * $c * $c, 288);
} }
} }

8
assets/css/vendor/bourbon/bourbon/utilities/_lightness.scss vendored
View File

@ -11,14 +11,16 @@
/// ///
/// @access private /// @access private
@use "sass:math";
@function _lightness($hex-color) { @function _lightness($hex-color) {
$-local-red-raw: red(rgba($hex-color, 1)); $-local-red-raw: red(rgba($hex-color, 1));
$-local-green-raw: green(rgba($hex-color, 1)); $-local-green-raw: green(rgba($hex-color, 1));
$-local-blue-raw: blue(rgba($hex-color, 1)); $-local-blue-raw: blue(rgba($hex-color, 1));
$-local-red: _gamma($-local-red-raw / 255); $-local-red: _gamma(math.div($-local-red-raw, 255));
$-local-green: _gamma($-local-green-raw / 255); $-local-green: _gamma(math.div($-local-green-raw, 255));
$-local-blue: _gamma($-local-blue-raw / 255); $-local-blue: _gamma(math.div($-local-blue-raw, 255));
@return $-local-red * 0.2126 + $-local-green * 0.7152 + $-local-blue * 0.0722; @return $-local-red * 0.2126 + $-local-green * 0.7152 + $-local-blue * 0.0722;
} }