diff options
Diffstat (limited to 'src/objects/_button.scss')
-rw-r--r-- | src/objects/_button.scss | 30 |
1 files changed, 24 insertions, 6 deletions
diff --git a/src/objects/_button.scss b/src/objects/_button.scss index d3588f6..a823f17 100644 --- a/src/objects/_button.scss +++ b/src/objects/_button.scss | |||
@@ -47,11 +47,24 @@ $themes: primary accent positive negative warning; | |||
47 | --line-height: 1.4, | 47 | --line-height: 1.4, |
48 | --pad-i: fn.global-dim(--size --225), | 48 | --pad-i: fn.global-dim(--size --225), |
49 | --pad-b: fn.global-dim(--size --65), | 49 | --pad-b: fn.global-dim(--size --65), |
50 | --border: fn.global-dim(--border --medium), | ||
50 | --rounding: 10em, | 51 | --rounding: 10em, |
52 | --font-size: fn.global-dim(--font-size --100), | ||
51 | 53 | ||
54 | --sm: ( | ||
55 | --pad-i: fn.global-dim(--size --150), | ||
56 | --pad-b: fn.global-dim(--size --25), | ||
57 | --font-size: fn.global-dim(--font-size --75), | ||
58 | ), | ||
52 | --lg: ( | 59 | --lg: ( |
53 | --pad-i: fn.global-dim(--size --300), | 60 | --pad-i: fn.global-dim(--size --300), |
54 | --pad-b: fn.global-dim(--size --100), | 61 | --pad-b: fn.global-dim(--size --100), |
62 | --font-size: fn.global-dim(--font-size --150), | ||
63 | ), | ||
64 | --xl: ( | ||
65 | --pad-i: fn.global-dim(--size --400), | ||
66 | --pad-b: fn.global-dim(--size --150), | ||
67 | --font-size: fn.global-dim(--font-size --200), | ||
55 | ), | 68 | ), |
56 | ), | 69 | ), |
57 | --colors: ( | 70 | --colors: ( |
@@ -121,11 +134,12 @@ $themes: primary accent positive negative warning; | |||
121 | display: inline-block; | 134 | display: inline-block; |
122 | padding-block: fn.dim(--pad-b); | 135 | padding-block: fn.dim(--pad-b); |
123 | padding-inline: fn.dim(--pad-i); | 136 | padding-inline: fn.dim(--pad-i); |
124 | border: 2px solid transparent; | 137 | border: fn.dim(--border) solid transparent; |
125 | border-radius: fn.dim(--rounding); | 138 | border-radius: fn.dim(--rounding); |
126 | border-color: fn.color(--disabled --bg); | 139 | border-color: fn.color(--disabled --bg); |
127 | background-color: fn.color(--disabled --bg); | 140 | background-color: fn.color(--disabled --bg); |
128 | color: fn.color(--disabled --label); | 141 | color: fn.color(--disabled --label); |
142 | font-size: fn.dim(--font-size); | ||
129 | font-weight: 500; | 143 | font-weight: 500; |
130 | line-height: fn.dim(--line-height); | 144 | line-height: fn.dim(--line-height); |
131 | text-align: center; | 145 | text-align: center; |
@@ -141,9 +155,12 @@ $themes: primary accent positive negative warning; | |||
141 | box-shadow: none; | 155 | box-shadow: none; |
142 | } | 156 | } |
143 | 157 | ||
144 | @include iro.bem-modifier('lg') { | 158 | @each $size in sm lg xl { |
145 | padding-block: fn.dim(--lg --pad-b); | 159 | @include iro.bem-modifier($size) { |
146 | padding-inline: fn.dim(--lg --pad-i); | 160 | padding-block: fn.dim(--#{$size} --pad-b); |
161 | padding-inline: fn.dim(--#{$size} --pad-i); | ||
162 | font-size: fn.dim(--#{$size} --font-size); | ||
163 | } | ||
147 | } | 164 | } |
148 | 165 | ||
149 | @include button-variant(); | 166 | @include button-variant(); |
@@ -160,6 +177,7 @@ $themes: primary accent positive negative warning; | |||
160 | &:focus-visible { | 177 | &:focus-visible { |
161 | border-color: fn.color(--key-focus --border); | 178 | border-color: fn.color(--key-focus --border); |
162 | background-color: fn.color(--key-focus --bg); | 179 | background-color: fn.color(--key-focus --bg); |
180 | box-shadow: 0 0 0 calc(fn.global-dim(--border --thick) - fn.dim(--border)) fn.color(--key-focus --border); | ||
163 | color: fn.color(--key-focus --label); | 181 | color: fn.color(--key-focus --label); |
164 | } | 182 | } |
165 | } | 183 | } |