squircle

Make all the squircles you need, in the browser. https://squircley.app/
git clone http://git.hanabi.in/repos/squircle.git
Log | Files | Refs | LICENSE

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:
Msrc/App.vue | 9+++++++++
Msrc/assets/styles/app.css | 7+++++++
Msrc/components/BaseRangeInput.vue | 1-
Msrc/components/GeneratorControls.vue | 26++++++++++++++++++++++----
Msrc/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);