summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/_config.defaults.scss8
-rw-r--r--src/_core.vars.scss3
-rw-r--r--src/layouts/_card-list.scss28
-rw-r--r--src/layouts/_card-list.vars.scss2
-rw-r--r--src/objects/_action-button.scss43
-rw-r--r--src/objects/_action-button.vars.scss16
-rw-r--r--src/objects/_card.scss114
-rw-r--r--src/objects/_card.vars.scss7
-rw-r--r--src/objects/_text-field.vars.scss2
-rw-r--r--tpl/objects/action-button.pug2
-rw-r--r--tpl/objects/card.pug5
-rw-r--r--tpl/views/action-button.pug43
-rw-r--r--tpl/views/card.pug37
13 files changed, 226 insertions, 84 deletions
diff --git a/src/_config.defaults.scss b/src/_config.defaults.scss
index ac20cb9..c328355 100644
--- a/src/_config.defaults.scss
+++ b/src/_config.defaults.scss
@@ -124,6 +124,10 @@ $theme-light: (
124 --bg-l2: --base --50, 124 --bg-l2: --base --50,
125 --bg-l1: --base --100, 125 --bg-l1: --base --100,
126 --bg-base: --base --200, 126 --bg-base: --base --200,
127
128 --box: (
129 --border: --base --200,
130 ),
127 )), 131 )),
128 132
129 --constants: ( 133 --constants: (
@@ -179,6 +183,10 @@ $theme-dark: (
179 --bg-base: --base --50, 183 --bg-base: --base --50,
180 --bg-l1: --base --75, 184 --bg-l1: --base --75,
181 --bg-l2: --base --100, 185 --bg-l2: --base --100,
186
187 --box: (
188 --border: --base --75,
189 ),
182 )), 190 )),
183 191
184 --constants: ( 192 --constants: (
diff --git a/src/_core.vars.scss b/src/_core.vars.scss
index 04c0f63..7c546d7 100644
--- a/src/_core.vars.scss
+++ b/src/_core.vars.scss
@@ -99,7 +99,8 @@ $shadow--l2--y: props.def(--shadow--l2--y, 4px) !default;
99$shadow--l2--blur: props.def(--shadow--l2--blur, 8px) !default; 99$shadow--l2--blur: props.def(--shadow--l2--blur, 8px) !default;
100$shadow--l2--grow: props.def(--shadow--l2--grow, -3px) !default; 100$shadow--l2--grow: props.def(--shadow--l2--grow, -3px) !default;
101 101
102$rounding: props.def(--rounding, 8px) !default; 102$rounding: props.def(--rounding, 8px) !default;
103$rounding--sm: props.def(--rounding--sm, 4px) !default;
103 104
104$key-focus--outline-width: props.def(--key-focus--outline-width, props.get($border-width--thick)) !default; 105$key-focus--outline-width: props.def(--key-focus--outline-width, props.get($border-width--thick)) !default;
105$key-focus--border-width: props.def(--key-focus--border-width, props.get($border-width--medium)) !default; 106$key-focus--border-width: props.def(--key-focus--border-width, props.get($border-width--medium)) !default;
diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss
index 8ef40c5..a1655be 100644
--- a/src/layouts/_card-list.scss
+++ b/src/layouts/_card-list.scss
@@ -6,6 +6,7 @@
6 6
7@forward 'card-list.vars'; 7@forward 'card-list.vars';
8@use 'card-list.vars' as vars; 8@use 'card-list.vars' as vars;
9@use '../objects/card.vars' as card;
9 10
10@mixin styles { 11@mixin styles {
11 @include materialize-at-root(meta.module-variables('vars')); 12 @include materialize-at-root(meta.module-variables('vars'));
@@ -15,6 +16,33 @@
15 flex-direction: column; 16 flex-direction: column;
16 gap: props.get(vars.$row-gap); 17 gap: props.get(vars.$row-gap);
17 18
19 @include bem.modifier('merge') {
20 position: relative;
21 gap: 0;
22
23 @include bem.elem('card') {
24 transition: none;
25
26 &:not(:last-child) {
27 margin-bottom: calc(-1 * props.get(card.$border-width));
28 border-end-start-radius: 0;
29 border-end-end-radius: 0;
30 }
31
32 &:hover,
33 &:active,
34 &:focus-visible {
35 z-index: 10;
36 transform: none;
37 }
38
39 @include bem.next-twin-elem {
40 border-start-start-radius: 0;
41 border-start-end-radius: 0;
42 }
43 }
44 }
45
18 @include bem.modifier('quiet') { 46 @include bem.modifier('quiet') {
19 row-gap: props.get(vars.$quiet--row-gap); 47 row-gap: props.get(vars.$quiet--row-gap);
20 } 48 }
diff --git a/src/layouts/_card-list.vars.scss b/src/layouts/_card-list.vars.scss
index f77bfbf..b489596 100644
--- a/src/layouts/_card-list.vars.scss
+++ b/src/layouts/_card-list.vars.scss
@@ -1,7 +1,7 @@
1@use 'iro-sass/src/props'; 1@use 'iro-sass/src/props';
2@use '../core.vars' as core; 2@use '../core.vars' as core;
3 3
4$row-gap: props.def(--l-card-list--row-gap, props.get(core.$size--200)) !default; 4$row-gap: props.def(--l-card-list--row-gap, props.get(core.$size--50)) !default;
5$quiet--row-gap: props.def(--l-card-list--quiet--row-gap, props.get(core.$size--800)) !default; 5$quiet--row-gap: props.def(--l-card-list--quiet--row-gap, props.get(core.$size--800)) !default;
6 6
7$grid--row-gap: props.def(--l-card-list--grid--row-gap, props.get(core.$size--400)) !default; 7$grid--row-gap: props.def(--l-card-list--grid--row-gap, props.get(core.$size--400)) !default;
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
index 7863f50..f4a9a46 100644
--- a/src/objects/_action-button.scss
+++ b/src/objects/_action-button.scss
@@ -52,6 +52,35 @@
52 } 52 }
53 } 53 }
54 54
55 @include bem.modifier('static') {
56 color: props.get($theme, list.join($key, --quiet --hover --label-color)...);
57 background-color: props.get($theme, list.join($key, --quiet --hover --bg-color)...);
58 border-color: transparent;
59 box-shadow: none;
60
61 &:link,
62 &:visited,
63 &:enabled {
64 color: props.get($theme, list.join($key, --quiet --hover --label-color)...);
65 background-color: props.get($theme, list.join($key, --quiet --hover --bg-color)...);
66 border-color: transparent;
67 box-shadow: none;
68
69 &:hover,
70 &:focus-visible {
71 color: props.get($theme, list.join($key, --quiet --active --label-color)...);
72 background-color: props.get($theme, list.join($key, --quiet --active --bg-color)...);
73 border-color: transparent;
74 }
75
76 &:active {
77 color: props.get($theme, list.join($key, --quiet --active --label-color)...);
78 background-color: props.get($theme, list.join($key, --quiet --active --bg-color)...);
79 border-color: transparent;
80 }
81 }
82 }
83
55 @include bem.modifier('quiet') { 84 @include bem.modifier('quiet') {
56 color: props.get($theme, list.join($key, --quiet --disabled --label-color)...); 85 color: props.get($theme, list.join($key, --quiet --disabled --label-color)...);
57 background-color: transparent; 86 background-color: transparent;
@@ -80,11 +109,17 @@
80 } 109 }
81 } 110 }
82 111
83 @include bem.is('selected', 'badge') { 112 @include bem.is('selected') {
84 color: props.get($theme, list.join($key, --selected --disabled --label-color)...); 113 color: props.get($theme, list.join($key, --selected --disabled --label-color)...);
85 background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...); 114 background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...);
86 border-color: props.get($theme, list.join($key, --selected --disabled --border-color)...); 115 border-color: props.get($theme, list.join($key, --selected --disabled --border-color)...);
87 116
117 @include bem.modifier('static') {
118 color: props.get($theme, list.join($key, --selected --label-color)...);
119 background-color: props.get($theme, list.join($key, --selected --bg-color)...);
120 border-color: props.get($theme, list.join($key, --selected --border-color)...);
121 }
122
88 &:link, 123 &:link,
89 &:visited, 124 &:visited,
90 &:enabled { 125 &:enabled {
@@ -106,12 +141,6 @@
106 } 141 }
107 } 142 }
108 } 143 }
109
110 @include bem.is('badge') {
111 color: props.get($theme, list.join($key, --selected --label-color)...);
112 background-color: props.get($theme, list.join($key, --selected --bg-color)...);
113 border-color: props.get($theme, list.join($key, --selected --border-color)...);
114 }
115} 144}
116 145
117@mixin styles { 146@mixin styles {
diff --git a/src/objects/_action-button.vars.scss b/src/objects/_action-button.vars.scss
index 1a9be25..84bb415 100644
--- a/src/objects/_action-button.vars.scss
+++ b/src/objects/_action-button.vars.scss
@@ -5,28 +5,28 @@
5 5
6$line-height: props.def(--o-action-button--line-height, 1.4) !default; 6$line-height: props.def(--o-action-button--line-height, 1.4) !default;
7$border-width: props.def(--o-action-button--border-width, props.get(core.$border-width--thin)) !default; 7$border-width: props.def(--o-action-button--border-width, props.get(core.$border-width--thin)) !default;
8$rounding: props.def(--o-action-button--rounding, props.get(core.$rounding)) !default; 8$rounding: props.def(--o-action-button--rounding, props.get(core.$rounding--sm)) !default;
9 9
10$pad-i--sm: props.def(--o-action-button--sm--pad-i, props.get(core.$size--75)) !default; 10$pad-i--sm: props.def(--o-action-button--sm--pad-i, props.get(core.$size--75)) !default;
11$pad-i-label--sm: props.def(--o-action-button--sm--pad-i-label, props.get(core.$size--25)) !default; 11$pad-i-label--sm: props.def(--o-action-button--sm--pad-i-label, props.get(core.$size--25)) !default;
12$pad-i-pill--sm: props.def(--o-action-button--sm--pad-i-pill, props.get(core.$size--100)) !default; 12$pad-i-pill--sm: props.def(--o-action-button--sm--pad-i-pill, props.get(core.$size--115)) !default;
13$pad-b--sm: props.def(--o-action-button--sm--pad-b, props.get(core.$size--40)) !default; 13$pad-b--sm: props.def(--o-action-button--sm--pad-b, props.get(core.$size--40)) !default;
14$font-size--sm: props.def(--o-action-button--sm--font-size, props.get(core.$font-size--75)) !default; 14$font-size--sm: props.def(--o-action-button--sm--font-size, props.get(core.$font-size--75)) !default;
15 15
16$pad-i: props.def(--o-action-button--pad-i, props.get(core.$size--100)) !default; 16$pad-i: props.def(--o-action-button--pad-i, props.get(core.$size--115)) !default;
17$pad-i-label: props.def(--o-action-button--pad-i-label, props.get(core.$size--50)) !default; 17$pad-i-label: props.def(--o-action-button--pad-i-label, props.get(core.$size--40)) !default;
18$pad-i-pill: props.def(--o-action-button--pad-i-pill, props.get(core.$size--150)) !default; 18$pad-i-pill: props.def(--o-action-button--pad-i-pill, props.get(core.$size--150)) !default;
19$pad-b: props.def(--o-action-button--pad-b, props.get(core.$size--85)) !default; 19$pad-b: props.def(--o-action-button--pad-b, props.get(core.$size--85)) !default;
20$font-size: props.def(--o-action-button--font-size, props.get(core.$font-size--100)) !default; 20$font-size: props.def(--o-action-button--font-size, props.get(core.$font-size--100)) !default;
21 21
22$pad-i--lg: props.def(--o-action-button--lg--pad-i, props.get(core.$size--150)) !default; 22$pad-i--lg: props.def(--o-action-button--lg--pad-i, props.get(core.$size--160)) !default;
23$pad-i-label--lg: props.def(--o-action-button--lg--pad-i-label, props.get(core.$size--75)) !default; 23$pad-i-label--lg: props.def(--o-action-button--lg--pad-i-label, props.get(core.$size--65)) !default;
24$pad-i-pill--lg: props.def(--o-action-button--lg--pad-i-pill, props.get(core.$size--175)) !default; 24$pad-i-pill--lg: props.def(--o-action-button--lg--pad-i-pill, props.get(core.$size--175)) !default;
25$pad-b--lg: props.def(--o-action-button--lg--pad-b, props.get(core.$size--115)) !default; 25$pad-b--lg: props.def(--o-action-button--lg--pad-b, props.get(core.$size--115)) !default;
26$font-size--lg: props.def(--o-action-button--lg--font-size, props.get(core.$font-size--150)) !default; 26$font-size--lg: props.def(--o-action-button--lg--font-size, props.get(core.$font-size--150)) !default;
27 27
28$pad-i--xl: props.def(--o-action-button--xl--pad-i, props.get(core.$size--175)) !default; 28$pad-i--xl: props.def(--o-action-button--xl--pad-i, props.get(core.$size--200)) !default;
29$pad-i-label--xl: props.def(--o-action-button--xl--pad-i-label, props.get(core.$size--100)) !default; 29$pad-i-label--xl: props.def(--o-action-button--xl--pad-i-label, props.get(core.$size--85)) !default;
30$pad-i-pill--xl: props.def(--o-action-button--xl--pad-i-pill, props.get(core.$size--225)) !default; 30$pad-i-pill--xl: props.def(--o-action-button--xl--pad-i-pill, props.get(core.$size--225)) !default;
31$pad-b--xl: props.def(--o-action-button--xl--pad-b, props.get(core.$size--150)) !default; 31$pad-b--xl: props.def(--o-action-button--xl--pad-b, props.get(core.$size--150)) !default;
32$font-size--xl: props.def(--o-action-button--xl--font-size, props.get(core.$font-size--200)) !default; 32$font-size--xl: props.def(--o-action-button--xl--font-size, props.get(core.$font-size--200)) !default;
diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index 4f8c7fb..d5d300d 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -15,33 +15,24 @@
15 display: flex; 15 display: flex;
16 flex-direction: column; 16 flex-direction: column;
17 background-color: props.get(vars.$bg-color); 17 background-color: props.get(vars.$bg-color);
18 background-clip: content-box; 18 border: props.get(vars.$border-width) solid transparent;
19 border: 1px solid transparent;
20 border-color: props.get(vars.$border-color); 19 border-color: props.get(vars.$border-color);
21 border-radius: props.get(vars.$rounding); 20 border-radius: props.get(vars.$rounding);
22 transition: transform .2s; 21 transition: transform .2s, background-color .2s, border-color .2s;
23 22
24 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { 23 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
25 &:hover, 24 &:hover,
26 &:active, 25 &:active,
27 &:focus-visible { 26 &:focus-visible {
28 transform: translateY(props.get(vars.$hover--offset-b)); 27 transform: translateY(props.get(vars.$hover--offset-b));
29 28 background-color: props.get(vars.$hover--bg-color);
30 @include bem.elem('body') { 29 border-color: props.get(vars.$hover--border-color);
31 @include bem.modifier('hidden') {
32 visibility: visible;
33 opacity: 1;
34 transition:
35 opacity .2s ease,
36 visibility .2s linear;
37 }
38 }
39 } 30 }
40 31
41 &:focus-visible { 32 &:focus-visible {
42 margin: calc(-1 * props.get(vars.$key-focus--border-width) + 1px); 33 margin: calc(-1 * props.get(vars.$key-focus--border-width));
43 border: props.get(vars.$key-focus--border-offset) solid transparent; 34 border: calc(props.get(vars.$key-focus--border-offset) + props.get(vars.$border-width)) solid transparent;
44 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset) - 1px); 35 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
45 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); 36 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
46 box-shadow: 37 box-shadow:
47 0 0 0 38 0 0 0
@@ -65,13 +56,13 @@
65 transition: background-color .2s, transform .2s, opacity .2s; 56 transition: background-color .2s, transform .2s, opacity .2s;
66 57
67 &:first-child { 58 &:first-child {
68 border-start-start-radius: calc(props.get(vars.$rounding) - 1px); 59 border-start-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
69 border-start-end-radius: calc(props.get(vars.$rounding) - 1px); 60 border-start-end-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
70 } 61 }
71 62
72 &:last-child { 63 &:last-child {
73 border-end-start-radius: calc(props.get(vars.$rounding) - 1px); 64 border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
74 border-end-end-radius: calc(props.get(vars.$rounding) - 1px); 65 border-end-end-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
75 } 66 }
76 67
77 @include bem.next-elem('avatar') { 68 @include bem.next-elem('avatar') {
@@ -104,26 +95,6 @@
104 margin-block: -100em 100em; 95 margin-block: -100em 100em;
105 content: ''; 96 content: '';
106 } 97 }
107
108 @include bem.modifier('hidden') {
109 position: absolute;
110 inset-block-end: 0;
111 inset-inline: 0;
112 z-index: 10;
113 visibility: hidden;
114 background-color: props.get(vars.$bg-color);
115 //border-end-start-radius: props.get(vars.$rounding);
116 //border-end-end-radius: props.get(vars.$rounding);
117 opacity: 0;
118 transition:
119 opacity .2s ease,
120 visibility 0s .2s linear;
121
122 @include bem.next-elem('image') {
123 border-start-start-radius: calc(props.get(vars.$rounding) - 1px);
124 border-start-end-radius: calc(props.get(vars.$rounding) - 1px);
125 }
126 }
127 } 98 }
128 99
129 @include bem.elem('content') { 100 @include bem.elem('content') {
@@ -155,19 +126,14 @@
155 &:hover, 126 &:hover,
156 &:active, 127 &:active,
157 &:focus-visible { 128 &:focus-visible {
158 transform: none; 129 transform: none;
130 background-color: transparent;
159 131
160 @include bem.elem('image') { 132 @include bem.elem('image') {
161 background-color: props.get(vars.$quiet--hover--image-color); 133 background-color: props.get(vars.$quiet--hover--image-color);
162 opacity: .75; 134 opacity: .75;
163 transform: translateY(props.get(vars.$hover--offset-b)); 135 transform: translateY(props.get(vars.$hover--offset-b));
164 } 136 }
165
166 @include bem.elem('body') {
167 @include bem.modifier('hidden') {
168 transform: translateY(props.get(vars.$hover--offset-b));
169 }
170 }
171 } 137 }
172 138
173 &:focus-visible { 139 &:focus-visible {
@@ -203,11 +169,6 @@
203 @include bem.elem('body') { 169 @include bem.elem('body') {
204 padding: 0; 170 padding: 0;
205 padding-block-start: props.get(vars.$spacing); 171 padding-block-start: props.get(vars.$spacing);
206
207 @include bem.modifier('hidden') {
208 padding-block: props.get(vars.$pad-b);
209 padding-inline: props.get(vars.$pad-i);
210 }
211 } 172 }
212 173
213 @include bem.elem('footer') { 174 @include bem.elem('footer') {
@@ -215,6 +176,49 @@
215 } 176 }
216 } 177 }
217 178
179 @include bem.modifier('thumbnail') {
180 @include bem.elem('image') {
181 inline-size: calc(100% + 2 * props.get(vars.$border-width));
182 margin: calc(-1 * props.get(vars.$border-width));
183 border-radius: props.get(vars.$rounding);
184 }
185
186 @include bem.elem('body') {
187 position: absolute;
188 inset-block-end: calc(-1 * props.get(vars.$border-width));
189 inset-inline: calc(-1 * props.get(vars.$border-width));
190 z-index: 10;
191 visibility: hidden;
192 background-color: props.get(vars.$bg-color);
193 border-width: 0 props.get(vars.$border-width) props.get(vars.$border-width);
194 border-color: transparent;
195 border-style: solid;
196 border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
197 border-end-end-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
198 opacity: 0;
199 transition:
200 border-color .2s ease,
201 opacity .2s ease,
202 visibility 0s .2s linear;
203 }
204
205 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
206 &:hover,
207 &:active,
208 &:focus-visible {
209 @include bem.elem('body') {
210 border-color: props.get(vars.$hover--border-color);
211 visibility: visible;
212 opacity: 1;
213 transition:
214 border-color .2s ease,
215 opacity .2s ease,
216 visibility .2s linear;
217 }
218 }
219 }
220 }
221
218 @include bem.modifier('horizontal') { 222 @include bem.modifier('horizontal') {
219 flex-direction: row; 223 flex-direction: row;
220 align-items: center; 224 align-items: center;
@@ -225,11 +229,11 @@
225 229
226 &:first-child { 230 &:first-child {
227 border-start-end-radius: 0; 231 border-start-end-radius: 0;
228 border-end-start-radius: calc(props.get(vars.$rounding) - 1px); 232 border-end-start-radius: props.get(vars.$rounding);
229 } 233 }
230 234
231 &:last-child { 235 &:last-child {
232 border-start-end-radius: calc(props.get(vars.$rounding) - 1px); 236 border-start-end-radius: props.get(vars.$rounding);
233 border-end-start-radius: 0; 237 border-end-start-radius: 0;
234 } 238 }
235 } 239 }
diff --git a/src/objects/_card.vars.scss b/src/objects/_card.vars.scss
index 4f5cf40..9810239 100644
--- a/src/objects/_card.vars.scss
+++ b/src/objects/_card.vars.scss
@@ -3,6 +3,8 @@
3@use '../core.vars' as core; 3@use '../core.vars' as core;
4 4
5$divider-width: props.def(--o-card--divider-width, props.get(core.$border-width--thin)) !default; 5$divider-width: props.def(--o-card--divider-width, props.get(core.$border-width--thin)) !default;
6$border-width: props.def(--o-card--border-width, props.get(core.$border-width--thin)) !default;
7$sub-border-width: props.def(--o-card--sub-border-width, props.get(core.$border-width--thick)) !default;
6$pad-i: props.def(--o-card--pad-i, props.get(core.$size--300)) !default; 8$pad-i: props.def(--o-card--pad-i, props.get(core.$size--300)) !default;
7$pad-b: props.def(--o-card--pad-b, props.get(core.$size--250)) !default; 9$pad-b: props.def(--o-card--pad-b, props.get(core.$size--250)) !default;
8$spacing: props.def(--o-card--spacing, props.get(core.$size--200)) !default; 10$spacing: props.def(--o-card--spacing, props.get(core.$size--200)) !default;
@@ -17,9 +19,12 @@ $key-focus--border-offset: props.def(--o-card--key-focus--border-offset, props.g
17$key-focus--outline-width: props.def(--o-card--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; 19$key-focus--outline-width: props.def(--o-card--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
18 20
19$bg-color: props.def(--o-card--bg-color, props.get(core.$theme, --bg-l2), 'color') !default; 21$bg-color: props.def(--o-card--bg-color, props.get(core.$theme, --bg-l2), 'color') !default;
20$border-color: props.def(--o-card--border-color, props.get(core.$theme, --border-mute), 'color') !default; 22$border-color: props.def(--o-card--border-color, props.get(core.$theme, --box, --border), 'color') !default;
21$divider-color: props.def(--o-card--divider-color, props.get(core.$theme, --border-mute), 'color') !default; 23$divider-color: props.def(--o-card--divider-color, props.get(core.$theme, --border-mute), 'color') !default;
22 24
25$hover--bg-color: props.def(--o-card--hover--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
26$hover--border-color: props.def(--o-card--hover--border-color, props.get(core.$theme, --border), 'color') !default;
27
23$key-focus--label-color: props.def(--o-card--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default; 28$key-focus--label-color: props.def(--o-card--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default;
24$key-focus--border-color: props.def(--o-card--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; 29$key-focus--border-color: props.def(--o-card--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
25$key-focus--outline-color: props.def(--o-card--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; 30$key-focus--outline-color: props.def(--o-card--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
diff --git a/src/objects/_text-field.vars.scss b/src/objects/_text-field.vars.scss
index 833eacb..f64c42b 100644
--- a/src/objects/_text-field.vars.scss
+++ b/src/objects/_text-field.vars.scss
@@ -6,7 +6,7 @@ $line-height: props.def(--o-text-field--line-height, 1.4) !default;
6$pad-i: props.def(--o-text-field--pad-i, props.get(core.$size--125)) !default; 6$pad-i: props.def(--o-text-field--pad-i, props.get(core.$size--125)) !default;
7$pad-b: props.def(--o-text-field--pad-b, props.get(core.$size--125)) !default; 7$pad-b: props.def(--o-text-field--pad-b, props.get(core.$size--125)) !default;
8$border-width: props.def(--o-text-field--border-width, props.get(core.$border-width--thin)) !default; 8$border-width: props.def(--o-text-field--border-width, props.get(core.$border-width--thin)) !default;
9$rounding: props.def(--o-text-field--rounding, props.get(core.$rounding)) !default; 9$rounding: props.def(--o-text-field--rounding, props.get(core.$rounding--sm)) !default;
10 10
11$extended--pad: props.def(--o-text-field--extended--pad, props.get(core.$size--50)) !default; 11$extended--pad: props.def(--o-text-field--extended--pad, props.get(core.$size--50)) !default;
12 12
diff --git a/tpl/objects/action-button.pug b/tpl/objects/action-button.pug
index 0ab084e..0e77e58 100644
--- a/tpl/objects/action-button.pug
+++ b/tpl/objects/action-button.pug
@@ -8,7 +8,7 @@ mixin action-button
8 'o-action-button--secondary': attributes.secondary, 8 'o-action-button--secondary': attributes.secondary,
9 'o-action-button--quiet': attributes.quiet, 9 'o-action-button--quiet': attributes.quiet,
10 'o-action-button--pill': attributes.pill, 10 'o-action-button--pill': attributes.pill,
11 'o-action-button--badge': attributes.badge, 11 'o-action-button--static': attributes.static,
12 'o-action-button--icon': !!attributes.icon && !block, 12 'o-action-button--icon': !!attributes.icon && !block,
13 'is-selected': attributes.selected, 13 'is-selected': attributes.selected,
14 } 14 }
diff --git a/tpl/objects/card.pug b/tpl/objects/card.pug
index e0f6a15..1db2fe5 100644
--- a/tpl/objects/card.pug
+++ b/tpl/objects/card.pug
@@ -1,8 +1,9 @@
1mixin card 1mixin card
2 - 2 -
3 let classes = { 3 let classes = {
4 'o-card': true, 4 'o-card': true,
5 'o-card--quiet': !!attributes.quiet, 5 'o-card--quiet': !!attributes.quiet,
6 'o-card--thumbnail': !!attributes.thumbnail,
6 } 7 }
7 8
8 if (attributes.class) { 9 if (attributes.class) {
diff --git a/tpl/views/action-button.pug b/tpl/views/action-button.pug
index 025bd78..4d2ffb6 100644
--- a/tpl/views/action-button.pug
+++ b/tpl/views/action-button.pug
@@ -62,13 +62,6 @@ mixin view-action-button
62 +action-button(icon='trash') 62 +action-button(icon='trash')
63 br 63 br
64 br 64 br
65 +action-button(secondary=true)= 'Label'
66 = ' '
67 +action-button(secondary=true icon='trash')= 'Label'
68 = ' '
69 +action-button(secondary=true icon='trash')
70 br
71 br
72 +action-button(quiet=true)= 'Label' 65 +action-button(quiet=true)= 'Label'
73 = ' ' 66 = ' '
74 +action-button(quiet=true icon='trash')= 'Label' 67 +action-button(quiet=true icon='trash')= 'Label'
@@ -85,6 +78,15 @@ mixin view-action-button
85 +action-button(selected=true disabled=true)= 'Selected + disabled' 78 +action-button(selected=true disabled=true)= 'Selected + disabled'
86 br 79 br
87 br 80 br
81 +action-button(static=true )= 'Idle'
82 = ' '
83 +action-button(static=true selected=true)= 'Selected'
84 = ' '
85 +action-button(static=true disabled=true)= 'Disabled'
86 = ' '
87 +action-button(static=true selected=true disabled=true)= 'Selected + disabled'
88 br
89 br
88 +action-button(quiet=true )= 'Idle' 90 +action-button(quiet=true )= 'Idle'
89 = ' ' 91 = ' '
90 +action-button(quiet=true selected=true)= 'Selected' 92 +action-button(quiet=true selected=true)= 'Selected'
@@ -103,6 +105,15 @@ mixin view-action-button
103 +action-button(pill=true selected=true disabled=true)= 'Selected + disabled' 105 +action-button(pill=true selected=true disabled=true)= 'Selected + disabled'
104 br 106 br
105 br 107 br
108 +action-button(pill=true static=true)= 'Idle'
109 = ' '
110 +action-button(pill=true static=true selected=true)= 'Selected'
111 = ' '
112 +action-button(pill=true static=true disabled=true)= 'Disabled'
113 = ' '
114 +action-button(pill=true static=true selected=true disabled=true)= 'Selected + disabled'
115 br
116 br
106 +action-button(pill=true quiet=true)= 'Idle' 117 +action-button(pill=true quiet=true)= 'Idle'
107 = ' ' 118 = ' '
108 +action-button(pill=true quiet=true selected=true)= 'Selected' 119 +action-button(pill=true quiet=true selected=true)= 'Selected'
@@ -122,6 +133,15 @@ mixin view-action-button
122 +action-button(theme=theme selected=true disabled=true)= 'Selected + disabled' 133 +action-button(theme=theme selected=true disabled=true)= 'Selected + disabled'
123 br 134 br
124 br 135 br
136 +action-button(theme=theme static=true)= 'Idle'
137 = ' '
138 +action-button(theme=theme static=true selected=true)= 'Selected'
139 = ' '
140 +action-button(theme=theme static=true disabled=true)= 'Disabled'
141 = ' '
142 +action-button(theme=theme static=true selected=true disabled=true)= 'Selected + disabled'
143 br
144 br
125 +action-button(theme=theme quiet=true)= 'Idle' 145 +action-button(theme=theme quiet=true)= 'Idle'
126 = ' ' 146 = ' '
127 +action-button(theme=theme quiet=true selected=true)= 'Selected' 147 +action-button(theme=theme quiet=true selected=true)= 'Selected'
@@ -144,6 +164,15 @@ mixin view-action-button
144 +action-button(theme=theme selected=true disabled=true)= 'Selected + disabled' 164 +action-button(theme=theme selected=true disabled=true)= 'Selected + disabled'
145 br 165 br
146 br 166 br
167 +action-button(theme=theme static=true)= 'Idle'
168 = ' '
169 +action-button(theme=theme static=true selected=true)= 'Selected'
170 = ' '
171 +action-button(theme=theme static=true disabled=true)= 'Disabled'
172 = ' '
173 +action-button(theme=theme static=true selected=true disabled=true)= 'Selected + disabled'
174 br
175 br
147 +action-button(theme=theme quiet=true)= 'Idle' 176 +action-button(theme=theme quiet=true)= 'Idle'
148 = ' ' 177 = ' '
149 +action-button(theme=theme quiet=true selected=true)= 'Selected' 178 +action-button(theme=theme quiet=true selected=true)= 'Selected'
diff --git a/tpl/views/card.pug b/tpl/views/card.pug
index 61081a9..8dde279 100644
--- a/tpl/views/card.pug
+++ b/tpl/views/card.pug
@@ -1,6 +1,43 @@
1mixin view-card 1mixin view-card
2 +view('card', 'Card')(wide=true) 2 +view('card', 'Card')(wide=true)
3 .l-card-list
4 +card(href='#' class='l-card-list__card')
5 +card-body
6 strong= 'Lorem ipsum dolor'
7 = 'sit amet'
8 +card(href='#' class='l-card-list__card')
9 +card-body
10 strong= 'Lorem ipsum dolor'
11 = 'sit amet'
12 +card(href='#' class='l-card-list__card')
13 +card-body
14 strong= 'Lorem ipsum dolor'
15 = 'sit amet'
16
17 +divider('faint')(class='u-mb-700')
18
19 .l-card-list.l-card-list--merge
20 +card(href='#' class='l-card-list__card')
21 +card-body
22 strong= 'Lorem ipsum dolor'
23 = 'sit amet'
24 +card(href='#' class='l-card-list__card')
25 +card-body
26 strong= 'Lorem ipsum dolor'
27 = 'sit amet'
28 +card(href='#' class='l-card-list__card')
29 +card-body
30 strong= 'Lorem ipsum dolor'
31 = 'sit amet'
32
33 +divider('faint')(class='u-mb-700')
34
3 .l-card-list.l-card-list--masonry 35 .l-card-list.l-card-list--masonry
36 +card(thumbnail=true href='#' class='l-card-list__card')
37 +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' })
38 +card-body
39 +card-title= 'XS Heading'
40
4 +card(href='#' class='l-card-list__card') 41 +card(href='#' class='l-card-list__card')
5 +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' }) 42 +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' })
6 +card-avatar(src='avatar.png') 43 +card-avatar(src='avatar.png')
generated by cgit v1.2.3-70-g09d2 (git 2.50.0) at 2025-07-22 03:07:32 +0000