diff options
-rw-r--r-- | src/objects/_card.scss | 22 | ||||
-rw-r--r-- | src/objects/_card.vars.scss | 10 |
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; | ||