Adding focus handling for buttons and inputs

src/base/_btn.scss

@@ -1,15 +1,16 @@
 @mixin btn-flat() {
     position: relative;
     border: 0;
-    margin: .3rem;
-    padding: .5rem;
+    margin: 0.3rem;
+    padding: 0.5rem;
     font-weight: 500;
     text-transform: uppercase;
-    transition: .05s background-color linear;
+    transition: 0.05s background-color linear;
     text-decoration: unset;
     text-align: center;
     align-items: flex-start;
     cursor: pointer;
+    outline: none;
 }
 
 .btn-flat {
@@ -25,7 +26,7 @@
     color: $text !important;
 
     &:hover {
-        filter: brightness(.95);
+        filter: brightness(0.95);
     }
 
     &:active {
@@ -33,7 +34,6 @@
     }
 }
 
-
 .btn-primary {
     @include btn-color($primary, $on-primary);
 }
@@ -43,11 +43,11 @@
 }
 
 .btn-success {
-    @include btn-color($success, $on-success );
+    @include btn-color($success, $on-success);
 }
 
 .btn-error {
-    @include btn-color($error, $on-error );
+    @include btn-color($error, $on-error);
 }
 
 .btn-icon {
@@ -55,7 +55,7 @@
     border: 0 !important;
     box-shadow: unset !important;
 
-    >svg {
+    > svg {
         height: 1.5rem;
         width: 1.5rem;
     }
@@ -65,11 +65,11 @@
     border-radius: 50%;
     width: 3.5rem;
     height: 3.5rem;
-    margin: .5rem;
+    margin: 0.5rem;
     line-height: 2rem;
     font-size: 2rem;
 
-    >svg {
+    > svg {
         height: 2rem;
         width: 2rem;
     }
@@ -84,4 +84,4 @@
 .fab-left {
     right: unset;
     left: 1.5rem;
-}
+}

src/base/_input.scss

@@ -1,18 +1,20 @@
 .inp {
     background: unset;
     border: 1px grey solid;
-    padding: 0 .5rem;
+    padding: 0 0.5rem;
     height: 2rem;
     display: inline-block;
     min-width: 10rem;
+    outline: none;
 
     &:focus {
+        border-width: 1px;
         border-color: $primary;
     }
 }
 
 textarea.inp {
-    height: unset !important;
+    height: unset;
     min-height: 6rem !important;
 }
 
@@ -27,13 +29,12 @@ textarea.inp {
 
     label {
         display: inline-block;
-        margin-bottom: .3rem;
-        margin-left: .5rem;
+        margin-bottom: 0.3rem;
+        margin-left: 0.5rem;
     }
 }
 
 .input-checkbox {
-
     @extend .margin;
 
     display: block;
@@ -47,7 +48,6 @@ textarea.inp {
     -ms-user-select: none;
     user-select: none;
 
-
     /* Hide the browser's default checkbox */
     input {
         position: absolute;
@@ -64,16 +64,16 @@ textarea.inp {
         left: 0;
         height: 26px;
         width: 26px;
-        transition: background-color .2s;
+        transition: background-color 0.2s;
     }
 
     /* On mouse-over, add a grey background color */
-    :hover input~span {
+    :hover input ~ span {
         background-color: #ccc;
     }
 
     /* When the checkbox is checked, add a blue background */
-    input:checked~span {
+    input:checked ~ span {
         background-color: $primary;
     }
 
@@ -85,11 +85,11 @@ textarea.inp {
     }
 
     /* Show the checkmark when checked */
-    input:checked~span:after {
+    input:checked ~ span:after {
         display: block;
     }
 
-    input[type=checkbox]+span:after {
+    input[type="checkbox"] + span:after {
         /* Style the checkmark/indicator */
         left: 9px;
         top: 5px;
@@ -100,7 +100,7 @@ textarea.inp {
         transform: rotate(45deg);
     }
 
-    input[type=radio]+span {
+    input[type="radio"] + span {
         border-radius: 50%;
 
         &:after {
@@ -112,4 +112,4 @@ textarea.inp {
             background-color: white;
         }
     }
-}
+}