commit f2c5615338a328169343d9a604f4b22533e36ead
parent d4ce8676cc4ecde0cc92d38b9c59192c7518725f
Author: George Francis <georgedoescode@gmail.com>
Date: Thu, 9 Jul 2020 22:13:04 +0100
add hover states for range inputs, some more styling bits
Diffstat:
7 files changed, 48 insertions(+), 38 deletions(-)
diff --git a/src/App.vue b/src/App.vue
@@ -28,21 +28,20 @@ export default {
<SquircleDemo class="squircle-demo" />
<div class="app__content-text">
<div class="squiggle"></div>
- <p class="longform-paragraph">Hey there 👋</p>
+
<p class="longform-paragraph">
- Looking for some top-tier squircles (square x circle) to
- add to your designs? You’ve come to the right place!
- Squircley is a curve based generator for creating
- beautiful squircles - ready to use for logos, icons,
- weird blobby characters and more.
+ Looking to add some premium squircley goodness to add to
+ your designs? Squircley is all you need to start
+ creating beautiful organic shapes ready to use for
+ logos, icons and background images.
</p>
<p class="longform-paragraph">
- Squircley exports SVG files which can be copied straight
- to the clipboard for dropping into your HTML / CSS or
- downloaded to your computer ready to use in your design
- software of choice (Figma, Sketch, Framer, etc)
+ The generator exports SVG files which can be copied
+ straight to the clipboard for dropping into your HTML /
+ CSS or downloaded to your computer ready to use in your
+ design software of choice (Figma, Sketch, Framer, etc)
</p>
- <p class="longform-paragraph">Enjoy! ❤️</p>
+ <p class="longform-paragraph">Have fun! 🎨</p>
</div>
</div>
</div>
@@ -107,7 +106,7 @@ export default {
justify-self: end;
grid-column: 9 / 13;
grid-row: 1;
- margin-top: var(--spacing-7);
+ margin-top: 0;
}
.squiggle {
@@ -117,7 +116,7 @@ export default {
background-size: 58px auto;
background-position: center center;
background-repeat: repeat-x;
- margin-bottom: var(--spacing-7);
+ margin-bottom: var(--spacing-8);
}
@media only screen and (max-width: 68rem) {
diff --git a/src/assets/img/clipboard.svg b/src/assets/img/clipboard.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clipboard"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
-\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clipboard"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
+\ No newline at end of file
diff --git a/src/assets/img/download-cloud.svg b/src/assets/img/download-cloud.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-download-cloud"><polyline points="8 17 12 21 16 17"></polyline><line x1="12" y1="12" x2="12" y2="21"></line><path d="M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29"></path></svg>
-\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-download-cloud"><polyline points="8 17 12 21 16 17"></polyline><line x1="12" y1="12" x2="12" y2="21"></line><path d="M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29"></path></svg>
+\ No newline at end of file
diff --git a/src/components/BaseRangeInput.vue b/src/components/BaseRangeInput.vue
@@ -57,22 +57,25 @@ input[type='range'] {
-webkit-appearance: none;
width: 100%;
background: transparent;
+ outline: none;
- --thumb-width: 16px;
+ --thumb-width: 12px;
--thumb-height: 32px;
--thumb-radius: 16px;
--thumb-bg: var(--grey-900);
+ --thumb-scale: 1;
--track-height: 4px;
--track-radius: 2px;
--track-bg: var(--grey-000);
}
-input[type='range']:focus {
- outline: none;
-}
-
input[type='range']:hover {
--track-bg: var(--grey-100);
+ --thumb-scale: 1.125;
+}
+
+input[type='range']:active {
+ --thumb-scale: 0.875;
}
input[type='range']::-webkit-slider-thumb {
@@ -83,6 +86,8 @@ input[type='range']::-webkit-slider-thumb {
border-radius: var(--thumb-radius);
background: var(--thumb-bg);
cursor: pointer;
+ transition: transform 125ms ease-in-out;
+ transform: scale(var(--thumb-scale));
}
input[type='range']::-moz-range-thumb {
@@ -93,6 +98,8 @@ input[type='range']::-moz-range-thumb {
border-radius: var(--thumb-radius);
background: var(--thumb-bg);
cursor: pointer;
+ transition: transform 125ms ease-in-out;
+ transform: scale(var(--thumb-scale));
}
input[type='range']::-webkit-slider-runnable-track {
@@ -102,6 +109,7 @@ input[type='range']::-webkit-slider-runnable-track {
cursor: pointer;
background: var(--track-bg);
border-radius: var(--track-radius);
+ transition: background-color 125ms ease-in-out;
}
input[type='range']::-moz-range-track {
@@ -111,5 +119,6 @@ input[type='range']::-moz-range-track {
cursor: pointer;
background: var(--track-bg);
border-radius: var(--track-radius);
+ transition: background-color 125ms ease-in-out;
}
</style>
diff --git a/src/components/GeneratorControls.vue b/src/components/GeneratorControls.vue
@@ -163,11 +163,13 @@ export default {
}
.generator-conrols__swatch-text {
+ position: relative;
border: 0;
- background: transparent;
- outline: none;
width: 100%;
text-transform: uppercase;
+ height: 100%;
+ background: var(--grey-000);
+ outline: none;
}
.generator-controls__detail {
diff --git a/src/components/GeneratorExportOptions.vue b/src/components/GeneratorExportOptions.vue
@@ -39,7 +39,9 @@ export default {
class="generator-export-controls__btn"
@click="downloadSVG"
>
- Save
+ <span>
+ Save
+ </span>
<DownloadIcon />
</button>
<button
@@ -65,36 +67,34 @@ export default {
display: flex;
justify-content: center;
align-items: center;
+ outline: none;
padding: 0 var(--spacing-3);
width: 50%;
height: var(--spacing-6);
margin-left: var(--spacing-4);
- outline: none;
cursor: pointer;
- background: var(--grey-900);
- border-radius: 32px;
- color: #fff;
- border: 2px solid var(--grey-900);
+ background: #fff;
+ border-radius: 12px;
+ font-weight: 700;
+ border: 2px solid var(--grey-100);
+ color: var(--grey-900);
+ transition: background-color 125ms ease-in-out;
}
.generator-export-controls__btn svg {
width: 24px;
height: 24px;
- stroke: var(--grey-000);
stroke-width: 1.5px;
margin-left: var(--spacing-3);
+ stroke: var(--grey-900);
transition: stroke 125ms ease-in-out, transform 125ms ease-in-out;
}
.generator-export-controls__btn:hover {
- background: #fff;
color: var(--grey-900);
font-weight: 700;
-}
-
-.generator-export-controls__btn:hover svg {
- transform: scale(1.125);
- stroke: var(--grey-900);
+ border-color: var(--grey-100);
+ background: var(--grey-000);
}
.generator-export-controls__btn:active svg {
diff --git a/src/components/TheGenerator.vue b/src/components/TheGenerator.vue
@@ -73,7 +73,7 @@ export default {
padding: var(--spacing-5);
background: #fff;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.075);
- border-radius: 32px;
+ border-radius: 48px;
}
@media screen and (max-width: 56rem) {
