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