1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
|
@use 'sass:list';
@use 'sass:map';
@use 'sass:meta';
@use 'iro-sass/src/iro-sass' as iro;
@use '../props';
@forward 'action-button.vars';
@use 'action-button.vars' as vars;
@mixin -apply-theme($theme, $key: ()) {
color: props.get($theme, list.join($key, --disabled --label)...);
background-color: props.get($theme, list.join($key, --disabled --bg)...);
border-color: props.get($theme, list.join($key, --disabled --border)...);
&::after {
outline-color: props.get($theme, list.join($key, --key-focus --border)...);
box-shadow:
0
0
0
calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
props.get($theme, list.join($key, --key-focus --outline-width)...);
}
&:link,
&:visited,
&:enabled {
color: props.get($theme, list.join($key, --label)...);
background-color: props.get($theme, list.join($key, --bg)...);
border-color: props.get($theme, list.join($key, --border)...);
&:hover,
&:focus-visible {
color: props.get($theme, list.join($key, --hover --label)...);
background-color: props.get($theme, list.join($key, --hover --bg)...);
border-color: props.get($theme, list.join($key, --hover --border)...);
}
&:active {
color: props.get($theme, list.join($key, --active --label)...);
background-color: props.get($theme, list.join($key, --active --bg)...);
border-color: props.get($theme, list.join($key, --active --border)...);
}
}
@include iro.bem-modifier('quiet') {
color: props.get($theme, list.join($key, --quiet --disabled --label)...);
background-color: transparent;
border-color: transparent;
&:link,
&:visited,
&:enabled {
color: props.get($theme, list.join($key, --quiet --label)...);
background-color: transparent;
border-color: transparent;
&:hover,
&:focus-visible {
color: props.get($theme, list.join($key, --quiet --hover --label)...);
background-color: props.get($theme, list.join($key, --quiet --hover --bg)...);
border-color: transparent;
}
&:active {
color: props.get($theme, list.join($key, --quiet --active --label)...);
background-color: props.get($theme, list.join($key, --quiet --active --bg)...);
border-color: transparent;
}
}
}
@include iro.bem-is('selected') {
color: props.get($theme, list.join($key, --selected --disabled --label)...);
background-color: props.get($theme, list.join($key, --selected --disabled --bg)...);
border-color: props.get($theme, list.join($key, --selected --disabled --border)...);
&:link,
&:visited,
&:enabled {
color: props.get($theme, list.join($key, --selected --label)...);
background-color: props.get($theme, list.join($key, --selected --bg)...);
border-color: props.get($theme, list.join($key, --selected --border)...);
&:hover,
&:focus-visible {
color: props.get($theme, list.join($key, --selected --hover --label)...);
background-color: props.get($theme, list.join($key, --selected --hover --bg)...);
border-color: props.get($theme, list.join($key, --selected --hover --border)...);
}
&:active {
color: props.get($theme, list.join($key, --selected --active --label)...);
background-color: props.get($theme, list.join($key, --selected --active --bg)...);
border-color: props.get($theme, list.join($key, --selected --active --border)...);
}
}
}
}
@mixin styles {
@include props.materialize(meta.module-variables('vars'));
@include iro.bem-object('action-button') {
position: relative;
display: inline-block;
padding-block: props.get(vars.$pad-b);
padding-inline: props.get(vars.$pad-i);
line-height: props.get(vars.$line-height);
text-align: center;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
border: props.get(vars.$border-width) solid transparent;
border-radius: props.get(vars.$rounding);
&::after {
position: absolute;
inset: calc(-1 * props.get(vars.$border-width) - props.get(vars.$key-focus--border-offset));
z-index: 1;
display: none;
pointer-events: none;
content: '';
border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
outline: transparent solid props.get(vars.$key-focus--border-width);
}
&:link,
&:visited,
&:enabled {
&:focus-visible {
&::after {
display: block;
}
}
}
@include -apply-theme(vars.$default-theme);
@each $theme in map.keys(props.get(vars.$static-themes)) {
@include iro.bem-modifier($theme) {
@include -apply-theme(vars.$static-themes, $theme);
}
}
@include iro.bem-modifier('pill') {
padding-inline: props.get(vars.$pad-i-pill);
border-radius: 100em;
&::after {
border-radius: 100em;
}
}
@each $mod, $pad-i, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
@include iro.bem-modifier($mod) {
padding-block: props.get($pad-i);
padding-inline: props.get($pad-i);
font-size: props.get($font-size);
@include iro.bem-modifier('pill') {
padding-inline: props.get($pad-i-pill);
}
}
}
@include iro.bem-modifier('icon') {
inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b));
padding-inline: 0;
@each $mod, $pad-i, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
@include iro.bem-modifier($mod) {
inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get($pad-b));
padding-inline: 0;
}
}
}
}
}
|
