From aaabaa5250fd1e7188a97f8bbf34755f9c768411 Mon Sep 17 00:00:00 2001
From: Stamm <uids9246@contiwan.com>
Date: Thu, 12 Mar 2020 13:48:19 +0100
Subject: [PATCH] Adding focus handling for buttons and inputs

---
 package.json         |   2 +-
 src/_maketheme.scss  |   7 ++
 src/base/_btn.scss   |  22 +++----
 src/base/_input.scss |  26 ++++----
 src/dark.scss        |  16 ++---
 src/light.scss       | 151 ++++++++++++++++++++++++++++---------------
 src/theme/_btn.scss  |  12 +++-
 7 files changed, 149 insertions(+), 87 deletions(-)

diff --git a/package.json b/package.json
index 8278f9b..ffbc799 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@hibas123/theme",
-    "version": "1.2.17",
+    "version": "1.2.18",
     "description": "",
     "main": " ",
     "files": [
diff --git a/src/_maketheme.scss b/src/_maketheme.scss
index 533e6a0..61eac80 100644
--- a/src/_maketheme.scss
+++ b/src/_maketheme.scss
@@ -40,6 +40,13 @@ $on-button: #000000 !default;
     }
 }
 
+// @mixin focus-outline() {
+//     &:focus {
+//         outline: $on-background auto medium;
+//         outline-offset: -2px;
+//     }
+// }
+
 @import "./theme/_global.scss";
 @import "./theme/_btn.scss";
 @import "./theme/_modal.scss";
diff --git a/src/base/_btn.scss b/src/base/_btn.scss
index ae80016..24a574e 100644
--- a/src/base/_btn.scss
+++ b/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;
-}
\ No newline at end of file
+}
diff --git a/src/base/_input.scss b/src/base/_input.scss
index 1abd7ee..cbbd335 100644
--- a/src/base/_input.scss
+++ b/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;
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/dark.scss b/src/dark.scss
index c3d9b5f..9768913 100644
--- a/src/dark.scss
+++ b/src/dark.scss
@@ -4,20 +4,18 @@ $background: #000000;
 $on-background: white;
 $disabled-brightness: 1.1;
 
-@mixin Elevation ($dp, $imp:false) {
+@mixin Elevation($dp, $imp: false) {
     @if $imp==true {
-        background: lighten($background, 10% + floor($dp * .7%)) !important;
-    }
-
-    @else {
-        background: lighten($background, 10% + floor($dp * .7%));
+        background: lighten($background, 10% + floor($dp * 0.7%)) !important;
+    } @else {
+        background: lighten($background, 10% + floor($dp * 0.7%));
     }
 
     z-index: $dp;
 }
 
-@mixin ElevationTransition() {
-    transition: background .5s;
+@mixin ElevationTransition($time: 0.5s) {
+    transition: background $time;
 }
 
-@import "./_maketheme.scss";
\ No newline at end of file
+@import "./_maketheme.scss";
diff --git a/src/light.scss b/src/light.scss
index 2fb6935..914a68d 100644
--- a/src/light.scss
+++ b/src/light.scss
@@ -1,72 +1,119 @@
 $background: #f9f9f9;
 $on-background: black;
-$disabled-brightness: .9;
+$disabled-brightness: 0.9;
 
 @mixin MakeShadow($imp, $type) {
     @if $imp==true {
         box-shadow: $type !important;
-    }
-
-    @else {
+    } @else {
         box-shadow: $type;
     }
 }
 
-@mixin Elevation ($dp, $imp:false) {
+@mixin Elevation($dp, $imp: false) {
     @if $dp==0 {
         @include MakeShadow($imp, none);
-        box-shadow: none
-    }
-
-    @else if $dp==1 {
-        @include MakeShadow($imp, (0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12), 0 1px 3px 0 rgba(0, 0, 0, .20))) // box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12), 0 1px 3px 0 rgba(0, 0, 0, .20)
-    }
-
-    @else if $dp==2 {
-        @include MakeShadow($imp, (0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .12), 0 1px 5px 0 rgba(0, 0, 0, .20)))
-    }
-
-    @else if $dp==3 {
-        @include MakeShadow($imp, (0 3px 4px 0 rgba(0, 0, 0, .14), 0 3px 3px -2px rgba(0, 0, 0, .12), 0 1px 8px 0 rgba(0, 0, 0, .20)))
-    }
-
-    @else if $dp==4 {
-        @include MakeShadow($imp, (0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .20)))
-    }
-
-    @else if $dp==6 {
-        @include MakeShadow($imp, (0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12), 0 3px 5px -1px rgba(0, 0, 0, .20)))
-    }
-
-    @else if $dp==8 {
-        @include MakeShadow($imp, (0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .20)))
-    }
-
-    @else if $dp==9 {
-        @include MakeShadow($imp, (0 9px 12px 1px rgba(0, 0, 0, .14), 0 3px 16px 2px rgba(0, 0, 0, .12), 0 5px 6px -3px rgba(0, 0, 0, .20)))
-    }
-
-    @else if $dp==12 {
-        @include MakeShadow($imp, (0 12px 17px 2px rgba(0, 0, 0, .14), 0 5px 22px 4px rgba(0, 0, 0, .12), 0 7px 8px -4px rgba(0, 0, 0, .20)))
-    }
-
-    @else if $dp==16 {
-        @include MakeShadow($imp, (0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(0, 0, 0, .20)))
-    }
-
-    @else if $dp==24 {
-        @include MakeShadow($imp, (0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12), 0 11px 15px -7px rgba(0, 0, 0, .20)))
-    }
-
-    @else {
+        box-shadow: none;
+    } @else if $dp==1 {
+        @include MakeShadow(
+                $imp,
+                (
+                    0 1px 1px 0 rgba(0, 0, 0, 0.14),
+                    0 2px 1px -1px rgba(0, 0, 0, 0.12),
+                    0 1px 3px 0 rgba(0, 0, 0, 0.2)
+                )
+            )
+            // box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12), 0 1px 3px 0 rgba(0, 0, 0, .20);
+    } @else if $dp==2 {
+        @include MakeShadow(
+            $imp,
+            (
+                0 2px 2px 0 rgba(0, 0, 0, 0.14),
+                0 3px 1px -2px rgba(0, 0, 0, 0.12),
+                0 1px 5px 0 rgba(0, 0, 0, 0.2)
+            )
+        );
+    } @else if $dp==3 {
+        @include MakeShadow(
+            $imp,
+            (
+                0 3px 4px 0 rgba(0, 0, 0, 0.14),
+                0 3px 3px -2px rgba(0, 0, 0, 0.12),
+                0 1px 8px 0 rgba(0, 0, 0, 0.2)
+            )
+        );
+    } @else if $dp==4 {
+        @include MakeShadow(
+            $imp,
+            (
+                0 4px 5px 0 rgba(0, 0, 0, 0.14),
+                0 1px 10px 0 rgba(0, 0, 0, 0.12),
+                0 2px 4px -1px rgba(0, 0, 0, 0.2)
+            )
+        );
+    } @else if $dp==6 {
+        @include MakeShadow(
+            $imp,
+            (
+                0 6px 10px 0 rgba(0, 0, 0, 0.14),
+                0 1px 18px 0 rgba(0, 0, 0, 0.12),
+                0 3px 5px -1px rgba(0, 0, 0, 0.2)
+            )
+        );
+    } @else if $dp==8 {
+        @include MakeShadow(
+            $imp,
+            (
+                0 8px 10px 1px rgba(0, 0, 0, 0.14),
+                0 3px 14px 2px rgba(0, 0, 0, 0.12),
+                0 5px 5px -3px rgba(0, 0, 0, 0.2)
+            )
+        );
+    } @else if $dp==9 {
+        @include MakeShadow(
+            $imp,
+            (
+                0 9px 12px 1px rgba(0, 0, 0, 0.14),
+                0 3px 16px 2px rgba(0, 0, 0, 0.12),
+                0 5px 6px -3px rgba(0, 0, 0, 0.2)
+            )
+        );
+    } @else if $dp==12 {
+        @include MakeShadow(
+            $imp,
+            (
+                0 12px 17px 2px rgba(0, 0, 0, 0.14),
+                0 5px 22px 4px rgba(0, 0, 0, 0.12),
+                0 7px 8px -4px rgba(0, 0, 0, 0.2)
+            )
+        );
+    } @else if $dp==16 {
+        @include MakeShadow(
+            $imp,
+            (
+                0 16px 24px 2px rgba(0, 0, 0, 0.14),
+                0 6px 30px 5px rgba(0, 0, 0, 0.12),
+                0 8px 10px -5px rgba(0, 0, 0, 0.2)
+            )
+        );
+    } @else if $dp==24 {
+        @include MakeShadow(
+            $imp,
+            (
+                0 24px 38px 3px rgba(0, 0, 0, 0.14),
+                0 9px 46px 8px rgba(0, 0, 0, 0.12),
+                0 11px 15px -7px rgba(0, 0, 0, 0.2)
+            )
+        );
+    } @else {
         @error "Invalid argument for $dp: {"+$dp+"}, look at the method definition for possible values";
     }
 
     z-index: $dp;
 }
 
-@mixin ElevationTransition() {
-    transition: box-shadow .5s;
+@mixin ElevationTransition($time: 0.5s) {
+    transition: box-shadow $time;
 }
 
-@import "./_maketheme.scss";
\ No newline at end of file
+@import "./_maketheme.scss";
diff --git a/src/theme/_btn.scss b/src/theme/_btn.scss
index 824206e..40c6c85 100644
--- a/src/theme/_btn.scss
+++ b/src/theme/_btn.scss
@@ -2,6 +2,8 @@
     background: $button-color;
     color: $on-button;
 
+    // @include focus-outline();
+
     &:hover {
         background: darken($button-color, 5%);
     }
@@ -17,10 +19,18 @@
 
 .btn {
     @include Elevation(1);
+    @include ElevationTransition(0.2s);
+    &:focus {
+        @include Elevation(6);
+    }
     @include btn-flat();
 }
 
 .fab {
     @include Elevation(8);
+    @include ElevationTransition(0.2s);
+    &:focus {
+        @include Elevation(16);
+    }
     background: $button-color;
-}
\ No newline at end of file
+}