summaryrefslogtreecommitdiffstats
path: root/src/objects
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects')
-rw-r--r--src/objects/_badge.scss3
-rw-r--r--src/objects/_button.scss32
2 files changed, 24 insertions, 11 deletions
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss
index 8a9fb58..4e1662f 100644
--- a/src/objects/_badge.scss
+++ b/src/objects/_badge.scss
@@ -2,6 +2,7 @@
2@use 'iro-sass/src/index' as iro; 2@use 'iro-sass/src/index' as iro;
3@use '../functions' as fn; 3@use '../functions' as fn;
4 4
5$sizes: 'sm' 'lg' 'xl' !default;
5$themes: 'accent' 'positive' 'negative' 'warning' !default; 6$themes: 'accent' 'positive' 'negative' 'warning' !default;
6$static-themes: 'black' 'white' !default; 7$static-themes: 'black' 'white' !default;
7 8
@@ -280,7 +281,7 @@ $static-themes: 'black' 'white' !default;
280 } 281 }
281 } 282 }
282 283
283 @each $size in sm lg xl { 284 @each $size in $sizes {
284 @include iro.bem-modifier($size) { 285 @include iro.bem-modifier($size) {
285 padding-block: fn.dim(--#{$size} --pad-b); 286 padding-block: fn.dim(--#{$size} --pad-b);
286 padding-inline: fn.dim(--#{$size} --pad-i); 287 padding-inline: fn.dim(--#{$size} --pad-i);
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index 98ac8ef..8f1b533 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -69,26 +69,30 @@ $static-themes: 'black' 'white' !default;
69 @include iro.props-store(( 69 @include iro.props-store((
70 --dims: ( 70 --dims: (
71 --line-height: 1.4, 71 --line-height: 1.4,
72 --pad-i: fn.global-dim(--size --225), 72 --pad-i: fn.global-dim(--size --150),
73 --pad-i-label: fn.global-dim(--size --75),
73 --pad-b: fn.global-dim(--size --65), 74 --pad-b: fn.global-dim(--size --65),
74 --border: fn.global-dim(--border --medium), 75 --border: fn.global-dim(--border --medium),
75 --rounding: 10em, 76 --rounding: 10em,
76 --font-size: fn.global-dim(--font-size --100), 77 --font-size: fn.global-dim(--font-size --100),
77 78
78 --sm: ( 79 --sm: (
79 --pad-i: fn.global-dim(--size --150), 80 --pad-i: fn.global-dim(--size --100),
80 --pad-b: fn.global-dim(--size --25), 81 --pad-i-label: fn.global-dim(--size --50),
81 --font-size: fn.global-dim(--font-size --75), 82 --pad-b: fn.global-dim(--size --25),
83 --font-size: fn.global-dim(--font-size --75),
82 ), 84 ),
83 --lg: ( 85 --lg: (
84 --pad-i: fn.global-dim(--size --300), 86 --pad-i: fn.global-dim(--size --200),
85 --pad-b: fn.global-dim(--size --100), 87 --pad-i-label: fn.global-dim(--size --100),
86 --font-size: fn.global-dim(--font-size --150), 88 --pad-b: fn.global-dim(--size --100),
89 --font-size: fn.global-dim(--font-size --150),
87 ), 90 ),
88 --xl: ( 91 --xl: (
89 --pad-i: fn.global-dim(--size --400), 92 --pad-i: fn.global-dim(--size --250),
90 --pad-b: fn.global-dim(--size --150), 93 --pad-i-label: fn.global-dim(--size --150),
91 --font-size: fn.global-dim(--font-size --200), 94 --pad-b: fn.global-dim(--size --150),
95 --font-size: fn.global-dim(--font-size --200),
92 ), 96 ),
93 97
94 --key-focus: ( 98 --key-focus: (
@@ -248,6 +252,10 @@ $static-themes: 'black' 'white' !default;
248 } 252 }
249 } 253 }
250 } 254 }
255
256 @include iro.bem-elem('label') {
257 margin-inline: fn.dim(--pad-i-label);
258 }
251 259
252 @include iro.bem-modifier('block') { 260 @include iro.bem-modifier('block') {
253 display: block; 261 display: block;
@@ -263,6 +271,10 @@ $static-themes: 'black' 'white' !default;
263 padding-block: fn.dim(--#{$size} --pad-b); 271 padding-block: fn.dim(--#{$size} --pad-b);
264 padding-inline: fn.dim(--#{$size} --pad-i); 272 padding-inline: fn.dim(--#{$size} --pad-i);
265 font-size: fn.dim(--#{$size} --font-size); 273 font-size: fn.dim(--#{$size} --font-size);
274
275 @include iro.bem-elem('label') {
276 margin-inline: fn.dim(--#{$size} --pad-i-label);
277 }
266 } 278 }
267 } 279 }
268 280