diff options
Diffstat (limited to 'src/objects')
-rw-r--r-- | src/objects/_badge.scss | 3 | ||||
-rw-r--r-- | src/objects/_button.scss | 32 |
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 | ||