summaryrefslogtreecommitdiffstats
path: root/src/.old
diff options
context:
space:
mode:
Diffstat (limited to 'src/.old')
-rw-r--r--src/.old/layouts/_message-group.scss139
-rw-r--r--src/.old/objects/_lightbox.scss206
-rw-r--r--src/.old/objects/_list-group.scss61
3 files changed, 200 insertions, 206 deletions
diff --git a/src/.old/layouts/_message-group.scss b/src/.old/layouts/_message-group.scss
new file mode 100644
index 0000000..235e242
--- /dev/null
+++ b/src/.old/layouts/_message-group.scss
@@ -0,0 +1,139 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4// @use '../objects/message';
5
6@include iro.props-namespace('message-group') {
7 @include iro.props-store((
8 --dims: (
9 --spacing-x: fn.global-dim(--size --225),
10 --spacing-y: fn.global-dim(--size --150),
11 --arrow-size: fn.global-dim(--size --100),
12
13 --compact: (
14 --spacing-x: fn.global-dim(--size --225),
15 --spacing-y: fn.global-dim(--size --50),
16 )
17 )
18 ));
19
20 @include iro.bem-layout(iro.props-namespace()) {
21 display: grid;
22 grid-template-columns: auto 1fr;
23 grid-auto-rows: auto;
24 grid-template-areas: 'avatar message' 'avatar .';
25 align-items: flex-start;
26 gap: 0 fn.dim(--spacing-x);
27
28 @include iro.bem-elem('avatar') {
29 grid-area: avatar;
30 block-size: 0;
31 }
32
33 @include iro.bem-elem('message') {
34 grid-column: message;
35 position: relative;
36 box-sizing: border-box;
37 min-inline-size: 0;
38 max-inline-size: 100%;
39
40 &::before {
41 content: '';
42 display: none;
43 position: absolute;
44 top: 0;
45 left: calc(-1 * fn.dim(--arrow-size));
46 border: fn.dim(--arrow-size) solid fn.global-color(--bg-l2);
47 border-bottom-color: transparent;
48 border-left-color: transparent;
49 }
50
51 @include iro.bem-next-twin-elem {
52 margin-top: fn.dim(--spacing-y);
53 }
54 }
55
56 @include iro.bem-modifier('right') {
57 @include iro.bem-elem('message') {
58 &::before {
59 right: calc(-1 * fn.dim(--arrow-size));
60 left: auto;
61 border-right-color: transparent;
62 border-left-color: fn.global-color(--bg-l2);
63 }
64 }
65 }
66
67 @include iro.bem-modifier('compact') {
68 gap: 0 fn.dim(--compact --spacing-x);
69
70 @include iro.bem-modifier('left') {
71 justify-items: start;
72 }
73
74 @include iro.bem-modifier('right') {
75 justify-items: end;
76 }
77
78 @include iro.bem-elem('message') {
79 @include iro.bem-next-twin-elem {
80 margin-top: fn.dim(--compact --spacing-y);
81 }
82 }
83 }
84
85 @include iro.bem-modifier('right') {
86 grid-template-columns: 1fr auto;
87 grid-template-areas: 'message avatar' '. avatar';
88 }
89
90 @include iro.bem-modifier('no-avatar') {
91 grid-template-columns: 1fr;
92 grid-template-areas: 'message';
93
94 @include iro.bem-elem('avatar') {
95 display: none;
96 }
97 }
98
99 @include iro.bem-modifier('arrow') {
100 @include iro.bem-elem('message') {
101 &::before {
102 display: block;
103 }
104
105 @include iro.bem-next-twin-elem {
106 &::before {
107 display: none;
108 }
109 }
110 }
111 }
112
113 & + & {
114 @include iro.bem-modifier('merge') {
115 margin-top: fn.dim(--spacing-y);
116
117 @include iro.bem-elem('avatar') {
118 visibility: hidden;
119 }
120
121 @include iro.bem-modifier('compact') {
122 margin-top: fn.dim(--compact --spacing-y);
123 }
124
125 @include iro.bem-elem('merge-hide') {
126 display: none;
127 }
128
129 @include iro.bem-modifier('arrow') {
130 @include iro.bem-elem('message') {
131 &::before {
132 display: none;
133 }
134 }
135 }
136 }
137 }
138 }
139}
diff --git a/src/.old/objects/_lightbox.scss b/src/.old/objects/_lightbox.scss
deleted file mode 100644
index 31d3398..0000000
--- a/src/.old/objects/_lightbox.scss
+++ /dev/null
@@ -1,206 +0,0 @@
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..a346828
--- /dev/null
+++ b/src/.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}
generated by cgit v1.2.3-54-g00ecf (git 2.45.2) at 2024-09-21 09:40:10 +0000