squircle

commit 7d603e36fd6b0c07fa2dd205fbd826696a2ebfc4
parent ee9707b8115ed4796dd2ec5ce5f73ed0e61523f5
Author: George Francis <georgedoescode@gmail.com>
Date:   Fri, 10 Jul 2020 07:55:10 +0100

add hover states to swatch input, add outline to inputs if user is tabbing

Diffstat:
M
src/App.vue
 | 
9
+++++++++
M
src/assets/styles/app.css
 | 
7
+++++++
M
src/components/BaseRangeInput.vue
 | 
1
-
M
src/components/GeneratorControls.vue
 | 
26
++++++++++++++++++++++----
M
src/components/GeneratorExportOptions.vue
 | 
1
-

5 files changed, 38 insertions(+), 6 deletions(-)
diff --git a/src/App.vue b/src/App.vue
@@ -14,6 +14,15 @@ export default {
         TheSquircleExplosion,
         TheInfoSection,
     },
+    mounted() {
+        function handleFirstTab(e) {
+            if (e.keyCode === 9) {
+                document.body.classList.add('user-is-tabbing');
+                window.removeEventListener('keydown', handleFirstTab);
+            }
+        }
+        window.addEventListener('keydown', handleFirstTab);
+    },
 };
 </script>
 
diff --git a/src/assets/styles/app.css b/src/assets/styles/app.css
@@ -121,6 +121,13 @@ table {
 
 /* Global Styles */
 
+body:not(.user-is-tabbing) button:focus,
+body:not(.user-is-tabbing) input:focus,
+body:not(.user-is-tabbing) select:focus,
+body:not(.user-is-tabbing) textarea:focus {
+    outline: none;
+}
+
 body {
     font-family: var(--font-family);
     line-height: 1;
diff --git a/src/components/BaseRangeInput.vue b/src/components/BaseRangeInput.vue
@@ -57,7 +57,6 @@ input[type='range'] {
     -webkit-appearance: none;
     width: 100%;
     background: transparent;
-    outline: none;
 
     --thumb-width: 16px;
     --thumb-height: 32px;
diff --git a/src/components/GeneratorControls.vue b/src/components/GeneratorControls.vue
@@ -157,7 +157,6 @@ export default {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding-left: var(--spacing-3);
     height: var(--spacing-6);
     background: var(--grey-000);
     border-radius: 12px;
@@ -165,12 +164,19 @@ export default {
 
 .generator-conrols__swatch-text {
     position: relative;
-    border: 0;
     width: 100%;
     text-transform: uppercase;
     height: 100%;
-    background: var(--grey-000);
-    outline: none;
+    padding-left: var(--spacing-3);
+    background: transparent;
+    border: 2px solid var(--grey-000);
+    border-radius: 12px 0 0 12px;
+    transition: border 125ms ease-in-out;
+}
+
+.generator-conrols__swatch-text:hover {
+    border: 2px solid var(--grey-100);
+    border-right: 0;
 }
 
 .generator-controls__detail {
@@ -214,3 +220,15 @@ hr {
     }
 }
 </style>
+
+<style>
+.vue-swatches__trigger__wrapper {
+    display: block;
+    transform-origin: 100% 100%;
+    transition: transform 125ms ease-in-out;
+}
+
+.vue-swatches__trigger__wrapper:hover {
+    transform: scaleX(1.125);
+}
+</style>
diff --git a/src/components/GeneratorExportOptions.vue b/src/components/GeneratorExportOptions.vue
@@ -67,7 +67,6 @@ export default {
     display: flex;
     justify-content: center;
     align-items: center;
-    outline: none;
     padding: 0 var(--spacing-3);
     width: 50%;
     height: var(--spacing-6);