summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/_core.vars.scss3
-rw-r--r--src/layouts/_card-list.scss28
-rw-r--r--src/objects/_action-button.vars.scss18
-rw-r--r--src/objects/_card.scss40
-rw-r--r--src/objects/_card.vars.scss5
5 files changed, 65 insertions, 29 deletions
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/objects/_action-button.vars.scss b/src/objects/_action-button.vars.scss
index 1a9be25..72dc4a1 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--10)) !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..aaf46b6 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -16,16 +16,17 @@
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 background-clip: content-box;
19 border: 1px solid transparent; 19 border: props.get(vars.$border-width) solid transparent;
20 border-color: props.get(vars.$border-color); 20 border-color: props.get(vars.$border-color);
21 border-radius: props.get(vars.$rounding); 21 border-radius: props.get(vars.$rounding);
22 transition: transform .2s; 22 transition: transform .2s, border-color .2s;
23 23
24 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { 24 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
25 &:hover, 25 &:hover,
26 &:active, 26 &:active,
27 &:focus-visible { 27 &:focus-visible {
28 transform: translateY(props.get(vars.$hover--offset-b)); 28 transform: translateY(props.get(vars.$hover--offset-b));
29 border-color: props.get(vars.$hover--border-color);
29 30
30 @include bem.elem('body') { 31 @include bem.elem('body') {
31 @include bem.modifier('hidden') { 32 @include bem.modifier('hidden') {
@@ -39,9 +40,9 @@
39 } 40 }
40 41
41 &:focus-visible { 42 &:focus-visible {
42 margin: calc(-1 * props.get(vars.$key-focus--border-width) + 1px); 43 margin: calc(-1 * props.get(vars.$key-focus--border-width));
43 border: props.get(vars.$key-focus--border-offset) solid transparent; 44 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); 45 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); 46 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
46 box-shadow: 47 box-shadow:
47 0 0 0 48 0 0 0
@@ -59,19 +60,20 @@
59 position: relative; 60 position: relative;
60 display: block; 61 display: block;
61 flex: 0 0 auto; 62 flex: 0 0 auto;
62 inline-size: 100%; 63 inline-size: calc(100% + 2 * props.get(vars.$border-width));
64 margin: calc(-1 * props.get(vars.$border-width));
63 overflow: hidden; 65 overflow: hidden;
64 object-fit: cover; 66 object-fit: cover;
65 transition: background-color .2s, transform .2s, opacity .2s; 67 transition: background-color .2s, transform .2s, opacity .2s;
66 68
67 &:first-child { 69 &:first-child {
68 border-start-start-radius: calc(props.get(vars.$rounding) - 1px); 70 border-start-start-radius: props.get(vars.$rounding);
69 border-start-end-radius: calc(props.get(vars.$rounding) - 1px); 71 border-start-end-radius: props.get(vars.$rounding);
70 } 72 }
71 73
72 &:last-child { 74 &:last-child {
73 border-end-start-radius: calc(props.get(vars.$rounding) - 1px); 75 border-end-start-radius: props.get(vars.$rounding);
74 border-end-end-radius: calc(props.get(vars.$rounding) - 1px); 76 border-end-end-radius: props.get(vars.$rounding);
75 } 77 }
76 78
77 @include bem.next-elem('avatar') { 79 @include bem.next-elem('avatar') {
@@ -107,21 +109,21 @@
107 109
108 @include bem.modifier('hidden') { 110 @include bem.modifier('hidden') {
109 position: absolute; 111 position: absolute;
110 inset-block-end: 0; 112 inset-block-end: calc(-1 * props.get(vars.$border-width));
111 inset-inline: 0; 113 inset-inline: calc(-1 * props.get(vars.$border-width));
112 z-index: 10; 114 z-index: 10;
113 visibility: hidden; 115 visibility: hidden;
114 background-color: props.get(vars.$bg-color); 116 background-color: props.get(vars.$bg-color);
115 //border-end-start-radius: props.get(vars.$rounding); 117 border-end-start-radius: props.get(vars.$rounding);
116 //border-end-end-radius: props.get(vars.$rounding); 118 border-end-end-radius: props.get(vars.$rounding);
117 opacity: 0; 119 opacity: 0;
118 transition: 120 transition:
119 opacity .2s ease, 121 opacity .2s ease,
120 visibility 0s .2s linear; 122 visibility 0s .2s linear;
121 123
122 @include bem.next-elem('image') { 124 @include bem.next-elem('image') {
123 border-start-start-radius: calc(props.get(vars.$rounding) - 1px); 125 border-start-start-radius: props.get(vars.$rounding);
124 border-start-end-radius: calc(props.get(vars.$rounding) - 1px); 126 border-start-end-radius: props.get(vars.$rounding);
125 } 127 }
126 } 128 }
127 } 129 }
@@ -225,11 +227,11 @@
225 227
226 &:first-child { 228 &:first-child {
227 border-start-end-radius: 0; 229 border-start-end-radius: 0;
228 border-end-start-radius: calc(props.get(vars.$rounding) - 1px); 230 border-end-start-radius: props.get(vars.$rounding);
229 } 231 }
230 232
231 &:last-child { 233 &:last-child {
232 border-start-end-radius: calc(props.get(vars.$rounding) - 1px); 234 border-start-end-radius: props.get(vars.$rounding);
233 border-end-start-radius: 0; 235 border-end-start-radius: 0;
234 } 236 }
235 } 237 }
diff --git a/src/objects/_card.vars.scss b/src/objects/_card.vars.scss
index 4f5cf40..ca603be 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;
@@ -20,6 +22,9 @@ $bg-color: props.def(--o-card--bg-color, props.get(core.$theme, --bg-l2), '
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, --border-mute), '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--border-color: props.def(--o-card--hover--border-color, props.get(core.$theme, --border-strong), 'color') !default;
26$hover--sub-border-color: props.def(--o-card--hover--sub-border-color, props.get(core.$theme, --focus, --outline), '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;