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.scss194
1 files changed, 99 insertions, 95 deletions
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
index 6aa1823..eefdfed 100644
--- a/src/objects/_action-button.scss
+++ b/src/objects/_action-button.scss
@@ -1,4 +1,5 @@
1@use 'iro-sass/src/index' as iro; 1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
2 3
3@include iro.props-namespace('action-button') { 4@include iro.props-namespace('action-button') {
4 @include iro.props-store(( 5 @include iro.props-store((
@@ -7,94 +8,97 @@
7 --padding-y: .6rem, 8 --padding-y: .6rem,
8 --rounding: 3px, 9 --rounding: 3px,
9 ), 10 ),
11 ), 'dims');
12
13 @include iro.props-store((
10 --colors: ( 14 --colors: (
11 --bg: iro.props-get(--colors --bg-hi, $global: true), 15 --bg: fn.color(--bg-hi, $global: true),
12 --label: iro.props-get(--colors --fg, $global: true), 16 --label: fn.color(--fg, $global: true),
13 --border: iro.props-get(--colors --obj-lo, $global: true), 17 --border: fn.color(--obj-lo, $global: true),
14 --shadow: 0 0 0 0 transparent, 18 --shadow: 0 0 0 0 transparent,
15 19
16 --hover: ( 20 --hover: (
17 --bg: iro.props-get(--colors --bg-hi2, $global: true), 21 --bg: fn.color(--bg-hi2, $global: true),
18 --label: iro.props-get(--colors --fg-lo, $global: true), 22 --label: fn.color(--fg-lo, $global: true),
19 --border: iro.props-get(--colors --fg-hi2, $global: true), 23 --border: fn.color(--fg-hi2, $global: true),
20 --shadow: 0 0 0 0 transparent, 24 --shadow: 0 0 0 0 transparent,
21 ), 25 ),
22 --active: ( 26 --active: (
23 --bg: iro.props-get(--colors --obj-hi, $global: true), 27 --bg: fn.color(--obj-hi, $global: true),
24 --label: iro.props-get(--colors --fg-lo, $global: true), 28 --label: fn.color(--fg-lo, $global: true),
25 --border: iro.props-get(--colors --fg-hi2, $global: true), 29 --border: fn.color(--fg-hi2, $global: true),
26 --shadow: 0 0 0 0 transparent, 30 --shadow: 0 0 0 0 transparent,
27 ), 31 ),
28 --selected: ( 32 --selected: (
29 --bg: iro.props-get(--colors --obj-hi, $global: true), 33 --bg: fn.color(--obj-hi, $global: true),
30 --label: iro.props-get(--colors --fg, $global: true), 34 --label: fn.color(--fg, $global: true),
31 --border: iro.props-get(--colors --fg-hi3, $global: true), 35 --border: fn.color(--fg-hi3, $global: true),
32 --shadow: 0 0 0 0 transparent, 36 --shadow: 0 0 0 0 transparent,
33 37
34 --hover: ( 38 --hover: (
35 --label: iro.props-get(--colors --fg-lo, $global: true), 39 --label: fn.color(--fg-lo, $global: true),
36 --border: iro.props-get(--colors --fg-hi2, $global: true), 40 --border: fn.color(--fg-hi2, $global: true),
37 --shadow: 0 0 0 0 transparent, 41 --shadow: 0 0 0 0 transparent,
38 ), 42 ),
39 --key-focus: ( 43 --key-focus: (
40 --bg: iro.props-get(--colors --obj-hi, $global: true), 44 --bg: fn.color(--obj-hi, $global: true),
41 ), 45 ),
42 ), 46 ),
43 --disabled: ( 47 --disabled: (
44 --bg: iro.props-get(--colors --obj-hi, $global: true), 48 --bg: fn.color(--obj-hi, $global: true),
45 --label: iro.props-get(--colors --fg-hi3, $global: true), 49 --label: fn.color(--fg-hi3, $global: true),
46 --border: iro.props-get(--colors --obj-hi, $global: true), 50 --border: fn.color(--obj-hi, $global: true),
47 --shadow: 0 0 0 0 transparent, 51 --shadow: 0 0 0 0 transparent,
48 ), 52 ),
49 --key-focus: ( 53 --key-focus: (
50 --bg: iro.props-get(--colors --bg-hi2, $global: true), 54 --bg: fn.color(--bg-hi2, $global: true),
51 --label: iro.props-get(--colors --fg-lo, $global: true), 55 --label: fn.color(--fg-lo, $global: true),
52 --border: iro.props-get(--colors --focus --fill, $global: true), 56 --border: fn.color(--focus --fill, $global: true),
53 --shadow: iro.props-get(--colors --focus --shadow, $global: true), 57 --shadow: fn.color(--focus --shadow, $global: true),
54 ), 58 ),
55 --quiet: ( 59 --quiet: (
56 --label: iro.props-get(--colors --fg, $global: true), 60 --label: fn.color(--fg, $global: true),
57 61
58 --hover: ( 62 --hover: (
59 --bg: iro.props-get(--colors --obj-hi, $global: true), 63 --bg: fn.color(--obj-hi, $global: true),
60 --label: iro.props-get(--colors --fg-lo, $global: true), 64 --label: fn.color(--fg-lo, $global: true),
61 ), 65 ),
62 --active: ( 66 --active: (
63 --bg: iro.props-get(--colors --obj, $global: true), 67 --bg: fn.color(--obj, $global: true),
64 --label: iro.props-get(--colors --fg-lo, $global: true), 68 --label: fn.color(--fg-lo, $global: true),
65 ), 69 ),
66 --selected: ( 70 --selected: (
67 --bg: iro.props-get(--colors --obj-hi, $global: true), 71 --bg: fn.color(--obj-hi, $global: true),
68 --label: iro.props-get(--colors --fg, $global: true), 72 --label: fn.color(--fg, $global: true),
69 73
70 --hover: ( 74 --hover: (
71 --label: iro.props-get(--colors --fg-lo, $global: true), 75 --label: fn.color(--fg-lo, $global: true),
72 ), 76 ),
73 --key-focus: ( 77 --key-focus: (
74 --bg: iro.props-get(--colors --obj, $global: true), 78 --bg: fn.color(--obj, $global: true),
75 ), 79 ),
76 ), 80 ),
77 --disabled: ( 81 --disabled: (
78 --label: iro.props-get(--colors --fg-hi3, $global: true), 82 --label: fn.color(--fg-hi3, $global: true),
79 ), 83 ),
80 --key-focus: ( 84 --key-focus: (
81 --bg: iro.props-get(--colors --bg-hi2, $global: true), 85 --bg: fn.color(--bg-hi2, $global: true),
82 --label: iro.props-get(--colors --fg-lo, $global: true), 86 --label: fn.color(--fg-lo, $global: true),
83 --border: iro.props-get(--colors --focus --fill, $global: true), 87 --border: fn.color(--focus --fill, $global: true),
84 --shadow: iro.props-get(--colors --focus --shadow, $global: true), 88 --shadow: fn.color(--focus --shadow, $global: true),
85 ), 89 ),
86 ), 90 ),
87 ), 91 ),
88 )); 92 ), 'colors');
89 93
90 @include iro.bem-object(iro.props-namespace()) { 94 @include iro.bem-object(iro.props-namespace()) {
91 display: inline-block; 95 display: inline-block;
92 padding: iro.props-get(--dims --padding-y) iro.props-get(--dims --padding-x); 96 padding: fn.dim(--padding-y) fn.dim(--padding-x);
93 border: 1px solid iro.props-get(--colors --border); 97 border: 1px solid fn.color(--border);
94 border-radius: iro.props-get(--dims --rounding); 98 border-radius: fn.dim(--rounding);
95 background-color: iro.props-get(--colors --bg); 99 background-color: fn.color(--bg);
96 box-shadow: iro.props-get(--colors --shadow); 100 box-shadow: fn.color(--shadow);
97 color: iro.props-get(--colors --label); 101 color: fn.color(--label);
98 line-height: 1; 102 line-height: 1;
99 text-align: center; 103 text-align: center;
100 text-decoration: none; 104 text-decoration: none;
@@ -103,51 +107,51 @@
103 107
104 @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') { 108 @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') {
105 &:hover { 109 &:hover {
106 border-color: iro.props-get(--colors --hover --border); 110 border-color: fn.color(--hover --border);
107 background-color: iro.props-get(--colors --hover --bg); 111 background-color: fn.color(--hover --bg);
108 box-shadow: iro.props-get(--colors --hover --shadow); 112 box-shadow: fn.color(--hover --shadow);
109 color: iro.props-get(--colors --hover --label); 113 color: fn.color(--hover --label);
110 } 114 }
111 115
112 &:active { 116 &:active {
113 border-color: iro.props-get(--colors --active --border); 117 border-color: fn.color(--active --border);
114 background-color: iro.props-get(--colors --active --bg); 118 background-color: fn.color(--active --bg);
115 box-shadow: iro.props-get(--colors --active --shadow); 119 box-shadow: fn.color(--active --shadow);
116 color: iro.props-get(--colors --active --label); 120 color: fn.color(--active --label);
117 } 121 }
118 } 122 }
119 123
120 @include iro.bem-at-theme('keyboard') { 124 @include iro.bem-at-theme('keyboard') {
121 &:focus { 125 &:focus {
122 border-color: iro.props-get(--colors --key-focus --border); 126 border-color: fn.color(--key-focus --border);
123 background-color: iro.props-get(--colors --key-focus --bg); 127 background-color: fn.color(--key-focus --bg);
124 box-shadow: inset 0 0 0 1px iro.props-get(--colors --key-focus --border), iro.props-get(--colors --key-focus --shadow); 128 box-shadow: inset 0 0 0 1px fn.color(--key-focus --border), fn.color(--key-focus --shadow);
125 color: iro.props-get(--colors --key-focus --label); 129 color: fn.color(--key-focus --label);
126 } 130 }
127 } 131 }
128 132
129 @include iro.bem-is('selected') { 133 @include iro.bem-is('selected') {
130 border-color: iro.props-get(--colors --selected --border); 134 border-color: fn.color(--selected --border);
131 background-color: iro.props-get(--colors --selected --bg); 135 background-color: fn.color(--selected --bg);
132 box-shadow: iro.props-get(--colors --selected --shadow); 136 box-shadow: fn.color(--selected --shadow);
133 color: iro.props-get(--colors --selected --label); 137 color: fn.color(--selected --label);
134 138
135 @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') { 139 @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') {
136 &:hover, 140 &:hover,
137 &:active { 141 &:active {
138 border-color: iro.props-get(--colors --selected --hover --border); 142 border-color: fn.color(--selected --hover --border);
139 background-color: iro.props-get(--colors --selected --bg); 143 background-color: fn.color(--selected --bg);
140 box-shadow: iro.props-get(--colors --selected --hover --shadow); 144 box-shadow: fn.color(--selected --hover --shadow);
141 color: iro.props-get(--colors --selected --hover --label); 145 color: fn.color(--selected --hover --label);
142 } 146 }
143 } 147 }
144 148
145 @include iro.bem-at-theme('keyboard') { 149 @include iro.bem-at-theme('keyboard') {
146 &:focus { 150 &:focus {
147 border-color: iro.props-get(--colors --key-focus --border); 151 border-color: fn.color(--key-focus --border);
148 background-color: iro.props-get(--colors --selected --key-focus --bg); 152 background-color: fn.color(--selected --key-focus --bg);
149 box-shadow: inset 0 0 0 1px iro.props-get(--colors --key-focus --border), iro.props-get(--colors --key-focus --shadow); 153 box-shadow: inset 0 0 0 1px fn.color(--key-focus --border), fn.color(--key-focus --shadow);
150 color: iro.props-get(--colors --key-focus --label); 154 color: fn.color(--key-focus --label);
151 } 155 }
152 } 156 }
153 } 157 }
@@ -156,73 +160,73 @@
156 border-color: transparent; 160 border-color: transparent;
157 background-color: transparent; 161 background-color: transparent;
158 box-shadow: none; 162 box-shadow: none;
159 color: iro.props-get(--colors --quiet --label); 163 color: fn.color(--quiet --label);
160 164
161 @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') { 165 @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') {
162 &:hover { 166 &:hover {
163 border-color: transparent; 167 border-color: transparent;
164 background-color: iro.props-get(--colors --quiet --hover --bg); 168 background-color: fn.color(--quiet --hover --bg);
165 box-shadow: none; 169 box-shadow: none;
166 color: iro.props-get(--colors --quiet --hover --label); 170 color: fn.color(--quiet --hover --label);
167 } 171 }
168 172
169 &:active { 173 &:active {
170 border-color: transparent; 174 border-color: transparent;
171 background-color: iro.props-get(--colors --quiet --active --bg); 175 background-color: fn.color(--quiet --active --bg);
172 box-shadow: none; 176 box-shadow: none;
173 color: iro.props-get(--colors --quiet --active --label); 177 color: fn.color(--quiet --active --label);
174 } 178 }
175 } 179 }
176 180
177 @include iro.bem-at-theme('keyboard') { 181 @include iro.bem-at-theme('keyboard') {
178 &:focus { 182 &:focus {
179 border-color: iro.props-get(--colors --quiet --key-focus --border); 183 border-color: fn.color(--quiet --key-focus --border);
180 background-color: iro.props-get(--colors --quiet --key-focus --bg); 184 background-color: fn.color(--quiet --key-focus --bg);
181 box-shadow: inset 0 0 0 1px iro.props-get(--colors --quiet --key-focus --border), iro.props-get(--colors --quiet --key-focus --shadow); 185 box-shadow: inset 0 0 0 1px fn.color(--quiet --key-focus --border), fn.color(--quiet --key-focus --shadow);
182 color: iro.props-get(--colors --quiet --key-focus --label); 186 color: fn.color(--quiet --key-focus --label);
183 } 187 }
184 } 188 }
185 189
186 @include iro.bem-is('selected') { 190 @include iro.bem-is('selected') {
187 border-color: transparent; 191 border-color: transparent;
188 background-color: iro.props-get(--colors --quiet --selected --bg); 192 background-color: fn.color(--quiet --selected --bg);
189 box-shadow: none; 193 box-shadow: none;
190 color: iro.props-get(--colors --quiet --selected --label); 194 color: fn.color(--quiet --selected --label);
191 195
192 @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') { 196 @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') {
193 &:hover, 197 &:hover,
194 &:active { 198 &:active {
195 border-color: transparent; 199 border-color: transparent;
196 background-color: iro.props-get(--colors --quiet --selected --bg); 200 background-color: fn.color(--quiet --selected --bg);
197 box-shadow: none; 201 box-shadow: none;
198 color: iro.props-get(--colors --quiet --selected --hover --label); 202 color: fn.color(--quiet --selected --hover --label);
199 } 203 }
200 } 204 }
201 205
202 @include iro.bem-at-theme('keyboard') { 206 @include iro.bem-at-theme('keyboard') {
203 &:focus { 207 &:focus {
204 border-color: iro.props-get(--colors --quiet --key-focus --border); 208 border-color: fn.color(--quiet --key-focus --border);
205 background-color: iro.props-get(--colors --quiet --selected --key-focus --bg); 209 background-color: fn.color(--quiet --selected --key-focus --bg);
206 box-shadow: inset 0 0 0 1px iro.props-get(--colors --quiet --key-focus --border), iro.props-get(--colors --quiet --key-focus --shadow); 210 box-shadow: inset 0 0 0 1px fn.color(--quiet --key-focus --border), fn.color(--quiet --key-focus --shadow);
207 color: iro.props-get(--colors --quiet --key-focus --label); 211 color: fn.color(--quiet --key-focus --label);
208 } 212 }
209 } 213 }
210 } 214 }
211 } 215 }
212 216
213 @include iro.bem-is('disabled') { 217 @include iro.bem-is('disabled') {
214 border-color: iro.props-get(--colors --disabled --border); 218 border-color: fn.color(--disabled --border);
215 background-color: iro.props-get(--colors --disabled --bg); 219 background-color: fn.color(--disabled --bg);
216 box-shadow: iro.props-get(--colors --disabled --shadow); 220 box-shadow: fn.color(--disabled --shadow);
217 color: iro.props-get(--colors --disabled --label); 221 color: fn.color(--disabled --label);
218 222
219 @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') { 223 @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') {
220 &:hover, 224 &:hover,
221 &:active { 225 &:active {
222 border-color: iro.props-get(--colors --disabled --border); 226 border-color: fn.color(--disabled --border);
223 background-color: iro.props-get(--colors --disabled --bg); 227 background-color: fn.color(--disabled --bg);
224 box-shadow: iro.props-get(--colors --disabled --shadow); 228 box-shadow: fn.color(--disabled --shadow);
225 color: iro.props-get(--colors --disabled --label); 229 color: fn.color(--disabled --label);
226 } 230 }
227 } 231 }
228 232
@@ -230,7 +234,7 @@
230 border-color: transparent; 234 border-color: transparent;
231 background-color: transparent; 235 background-color: transparent;
232 box-shadow: none; 236 box-shadow: none;
233 color: iro.props-get(--colors --quiet --disabled --label); 237 color: fn.color(--quiet --disabled --label);
234 238
235 @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') { 239 @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') {
236 &:hover, 240 &:hover,
@@ -238,12 +242,12 @@
238 border-color: transparent; 242 border-color: transparent;
239 background-color: transparent; 243 background-color: transparent;
240 box-shadow: none; 244 box-shadow: none;
241 color: iro.props-get(--colors --quiet --disabled --label); 245 color: fn.color(--quiet --disabled --label);
242 } 246 }
243 } 247 }
244 248
245 @include iro.bem-is('selected') { 249 @include iro.bem-is('selected') {
246 background-color: iro.props-get(--colors --quiet --selected --bg); 250 background-color: fn.color(--quiet --selected --bg);
247 } 251 }
248 } 252 }
249 } 253 }
generated by cgit v1.2.3-54-g00ecf (git 2.45.2) at 2024-09-21 11:55:01 +0000