summaryrefslogtreecommitdiffstats
path: root/src/objects/_action-button.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects/_action-button.scss')
-rw-r--r--src/objects/_action-button.scss256
1 files changed, 0 insertions, 256 deletions
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
deleted file mode 100644
index c997679..0000000
--- a/src/objects/_action-button.scss
+++ /dev/null
@@ -1,256 +0,0 @@
1@use 'sass:list';
2@use 'sass:map';
3@use 'sass:meta';
4@use 'sass:string';
5@use 'iro-sass/src/bem';
6@use 'iro-sass/src/props';
7@use '../props' as *;
8
9@forward 'action-button.vars';
10@use 'action-button.vars' as vars;
11
12@mixin -apply-theme($theme, $key: ()) {
13 color: props.get($theme, list.join($key, --disabled --label-color)...);
14 background-color: props.get($theme, list.join($key, --disabled --bg-color)...);
15 border-color: props.get($theme, list.join($key, --disabled --border-color)...);
16
17 &::after {
18 outline-color: props.get($theme, list.join($key, --key-focus --border-color)...);
19 box-shadow:
20 0
21 0
22 0
23 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
24 props.get($theme, list.join($key, --key-focus --outline-color)...);
25 }
26
27 &:link,
28 &:visited,
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
40 &:hover,
41 &:focus-visible {
42 color: props.get($theme, list.join($key, --hover --label-color)...);
43 background-color: props.get($theme, list.join($key, --hover --bg-color)...);
44 border-color: props.get($theme, list.join($key, --hover --border-color)...);
45 }
46
47 &:active {
48 color: props.get($theme, list.join($key, --active --label-color)...);
49 background-color: props.get($theme, list.join($key, --active --bg-color)...);
50 border-color: props.get($theme, list.join($key, --active --border-color)...);
51 box-shadow: none;
52 }
53 }
54
55 @include bem.modifier('static') {
56 color: props.get($theme, list.join($key, --static --label-color)...);
57 background-color: props.get($theme, list.join($key, --static --bg-color)...);
58 border-color: props.get($theme, list.join($key, --static --border-color)...);
59 box-shadow: none;
60
61 &:link,
62 &:visited,
63 &:enabled {
64 color: props.get($theme, list.join($key, --static --label-color)...);
65 background-color: props.get($theme, list.join($key, --static --bg-color)...);
66 border-color: props.get($theme, list.join($key, --static --border-color)...);
67 box-shadow: none;
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 }
82 }
83
84 @include bem.modifier('quiet') {
85 color: props.get($theme, list.join($key, --quiet --disabled --label-color)...);
86 background-color: transparent;
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 }
110 }
111
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)...);
116
117 @include bem.modifier('static') {
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 }
143 }
144}
145
146@mixin styles {
147 @include materialize-at-root(meta.module-variables('vars'));
148
149 @include bem.object('action-button') {
150 position: relative;
151 display: inline-block;
152 padding-block: props.get(vars.$pad-b);
153 padding-inline: props.get(vars.$pad-i);
154 line-height: props.get(vars.$line-height);
155 text-align: center;
156 text-decoration: none;
157 text-overflow: ellipsis;
158 white-space: nowrap;
159 border: props.get(vars.$border-width) solid transparent;
160 border-radius: props.get(vars.$rounding);
161
162 &::after {
163 position: absolute;
164 inset: calc(-1 * props.get(vars.$border-width) - props.get(vars.$key-focus--border-offset));
165 z-index: 1;
166 display: none;
167 pointer-events: none;
168 content: '';
169 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
170 outline: transparent solid props.get(vars.$key-focus--border-width);
171 }
172
173 &:link,
174 &:visited,
175 &:enabled {
176 &:focus-visible {
177 &::after {
178 display: block;
179 }
180 }
181 }
182
183 @include bem.elem('label') {
184 margin-inline: props.get(vars.$pad-i-label);
185 }
186
187 @include -apply-theme(vars.$default-theme);
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 }
193 }
194
195 @include bem.modifier('pill') {
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;
207 }
208
209 @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
210 @include bem.modifier($mod) {
211 padding-block: props.get($pad-b);
212 padding-inline: props.get($pad-i);
213 font-size: props.get($font-size);
214
215 @include bem.elem('label') {
216 margin-inline: props.get($pad-i-label);
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 }
227 }
228 }
229
230 @include bem.modifier('align-block') {
231 margin-inline: calc(-1 * props.get(vars.$pad-i) - props.get(vars.$border-width));
232
233 @include bem.modifier('pill') {
234 margin-inline: calc(-1 * props.get(vars.$pad-i-pill) - props.get(vars.$border-width));
235 }
236
237 @include bem.modifier('icon') {
238 margin-inline: calc(-1 * props.get(vars.$pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1));
239 }
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));
244
245 @include bem.modifier('pill') {
246 margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(vars.$border-width));
247 }
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 }
254 }
255 }
256}
generated by cgit v1.3.1 (git 2.54.0) at 2026-07-22 15:58:27 +0000