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/base | |
| 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/base')
| -rw-r--r-- | src/styles/base/_animations.scss | 43 | ||||
| -rw-r--r-- | src/styles/base/_spacings.scss | 2 |
2 files changed, 21 insertions, 24 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%; } } 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") { |