Gitiles
Code Review Sign In
gerrit.openbmc.org / openbmc / phosphor-webui / e67bccda1bbf79d88887e68517ddf5375b74dd81 / . / app / common / styles / directives / app-navigation.scss
blob: 2d818a965bf8caec99cf3d5e089836b14b4b8292 [file] [log] [blame]
Iftekharul Islamcd789502017-04-19 14:37:55 -0500[diff] [blame]1$nav__toplvlWidth: 125px;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]2$nav__seclvlWidth: 240px;
3
Iftekharul Islam8947e702017-07-27 10:28:07 -0500[diff] [blame]4.nav__wrapper {
5 height: 100%;
6 position: fixed;
7 top: 0;
8 z-index: 100;
9}
10
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]11// Top level navigation
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]12#nav__top-level {
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]13 background: $nav__top-level-color;
Iftekharul Islam8947e702017-07-27 10:28:07 -0500[diff] [blame]14 //height: 100%;
15 position: absolute;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]16 left: 0;
17 top: 0;
18 bottom: 0;
19 z-index: 99;
20 list-style-type: none;
21 margin: 0;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]22 padding: 0;
23 width: $nav__toplvlWidth;
Iftekharul Islam8947e702017-07-27 10:28:07 -0500[diff] [blame]24 overflow-y: auto;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]25 li {
26 margin: 0;
27 }
Michael Davis51946552017-05-01 10:30:38 -0500[diff] [blame]28 //svg icons
29 .nav-icon {
30 @include navIcons;
31 }
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]32 .button, button, a {
33 background: transparent;
34 height: auto;
35 border: 0;
36 color: $white;
37 fill: $white;
38 width: 100%;
39 padding: 1em;
40 display: block;
41 text-align: center;
42 margin-bottom: 0;
43 white-space: normal;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]44 border-radius: 0;
Michael Davis71ec7452017-04-24 16:28:57 -0500[diff] [blame]45 text-decoration: none;
Michael Davis51946552017-05-01 10:30:38 -0500[diff] [blame]46 border-top: 1px solid transparent;
47 border-bottom: 1px solid transparent;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]48 a {
49 margin-bottom: 5px;
50 }
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]51 span {
52 margin: 1em 0 0 0;
53 display: block;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]54 font-size: .9em;
Michael Davis51946552017-05-01 10:30:38 -0500[diff] [blame]55 font-weight: 700;
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]56 line-height: 1rem;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]57 }
58
59 .nav__icon-help__outer {
60 fill: transparent;
61 stroke: $white;
62 stroke-miterlimit: 10;
63 stroke-width: 1px;
64 }
65 .nav__icon-help__Inner {
66 fill: $white;
67 }
68 &:hover {
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]69 background: $nav__second-level-color;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]70 fill: $black;
Michael Davis51946552017-05-01 10:30:38 -0500[diff] [blame]71 color: $medblue;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]72 padding: 1em;
73 border-radius: 0;
Michael Davis51946552017-05-01 10:30:38 -0500[diff] [blame]74 border-top: 1px solid $medgrey;
75 border-bottom: 1px solid $medgrey;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]76 .nav__icon-help__outer {
77 stroke: $black;
78 }
79 .nav__icon-help__inner {
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]80 fill: $lightbg__primary;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]81 }
Michael Davis51946552017-05-01 10:30:38 -0500[diff] [blame]82 .nav-icon {
83 fill: $medblue;
84 color: $medblue;
85 .st0 {
86 stroke: $medblue;
87 }
88 .st1 {
89 fill: $medblue;
90 color: $medblue;
91 stroke: $medblue;
92 }
93 }
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]94 }
95 }
96 .opened {
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]97 background: $nav__second-level-color;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]98 fill: $black;
Michael Davis51946552017-05-01 10:30:38 -0500[diff] [blame]99 color: $medblue;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]100 .nav__icon-help__outer {
101 stroke: $lightbg__primary;
102 }
Michael Davis51946552017-05-01 10:30:38 -0500[diff] [blame]103 .nav-icon {
104 fill: $medblue;
105 color: $medblue;
106 .st0 {
107 stroke: $medblue;
108 }
109 .st1 {
110 fill: $medblue;
111 color: $medblue;
112 stroke: $medblue;
113 }
114 }
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]115 }
116}
117
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]118// Second Level Navigation
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]119.nav__second-level {
120 position: fixed;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]121 background: $nav__second-level-color;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]122 top: 0;
123 bottom: 0;
Iftekharul Islam8947e702017-07-27 10:28:07 -0500[diff] [blame]124 left: -245px;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]125 width: $nav__seclvlWidth;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]126 z-index: 97;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]127 padding: 0;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]128 margin: 0;
129 list-style-type: none;
Michael Davis71ec7452017-04-24 16:28:57 -0500[diff] [blame]130 @include fastTransition-all;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]131 &.opened {
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]132 left: $nav__toplvlWidth;
Michael Davis272297b2017-04-24 12:11:53 -0500[diff] [blame]133 box-shadow: 7px 0 28px -10px $darkgrey;
Michael Davis71ec7452017-04-24 16:28:57 -0500[diff] [blame]134 @include fastTransition-all;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]135 }
136 a {
Michael Davise15a9562017-03-03 14:30:24 -0600[diff] [blame]137 padding: 1.2em 1em 1.2em 1em;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]138 display: block;
139 color: $black;
140 text-decoration: none;
141 position: relative;
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]142 font-weight: 400;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]143 }
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]144
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]145 li {
146 a:after{
147 content: '\203A';
148 position: absolute;
149 font-size: 2em;
150 font-weight: 700;
151 top: 50%;
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]152 right: .6em;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]153 transform: translateY(-59%);
154 color: #4b5d78;
155 opacity: 0;
156 }
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]157 &.active {background: $white;}
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]158 &.active,
159 &:focus,
160 &:hover {
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]161 a {color: #4b5d78;}
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]162 a:after {
163 opacity: 1;
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]164 right: .3em;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]165 @include fastTransition-all;
166 }
167 }
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]168 }
Iftekharul Islam99d199f2017-03-24 15:28:25 -0500[diff] [blame]169}