ceph/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_buttons.scss

   1 @use './src/styles/vendor/variables' as vv;
   2
   3 /* Reset checkbox success color */
   4 .was-validated .custom-control-input:valid,
   5 .custom-control-input.is-valid {
   6   ~ .custom-control-label {
   7     color: initial;
   8   }
   9
  10   &:checked ~ .custom-control-label::before {
  11     background-color: $component-active-bg;
  12     border-color: $custom-control-indicator-checked-border-color;
  13   }
  14
  15   ~ .custom-control-label::before {
  16     border-color: $custom-control-indicator-border-color;
  17   }
  18
  19   &:focus ~ .custom-control-label::before {
  20     box-shadow: $custom-control-indicator-focus-box-shadow;
  21   }
  22
  23   &:focus:not(:checked) ~ .custom-control-label::before {
  24     border-color: $custom-control-indicator-focus-border-color;
  25   }
  26 }
  27
  28 /* Buttons */
  29 .btn-light {
  30   background-color: vv.$white;
  31   border-color: vv.$gray-400 !important;
  32
  33   &:hover {
  34     background-color: vv.$gray-300;
  35     border-color: vv.$gray-600 !important;
  36   }
  37
  38   &:disabled {
  39     background-color: vv.$gray-200;
  40     border-color: vv.$gray-400 !important;
  41   }
  42 }
  43
  44 // We have some inputs that don't have a corresponding formControlName,
  45 // to be able to get the same styling and no JS errors we need use a different
  46 // class name
  47 .cd-form-control {
  48   @extend .form-control;
  49 }
  50
  51 .btn {
  52   &,
  53   &:active,
  54   &.active {
  55     &:focus,
  56     &.focus {
  57       outline: 0;
  58     }
  59   }
  60
  61   &.disabled {
  62     border: 0;
  63     box-shadow: none;
  64   }
  65 }
  66
  67 .btn-primary .badge {
  68   background-color: vv.$gray-200;
  69   color: vv.$primary;
  70 }
  71
  72 .btn-group > .btn > i.fa,
  73 .cd-datatable-actions button.btn i.fa {
  74   /** Add space between icon and text */
  75   margin-right: 5px;
  76 }
  77
  78 .card-footer button.btn:not(:first-child) {
  79   margin-left: 5px;
  80 }