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 @use './src/styles/defaults' as *;
   3
   4 // Angular2-Tree Component
   5 @import '~@circlon/angular-tree-component/css/angular-tree-component.css';
   6
   7 // Fork-Awesome
   8 $fa-font-path: '~fork-awesome/fonts';
   9 $font-family-icon: 'ForkAwesome';
  10
  11 $badge-font-size: 1rem;
  12 $form-feedback-font-size: 100%;
  13 $popover-max-width: 350px;
  14 $popover-font-size: 1rem;
  15
  16 // https://getbootstrap.com/docs/4.5/layout/grid/#variables
  17 $grid-breakpoints: (
  18   xs: 0,
  19   sm: 576px,
  20   md: 768px,
  21   lg: 992px,
  22   xl: 1200px,
  23   2xl: 1450px
  24 );
  25
  26 @import '~bootstrap/scss/bootstrap';
  27 @import '~fork-awesome/scss/fork-awesome';
  28 @import 'app/ceph/dashboard/info-card/info-card-popover.scss';
  29 @import './src/styles/bootstrap-extends';
  30
  31 @import './src/styles/ceph-custom/basics';
  32 @import './src/styles/ceph-custom/buttons';
  33 @import './src/styles/ceph-custom/dropdown';
  34 @import './src/styles/ceph-custom/forms';
  35 @import './src/styles/ceph-custom/grid';
  36 @import './src/styles/ceph-custom/icons';
  37 @import './src/styles/ceph-custom/navs';
  38 @import './src/styles/ceph-custom/toast';
  39
  40 /* If javascript is disabled. */
  41 .noscript {
  42   padding-top: 5em;
  43 }
  44
  45 // TODO: Replace (cd-)col-form-label with something more generic.
  46 @include media-breakpoint-up(sm) {
  47   .col-form-label {
  48     text-align: right;
  49   }
  50 }
  51
  52 .col-form-label {
  53   font-weight: 700;
  54 }
  55
  56 //Displaying the password strength
  57 .password-strength-level {
  58   flex: 100%;
  59   margin-top: 2px;
  60
  61   .weak,
  62   .ok,
  63   .strong,
  64   .very-strong {
  65     border-radius: 0.25rem;
  66     height: 13px;
  67   }
  68
  69   .weak {
  70     background: $danger;
  71     width: 25%;
  72   }
  73
  74   .ok {
  75     background: $warning;
  76     width: 50%;
  77   }
  78
  79   .strong {
  80     background: $success;
  81     width: 75%;
  82   }
  83
  84   .very-strong {
  85     background: darken($success, 15%);
  86     width: 100%;
  87   }
  88 }
  89
  90 // Custom badges.
  91 .badge-background-gray,
  92 .badge-hdd {
  93   background-color: $gray-600;
  94   color: $white;
  95 }
  96
  97 .badge-background-primary,
  98 .badge-ssd {
  99   background-color: $primary;
 100   color: $white;
 101 }
 102
 103 .badge-tab {
 104   background-color: $gray-200;
 105   color: $gray-700;
 106 }
 107
 108 // angular-tree-component
 109 tree-root {
 110   tree-viewport {
 111     // Fix visual bug when tree is empty
 112     min-height: 1em;
 113   }
 114 }
 115
 116 // Other
 117 tags-input .tags {
 118   border: 1px solid $gray-400;
 119   border-radius: 4px;
 120   box-shadow: inset 0 1px 1px rgba($black, 0.09);
 121 }
 122
 123 .card-header {
 124   font-size: 1.3em;
 125 }
 126
 127 .card-body h2:first-child {
 128   margin-top: 0;
 129 }
 130
 131 .disabled {
 132   pointer-events: none;
 133 }
 134
 135 .clickable,
 136 a {
 137   cursor: pointer;
 138 }