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