summaryrefslogtreecommitdiffstats
path: root/src/.old/objects
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-06-22 23:00:16 +0200
committerVolpeon <git@volpeon.ink>2024-06-22 23:00:16 +0200
commit69d753931c098bc18cd23e96af18f736a772f416 (patch)
treea40beef43a215fd76972e41085d3af1b123fed32 /src/.old/objects
parentUpdate (diff)
downloadiro-design-69d753931c098bc18cd23e96af18f736a772f416.tar.gz
iro-design-69d753931c098bc18cd23e96af18f736a772f416.tar.bz2
iro-design-69d753931c098bc18cd23e96af18f736a772f416.zip
Update
Diffstat (limited to 'src/.old/objects')
-rw-r--r--src/.old/objects/_field-label.scss89
-rw-r--r--src/.old/objects/_text-field.scss232
2 files changed, 0 insertions, 321 deletions
diff --git a/src/.old/objects/_field-label.scss b/src/.old/objects/_field-label.scss
deleted file mode 100644
index 2127a09..0000000
--- a/src/.old/objects/_field-label.scss
+++ /dev/null
@@ -1,89 +0,0 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('field-label') {
5 @include iro.props-store((
6 --dims: (
7 --spacing-x: fn.global-dim(--size --150),
8 --spacing-y: fn.global-dim(--size --85),
9 --label-font-size: fn.global-dim(--font-size --75),
10 --hint-font-size: fn.global-dim(--font-size --75),
11 ),
12 ), 'dims');
13
14 @include iro.props-store((
15 --colors: (
16 --label: fn.global-color(--fg-hi),
17 --hint: fn.global-color(--fg-hi),
18 --error-hint: fn.global-color(--accent --error --quiet --fg),
19 --disabled: fn.global-color(--fg-hi3),
20 ),
21 ), 'colors');
22
23 @include iro.bem-object(iro.props-namespace()) {
24 display: block;
25
26 @include iro.bem-elem('label') {
27 display: block;
28 flex: 0 0 auto;
29 padding-right: fn.dim(--spacing-x);
30 color: fn.color(--label);
31 font-size: fn.dim(--label-font-size);
32 font-weight: 400;
33 line-height: 1.3;
34
35 @include iro.bem-next-elem('content') {
36 margin-top: fn.dim(--spacing-y);
37 }
38 }
39
40 @include iro.bem-elem('content') {
41 display: block;
42 width: 100%;
43 }
44
45 @include iro.bem-elem('hint') {
46 display: block;
47 margin-top: fn.dim(--spacing-y);
48 color: fn.color(--hint);
49 font-size: fn.dim(--hint-font-size);
50 }
51
52 @include iro.bem-is('invalid') {
53 @include iro.bem-elem('hint') {
54 color: fn.color(--error-hint);
55 }
56 }
57
58 @include iro.bem-is('disabled') {
59 @include iro.bem-elem('label', 'hint') {
60 color: fn.color(--disabled);
61 }
62 }
63
64 @include iro.bem-modifier('left', 'right') {
65 display: flex;
66 align-items: baseline;
67
68 @include iro.bem-elem('label') {
69 display: inline-block;
70
71 @include iro.bem-next-elem('content') {
72 margin-top: 0;
73 }
74 }
75 }
76
77 @include iro.bem-modifier('left') {
78 @include iro.bem-elem('label') {
79 text-align: left;
80 }
81 }
82
83 @include iro.bem-modifier('right') {
84 @include iro.bem-elem('label') {
85 text-align: right;
86 }
87 }
88 }
89}
diff --git a/src/.old/objects/_text-field.scss b/src/.old/objects/_text-field.scss
deleted file mode 100644
index 88c4535..0000000
--- a/src/.old/objects/_text-field.scss
+++ /dev/null
@@ -1,232 +0,0 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@mixin invalid {
5 @include iro.bem-sibling-elem('bg') {
6 border-color: fn.color(--error --border);
7 box-shadow: fn.color(--error --shadow);
8 }
9
10 &:hover {
11 @include iro.bem-sibling-elem('bg') {
12 border-color: fn.color(--error --hover --border);
13 box-shadow: fn.color(--error --hover --shadow);
14 }
15 }
16
17 &:focus {
18 @include iro.bem-sibling-elem('bg') {
19 border-color: fn.color(--error --focus --border);
20 box-shadow: fn.color(--error --focus --shadow);
21 }
22 }
23}
24
25@mixin keyboard-focus {
26 @include iro.bem-sibling-elem('bg') {
27 border-color: fn.color(--key-focus --border);
28 box-shadow: fn.color(--key-focus --shadow);
29 }
30}
31
32@include iro.props-namespace('text-field') {
33 @include iro.props-store((
34 --dims: (
35 --pad-x: fn.global-dim(--size --125),
36 --pad-y: fn.global-dim(--size --125),
37 --border: fn.global-dim(--border --thin),
38 --rounding: 2px,
39
40 --extended: (
41 --pad: fn.global-dim(--size --50),
42 --rounding: 6px,
43 ),
44
45 --focus: (
46 --border: fn.global-dim(--border --medium),
47 )
48 ),
49 ), 'dims');
50
51 @include iro.props-store((
52 --colors: (
53 --bg: fn.global-color(--bg-hi2),
54 --placeholder: fn.global-color(--fg-hi2),
55 --text: fn.global-color(--fg),
56 --border: fn.global-color(--obj-lo),
57 --shadow: 0 0 0 0 transparent,
58
59 --hover: (
60 --border: fn.global-color(--fg-hi2),
61 --shadow: 0 0 0 0 transparent,
62 ),
63 --focus: (
64 --border: fn.global-color(--accent --primary --solid --bg),
65 --shadow: 0 0 0 0 transparent,
66 ),
67 --key-focus: (
68 --border: fn.global-color(--focus --fill),
69 --shadow: fn.global-color(--focus --shadow),
70 ),
71 --error: (
72 --border: fn.global-color(--accent --error --solid --bg-hi),
73 --shadow: 0 0 0 0 transparent,
74
75 --hover: (
76 --border: fn.global-color(--accent --error --solid --bg),
77 --shadow: 0 0 0 0 transparent,
78 ),
79 --focus: (
80 --border: fn.global-color(--accent --error --solid --bg),
81 --shadow: 0 0 0 0 transparent,
82 ),
83 ),
84 --disabled: (
85 --bg: fn.global-color(--obj-hi),
86 --placeholder: fn.global-color(--fg-hi3),
87 --text: fn.global-color(--fg-hi3),
88 --border: fn.global-color(--obj-hi),
89 --shadow: 0 0 0 0 transparent,
90 ),
91 ),
92 ), 'colors');
93
94 @include iro.bem-object(iro.props-namespace()) {
95 $line-height: 1.4;
96 $focus-border-offset: calc(fn.dim(--border) - fn.dim(--focus --border));
97
98 position: relative;
99 min-width: 0;
100 border-radius: fn.dim(--rounding);
101 background-color: fn.color(--bg);
102
103 @include iro.bem-elem('bg') {
104 display: block;
105 position: absolute;
106 top: 0;
107 right: 0;
108 bottom: 0;
109 left: 0;
110 border: fn.dim(--border) solid fn.color(--border);
111 border-radius: fn.dim(--rounding);
112 box-shadow: fn.color(--shadow);
113 pointer-events: none;
114 }
115
116 @include iro.bem-elem('native') {
117 box-sizing: border-box;
118 width: 100%;
119 padding: calc(fn.dim(--pad-y) - .5em * ($line-height - 1)) fn.dim(--pad-x);
120 border: 1px solid transparent;
121 background-color: transparent;
122 color: fn.color(--text);
123 font: inherit;
124 line-height: $line-height;
125 resize: none;
126 appearance: none;
127
128 &::placeholder {
129 opacity: 1;
130 color: fn.color(--placeholder);
131 font-style: italic;
132 }
133
134 &:hover {
135 @include iro.bem-sibling-elem('bg') {
136 border-color: fn.color(--hover --border);
137 box-shadow: fn.color(--hover --shadow);
138 }
139 }
140
141 &:focus {
142 outline: 0;
143
144 @include iro.bem-sibling-elem('bg') {
145 top: $focus-border-offset;
146 right: $focus-border-offset;
147 bottom: $focus-border-offset;
148 left: $focus-border-offset;
149 border: fn.dim(--focus --border) solid fn.color(--focus --border);
150 border-radius: calc(fn.dim(--rounding) - $focus-border-offset);
151 box-shadow: fn.color(--focus --shadow);
152 }
153 }
154
155 &:invalid {
156 @include invalid;
157 }
158 }
159
160 @include iro.bem-modifier('extended') {
161 padding: fn.dim(--extended --pad);
162
163 @include iro.bem-multi('&', 'elem' 'bg') {
164 border-radius: calc(fn.dim(--rounding) + fn.dim(--extended --pad));
165 }
166
167 @include iro.bem-elem('native') {
168 &:focus {
169 @include iro.bem-sibling-elem('bg') {
170 border-radius: calc(fn.dim(--extended --rounding) - $focus-border-offset);
171 }
172 }
173 }
174 }
175
176 @include iro.bem-is('invalid') {
177 @include iro.bem-elem('native') {
178 @include invalid;
179 }
180 }
181
182 @include iro.bem-at-theme('keyboard') {
183 @include iro.bem-elem('native') {
184 &:focus,
185 &:invalid:focus {
186 @include keyboard-focus;
187 }
188 }
189
190 @include iro.bem-is('invalid') {
191 @include iro.bem-elem('native') {
192 &:focus {
193 @include keyboard-focus;
194 }
195 }
196 }
197 }
198
199 @include iro.bem-is('disabled') {
200 background-color: fn.color(--disabled --bg);
201 box-shadow: fn.color(--disabled --shadow);
202
203 @include iro.bem-elem('native') {
204 color: fn.color(--disabled --text);
205
206 &::placeholder {
207 color: fn.color(--disabled --placeholder);
208 }
209 }
210
211 @include iro.bem-elem('bg') {
212 border-color: fn.color(--disabled --border);
213 }
214
215 @include iro.bem-is('invalid') {
216 @include iro.bem-elem('native') {
217 @include iro.bem-sibling-elem('bg') {
218 border-color: fn.color(--disabled --border);
219 }
220 }
221 }
222
223 @include iro.bem-elem('native') {
224 &:invalid {
225 @include iro.bem-sibling-elem('bg') {
226 border-color: fn.color(--disabled --border);
227 }
228 }
229 }
230 }
231 }
232}
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-11 03:38:17 +0000