diff options
| author | Armand Philippot <git@armandphilippot.com> | 2022-02-13 16:53:24 +0100 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2022-02-13 16:53:24 +0100 |
| commit | 22d5ffa155080037a32a64814002b987bddce3b4 (patch) | |
| tree | 6f158c36c043d4a3fd822688a4f51e94e8d9810f /src/styles/abstracts | |
| parent | 291a4fa29bb7fcbd1e0f298ff27bd0c774ff0cd0 (diff) | |
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.
Diffstat (limited to 'src/styles/abstracts')
| -rw-r--r-- | src/styles/abstracts/_placeholders.scss | 1 | ||||
| -rw-r--r-- | src/styles/abstracts/placeholders/_animations.scss | 33 |
2 files changed, 34 insertions, 0 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; + } +} |