From 953843dea745ef5e064acd589742a49cb7a7ea54 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sun, 6 Feb 2022 17:30:31 +0100 Subject: Cleanup --- src/mixins/_grid.scss | 88 ---------------------------------------------- src/objects/_button.scss | 26 +++++++------- src/objects/_checkbox.scss | 10 +++--- src/objects/_radio.scss | 2 +- src/objects/_switch.scss | 2 +- 5 files changed, 20 insertions(+), 108 deletions(-) delete mode 100644 src/mixins/_grid.scss (limited to 'src') diff --git a/src/mixins/_grid.scss b/src/mixins/_grid.scss deleted file mode 100644 index e0a73d9..0000000 --- a/src/mixins/_grid.scss +++ /dev/null @@ -1,88 +0,0 @@ -$context-id: 'grid' !default; - -@include iro-context-stack-create($grid-context-id); - -@mixin native-grid { - @supports (display: grid) { - @content; - } -} - -@mixin grid($columns: 12, $h-spacing: 0, $v-spacing: 0, $reverse: false) { - display: flex; - flex-flow: row wrap; - align-items: stretch; - justify-content: flex-start; - margin: (-.5 * $v-spacing) (-.5 * $h-spacing); - - @if $reverse { - flex-direction: row-reverse; - } - - @include iro-context-push($grid-context-id, 'grid', ( - --h-spacing: $h-spacing, - --v-spacing: $v-spacing, - --columns: $columns, - --reverse: $reverse - )); - - @content; - - @include iro-context-pop($grid-context-id); -} - -@mixin grid-col { - @include iro-context-assert-stack-must-contain($grid-context-id, 'grid'); - - $data: nth(iro-context-get($grid-context-id, 'grid'), 2); - $v-spacing: map-get($data, --v-spacing); - $h-spacing: map-get($data, --h-spacing); - - box-sizing: border-box; - flex: 0 0 auto; - margin: .5 * $v-spacing .5 * $h-spacing; - - @include iro-context-push($grid-context-id, 'grid__col'); - - @content; - - @include iro-context-pop($grid-context-id); -} - -@mixin grid-col-span($i) { - @include iro-context-assert-stack-must-contain($grid-context-id, 'grid'); - - $data: nth(iro-context-get($grid-context-id, 'grid'), 2); - $columns: map-get($data, --columns); - $h-spacing: map-get($data, --h-spacing); - - @if $h-spacing != 0 { - width: calc((100% - #{$columns * $h-spacing}) * #{floor($i / $columns * 10000 - 1) / 10000} + #{($i - 1) * $h-spacing}); - // ^^^^^^^^^^ Bugfix for Firefox ^^^^^^^^^^ - } @else { - width: calc(100% * #{floor($i / $columns * 10000 - 1) / 10000}); - } -} - -@mixin grid-col-shift($i) { - @include iro-context-assert-stack-must-contain($grid-context-id, 'grid'); - - $data: nth(iro-context-get($grid-context-id, 'grid'), 2); - $columns: map-get($data, --columns); - $h-spacing: map-get($data, --h-spacing); - $reverse: map-get($data, --reverse); - - $prop: if($reverse, margin-right, margin-left); - - @if $i == 0 { - #{$prop}: 0; - } @else { - @if $h-spacing != 0 { - #{$prop}: calc((100% - #{$columns * $h-spacing}) * #{floor($i / $columns * 10000 - 1) / 10000} + #{$i * $h-spacing + $h-spacing / 2}); - // ^^^^^^^^^^ Bugfix for Firefox ^^^^^^^^^^ - } @else { - #{$prop}: calc(100% * #{floor($i / $columns * 10000 - 1) / 10000}); - // ^^^^^^^^^^ Bugfix for Firefox ^^^^^^^^^^ - } - } -} diff --git a/src/objects/_button.scss b/src/objects/_button.scss index 6ae8312..57c49e8 100644 --- a/src/objects/_button.scss +++ b/src/objects/_button.scss @@ -4,31 +4,31 @@ @use '../mixins/typography'; @mixin button-variant($variant) { - border-color: fn.color((--#{$variant}, --bg)); - background-color: fn.color((--#{$variant}, --bg)); - box-shadow: fn.color((--#{$variant}, --shadow)); - color: fn.color((--#{$variant}, --label)); + border-color: fn.color(--#{$variant} --bg); + background-color: fn.color(--#{$variant} --bg); + box-shadow: fn.color(--#{$variant} --shadow); + color: fn.color(--#{$variant} --label); @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') { &:hover { - border-color: fn.color((--#{$variant}, --hover, --bg)); - background-color: fn.color((--#{$variant}, --hover, --bg)); - box-shadow: fn.color((--#{$variant}, --hover, --shadow)); - color: fn.color((--#{$variant}, --hover, --label)); + border-color: fn.color(--#{$variant} --hover --bg); + background-color: fn.color(--#{$variant} --hover --bg); + box-shadow: fn.color(--#{$variant} --hover --shadow); + color: fn.color(--#{$variant} --hover --label); } &:active { - border-color: fn.color((--#{$variant}, --active, --bg)); - background-color: fn.color((--#{$variant}, --active, --bg)); - box-shadow: fn.color((--#{$variant}, --active, --shadow)); - color: fn.color((--#{$variant}, --active, --label)); + border-color: fn.color(--#{$variant} --active --bg); + background-color: fn.color(--#{$variant} --active --bg); + box-shadow: fn.color(--#{$variant} --active --shadow); + color: fn.color(--#{$variant} --active --label); } } @include iro.bem-modifier('outline') { background-color: transparent; box-shadow: none; - color: fn.color((--#{$variant}, --outline-label)); + color: fn.color(--#{$variant} --outline-label); } } diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss index b56336a..11836e1 100644 --- a/src/objects/_checkbox.scss +++ b/src/objects/_checkbox.scss @@ -46,8 +46,8 @@ display: inline-flex; position: relative; align-items: flex-start; - margin-right: calc(-1 * #{fn.dim(--padding-x)} + #{fn.dim(--margin-right)}); - margin-left: calc(-1 * #{fn.dim(--padding-x)}); + margin-right: calc(-1 * fn.dim(--padding-x) + fn.dim(--margin-right)); + margin-left: calc(-1 * fn.dim(--padding-x)); padding: fn.dim(--padding-y) fn.dim(--padding-x); // sass-lint:disable-line shorthand-values @include iro.bem-elem('box') { @@ -56,7 +56,7 @@ flex: 0 0 auto; width: fn.dim(--size); height: fn.dim(--size); - margin-top: calc(.5 * (#{$line-height * 1em} - #{fn.dim(--size)})); + margin-top: calc(.5 * ($line-height * 1em - fn.dim(--size))); border-radius: fn.dim(--border-width); background-color: fn.color(--box-border); @@ -79,8 +79,8 @@ &::after { z-index: 3; - top: calc(.5 * #{fn.dim(--size)} - 1px); - left: calc(1.5 * #{fn.dim(--border-width)}); + top: calc(.5 * fn.dim(--size) - 1px); + left: calc(1.5 * fn.dim(--border-width)); box-sizing: border-box; width: calc(fn.dim(--size) - 3 * fn.dim(--border-width)); height: 0; diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss index 178b58c..51bfcd8 100644 --- a/src/objects/_radio.scss +++ b/src/objects/_radio.scss @@ -57,7 +57,7 @@ flex: 0 0 auto; width: fn.dim(--diameter); height: fn.dim(--diameter); - margin-top: calc(.5 * (#{$line-height * 1em} - #{fn.dim(--diameter)})); + margin-top: calc(.5 * ($line-height * 1em - fn.dim(--diameter))); border-radius: 2em; background-color: fn.color(--circle-border); diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss index b75397d..95209b4 100644 --- a/src/objects/_switch.scss +++ b/src/objects/_switch.scss @@ -116,7 +116,7 @@ background-color: fn.color(--handle-border); &::after { - left: calc(#{fn.dim(--width)} - #{fn.dim(--height)} + .5px); + left: calc(fn.dim(--width) - fn.dim(--height) + .5px); border-color: fn.color(--handle-border); } } -- cgit v1.2.3-70-g09d2