_select.scss 2.5 KB

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