selectize.less 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296
  1. @import "plugins/drag_drop";
  2. @import "plugins/dropdown_header";
  3. @import "plugins/optgroup_columns";
  4. @import "plugins/remove_button";
  5. // base styles
  6. @selectize-font-family: inherit;
  7. @selectize-font-smoothing: inherit;
  8. @selectize-font-size: 13px;
  9. @selectize-line-height: 18px;
  10. @selectize-color-text: #303030;
  11. @selectize-color-border: #d0d0d0;
  12. @selectize-color-highlight: rgba(125,168,208,0.2);
  13. @selectize-color-input: #fff;
  14. @selectize-color-input-full: @selectize-color-input;
  15. @selectize-color-disabled: #fafafa;
  16. @selectize-color-item: #f2f2f2;
  17. @selectize-color-item-text: @selectize-color-text;
  18. @selectize-color-item-border: #d0d0d0;
  19. @selectize-color-item-active: #e8e8e8;
  20. @selectize-color-item-active-text: @selectize-color-text;
  21. @selectize-color-item-active-border: #cacaca;
  22. @selectize-color-dropdown: #fff;
  23. @selectize-color-dropdown-border: @selectize-color-border;
  24. @selectize-color-dropdown-border-top: #f0f0f0;
  25. @selectize-color-dropdown-item-active: #f5fafd;
  26. @selectize-color-dropdown-item-active-text: #495c68;
  27. @selectize-color-dropdown-item-create-text: rgba(red(@selectize-color-text), green(@selectize-color-text), blue(@selectize-color-text), 0.5);
  28. @selectize-color-dropdown-item-create-active-text: @selectize-color-dropdown-item-active-text;
  29. @selectize-color-optgroup: @selectize-color-dropdown;
  30. @selectize-color-optgroup-text: @selectize-color-text;
  31. @selectize-lighten-disabled-item: 30%;
  32. @selectize-lighten-disabled-item-text: 30%;
  33. @selectize-lighten-disabled-item-border: 30%;
  34. @selectize-opacity-disabled: 0.5;
  35. @selectize-shadow-input: inset 0 1px 1px rgba(0,0,0,0.1);
  36. @selectize-shadow-input-focus: inset 0 1px 2px rgba(0,0,0,0.15);
  37. @selectize-border: 1px solid @selectize-color-border;
  38. @selectize-dropdown-border: 1px solid @selectize-color-dropdown-border;
  39. @selectize-border-radius: 3px;
  40. @selectize-width-item-border: 0;
  41. @selectize-max-height-dropdown: 200px;
  42. @selectize-padding-x: 8px;
  43. @selectize-padding-y: 8px;
  44. @selectize-padding-item-x: 6px;
  45. @selectize-padding-item-y: 2px;
  46. @selectize-padding-dropdown-item-x: @selectize-padding-x;
  47. @selectize-padding-dropdown-item-y: 5px;
  48. @selectize-margin-item-x: 3px;
  49. @selectize-margin-item-y: 3px;
  50. @selectize-arrow-size: 5px;
  51. @selectize-arrow-color: #808080;
  52. @selectize-arrow-offset: 15px;
  53. @selectize-caret-margin: 0 2px 0 0;
  54. @selectize-caret-margin-rtl: 0 4px 0 -2px;
  55. .selectize-border-radius (@radii) {
  56. -webkit-border-radius: @radii;
  57. -moz-border-radius: @radii;
  58. border-radius: @radii;
  59. }
  60. .selectize-unselectable () {
  61. -webkit-user-select: none;
  62. -moz-user-select: none;
  63. -ms-user-select: none;
  64. user-select: none;
  65. }
  66. .selectize-box-shadow (@shadow) {
  67. -webkit-box-shadow: @shadow;
  68. box-shadow: @shadow;
  69. }
  70. .selectize-box-sizing (@type: border-box) {
  71. -webkit-box-sizing: @type;
  72. -moz-box-sizing: @type;
  73. box-sizing: @type;
  74. }
  75. .selectize-vertical-gradient (@color-top, @color-bottom) {
  76. background-color: mix(@color-top, @color-bottom, 60%);
  77. background-image: -moz-linear-gradient(top, @color-top, @color-bottom); // FF 3.6+
  78. background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@color-top), to(@color-bottom)); // Safari 4+, Chrome 2+
  79. background-image: -webkit-linear-gradient(top, @color-top, @color-bottom); // Safari 5.1+, Chrome 10+
  80. background-image: -o-linear-gradient(top, @color-top, @color-bottom); // Opera 11.10
  81. background-image: linear-gradient(to bottom, @color-top, @color-bottom); // Standard, IE10
  82. background-repeat: repeat-x;
  83. filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@color-top),argb(@color-bottom))); // IE9 and down
  84. }
  85. .selectize-control {
  86. position: relative;
  87. }
  88. .selectize-dropdown, .selectize-input, .selectize-input input {
  89. color: @selectize-color-text;
  90. font-family: @selectize-font-family;
  91. font-size: @selectize-font-size;
  92. line-height: @selectize-line-height;
  93. -webkit-font-smoothing: @selectize-font-smoothing;
  94. }
  95. .selectize-input, .selectize-control.single .selectize-input.input-active {
  96. background: @selectize-color-input;
  97. cursor: text;
  98. display: inline-block;
  99. }
  100. .selectize-input {
  101. border: @selectize-border;
  102. padding: @selectize-padding-y @selectize-padding-x;
  103. display: inline-block;
  104. width: 100%;
  105. overflow: hidden;
  106. position: relative;
  107. z-index: 1;
  108. .selectize-box-sizing(border-box);
  109. .selectize-box-shadow(@selectize-shadow-input);
  110. .selectize-border-radius(@selectize-border-radius);
  111. .selectize-control.multi &.has-items {
  112. @padding-x: @selectize-padding-x;
  113. @padding-top: @selectize-padding-y - @selectize-padding-item-y - @selectize-width-item-border;
  114. @padding-bottom: @selectize-padding-y - @selectize-padding-item-y - @selectize-margin-item-y - @selectize-width-item-border;
  115. padding: @padding-top @padding-x @padding-bottom;
  116. }
  117. &.full {
  118. background-color: @selectize-color-input-full;
  119. }
  120. &.disabled, &.disabled * {
  121. cursor: default !important;
  122. }
  123. &.focus {
  124. .selectize-box-shadow(@selectize-shadow-input-focus);
  125. }
  126. &.dropdown-active {
  127. .selectize-border-radius(@selectize-border-radius @selectize-border-radius 0 0);
  128. }
  129. > * {
  130. vertical-align: baseline;
  131. display: -moz-inline-stack;
  132. display: inline-block;
  133. zoom: 1;
  134. *display: inline;
  135. }
  136. .selectize-control.multi & > div {
  137. cursor: pointer;
  138. margin: 0 @selectize-margin-item-x @selectize-margin-item-y 0;
  139. padding: @selectize-padding-item-y @selectize-padding-item-x;
  140. background: @selectize-color-item;
  141. color: @selectize-color-item-text;
  142. border: @selectize-width-item-border solid @selectize-color-item-border;
  143. &.active {
  144. background: @selectize-color-item-active;
  145. color: @selectize-color-item-active-text;
  146. border: @selectize-width-item-border solid @selectize-color-item-active-border;
  147. }
  148. }
  149. .selectize-control.multi &.disabled > div {
  150. &, &.active {
  151. color: lighten(desaturate(@selectize-color-item-text, 100%), @selectize-lighten-disabled-item-text);
  152. background: lighten(desaturate(@selectize-color-item, 100%), @selectize-lighten-disabled-item);
  153. border: @selectize-width-item-border solid lighten(desaturate(@selectize-color-item-border, 100%), @selectize-lighten-disabled-item-border);
  154. }
  155. }
  156. > input {
  157. &::-ms-clear {
  158. display: none;
  159. }
  160. display: inline-block !important;
  161. padding: 0 !important;
  162. min-height: 0 !important;
  163. max-height: none !important;
  164. max-width: 100% !important;
  165. margin: @selectize-caret-margin !important;
  166. text-indent: 0 !important;
  167. border: 0 none !important;
  168. background: none !important;
  169. line-height: inherit !important;
  170. -webkit-user-select: auto !important;
  171. .selectize-box-shadow(none) !important;
  172. &:focus { outline: none !important; }
  173. }
  174. }
  175. .selectize-input::after {
  176. content: ' ';
  177. display: block;
  178. clear: left;
  179. }
  180. .selectize-input.dropdown-active::before {
  181. content: ' ';
  182. display: block;
  183. position: absolute;
  184. background: @selectize-color-dropdown-border-top;
  185. height: 1px;
  186. bottom: 0;
  187. left: 0;
  188. right: 0;
  189. }
  190. .selectize-dropdown {
  191. position: absolute;
  192. z-index: 10;
  193. border: @selectize-dropdown-border;
  194. background: @selectize-color-dropdown;
  195. margin: -1px 0 0 0;
  196. border-top: 0 none;
  197. .selectize-box-sizing(border-box);
  198. .selectize-box-shadow(0 1px 3px rgba(0,0,0,0.1));
  199. .selectize-border-radius(0 0 @selectize-border-radius @selectize-border-radius);
  200. [data-selectable] {
  201. cursor: pointer;
  202. overflow: hidden;
  203. .highlight {
  204. background: @selectize-color-highlight;
  205. .selectize-border-radius(1px);
  206. }
  207. }
  208. [data-selectable], .optgroup-header {
  209. padding: @selectize-padding-dropdown-item-y @selectize-padding-dropdown-item-x;
  210. }
  211. .optgroup:first-child .optgroup-header {
  212. border-top: 0 none;
  213. }
  214. .optgroup-header {
  215. color: @selectize-color-optgroup-text;
  216. background: @selectize-color-optgroup;
  217. cursor: default;
  218. }
  219. .active {
  220. background-color: @selectize-color-dropdown-item-active;
  221. color: @selectize-color-dropdown-item-active-text;
  222. &.create {
  223. color: @selectize-color-dropdown-item-create-active-text;
  224. }
  225. }
  226. .create {
  227. color: @selectize-color-dropdown-item-create-text;
  228. }
  229. }
  230. .selectize-dropdown-content {
  231. overflow-y: auto;
  232. overflow-x: hidden;
  233. max-height: @selectize-max-height-dropdown;
  234. }
  235. .selectize-control.single .selectize-input {
  236. &, input { cursor: pointer; }
  237. &.input-active, &.input-active input { cursor: text; }
  238. &:after {
  239. content: ' ';
  240. display: block;
  241. position: absolute;
  242. top: 50%;
  243. right: @selectize-arrow-offset;
  244. margin-top: round(-1 * @selectize-arrow-size / 2);
  245. width: 0;
  246. height: 0;
  247. border-style: solid;
  248. border-width: @selectize-arrow-size @selectize-arrow-size 0 @selectize-arrow-size;
  249. border-color: @selectize-arrow-color transparent transparent transparent;
  250. }
  251. &.dropdown-active:after {
  252. margin-top: @selectize-arrow-size * -0.8;
  253. border-width: 0 @selectize-arrow-size @selectize-arrow-size @selectize-arrow-size;
  254. border-color: transparent transparent @selectize-arrow-color transparent;
  255. }
  256. }
  257. .selectize-control.rtl {
  258. &.single .selectize-input:after {
  259. left: @selectize-arrow-offset;
  260. right: auto;
  261. }
  262. .selectize-input > input {
  263. margin: @selectize-caret-margin-rtl !important;
  264. }
  265. }
  266. .selectize-control .selectize-input.disabled {
  267. opacity: @selectize-opacity-disabled;
  268. background-color: @selectize-color-disabled;
  269. }