summaryrefslogtreecommitdiffstats
path: root/src/layouts/_card-list.vars.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/layouts/_card-list.vars.scss')
-rw-r--r--src/layouts/_card-list.vars.scss135
1 files changed, 40 insertions, 95 deletions
diff --git a/src/layouts/_card-list.vars.scss b/src/layouts/_card-list.vars.scss
index ece68f3..fb89b52 100644
--- a/src/layouts/_card-list.vars.scss
+++ b/src/layouts/_card-list.vars.scss
@@ -1,116 +1,61 @@
1@use "pkg:iro-sass/props"; 1@use 'pkg:iro-sass/src/props';
2@use "../core.vars" as core; 2@use '../core.vars' as core;
3@use "../objects/card" as card; 3@use '../objects/card' as card;
4 4
5$row-gap: props.def(--l-card-list--row-gap, props.get(core.$size--200)) !default; 5$row-gap: props.def(--l-card-list--row-gap, props.get(core.$size--200)) !default;
6$quiet--row-gap: props.def(--l-card-list--quiet--row-gap, props.get(core.$size--800)) !default; 6$quiet--row-gap: props.def(--l-card-list--quiet--row-gap, props.get(core.$size--800)) !default;
7 7
8$grid--row-gap: props.def(--l-card-list--grid--row-gap, props.get(core.$size--600)) !default; 8$grid--row-gap: props.def(--l-card-list--grid--row-gap, props.get(core.$size--600)) !default;
9$grid--col-gap: props.def(--l-card-list--grid--col-gap, props.get(core.$size--600)) !default; 9$grid--col-gap: props.def(--l-card-list--grid--col-gap, props.get(core.$size--600)) !default;
10$grid--col-width: props.def(--l-card-list--grid--col-width, props.get(core.$size--3200)) !default; 10$grid--col-width: props.def(--l-card-list--grid--col-width, props.get(core.$size--3200)) !default;
11$grid--quiet--row-gap: props.def( 11$grid--quiet--row-gap: props.def(--l-card-list--grid--quiet--row-gap, props.get(core.$size--800)) !default;
12 --l-card-list--grid--quiet--row-gap,
13 props.get(core.$size--800)
14) !default;
15 12
16$grid-sm--row-gap: props.def(--l-card-list--grid-sm--row-gap, props.get(core.$size--200)) !default; 13$grid-sm--row-gap: props.def(--l-card-list--grid-sm--row-gap, props.get(core.$size--200)) !default;
17$grid-sm--col-gap: props.def(--l-card-list--grid-sm--col-gap, props.get(core.$size--200)) !default; 14$grid-sm--col-gap: props.def(--l-card-list--grid-sm--col-gap, props.get(core.$size--200)) !default;
18$grid-sm--col-width: props.def( 15$grid-sm--col-width: props.def(--l-card-list--grid-sm--col-width, props.get(core.$size--4600)) !default;
19 --l-card-list--grid-sm--col-width, 16$grid-sm--quiet--row-gap: props.def(--l-card-list--grid-sm--quiet--row-gap, props.get(core.$size--800)) !default;
20 props.get(core.$size--4600)
21) !default;
22$grid-sm--quiet--row-gap: props.def(
23 --l-card-list--grid-sm--quiet--row-gap,
24 props.get(core.$size--800)
25) !default;
26 17
27$grid-xs--row-gap: props.def(--l-card-list--grid-xs--row-gap, props.get(core.$size--200)) !default; 18$grid-xs--row-gap: props.def(--l-card-list--grid-xs--row-gap, props.get(core.$size--200)) !default;
28$grid-xs--col-gap: props.def(--l-card-list--grid-xs--col-gap, props.get(core.$size--200)) !default; 19$grid-xs--col-gap: props.def(--l-card-list--grid-xs--col-gap, props.get(core.$size--200)) !default;
29$grid-xs--col-width: props.def( 20$grid-xs--col-width: props.def(--l-card-list--grid-xs--col-width, props.get(core.$size--1600)) !default;
30 --l-card-list--grid-xs--col-width, 21$grid-xs--quiet--row-gap: props.def(--l-card-list--grid-xs--quiet--row-gap, props.get(core.$size--800)) !default;
31 props.get(core.$size--1600)
32) !default;
33$grid-xs--quiet--row-gap: props.def(
34 --l-card-list--grid-xs--quiet--row-gap,
35 props.get(core.$size--800)
36) !default;
37 22
38$grid-layouts: ( 23$grid-layouts: (
39 "grid" $grid--row-gap $grid--col-gap $grid--col-width $grid--quiet--row-gap sm, 24 'grid' $grid--row-gap $grid--col-gap $grid--col-width $grid--quiet--row-gap sm,
40 "grid-sm" $grid-sm--row-gap $grid-sm--col-gap $grid-sm--col-width $grid-sm--quiet--row-gap sm, 25 'grid-sm' $grid-sm--row-gap $grid-sm--col-gap $grid-sm--col-width $grid-sm--quiet--row-gap sm,
41 "grid-xs" $grid-xs--row-gap $grid-xs--col-gap $grid-xs--col-width $grid-xs--quiet--row-gap xs 26 'grid-xs' $grid-xs--row-gap $grid-xs--col-gap $grid-xs--col-width $grid-xs--quiet--row-gap xs,
42) !default; 27) !default;
43 28
44$flex-layouts: ( 29$flex-layouts: (
45 "flex" $grid--row-gap $grid--col-gap $grid--col-width $grid--quiet--row-gap sm, 30 'flex' $grid--row-gap $grid--col-gap $grid--col-width $grid--quiet--row-gap sm,
46 "flex-sm" $grid-sm--row-gap $grid-sm--col-gap $grid-sm--col-width $grid-sm--quiet--row-gap sm, 31 'flex-sm' $grid-sm--row-gap $grid-sm--col-gap $grid-sm--col-width $grid-sm--quiet--row-gap sm,
47 "flex-xs" $grid-xs--row-gap $grid-xs--col-gap $grid-xs--col-width $grid-xs--quiet--row-gap xs 32 'flex-xs' $grid-xs--row-gap $grid-xs--col-gap $grid-xs--col-width $grid-xs--quiet--row-gap xs,
48) !default; 33) !default;
49 34
50$masonry-h--row-gap: props.def( 35$masonry-h--row-gap: props.def(--l-card-list--masonry-h--row-gap, props.get(core.$size--400)) !default;
51 --l-card-list--masonry-h--row-gap, 36$masonry-h--col-gap: props.def(--l-card-list--masonry-h--col-gap, props.get(core.$size--400)) !default;
52 props.get(core.$size--400) 37$masonry-h--row-height: props.def(--l-card-list--masonry-h--row-height, props.get(core.$size--3200)) !default;
53) !default; 38$masonry-h--quiet--row-gap: props.def(--l-card-list--masonry-h--quiet--row-gap, props.get(core.$size--800)) !default;
54$masonry-h--col-gap: props.def(
55 --l-card-list--masonry-h--col-gap,
56 props.get(core.$size--400)
57) !default;
58$masonry-h--row-height: props.def(
59 --l-card-list--masonry-h--row-height,
60 props.get(core.$size--3200)
61) !default;
62$masonry-h--quiet--row-gap: props.def(
63 --l-card-list--masonry-h--quiet--row-gap,
64 props.get(core.$size--800)
65) !default;
66 39
67$masonry-h-sm--row-gap: props.def( 40$masonry-h-sm--row-gap: props.def(--l-card-list--masonry-h-sm--row-gap, props.get(core.$size--400)) !default;
68 --l-card-list--masonry-h-sm--row-gap, 41$masonry-h-sm--col-gap: props.def(--l-card-list--masonry-h-sm--col-gap, props.get(core.$size--400)) !default;
69 props.get(core.$size--400) 42$masonry-h-sm--row-height: props.def(--l-card-list--masonry-h-sm--row-height, props.get(core.$size--2600)) !default;
70) !default; 43$masonry-h-sm--quiet--row-gap: props.def(--l-card-list--masonry-h-sm--quiet--row-gap, props.get(core.$size--800)) !default;
71$masonry-h-sm--col-gap: props.def(
72 --l-card-list--masonry-h-sm--col-gap,
73 props.get(core.$size--400)
74) !default;
75$masonry-h-sm--row-height: props.def(
76 --l-card-list--masonry-h-sm--row-height,
77 props.get(core.$size--2600)
78) !default;
79$masonry-h-sm--quiet--row-gap: props.def(
80 --l-card-list--masonry-h-sm--quiet--row-gap,
81 props.get(core.$size--800)
82) !default;
83 44
84$masonry-h-layouts: ( 45$masonry-h-layouts: (
85 "masonry-h" $masonry-h--row-gap $masonry-h--col-gap $masonry-h--row-height 46 'masonry-h' $masonry-h--row-gap $masonry-h--col-gap $masonry-h--row-height $masonry-h--quiet--row-gap,
86 $masonry-h--quiet--row-gap, 47 'masonry-h-sm' $masonry-h-sm--row-gap $masonry-h-sm--col-gap $masonry-h-sm--row-height $masonry-h-sm--quiet--row-gap,
87 "masonry-h-sm" $masonry-h-sm--row-gap $masonry-h-sm--col-gap $masonry-h-sm--row-height
88 $masonry-h-sm--quiet--row-gap
89) !default; 48) !default;
90 49
91$masonry--row-gap: props.def(--l-card-list--masonry--row-gap, props.get(core.$size--400)) !default; 50$masonry--row-gap: props.def(--l-card-list--masonry--row-gap, props.get(core.$size--400)) !default;
92$masonry--col-gap: props.def(--l-card-list--masonry--col-gap, props.get(core.$size--400)) !default; 51$masonry--col-gap: props.def(--l-card-list--masonry--col-gap, props.get(core.$size--400)) !default;
93$masonry--col-width: props.def( 52$masonry--col-width: props.def(--l-card-list--masonry--col-width, props.get(core.$size--3200)) !default;
94 --l-card-list--masonry--col-width, 53$masonry--quiet--row-gap: props.def(--l-card-list--masonry--quiet--row-gap, props.get(core.$size--800)) !default;
95 props.get(core.$size--3200)
96) !default;
97$masonry--quiet--row-gap: props.def(
98 --l-card-list--masonry--quiet--row-gap,
99 props.get(core.$size--800)
100) !default;
101 54
102$shadow-x: props.def(--l-card-list--shadow-x, props.get(card.$shadow-x)) !default; 55$shadow-x: props.def(--l-card-list--shadow-x, props.get(card.$shadow-x)) !default;
103$shadow-y: props.def(--l-card-list--shadow-y, props.get(card.$shadow-y)) !default; 56$shadow-y: props.def(--l-card-list--shadow-y, props.get(card.$shadow-y)) !default;
104$shadow-blur: props.def(--l-card-list--shadow-blur, props.get(card.$shadow-blur)) !default; 57$shadow-blur: props.def(--l-card-list--shadow-blur, props.get(card.$shadow-blur)) !default;
105$shadow-grow: props.def(--l-card-list--shadow-grow, props.get(card.$shadow-grow)) !default; 58$shadow-grow: props.def(--l-card-list--shadow-grow, props.get(card.$shadow-grow)) !default;
106 59
107$border-color: props.def( 60$border-color: props.def(--l-card-list--border-color, props.get(card.$border-color), 'color') !default;
108 --l-card-list--border-color, 61$border-color-dark: props.def(--l-card-list--border-color, props.get(core.$theme, --border-mute), 'dark') !default;
109 props.get(card.$border-color),
110 "color"
111) !default;
112$border-color-dark: props.def(
113 --l-card-list--border-color,
114 props.get(core.$theme, --border-mute),
115 "dark"
116) !default;