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:
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);