diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/mixins/_grid.scss | 88 | ||||
| -rw-r--r-- | src/objects/_button.scss | 26 | ||||
| -rw-r--r-- | src/objects/_checkbox.scss | 10 | ||||
| -rw-r--r-- | src/objects/_radio.scss | 2 | ||||
| -rw-r--r-- | src/objects/_switch.scss | 2 |
5 files changed, 20 insertions, 108 deletions
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 @@ | |||
| 1 | $context-id: 'grid' !default; | ||
| 2 | |||
| 3 | @include iro-context-stack-create($grid-context-id); | ||
| 4 | |||
| 5 | @mixin native-grid { | ||
| 6 | @supports (display: grid) { | ||
| 7 | @content; | ||
| 8 | } | ||
| 9 | } | ||
| 10 | |||
| 11 | @mixin grid($columns: 12, $h-spacing: 0, $v-spacing: 0, $reverse: false) { | ||
| 12 | display: flex; | ||
| 13 | flex-flow: row wrap; | ||
| 14 | align-items: stretch; | ||
| 15 | justify-content: flex-start; | ||
| 16 | margin: (-.5 * $v-spacing) (-.5 * $h-spacing); | ||
| 17 | |||
| 18 | @if $reverse { | ||
| 19 | flex-direction: row-reverse; | ||
| 20 | } | ||
| 21 | |||
| 22 | @include iro-context-push($grid-context-id, 'grid', ( | ||
| 23 | --h-spacing: $h-spacing, | ||
| 24 | --v-spacing: $v-spacing, | ||
| 25 | --columns: $columns, | ||
| 26 | --reverse: $reverse | ||
| 27 | )); | ||
| 28 | |||
| 29 | @content; | ||
| 30 | |||
| 31 | @include iro-context-pop($grid-context-id); | ||
| 32 | } | ||
| 33 | |||
| 34 | @mixin grid-col { | ||
| 35 | @include iro-context-assert-stack-must-contain($grid-context-id, 'grid'); | ||
| 36 | |||
| 37 | $data: nth(iro-context-get($grid-context-id, 'grid'), 2); | ||
| 38 | $v-spacing: map-get($data, --v-spacing); | ||
| 39 | $h-spacing: map-get($data, --h-spacing); | ||
| 40 | |||
| 41 | box-sizing: border-box; | ||
| 42 | flex: 0 0 auto; | ||
| 43 | margin: .5 * $v-spacing .5 * $h-spacing; | ||
| 44 | |||
| 45 | @include iro-context-push($grid-context-id, 'grid__col'); | ||
| 46 | |||
| 47 | @content; | ||
| 48 | |||
| 49 | @include iro-context-pop($grid-context-id); | ||
| 50 | } | ||
| 51 | |||
| 52 | @mixin grid-col-span($i) { | ||
| 53 | @include iro-context-assert-stack-must-contain($grid-context-id, 'grid'); | ||
| 54 | |||
| 55 | $data: nth(iro-context-get($grid-context-id, 'grid'), 2); | ||
| 56 | $columns: map-get($data, --columns); | ||
| 57 | $h-spacing: map-get($data, --h-spacing); | ||
| 58 | |||
| 59 | @if $h-spacing != 0 { | ||
| 60 | width: calc((100% - #{$columns * $h-spacing}) * #{floor($i / $columns * 10000 - 1) / 10000} + #{($i - 1) * $h-spacing}); | ||
| 61 | // ^^^^^^^^^^ Bugfix for Firefox ^^^^^^^^^^ | ||
| 62 | } @else { | ||
| 63 | width: calc(100% * #{floor($i / $columns * 10000 - 1) / 10000}); | ||
| 64 | } | ||
| 65 | } | ||
| 66 | |||
| 67 | @mixin grid-col-shift($i) { | ||
| 68 | @include iro-context-assert-stack-must-contain($grid-context-id, 'grid'); | ||
| 69 | |||
| 70 | $data: nth(iro-context-get($grid-context-id, 'grid'), 2); | ||
| 71 | $columns: map-get($data, --columns); | ||
| 72 | $h-spacing: map-get($data, --h-spacing); | ||
| 73 | $reverse: map-get($data, --reverse); | ||
| 74 | |||
| 75 | $prop: if($reverse, margin-right, margin-left); | ||
| 76 | |||
| 77 | @if $i == 0 { | ||
| 78 | #{$prop}: 0; | ||
| 79 | } @else { | ||
| 80 | @if $h-spacing != 0 { | ||
| 81 | #{$prop}: calc((100% - #{$columns * $h-spacing}) * #{floor($i / $columns * 10000 - 1) / 10000} + #{$i * $h-spacing + $h-spacing / 2}); | ||
| 82 | // ^^^^^^^^^^ Bugfix for Firefox ^^^^^^^^^^ | ||
| 83 | } @else { | ||
| 84 | #{$prop}: calc(100% * #{floor($i / $columns * 10000 - 1) / 10000}); | ||
| 85 | // ^^^^^^^^^^ Bugfix for Firefox ^^^^^^^^^^ | ||
| 86 | } | ||
| 87 | } | ||
| 88 | } | ||
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 @@ | |||
| 4 | @use '../mixins/typography'; | 4 | @use '../mixins/typography'; |
| 5 | 5 | ||
| 6 | @mixin button-variant($variant) { | 6 | @mixin button-variant($variant) { |
| 7 | border-color: fn.color((--#{$variant}, --bg)); | 7 | border-color: fn.color(--#{$variant} --bg); |
| 8 | background-color: fn.color((--#{$variant}, --bg)); | 8 | background-color: fn.color(--#{$variant} --bg); |
| 9 | box-shadow: fn.color((--#{$variant}, --shadow)); | 9 | box-shadow: fn.color(--#{$variant} --shadow); |
| 10 | color: fn.color((--#{$variant}, --label)); | 10 | color: fn.color(--#{$variant} --label); |
| 11 | 11 | ||
| 12 | @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') { | 12 | @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') { |
| 13 | &:hover { | 13 | &:hover { |
| 14 | border-color: fn.color((--#{$variant}, --hover, --bg)); | 14 | border-color: fn.color(--#{$variant} --hover --bg); |
| 15 | background-color: fn.color((--#{$variant}, --hover, --bg)); | 15 | background-color: fn.color(--#{$variant} --hover --bg); |
| 16 | box-shadow: fn.color((--#{$variant}, --hover, --shadow)); | 16 | box-shadow: fn.color(--#{$variant} --hover --shadow); |
| 17 | color: fn.color((--#{$variant}, --hover, --label)); | 17 | color: fn.color(--#{$variant} --hover --label); |
| 18 | } | 18 | } |
| 19 | 19 | ||
| 20 | &:active { | 20 | &:active { |
| 21 | border-color: fn.color((--#{$variant}, --active, --bg)); | 21 | border-color: fn.color(--#{$variant} --active --bg); |
| 22 | background-color: fn.color((--#{$variant}, --active, --bg)); | 22 | background-color: fn.color(--#{$variant} --active --bg); |
| 23 | box-shadow: fn.color((--#{$variant}, --active, --shadow)); | 23 | box-shadow: fn.color(--#{$variant} --active --shadow); |
| 24 | color: fn.color((--#{$variant}, --active, --label)); | 24 | color: fn.color(--#{$variant} --active --label); |
| 25 | } | 25 | } |
| 26 | } | 26 | } |
| 27 | 27 | ||
| 28 | @include iro.bem-modifier('outline') { | 28 | @include iro.bem-modifier('outline') { |
| 29 | background-color: transparent; | 29 | background-color: transparent; |
| 30 | box-shadow: none; | 30 | box-shadow: none; |
| 31 | color: fn.color((--#{$variant}, --outline-label)); | 31 | color: fn.color(--#{$variant} --outline-label); |
| 32 | } | 32 | } |
| 33 | } | 33 | } |
| 34 | 34 | ||
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 @@ | |||
| 46 | display: inline-flex; | 46 | display: inline-flex; |
| 47 | position: relative; | 47 | position: relative; |
| 48 | align-items: flex-start; | 48 | align-items: flex-start; |
| 49 | margin-right: calc(-1 * #{fn.dim(--padding-x)} + #{fn.dim(--margin-right)}); | 49 | margin-right: calc(-1 * fn.dim(--padding-x) + fn.dim(--margin-right)); |
| 50 | margin-left: calc(-1 * #{fn.dim(--padding-x)}); | 50 | margin-left: calc(-1 * fn.dim(--padding-x)); |
| 51 | padding: fn.dim(--padding-y) fn.dim(--padding-x); // sass-lint:disable-line shorthand-values | 51 | padding: fn.dim(--padding-y) fn.dim(--padding-x); // sass-lint:disable-line shorthand-values |
| 52 | 52 | ||
| 53 | @include iro.bem-elem('box') { | 53 | @include iro.bem-elem('box') { |
| @@ -56,7 +56,7 @@ | |||
| 56 | flex: 0 0 auto; | 56 | flex: 0 0 auto; |
| 57 | width: fn.dim(--size); | 57 | width: fn.dim(--size); |
| 58 | height: fn.dim(--size); | 58 | height: fn.dim(--size); |
| 59 | margin-top: calc(.5 * (#{$line-height * 1em} - #{fn.dim(--size)})); | 59 | margin-top: calc(.5 * ($line-height * 1em - fn.dim(--size))); |
| 60 | border-radius: fn.dim(--border-width); | 60 | border-radius: fn.dim(--border-width); |
| 61 | background-color: fn.color(--box-border); | 61 | background-color: fn.color(--box-border); |
| 62 | 62 | ||
| @@ -79,8 +79,8 @@ | |||
| 79 | 79 | ||
| 80 | &::after { | 80 | &::after { |
| 81 | z-index: 3; | 81 | z-index: 3; |
| 82 | top: calc(.5 * #{fn.dim(--size)} - 1px); | 82 | top: calc(.5 * fn.dim(--size) - 1px); |
| 83 | left: calc(1.5 * #{fn.dim(--border-width)}); | 83 | left: calc(1.5 * fn.dim(--border-width)); |
| 84 | box-sizing: border-box; | 84 | box-sizing: border-box; |
| 85 | width: calc(fn.dim(--size) - 3 * fn.dim(--border-width)); | 85 | width: calc(fn.dim(--size) - 3 * fn.dim(--border-width)); |
| 86 | height: 0; | 86 | 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 @@ | |||
| 57 | flex: 0 0 auto; | 57 | flex: 0 0 auto; |
| 58 | width: fn.dim(--diameter); | 58 | width: fn.dim(--diameter); |
| 59 | height: fn.dim(--diameter); | 59 | height: fn.dim(--diameter); |
| 60 | margin-top: calc(.5 * (#{$line-height * 1em} - #{fn.dim(--diameter)})); | 60 | margin-top: calc(.5 * ($line-height * 1em - fn.dim(--diameter))); |
| 61 | border-radius: 2em; | 61 | border-radius: 2em; |
| 62 | background-color: fn.color(--circle-border); | 62 | background-color: fn.color(--circle-border); |
| 63 | 63 | ||
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 @@ | |||
| 116 | background-color: fn.color(--handle-border); | 116 | background-color: fn.color(--handle-border); |
| 117 | 117 | ||
| 118 | &::after { | 118 | &::after { |
| 119 | left: calc(#{fn.dim(--width)} - #{fn.dim(--height)} + .5px); | 119 | left: calc(fn.dim(--width) - fn.dim(--height) + .5px); |
| 120 | border-color: fn.color(--handle-border); | 120 | border-color: fn.color(--handle-border); |
| 121 | } | 121 | } |
| 122 | } | 122 | } |
