summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/objects/_card.scss22
-rw-r--r--src/objects/_card.vars.scss10
2 files changed, 6 insertions, 26 deletions
diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index 9f70420..4f8c7fb 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -20,12 +20,6 @@
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;
23 box-shadow:
24 props.get(vars.$shadow-x)
25 props.get(vars.$shadow-y)
26 props.get(vars.$shadow-blur)
27 props.get(vars.$shadow-grow)
28 props.get(vars.$shadow-color);
29 23
30 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { 24 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
31 &:hover, 25 &:hover,
@@ -45,14 +39,12 @@
45 } 39 }
46 40
47 &:focus-visible { 41 &:focus-visible {
48 margin: calc(-1 * props.get(vars.$key-focus--border-width)); 42 margin: calc(-1 * props.get(vars.$key-focus--border-width) + 1px);
49 border: props.get(vars.$key-focus--border-offset) solid transparent; 43 border: props.get(vars.$key-focus--border-offset) solid transparent;
50 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); 44 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset) - 1px);
51 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); 45 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
52 box-shadow: 46 box-shadow:
53 0 47 0 0 0
54 0
55 0
56 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) 48 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
57 props.get(vars.$key-focus--outline-color); 49 props.get(vars.$key-focus--outline-color);
58 } 50 }
@@ -179,7 +171,9 @@
179 } 171 }
180 172
181 &:focus-visible { 173 &:focus-visible {
174 margin: 0;
182 outline: none; 175 outline: none;
176 border: 0;
183 box-shadow: none; 177 box-shadow: none;
184 178
185 @include bem.elem('image') { 179 @include bem.elem('image') {
@@ -204,12 +198,6 @@
204 background-color: props.get(vars.$quiet--image-color); 198 background-color: props.get(vars.$quiet--image-color);
205 background-clip: padding-box; 199 background-clip: padding-box;
206 border-radius: props.get(vars.$rounding); 200 border-radius: props.get(vars.$rounding);
207 box-shadow:
208 props.get(vars.$shadow-x)
209 props.get(vars.$shadow-y)
210 props.get(vars.$shadow-blur)
211 props.get(vars.$shadow-grow)
212 props.get(vars.$shadow-color);
213 } 201 }
214 202
215 @include bem.elem('body') { 203 @include bem.elem('body') {
diff --git a/src/objects/_card.vars.scss b/src/objects/_card.vars.scss
index 3859b12..4f5cf40 100644
--- a/src/objects/_card.vars.scss
+++ b/src/objects/_card.vars.scss
@@ -16,14 +16,8 @@ $key-focus--border-width: props.def(--o-card--key-focus--border-width, props.ge
16$key-focus--border-offset: props.def(--o-card--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; 16$key-focus--border-offset: props.def(--o-card--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
17$key-focus--outline-width: props.def(--o-card--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; 17$key-focus--outline-width: props.def(--o-card--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
18 18
19$shadow-x: props.def(--o-card--shadow-x, props.get(core.$shadow--l2--x)) !default;
20$shadow-y: props.def(--o-card--shadow-y, props.get(core.$shadow--l2--y)) !default;
21$shadow-blur: props.def(--o-card--shadow-blur, props.get(core.$shadow--l2--blur)) !default;
22$shadow-grow: props.def(--o-card--shadow-grow, props.get(core.$shadow--l2--grow)) !default;
23
24$shadow-color: props.def(--o-card--shadow-color, props.get(core.$theme, --shadow), 'color') !default;
25$bg-color: props.def(--o-card--bg-color, props.get(core.$theme, --bg-l2), 'color') !default; 19$bg-color: props.def(--o-card--bg-color, props.get(core.$theme, --bg-l2), 'color') !default;
26$border-color: props.def(--o-card--border-color, props.get(core.$theme, --border-mute) props.get(core.$theme, --border-mute) props.get(core.$theme, --border), 'color') !default; 20$border-color: props.def(--o-card--border-color, props.get(core.$theme, --border-mute), 'color') !default;
27$divider-color: props.def(--o-card--divider-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;
28 22
29$key-focus--label-color: props.def(--o-card--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default; 23$key-focus--label-color: props.def(--o-card--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default;
@@ -32,5 +26,3 @@ $key-focus--outline-color: props.def(--o-card--key-focus--outline-color, props.g
32 26
33$quiet--image-color: props.def(--o-card--quiet--image-color, props.get(core.$theme, --bg-base), 'color') !default; 27$quiet--image-color: props.def(--o-card--quiet--image-color, props.get(core.$theme, --bg-base), 'color') !default;
34$quiet--hover--image-color: props.def(--o-card--quiet--hover--image-color, props.get(core.$theme, --border), 'color') !default; 28$quiet--hover--image-color: props.def(--o-card--quiet--hover--image-color, props.get(core.$theme, --border), 'color') !default;
35
36$border-color-dark: props.def(--o-card--border-color, props.get(core.$theme, --border-mute), 'dark') !default;