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