diff options
Diffstat (limited to 'app/common/styles/directives/app-navigation.scss')
| -rw-r--r-- | app/common/styles/directives/app-navigation.scss | 278 |
1 files changed, 128 insertions, 150 deletions
diff --git a/app/common/styles/directives/app-navigation.scss b/app/common/styles/directives/app-navigation.scss index f8f5a6f..519c3ee 100644 --- a/app/common/styles/directives/app-navigation.scss +++ b/app/common/styles/directives/app-navigation.scss @@ -1,34 +1,14 @@ -$nav__toplvlWidth: 125px; -$nav__seclvlWidth: 240px; -$nav__top-level-color: $base-01--01; -$nav__second-level-color: $base-02--06; -$nav__second-level-text-color: $base-02--01; +$nav__toplvlWidth: 240px; +$nav__top-level-color: $color--blue-100; +$nav__top-level-text-secondary: $color--grey-20; +$nav__second-level-text-primary: $color--teal-50; +$nav__second-level-text-secondary: $primary-light; +$nav__hover-over-outline: $color--grey-40; //Navigation icons -@mixin navIcons { - color: $primary-light; - fill: $primary-light; - max-height: 40px; - stroke-width: .5; - display: block; - margin: .5em auto; - .st0 { - fill: none; - stroke: $primary-light; - stroke-width: 2; - stroke-miterlimit: 10; - } - .st1 { - fill: none; - stroke: $primary-light; - stroke-width: 4; - stroke-miterlimit: 10; - } -} - .nav__wrapper { height: 100%; - position: fixed; + position: absolute; top: 0; z-index: 100; } @@ -36,158 +16,156 @@ $nav__second-level-text-color: $base-02--01; // Top level navigation #nav__top-level { background: $nav__top-level-color; - position: absolute; + position: fixed; left: 0; top: 0; bottom: 0; list-style-type: none; - margin: 0; - padding: 0; + padding: 22px 0 0 0; + margin: 130px 0 0 0; width: $nav__toplvlWidth; overflow-y: auto; - li { + >li { margin: 0; + height: 3em; + &.opened{ + height: inherit; + .nav-link{ + color: $primary-light; + } + } } > li > a, > li > button { - height: 120px; + height: 3.3em; } - //svg icons - .nav-icon { - @include navIcons; - width: 100%; - height: 100%; - svg { - width: 36px; - height: auto; + button, + a, + span { + &:hover { + &.opened{ + color: $primary-light; + } } } - .nav-icon__control, - .nav-icon__key { - svg { - width: 30px; + .nav-icon { + height: 26px; + float: left; + margin: 2px 0 0 1px; + width: 26px; + fill: $primary-light; + svg { + height: inherit; + width: 26px; + max-width: inherit; + fill: $primary-light; + } + } + .nav-link { + float: left; + font-size: 15px; + padding: 9px 0 0 7px; + margin-left: 5px; + &:focus{ + outline: 0; + } } +} + +.nav__wrapper button { + background: transparent; + border: 0; + color: $primary-light; + width: 95%; + padding: 5px 5px 9px 10px; + margin: 0 0 0 6px; + display: block; + text-align: center; + white-space: normal; + border-radius: 0; + text-decoration: none; + border: 1px solid transparent; + font-weight: normal; + font-size: 13px; + &:hover, + &:focus { + background: fade-out(#ffffff, 0.9); + color: $nav__top-level-text-secondary; + border-radius: 0; + border: 1px solid $nav__hover-over-outline; + outline: 0; + } + .icon { + margin-left: .3em; + margin-top: .6em; + } + img { + width: 2em; + height: 2em; } - .button, button, a { - background: transparent; - border: 0; +} + +.nav__second-level { + list-style-type: none; + opacity: 0; + left: $nav__toplvlWidth; + padding: 0; + margin: 0; + transform: scaleY(0); + transform-origin: 0 0; + transition: all $duration--moderate-01 $standard-easing--expressive; + overflow: hidden; + line-height: 0; + a { color: $primary-light; - fill: $primary-light; - width: 100%; - padding: 1em; - display: block; - text-align: center; - margin-bottom: 0; + width: 95%; + padding: 6px 5px 8px 50px; + margin: 0 0 0 6px; white-space: normal; - border-radius: 0; text-decoration: none; - border-top: 1px solid transparent; - border-bottom: 1px solid $border-color-02; + border: 1px solid transparent; font-weight: normal; - font-size: .9em; - line-height: 1.2; - &:hover { - background: $primary-light; - fill: $primary-dark; - color: $primary-action; - padding: 1em; + font-size: .8rem; + &:hover, + &:focus { + background: fade-out(#ffffff, 0.9); + color: $nav__second-level-text-secondary; border-radius: 0; - border-bottom: 1px solid $border-color-01; - .nav__icon-help__outer { - stroke: $primary-dark; - } - .nav__icon-help__inner { - fill: $primary-action; - } - .nav-icon { - fill: $primary-action; - color: $primary-action; - .st0 { - stroke: $primary-action; - } - .st1 { - fill: $primary-action; - color: $primary-action; - stroke: $primary-action; - } - } + border-color: $nav__hover-over-outline; + outline: 0; } } - .opened { - background: $nav__second-level-color; - fill: $primary-dark; - color: darken($primary-action, 10%); - border-bottom: 1px solid $border-color-01; - .nav-icon { - fill: $primary-action; - color: $primary-action; - .st0 { - stroke: $primary-action; - } - .st1 { - fill: $primary-action; - color: $primary-action; - stroke: $primary-action; - } + &.opened { + line-height: 1.1; + overflow: visible; + opacity: 1; + transform: scaleY(1); + transition: all $duration--moderate-01 $standard-easing--expressive; + li a{ + display:block; } } - // Second Level Navigation - .nav__second-level { - position: fixed; - background: $nav__second-level-color; - top: 0; - bottom: 0; - left: -245px; - width: $nav__seclvlWidth; - z-index: -1; - padding: 0; + li:hover + { + margin-left: 17px; margin: 0; - list-style-type: none; - display: block; - transition: left $duration--slow-01 $standard-easing--productive; - &.opened { - left: $nav__toplvlWidth; - box-shadow: 7px 0 28px -10px $base-02--02; - } - a { - padding: 1.2em 1em 1.2em 1em; - display: block; - color: $primary-dark; - text-decoration: none; - position: relative; - font-weight: 400; - text-align: left; - border-bottom: 1px solid transparent; - &:hover { - background: $primary-light; - } + padding: 0; + a{ + padding-left: 50px; } + } - li { - a:after{ - content: '\203A'; - position: absolute; - font-size: 2em; - font-weight: 700; - top: 50%; - right: .6em; - transform: translateY(-59%); - color: $nav__second-level-text-color; - opacity: 0; - } - &.active { - a {font-weight: 700;} + li { + &:focus, + &:hover { + a { + color: $nav__second-level-text-secondary; } - &.active, - &:focus, - &:hover { - a {color: $nav__second-level-text-color;} - a:after { - opacity: 1; - right: .3em; - @include fastTransition-all; - } + } + &.active { + a span { + color: $nav__second-level-text-primary; } } } |
