summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-02-06 17:30:31 +0100
committerVolpeon <git@volpeon.ink>2022-02-06 17:30:31 +0100
commit953843dea745ef5e064acd589742a49cb7a7ea54 (patch)
tree955b91ce90787e792abd52c3eef8ab046bd30623 /src
parentSeparate function for global props (diff)
downloadiro-design-953843dea745ef5e064acd589742a49cb7a7ea54.tar.gz
iro-design-953843dea745ef5e064acd589742a49cb7a7ea54.tar.bz2
iro-design-953843dea745ef5e064acd589742a49cb7a7ea54.zip
Cleanup
Diffstat (limited to 'src')
-rw-r--r--src/mixins/_grid.scss88
-rw-r--r--src/objects/_button.scss26
-rw-r--r--src/objects/_checkbox.scss10
-rw-r--r--src/objects/_radio.scss2
-rw-r--r--src/objects/_switch.scss2
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 }
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-22 09:34:52 +0000