diff options
Diffstat (limited to 'src/.old/objects')
-rw-r--r-- | src/.old/objects/_action-button.scss | 222 |
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 | } | ||