summaryrefslogtreecommitdiffstats
path: root/src_old/.old/objects
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-10-17 16:45:00 +0200
committerVolpeon <git@volpeon.ink>2024-10-17 16:45:00 +0200
commit50f6acc739f24bfa2ca080d08e90d82f8fa83543 (patch)
tree404dbe97d34b7e4fc3293c8e6a8c92d9941ac51e /src_old/.old/objects
parentColors (diff)
downloadiro-design-50f6acc739f24bfa2ca080d08e90d82f8fa83543.tar.gz
iro-design-50f6acc739f24bfa2ca080d08e90d82f8fa83543.tar.bz2
iro-design-50f6acc739f24bfa2ca080d08e90d82f8fa83543.zip
Revamped variable management
Diffstat (limited to 'src_old/.old/objects')
-rw-r--r--src_old/.old/objects/_dialog.scss152
-rw-r--r--src_old/.old/objects/_icon-nav.scss20
-rw-r--r--src_old/.old/objects/_list-group.scss61
-rw-r--r--src_old/.old/objects/_message.scss51
-rw-r--r--src_old/.old/objects/_overflow-button.scss243
5 files changed, 527 insertions, 0 deletions
diff --git a/src_old/.old/objects/_dialog.scss b/src_old/.old/objects/_dialog.scss
new file mode 100644
index 0000000..9333ce6
--- /dev/null
+++ b/src_old/.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/.old/objects/_icon-nav.scss b/src_old/.old/objects/_icon-nav.scss
new file mode 100644
index 0000000..d1c6539
--- /dev/null
+++ b/src_old/.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/.old/objects/_list-group.scss b/src_old/.old/objects/_list-group.scss
new file mode 100644
index 0000000..a346828
--- /dev/null
+++ b/src_old/.old/objects/_list-group.scss
@@ -0,0 +1,61 @@
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-i: fn.global-dim(--size --175),
8 --pad-b: fn.global-dim(--size --125),
9 --rounding: fn.global-dim(--rounding),
10 --border: fn.global-dim(--border --thin),
11 ),
12 --colors: (
13 --bg: fn.global-color(--base --75),
14 --border: fn.global-color(--border),
15 --hover: fn.global-color(--border-mute),
16 --active: fn.global-color(--border),
17 )
18 ));
19
20 @include iro.bem-object(iro.props-namespace()) {
21 border: fn.dim(--border) solid fn.color(--border);
22 border-radius: fn.dim(--rounding);
23 background-color: fn.color(--bg);
24
25 @include iro.bem-elem('item') {
26 padding-block: fn.dim(--pad-b);
27 padding-inline: fn.dim(--pad-i);
28
29 @include iro.bem-next-twin-elem {
30 border-width: 0;
31 border-block-start-width: fn.dim(--border);
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 &:focus-visible {
39 background-color: fn.color(--hover);
40 }
41
42 &:active {
43 background-color: fn.color(--active);
44 }
45 }
46 }
47
48 @include iro.bem-modifier('horizontal') {
49 display: flex;
50
51 @include iro.bem-elem('item') {
52 flex: 1 0 auto;
53
54 @include iro.bem-next-twin-elem {
55 border-block-start-width: 0;
56 border-inline-start-width: fn.dim(--border);
57 }
58 }
59 }
60 }
61}
diff --git a/src_old/.old/objects/_message.scss b/src_old/.old/objects/_message.scss
new file mode 100644
index 0000000..283ce26
--- /dev/null
+++ b/src_old/.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/.old/objects/_overflow-button.scss b/src_old/.old/objects/_overflow-button.scss
new file mode 100644
index 0000000..b15ea1f
--- /dev/null
+++ b/src_old/.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}
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-12-25 06:16:23 +0000