Flat card

1 files changed, 5 insertions, 17 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 @@
         border-color:     props.get(vars.$border-color);
         border-radius:    props.get(vars.$rounding);
         transition:       transform .2s;
-        box-shadow:
-            props.get(vars.$shadow-x)
-            props.get(vars.$shadow-y)
-            props.get(vars.$shadow-blur)
-            props.get(vars.$shadow-grow)
-            props.get(vars.$shadow-color);
 
         @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
             &:hover,
@@ -45,14 +39,12 @@
             }
 
             &:focus-visible {
-                margin:        calc(-1 * props.get(vars.$key-focus--border-width));
+                margin:        calc(-1 * props.get(vars.$key-focus--border-width) + 1px);
                 border:        props.get(vars.$key-focus--border-offset) solid transparent;
-                border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
+                border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset) - 1px);
                 outline:       props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
                 box-shadow:
-                    0
-                    0
-                    0
+                    0 0 0
                     calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
                     props.get(vars.$key-focus--outline-color);
             }
@@ -179,7 +171,9 @@
                 }
 
                 &:focus-visible {
+                    margin:     0;
                     outline:    none;
+                    border:     0;
                     box-shadow: none;
 
                     @include bem.elem('image') {
@@ -204,12 +198,6 @@
                 background-color: props.get(vars.$quiet--image-color);
                 background-clip:  padding-box;
                 border-radius:    props.get(vars.$rounding);
-                box-shadow:
-                    props.get(vars.$shadow-x)
-                    props.get(vars.$shadow-y)
-                    props.get(vars.$shadow-blur)
-                    props.get(vars.$shadow-grow)
-                    props.get(vars.$shadow-color);
             }
 
             @include bem.elem('body') {