]>
Commit | Line | Data |
---|---|---|
11fdf7f2 | 1 | /* You can add global styles to this file, and also import other style files */ |
11fdf7f2 | 2 | @import 'defaults'; |
9f95a23c TL |
3 | |
4 | // Angular2-Tree Component | |
5 | @import '~angular-tree-component/dist/angular-tree-component.css'; | |
6 | ||
7 | // Fork-Awesome | |
8 | $fa-font-path: '~fork-awesome/fonts'; | |
9 | $font-family-icon: 'ForkAwesome'; | |
10 | ||
11 | // Bootstrap | |
12 | $theme-colors: ( | |
13 | 'primary': $color-primary, | |
14 | 'secondary': $color-accent, | |
15 | 'dark': $color-mild-gray | |
16 | ); | |
17 | ||
18 | $font-family-sans-serif: 'Helvetica Neue', Helvetica, Arial, 'Noto Sans', sans-serif, | |
19 | 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; | |
20 | ||
21 | $badge-font-size: 1rem; | |
22 | $form-feedback-font-size: 100%; | |
23 | $popover-max-width: 350px; | |
24 | ||
25 | @import '~bootstrap/scss/bootstrap'; | |
26 | @import '~fork-awesome/scss/fork-awesome'; | |
11fdf7f2 TL |
27 | @import 'app/ceph/dashboard/info-card/info-card-popover.scss'; |
28 | ||
9f95a23c TL |
29 | /* Reset checkbox success color */ |
30 | .was-validated .custom-control-input:valid, | |
31 | .custom-control-input.is-valid { | |
32 | ~ .custom-control-label { | |
33 | color: initial; | |
34 | } | |
35 | ||
36 | &:checked ~ .custom-control-label::before { | |
37 | border-color: $custom-control-indicator-checked-border-color; | |
38 | background-color: $component-active-bg; | |
39 | } | |
40 | ||
41 | ~ .custom-control-label::before { | |
42 | border-color: $custom-control-indicator-border-color; | |
43 | } | |
44 | ||
45 | &:focus ~ .custom-control-label::before { | |
46 | box-shadow: $custom-control-indicator-focus-box-shadow; | |
47 | } | |
48 | ||
49 | &:focus:not(:checked) ~ .custom-control-label::before { | |
50 | border-color: $custom-control-indicator-focus-border-color; | |
51 | } | |
52 | } | |
53 | ||
11fdf7f2 TL |
54 | /* Basics */ |
55 | html { | |
56 | background-color: $color-app-bg; | |
57 | } | |
58 | html, | |
59 | body { | |
60 | width: 100%; | |
61 | height: 100%; | |
62 | font-size: 12px; | |
63 | } | |
11fdf7f2 TL |
64 | h1 { |
65 | letter-spacing: -1px; | |
66 | font-size: 2em; | |
67 | } | |
68 | h2 { | |
69 | letter-spacing: -1px; | |
70 | font-size: 1.833em; | |
71 | } | |
72 | h3 { | |
73 | display: block; | |
74 | font-size: 1.583em; | |
75 | font-weight: 400; | |
76 | } | |
77 | h4 { | |
78 | font-size: 1.5em; | |
79 | line-height: normal; | |
80 | } | |
81 | option { | |
82 | font-weight: normal; | |
83 | font-style: normal; | |
84 | } | |
9f95a23c | 85 | |
11fdf7f2 | 86 | .full-height { |
9f95a23c TL |
87 | height: 100vh; |
88 | } | |
89 | .full-width { | |
90 | width: 100vw; | |
11fdf7f2 TL |
91 | } |
92 | .vertical-align { | |
93 | display: flex; | |
94 | align-items: center; | |
95 | } | |
9f95a23c TL |
96 | .horizontal-align { |
97 | display: flex; | |
98 | justify-content: center; | |
99 | } | |
11fdf7f2 TL |
100 | .loading { |
101 | position: absolute; | |
102 | top: 50%; | |
103 | left: 50%; | |
104 | } | |
105 | .margin-right-md { | |
106 | margin-right: 15px; | |
107 | } | |
108 | .no-border { | |
109 | border: 0px; | |
110 | box-shadow: 0px 0px 0px !important; | |
111 | } | |
112 | .italic { | |
113 | font-style: italic; | |
114 | } | |
115 | .bold { | |
116 | font-weight: bold; | |
117 | } | |
118 | .text-right { | |
119 | text-align: right; | |
120 | } | |
121 | .text-monospace { | |
122 | font-family: monospace; | |
123 | } | |
9f95a23c TL |
124 | .text-pre { |
125 | white-space: pre-wrap; | |
126 | } | |
11fdf7f2 TL |
127 | |
128 | /* Buttons */ | |
9f95a23c TL |
129 | .btn-light { |
130 | background-color: $color-solid-white !important; | |
131 | border-color: $color-input-border !important; | |
132 | ||
133 | &:hover { | |
134 | background-color: $color-soft-gray !important; | |
135 | border-color: $color-input-border-hover !important; | |
136 | } | |
137 | } | |
138 | ||
139 | // We have some inputs that don't have a corresponding formControlName, | |
140 | // to be able to get the same styling and no JS errors we need use a different | |
141 | // class name | |
142 | .cd-form-control { | |
143 | @extend .form-control; | |
144 | } | |
145 | ||
11fdf7f2 TL |
146 | .btn { |
147 | &, | |
148 | &:active, | |
149 | &.active { | |
150 | &:focus, | |
151 | &.focus { | |
152 | outline: 0; | |
153 | } | |
154 | } | |
155 | } | |
11fdf7f2 TL |
156 | .btn-primary .badge { |
157 | color: $color-primary; | |
158 | background-color: $color-button-badge; | |
159 | } | |
11fdf7f2 | 160 | .btn-group > .btn > i.fa, |
9f95a23c | 161 | .cd-datatable-actions button.btn i.fa { |
11fdf7f2 | 162 | /** Add space between icon and text */ |
9f95a23c | 163 | margin-right: 5px; |
11fdf7f2 TL |
164 | } |
165 | ||
166 | /* Dropdown */ | |
167 | .dropdown-menu { | |
168 | min-width: 50px; | |
169 | z-index: 999999; | |
170 | } | |
171 | .dropdown-menu > li > a { | |
172 | color: $color-dropdown-menu; | |
173 | cursor: pointer; | |
174 | } | |
175 | .dropdown-menu > li > a > i.fa { | |
176 | /** Add space between icon and text */ | |
9f95a23c | 177 | margin-right: 5px; |
11fdf7f2 TL |
178 | } |
179 | .dropdown-menu > .active > a { | |
180 | color: $color-dropdown-active-text; | |
181 | background-color: $color-dropdown-active-bg; | |
182 | ||
183 | &, | |
184 | &:hover, | |
185 | &:focus { | |
186 | background-color: darken($color-dropdown-active-bg, 10); | |
187 | } | |
188 | } | |
9f95a23c | 189 | .dataTables_wrapper .dropdown-menu > li.dropdown-divider { |
11fdf7f2 TL |
190 | cursor: auto; |
191 | } | |
192 | ||
193 | /* Grid */ | |
194 | .container, | |
195 | .container-fluid { | |
9f95a23c TL |
196 | padding-left: 30px !important; |
197 | padding-right: 30px !important; | |
11fdf7f2 TL |
198 | } |
199 | .row { | |
200 | margin-left: -30px; | |
201 | margin-right: -30px; | |
202 | } | |
203 | .col-lg-1, | |
204 | .col-lg-10, | |
205 | .col-lg-11, | |
206 | .col-lg-12, | |
207 | .col-lg-2, | |
208 | .col-lg-3, | |
209 | .col-lg-4, | |
210 | .col-lg-5, | |
211 | .col-lg-6, | |
212 | .col-lg-7, | |
213 | .col-lg-8, | |
214 | .col-lg-9, | |
215 | .col-md-1, | |
216 | .col-md-10, | |
217 | .col-md-11, | |
218 | .col-md-12, | |
219 | .col-md-2, | |
220 | .col-md-3, | |
221 | .col-md-4, | |
222 | .col-md-5, | |
223 | .col-md-6, | |
224 | .col-md-7, | |
225 | .col-md-8, | |
226 | .col-md-9, | |
227 | .col-sm-1, | |
228 | .col-sm-10, | |
229 | .col-sm-11, | |
230 | .col-sm-12, | |
231 | .col-sm-2, | |
232 | .col-sm-3, | |
233 | .col-sm-4, | |
234 | .col-sm-5, | |
235 | .col-sm-6, | |
236 | .col-sm-7, | |
237 | .col-sm-8, | |
238 | .col-sm-9, | |
9f95a23c TL |
239 | .col-1, |
240 | .col-10, | |
241 | .col-11, | |
242 | .col-12, | |
243 | .col-2, | |
244 | .col-3, | |
245 | .col-4, | |
246 | .col-5, | |
247 | .col-6, | |
248 | .col-7, | |
249 | .col-8, | |
250 | .col-9 { | |
11fdf7f2 TL |
251 | padding-left: 30px; |
252 | padding-right: 30px; | |
253 | } | |
11fdf7f2 TL |
254 | tags-input .tags { |
255 | border-radius: 4px; | |
256 | border: 1px solid $color-tags-border; | |
257 | box-shadow: inset 0 1px 1px $color-tags-box-shadow; | |
258 | } | |
9f95a23c TL |
259 | uib-accordion .card-title, |
260 | .card .accordion-title { | |
11fdf7f2 TL |
261 | font-size: 14px !important; |
262 | } | |
9f95a23c TL |
263 | .card-header { |
264 | font-size: 1.3em; | |
11fdf7f2 | 265 | } |
9f95a23c TL |
266 | .card-body h2:first-child { |
267 | margin-top: 0; | |
11fdf7f2 TL |
268 | } |
269 | .disabled { | |
270 | pointer-events: none; | |
271 | } | |
9f95a23c TL |
272 | .clickable, |
273 | a { | |
11fdf7f2 TL |
274 | cursor: pointer; |
275 | } | |
9f95a23c TL |
276 | :invalid .has-error-btn, |
277 | :invalid .has-error-btn:disabled:hover { | |
11fdf7f2 TL |
278 | background-color: $color-error-btn-bg; |
279 | border-color: $color-error-btn-border; | |
280 | } | |
281 | /* If javascript is disabled. */ | |
282 | .noscript { | |
283 | padding-top: 5em; | |
284 | } | |
285 | .noscript p { | |
286 | color: $color-noscript-text; | |
287 | } | |
11fdf7f2 | 288 | /* Forms */ |
9f95a23c TL |
289 | .required::after { |
290 | color: $color-required-text; | |
291 | content: '*'; | |
292 | font-size: 14px; | |
11fdf7f2 | 293 | padding-left: 4px; |
11fdf7f2 | 294 | } |
9f95a23c TL |
295 | |
296 | .form-footer { | |
297 | width: 100%; | |
298 | display: flex; | |
299 | } | |
300 | ||
11fdf7f2 TL |
301 | .form-control { |
302 | display: table-cell; | |
303 | ||
304 | &:focus { | |
305 | border-color: rgba($color-primary, 0.8); | |
306 | outline: 0; | |
307 | box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px 2px rgba($color-primary, 0.5); | |
308 | } | |
309 | } | |
9f95a23c TL |
310 | |
311 | .custom-checkbox { | |
312 | padding-top: 7px; | |
313 | } | |
314 | ||
315 | .cd-col-form { | |
316 | @extend .col-12; | |
317 | @extend .col-lg-8; | |
318 | @extend .col-xl-6; | |
319 | } | |
320 | ||
321 | .cd-col-form-label { | |
322 | @extend .col-form-label; | |
323 | @extend .col-sm-4; | |
324 | @extend .col-md-4; | |
325 | @extend .col-lg-3; | |
326 | } | |
327 | ||
328 | .cd-col-form-input { | |
329 | @extend .col-sm-8; | |
330 | @extend .col-md-8; | |
331 | @extend .col-lg-9; | |
332 | } | |
333 | ||
334 | .cd-col-form-offset { | |
335 | @extend .offset-sm-4; | |
336 | @extend .offset-lg-3; | |
337 | @extend .cd-col-form-input; | |
338 | } | |
339 | ||
340 | cd-modal { | |
341 | .cd-col-form-label { | |
342 | @extend .col-lg-4; | |
343 | } | |
344 | ||
345 | .cd-col-form-input { | |
346 | @extend .col-lg-8; | |
347 | } | |
348 | ||
349 | .cd-col-form-offset { | |
350 | @extend .offset-lg-4; | |
351 | } | |
352 | } | |
353 | ||
354 | /* Card */ | |
355 | .card-footer button.btn:not(:first-child) { | |
11fdf7f2 TL |
356 | margin-left: 5px; |
357 | } | |
358 | /* Modal dialog */ | |
359 | .modal-footer button.btn:not(:first-child) { | |
360 | margin-left: 5px; | |
361 | } | |
11fdf7f2 TL |
362 | .nav-tabs { |
363 | margin-bottom: 15px; | |
364 | } | |
365 | /* Icons */ | |
366 | .ceph-icon { | |
367 | background: url('assets/Ceph_Logo_Stacked_RGB_120411_fa_228x228.png'); | |
368 | } | |
369 | .prometheus-icon { | |
370 | background: url('assets/prometheus_logo.svg'); | |
371 | } | |
372 | .custom-icon { | |
373 | padding: 10px; | |
9f95a23c | 374 | margin-right: 8px; |
11fdf7f2 TL |
375 | background-clip: padding-box; |
376 | background-size: contain; | |
377 | background-repeat: no-repeat; | |
378 | } | |
379 | /* Notification icons */ | |
380 | .toast-message .custom-icon { | |
381 | /* Display icons in white, regardless of their origin color. */ | |
382 | filter: brightness(0) invert(1); | |
383 | -webkit-filter: brightness(0) invert(1); | |
384 | -moz-filter: brightness(0) invert(1); | |
385 | -o-filter: brightness(0) invert(1); | |
386 | -ms-filter: brightness(0) invert(1); | |
387 | } | |
388 | /* Block UI */ | |
389 | .block-ui-wrapper { | |
390 | background: $color-transparent-black !important; | |
391 | } | |
392 | ||
11fdf7f2 TL |
393 | .tooltip-wide .tooltip-inner { |
394 | width: 400px; | |
395 | } | |
396 | ||
397 | .tooltip-inner { | |
398 | background-color: white; | |
399 | border: 1px solid grey; | |
400 | color: #333; | |
401 | font-size: 1.1em; | |
402 | } | |
81eedcae TL |
403 | |
404 | .toast-message > ul { | |
405 | padding-left: 1em; | |
406 | margin: 0; | |
407 | } | |
9f95a23c TL |
408 | |
409 | .cd-header, | |
410 | legend { | |
411 | @extend .pb-1; | |
412 | @extend .mt-4; | |
413 | @extend .mb-4; | |
414 | @extend .border-bottom; | |
415 | } | |
416 | ||
417 | @include media-breakpoint-up(sm) { | |
418 | .col-form-label { | |
419 | text-align: right; | |
420 | } | |
421 | } | |
422 | ||
423 | .col-form-label { | |
424 | font-weight: 700; | |
425 | } | |
426 | ||
427 | // Firefox is adding a white background-coor in these components | |
428 | cd-submit-button { | |
429 | background-color: transparent !important; | |
430 | } | |
431 | ||
432 | // All '.fa' icons will have fixed width | |
433 | .fa { | |
434 | @extend .fa-fw; | |
435 | } | |
436 | ||
437 | pre { | |
438 | @extend .card; | |
439 | @extend .bg-light; | |
440 | @extend .p-2; | |
441 | // @extend my-2; | |
442 | } | |
443 | ||
444 | bfv-messages { | |
445 | display: none; | |
446 | } | |
447 | ||
448 | // Display error message in 'input-group' form fields. | |
449 | // https://github.com/twbs/bootstrap/issues/23454 | |
450 | // https://github.com/adrianhurt/play-bootstrap/issues/118 | |
451 | .form-group.has-error .invalid-feedback { | |
452 | display: block; | |
453 | } | |
454 | ||
455 | //Displaying the password strength | |
456 | .password-strength-level { | |
457 | flex: 100%; | |
458 | margin-top: 2px; | |
459 | .weak, | |
460 | .ok, | |
461 | .strong, | |
462 | .very-strong { | |
463 | border-radius: 0.25rem; | |
464 | height: 13px; | |
465 | } | |
466 | ||
467 | .weak { | |
468 | width: 25%; | |
469 | background: $color-solid-red; | |
470 | } | |
471 | .ok { | |
472 | width: 50%; | |
473 | background: $color-bright-yellow; | |
474 | } | |
475 | .strong { | |
476 | width: 75%; | |
477 | background: $color-bright-green; | |
478 | } | |
479 | .very-strong { | |
480 | width: 100%; | |
481 | background: $color-green; | |
482 | } | |
483 | } | |
484 | ||
485 | // Custom badges. | |
486 | .badge-hdd { | |
487 | color: $color-solid-white; | |
488 | background-color: $color-blue-gray; | |
489 | } | |
490 | .badge-ssd { | |
491 | color: $color-solid-white; | |
492 | background-color: $color-blue; | |
493 | } | |
494 | .badge-tab { | |
495 | color: $color-solid-gray; | |
496 | background-color: $color-light-shade-gray; | |
497 | } | |
498 | ||
499 | // angular-tree-component | |
500 | tree-root { | |
501 | tree-viewport { | |
502 | // Fix visual bug when tree is empty | |
503 | min-height: 1em; | |
504 | } | |
505 | } |