From 22d5ffa155080037a32a64814002b987bddce3b4 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Sun, 13 Feb 2022 16:53:24 +0100
Subject: chore: increase toolbar buttons size

On small screen, they was too small I think. I also change some
styles like focus state to keep consistency between all elements in
toolbar. Also, I was not fan of the rotate effect.
---
 src/styles/abstracts/_placeholders.scss            |  1 +
 src/styles/abstracts/placeholders/_animations.scss | 33 +++++++++++++++++
 src/styles/base/_animations.scss                   | 43 ++++++++++------------
 src/styles/base/_spacings.scss                     |  2 +-
 4 files changed, 55 insertions(+), 24 deletions(-)
 create mode 100644 src/styles/abstracts/placeholders/_animations.scss

(limited to 'src/styles')

diff --git a/src/styles/abstracts/_placeholders.scss b/src/styles/abstracts/_placeholders.scss
index 5ee6cea..d1c0a7a 100644
--- a/src/styles/abstracts/_placeholders.scss
+++ b/src/styles/abstracts/_placeholders.scss
@@ -1,2 +1,3 @@
+@forward "./placeholders/animations";
 @forward "./placeholders/clearfix";
 @forward "./placeholders/list";
diff --git a/src/styles/abstracts/placeholders/_animations.scss b/src/styles/abstracts/placeholders/_animations.scss
new file mode 100644
index 0000000..84ca419
--- /dev/null
+++ b/src/styles/abstracts/placeholders/_animations.scss
@@ -0,0 +1,33 @@
+/// Draw borders around an element.
+%draw-borders {
+  background-image: linear-gradient(
+      to right,
+      var(--draw-border-color2),
+      var(--draw-border-color1)
+    ),
+    linear-gradient(
+      to bottom,
+      var(--draw-border-color1),
+      var(--draw-border-color2)
+    ),
+    linear-gradient(
+      to left,
+      var(--draw-border-color2),
+      var(--draw-border-color1)
+    ),
+    linear-gradient(
+      to top,
+      var(--draw-border-color1),
+      var(--draw-border-color2)
+    );
+  background-position: top left, top right, bottom right, bottom left;
+  background-repeat: no-repeat;
+  background-size: 100% var(--draw-border-thickness),
+    var(--draw-border-thickness) 100%, 100% var(--draw-border-thickness),
+    var(--draw-border-thickness) 100%;
+  color: var(--draw-border-color1);
+
+  :global {
+    animation: draw-borders 0.8s linear 1 0s;
+  }
+}
diff --git a/src/styles/base/_animations.scss b/src/styles/base/_animations.scss
index 7dc0d25..3e8f6f2 100644
--- a/src/styles/base/_animations.scss
+++ b/src/styles/base/_animations.scss
@@ -17,42 +17,39 @@
 @keyframes draw-borders {
   0% {
     background-position: top left, top right, bottom right, bottom left;
-    background-size: 0% var(--draw-border-width, fun.convert-px(3)),
-      var(--draw-border-width, fun.convert-px(3)) 0%,
-      0% var(--draw-border-width, fun.convert-px(3)),
-      var(--draw-border-width, fun.convert-px(3)) 0%;
+    background-size: 0% var(--draw-border-thickness, fun.convert-px(3)),
+      var(--draw-border-thickness, fun.convert-px(3)) 0%,
+      0% var(--draw-border-thickness, fun.convert-px(3)),
+      var(--draw-border-thickness, fun.convert-px(3)) 0%;
   }
 
   25% {
-    background-position: top left, top right, bottom right, bottom left;
-    background-size: 0% var(--draw-border-width, fun.convert-px(3)),
-      var(--draw-border-width, fun.convert-px(3)) 0%,
-      100% var(--draw-border-width, fun.convert-px(3)),
-      var(--draw-border-width, fun.convert-px(3)) 0%;
+    background-size: 0% var(--draw-border-thickness, fun.convert-px(3)),
+      var(--draw-border-thickness, fun.convert-px(3)) 0%,
+      100% var(--draw-border-thickness, fun.convert-px(3)),
+      var(--draw-border-thickness, fun.convert-px(3)) 0%;
   }
 
   50% {
-    background-position: top left, top right, bottom right, bottom left;
-    background-size: 0% var(--draw-border-width, fun.convert-px(3)),
-      var(--draw-border-width, fun.convert-px(3)) 0%,
-      100% var(--draw-border-width, fun.convert-px(3)),
-      var(--draw-border-width, fun.convert-px(3)) 100%;
+    background-size: 0% var(--draw-border-thickness, fun.convert-px(3)),
+      var(--draw-border-thickness, fun.convert-px(3)) 0%,
+      100% var(--draw-border-thickness, fun.convert-px(3)),
+      var(--draw-border-thickness, fun.convert-px(3)) 100%;
   }
 
   75% {
-    background-position: top left, top right, bottom right, bottom left;
-    background-size: 100% var(--draw-border-width, fun.convert-px(3)),
-      var(--draw-border-width, fun.convert-px(3)) 0%,
-      100% var(--draw-border-width, fun.convert-px(3)),
-      var(--draw-border-width, fun.convert-px(3)) 100%;
+    background-size: 100% var(--draw-border-thickness, fun.convert-px(3)),
+      var(--draw-border-thickness, fun.convert-px(3)) 0%,
+      100% var(--draw-border-thickness, fun.convert-px(3)),
+      var(--draw-border-thickness, fun.convert-px(3)) 100%;
   }
 
   100% {
     background-position: top left, top right, bottom right, bottom left;
-    background-size: 100% var(--draw-border-width, fun.convert-px(3)),
-      var(--draw-border-width, fun.convert-px(3)) 100%,
-      100% var(--draw-border-width, fun.convert-px(3)),
-      var(--draw-border-width, fun.convert-px(3)) 100%;
+    background-size: 100% var(--draw-border-thickness, fun.convert-px(3)),
+      var(--draw-border-thickness, fun.convert-px(3)) 100%,
+      100% var(--draw-border-thickness, fun.convert-px(3)),
+      var(--draw-border-thickness, fun.convert-px(3)) 100%;
   }
 }
 
diff --git a/src/styles/base/_spacings.scss b/src/styles/base/_spacings.scss
index 7c71445..08c3c3f 100644
--- a/src/styles/base/_spacings.scss
+++ b/src/styles/base/_spacings.scss
@@ -24,7 +24,7 @@
   --spacing-xl: clamp(#{var.spacing("lg")}, 1ex + 4vw, #{var.spacing("xl")});
   --spacing-2xl: clamp(#{var.spacing("xl")}, 1ex + 5vw, #{var.spacing("2xl")});
   --spacing-3xl: clamp(#{var.spacing("2xl")}, 1ex + 6vw, #{var.spacing("3xl")});
-  --toolbar-size: #{fun.convert-px(60)};
+  --toolbar-size: #{fun.convert-px(65)};
 }
 
 @include mix.media("screen") {
-- 
cgit v1.2.3