[Summary view] [Print] [Text view]

   1  // Select
   2  //
   3  // Replaces the browser default select with a custom one, mostly pulled from
   4  // https://primer.github.io/.
   5  
   6  .form-select {
   7    display: block;
   8    width: 100%;
   9    padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x;
  10    // stylelint-disable-next-line property-no-vendor-prefix
  11    -moz-padding-start: subtract($form-select-padding-x, 3px); // See https://github.com/twbs/bootstrap/issues/32636
  12    font-family: $form-select-font-family;
  13    @include font-size($form-select-font-size);
  14    font-weight: $form-select-font-weight;
  15    line-height: $form-select-line-height;
  16    color: $form-select-color;
  17    background-color: $form-select-bg;
  18    background-image: escape-svg($form-select-indicator);
  19    background-repeat: no-repeat;
  20    background-position: $form-select-bg-position;
  21    background-size: $form-select-bg-size;
  22    border: $form-select-border-width solid $form-select-border-color;
  23    @include border-radius($form-select-border-radius, 0);
  24    @include box-shadow($form-select-box-shadow);
  25    @include transition($form-select-transition);
  26    appearance: none;
  27  
  28    &:focus {
  29      border-color: $form-select-focus-border-color;
  30      outline: 0;
  31      @if $enable-shadows {
  32        @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
  33      } @else {
  34        // Avoid using mixin so we can pass custom focus shadow properly
  35        box-shadow: $form-select-focus-box-shadow;
  36      }
  37    }
  38  
  39    &[multiple],
  40    &[size]:not([size="1"]) {
  41      padding-right: $form-select-padding-x;
  42      background-image: none;
  43    }
  44  
  45    &:disabled {
  46      color: $form-select-disabled-color;
  47      background-color: $form-select-disabled-bg;
  48      border-color: $form-select-disabled-border-color;
  49    }
  50  
  51    // Remove outline from select box in FF
  52    &:-moz-focusring {
  53      color: transparent;
  54      text-shadow: 0 0 0 $form-select-color;
  55    }
  56  }
  57  
  58  .form-select-sm {
  59    padding-top: $form-select-padding-y-sm;
  60    padding-bottom: $form-select-padding-y-sm;
  61    padding-left: $form-select-padding-x-sm;
  62    @include font-size($form-select-font-size-sm);
  63    @include border-radius($form-select-border-radius-sm);
  64  }
  65  
  66  .form-select-lg {
  67    padding-top: $form-select-padding-y-lg;
  68    padding-bottom: $form-select-padding-y-lg;
  69    padding-left: $form-select-padding-x-lg;
  70    @include font-size($form-select-font-size-lg);
  71    @include border-radius($form-select-border-radius-lg);
  72  }