]>
Commit | Line | Data |
---|---|---|
f67539c2 | 1 | @use './src/styles/vendor/variables' as vv; |
11fdf7f2 | 2 | |
9f95a23c TL |
3 | /* --------------------------------------------------- |
4 | NAVBAR STYLE | |
5 | --------------------------------------------------- */ | |
11fdf7f2 | 6 | |
f67539c2 | 7 | ::ng-deep cd-navigation .cd-navbar-top { |
9f95a23c | 8 | .cd-navbar-brand { |
f67539c2 TL |
9 | background: vv.$secondary; |
10 | border-top: 4px solid vv.$primary; | |
11fdf7f2 | 11 | |
9f95a23c | 12 | &.isPwdDisplayed { |
f67539c2 | 13 | top: vv.$top-notification-height; |
9f95a23c | 14 | } |
11fdf7f2 | 15 | |
9f95a23c TL |
16 | .navbar-brand, |
17 | .navbar-brand:hover { | |
f67539c2 | 18 | color: vv.$gray-200; |
9f95a23c TL |
19 | height: auto; |
20 | padding: 0; | |
21 | } | |
11fdf7f2 | 22 | |
9f95a23c TL |
23 | .navbar-brand > img { |
24 | height: 25px; | |
25 | } | |
11fdf7f2 | 26 | |
9f95a23c TL |
27 | .navbar-toggler { |
28 | border: 0; | |
11fdf7f2 | 29 | |
9f95a23c TL |
30 | &:focus, |
31 | &:hover { | |
32 | outline: 0; | |
33 | } | |
11fdf7f2 | 34 | |
9f95a23c | 35 | .fa-navicon { |
f67539c2 | 36 | color: vv.$gray-200; |
9f95a23c TL |
37 | } |
38 | } | |
11fdf7f2 | 39 | |
9f95a23c TL |
40 | .navbar-collapse { |
41 | padding: 0; | |
42 | } | |
11fdf7f2 | 43 | |
9f95a23c | 44 | .cd-navbar-utility > .active > a { |
f67539c2 TL |
45 | background-color: vv.$primary; |
46 | color: vv.$gray-200; | |
9f95a23c TL |
47 | } |
48 | ||
49 | .cd-navbar-utility > li > .open > a, | |
50 | .cd-navbar-utility > li > .open > a:focus, | |
51 | .cd-navbar-utility > li > .open > a:hover { | |
9f95a23c | 52 | background-color: transparent; |
f67539c2 TL |
53 | border-color: transparent; |
54 | color: vv.$gray-200; | |
9f95a23c | 55 | } |
11fdf7f2 TL |
56 | } |
57 | ||
f67539c2 | 58 | .navbar-nav > li > .cd-navbar > [ngbDropdown] > a, |
9f95a23c | 59 | .navbar-nav > li > .cd-navbar > a, |
11fdf7f2 | 60 | .navbar-nav > li > a { |
f67539c2 TL |
61 | color: vv.$gray-200; |
62 | display: block; | |
11fdf7f2 | 63 | line-height: 1; |
9f95a23c | 64 | padding: 13.5px 18px !important; |
11fdf7f2 | 65 | position: relative; |
11fdf7f2 TL |
66 | text-decoration: none; |
67 | } | |
68 | ||
9f95a23c TL |
69 | .navbar-nav .nav-link, |
70 | .navbar-nav .nav-link:hover { | |
f67539c2 | 71 | color: vv.$gray-200; |
11fdf7f2 TL |
72 | } |
73 | ||
f67539c2 TL |
74 | .navbar-nav > li > .cd-navbar > [ngbDropdown] > a:hover, |
75 | .navbar-nav > li > .cd-navbar > [ngbDropdown].open > a, | |
9f95a23c TL |
76 | .navbar-nav > li > .cd-navbar > a:hover, |
77 | .navbar-nav > li > a:hover, | |
78 | .navbar-nav > li:hover { | |
f67539c2 | 79 | background-color: vv.$primary; |
11fdf7f2 TL |
80 | } |
81 | ||
f67539c2 TL |
82 | .navbar-nav > .open > .cd-navbar > [ngbDropdown] > a, |
83 | .navbar-nav > .open > .cd-navbar > [ngbDropdown] > a:hover, | |
9f95a23c TL |
84 | .navbar-nav > .open > .cd-navbar > a, |
85 | .navbar-nav > .open > .cd-navbar > a:focus, | |
86 | .navbar-nav > .open > .cd-navbar > a:hover, | |
87 | .navbar-nav > .open > .cd-navbar > li > a:focus, | |
11fdf7f2 TL |
88 | .navbar-nav > .open > a, |
89 | .navbar-nav > .open > a:focus, | |
90 | .navbar-nav > .open > a:hover { | |
11fdf7f2 | 91 | background-color: transparent; |
f67539c2 TL |
92 | border-color: transparent; |
93 | color: vv.$gray-200; | |
11fdf7f2 TL |
94 | } |
95 | ||
f67539c2 | 96 | @media (min-width: vv.$screen-md-min) { |
9f95a23c | 97 | .cd-navbar-utility { |
11fdf7f2 | 98 | border-bottom: 0; |
f67539c2 | 99 | font-size: 1.1rem; |
11fdf7f2 TL |
100 | position: absolute; |
101 | right: 0; | |
102 | top: 0; | |
103 | } | |
104 | } | |
9f95a23c | 105 | |
f67539c2 | 106 | @media (max-width: vv.$screen-sm-max) { |
11fdf7f2 TL |
107 | .navbar-nav { |
108 | margin: 0; | |
109 | ||
110 | .fa { | |
111 | margin-right: 0.5em; | |
112 | } | |
11fdf7f2 | 113 | |
9f95a23c | 114 | .open .dropdown-menu { |
f67539c2 | 115 | background-color: vv.$primary; |
9f95a23c | 116 | border: 0; |
9f95a23c | 117 | padding-bottom: 0; |
f67539c2 | 118 | padding-top: 0; |
9f95a23c | 119 | } |
11fdf7f2 | 120 | |
9f95a23c | 121 | .open .dropdown-menu > li > a { |
f67539c2 | 122 | color: vv.$gray-200; |
9f95a23c | 123 | padding: 5px 15px 5px 35px; |
9f95a23c | 124 | } |
11fdf7f2 | 125 | |
9f95a23c | 126 | .open .dropdown-menu > .active > a { |
f67539c2 | 127 | background-color: vv.$primary; |
9f95a23c | 128 | } |
f67539c2 | 129 | } |
11fdf7f2 | 130 | |
f67539c2 TL |
131 | .navbar-nav > li > a:hover { |
132 | background-color: vv.$primary; | |
11fdf7f2 | 133 | } |
9f95a23c TL |
134 | } |
135 | } | |
11fdf7f2 | 136 | |
9f95a23c TL |
137 | /* --------------------------------------------------- |
138 | SIDEBAR STYLE | |
139 | --------------------------------------------------- */ | |
11fdf7f2 | 140 | |
9f95a23c TL |
141 | $sidebar-width: 200px; |
142 | ||
143 | .cd-navbar-primary .active > a, | |
144 | .cd-navbar-primary > .active > a:focus, | |
145 | .cd-navbar-primary > .active > a:hover { | |
f67539c2 | 146 | background-color: vv.$primary !important; |
9f95a23c | 147 | border: 0 !important; |
f67539c2 | 148 | color: vv.$gray-200 !important; |
9f95a23c | 149 | } |
11fdf7f2 | 150 | |
9f95a23c TL |
151 | .wrapper { |
152 | display: flex; | |
153 | width: 100%; | |
154 | ||
155 | #sidebar { | |
f67539c2 | 156 | background: vv.$secondary; |
9f95a23c | 157 | bottom: 0; |
f67539c2 | 158 | color: vv.$white; |
9f95a23c | 159 | left: 0; |
f67539c2 TL |
160 | overflow-y: auto; |
161 | position: fixed; | |
162 | top: vv.$navbar-height; | |
9f95a23c | 163 | transition: all 0.3s; |
f67539c2 TL |
164 | width: $sidebar-width; |
165 | z-index: 999; | |
9f95a23c TL |
166 | |
167 | &.active { | |
168 | margin-left: -$sidebar-width; | |
11fdf7f2 TL |
169 | } |
170 | ||
9f95a23c TL |
171 | ul { |
172 | &.component { | |
9f95a23c | 173 | margin: 0; |
f67539c2 | 174 | padding: 20px 0; |
9f95a23c TL |
175 | } |
176 | ||
177 | p { | |
f67539c2 | 178 | color: vv.$white; |
9f95a23c TL |
179 | padding: 10px; |
180 | } | |
181 | ||
182 | li a { | |
f67539c2 | 183 | color: vv.$white; |
9f95a23c | 184 | display: block; |
f67539c2 TL |
185 | font-size: 1.1em; |
186 | padding: 10px; | |
187 | padding-left: 27px; | |
188 | ||
189 | text-decoration: none; | |
9f95a23c TL |
190 | |
191 | &:hover { | |
f67539c2 TL |
192 | background: vv.$primary; |
193 | color: vv.$white; | |
9f95a23c | 194 | } |
11fdf7f2 | 195 | |
f67539c2 | 196 | > .badge { |
e306af50 TL |
197 | margin-left: 5px; |
198 | } | |
11fdf7f2 | 199 | } |
9f95a23c TL |
200 | |
201 | li.active > a, | |
202 | li > a a[aria-expanded='true'] { | |
f67539c2 | 203 | color: vv.$white; |
9f95a23c TL |
204 | } |
205 | } | |
206 | } | |
207 | ||
208 | a.dropdown-toggle { | |
209 | position: relative; | |
210 | ||
211 | &::after { | |
f67539c2 | 212 | border: 0; |
9f95a23c TL |
213 | content: '\f054'; |
214 | font-family: 'ForkAwesome'; | |
9f95a23c | 215 | font-size: 1rem; |
f67539c2 TL |
216 | position: absolute; |
217 | right: 20px; | |
9f95a23c | 218 | transition: transform 0.3s ease-in-out; |
11fdf7f2 TL |
219 | } |
220 | ||
9f95a23c TL |
221 | &[aria-expanded='true']::after { |
222 | transform: rotate(90deg); | |
11fdf7f2 TL |
223 | } |
224 | } | |
9f95a23c TL |
225 | |
226 | ul ul a { | |
f67539c2 | 227 | background: lighten(vv.$secondary, 10); |
9f95a23c | 228 | font-size: 0.9em !important; |
f67539c2 | 229 | padding-left: 40px !important; |
9f95a23c TL |
230 | } |
231 | ||
232 | .cd-navbar-primary a:focus { | |
233 | outline: none; | |
234 | } | |
235 | ||
236 | ngx-simplebar { | |
237 | height: 100%; | |
238 | } | |
239 | } | |
240 | ||
241 | /* --------------------------------------------------- | |
242 | CONTENT STYLE | |
243 | --------------------------------------------------- */ | |
244 | ||
245 | #content { | |
9f95a23c | 246 | bottom: 0; |
f67539c2 | 247 | position: absolute; |
9f95a23c | 248 | right: 0; |
f67539c2 TL |
249 | top: vv.$navbar-height; |
250 | transition: all 0.3s; | |
251 | width: calc(100% - #{$sidebar-width}); | |
9f95a23c TL |
252 | |
253 | &.active { | |
254 | width: 100vw; | |
255 | } | |
256 | } | |
257 | ||
258 | /* --------------------------------------------------- | |
f6b5b4d7 | 259 | topNotification settings |
9f95a23c | 260 | --------------------------------------------------- */ |
9f95a23c | 261 | |
f6b5b4d7 TL |
262 | @for $i from 1 through 2 { |
263 | :host.top-notification-#{$i} { | |
264 | .cd-navbar-top .cd-navbar-brand { | |
f67539c2 | 265 | top: vv.$top-notification-height * $i; |
f6b5b4d7 | 266 | } |
9f95a23c | 267 | |
f6b5b4d7 | 268 | #sidebar { |
f67539c2 | 269 | top: vv.$navbar-height + vv.$top-notification-height * $i; |
f6b5b4d7 TL |
270 | } |
271 | ||
272 | #content { | |
f67539c2 | 273 | top: vv.$navbar-height + vv.$top-notification-height * $i; |
f6b5b4d7 | 274 | } |
9f95a23c | 275 | |
f6b5b4d7 | 276 | cd-notifications-sidebar { |
f67539c2 | 277 | top: vv.$navbar-height + vv.$top-notification-height * $i + 10px; |
f6b5b4d7 | 278 | } |
9f95a23c | 279 | } |
11fdf7f2 | 280 | } |