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