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.scss213
1 files changed, 0 insertions, 213 deletions
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
deleted file mode 100644
index 1dd4b84..0000000
--- a/src/objects/_action-button.scss
+++ /dev/null
@@ -1,213 +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
34 &:hover,
35 &:focus-visible {
36 color: props.get($theme, list.join($key, --hover --label-color)...);
37 background-color: props.get($theme, list.join($key, --hover --bg-color)...);
38 border-color: props.get($theme, list.join($key, --hover --border-color)...);
39 }
40
41 &:active {
42 color: props.get($theme, list.join($key, --active --label-color)...);
43 background-color: props.get($theme, list.join($key, --active --bg-color)...);
44 border-color: props.get($theme, list.join($key, --active --border-color)...);
45 }
46 }
47
48 @include bem.modifier('quiet') {
49 color: props.get($theme, list.join($key, --quiet --disabled --label-color)...);
50 background-color: transparent;
51 border-color: transparent;
52
53 &:link,
54 &:visited,
55 &:enabled {
56 color: props.get($theme, list.join($key, --quiet --label-color)...);
57 background-color: transparent;
58 border-color: transparent;
59
60 &:hover,
61 &:focus-visible {
62 color: props.get($theme, list.join($key, --quiet --hover --label-color)...);
63 background-color: props.get($theme, list.join($key, --quiet --hover --bg-color)...);
64 border-color: transparent;
65 }
66
67 &:active {
68 color: props.get($theme, list.join($key, --quiet --active --label-color)...);
69 background-color: props.get($theme, list.join($key, --quiet --active --bg-color)...);
70 border-color: transparent;
71 }
72 }
73 }
74
75 @include bem.is('selected') {
76 color: props.get($theme, list.join($key, --selected --disabled --label-color)...);
77 background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...);
78 border-color: props.get($theme, list.join($key, --selected --disabled --border-color)...);
79
80 &:link,
81 &:visited,
82 &:enabled {
83 color: props.get($theme, list.join($key, --selected --label-color)...);
84 background-color: props.get($theme, list.join($key, --selected --bg-color)...);
85 border-color: props.get($theme, list.join($key, --selected --border-color)...);
86
87 &:hover,
88 &:focus-visible {
89 color: props.get($theme, list.join($key, --selected --hover --label-color)...);
90 background-color: props.get($theme, list.join($key, --selected --hover --bg-color)...);
91 border-color: props.get($theme, list.join($key, --selected --hover --border-color)...);
92 }
93
94 &:active {
95 color: props.get($theme, list.join($key, --selected --active --label-color)...);
96 background-color: props.get($theme, list.join($key, --selected --active --bg-color)...);
97 border-color: props.get($theme, list.join($key, --selected --active --border-color)...);
98 }
99 }
100 }
101}
102
103@mixin styles {
104 @include materialize-at-root(meta.module-variables('vars'));
105
106 @include bem.object('action-button') {
107 position: relative;
108 display: inline-block;
109 padding-block: props.get(vars.$pad-b);
110 padding-inline: props.get(vars.$pad-i);
111 line-height: props.get(vars.$line-height);
112 text-align: center;
113 text-decoration: none;
114 text-overflow: ellipsis;
115 white-space: nowrap;
116 border: props.get(vars.$border-width) solid transparent;
117 border-radius: props.get(vars.$rounding);
118
119 &::after {
120 position: absolute;
121 inset: calc(-1 * props.get(vars.$border-width) - props.get(vars.$key-focus--border-offset));
122 z-index: 1;
123 display: none;
124 pointer-events: none;
125 content: '';
126 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
127 outline: transparent solid props.get(vars.$key-focus--border-width);
128 }
129
130 &:link,
131 &:visited,
132 &:enabled {
133 &:focus-visible {
134 &::after {
135 display: block;
136 }
137 }
138 }
139
140 @include bem.elem('label') {
141 margin-inline: props.get(vars.$pad-i-label);
142 }
143
144 @include -apply-theme(vars.$default-theme);
145
146 @each $theme in map.keys(props.get(vars.$themes)) {
147 @include bem.modifier(string.slice($theme, 3)) {
148 @include -apply-theme(vars.$themes, $theme);
149 }
150 }
151
152 @include bem.modifier('pill') {
153 padding-inline: props.get(vars.$pad-i-pill);
154 border-radius: 100em;
155
156 &::after {
157 border-radius: 100em;
158 }
159 }
160
161 @include bem.modifier('icon') {
162 inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b));
163 padding-inline: 0;
164 }
165
166 @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
167 @include bem.modifier($mod) {
168 padding-block: props.get($pad-b);
169 padding-inline: props.get($pad-i);
170 font-size: props.get($font-size);
171
172 @include bem.elem('label') {
173 margin-inline: props.get($pad-i-label);
174 }
175
176 @include bem.modifier('pill') {
177 padding-inline: props.get($pad-i-pill);
178 }
179
180 @include bem.modifier('icon') {
181 inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get($pad-b));
182 padding-inline: 0;
183 }
184 }
185 }
186
187 @include bem.modifier('align-block') {
188 margin-inline: calc(-1 * props.get(vars.$pad-i) - props.get(vars.$border-width));
189
190 @include bem.modifier('pill') {
191 margin-inline: calc(-1 * props.get(vars.$pad-i-pill) - props.get(vars.$border-width));
192 }
193
194 @include bem.modifier('icon') {
195 margin-inline: calc(-1 * props.get(vars.$pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1));
196 }
197
198 @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
199 @include bem.modifier($mod) {
200 margin-inline: calc(-1 * props.get($pad-i) - props.get(vars.$border-width));
201
202 @include bem.modifier('pill') {
203 margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(vars.$border-width));
204 }
205
206 @include bem.modifier('icon') {
207 margin-inline: calc(-1 * props.get($pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1));
208 }
209 }
210 }
211 }
212 }
213}
generated by cgit v1.2.3-70-g09d2 (git 2.50.0) at 2025-09-14 02:43:38 +0000