summaryrefslogtreecommitdiffstats
path: root/src/objects/_action-button.scss
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-06-25 21:45:22 +0200
committerVolpeon <git@volpeon.ink>2024-06-25 21:45:22 +0200
commita6745cc1c39dca0a26a72ffde885dda33acfed5f (patch)
tree93801d1552ce1f30bf6b6b23c0dd731ba8fa6067 /src/objects/_action-button.scss
parentFix form (diff)
downloadiro-design-a6745cc1c39dca0a26a72ffde885dda33acfed5f.tar.gz
iro-design-a6745cc1c39dca0a26a72ffde885dda33acfed5f.tar.bz2
iro-design-a6745cc1c39dca0a26a72ffde885dda33acfed5f.zip
Added back action button
Diffstat (limited to 'src/objects/_action-button.scss')
-rw-r--r--src/objects/_action-button.scss227
1 files changed, 227 insertions, 0 deletions
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
new file mode 100644
index 0000000..6f0288d
--- /dev/null
+++ b/src/objects/_action-button.scss
@@ -0,0 +1,227 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('action-button') {
5 @include iro.props-store((
6 --dims: (
7 --line-height: 1.4,
8 --pad-i: fn.global-dim(--size --100),
9 --pad-b: fn.global-dim(--size --85),
10 --border: fn.global-dim(--border --thin),
11 --rounding: fn.global-dim(--rounding),
12
13 --key-focus: (
14 --border: fn.global-dim(--key-focus --border),
15 --border-offset: fn.global-dim(--key-focus --border-offset),
16 --outline: fn.global-dim(--key-focus --outline),
17 ),
18 ),
19 --colors: (
20 --bg: fn.global-color(--base --75),
21 --label: fn.global-color(--text),
22 --border: fn.global-color(--border-strong),
23
24 --hover: (
25 --bg: fn.global-color(--base --50),
26 --label: fn.global-color(--heading),
27 --border: fn.global-color(--text-mute-more),
28 ),
29 --active: (
30 --bg: fn.global-color(--border-mute),
31 --label: fn.global-color(--heading),
32 --border: fn.global-color(--text-mute-more),
33 ),
34 --selected: (
35 --bg: fn.global-color(--border-mute),
36 --label: fn.global-color(--text),
37 --border: fn.global-color(--text-disabled),
38
39 --hover: (
40 --label: fn.global-color(--heading),
41 --border: fn.global-color(--text-mute-more),
42 ),
43 ),
44 --disabled: (
45 --bg: fn.global-color(--bg-base),
46 --label: fn.global-color(--text-disabled),
47 --border: fn.global-color(--border-mute),
48 ),
49 --key-focus: (
50 --border: fn.global-color(--focus --border),
51 --outline: fn.global-color(--focus --outline),
52 ),
53 --quiet: (
54 --label: fn.global-color(--text),
55
56 --hover: (
57 --bg: fn.global-color(--border-mute),
58 --label: fn.global-color(--heading),
59 ),
60 --active: (
61 --bg: fn.global-color(--border),
62 --label: fn.global-color(--heading),
63 ),
64 --selected: (
65 --bg: fn.global-color(--border-mute),
66 --label: fn.global-color(--text),
67
68 --hover: (
69 --bg: fn.global-color(--border),
70 --label: fn.global-color(--heading),
71 ),
72 ),
73 --disabled: (
74 --label: fn.global-color(--text-disabled),
75 ),
76 ),
77 ),
78 ));
79
80 @include iro.bem-object(iro.props-namespace()) {
81 display: inline-block;
82 position: relative;
83 padding-block: fn.dim(--pad-b);
84 padding-inline: fn.dim(--pad-i);
85 border: fn.dim(--border) solid fn.color(--disabled --border);
86 border-radius: fn.dim(--rounding);
87 background-color: fn.color(--disabled --bg);
88 color: fn.color(--disabled --label);
89 line-height: fn.dim(--line-height);
90 text-align: center;
91 text-decoration: none;
92 text-overflow: ellipsis;
93 vertical-align: top;
94 white-space: nowrap;
95
96 &::after {
97 content: '';
98 display: none;
99 position: absolute;
100 z-index: 1;
101 inset: calc(-1 * fn.dim(--border) - fn.dim(--key-focus --border-offset));
102 border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset));
103 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
104 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
105 pointer-events: none;
106 }
107
108 &:link,
109 &:visited,
110 &:enabled {
111 border-color: fn.color(--border);
112 background-color: fn.color(--bg);
113 color: fn.color(--label);
114
115 &:hover,
116 &:focus-visible {
117 border-color: fn.color(--hover --border);
118 background-color: fn.color(--hover --bg);
119 color: fn.color(--hover --label);
120 }
121
122 &:active {
123 border-color: fn.color(--active --border);
124 background-color: fn.color(--active --bg);
125 color: fn.color(--active --label);
126 }
127
128 &:focus-visible {
129 &::after {
130 display: block;
131 }
132 }
133 }
134
135 @include iro.bem-is('selected') {
136 &:link,
137 &:visited,
138 &:enabled {
139 border-color: fn.color(--selected --border);
140 background-color: fn.color(--selected --bg);
141 color: fn.color(--selected --label);
142
143 &:hover,
144 &:active,
145 &:focus-visible {
146 border-color: fn.color(--selected --hover --border);
147 background-color: fn.color(--selected --bg);
148 color: fn.color(--selected --hover --label);
149 }
150
151 @include iro.bem-at-theme('keyboard') {
152 &:focus {
153 background-color: fn.color(--selected --bg);
154 color: fn.color(--selected --hover --label);
155 }
156 }
157 }
158 }
159
160 @include iro.bem-modifier('quiet') {
161 border-color: transparent;
162 background-color: transparent;
163 box-shadow: none;
164 color: fn.color(--quiet --disabled --label);
165
166 &:link,
167 &:visited,
168 &:enabled {
169 border-color: transparent;
170 background-color: transparent;
171 box-shadow: none;
172 color: fn.color(--quiet --label);
173
174 &:hover,
175 &:focus-visible {
176 border-color: transparent;
177 background-color: fn.color(--quiet --hover --bg);
178 box-shadow: none;
179 color: fn.color(--quiet --hover --label);
180 }
181
182 &:active {
183 border-color: transparent;
184 background-color: fn.color(--quiet --active --bg);
185 box-shadow: none;
186 color: fn.color(--quiet --active --label);
187 }
188
189 @include iro.bem-at-theme('keyboard') {
190 &:focus {
191 background-color: fn.color(--quiet --hover --bg);
192 color: fn.color(--quiet --hover --label);
193 }
194 }
195 }
196
197 @include iro.bem-is('selected') {
198 background-color: fn.color(--quiet --selected --bg);
199 color: fn.color(--quiet --disabled --label);
200
201 &:link,
202 &:visited,
203 &:enabled {
204 border-color: transparent;
205 background-color: fn.color(--quiet --selected --bg);
206 box-shadow: none;
207 color: fn.color(--quiet --selected --label);
208
209 &:hover,
210 &:active,
211 &:focus-visible {
212 border-color: transparent;
213 background-color: fn.color(--quiet --selected --hover --bg);
214 box-shadow: none;
215 color: fn.color(--quiet --selected --hover --label);
216 }
217 }
218 }
219 }
220
221 @include iro.bem-modifier('round') {
222 inline-size: calc(1em * fn.dim(--line-height) + 2 * fn.dim(--pad-b));
223 padding-inline: 0;
224 border-radius: 100em;
225 }
226 }
227}
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-11 02:25:27 +0000