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