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