diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/_core.vars.scss | 3 | ||||
-rw-r--r-- | src/layouts/_card-list.scss | 28 | ||||
-rw-r--r-- | src/objects/_action-button.vars.scss | 18 | ||||
-rw-r--r-- | src/objects/_card.scss | 40 | ||||
-rw-r--r-- | src/objects/_card.vars.scss | 5 |
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; |