hugosoucycc

[ARCHIVED] Another old source code of <hugo.soucy.cc>.
Log | Files | Refs | Submodules

commit 9f69b07c930db000379bdd9e4db813d2763db49a
parent 08d051c47caaa7beeeb0d33816336b9341d42d00
Author: Hugo Soucy <hugo.soucy@savoirfairelinux.com>
Date:   Sun,  6 Nov 2016 19:37:47 -0500

Refactor the css file for the nav.

Diffstat:
Mstatic/dev/scss/modules/_nav.scss | 242++++++++++++++++++++++++++++++++++++++++---------------------------------------
1 file changed, 123 insertions(+), 119 deletions(-)

diff --git a/static/dev/scss/modules/_nav.scss b/static/dev/scss/modules/_nav.scss @@ -1,161 +1,166 @@ // NAVIGATION - -.mod_target { - .nav-button, - .nav-button--floatright { - border:0; - display:inline-block; - text-align:center; - - &:active, - &:hover, - &:focus, - &:visited { - background:transparent; - border-bottom:0; - color:$_color_fg; - } +.nav-button, +.nav-button--floatright { + border:0; + display:inline-block; + text-align:center; + + &:active, + &:hover, + &:focus, + &:visited { + background:transparent; + border-bottom:0; + color:$_color_fg; } +} - .nav-button { - position:absolute; - right:rem(15); - top:rem(15); +.nav-button { + position:absolute; + right:rem(15); + top:rem(15); - @include breakpoint($sm) { - right:rem(20); - } + @include breakpoint($sm) { + right:rem(20); } +} - .nav-button--floatright { - float:right; - } +.nav-button--floatright { + float:right; +} + +.nav-button__text { + font-size:rem(12); + display:block; +} - .nav-button__text { - font-size:rem(12); - display:block; +.nav-button__burger { + background:$_color_fg; + display:block; + height:50px; + margin:0 auto; + position:relative; + width:50px; + + .nav-button:hover &, + .nav-button:focus & { + background:$_color_link; } - .nav-button__burger { - background:$_color_fg; - display:block; - height:50px; - margin:0 auto; - position:relative; - width:50px; + &__ico { + background:$_color_bg; + bottom:0; + display:block; + height:3px; + left:0; + margin:auto; + right:0; + position:absolute; + top:0; + width:50%; + + &:after, + &:before { + backface-visibility:hidden; + background-color:$_color_bg; + content:""; + height:100%; + position:absolute; + right:0; + top:0; + transform:translateZ(0); + transition:transform 0.3s ease 0s; + width:100%; + } - .nav-button:hover &, - .nav-button:focus & { - background:$_color_link; + &:before { + transform:translateY(-8px) rotate(0deg); } - &__ico { - background:$_color_bg; - bottom:0; - display:block; - height:3px; - left:0; - margin:auto; - right:0; - position:absolute; - top:0; - width:50%; - - &:after, - &:before { - backface-visibility:hidden; - background-color:$_color_bg; - content:""; - height:100%; - position:absolute; - right:0; - top:0; - transform:translateZ(0); - transition:transform 0.3s ease 0s; - width:100%; - } - - &:before { - transform:translateY(-8px) rotate(0deg); - } - - &:after { - transform:translateY(8px) rotate(0deg); - } + &:after { + transform:translateY(8px) rotate(0deg); } } +} - .nav__close { - @extend .nav-button; +.nav__close { + @extend .nav-button; - &, - &:visited { - color:white; - } + &, + &:visited { + color:white; + } - &__text { - @extend .nav-button__text; - } + &__text { + @extend .nav-button__text; } +} - .nav__x { - @extend .nav-button__burger; - background:#333; +.nav__x { + @extend .nav-button__burger; + background:#333; - &__ico { - @extend .nav-button__burger__ico; - height:3px; - transform:translateY(0) rotate(-45deg); + &__ico { + @extend .nav-button__burger__ico; + height:3px; + transform:translateY(0) rotate(-45deg); - &:before { - transform:translateY(0) rotate(90deg); - } + &:before { + transform:translateY(0) rotate(90deg); + } - &:after { - display:none; - } + &:after { + display:none; } } +} - .nav__panel { - background:$_color_fg; - color:$_color_bg; +.nav__panel { + background:$_color_fg; + color:$_color_bg; + + &.state--hidden, + &.state--visible { height:auto; left:0; min-height:1em; + opacity:1; position:absolute; top:0; - transform:translateY(-100%); transition:transform .25s ease-in-out; width:100%; + } - &:target { - transform:translateY(0); - } + &.state--hidden { + transform:translateY(-100%); + } - &__content { - //max-width:$_max_width; - margin:0 auto; - position:relative; - text-align:left; - width:auto; - } + &.state--visible { + transform:translateY(0); } - .nav__list { - padding:1em 0; + &__content { + margin:0 auto; + position:relative; + text-align:left; + width:auto; } +} - .nav__link { - font-size:em(16,21); +.nav__list { + padding:1em 0; +} - &, - &:visited { - color:white; - } +.nav__link { + font-size:em(16,21); + + &, + &:visited { + color:white; } } -.mod_no-target .nav__close { +.no-js .nav__close { display:none; -}- \ No newline at end of file + opacity:0; +}