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 7e3edb87689b6c967d8b77b0df291ac4d9d46b0f
parent ecd2e457d6a679d5c352725fed62745a58a89430
Author: George Francis <georgedoescode@gmail.com>
Date:   Wed,  8 Jul 2020 17:31:15 +0100

add custom range slider styles, up the padding a bit on controls wrapper

Diffstat:
Msrc/App.vue | 10++++++++++
Msrc/components/BaseRangeInput.vue | 60++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Msrc/components/GeneratorControls.vue | 1-
Msrc/components/GeneratorExportOptions.vue | 10++++++++--
Msrc/components/TheGenerator.vue | 6+++---
5 files changed, 81 insertions(+), 6 deletions(-)

diff --git a/src/App.vue b/src/App.vue @@ -73,4 +73,14 @@ export default { line-height: 1.75; width: 50%; } + +.app__bb { + position: absolute; + top: 2rem; + left: 0; + width: 100%; + opacity: 0.1; + + /* z-index: -1; */ +} </style> diff --git a/src/components/BaseRangeInput.vue b/src/components/BaseRangeInput.vue @@ -46,8 +46,68 @@ export default { <style scoped> input { + position: relative; min-width: 0; max-width: 100%; cursor: pointer; + border: 0; +} + +input[type='range'] { + -webkit-appearance: none; + width: 100%; + background: transparent; + + --thumb-width: 16px; + --thumb-height: 32px; + --thumb-radius: 16px; + --thumb-bg: var(--grey-900); + --track-height: 4px; + --track-radius: 2px; + --track-bg: var(--grey-000); +} + +input[type='range']:focus { + outline: none; + + --track-bg: var(--grey-100); +} + +input[type='range']::-webkit-slider-thumb { + -webkit-appearance: none; + height: var(--thumb-height); + width: var(--thumb-width); + margin-top: -14px; + border-radius: var(--thumb-radius); + background: var(--thumb-bg); + cursor: pointer; +} + +input[type='range']::-moz-range-thumb { + -webkit-appearance: none; + border: 0; + width: var(--thumb-width); + height: var(--thumb-height); + border-radius: var(--thumb-radius); + background: var(--thumb-bg); + cursor: pointer; +} + +input[type='range']::-webkit-slider-runnable-track { + border: 0; + width: 100%; + height: var(--track-height); + cursor: pointer; + background: var(--track-bg); + border-radius: var(--track-radius); +} + +input[type='range']::-moz-range-track { + border: 0; + width: 100%; + height: var(--track-height); + cursor: pointer; + background: var(--track-bg); + border-radius: var(--track-radius); } </style> diff --git a/src/components/GeneratorControls.vue b/src/components/GeneratorControls.vue @@ -137,7 +137,6 @@ export default { align-items: center; max-width: var(--spacing-13); width: 100%; - padding: 0 var(--spacing-3); } .generator-controls__inputs { diff --git a/src/components/GeneratorExportOptions.vue b/src/components/GeneratorExportOptions.vue @@ -30,10 +30,15 @@ export default { <template> <div class="generator-export-controls"> - <button class="generator-export-controls__btn" @click="downloadSVG"> + <button + aria-label="download squircle SVG" + class="generator-export-controls__btn" + @click="downloadSVG" + > <DownloadIcon /> </button> <button + aria-label="copy squircle SVG to clipboard" class="generator-export-controls__btn" @click="copySVGToClipBoard" > @@ -58,7 +63,7 @@ export default { height: var(--spacing-6); margin-left: var(--spacing-4); padding: 0; - border: 0; + border: 1px solid var(--grey-100); border-radius: 50%; outline: none; cursor: pointer; @@ -70,6 +75,7 @@ export default { width: 24px; height: 24px; stroke: var(--grey-900); + stroke-width: 2px; } .generator-export-controls__btn:hover { diff --git a/src/components/TheGenerator.vue b/src/components/TheGenerator.vue @@ -15,7 +15,7 @@ export default { squircleOpts: { curvature: 8, scale: 50, - detail: 0.01, + detail: 0.1, fill: '#1f2933', }, points: [], @@ -78,8 +78,8 @@ export default { position: relative; display: grid; grid-template-columns: 368px 1fr; - grid-gap: var(--spacing-4); - padding: var(--spacing-4); + grid-gap: var(--spacing-5); + padding: var(--spacing-5); background: #fff; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.075); border-radius: 32px;