summaryrefslogtreecommitdiffstats
path: root/src/.old/objects
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-06-29 10:01:02 +0200
committerVolpeon <git@volpeon.ink>2024-06-29 10:01:02 +0200
commit6376f1a5225b2fa45f6c861d4a265bf13b56d038 (patch)
tree7c2ec8bea63df05b6a533fdfa6dab4b2f17f7a1f /src/.old/objects
parentUpdate (diff)
downloadiro-design-6376f1a5225b2fa45f6c861d4a265bf13b56d038.tar.gz
iro-design-6376f1a5225b2fa45f6c861d4a265bf13b56d038.tar.bz2
iro-design-6376f1a5225b2fa45f6c861d4a265bf13b56d038.zip
Update
Diffstat (limited to 'src/.old/objects')
-rw-r--r--src/.old/objects/_lightbox.scss206
-rw-r--r--src/.old/objects/_list-group.scss61
2 files changed, 61 insertions, 206 deletions
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 12:38:09 +0000