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/assets/images/icon-close.svg | 6 +- src/components/Buttons/Buttons.module.scss | 28 +++-- src/components/Icons/Close/Close.tsx | 4 +- .../Icons/Hamburger/Hamburger.module.scss | 3 +- src/components/MainNav/MainNav.module.scss | 139 +++++---------------- src/components/Toolbar/Toolbar.module.scss | 2 +- src/styles/abstracts/_placeholders.scss | 1 + src/styles/abstracts/placeholders/_animations.scss | 33 +++++ src/styles/base/_animations.scss | 43 +++---- src/styles/base/_spacings.scss | 2 +- 10 files changed, 114 insertions(+), 147 deletions(-) create mode 100644 src/styles/abstracts/placeholders/_animations.scss (limited to 'src') diff --git a/src/assets/images/icon-close.svg b/src/assets/images/icon-close.svg index f108234..7490e7d 100644 --- a/src/assets/images/icon-close.svg +++ b/src/assets/images/icon-close.svg @@ -17,7 +17,7 @@ id="namedview6" inkscape:zoom="2.729418" inkscape:cx="-18.318924" - inkscape:cy="74.374829" + inkscape:cy="74.37483" inkscape:window-width="1920" inkscape:window-height="1019" inkscape:window-x="0" @@ -34,9 +34,9 @@ + d="m 3.6465461,3.6465455 c 2.8785908,-2.87859092 7.5134339,-2.87859092 10.3920249,0 L 96.353457,85.96143 c 2.878587,2.878591 2.878587,7.513434 0,10.392025 -2.878597,2.878591 -7.513432,2.878591 -10.392029,0 L 3.6465451,14.038571 C 0.76795421,11.15998 0.76795421,6.5251364 3.6465461,3.6465455 Z" /> + d="m 96.353453,3.646546 c 2.878592,2.8785909 2.878592,7.513435 0,10.392026 L 14.03857,96.353457 c -2.878589,2.878587 -7.5134337,2.878587 -10.3920246,0 -2.87859084,-2.878597 -2.87858985,-7.513442 -1e-6,-10.392029 L 85.961428,3.646546 c 2.878591,-2.87859097 7.513434,-2.87859097 10.392025,0 z" /> diff --git a/src/components/Buttons/Buttons.module.scss b/src/components/Buttons/Buttons.module.scss index fca8013..2a6daca 100644 --- a/src/components/Buttons/Buttons.module.scss +++ b/src/components/Buttons/Buttons.module.scss @@ -1,5 +1,6 @@ @use "@styles/abstracts/functions" as fun; @use "@styles/abstracts/mixins" as mix; +@use "@styles/abstracts/placeholders"; .btn { display: block; @@ -176,19 +177,28 @@ } .toolbar { - display: block; - width: var(--btn-size); - height: var(--btn-size); - padding: 0; + --draw-border-thickness: #{fun.convert-px(5)}; + --icon-size: 100%; + + display: flex; + flex-flow: row nowrap; + place-items: center; + width: var(--btn-size, 100%); + height: var(--btn-size, 100%); + padding: var(--spacing-2xs); background: none; border: none; font-size: var(--font-size-md); + &:hover, &:focus { - outline: var(--color-primary-light) solid fun.convert-px(3); + --draw-border-color1: var(--color-primary-light); + --draw-border-color2: var(--color-primary-lighter); + + @extend %draw-borders; } - @include mix.media("screen") { + /* @include mix.media("screen") { @include mix.dimensions("md") { &:hover, &:focus { @@ -196,7 +206,7 @@ transition: all 0.8s ease-in-out 0s; } } - } + } */ } .icon { @@ -213,8 +223,8 @@ .back { display: flex; place-content: center; - width: var(--btn-size); - height: var(--btn-size); + width: var(--icon-size); + height: var(--icon-size); position: absolute; top: 0; right: 0; diff --git a/src/components/Icons/Close/Close.tsx b/src/components/Icons/Close/Close.tsx index 0e7dab7..12214de 100644 --- a/src/components/Icons/Close/Close.tsx +++ b/src/components/Icons/Close/Close.tsx @@ -9,11 +9,11 @@ const CloseIcon = () => { > ); diff --git a/src/components/Icons/Hamburger/Hamburger.module.scss b/src/components/Icons/Hamburger/Hamburger.module.scss index f38df4e..9965c5e 100644 --- a/src/components/Icons/Hamburger/Hamburger.module.scss +++ b/src/components/Icons/Hamburger/Hamburger.module.scss @@ -2,6 +2,7 @@ .icon { position: relative; + width: 100%; &, &::before, @@ -15,7 +16,6 @@ border: fun.convert-px(1) solid var(--color-primary-darker); border-radius: fun.convert-px(3); display: block; - width: var(--btn-size, fun.convert-px(50)); height: fun.convert-px(7); margin: auto; transition: all 0.25s ease-in-out 0s, transform 0.4s ease-in 0s; @@ -26,6 +26,7 @@ content: ""; position: absolute; left: fun.convert-px(-1); + right: fun.convert-px(-1); } &::before { diff --git a/src/components/MainNav/MainNav.module.scss b/src/components/MainNav/MainNav.module.scss index 0d0d6c0..3ced245 100644 --- a/src/components/MainNav/MainNav.module.scss +++ b/src/components/MainNav/MainNav.module.scss @@ -3,13 +3,13 @@ @use "@styles/abstracts/placeholders"; .wrapper { - --icon-size: #{fun.convert-px(25)}; + --icon-size: #{fun.convert-px(30)}; display: flex; flex-flow: column nowrap; - place-items: center; + align-items: center; height: var(--btn-size); - width: var(--btn-size); + width: calc(var(--btn-size) * 1.2); background: var(--color-bg); position: relative; @@ -19,8 +19,6 @@ } @include mix.dimensions("md") { - --icon-size: #{fun.convert-px(30)}; - width: unset; height: unset; } @@ -28,17 +26,22 @@ } .label { + --draw-border-thickness: #{fun.convert-px(5)}; + --draw-border-color1: var(--color-primary-light); + --draw-border-color2: var(--color-primary-lighter); + + flex: 1; display: flex; flex-flow: column nowrap; width: 100%; - height: 100%; + padding: var(--spacing-2xs); &:hover { span, span::before, span::after { background: var(--color-primary-lighter); - box-shadow: 2px 2px 0 0 var(--color-shadow); + box-shadow: fun.convert-px(2) fun.convert-px(2) 0 0 var(--color-shadow); } } @@ -54,7 +57,7 @@ // centered checkbox = btn-size - approximated checkbox size / 2 top: calc((var(--btn-size) - #{fun.convert-px(14)}) / 2); - left: calc((var(--btn-size) - #{fun.convert-px(14)}) / 2); + left: calc(((var(--btn-size) * 1.2) - #{fun.convert-px(14)}) / 2); opacity: 0; cursor: pointer; @@ -64,14 +67,14 @@ span::before, span::after { background: var(--color-primary-lighter); - box-shadow: 2px 2px 0 0 var(--color-shadow); + box-shadow: fun.convert-px(2) fun.convert-px(2) 0 0 var(--color-shadow); } } } &:focus { ~ .label { - outline: var(--color-primary-light) solid fun.convert-px(3); + @extend %draw-borders; } } @@ -141,7 +144,9 @@ } .link { - --draw-border-width: #{fun.convert-px(4)}; + --draw-border-thickness: #{fun.convert-px(4)}; + --draw-border-color1: var(--color-primary-light); + --draw-border-color2: var(--color-primary-lighter); display: block; min-width: fun.convert-px(85); @@ -163,35 +168,7 @@ &:hover, &:focus { - background-image: linear-gradient( - to right, - var(--color-primary-lighter), - var(--color-primary-light) - ), - linear-gradient( - to bottom, - var(--color-primary-light), - var(--color-primary-lighter) - ), - linear-gradient( - to left, - var(--color-primary-lighter), - var(--color-primary-light) - ), - linear-gradient( - to top, - var(--color-primary-light), - var(--color-primary-lighter) - ); - background-position: top left, top right, bottom right, bottom left; - background-size: 100% var(--draw-border-width), - var(--draw-border-width) 100%, 100% var(--draw-border-width), - var(--draw-border-width) 100%; - color: var(--color-primary-light); - - :global { - animation: draw-borders 0.8s linear 1 0s; - } + @extend %draw-borders; } &:focus { @@ -199,27 +176,10 @@ } &:active { - background-image: linear-gradient( - to right, - var(--color-primary-light), - var(--color-primary-dark) - ), - linear-gradient( - to bottom, - var(--color-primary-dark), - var(--color-primary-light) - ), - linear-gradient( - to left, - var(--color-primary-light), - var(--color-primary-dark) - ), - linear-gradient( - to top, - var(--color-primary-dark), - var(--color-primary-light) - ); - background-position: top left, top right, bottom right, bottom left; + --draw-border-color1: var(--color-primary-dark); + --draw-border-color2: var(--color-primary-light); + + @extend %draw-borders; } &.current { @@ -232,58 +192,23 @@ ), linear-gradient(to top, transparent, transparent); background-position: top left, top right, bottom center, bottom left; - background-size: 0% var(--draw-border-width), var(--draw-border-width) 0%, - 60% var(--draw-border-width), var(--draw-border-width) 0%; - transition: all 0.3s linear 0s; + background-size: 0% var(--draw-border-thickness), + var(--draw-border-thickness) 0%, 60% var(--draw-border-thickness), + var(--draw-border-thickness) 0%; &:hover, &:focus { - background-image: linear-gradient( - to right, - var(--color-primary-lighter), - var(--color-primary-light) - ), - linear-gradient( - to bottom, - var(--color-primary-light), - var(--color-primary-lighter) - ), - linear-gradient( - to left, - var(--color-primary-lighter), - var(--color-primary-light) - ), - linear-gradient( - to top, - var(--color-primary-light), - var(--color-primary-lighter) - ); - background-size: 100% var(--draw-border-width), - var(--draw-border-width) 100%, 100% var(--draw-border-width), - var(--draw-border-width) 100%; + --draw-border-color1: var(--color-primary-light); + --draw-border-color2: var(--color-primary-lighter); + + @extend %draw-borders; } &:active { - background-image: linear-gradient( - to right, - var(--color-primary-light), - var(--color-primary-dark) - ), - linear-gradient( - to bottom, - var(--color-primary-dark), - var(--color-primary-light) - ), - linear-gradient( - to left, - var(--color-primary-light), - var(--color-primary-dark) - ), - linear-gradient( - to top, - var(--color-primary-dark), - var(--color-primary-light) - ); + --draw-border-color1: var(--color-primary-dark); + --draw-border-color2: var(--color-primary-light); + + @extend %draw-borders; } } } diff --git a/src/components/Toolbar/Toolbar.module.scss b/src/components/Toolbar/Toolbar.module.scss index 408d769..debb3b7 100644 --- a/src/components/Toolbar/Toolbar.module.scss +++ b/src/components/Toolbar/Toolbar.module.scss @@ -2,7 +2,7 @@ @use "@styles/abstracts/mixins" as mix; .wrapper { - --btn-size: #{fun.convert-px(50)}; + --btn-size: #{fun.convert-px(60)}; display: flex; flex-flow: row wrap; 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; + } +} 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") { -- cgit v1.2.3