[Summary view] [Print] [Text view]

   1  // Chosen
   2  
   3  $chosen-select-padding-y: $form-select-padding-y + .21;
   4  
   5  .chosen-container.chosen-container-single {
   6    max-width: $input-max-width;
   7    font-size: $font-size-base;
   8  
   9    .chosen-single {
  10      display: inline-block;
  11      $select-border-width: ($form-select-border-width * 2);
  12      height: #{$input-height};
  13      padding: $chosen-select-padding-y ($form-select-padding-x + $form-select-indicator-padding) $chosen-select-padding-y $form-select-padding-x;
  14      line-height: 1.5;
  15      color: $form-select-color;
  16      vertical-align: middle;
  17      background: $form-select-bg $form-select-indicator no-repeat right $form-select-padding-x center;
  18      background-image: none \9;
  19      background-size: $form-select-bg-size;
  20      border: $form-select-border-width solid $form-select-border-color;
  21      box-shadow: none;
  22      appearance: none;
  23  
  24      @if $enable-rounded {
  25        border-radius: $form-select-border-radius;
  26      } @else {
  27        border-radius: 0;
  28      }
  29  
  30      abbr {
  31        top: 10px;
  32      }
  33  
  34      &:focus {
  35        @include box-shadow($form-select-focus-box-shadow);
  36        border-color: $form-select-focus-border-color;
  37        outline: none;
  38      }
  39  
  40      &:disabled {
  41        color: $form-select-disabled-color;
  42        cursor: not-allowed;
  43        background-color: $form-select-disabled-bg;
  44      }
  45  
  46      div b {
  47        background: none !important;
  48      }
  49    }
  50  
  51    .chosen-drop {
  52      background: $white;
  53      border: $form-select-border-width solid $form-select-border-color;
  54    }
  55  
  56    .chosen-results li {
  57      line-height: calc(#{$font-size-base} + .3rem);
  58    }
  59  
  60    &.chosen-container-active .chosen-single {
  61      border-bottom-right-radius: 0;
  62      border-bottom-left-radius: 0;
  63    }
  64  }
  65  
  66  .chosen-container.chosen-container-multi {
  67    .chosen-choices {
  68      max-width: $input-max-width;
  69      min-height: #{$input-height};
  70      font-size: $font-size-base;
  71      line-height: $input-line-height;
  72      background-image: $white;
  73  
  74      li.search-choice {
  75        $chosen-multi-close-width: 20px;
  76  
  77        padding: 5px (13 + $chosen-multi-close-width) 5px 10px;
  78        color: $white;
  79        background: var(--primary);
  80        border: 0;
  81        box-shadow: $cassiopeia-box-shadow;
  82  
  83        @if $enable-rounded {
  84          border-radius: $form-select-border-radius;
  85        } @else {
  86          border-radius: 0;
  87        }
  88  
  89        .search-choice-close {
  90          top: 0;
  91          right: 0;
  92          width: $chosen-multi-close-width;
  93          height: 100%;
  94          background: hsla(0, 0%, 0%, .2);
  95          background-image: none !important;
  96  
  97          &::before {
  98            position: absolute;
  99            top: 6px;
 100            right: $chosen-multi-close-width * .25;
 101            font-size: $font-size-base;
 102            color: $white;
 103            content: "\00d7";
 104          }
 105        }
 106      }
 107    }
 108  }
 109  
 110  .chosen-container-active.chosen-with-drop .chosen-single {
 111    box-shadow: none;
 112  }
 113  
 114  // TEMPORARY
 115  .chosen-container-single {
 116    width: auto !important;
 117  }
 118  
 119  // END TEMPORARY
 120  
 121  .card .chosen-container.chosen-container-single {
 122    width: 100% !important;
 123  
 124    .chosen-single {
 125      width: 100% !important;
 126    }
 127  }