You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

184 lines
3.0 KiB

  1. select{
  2. padding: 0!important;
  3. }
  4. /**
  5. * Variables
  6. */
  7. /**
  8. * Wrapper
  9. */
  10. .combo-select {
  11. position: relative;
  12. max-width: 400px;
  13. margin-bottom: 15px;
  14. font: 100% Helvetica, Arial, Sans-serif;
  15. border: 1px #ccc solid;
  16. border-radius: 3px; }
  17. .combo-select .combo-input {
  18. margin-bottom: 0; }
  19. /**
  20. * Input field
  21. */
  22. .combo-input {
  23. -webkit-appearance: none;
  24. -moz-appearance: none;
  25. appearance: none;
  26. margin: 0;
  27. text-overflow: ellipsis;
  28. white-space: nowrap;
  29. border: none;
  30. width: 100%;
  31. box-sizing: border-box;
  32. padding: 12px;
  33. padding-right: 60px;
  34. border-radius: 3px; }
  35. .combo-input:focus {
  36. outline: none; }
  37. /**
  38. * Arrow
  39. */
  40. .combo-arrow {
  41. position: absolute;
  42. right: 0;
  43. top: 0;
  44. height: 100%;
  45. cursor: pointer;
  46. text-align: center;
  47. font-size: 14px;
  48. width: 40px;
  49. font-size: 12px;
  50. color: #999999; }
  51. .combo-arrow:before {
  52. content: " ";
  53. border-left: 5px solid transparent;
  54. border-right: 5px solid transparent;
  55. border-top: 5px solid #cccccc;
  56. display: block;
  57. width: 0;
  58. height: 0;
  59. top: 0;
  60. right: 15px;
  61. bottom: 0;
  62. position: absolute;
  63. margin: auto 0; }
  64. /**
  65. * When opened
  66. */
  67. .combo-open .combo-arrow {
  68. border-color: #51A7E8; }
  69. .combo-open .combo-arrow:before {
  70. border-top: none;
  71. border-bottom: 5px solid #cccccc; }
  72. /**
  73. * When focused
  74. */
  75. .combo-focus {
  76. box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  77. border-color: #51A7E8; }
  78. .combo-focus input {
  79. border-color: #51A7E8; }
  80. /**
  81. * Hide native select
  82. */
  83. .combo-select select {
  84. position: absolute;
  85. z-index: 1;
  86. left: 0;
  87. top: 0;
  88. width: 100%;
  89. height: 0;
  90. -webkit-appearance: none;
  91. opacity: 0; }
  92. @media only screen and (min-width: 960px) {
  93. .combo-select select {
  94. left: -1px;
  95. top: -1px;
  96. width: 0;
  97. height: 0;
  98. margin: 0; } }
  99. /**
  100. * Selected option
  101. */
  102. .option-selected {
  103. background-color: #eee; }
  104. /**
  105. * Hovered option
  106. */
  107. .option-hover {
  108. background-color: #006eab;
  109. color: #fff; }
  110. /**
  111. * Option item
  112. */
  113. .option-item {
  114. cursor: pointer;
  115. border-bottom: 1px #e3e3e3 solid; }
  116. .option-item:hover {
  117. background-color: #006eab;
  118. color: #fff; }
  119. .option-item:last-child {
  120. border-bottom: none; }
  121. /**
  122. * Disabled and optgroups
  123. */
  124. .option-group {
  125. cursor: text;
  126. font-weight: 600;
  127. background: #e1e1e1;
  128. border: 1px #ccc solid;
  129. border-width: 1px 0; }
  130. /**
  131. * Disabled
  132. */
  133. .option-disabled {
  134. opacity: 0.5; }
  135. /**
  136. * Dropdown
  137. */
  138. .combo-dropdown {
  139. position: absolute;
  140. z-index: 1;
  141. top: 100%;
  142. left: 0;
  143. min-width: 100%;
  144. max-width: 300px;
  145. max-height: 300px;
  146. margin: 0;
  147. padding: 0;
  148. display: none;
  149. overflow-y: auto;
  150. background: #fff;
  151. border: 1px solid #999999;
  152. border-radius: 0;
  153. box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  154. box-sizing: border-box; }
  155. .combo-dropdown li {
  156. list-style: none;
  157. padding: 8px 1em;
  158. margin: 0; }
  159. /**
  160. * On Active
  161. */
  162. .combo-open .combo-dropdown {
  163. display: block; }
  164. /**
  165. * Search marker
  166. */
  167. .combo-marker {
  168. text-decoration: underline; }