diff options
-rw-r--r-- | src/_config.defaults.scss | 8 | ||||
-rw-r--r-- | src/objects/_action-button.vars.scss | 2 | ||||
-rw-r--r-- | src/objects/_card.scss | 3 | ||||
-rw-r--r-- | src/objects/_card.vars.scss | 2 | ||||
-rw-r--r-- | tpl/views/card.pug | 2 |
5 files changed, 9 insertions, 8 deletions
diff --git a/src/_config.defaults.scss b/src/_config.defaults.scss index c328355..3f02ecc 100644 --- a/src/_config.defaults.scss +++ b/src/_config.defaults.scss | |||
@@ -183,13 +183,13 @@ $theme-dark: ( | |||
183 | --bg-base: --base --50, | 183 | --bg-base: --base --50, |
184 | --bg-l1: --base --75, | 184 | --bg-l1: --base --75, |
185 | --bg-l2: --base --100, | 185 | --bg-l2: --base --100, |
186 | |||
187 | --box: ( | ||
188 | --border: --base --75, | ||
189 | ), | ||
190 | )), | 186 | )), |
191 | 187 | ||
192 | --constants: ( | 188 | --constants: ( |
193 | --shadow: rgba(#000, .1), | 189 | --shadow: rgba(#000, .1), |
190 | |||
191 | --box: ( | ||
192 | --border: rgba(#000, .1), | ||
193 | ), | ||
194 | ), | 194 | ), |
195 | ); | 195 | ); |
diff --git a/src/objects/_action-button.vars.scss b/src/objects/_action-button.vars.scss index 72dc4a1..84bb415 100644 --- a/src/objects/_action-button.vars.scss +++ b/src/objects/_action-button.vars.scss | |||
@@ -8,7 +8,7 @@ $border-width: props.def(--o-action-button--border-width, props.get(core.$border | |||
8 | $rounding: props.def(--o-action-button--rounding, props.get(core.$rounding--sm)) !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--10)) !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--115)) !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; |
diff --git a/src/objects/_card.scss b/src/objects/_card.scss index d5d300d..6b80e2f 100644 --- a/src/objects/_card.scss +++ b/src/objects/_card.scss | |||
@@ -14,6 +14,7 @@ | |||
14 | position: relative; | 14 | position: relative; |
15 | display: flex; | 15 | display: flex; |
16 | flex-direction: column; | 16 | flex-direction: column; |
17 | background-clip: content-box; | ||
17 | background-color: props.get(vars.$bg-color); | 18 | background-color: props.get(vars.$bg-color); |
18 | border: props.get(vars.$border-width) solid transparent; | 19 | border: props.get(vars.$border-width) solid transparent; |
19 | border-color: props.get(vars.$border-color); | 20 | border-color: props.get(vars.$border-color); |
@@ -189,7 +190,7 @@ | |||
189 | inset-inline: calc(-1 * props.get(vars.$border-width)); | 190 | inset-inline: calc(-1 * props.get(vars.$border-width)); |
190 | z-index: 10; | 191 | z-index: 10; |
191 | visibility: hidden; | 192 | visibility: hidden; |
192 | background-color: props.get(vars.$bg-color); | 193 | background-color: props.get(vars.$hover--bg-color); |
193 | border-width: 0 props.get(vars.$border-width) props.get(vars.$border-width); | 194 | border-width: 0 props.get(vars.$border-width) props.get(vars.$border-width); |
194 | border-color: transparent; | 195 | border-color: transparent; |
195 | border-style: solid; | 196 | border-style: solid; |
diff --git a/src/objects/_card.vars.scss b/src/objects/_card.vars.scss index 9810239..c5bbc0d 100644 --- a/src/objects/_card.vars.scss +++ b/src/objects/_card.vars.scss | |||
@@ -22,7 +22,7 @@ $bg-color: props.def(--o-card--bg-color, props.get(core.$theme, --bg-l2), ' | |||
22 | $border-color: props.def(--o-card--border-color, props.get(core.$theme, --box, --border), 'color') !default; | 22 | $border-color: props.def(--o-card--border-color, props.get(core.$theme, --box, --border), 'color') !default; |
23 | $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; |
24 | 24 | ||
25 | $hover--bg-color: props.def(--o-card--hover--bg-color, props.get(core.$theme, --border-mute), 'color') !default; | 25 | $hover--bg-color: props.def(--o-card--hover--bg-color, color-mix(in lch, props.get($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; | 26 | $hover--border-color: props.def(--o-card--hover--border-color, props.get(core.$theme, --border), 'color') !default; |
27 | 27 | ||
28 | $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; |
diff --git a/tpl/views/card.pug b/tpl/views/card.pug index 8dde279..d962abd 100644 --- a/tpl/views/card.pug +++ b/tpl/views/card.pug | |||
@@ -34,7 +34,7 @@ mixin view-card | |||
34 | 34 | ||
35 | .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') | 36 | +card(thumbnail=true href='#' class='l-card-list__card') |
37 | +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' }) | 37 | +card-image(src='Drawing_Half.png') |
38 | +card-body | 38 | +card-body |
39 | +card-title= 'XS Heading' | 39 | +card-title= 'XS Heading' |
40 | 40 | ||