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 .badge-cd-label-green {
 109   background-color: $green-300;
 110   color: $white;
 111 }
 112
 113 .badge-cd-label-cyan {
 114   background-color: $cyan-300;
 115   color: $white;
 116 }
 117
 118 .badge-cd-label-purple {
 119   background-color: $purple-300;
 120   color: $white;
 121 }
 122
 123 .badge-cd-label-light-blue {
 124   background-color: $light-blue-300;
 125   color: $white;
 126 }
 127
 128 .badge-cd-label-gold {
 129   background-color: $gold-300;
 130   color: $white;
 131 }
 132
 133 .badge-cd-label-light-green {
 134   background-color: $light-green-300;
 135   color: $white;
 136   font-weight: bolder;
 137 }
 138
 139 // angular-tree-component
 140 tree-root {
 141   tree-viewport {
 142     // Fix visual bug when tree is empty
 143     min-height: 1em;
 144   }
 145 }
 146
 147 // Other
 148 tags-input .tags {
 149   border: 1px solid $gray-400;
 150   border-radius: 4px;
 151   box-shadow: inset 0 1px 1px rgba($black, 0.09);
 152 }
 153
 154 .card-header {
 155   font-size: 1.3em;
 156 }
 157
 158 .card-body h2:first-child {
 159   margin-top: 0;
 160 }
 161
 162 .disabled {
 163   pointer-events: none;
 164 }
 165
 166 a {
 167   &:hover {
 168     text-decoration: underline;
 169   }
 170 }
 171
 172 .clickable,
 173 a {
 174   cursor: pointer;
 175   text-decoration: none;
 176 }
 177
 178 a.nav-link,
 179 a.btn-light {
 180   text-decoration: none;
 181 }
 182
 183 // Overrides the badge to rounded-pill
 184 .badge {
 185   @extend .badge, .rounded-pill, .mb-1;
 186 }
 187
 188 // Overriding badges to match the class name of badges in Bootstrap v5
 189 .badge-primary {
 190   @extend .badge, .bg-primary;
 191 }
 192
 193 .badge-secondary {
 194   @extend .badge, .bg-secondary;
 195 }
 196
 197 .badge-success {
 198   @extend .badge, .bg-success;
 199 }
 200
 201 .badge-danger {
 202   @extend .badge, .bg-danger;
 203 }
 204
 205 .badge-info {
 206   @extend .badge, .bg-primary;
 207 }
 208
 209 .badge-warning {
 210   @extend .badge, .bg-warning, .text-dark;
 211 }
 212
 213 .badge-light {
 214   @extend .badge, .bg-light, .text-dark;
 215 }
 216
 217 .badge-dark {
 218   @extend .badge, .bg-dark;
 219 }
 220
 221 formly-form {
 222   .ng-touched.ng-invalid {
 223     @extend .is-invalid;
 224   }
 225
 226   .ng-touched.ng-valid {
 227     @extend .is-valid;
 228   }
 229
 230   .form-label {
 231     @extend .cd-col-form-label;
 232     text-align: start;
 233     white-space: nowrap;
 234     width: fit-content;
 235
 236     span[aria-hidden='true'] {
 237       color: $danger;
 238     }
 239   }
 240 }