styles/directives/app-navigation.scss

2 $nav__top-level-color: $color--blue-100;
3 $nav__top-level-text-secondary: $color--grey-20;
4 $nav__second-level-text-primary: $color--teal-50;
5 $nav__second-level-text-secondary: $primary-light;
6 $nav__hover-over-outline: $color--grey-40;
12   top: 0;
13   z-index: 100;
16 // Top level navigation
17 #nav__top-level {
18   background: $nav__top-level-color;
21   top: 0;
23   list-style-type: none;
27   overflow-y: auto;
33       .nav-link{
34         color: $primary-light;
47         color: $primary-light;
51   .nav-icon {
56       fill: $primary-light;
60         max-width: inherit;
61         fill: $primary-light;
64   .nav-link {
66       font-size: 15px;
68       margin-left: 5px;
78   color: $primary-light;
83   text-align: center;
84   white-space: normal;
85   border-radius: 0;
86   text-decoration: none;
88   font-weight: normal;
89   font-size: 13px;
92     background: fade-out(#ffffff, 0.9);
93     color: $nav__top-level-text-secondary;
94     border-radius: 0;
95     border: 1px solid $nav__hover-over-outline;
99     margin-left: .3em;
100     margin-top: .6em;
108 .nav__second-level  {
109   list-style-type: none;
115   transform-origin: 0 0;
116   transition: all $duration--moderate-01 $standard-easing--expressive;
118   line-height: 0;
120     color: $primary-light;
124     white-space: normal;
125     text-decoration: none;
127     font-weight: normal;
128     font-size: .8rem;
131       background: fade-out(#ffffff, 0.9);
132       color: $nav__second-level-text-secondary;
133       border-radius: 0;
134       border-color: $nav__hover-over-outline;
139     line-height: 1.1;
143     transition: all $duration--moderate-01 $standard-easing--expressive;
151     margin-left: 17px;
155       padding-left: 50px;
163         color: $nav__second-level-text-secondary;
168         color: $nav__second-level-text-primary;