fix(button): fix focused style on pseudo button (#160)

alfa-laboratory · Jul 12, 2017 · a0564fa · a0564fa
1 parent 01296ca
commit a0564fa
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 6 deletions.
diff --git a/src/button/button_theme_alfa-on-color.css b/src/button/button_theme_alfa-on-color.css
@@ -97,11 +97,14 @@
         border-style: dashed;
 
         &.button_focused {
-            border-color: var(--color-content-alfa-on-color);
             border-style: solid;
+            border-color: var(--color-content-alfa-on-color);
+
+            box-shadow: 0 0 0 1px rgba(255, 255, 255, .9);
 
             &.button_hovered {
-                border-style: dashed;
+                box-shadow: 0 0 0 1px rgba(255, 255, 255, .7);
+                border-color: rgba(255, 255, 255, .7);
             }
         }
     }

diff --git a/src/button/button_theme_alfa-on-white.css b/src/button/button_theme_alfa-on-white.css
@@ -99,8 +99,11 @@
             border-color: var(--color-content-alfa-on-white);
             border-style: solid;
 
+            box-shadow: 0 0 0 1px rgba(0, 0, 0, .9);
+
             &.button_hovered {
-                border-style: dashed;
+                border-color: rgba(0, 0, 0, .7);
+                box-shadow: 0 0 0 1px rgba(0, 0, 0, .7);
             }
         }
     }

diff --git a/src/button/fantasy/button_theme_alfa-on-color.css b/src/button/fantasy/button_theme_alfa-on-color.css
@@ -94,11 +94,14 @@
         border-style: dashed;
 
         &.button_focused {
-            border-color: var(--color-content-alfa-on-color);
             border-style: solid;
+            border-color: var(--color-content-alfa-on-color);
+
+            box-shadow: 0 0 0 1px rgba(255, 255, 255, .9);
 
             &.button_hovered {
-                border-style: dashed;
+                box-shadow: 0 0 0 1px rgba(255, 255, 255, .7);
+                border-color: rgba(255, 255, 255, .7);
             }
         }
     }

diff --git a/src/button/fantasy/button_theme_alfa-on-white.css b/src/button/fantasy/button_theme_alfa-on-white.css
@@ -96,8 +96,11 @@
             border-color: var(--color-content-alfa-on-white);
             border-style: solid;
 
+            box-shadow: 0 0 0 1px rgba(0, 0, 0, .9);
+
             &.button_hovered {
-                border-style: dashed;
+                border-color: rgba(0, 0, 0, .7);
+                box-shadow: 0 0 0 1px rgba(0, 0, 0, .7);
             }
         }
     }