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.

1 files changed, 20 insertions, 23 deletions

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%;
   }
 }