Ver código fonte

Add focus styles to buttons

Tatiana Inama 6 anos atrás
pai
commit
ce438ea6e2
1 arquivos alterados com 7 adições e 3 exclusões
  1. 7 3
      recipes/src/components/Button/styles.scss

+ 7 - 3
recipes/src/components/Button/styles.scss

@@ -29,6 +29,7 @@ button.cbk-btn {
 
   &:focus {
     outline: 0;
+    background-color: $grey-300;
   }
   
   &:hover {
@@ -59,7 +60,8 @@ button.cbk-btn {
     @include solidBoxShadow();
     position: relative;
     
-    &:hover {
+    &:hover,
+    &:focus {
       background-color: $black;
       color: $white;
       @include solidBoxShadow();
@@ -86,7 +88,8 @@ button.cbk-btn {
     background-color: $black;
     border: 3px solid $black;
     color: $white;
-    &:hover {
+    &:hover,
+    &:focus {
       background-color: $black;
       box-shadow: 3px 3px $yellow;
     }
@@ -107,7 +110,8 @@ button.cbk-btn {
     border: 3px solid black;
     color: black;
     
-    &:hover {
+    &:hover,
+    &:focus {
       border: 3px solid black;
       color: black;
       background-image: linear-gradient(