diff options
Diffstat (limited to 'src')
| -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 | ||
