summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--src/_config.defaults.scss8
-rw-r--r--src/objects/_action-button.vars.scss2
-rw-r--r--src/objects/_card.scss3
-rw-r--r--src/objects/_card.vars.scss2
-rw-r--r--tpl/views/card.pug2
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