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.

4 files changed, 55 insertions, 24 deletions

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") {