summaryrefslogtreecommitdiffstats
path: root/src/objects/_button.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects/_button.scss')
-rw-r--r--src/objects/_button.scss226
1 files changed, 162 insertions, 64 deletions
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index aaf55b5..0467f24 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -5,72 +5,141 @@
5@use 'iro-sass/src/bem'; 5@use 'iro-sass/src/bem';
6@use 'iro-sass/src/props'; 6@use 'iro-sass/src/props';
7@use '../props' as *; 7@use '../props' as *;
8@use '../core.vars' as core;
9 8
10@forward 'button.vars'; 9@forward 'button.vars';
11@use 'button.vars' as vars; 10@use 'button.vars' as vars;
12 11
13@mixin -apply-theme($theme, $key: ()) { 12@mixin -apply-theme($theme, $key: ()) {
14 &:link, 13 color: props.get($theme, list.join($key, --disabled --label-color)...);
15 &:visited, 14 background-color: props.get($theme, list.join($key, --disabled --bg-color)...);
16 &:enabled { 15 border-color: props.get($theme, list.join($key, --disabled --border-color)...);
17 color: props.get($theme, list.join($key, --label)...); 16
18 background-color: props.get($theme, list.join($key, --bg)...); 17 &::after {
19 border-color: transparent; 18 outline-color: props.get($theme, list.join($key, --key-focus --border-color)...);
20 } 19 box-shadow:
21 20 0
22 @include bem.modifier('outline') { 21 0
23 &:link, 22 0
24 &:visited, 23 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
25 &:enabled { 24 props.get($theme, list.join($key, --key-focus --outline-color)...);
26 color: props.get($theme, list.join($key, --outline-label)...);
27 background-color: transparent;
28 border-color: props.get($theme, list.join($key, --outline-border)...);
29 }
30 } 25 }
31 26
32 &:link, 27 &:link,
33 &:visited, 28 &:visited,
34 &:enabled { 29 &:enabled {
30 color: props.get($theme, list.join($key, --label-color)...);
31 background-color: props.get($theme, list.join($key, --bg-color)...);
32 border-color: props.get($theme, list.join($key, --border-color)...);
33 box-shadow:
34 props.get(vars.$shadow-x)
35 props.get(vars.$shadow-y)
36 props.get(vars.$shadow-blur)
37 props.get(vars.$shadow-grow)
38 props.get($theme, list.join($key, --shadow-color)...);
39
35 &:hover, 40 &:hover,
36 &:focus-visible { 41 &:focus-visible {
37 color: props.get($theme, list.join($key, --hover --label)...); 42 color: props.get($theme, list.join($key, --hover --label-color)...);
38 background-color: props.get($theme, list.join($key, --hover --bg)...); 43 background-color: props.get($theme, list.join($key, --hover --bg-color)...);
39 border-color: transparent; 44 border-color: props.get($theme, list.join($key, --hover --border-color)...);
40 } 45 }
41 46
42 &:active { 47 &:active {
43 color: props.get($theme, list.join($key, --active --label)...); 48 color: props.get($theme, list.join($key, --active --label-color)...);
44 background-color: props.get($theme, list.join($key, --active --bg)...); 49 background-color: props.get($theme, list.join($key, --active --bg-color)...);
45 border-color: transparent; 50 border-color: props.get($theme, list.join($key, --active --border-color)...);
51 box-shadow: none;
46 } 52 }
47 } 53 }
48}
49 54
50@mixin -apply-static-theme($theme, $key: ()) { 55 @include bem.modifier('static') {
51 color: props.get($theme, list.join($key, --disabled --label)...); 56 color: props.get($theme, list.join($key, --static --label-color)...);
52 background-color: props.get($theme, list.join($key, --disabled --bg)...); 57 background-color: props.get($theme, list.join($key, --static --bg-color)...);
53 border-color: transparent; 58 border-color: props.get($theme, list.join($key, --static --border-color)...);
59 box-shadow: none;
54 60
55 &::after { 61 &:link,
56 outline-color: props.get($theme, list.join($key, --key-focus --border)...); 62 &:visited,
57 box-shadow: 63 &:enabled {
58 0 64 color: props.get($theme, list.join($key, --static --label-color)...);
59 0 65 background-color: props.get($theme, list.join($key, --static --bg-color)...);
60 0 66 border-color: props.get($theme, list.join($key, --static --border-color)...);
61 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) 67 box-shadow: none;
62 props.get($theme, list.join($key, --key-focus --outline)...); 68
69 &:hover,
70 &:focus-visible {
71 color: props.get($theme, list.join($key, --static --hover --label-color)...);
72 background-color: props.get($theme, list.join($key, --static --hover --bg-color)...);
73 border-color: props.get($theme, list.join($key, --static --hover --border-color)...);
74 }
75
76 &:active {
77 color: props.get($theme, list.join($key, --static --active --label-color)...);
78 background-color: props.get($theme, list.join($key, --static --active --bg-color)...);
79 border-color: props.get($theme, list.join($key, --static --active --border-color)...);
80 }
81 }
63 } 82 }
64 83
65 @include bem.modifier('outline') { 84 @include bem.modifier('quiet') {
85 color: props.get($theme, list.join($key, --quiet --disabled --label-color)...);
66 background-color: transparent; 86 background-color: transparent;
67 border-color: props.get($theme, list.join($key, --disabled --outline-border)...); 87 border-color: transparent;
88
89 &:link,
90 &:visited,
91 &:enabled {
92 color: props.get($theme, list.join($key, --quiet --label-color)...);
93 background-color: transparent;
94 border-color: transparent;
95 box-shadow: none;
96
97 &:hover,
98 &:focus-visible {
99 color: props.get($theme, list.join($key, --quiet --hover --label-color)...);
100 background-color: props.get($theme, list.join($key, --quiet --hover --bg-color)...);
101 border-color: transparent;
102 }
103
104 &:active {
105 color: props.get($theme, list.join($key, --quiet --active --label-color)...);
106 background-color: props.get($theme, list.join($key, --quiet --active --bg-color)...);
107 border-color: transparent;
108 }
109 }
68 } 110 }
69 111
70 @include -apply-theme($theme, $key); 112 @include bem.is('selected') {
113 color: props.get($theme, list.join($key, --selected --disabled --label-color)...);
114 background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...);
115 border-color: props.get($theme, list.join($key, --selected --disabled --border-color)...);
71 116
72 @include bem.modifier('primary') { 117 @include bem.modifier('static') {
73 @include -apply-theme($theme, list.join($key, --primary)); 118 color: props.get($theme, list.join($key, --selected --label-color)...);
119 background-color: props.get($theme, list.join($key, --selected --bg-color)...);
120 border-color: props.get($theme, list.join($key, --selected --border-color)...);
121 }
122
123 &:link,
124 &:visited,
125 &:enabled {
126 color: props.get($theme, list.join($key, --selected --label-color)...);
127 background-color: props.get($theme, list.join($key, --selected --bg-color)...);
128 border-color: props.get($theme, list.join($key, --selected --border-color)...);
129
130 &:hover,
131 &:focus-visible {
132 color: props.get($theme, list.join($key, --selected --hover --label-color)...);
133 background-color: props.get($theme, list.join($key, --selected --hover --bg-color)...);
134 border-color: props.get($theme, list.join($key, --selected --hover --border-color)...);
135 }
136
137 &:active {
138 color: props.get($theme, list.join($key, --selected --active --label-color)...);
139 background-color: props.get($theme, list.join($key, --selected --active --bg-color)...);
140 border-color: props.get($theme, list.join($key, --selected --active --border-color)...);
141 }
142 }
74 } 143 }
75} 144}
76 145
@@ -82,11 +151,11 @@
82 display: inline-block; 151 display: inline-block;
83 padding-block: props.get(vars.$pad-b); 152 padding-block: props.get(vars.$pad-b);
84 padding-inline: props.get(vars.$pad-i); 153 padding-inline: props.get(vars.$pad-i);
85 font-size: props.get(vars.$font-size);
86 font-weight: 500;
87 line-height: props.get(vars.$line-height); 154 line-height: props.get(vars.$line-height);
88 text-align: center; 155 text-align: center;
89 text-decoration: none; 156 text-decoration: none;
157 text-overflow: ellipsis;
158 white-space: nowrap;
90 border: props.get(vars.$border-width) solid transparent; 159 border: props.get(vars.$border-width) solid transparent;
91 border-radius: props.get(vars.$rounding); 160 border-radius: props.get(vars.$rounding);
92 161
@@ -114,16 +183,30 @@
114 @include bem.elem('label') { 183 @include bem.elem('label') {
115 margin-inline: props.get(vars.$pad-i-label); 184 margin-inline: props.get(vars.$pad-i-label);
116 } 185 }
117 186
118 @include bem.modifier('block') { 187 @include -apply-theme(vars.$default-theme);
119 display: block; 188
189 @each $theme in map.keys(props.get(vars.$themes)) {
190 @include bem.modifier(string.slice($theme, 3)) {
191 @include -apply-theme(vars.$themes, $theme);
192 }
120 } 193 }
121 194
122 @include bem.modifier('outline') { 195 @include bem.modifier('pill') {
123 background-color: transparent; 196 padding-inline: props.get(vars.$pad-i-pill);
197 border-radius: 100em;
198
199 &::after {
200 border-radius: 100em;
201 }
202 }
203
204 @include bem.modifier('icon') {
205 inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b));
206 padding-inline: 0;
124 } 207 }
125 208
126 @each $mod, $pad-i, $pad-i-label, $pad-b, $font-size in vars.$sizes { 209 @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
127 @include bem.modifier($mod) { 210 @include bem.modifier($mod) {
128 padding-block: props.get($pad-b); 211 padding-block: props.get($pad-b);
129 padding-inline: props.get($pad-i); 212 padding-inline: props.get($pad-i);
@@ -132,27 +215,42 @@
132 @include bem.elem('label') { 215 @include bem.elem('label') {
133 margin-inline: props.get($pad-i-label); 216 margin-inline: props.get($pad-i-label);
134 } 217 }
218
219 @include bem.modifier('pill') {
220 padding-inline: props.get($pad-i-pill);
221 }
222
223 @include bem.modifier('icon') {
224 inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get($pad-b));
225 padding-inline: 0;
226 }
135 } 227 }
136 } 228 }
137 229
138 @include -apply-static-theme(vars.$default-theme); 230 @include bem.modifier('align-block') {
231 margin-inline: calc(-1 * props.get(vars.$pad-i) - props.get(vars.$border-width));
139 232
140 @each $theme in map.keys(props.get(vars.$themes)) { 233 @include bem.modifier('pill') {
141 @include bem.modifier(string.slice($theme, 3)) { 234 margin-inline: calc(-1 * props.get(vars.$pad-i-pill) - props.get(vars.$border-width));
142 @include -apply-theme(vars.$themes, $theme);
143 } 235 }
144 }
145 236
146 @each $theme in map.keys(props.get(vars.$static-themes)) { 237 @include bem.modifier('icon') {
147 @include bem.modifier(string.slice($theme, 3)) { 238 margin-inline: calc(-1 * props.get(vars.$pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1));
148 @include -apply-static-theme(vars.$static-themes, $theme);
149 } 239 }
150 } 240
241 @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
242 @include bem.modifier($mod) {
243 margin-inline: calc(-1 * props.get($pad-i) - props.get(vars.$border-width));
151 244
152 @include bem.modifier('round') { 245 @include bem.modifier('pill') {
153 inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b)); 246 margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(vars.$border-width));
154 padding-inline: 0; 247 }
155 border-radius: 100em; 248
249 @include bem.modifier('icon') {
250 margin-inline: calc(-1 * props.get($pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1));
251 }
252 }
253 }
156 } 254 }
157 } 255 }
158} 256}
generated by cgit v1.2.3-70-g09d2 (git 2.50.0) at 2025-07-26 01:41:21 +0000