From 22d5ffa155080037a32a64814002b987bddce3b4 Mon Sep 17 00:00:00 2001 From: Armand Philippot 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 ++++++++++++++++++++++ 2 files changed, 34 insertions(+) create mode 100644 src/styles/abstracts/placeholders/_animations.scss (limited to 'src/styles/abstracts') 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; + } +} -- cgit v1.2.3