Просмотр исходного кода

Added outlines to focused buttons (#129)

Timur Khazamov 5 лет назад
Родитель
Сommit
34b8883739
1 измененных файлов с 19 добавлено и 2 удалено
  1. 19 2
      src/styles.scss

+ 19 - 2
src/styles.scss

@@ -46,8 +46,13 @@ body {
 }
 
 .tool {
+  position: relative;
+
   input[type="radio"] {
-    display: none;
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
   }
 
   input[type="radio"] {
@@ -69,6 +74,9 @@ body {
     &:checked + .toolIcon {
       background-color: #bdbebc;
     }
+    &:focus + .toolIcon {
+      box-shadow: 0 0 0 2px steelblue;
+    }
   }
 }
 
@@ -89,6 +97,11 @@ input[type="color"] {
 
 input {
   margin-right: 5px;
+
+  &:focus {
+    outline: transparent;
+    box-shadow: 0 0 0 2px steelblue;
+  }
 }
 
 button {
@@ -97,7 +110,11 @@ button {
   border-radius: 4px;
   margin: 2px 0;
   padding: 5px;
-  outline: none;
+  outline: transparent;
+
+  &:focus {
+    box-shadow: 0 0 0 2px steelblue;
+  }
 
   &:hover {
     background-color: #e7e5e5;