summaryrefslogtreecommitdiffstats
path: root/src/.old/objects
diff options
context:
space:
mode:
Diffstat (limited to 'src/.old/objects')
-rw-r--r--src/.old/objects/_action-button.scss222
-rw-r--r--src/.old/objects/_action-menu.scss122
-rw-r--r--src/.old/objects/_alert.scss55
-rw-r--r--src/.old/objects/_avatar.scss146
-rw-r--r--src/.old/objects/_backdrop.scss33
-rw-r--r--src/.old/objects/_badge.scss173
-rw-r--r--src/.old/objects/_button.scss179
-rw-r--r--src/.old/objects/_checkbox.scss249
-rw-r--r--src/.old/objects/_dialog.scss152
-rw-r--r--src/.old/objects/_emoji.scss74
-rw-r--r--src/.old/objects/_field-label.scss89
-rw-r--r--src/.old/objects/_icon-nav.scss20
-rw-r--r--src/.old/objects/_icon.scss26
-rw-r--r--src/.old/objects/_lightbox.scss206
-rw-r--r--src/.old/objects/_list-group.scss60
-rw-r--r--src/.old/objects/_menu.scss124
-rw-r--r--src/.old/objects/_message.scss51
-rw-r--r--src/.old/objects/_overflow-button.scss243
-rw-r--r--src/.old/objects/_radio.scss176
-rw-r--r--src/.old/objects/_status-indicator.scss35
-rw-r--r--src/.old/objects/_switch.scss221
-rw-r--r--src/.old/objects/_table.scss167
-rw-r--r--src/.old/objects/_text-field.scss232
23 files changed, 3055 insertions, 0 deletions
diff --git a/src/.old/objects/_action-button.scss b/src/.old/objects/_action-button.scss
new file mode 100644
index 0000000..48ac2a6
--- /dev/null
+++ b/src/.old/objects/_action-button.scss
@@ -0,0 +1,222 @@
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}
diff --git a/src/.old/objects/_action-menu.scss b/src/.old/objects/_action-menu.scss
new file mode 100644
index 0000000..12e3b5f
--- /dev/null
+++ b/src/.old/objects/_action-menu.scss
@@ -0,0 +1,122 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('action-menu') {
5 @include iro.props-store((
6 --dims: (
7 --pad-x: 0,
8 --pad-y: fn.global-dim(--size --85),
9 --separator: fn.global-dim(--size --85),
10 --rounding: 3px,
11 --border: 1px,
12 --item: (
13 --pad-x: fn.global-dim(--size --150),
14 --pad-y: fn.global-dim(--size --85),
15 ),
16 ),
17 ), 'dims');
18
19 @include iro.props-store((
20 --colors: (
21 --shadow: 0 .2em .5em rgba(#000, .1),
22 --border: fn.global-color(--border --stable-lo),
23 --separator: fn.global-color(--obj),
24 --icon: fn.global-color(--fg-hi),
25 --item: (
26 --hover: (
27 --bg: fn.global-color(--obj-hi),
28 --label: fn.global-color(--fg-lo),
29 ),
30 --disabled: (
31 --label: fn.global-color(--fg-hi3),
32 ),
33 --key-focus: (
34 --bg: fn.global-color(--obj-hi),
35 --label: fn.global-color(--fg-lo),
36 --border: fn.global-color(--focus --fill),
37 --shadow: fn.global-color(--focus --shadow),
38 ),
39 ),
40 ),
41 ), 'colors');
42
43 @include iro.props-store((
44 --colors: (
45 --shadow: 0 .2em .5em rgba(#000, .5),
46 ),
47 ), 'colors-dark');
48
49 @include iro.bem-object(iro.props-namespace()) {
50 position: absolute;
51 z-index: 10000;
52 top: 0;
53 left: 0;
54 padding: fn.dim(--pad-y) fn.dim(--pad-x);
55 transform: translate(var(--x), var(--y));
56 border: fn.dim(--border) solid fn.color(--border);
57 border-radius: fn.dim(--rounding);
58 background-clip: padding-box;
59 background-color: fn.global-color(--bg);
60 box-shadow: fn.color(--shadow);
61 color: fn.global-color(--fg);
62
63 @include iro.bem-modifier('up-left') {
64 transform: translate(var(--x), calc(var(--y) - 100%));
65 }
66
67 @include iro.bem-modifier('up-right') {
68 transform: translate(calc(var(--x) - 100%), calc(var(--y) - 100%));
69 }
70
71 @include iro.bem-modifier('down-right') {
72 transform: translate(calc(var(--x) - 100%), var(--y));
73 }
74
75 @include iro.bem-elem('item') {
76 display: block;
77 box-sizing: border-box;
78 width: 100%;
79 padding: calc(fn.dim(--item --pad-y) - 2px) calc(fn.dim(--item --pad-x) - 2px);
80 border: 2px solid transparent;
81 color: fn.color(--item --disabled --label);
82
83 &:link,
84 &:visited,
85 &:enabled {
86 color: currentColor;
87
88 &:hover,
89 &:active {
90 background-color: fn.color(--item --hover --bg);
91 color: fn.color(--item --hover --label);
92 }
93
94 @include iro.bem-at-theme('keyboard') {
95 &:focus {
96 border-radius: calc(fn.dim(--rounding) - 1px);
97 border-color: fn.color(--item --key-focus --border);
98 background-color: fn.color(--item --key-focus --bg);
99 box-shadow: fn.color(--item --key-focus --shadow);
100 color: fn.color(--item --key-focus --label);
101 }
102 }
103 }
104 }
105
106 @include iro.bem-elem('separator') {
107 height: 1px;
108 margin: fn.dim(--separator) 0;
109 background-color: fn.color(--separator);
110 }
111
112 @include iro.bem-elem('slot') {
113 padding: fn.dim(--item --pad-y) fn.dim(--item --pad-x);
114 }
115
116 @include iro.bem-elem('icon-slot') {
117 display: flex;
118 justify-content: center;
119 width: fn.foreign-dim(--icon, --size);
120 }
121 }
122}
diff --git a/src/.old/objects/_alert.scss b/src/.old/objects/_alert.scss
new file mode 100644
index 0000000..289ef10
--- /dev/null
+++ b/src/.old/objects/_alert.scss
@@ -0,0 +1,55 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('alert') {
5 @include iro.props-store((
6 --dims: (
7 --border: 1px,
8 --pad-x: fn.global-dim(--size --250),
9 --pad-y: fn.global-dim(--size --200),
10 --rounding: 4px,
11 ),
12 ), 'dims');
13
14 @include iro.props-store((
15 --colors: (
16 --bg: fn.global-color(--bg-hi2),
17 --border: fn.global-color(--fg-hi2),
18 --border-primary: fn.global-color(--accent --primary --solid --bg-hi),
19 --border-error: fn.global-color(--accent --error --solid --bg-hi),
20 --border-success: fn.global-color(--accent --success --solid --bg-hi),
21 --border-warning: fn.global-color(--accent --warning --solid --bg-hi),
22 ),
23 ), 'colors');
24
25 @include iro.props-store((
26 --dims: (
27 --pad-x: fn.global-dim(--size --200),
28 --pad-y: fn.global-dim(--size --150),
29 ),
30 ), 'sm');
31
32 @include iro.bem-object(iro.props-namespace()) {
33 padding: fn.dim(--pad-y) fn.dim(--pad-x);
34 border: fn.dim(--border) solid fn.color(--border);
35 border-radius: fn.dim(--rounding);
36 background-color: fn.color(--bg);
37 color: fn.global-color(--fg);
38
39 @include iro.bem-modifier('primary') {
40 border-color: fn.color(--border-primary);
41 }
42
43 @include iro.bem-modifier('error') {
44 border-color: fn.color(--border-error);
45 }
46
47 @include iro.bem-modifier('success') {
48 border-color: fn.color(--border-success);
49 }
50
51 @include iro.bem-modifier('warning') {
52 border-color: fn.color(--border-warning);
53 }
54 }
55}
diff --git a/src/.old/objects/_avatar.scss b/src/.old/objects/_avatar.scss
new file mode 100644
index 0000000..4be780e
--- /dev/null
+++ b/src/.old/objects/_avatar.scss
@@ -0,0 +1,146 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@mixin status($size) {
5 @include iro.bem-elem('status') {
6 width: fn.dim(--#{$size} --indicator-size);
7 height: fn.dim(--#{$size} --indicator-size);
8
9 @include iro.bem-next-elem('content') {
10 mask-image: radial-gradient(
11 circle calc(.5 * fn.dim(--#{$size} --indicator-size) + fn.dim(--indicator-spacing)) at
12 calc(100% - .5 * fn.dim(--#{$size} --indicator-size))
13 calc(100% - .5 * fn.dim(--#{$size} --indicator-size)),
14 transparent 95%,
15 #fff
16 );
17 }
18 }
19}
20
21@include iro.props-namespace('avatar') {
22 @include iro.props-store((
23 --dims: (
24 --400: (
25 --size: fn.global-dim(--size --1600),
26 --font-size: fn.global-dim(--font-size --800),
27 --indicator-size: fn.global-dim(--size --400),
28 ),
29 --300: (
30 --size: fn.global-dim(--size --1200),
31 --font-size: fn.global-dim(--font-size --600),
32 --indicator-size: fn.global-dim(--size --300),
33 ),
34 --200: (
35 --size: fn.global-dim(--size --800),
36 --font-size: fn.global-dim(--font-size --300),
37 --indicator-size: fn.global-dim(--size --225),
38 ),
39 --150: (
40 --size: fn.global-dim(--size --650),
41 --font-size: fn.global-dim(--font-size --200),
42 --indicator-size: fn.global-dim(--size --175),
43 ),
44 --100: (
45 --size: fn.global-dim(--size --500),
46 --font-size: fn.global-dim(--font-size --100),
47 --indicator-size: fn.global-dim(--size --150),
48 ),
49 --75: (
50 --size: fn.global-dim(--size --375),
51 --font-size: fn.global-dim(--font-size --75),
52 --indicator-size: fn.global-dim(--size --125),
53 ),
54 --50: (
55 --size: fn.global-dim(--size --250),
56 --font-size: fn.global-dim(--font-size --50),
57 --indicator-size: fn.global-dim(--size --100),
58 ),
59 --indicator-spacing: fn.global-dim(--size --40),
60 --rounding: 25%,
61 ),
62 ), 'dims');
63
64 @include iro.props-store((
65 --colors: (
66 --h: 354,
67 --s: 44%,
68 --l: 45%,
69
70 --key-focus: (
71 --border: fn.global-color(--focus --fill),
72 --shadow: 0 0 0 calc(2px + fn.global-dim(--focus --outline-width)) fn.global-color(--accent --primary --quiet --obj-lo),
73 ),
74 ),
75 ), 'colors');
76
77 @include iro.bem-object(iro.props-namespace()) {
78 display: inline-block;
79 position: relative;
80 border-radius: fn.dim(--rounding);
81 font-size: fn.dim(--100 --font-size);
82 font-style: normal;
83 vertical-align: .05em;
84
85 @include iro.bem-elem('status') {
86 position: absolute;
87 right: 0;
88 bottom: 0;
89 }
90
91 @include status(100);
92
93 @include iro.bem-elem('content') {
94 display: block;
95 width: fn.dim(--100 --size);
96 height: fn.dim(--100 --size);
97 border-radius: fn.dim(--rounding);
98 line-height: fn.dim(--100 --size);
99 text-align: center;
100 object-fit: cover;
101 object-position: center center;
102 }
103
104 @include iro.bem-modifier('circle') {
105 border-radius: 100%;
106
107 @include iro.bem-elem('content') {
108 border-radius: 100%;
109 }
110 }
111
112 @include iro.bem-modifier('placeholder') {
113 @include iro.bem-elem('content') {
114 background-color: hsl(0, 0%, fn.color(--l));
115 }
116 }
117
118 @include iro.bem-modifier('colored') {
119 @include iro.bem-elem('content') {
120 background-color: hsl(fn.color(--h), fn.color(--s), fn.color(--l));
121 color: #fff;
122 }
123 }
124
125 @each $size in 50 75 150 200 300 400 {
126 @include iro.bem-modifier($size) {
127 font-size: fn.dim(--#{$size} --font-size);
128
129 @include status($size);
130
131 @include iro.bem-elem('content') {
132 width: fn.dim(--#{$size} --size);
133 height: fn.dim(--#{$size} --size);
134 line-height: fn.dim(--#{$size} --size);
135 }
136 }
137 }
138
139 @include iro.bem-at-theme('keyboard') {
140 &:focus {
141 outline: 2px solid fn.color(--key-focus --border);
142 box-shadow: fn.color(--key-focus --shadow);
143 }
144 }
145 }
146}
diff --git a/src/.old/objects/_backdrop.scss b/src/.old/objects/_backdrop.scss
new file mode 100644
index 0000000..ac23d63
--- /dev/null
+++ b/src/.old/objects/_backdrop.scss
@@ -0,0 +1,33 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('backdrop') {
5 @include iro.props-store((
6 --dims: (
7 --z-index: 10000,
8 --blur: 2em,
9 ),
10 ), 'dims');
11
12 @include iro.props-store((
13 --colors: (
14 --bg: rgba(#000, .75),
15 ),
16 ), 'colors');
17
18 @include iro.bem-object(iro.props-namespace()) {
19 display: flex;
20 position: fixed;
21 z-index: fn.dim(--z-index);
22 top: 0;
23 right: 0;
24 bottom: 0;
25 left: 0;
26 box-sizing: border-box;
27 flex-direction: column;
28 overflow: auto;
29 background-color: fn.color(--bg);
30 color: fn.global-color(--fg);
31 backdrop-filter: blur(fn.dim(--blur));
32 }
33}
diff --git a/src/.old/objects/_badge.scss b/src/.old/objects/_badge.scss
new file mode 100644
index 0000000..0f73382
--- /dev/null
+++ b/src/.old/objects/_badge.scss
@@ -0,0 +1,173 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('badge') {
5 @include iro.props-store((
6 --dims: (
7 --pad-x: fn.px-to-em(4px),
8 --pad-y: 0,
9 --rounding: 3px,
10 --fixed-100: 1em,
11 --fixed-200: 1.5em,
12
13 --200: (
14 --pad-x: fn.px-to-em(6px),
15 --pad-y: fn.px-to-em(2px),
16 ),
17 --300: (
18 --pad-x: fn.px-to-em(10px),
19 --pad-y: fn.px-to-em(6px),
20 ),
21
22 --pill: (
23 --pad-x: fn.px-to-em(9px),
24
25 --200: (
26 --pad-x: fn.px-to-em(10px),
27 ),
28 --300: (
29 --pad-x: fn.px-to-em(16px),
30 ),
31 ),
32 ),
33 ), 'dims');
34
35 @include iro.props-store((
36 --colors: (
37 --bg: fn.global-color(--obj-hi),
38 --label: fn.global-color(--fg-lo),
39 --hover: (
40 --bg: fn.global-color(--obj),
41 ),
42 --active: (
43 --bg: fn.global-color(--obj-lo),
44 ),
45 --key-focus: (
46 --border: fn.global-color(--focus --fill),
47 --shadow: fn.global-color(--focus --shadow),
48 ),
49
50 --primary: (
51 --bg: fn.global-color(--fg-lo),
52 --label: fn.global-color(--bg),
53 --hover: (
54 --bg: fn.global-color(--fg),
55 ),
56 --active: (
57 --bg: fn.global-color(--fg),
58 ),
59 ),
60
61 --accent: (
62 --bg: fn.global-color(--accent --primary --solid --bg),
63 --label: fn.global-color(--accent --primary --solid --fg),
64 --hover: (
65 --bg: fn.global-color(--accent --primary --solid --obj),
66 ),
67 --active: (
68 --bg: fn.global-color(--accent --primary --solid --obj-lo),
69 ),
70 ),
71
72 --accent-quiet: (
73 --bg: fn.global-color(--accent --primary --quiet --bg),
74 --label: fn.global-color(--accent --primary --quiet --fg),
75 --hover: (
76 --bg: fn.global-color(--accent --primary --quiet --obj),
77 ),
78 --active: (
79 --bg: fn.global-color(--accent --primary --quiet --obj-lo),
80 ),
81 )
82 ),
83 ), 'colors');
84
85 @include iro.bem-object(iro.props-namespace()) {
86 display: inline-block;
87 margin-top: -.5em;
88 margin-bottom: -.5em;
89 padding: fn.dim(--pad-y) fn.dim(--pad-x);
90 border-radius: fn.dim(--rounding);
91 background-color: fn.color(--bg);
92 color: fn.color(--label);
93 line-height: fn.global-dim(--font --standard --line-height);
94 text-align: center;
95 text-decoration: none;
96
97 &:link,
98 &:visited,
99 &:enabled {
100 &:hover {
101 background-color: fn.color(--hover --bg);
102 }
103
104 &:active {
105 background-color: fn.color(--active --bg);
106 }
107 }
108
109 @each $variant in 'primary' 'accent' 'accent-quiet' {
110 @include iro.bem-modifier($variant) {
111 background-color: fn.color(--#{$variant} --bg);
112 color: fn.color(--#{$variant} --label);
113
114 &:link,
115 &:visited,
116 &:enabled {
117 &:hover {
118 background-color: fn.color(--#{$variant} --hover --bg);
119 }
120
121 &:active {
122 background-color: fn.color(--#{$variant} --active --bg);
123 }
124 }
125 }
126 }
127
128 &:link,
129 &:visited,
130 &:enabled {
131 @include iro.bem-at-theme('keyboard') {
132 &:focus {
133 background-color: transparent;
134 box-shadow: inset 0 0 0 2px fn.color(--key-focus --border), fn.color(--key-focus --shadow);
135 color: currentColor;
136 }
137 }
138 }
139
140 @include iro.bem-modifier('pill') {
141 padding-right: fn.dim(--pill --pad-x);
142 padding-left: fn.dim(--pill --pad-x);
143 border-radius: 10em;
144 }
145
146 @each $size in '200' '300' {
147 @include iro.bem-modifier($size) {
148 padding: fn.dim(--#{$size} --pad-y) fn.dim(--#{$size} --pad-x);
149
150 @include iro.bem-modifier('pill') {
151 padding-right: fn.dim(--pill --#{$size} --pad-x);
152 padding-left: fn.dim(--pill --#{$size} --pad-x);
153 }
154 }
155 }
156
157 @include iro.bem-modifier('fixed-100') {
158 width: fn.dim(--fixed-100);
159 }
160
161 @include iro.bem-modifier('fixed-200') {
162 width: fn.dim(--fixed-200);
163 }
164
165 @include iro.bem-modifier('sm') {
166 font-size: fn.global-dim(--font-size --75);
167 }
168
169 @include iro.bem-modifier('xs') {
170 font-size: fn.global-dim(--font-size --50);
171 }
172 }
173}
diff --git a/src/.old/objects/_button.scss b/src/.old/objects/_button.scss
new file mode 100644
index 0000000..7cc24fa
--- /dev/null
+++ b/src/.old/objects/_button.scss
@@ -0,0 +1,179 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@mixin button-variant($variant) {
5 &:link,
6 &:visited,
7 &:enabled {
8 border-color: fn.color(--#{$variant} --bg);
9 background-color: fn.color(--#{$variant} --bg);
10 box-shadow: fn.color(--#{$variant} --shadow);
11 color: fn.color(--#{$variant} --label);
12 }
13
14 @include iro.bem-modifier('outline') {
15 &:link,
16 &:visited,
17 &:enabled {
18 background-color: transparent;
19 box-shadow: none;
20 color: fn.color(--#{$variant} --outline-label);
21 }
22 }
23
24 &:link,
25 &:visited,
26 &:enabled {
27 &:hover {
28 border-color: fn.color(--#{$variant} --hover --bg);
29 background-color: fn.color(--#{$variant} --hover --bg);
30 box-shadow: fn.color(--#{$variant} --hover --shadow);
31 color: fn.color(--#{$variant} --hover --label);
32 }
33
34 &:active {
35 border-color: fn.color(--#{$variant} --active --bg);
36 background-color: fn.color(--#{$variant} --active --bg);
37 box-shadow: fn.color(--#{$variant} --active --shadow);
38 color: fn.color(--#{$variant} --active --label);
39 }
40 }
41}
42
43@include iro.props-namespace('button') {
44 @include iro.props-store((
45 --dims: (
46 --line-height: 1.4,
47 --pad-x: fn.global-dim(--size --225),
48 --pad-y: fn.global-dim(--size --65),
49 --rounding: 10em,
50
51 --lg: (
52 --pad-x: fn.global-dim(--size --300),
53 --pad-y: fn.global-dim(--size --100),
54 ),
55 ),
56 ), 'dims');
57
58 @include iro.props-store((
59 --colors: (
60 --any: (
61 --disabled: (
62 --bg: fn.global-color(--obj-hi),
63 --label: fn.global-color(--fg-hi3),
64 --shadow: 0 0 0 0 transparent,
65 ),
66 --key-focus: (
67 --bg: transparent,
68 --label: fn.global-color(--focus --text),
69 --border: fn.global-color(--focus --fill),
70 --shadow: fn.global-color(--focus --shadow),
71 ),
72 ),
73 --accent: (
74 --bg: fn.global-color(--accent --primary --solid --bg),
75 --label: fn.global-color(--accent --primary --solid --fg),
76 --outline-label: fn.global-color(--accent --primary --solid --obj),
77 --shadow: 0 0 0 0 transparent,
78
79 --hover: (
80 --bg: fn.global-color(--accent --primary --solid --obj),
81 --label: fn.global-color(--accent --primary --solid --fg),
82 --shadow: 0 0 0 0 transparent,
83 ),
84 --active: (
85 --bg: fn.global-color(--accent --primary --solid --obj-lo),
86 --label: fn.global-color(--accent --primary --solid --fg),
87 --shadow: 0 0 0 0 transparent,
88 ),
89 ),
90 --primary: (
91 --bg: fn.global-color(--fg),
92 --label: fn.global-color(--bg-hi2),
93 --outline-label: fn.global-color(--fg),
94 --shadow: 0 0 0 0 transparent,
95
96 --hover: (
97 --bg: fn.global-color(--fg-lo),
98 --label: fn.global-color(--bg-hi2),
99 --shadow: 0 0 0 0 transparent,
100 ),
101 --active: (
102 --bg: fn.global-color(--fg-lo),
103 --label: fn.global-color(--bg-hi2),
104 --shadow: 0 0 0 0 transparent,
105 ),
106 ),
107 --secondary: (
108 --bg: fn.global-color(--obj-hi),
109 --label: fn.global-color(--fg),
110 --outline-label: fn.global-color(--fg),
111 --shadow: 0 0 0 0 transparent,
112
113 --hover: (
114 --bg: fn.global-color(--obj),
115 --label: fn.global-color(--fg-lo),
116 --shadow: 0 0 0 0 transparent,
117 ),
118 --active: (
119 --bg: fn.global-color(--obj-lo),
120 --label: fn.global-color(--fg-lo),
121 --shadow: 0 0 0 0 transparent,
122 ),
123 ),
124 ),
125 ), 'colors');
126
127 @include iro.bem-object(iro.props-namespace()) {
128 display: inline-block;
129 padding: fn.dim(--pad-y) fn.dim(--pad-x);
130 border: 2px solid transparent;
131 border-radius: fn.dim(--rounding);
132 border-color: fn.color(--any --disabled --bg);
133 background-color: fn.color(--any --disabled --bg);
134 box-shadow: fn.color(--any --disabled --shadow);
135 color: fn.color(--any --disabled --label);
136 font-weight: 500;
137 line-height: fn.dim(--line-height);
138 text-align: center;
139 text-decoration: none;
140 vertical-align: top;
141
142 @include iro.bem-modifier('block') {
143 display: block;
144 }
145
146 @include iro.bem-modifier('outline') {
147 background-color: transparent;
148 box-shadow: none;
149 }
150
151 @include iro.bem-modifier('lg') {
152 padding: fn.dim(--lg --pad-y) fn.dim(--lg --pad-x);
153 }
154
155 @include button-variant('secondary');
156
157 @each $mod in 'accent' 'primary' {
158 @include iro.bem-modifier($mod) {
159 @include button-variant($mod);
160 }
161 }
162
163 @include iro.bem-at-theme('keyboard') {
164 &:focus {
165 border-color: fn.color(--any --key-focus --border);
166 background-color: fn.color(--any --key-focus --bg);
167 box-shadow: fn.color(--any --key-focus --shadow);
168 color: fn.color(--any --key-focus --label);
169 }
170 }
171
172 @include iro.bem-modifier('round') {
173 width: calc(1em * fn.dim(--line-height) + 2 * fn.dim(--pad-y));
174 padding-right: 0;
175 padding-left: 0;
176 border-radius: 100em;
177 }
178 }
179}
diff --git a/src/.old/objects/_checkbox.scss b/src/.old/objects/_checkbox.scss
new file mode 100644
index 0000000..b3bb34d
--- /dev/null
+++ b/src/.old/objects/_checkbox.scss
@@ -0,0 +1,249 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('checkbox') {
5 @include iro.props-store((
6 --dims: (
7 --size: fn.global-dim(--size --175),
8 --label-gap: fn.global-dim(--size --125),
9 --border: fn.global-dim(--border --medium),
10 --pad-x: fn.global-dim(--size --65),
11 --pad-y: fn.global-dim(--size --65),
12 ),
13 ), 'dims');
14
15 @include iro.props-store((
16 --colors: (
17 --box-border: fn.global-color(--fg-hi),
18 --box-bg: fn.global-color(--bg-hi),
19
20 --hover: (
21 --label: fn.global-color(--fg-lo),
22 --box-border: fn.global-color(--fg),
23 ),
24 --accent: (
25 --box-border: fn.global-color(--accent --primary --solid --bg),
26
27 --hover: (
28 --box-border: fn.global-color(--accent --primary --solid --obj),
29 ),
30 ),
31 --key-focus: (
32 --label: fn.global-color(--focus --text),
33 --box-border: fn.global-color(--focus --fill),
34 --shadow: fn.global-color(--focus --shadow),
35 ),
36 --disabled: (
37 --label: fn.global-color(--fg-hi3),
38 --box-border: fn.global-color(--obj-lo),
39 --box-bg: fn.global-color(--bg-hi),
40 )
41 ),
42 ), 'colors');
43
44 @include iro.bem-object(iro.props-namespace()) {
45 display: inline-flex;
46 position: relative;
47 align-items: flex-start;
48 margin-right: calc(-1 * fn.dim(--pad-x));
49 margin-left: calc(-1 * fn.dim(--pad-x));
50 padding: fn.dim(--pad-y) fn.dim(--pad-x);
51
52 @include iro.bem-elem('box') {
53 display: block;
54 position: relative;
55 flex: 0 0 auto;
56 width: fn.dim(--size);
57 height: fn.dim(--size);
58 margin-top: calc(.5 * (fn.global-dim(--font --standard --line-height) * 1em - fn.dim(--size)));
59 border-radius: fn.dim(--border);
60 background-color: fn.color(--box-border);
61
62 &::before,
63 &::after {
64 content: '';
65 display: block;
66 position: absolute;
67 }
68
69 &::before {
70 z-index: 2;
71 top: fn.dim(--border);
72 left: fn.dim(--border);
73 width: calc(fn.dim(--size) - 2 * fn.dim(--border));
74 height: calc(fn.dim(--size) - 2 * fn.dim(--border));
75 transition: transform .2s ease;
76 background-color: fn.color(--box-bg);
77 }
78
79 &::after {
80 z-index: 3;
81 top: calc(.5 * fn.dim(--size) - 1px);
82 left: calc(1.5 * fn.dim(--border));
83 box-sizing: border-box;
84 width: calc(fn.dim(--size) - 3 * fn.dim(--border));
85 height: 0;
86 transform: scale(0);
87 transition: transform .2s ease;
88 border-width: 0 2px 2px 0;
89 border-style: solid;
90 border-radius: 2px;
91 border-color: fn.color(--box-bg);
92 }
93 }
94
95 @include iro.bem-elem('check-icon') {
96 display: block;
97 position: absolute;
98 z-index: 2;
99 top: calc(1 * fn.dim(--border));
100 left: calc(1 * fn.dim(--border));
101 width: calc(100% - 2 * fn.dim(--border));
102 height: calc(100% - 2 * fn.dim(--border));
103 margin: 0;
104 transform: scale(0);
105 transform-origin: 40% 90%;
106 transition: transform .2s ease;
107 stroke-width: iro.fn-px-to-rem(3px);
108 color: fn.color(--box-bg);
109 }
110
111 @include iro.bem-elem('label') {
112 align-self: baseline;
113 margin-left: fn.dim(--label-gap);
114 }
115
116 @include iro.bem-elem('native') {
117 position: absolute;
118 top: 0;
119 left: 0;
120 width: 100%;
121 height: 100%;
122 margin: 0;
123 padding: 0;
124 overflow: hidden;
125 opacity: .0001;
126
127 &:hover {
128 @include iro.bem-sibling-elem('label') {
129 color: fn.color(--hover --label);
130 }
131
132 @include iro.bem-sibling-elem('box') {
133 background-color: fn.color(--hover --box-border);
134 }
135 }
136
137 &:checked {
138 @include iro.bem-sibling-elem('box') {
139 &::before {
140 transform: scale(0);
141 }
142
143 @include iro.bem-elem('check-icon') {
144 transform: scale(1);
145 }
146 }
147 }
148
149 &:indeterminate {
150 @include iro.bem-sibling-elem('box') {
151 &::before {
152 transform: scale(0);
153 }
154
155 &::after {
156 transform: scale(1);
157 }
158
159 @include iro.bem-elem('check-icon') {
160 transform: scale(0);
161 }
162 }
163 }
164
165 &:disabled {
166 @include iro.bem-sibling-elem('label') {
167 color: fn.color(--disabled --label);
168 }
169
170 @include iro.bem-sibling-elem('box') {
171 background-color: fn.color(--disabled --box-border);
172
173 &::before {
174 background-color: fn.color(--disabled --box-bg);
175 }
176 }
177 }
178
179 @include iro.bem-at-theme('keyboard') {
180 &:focus {
181 @include iro.bem-sibling-elem('label') {
182 color: fn.color(--key-focus --label);
183 }
184
185 @include iro.bem-sibling-elem('box') {
186 background-color: fn.color(--key-focus --box-border);
187 box-shadow: fn.color(--key-focus --shadow);
188 }
189 }
190 }
191 }
192
193 @include iro.bem-modifier('standalone') {
194 @include iro.bem-elem('box') {
195 margin-top: 0;
196 }
197 }
198
199 @include iro.bem-modifier('accent') {
200 @include iro.bem-elem('native') {
201 &:checked {
202 @include iro.bem-sibling-elem('box') {
203 background-color: fn.color(--accent --box-border);
204 }
205
206 &:hover {
207 @include iro.bem-sibling-elem('box') {
208 background-color: fn.color(--accent --hover --box-border);
209 }
210 }
211 }
212
213 &:indeterminate {
214 @include iro.bem-sibling-elem('box') {
215 background-color: fn.color(--accent --box-border);
216 }
217
218 &:hover {
219 @include iro.bem-sibling-elem('box') {
220 background-color: fn.color(--accent --hover --box-border);
221 }
222 }
223 }
224
225 &:disabled {
226 @include iro.bem-sibling-elem('box') {
227 background-color: fn.color(--disabled --box-border);
228
229 &::before {
230 background-color: fn.color(--disabled --box-bg);
231 }
232 }
233
234 &:checked {
235 @include iro.bem-sibling-elem('box') {
236 background-color: fn.color(--disabled --box-border);
237 }
238 }
239
240 &:indeterminate {
241 @include iro.bem-sibling-elem('box') {
242 background-color: fn.color(--disabled --box-border);
243 }
244 }
245 }
246 }
247 }
248 }
249}
diff --git a/src/.old/objects/_dialog.scss b/src/.old/objects/_dialog.scss
new file mode 100644
index 0000000..9333ce6
--- /dev/null
+++ b/src/.old/objects/_dialog.scss
@@ -0,0 +1,152 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('dialog') {
5 @include iro.props-store((
6 --dims: (
7 --width-sm: iro.fn-px-to-rem(500px),
8 --width-md: iro.fn-px-to-rem(800px),
9 --width-lg: iro.fn-px-to-rem(1100px),
10 --rounding: 4px,
11 --border: 1px,
12
13 --header: (
14 --pad-x: fn.global-dim(--size --75),
15 --pad-y: fn.global-dim(--size --75),
16 ),
17
18 --sidebar: (
19 --pad-x: fn.global-dim(--size --75),
20 --pad-y: fn.global-dim(--size --75),
21 ),
22
23 --body: (
24 --pad-x: fn.global-dim(--size --200),
25 --pad-y: fn.global-dim(--size --200),
26 )
27 ),
28 ), 'dims');
29
30 @include iro.props-store((
31 --dims: (
32 --pad-x: fn.global-dim(--size --300),
33 --pad-y: fn.global-dim(--size --300),
34 ),
35 ), 'md');
36
37 @include iro.props-store((
38 --colors: (
39 --border: fn.global-color(--border --stable),
40 ),
41 ), 'colors');
42
43 @include iro.bem-object(iro.props-namespace()) {
44 display: grid;
45 grid-template-rows: auto auto 1fr auto auto;
46 grid-template-columns: auto 1fr;
47 grid-template-areas:
48 'sidebar-header header'
49 'sidebar top'
50 'sidebar body'
51 'sidebar bottom'
52 'sidebar footer';
53 position: relative;
54 box-sizing: border-box;
55 flex: 0 0 auto;
56 width: 100%;
57 max-width: fn.dim(--width-md);
58 margin: 0 auto;
59 overflow: hidden;
60 border-radius: fn.dim(--rounding);
61 background-clip: padding-box;
62 background-color: fn.global-color(--bg);
63 color: fn.global-color(--fg);
64
65 @include iro.bem-modifier('sm') {
66 max-width: fn.dim(--width-sm);
67 }
68
69 @include iro.bem-modifier('lg') {
70 max-width: fn.dim(--width-lg);
71 }
72
73 @include iro.bem-elem('header') {
74 grid-area: sidebar-header / sidebar-header / header / header;
75 padding: fn.dim(--header --pad-y) fn.dim(--header --pad-x);
76
77 @include iro.bem-modifier('sidebar') {
78 grid-area: sidebar-header;
79 border-right: 1px solid fn.color(--border);
80
81 @include iro.bem-sibling-elem('header') {
82 grid-area: header;
83 }
84 }
85 }
86
87 @include iro.bem-elem('title') {
88 margin-top: 0;
89 padding-right: calc(fn.dim(--body --pad-x) - fn.dim(--header --pad-x));
90 padding-left: calc(fn.dim(--body --pad-x) - fn.dim(--header --pad-x));
91 }
92
93 @include iro.bem-elem('close-btn') {
94 margin-left: auto;
95 }
96
97 @include iro.bem-elem('sidebar') {
98 grid-area: sidebar;
99 padding: fn.dim(--sidebar --pad-y) fn.dim(--sidebar --pad-x);
100 overflow: auto;
101 border-right: 1px solid fn.color(--border);
102 }
103
104 @include iro.bem-elem('top') {
105 grid-area: top;
106 min-width: 0;
107 padding: fn.dim(--body --pad-y) fn.dim(--body --pad-x);
108
109 @include iro.bem-sibling-elem('body') {
110 padding-top: 0;
111 }
112 }
113
114 @include iro.bem-elem('bottom') {
115 grid-area: bottom;
116 min-width: 0;
117 padding: fn.dim(--body --pad-y) fn.dim(--body --pad-x);
118
119 @include iro.bem-sibling-elem('body') {
120 padding-bottom: 0;
121 }
122 }
123
124 @include iro.bem-elem('body') {
125 grid-area: body;
126 min-width: 0;
127 min-height: 0;
128 padding: fn.dim(--body --pad-y) fn.dim(--body --pad-x);
129 }
130
131 @include iro.bem-elem('footer') {
132 grid-area: footer;
133 justify-content: flex-end;
134 padding: fn.dim(--body --pad-y) fn.dim(--body --pad-x);
135 }
136
137 @include iro.bem-modifier('scrollable') {
138 flex-shrink: 1;
139
140 @include iro.bem-elem('body') {
141 overflow: auto;
142 scrollbar-color: fn.global-color(--obj-lo) transparent;
143 }
144 }
145
146 @include iro.bem-modifier('flat') {
147 @include iro.bem-elem('body') {
148 padding-top: 0;
149 }
150 }
151 }
152}
diff --git a/src/.old/objects/_emoji.scss b/src/.old/objects/_emoji.scss
new file mode 100644
index 0000000..8d17212
--- /dev/null
+++ b/src/.old/objects/_emoji.scss
@@ -0,0 +1,74 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3@use 'sass:math';
4
5@include iro.props-namespace('emoji') {
6 @include iro.props-store((
7 --dims: (
8 --size: calc(1 / 14 * 18em),
9 --pad: .3em,
10 --rounding: 3px,
11 --zoom: 3,
12 --valign: -.25em,
13
14 --125: (
15 --size: calc(1 / 14 * 23em),
16 --valign: -.45em,
17 ),
18
19 --150: (
20 --size: calc(1 / 14 * 28em),
21 --valign: -.65em,
22 ),
23
24 --200: (
25 --size: calc(1 / 14 * 38em),
26 --valign: -1em,
27 )
28 )
29 ), 'dims');
30
31 @include iro.props-store((
32 --colors: (
33 --bg: fn.global-color(--obj-hi),
34 )
35 ), 'colors');
36
37 @include iro.bem-object(iro.props-namespace()) {
38 display: inline-block;
39 position: relative;
40 width: calc(fn.dim(--size));
41 height: calc(fn.dim(--size));
42 margin: calc(-1 * fn.dim(--pad));
43 padding: calc(fn.dim(--pad));
44 vertical-align: fn.dim(--valign);
45 object-fit: contain;
46
47 @include iro.bem-modifier('icon') {
48 margin: calc(-1 * fn.dim(--pad) - .5 * (fn.dim(--size) - fn.foreign-dim(--icon, --size)));
49 vertical-align: fn.foreign-dim(--icon, --valign);
50 }
51
52 @each $size in '125' '150' '200' {
53 @include iro.bem-modifier($size) {
54 width: fn.dim(--#{$size} --size);
55 height: fn.dim(--#{$size} --size);
56 vertical-align: fn.dim(--#{$size} --valign);
57
58 @include iro.bem-modifier('icon') {
59 margin: calc(-1 * fn.dim(--pad) - .5 * (fn.dim(--#{$size} --size) - fn.foreign-dim(--icon, --size)));
60 }
61 }
62 }
63
64 @include iro.bem-modifier('zoomable') {
65 transition: transform .2s ease, background-color .2s ease;
66 border-radius: calc(fn.dim(--rounding) / fn.dim(--zoom));
67
68 &:hover {
69 transform: scale(fn.dim(--zoom));
70 background-color: fn.color(--bg);
71 }
72 }
73 }
74}
diff --git a/src/.old/objects/_field-label.scss b/src/.old/objects/_field-label.scss
new file mode 100644
index 0000000..2127a09
--- /dev/null
+++ b/src/.old/objects/_field-label.scss
@@ -0,0 +1,89 @@
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/_icon-nav.scss b/src/.old/objects/_icon-nav.scss
new file mode 100644
index 0000000..d1c6539
--- /dev/null
+++ b/src/.old/objects/_icon-nav.scss
@@ -0,0 +1,20 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('icon-nav') {
5 @include iro.props-store((
6 --dims: (
7 --spacing: fn.global-dim(--size --100),
8 )
9 ), 'dims');
10
11 @include iro.bem-object(iro.props-namespace()) {
12 display: flex;
13 align-items: center;
14 gap: fn.dim(--spacing);
15
16 @include iro.bem-modifier('vertical') {
17 flex-direction: column;
18 }
19 }
20}
diff --git a/src/.old/objects/_icon.scss b/src/.old/objects/_icon.scss
new file mode 100644
index 0000000..5c4bfab
--- /dev/null
+++ b/src/.old/objects/_icon.scss
@@ -0,0 +1,26 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('icon') {
5 @include iro.props-store((
6 --dims: (
7 --stroke: 1.5px,
8 --size: calc(1 / 14 * 16em),
9 --valign: -.2em,
10 )
11 ), 'dims');
12
13 @include iro.bem-object(iro.props-namespace()) {
14 display: inline;
15 width: fn.dim(--size);
16 height: fn.dim(--size);
17 stroke-width: fn.dim(--stroke);
18 stroke-linecap: round;
19 stroke-linejoin: round;
20 vertical-align: fn.dim(--valign);
21
22 @include iro.bem-modifier('block') {
23 display: block;
24 }
25 }
26}
diff --git a/src/.old/objects/_lightbox.scss b/src/.old/objects/_lightbox.scss
new file mode 100644
index 0000000..31d3398
--- /dev/null
+++ b/src/.old/objects/_lightbox.scss
@@ -0,0 +1,206 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@use 'action-button';
5
6@include iro.props-namespace('lightbox') {
7 @include iro.props-store((
8 --dims: (
9 --pad: fn.global-dim(--size --150),
10 --thumbnail: (
11 --size: fn.global-dim(--size --700),
12 --spacing: fn.global-dim(--size --100),
13 --idle: 1px,
14 --selected: 2px,
15 ),
16 --close-button: (
17 --font-size: fn.global-dim(--font-size --200),
18 ),
19 --nav-button: (
20 --width: fn.global-dim(--size --3800),
21 --height: fn.global-dim(--size --3800),
22 --font-size: fn.global-dim(--font-size --200),
23 ),
24 ),
25 ), 'dims');
26
27 @include iro.props-store((
28 --dims: (
29 --thumbnail: (
30 --size: fn.global-dim(--size --600),
31 ),
32 --nav-button: (
33 --width: fn.global-dim(--size --2500),
34 --height: fn.global-dim(--size --2500),
35 ),
36 ),
37 ), 'md');
38
39 @include iro.props-store((
40 --colors: (
41 --thumbnail: (
42 --idle: fn.global-color(--fg-hi2),
43 --selected: fn.global-color(--fg-lo),
44 ),
45 ),
46 ), 'colors');
47
48 @include iro.bem-object(iro.props-namespace()) {
49 display: grid;
50 grid-template-rows: auto minmax(0, 1fr) auto auto;
51 grid-template-columns: auto minmax(0, 1fr) auto;
52 grid-template-areas:
53 'header header header'
54 'prev content next'
55 'thumbnails thumbnails thumbnails'
56 'footer footer footer';
57 box-sizing: border-box;
58 height: 100%;
59 overflow: hidden;
60
61 @include iro.bem-elem('header') {
62 grid-area: header;
63 display: flex;
64 align-items: flex-start;
65 padding: fn.dim(--pad) fn.dim(--pad) 0;
66 }
67
68 @include iro.bem-elem('img') {
69 display: none;
70 box-sizing: border-box;
71 grid-area: content;
72 width: 100%;
73 height: 100%;
74 padding: fn.dim(--pad);
75 object-fit: scale-down;
76
77 @include iro.bem-sibling-elem('img') {
78 @include iro.bem-modifier('default') {
79 display: block;
80
81 @include iro.bem-next-elem('nav-btn') {
82 display: block;
83
84 @include iro.bem-next-elem('nav-btn') {
85 display: block;
86 }
87 }
88 }
89 }
90
91 @include iro.bem-multi('&:target', 'is' 'visible') {
92 display: block;
93
94 @include iro.bem-next-elem('nav-btn') {
95 display: block;
96
97 @include iro.bem-next-elem('nav-btn') {
98 display: block;
99 }
100 }
101
102 @include iro.bem-sibling-elem('img') {
103 @include iro.bem-modifier('default') {
104 display: none;
105
106 @include iro.bem-next-elem('nav-btn') {
107 display: none;
108
109 @include iro.bem-next-elem('nav-btn') {
110 display: none;
111 }
112 }
113 }
114 }
115 }
116 }
117
118 @include iro.bem-elem('thumbnails') {
119 grid-area: thumbnails;
120 display: flex;
121 gap: fn.dim(--thumbnail --spacing);
122 padding: fn.dim(--thumbnail --selected) fn.dim(--pad) fn.dim(--pad);
123 overflow: auto;
124 }
125
126 @include iro.bem-elem('footer') {
127 grid-area: footer;
128 display: flex;
129 align-items: flex-start;
130 padding: 0 fn.dim(--pad) fn.dim(--pad);
131 }
132
133 @include iro.bem-elem('thumbnail') {
134 position: relative;
135 flex: 0 0 auto;
136 width: fn.dim(--thumbnail --size);
137 height: fn.dim(--thumbnail --size);
138 opacity: .75;
139 box-shadow: 0 0 0 fn.dim(--thumbnail --idle) fn.color(--thumbnail --idle) inset;
140
141 &:hover {
142 opacity: 1;
143 }
144
145 @include iro.bem-is('selected') {
146 opacity: 1;
147 box-shadow: 0 0 0 fn.dim(--thumbnail --selected) fn.color(--thumbnail --selected);
148 }
149 }
150
151 @include iro.bem-elem('thumbnail-img') {
152 display: block;
153 position: absolute;
154 top: 0;
155 left: 0;
156 width: 100%;
157 height: 100%;
158 object-fit: cover;
159 object-position: center center;
160 }
161
162 @include iro.bem-elem('thumbnail-icon') {
163 position: absolute;
164 top: 50%;
165 left: 50%;
166 transform: translate(-50%, -50%);
167 }
168
169 @include iro.bem-elem('close-btn') {
170 flex: 0 0 auto;
171 margin: calc(-.5 * fn.dim(--pad)) calc(-.5 * fn.dim(--pad)) 0 auto;
172 font-size: fn.dim(--close-button --font-size);
173 }
174
175 @include iro.bem-elem('nav-btn') {
176 display: none;
177 position: relative;
178 align-self: center;
179 overflow: visible;
180 font-size: fn.dim(--nav-button --font-size);
181
182 &::after {
183 content: '';
184 display: block;
185 position: absolute;
186 top: 50%;
187 left: 50%;
188 width: fn.dim(--nav-button --width);
189 height: fn.dim(--nav-button --height);
190 transform: translate(-50%, -50%);
191 }
192
193 @include iro.bem-modifier('prev') {
194 grid-area: prev;
195 margin-right: calc(-1 * fn.dim(--pad));
196 margin-left: calc(.5 * fn.dim(--pad));
197 }
198
199 @include iro.bem-modifier('next') {
200 grid-area: next;
201 margin-right: calc(.5 * fn.dim(--pad));
202 margin-left: calc(-1 * fn.dim(--pad));
203 }
204 }
205 }
206}
diff --git a/src/.old/objects/_list-group.scss b/src/.old/objects/_list-group.scss
new file mode 100644
index 0000000..d46722e
--- /dev/null
+++ b/src/.old/objects/_list-group.scss
@@ -0,0 +1,60 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('list-group') {
5 @include iro.props-store((
6 --dims: (
7 --pad-x: fn.global-dim(--size --175),
8 --pad-y: fn.global-dim(--size --125),
9 --rounding: 3px,
10 ),
11 ), 'dims');
12
13 @include iro.props-store((
14 --colors: (
15 --bg: fn.global-color(--bg-hi2),
16 --border: fn.global-color(--obj),
17 --hover: fn.global-color(--bg),
18 --press: fn.global-color(--obj-hi),
19 )
20 ), 'colors');
21
22 @include iro.bem-object(iro.props-namespace()) {
23 border: 1px solid fn.color(--border);
24 border-radius: fn.dim(--rounding);
25 background-color: fn.color(--bg);
26
27 @include iro.bem-elem('item') {
28 padding: fn.dim(--pad-y) fn.dim(--pad-x);
29
30 @include iro.bem-next-twin-elem {
31 border-width: 1px 0 0;
32 border-style: solid;
33 border-color: fn.color(--border);
34 }
35
36 @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
37 &:hover {
38 background-color: fn.color(--hover);
39 }
40
41 &:active {
42 background-color: fn.color(--press);
43 }
44 }
45 }
46
47 @include iro.bem-modifier('horizontal') {
48 display: flex;
49
50 @include iro.bem-elem('item') {
51 flex: 1 0 auto;
52
53 @include iro.bem-next-twin-elem {
54 border-top-width: 0;
55 border-left-width: 1px;
56 }
57 }
58 }
59 }
60}
diff --git a/src/.old/objects/_menu.scss b/src/.old/objects/_menu.scss
new file mode 100644
index 0000000..7db4896
--- /dev/null
+++ b/src/.old/objects/_menu.scss
@@ -0,0 +1,124 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@use './icon';
5
6@include iro.props-namespace('menu') {
7 @include iro.props-store((
8 --dims: (
9 --spacing: fn.global-dim(--size --50),
10 --header: (
11 --font-size: fn.global-dim(--font-size --50),
12 ),
13 --separator: fn.global-dim(--size --200),
14 --item: (
15 --pad-x: fn.global-dim(--size --150),
16 --pad-y: fn.global-dim(--size --100),
17 --rounding: 3px,
18 ),
19 ),
20 ), 'dims');
21
22 @include iro.props-store((
23 --colors: (
24 --header: (
25 --label: fn.global-color(--fg-hi),
26 ),
27 --item: (
28 --hover: (
29 --bg: fn.global-color(--obj-hi),
30 --label: fn.global-color(--fg-lo),
31 ),
32 --disabled: (
33 --label: fn.global-color(--fg-hi3),
34 ),
35 --key-focus: (
36 --border: fn.global-color(--focus --fill),
37 --shadow: fn.global-color(--focus --shadow),
38 ),
39 --badge: (
40 --bg: fn.global-color(--bg),
41 --label: fn.global-color(--fg-lo),
42 )
43 ),
44 ),
45 ), 'colors');
46
47 @include iro.bem-object(iro.props-namespace()) {
48 display: flex;
49 flex-direction: column;
50 gap: fn.dim(--spacing);
51
52 @include iro.bem-elem('header') {
53 padding: fn.dim(--item --pad-y) fn.dim(--item --pad-x);
54 color: fn.color(--header --label);
55 font-size: fn.dim(--header --font-size);
56 font-weight: 500;
57 letter-spacing: .5px;
58 text-transform: uppercase;
59
60 @include iro.bem-next-twin-elem {
61 margin-top: calc(fn.dim(--separator) + fn.dim(--spacing));
62 }
63 }
64
65 @include iro.bem-elem('item') {
66 padding: calc(fn.dim(--item --pad-y) - 2px) calc(fn.dim(--item --pad-x) - 2px);
67 border: 2px solid transparent;
68 border-radius: fn.dim(--item --rounding);
69 color: fn.color(--item --disabled --label);
70
71 &:link,
72 &:visited,
73 &:enabled {
74 color: currentColor;
75
76 @include iro.bem-multi('&:hover, &:active', 'is' 'selected') {
77 background-color: fn.color(--item --hover --bg);
78 color: fn.color(--item --hover --label);
79
80 @include iro.bem-elem('badge') {
81 background-color: fn.color(--item --badge --bg);
82 color: fn.color(--item --badge --label);
83 }
84 }
85
86 @include iro.bem-at-theme('keyboard') {
87 &:focus {
88 border-radius: calc(fn.dim(--item --rounding) - 1px);
89 border-color: fn.color(--item --key-focus --border);
90 background-color: fn.color(--item --hover --bg);
91 box-shadow: fn.color(--item --key-focus --shadow);
92 color: fn.color(--item --hover --label);
93 }
94 }
95 }
96
97 @include iro.bem-next-elem('header') {
98 margin-top: calc(fn.dim(--separator) + fn.dim(--spacing));
99 }
100 }
101
102 @include iro.bem-elem('header') {
103 &:link,
104 &:visited,
105 &:enabled {
106 color: fn.color(--header --label);
107 }
108 }
109
110 @include iro.bem-elem('separator') {
111 height: fn.dim(--separator);
112 }
113
114 @include iro.bem-elem('icon-slot') {
115 display: flex;
116 justify-content: center;
117 width: fn.foreign-dim(--icon, --size);
118 }
119
120 @include iro.bem-modifier('pull') {
121 margin: calc(-1 * fn.dim(--item --pad-x));
122 }
123 }
124}
diff --git a/src/.old/objects/_message.scss b/src/.old/objects/_message.scss
new file mode 100644
index 0000000..283ce26
--- /dev/null
+++ b/src/.old/objects/_message.scss
@@ -0,0 +1,51 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('message') {
5 @include iro.props-store((
6 --dims: (
7 --bubble: (
8 --pad-x: fn.global-dim(--size --200),
9 --pad-y: fn.global-dim(--size --150),
10 --rounding: 0,
11
12 --75: (
13 --pad-x: fn.global-dim(--size --150),
14 --pad-y: fn.global-dim(--size --85),
15 ),
16 ),
17 )
18 ), 'dims');
19
20 @include iro.props-store((
21 --colors: (
22 --highlight: fn.global-color(--fg-lo),
23 ),
24 ), 'colors');
25
26 @include iro.bem-object(iro.props-namespace()) {
27 @include iro.bem-elem('suffix') {
28 margin-left: 1em;
29 float: right;
30 }
31
32 @include iro.bem-modifier('bubble') {
33 padding: fn.dim(--bubble --pad-y) fn.dim(--bubble --pad-x);
34 border-radius: fn.dim(--bubble --rounding);
35 background-color: fn.global-color(--bg);
36 color: fn.global-color(--fg);
37
38 @include iro.bem-elem('suffix') {
39 transform: translate(.2em, .2em);
40 }
41
42 @include iro.bem-modifier('highlight') {
43 box-shadow: -3px 0 0 0 fn.color(--highlight);
44 }
45
46 @include iro.bem-modifier('75') {
47 padding: fn.dim(--bubble --75 --pad-y) fn.dim(--bubble --75 --pad-x);
48 }
49 }
50 }
51}
diff --git a/src/.old/objects/_overflow-button.scss b/src/.old/objects/_overflow-button.scss
new file mode 100644
index 0000000..b15ea1f
--- /dev/null
+++ b/src/.old/objects/_overflow-button.scss
@@ -0,0 +1,243 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('overflow-button') {
5 @include iro.props-store((
6 --dims: (
7 --pad-x: calc(fn.global-dim(--size --125) - 1px),
8 --pad-y: calc(fn.global-dim(--size --125) - 1px),
9 --spacing: fn.global-dim(--size --50)
10 ),
11 ), 'dims');
12
13 @include iro.props-store((
14 --colors: (
15 --label: fn.global-color(--fg),
16
17 --hover: (
18 --bg: fn.global-color(--obj-hi),
19 --label: fn.global-color(--fg-lo),
20 ),
21 --active: (
22 --bg: fn.global-color(--obj),
23 --label: fn.global-color(--fg-lo),
24 ),
25 --selected: (
26 --bg: fn.global-color(--obj-hi),
27 --label: fn.global-color(--fg),
28
29 --hover: (
30 --bg: fn.global-color(--obj),
31 --label: fn.global-color(--fg-lo),
32 ),
33 ),
34 --disabled: (
35 --label: fn.global-color(--fg-hi3),
36 ),
37 --key-focus: (
38 --border: fn.global-color(--focus --fill),
39 --shadow: fn.global-color(--focus --shadow),
40 ),
41
42 --red: (
43 --hover: (
44 --bg: fn.global-color(--red --quiet --bg),
45 --label: fn.global-color(--red --quiet --fg),
46 ),
47 --active: (
48 --bg: fn.global-color(--red --quiet --obj),
49 --label: fn.global-color(--red --quiet --fg-lo),
50 ),
51
52 --selected: (
53 --bg: fn.global-color(--red --quiet --bg),
54 --label: fn.global-color(--red --quiet --fg),
55
56 --hover: (
57 --bg: fn.global-color(--red --quiet --obj),
58 --label: fn.global-color(--red --quiet --fg-lo),
59 ),
60 ),
61 ),
62
63 --blue: (
64 --hover: (
65 --bg: fn.global-color(--blue --quiet --bg),
66 --label: fn.global-color(--blue --quiet --fg),
67 ),
68 --active: (
69 --bg: fn.global-color(--blue --quiet --obj),
70 --label: fn.global-color(--blue --quiet --fg-lo),
71 ),
72
73 --selected: (
74 --bg: fn.global-color(--blue --quiet --bg),
75 --label: fn.global-color(--blue --quiet --fg),
76
77 --hover: (
78 --bg: fn.global-color(--blue --quiet --obj),
79 --label: fn.global-color(--blue --quiet --fg-lo),
80 ),
81 ),
82 ),
83
84 --green: (
85 --hover: (
86 --bg: fn.global-color(--green --quiet --bg),
87 --label: fn.global-color(--green --quiet --fg),
88 ),
89 --active: (
90 --bg: fn.global-color(--green --quiet --obj),
91 --label: fn.global-color(--green --quiet --fg-lo),
92 ),
93
94 --selected: (
95 --bg: fn.global-color(--green --quiet --bg),
96 --label: fn.global-color(--green --quiet --fg),
97
98 --hover: (
99 --bg: fn.global-color(--green --quiet --obj),
100 --label: fn.global-color(--green --quiet --fg-lo),
101 ),
102 ),
103 )
104 ),
105 ), 'colors');
106
107 @include iro.bem-object(iro.props-namespace()) {
108 display: inline-block;
109 color: fn.color(--disabled --label);
110
111 @include iro.bem-elem('outside') {
112 display: inline-block;
113 margin-right: fn.dim(--spacing);
114 }
115
116 @include iro.bem-elem('inside') {
117 display: inline-block;
118 padding: fn.dim(--pad-y) fn.dim(--pad-x);
119 border: 2px solid transparent;
120 border-radius: 100em;
121 line-height: 1;
122 text-align: center;
123 text-decoration: none;
124 text-overflow: ellipsis;
125 white-space: nowrap;
126
127 @include iro.bem-next-elem('outside') {
128 margin-right: 0;
129 margin-left: fn.dim(--spacing);
130 }
131 }
132
133 &:link,
134 &:visited,
135 &:enabled {
136 color: fn.color(--label);
137
138 &:hover {
139 @include iro.bem-elem('inside') {
140 background-color: fn.color(--hover --bg);
141 color: fn.color(--hover --label);
142 }
143 }
144
145 &:active {
146 @include iro.bem-elem('inside') {
147 background-color: fn.color(--active --bg);
148 color: fn.color(--active --label);
149 }
150 }
151
152 @include iro.bem-at-theme('keyboard') {
153 &:focus {
154 @include iro.bem-elem('inside') {
155 background-color: fn.color(--hover --bg);
156 color: fn.color(--hover --label);
157 }
158 }
159 }
160 }
161
162 @include iro.bem-is('selected') {
163 @include iro.bem-elem('inside') {
164 background-color: fn.color(--selected --bg);
165 }
166
167 &:link,
168 &:visited,
169 &:enabled {
170 @include iro.bem-elem('inside') {
171 color: fn.color(--selected --label);
172 }
173
174 &:hover,
175 &:active {
176 @include iro.bem-elem('inside') {
177 background-color: fn.color(--selected --hover --bg);
178 color: fn.color(--selected --hover --label);
179 }
180 }
181
182 @include iro.bem-at-theme('keyboard') {
183 &:focus {
184 @include iro.bem-elem('inside') {
185 background-color: fn.color(--selected --bg);
186 color: fn.color(--selected --hover --label);
187 }
188 }
189 }
190 }
191 }
192
193 @each $color in 'red' 'blue' 'green' {
194 @include iro.bem-modifier($color) {
195 &:link,
196 &:visited,
197 &:enabled {
198 &:hover {
199 @include iro.bem-elem('inside') {
200 background-color: fn.color(--#{$color} --hover --bg);
201 color: fn.color(--#{$color} --hover --label);
202 }
203 }
204
205 &:active {
206 @include iro.bem-elem('inside') {
207 background-color: fn.color(--#{$color} --active --bg);
208 color: fn.color(--#{$color} --active --label);
209 }
210 }
211 }
212
213 @include iro.bem-is('selected') {
214 &:link,
215 &:visited,
216 &:enabled {
217 @include iro.bem-elem('inside') {
218 background-color: fn.color(--#{$color} --selected --bg);
219 color: fn.color(--#{$color} --selected --label);
220 }
221
222 &:hover,
223 &:active {
224 @include iro.bem-elem('inside') {
225 background-color: fn.color(--#{$color} --selected --hover --bg);
226 color: fn.color(--#{$color} --selected --hover --label);
227 }
228 }
229 }
230 }
231 }
232 }
233
234 @include iro.bem-at-theme('keyboard') {
235 &:focus {
236 @include iro.bem-elem('inside') {
237 border-color: fn.color(--key-focus --border);
238 box-shadow: fn.color(--key-focus --shadow);
239 }
240 }
241 }
242 }
243}
diff --git a/src/.old/objects/_radio.scss b/src/.old/objects/_radio.scss
new file mode 100644
index 0000000..5af7a12
--- /dev/null
+++ b/src/.old/objects/_radio.scss
@@ -0,0 +1,176 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('radio') {
5 @include iro.props-store((
6 --dims: (
7 --diameter: calc(fn.global-dim(--size --175) + 1px),
8 --label-gap: fn.global-dim(--size --125),
9 --border: fn.global-dim(--border --medium),
10 --pad-x: fn.global-dim(--size --65),
11 --pad-y: fn.global-dim(--size --65),
12 ),
13 ), 'dims');
14
15 @include iro.props-store((
16 --colors: (
17 --circle-border: fn.global-color(--fg-hi),
18 --circle-bg: fn.global-color(--bg-hi),
19
20 --hover: (
21 --label: fn.global-color(--fg-lo),
22 --circle-border: fn.global-color(--fg),
23 ),
24 --accent: (
25 --circle-border: fn.global-color(--accent --primary --solid --bg),
26
27 --hover: (
28 --circle-border: fn.global-color(--accent --primary --solid --obj),
29 ),
30 ),
31 --key-focus: (
32 --label: fn.global-color(--focus --text),
33 --circle-border: fn.global-color(--focus --fill),
34 --shadow: fn.global-color(--focus --shadow),
35 ),
36 --disabled: (
37 --label: fn.global-color(--fg-hi3),
38 --circle-border: fn.global-color(--obj-lo),
39 --circle-bg: fn.global-color(--bg-hi),
40 )
41 ),
42 ), 'colors');
43
44 @include iro.bem-object(iro.props-namespace()) {
45 display: inline-flex;
46 position: relative;
47 align-items: flex-start;
48 margin-right: calc(-1 * fn.dim(--pad-x));
49 margin-left: calc(-1 * fn.dim(--pad-x));
50 padding: fn.dim(--pad-y) fn.dim(--pad-x);
51
52 @include iro.bem-elem('circle') {
53 display: block;
54 box-sizing: border-box;
55 flex: 0 0 auto;
56 width: fn.dim(--diameter);
57 height: fn.dim(--diameter);
58 margin-top: calc(.5 * (fn.global-dim(--font --standard --line-height) * 1em - fn.dim(--diameter)));
59 border-radius: 2em;
60 background-color: fn.color(--circle-border);
61
62 &::after {
63 content: '';
64 display: block;
65 position: relative;
66 top: fn.dim(--border);
67 left: fn.dim(--border);
68 width: calc(fn.dim(--diameter) - 2 * fn.dim(--border));
69 height: calc(fn.dim(--diameter) - 2 * fn.dim(--border));
70 transition: transform .2s ease;
71 border-radius: fn.dim(--diameter);
72 background-color: fn.color(--circle-bg);
73 }
74 }
75
76 @include iro.bem-elem('label') {
77 align-self: baseline;
78 margin-left: fn.dim(--label-gap);
79 }
80
81 @include iro.bem-elem('native') {
82 position: absolute;
83 top: 0;
84 left: 0;
85 width: 100%;
86 height: 100%;
87 margin: 0;
88 padding: 0;
89 overflow: hidden;
90 opacity: .0001;
91
92 &:hover {
93 @include iro.bem-sibling-elem('label') {
94 color: fn.color(--hover --label);
95 }
96
97 @include iro.bem-sibling-elem('circle') {
98 background-color: fn.color(--hover --circle-border);
99 }
100 }
101
102 &:checked {
103 @include iro.bem-sibling-elem('circle') {
104 &::after {
105 transform: scale(.44);
106 }
107 }
108 }
109
110 &:disabled {
111 @include iro.bem-sibling-elem('label') {
112 color: fn.color(--disabled --label);
113 }
114
115 @include iro.bem-sibling-elem('circle') {
116 background-color: fn.color(--disabled --circle-border);
117
118 &::after {
119 background-color: fn.color(--disabled --circle-bg);
120 }
121 }
122 }
123
124 @include iro.bem-at-theme('keyboard') {
125 &:focus {
126 @include iro.bem-sibling-elem('label') {
127 color: fn.color(--key-focus --label);
128 }
129
130 @include iro.bem-sibling-elem('circle') {
131 background-color: fn.color(--key-focus --circle-border);
132 box-shadow: fn.color(--key-focus --shadow);
133 }
134 }
135 }
136 }
137
138 @include iro.bem-modifier('standalone') {
139 @include iro.bem-elem('circle') {
140 margin-top: 0;
141 }
142 }
143
144 @include iro.bem-modifier('accent') {
145 @include iro.bem-elem('native') {
146 &:checked {
147 @include iro.bem-sibling-elem('circle') {
148 background-color: fn.color(--accent --circle-border);
149 }
150
151 &:hover {
152 @include iro.bem-sibling-elem('circle') {
153 background-color: fn.color(--accent --hover --circle-border);
154 }
155 }
156 }
157
158 &:disabled {
159 @include iro.bem-sibling-elem('circle') {
160 background-color: fn.color(--disabled --circle-border);
161
162 &::after {
163 background-color: fn.color(--disabled --circle-bg);
164 }
165 }
166
167 &:checked {
168 @include iro.bem-sibling-elem('circle') {
169 background-color: fn.color(--disabled --circle-border);
170 }
171 }
172 }
173 }
174 }
175 }
176}
diff --git a/src/.old/objects/_status-indicator.scss b/src/.old/objects/_status-indicator.scss
new file mode 100644
index 0000000..d8ea9ef
--- /dev/null
+++ b/src/.old/objects/_status-indicator.scss
@@ -0,0 +1,35 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('status-indicator') {
5 @include iro.props-store((
6 --dims: (
7 --size: fn.global-dim(--size --125),
8 ),
9 ), 'dims');
10
11 @include iro.props-store((
12 --colors: (
13 --default: fn.global-color(--obj-lo),
14 --primary: fn.global-color(--fg),
15 --green: fn.global-color(--green --solid --bg-hi),
16 --yellow: fn.global-color(--yellow --solid --bg-hi),
17 --red: fn.global-color(--red --solid --bg-hi),
18 ),
19 ), 'colors');
20
21 @include iro.bem-object(iro.props-namespace()) {
22 display: inline-block;
23 width: fn.dim(--size);
24 height: fn.dim(--size);
25 border-radius: 10em;
26 background-color: fn.color(--default);
27 vertical-align: middle;
28
29 @each $color in 'primary' 'green' 'yellow' 'red' {
30 @include iro.bem-is($color) {
31 background-color: fn.color(--#{$color});
32 }
33 }
34 }
35}
diff --git a/src/.old/objects/_switch.scss b/src/.old/objects/_switch.scss
new file mode 100644
index 0000000..cbbb9b7
--- /dev/null
+++ b/src/.old/objects/_switch.scss
@@ -0,0 +1,221 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('switch') {
5 @include iro.props-store((
6 --dims: (
7 --width: fn.global-dim(--size --325),
8 --height: calc(fn.global-dim(--size --175) + 1px),
9 --label-gap: fn.global-dim(--size --125),
10 --border: fn.global-dim(--border --medium),
11 --pad-x: fn.global-dim(--size --65),
12 --pad-y: fn.global-dim(--size --65),
13 ),
14 ), 'dims');
15
16 @include iro.props-store((
17 --colors: (
18 --track-bg: fn.global-color(--obj),
19 --handle-border: fn.global-color(--fg-hi),
20 --handle-bg: fn.global-color(--bg-hi),
21
22 --hover: (
23 --label: fn.global-color(--fg-lo),
24 --handle-border: fn.global-color(--fg),
25 ),
26 --accent: (
27 --handle-border: fn.global-color(--accent --primary --solid --bg),
28
29 --hover: (
30 --handle-border: fn.global-color(--accent --primary --solid --obj),
31 ),
32 ),
33 --key-focus: (
34 --label: fn.global-color(--focus --text),
35 --track-bg: fn.global-color(--focus --fill),
36 --handle-border: fn.global-color(--focus --fill),
37 --shadow: fn.global-color(--focus --shadow),
38 ),
39 --disabled: (
40 --label: fn.global-color(--fg-hi3),
41 --track-bg: fn.global-color(--obj),
42 --handle-border: fn.global-color(--obj-lo),
43 --handle-bg: fn.global-color(--bg-hi),
44 )
45 ),
46 ), 'colors');
47
48 @include iro.bem-object(iro.props-namespace()) {
49 display: inline-flex;
50 position: relative;
51 align-items: flex-start;
52 margin-right: calc(-1 * fn.dim(--pad-x));
53 margin-left: calc(-1 * fn.dim(--pad-x));
54 padding: fn.dim(--pad-y) fn.dim(--pad-x);
55
56 @include iro.bem-elem('indicator') {
57 display: block;
58 box-sizing: border-box;
59 flex: 0 0 auto;
60 width: fn.dim(--width);
61 height: fn.dim(--height);
62 margin-top: calc(.5 * (fn.global-dim(--font --standard --line-height) * 1em - fn.dim(--height)));
63 transition: background-color .2s ease;
64 border-radius: 2em;
65 background-color: fn.color(--track-bg);
66
67 &::after {
68 content: '';
69 display: block;
70 width: calc(fn.dim(--height) - 2 * fn.dim(--border));
71 height: calc(fn.dim(--height) - 2 * fn.dim(--border));
72 transition: transform .2s ease;
73 border: fn.dim(--border) solid fn.color(--handle-border);
74 border-radius: fn.dim(--width);
75 background-color: fn.color(--handle-bg);
76 }
77 }
78
79 @include iro.bem-elem('label') {
80 align-self: baseline;
81 margin-left: fn.dim(--label-gap);
82 }
83
84 @include iro.bem-elem('native') {
85 position: absolute;
86 top: 0;
87 left: 0;
88 width: 100%;
89 height: 100%;
90 margin: 0;
91 padding: 0;
92 overflow: hidden;
93 opacity: .0001;
94
95 &:hover {
96 @include iro.bem-sibling-elem('label') {
97 color: fn.color(--hover --label);
98 }
99
100 @include iro.bem-sibling-elem('indicator') {
101 &::after {
102 border-color: fn.color(--hover --handle-border);
103 }
104 }
105 }
106
107 &:checked {
108 @include iro.bem-sibling-elem('indicator') {
109 background-color: fn.color(--handle-border);
110
111 &::after {
112 transform: translate(calc(fn.dim(--width) - fn.dim(--height) + .5px), 0);
113 border-color: fn.color(--handle-border);
114 }
115 }
116
117 &:hover {
118 @include iro.bem-sibling-elem('indicator') {
119 background-color: fn.color(--hover --handle-border);
120
121 &::after {
122 border-color: fn.color(--hover --handle-border);
123 }
124 }
125 }
126 }
127
128 &:disabled {
129 @include iro.bem-sibling-elem('label') {
130 color: fn.color(--disabled --label);
131 }
132
133 @include iro.bem-sibling-elem('indicator') {
134 background-color: fn.color(--disabled --track-bg);
135
136 &::after {
137 border-color: fn.color(--disabled --handle-border);
138 background-color: fn.color(--disabled --handle-bg);
139 }
140 }
141
142 &:checked {
143 @include iro.bem-sibling-elem('indicator') {
144 background-color: fn.color(--disabled --handle-border);
145
146 &::after {
147 border-color: fn.color(--disabled --handle-border);
148 }
149 }
150 }
151 }
152
153 @include iro.bem-at-theme('keyboard') {
154 &:focus {
155 @include iro.bem-sibling-elem('label') {
156 color: fn.color(--key-focus --label);
157 }
158
159 @include iro.bem-sibling-elem('indicator') {
160 &::after {
161 border-color: fn.color(--key-focus --handle-border);
162 box-shadow: fn.color(--key-focus --shadow);
163 }
164 }
165
166 &:checked {
167 @include iro.bem-sibling-elem('indicator') {
168 background-color: fn.color(--key-focus --track-bg);
169 }
170 }
171 }
172 }
173 }
174
175 @include iro.bem-modifier('standalone') {
176 @include iro.bem-elem('indicator') {
177 margin-top: 0;
178 }
179 }
180
181 @include iro.bem-modifier('accent') {
182 @include iro.bem-elem('native') {
183 &:checked {
184 @include iro.bem-sibling-elem('indicator') {
185 background-color: fn.color(--accent --handle-border);
186
187 &::after {
188 border-color: fn.color(--accent --handle-border);
189 }
190 }
191
192 &:hover {
193 @include iro.bem-sibling-elem('indicator') {
194 background-color: fn.color(--accent --hover --handle-border);
195
196 &::after {
197 border-color: fn.color(--accent --hover --handle-border);
198 }
199 }
200 }
201 }
202
203 &:disabled {
204 @include iro.bem-sibling-elem('label') {
205 color: fn.color(--disabled --label);
206 }
207
208 &:checked {
209 @include iro.bem-sibling-elem('indicator') {
210 background-color: fn.color(--disabled --handle-border);
211
212 &::after {
213 border-color: fn.color(--disabled --handle-border);
214 }
215 }
216 }
217 }
218 }
219 }
220 }
221}
diff --git a/src/.old/objects/_table.scss b/src/.old/objects/_table.scss
new file mode 100644
index 0000000..34512cb
--- /dev/null
+++ b/src/.old/objects/_table.scss
@@ -0,0 +1,167 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3@use '../mixins' as mx;
4
5@include iro.props-namespace('table') {
6 @include iro.props-store((
7 --dims: (
8 --pad-x: fn.global-dim(--size --175),
9 --pad-y: fn.global-dim(--size --125),
10 --rounding: 3px,
11 --50: (
12 --pad-y: fn.global-dim(--size --75),
13 )
14 ),
15 ), 'dims');
16
17 @include iro.props-store((
18 --colors: (
19 --border: fn.global-color(--obj),
20 --heading: fn.global-color(--fg-hi),
21 --hover: fn.global-color(--obj-hi),
22 --press: fn.global-color(--obj),
23 --box: (
24 --bg: fn.global-color(--bg-hi2),
25 --hover: fn.global-color(--bg),
26 --press: fn.global-color(--obj-hi),
27 )
28 )
29 ), 'colors');
30
31 @include iro.bem-object(iro.props-namespace()) {
32 border-spacing: 0;
33 border-collapse: separate;
34
35 @include iro.bem-modifier('fixed') {
36 table-layout: fixed;
37 }
38
39 @include iro.bem-elem('head-cell') {
40 @include mx.set-font(--standard, (
41 --line-height: null,
42 --size: fn.global-dim(--font-size --50),
43 --weight: 500,
44 --transform: uppercase,
45 --spacing: .5px
46 ));
47
48 padding: fn.dim(--pad-y) fn.dim(--pad-x);
49 color: fn.color(--heading);
50 text-align: left;
51 }
52
53 @include iro.bem-elem('cell') {
54 padding: fn.dim(--pad-y) fn.dim(--pad-x);
55 border-width: 1px 0 0;
56 border-style: solid;
57 border-color: fn.color(--border);
58
59 @include iro.bem-modifier('divider') {
60 border-right-width: 1px;
61 }
62 }
63
64 @include iro.bem-elem('row') {
65 &:last-child {
66 @include iro.bem-elem('cell') {
67 border-bottom-width: 1px;
68 }
69 }
70 }
71
72 @include iro.bem-modifier('flush') {
73 @include iro.bem-elem('head-cell', 'cell') {
74 &:first-child {
75 padding-left: 0;
76 }
77
78 &:last-child {
79 padding-right: 0;
80 }
81 }
82 }
83
84 @include iro.bem-modifier('box') {
85 @include iro.bem-elem('cell') {
86 background-color: fn.color(--box --bg);
87
88 &:first-child {
89 border-left-width: 1px;
90 }
91
92 &:last-child {
93 border-right-width: 1px;
94 }
95 }
96
97 @include iro.bem-elem('row') {
98 &:first-child {
99 @include iro.bem-elem('cell') {
100 &:first-child {
101 border-top-left-radius: fn.dim(--rounding);
102 }
103
104 &:last-child {
105 border-top-right-radius: fn.dim(--rounding);
106 }
107 }
108 }
109
110 &:last-child {
111 @include iro.bem-elem('cell') {
112 &:first-child {
113 border-bottom-left-radius: fn.dim(--rounding);
114 }
115
116 &:last-child {
117 border-bottom-right-radius: fn.dim(--rounding);
118 }
119 }
120 }
121 }
122 }
123
124 @include iro.bem-modifier('interactive') {
125 @include iro.bem-elem('row') {
126 @include iro.bem-elem('cell') {
127 cursor: pointer;
128 }
129
130 &:hover {
131 @include iro.bem-elem('cell') {
132 background-color: fn.color(--hover);
133 }
134 }
135
136 &:active {
137 @include iro.bem-elem('cell') {
138 background-color: fn.color(--press);
139 }
140 }
141 }
142
143 @include iro.bem-modifier('box') {
144 @include iro.bem-elem('row') {
145 &:hover {
146 @include iro.bem-elem('cell') {
147 background-color: fn.color(--box --hover);
148 }
149 }
150
151 &:active {
152 @include iro.bem-elem('cell') {
153 background-color: fn.color(--box --press);
154 }
155 }
156 }
157 }
158 }
159
160 @include iro.bem-modifier('50') {
161 @include iro.bem-elem('head-cell', 'cell') {
162 padding-top: fn.dim(--50 --pad-y);
163 padding-bottom: fn.dim(--50 --pad-y);
164 }
165 }
166 }
167}
diff --git a/src/.old/objects/_text-field.scss b/src/.old/objects/_text-field.scss
new file mode 100644
index 0000000..88c4535
--- /dev/null
+++ b/src/.old/objects/_text-field.scss
@@ -0,0 +1,232 @@
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-22 23:08:40 +0000