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/base/_animations.scss | 43 +++++++++++++++++++---------------------
 1 file changed, 20 insertions(+), 23 deletions(-)

(limited to 'src/styles/base/_animations.scss')

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%;
   }
 }
 
-- 
cgit v1.2.3