ceph/src/pybind/mgr/dashboard/frontend/src/styles.scss

   1 /* You can add global styles to this file, and also import other style files */
   2 @import 'defaults';
   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';
  27 @import 'app/ceph/dashboard/info-card/info-card-popover.scss';
  28
  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
  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 }
  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 }
  85
  86 .full-height {
  87   height: 100vh;
  88 }
  89 .full-width {
  90   width: 100vw;
  91 }
  92 .vertical-align {
  93   display: flex;
  94   align-items: center;
  95 }
  96 .horizontal-align {
  97   display: flex;
  98   justify-content: center;
  99 }
 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 }
 124 .text-pre {
 125   white-space: pre-wrap;
 126 }
 127
 128 /* Buttons */
 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
 146 .btn {
 147   &,
 148   &:active,
 149   &.active {
 150     &:focus,
 151     &.focus {
 152       outline: 0;
 153     }
 154   }
 155 }
 156 .btn-primary .badge {
 157   color: $color-primary;
 158   background-color: $color-button-badge;
 159 }
 160 .btn-group > .btn > i.fa,
 161 .cd-datatable-actions button.btn i.fa {
 162   /** Add space between icon and text */
 163   margin-right: 5px;
 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 */
 177   margin-right: 5px;
 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 }
 189 .dataTables_wrapper .dropdown-menu > li.dropdown-divider {
 190   cursor: auto;
 191 }
 192
 193 /* Grid */
 194 .container,
 195 .container-fluid {
 196   padding-left: 30px !important;
 197   padding-right: 30px !important;
 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,
 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 {
 251   padding-left: 30px;
 252   padding-right: 30px;
 253 }
 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 }
 259 uib-accordion .card-title,
 260 .card .accordion-title {
 261   font-size: 14px !important;
 262 }
 263 .card-header {
 264   font-size: 1.3em;
 265 }
 266 .card-body h2:first-child {
 267   margin-top: 0;
 268 }
 269 .disabled {
 270   pointer-events: none;
 271 }
 272 .clickable,
 273 a {
 274   cursor: pointer;
 275 }
 276 :invalid .has-error-btn,
 277 :invalid .has-error-btn:disabled:hover {
 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 }
 288 /* Forms */
 289 .required::after {
 290   color: $color-required-text;
 291   content: '*';
 292   font-size: 14px;
 293   padding-left: 4px;
 294 }
 295
 296 .form-footer {
 297   width: 100%;
 298   display: flex;
 299 }
 300
 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 }
 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) {
 356   margin-left: 5px;
 357 }
 358 /* Modal dialog */
 359 .modal-footer button.btn:not(:first-child) {
 360   margin-left: 5px;
 361 }
 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;
 374   margin-right: 8px;
 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
 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 }
 403
 404 .toast-message > ul {
 405   padding-left: 1em;
 406   margin: 0;
 407 }
 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 }