[Summary view] [Print] [Text view]

   1  // Custom Forms
   2  
   3  .custom-select {
   4    @extend .form-select;
   5  }
   6  
   7  .form-select {
   8    max-width: $input-max-width;
   9    cursor: pointer;
  10    background: $form-select-background;
  11    background-color: $form-select-bg;
  12    border: $input-border;
  13    // var needed
  14    box-shadow: $input-box-shadow;
  15  
  16    &:focus {
  17      border-color: #000;
  18      box-shadow: $cassiopeia-input-focus-shadow;
  19    }
  20  
  21    [dir=rtl] & {
  22      padding: $form-select-padding-y $form-select-padding-x $form-select-padding-y ($form-select-padding-x + $form-select-indicator-padding);
  23      background: $form-select-background-rtl;
  24      background-color: $form-select-bg;
  25    }
  26  
  27    &[multiple] {
  28      padding: 0;
  29      background-color: $white;
  30  
  31      option {
  32        padding: $form-select-multiple-padding-y $form-select-padding-x;
  33        background-color: $white;
  34  
  35        &:checked {
  36          color: $white;
  37          background-color: var(--cassiopeia-color-primary) !important;
  38        }
  39      }
  40    }
  41  
  42    &.form-select-success,
  43    &.custom-select-success {
  44      color: $success;
  45      background-color: $success;
  46  
  47      option {
  48        color: $form-select-color;
  49        background-color: $white;
  50      }
  51    }
  52  
  53    &.form-select-danger,
  54    &.custom-select-danger {
  55      color: $danger;
  56      background-color: $danger;
  57  
  58      option {
  59        color: $form-select-color;
  60        background-color: $white;
  61      }
  62    }
  63  
  64    optgroup,
  65    option {
  66      color: var(--dark);
  67      background-color: $white;
  68    }
  69  }
  70  
  71  // Backwards compat with BS4
  72  .form-group {
  73    @extend .mb-3;
  74  }