summaryrefslogtreecommitdiffstats
path: root/src/.old/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/.old/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/.old/objects/_action-button.scss')
-rw-r--r--src/.old/objects/_action-button.scss222
1 files changed, 0 insertions, 222 deletions
diff --git a/src/.old/objects/_action-button.scss b/src/.old/objects/_action-button.scss
deleted file mode 100644
index 48ac2a6..0000000
--- a/src/.old/objects/_action-button.scss
+++ /dev/null
@@ -1,222 +0,0 @@
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-x: fn.global-dim(--size --100),
9 --pad-y: fn.global-dim(--size --85),
10 --rounding: 3px,
11 ),
12 ), 'dims');
13
14 @include iro.props-store((
15 --colors: (
16 --bg: fn.global-color(--bg-hi),
17 --label: fn.global-color(--fg),
18 --border: fn.global-color(--obj-lo),
19
20 --hover: (
21 --bg: fn.global-color(--bg-hi2),
22 --label: fn.global-color(--fg-lo),
23 --border: fn.global-color(--fg-hi2),
24 ),
25 --active: (
26 --bg: fn.global-color(--obj-hi),
27 --label: fn.global-color(--fg-lo),
28 --border: fn.global-color(--fg-hi2),
29 ),
30 --selected: (
31 --bg: fn.global-color(--obj-hi),
32 --label: fn.global-color(--fg),
33 --border: fn.global-color(--fg-hi3),
34
35 --hover: (
36 --label: fn.global-color(--fg-lo),
37 --border: fn.global-color(--fg-hi2),
38 ),
39 ),
40 --disabled: (
41 --bg: fn.global-color(--obj-hi),
42 --label: fn.global-color(--fg-hi3),
43 --border: fn.global-color(--obj-hi),
44 ),
45 --key-focus: (
46 --border: fn.global-color(--focus --fill),
47 --shadow: fn.global-color(--focus --shadow),
48 ),
49 --quiet: (
50 --label: fn.global-color(--fg),
51
52 --hover: (
53 --bg: fn.global-color(--obj-hi),
54 --label: fn.global-color(--fg-lo),
55 ),
56 --active: (
57 --bg: fn.global-color(--obj),
58 --label: fn.global-color(--fg-lo),
59 ),
60 --selected: (
61 --bg: fn.global-color(--obj-hi),
62 --label: fn.global-color(--fg),
63
64 --hover: (
65 --bg: fn.global-color(--obj),
66 --label: fn.global-color(--fg-lo),
67 ),
68 ),
69 --disabled: (
70 --label: fn.global-color(--fg-hi3),
71 ),
72 ),
73 ),
74 ), 'colors');
75
76 @include iro.bem-object(iro.props-namespace()) {
77 display: inline-block;
78 padding: fn.dim(--pad-y) fn.dim(--pad-x);
79 overflow: hidden;
80 border: 1px solid fn.color(--disabled --border);
81 border-radius: fn.dim(--rounding);
82 background-color: fn.color(--disabled --bg);
83 color: fn.color(--disabled --label);
84 line-height: fn.dim(--line-height);
85 text-align: center;
86 text-decoration: none;
87 text-overflow: ellipsis;
88 vertical-align: top;
89 white-space: nowrap;
90
91 &:link,
92 &:visited,
93 &:enabled {
94 border-color: fn.color(--border);
95 background-color: fn.color(--bg);
96 color: fn.color(--label);
97
98 &:hover {
99 border-color: fn.color(--hover --border);
100 background-color: fn.color(--hover --bg);
101 color: fn.color(--hover --label);
102 }
103
104 &:active {
105 border-color: fn.color(--active --border);
106 background-color: fn.color(--active --bg);
107 color: fn.color(--active --label);
108 }
109
110 @include iro.bem-at-theme('keyboard') {
111 &:focus {
112 background-color: fn.color(--hover --bg);
113 color: fn.color(--hover --label);
114 }
115 }
116 }
117
118 @include iro.bem-is('selected') {
119 &:link,
120 &:visited,
121 &:enabled {
122 border-color: fn.color(--selected --border);
123 background-color: fn.color(--selected --bg);
124 color: fn.color(--selected --label);
125
126 &:hover,
127 &:active {
128 border-color: fn.color(--selected --hover --border);
129 background-color: fn.color(--selected --bg);
130 color: fn.color(--selected --hover --label);
131 }
132
133 @include iro.bem-at-theme('keyboard') {
134 &:focus {
135 background-color: fn.color(--selected --bg);
136 color: fn.color(--selected --hover --label);
137 }
138 }
139 }
140 }
141
142 @include iro.bem-modifier('quiet') {
143 border-color: transparent;
144 background-color: transparent;
145 box-shadow: none;
146 color: fn.color(--quiet --disabled --label);
147
148 &:link,
149 &:visited,
150 &:enabled {
151 border-color: transparent;
152 background-color: transparent;
153 box-shadow: none;
154 color: fn.color(--quiet --label);
155
156 &:hover {
157 border-color: transparent;
158 background-color: fn.color(--quiet --hover --bg);
159 box-shadow: none;
160 color: fn.color(--quiet --hover --label);
161 }
162
163 &:active {
164 border-color: transparent;
165 background-color: fn.color(--quiet --active --bg);
166 box-shadow: none;
167 color: fn.color(--quiet --active --label);
168 }
169
170 @include iro.bem-at-theme('keyboard') {
171 &:focus {
172 background-color: fn.color(--quiet --hover --bg);
173 color: fn.color(--quiet --hover --label);
174 }
175 }
176 }
177
178 @include iro.bem-is('selected') {
179 background-color: fn.color(--quiet --selected --bg);
180 color: fn.color(--quiet --disabled --label);
181
182 &:link,
183 &:visited,
184 &:enabled {
185 border-color: transparent;
186 background-color: fn.color(--quiet --selected --bg);
187 box-shadow: none;
188 color: fn.color(--quiet --selected --label);
189
190 &:hover,
191 &:active {
192 border-color: transparent;
193 background-color: fn.color(--quiet --selected --hover --bg);
194 box-shadow: none;
195 color: fn.color(--quiet --selected --hover --label);
196 }
197
198 @include iro.bem-at-theme('keyboard') {
199 &:focus {
200 background-color: fn.color(--quiet --selected --bg);
201 color: fn.color(--quiet --selected --hover --label);
202 }
203 }
204 }
205 }
206 }
207
208 @include iro.bem-at-theme('keyboard') {
209 &:focus {
210 border-color: fn.color(--key-focus --border);
211 box-shadow: inset 0 0 0 1px fn.color(--key-focus --border), fn.color(--key-focus --shadow);
212 }
213 }
214
215 @include iro.bem-modifier('round') {
216 width: calc(1em * fn.dim(--line-height) + 2 * fn.dim(--pad-y));
217 padding-right: 0;
218 padding-left: 0;
219 border-radius: 100em;
220 }
221 }
222}
generated by cgit v1.2.3-54-g00ecf (git 2.45.2) at 2024-09-21 12:50:37 +0000