1
  2/**
  3 * Select
  4 * --------------------------------------------------
  5 */
  6
  7.item-select {
  8  position: relative;
  9
 10  select {
 11    @include appearance(none);
 12    position: absolute;
 13    top: 0;
 14    bottom: 0;
 15    right: 0;
 16    padding: 0 ($item-padding * 3) 0 $item-padding;
 17    max-width: 65%;
 18
 19    border: none;
 20    background: $item-default-bg;
 21    color: #333;
 22
 23    // hack to hide default dropdown arrow in FF
 24    text-indent: .01px;
 25    text-overflow: '';
 26
 27    white-space: nowrap;
 28    font-size: $font-size-base;
 29
 30    cursor: pointer;
 31    direction: rtl; // right align the select text
 32  }
 33
 34  select::-ms-expand {
 35    // hide default dropdown arrow in IE
 36    display: none;
 37  }
 38
 39  option {
 40    direction: ltr;
 41  }
 42
 43  &:after {
 44    position: absolute;
 45    top: 50%;
 46    right: $item-padding;
 47    margin-top: -3px;
 48    width: 0;
 49    height: 0;
 50    border-top: 5px solid;
 51    border-right: 5px solid rgba(0, 0, 0, 0);
 52    border-left: 5px solid rgba(0, 0, 0, 0);
 53    color: #999;
 54    content: "";
 55    pointer-events: none;
 56  }
 57  &.item-light {
 58    select{
 59      background:$item-light-bg;
 60      color:$item-light-text;
 61    }
 62  }
 63  &.item-stable {
 64    select{
 65      background:$item-stable-bg;
 66      color:$item-stable-text;
 67    }
 68    &:after, .input-label{
 69      color:darken($item-stable-border,30%);
 70    }
 71  }
 72  &.item-positive {
 73    select{
 74      background:$item-positive-bg;
 75      color:$item-positive-text;
 76    }
 77    &:after, .input-label{
 78      color:$item-positive-text;
 79    }
 80  }
 81  &.item-calm {
 82    select{
 83      background:$item-calm-bg;
 84      color:$item-calm-text;
 85    }
 86    &:after, .input-label{
 87      color:$item-calm-text;
 88    }
 89  }
 90  &.item-assertive {
 91    select{
 92      background:$item-assertive-bg;
 93      color:$item-assertive-text;
 94    }
 95    &:after, .input-label{
 96      color:$item-assertive-text;
 97    }
 98  }
 99  &.item-balanced {
100    select{
101      background:$item-balanced-bg;
102      color:$item-balanced-text;
103    }
104    &:after, .input-label{
105      color:$item-balanced-text;
106    }
107  }
108  &.item-energized  {
109    select{
110      background:$item-energized-bg;
111      color:$item-energized-text;
112    }
113    &:after, .input-label{
114      color:$item-energized-text;
115    }
116  }
117  &.item-royal {
118    select{
119      background:$item-royal-bg;
120      color:$item-royal-text;
121    }
122    &:after, .input-label{
123      color:$item-royal-text;
124    }
125  }
126  &.item-dark  {
127    select{
128      background:$item-dark-bg;
129      color:$item-dark-text;
130    }
131    &:after, .input-label{
132      color:$item-dark-text;
133    }
134  }
135}
136
137select {
138  &[multiple],
139  &[size] {
140    height: auto;
141  }
142}