selectize.bootstrap2.less 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
  1. /**
  2. * selectize.bootstrap2.css (v0.12.0) - Bootstrap 2 Theme
  3. * Copyright (c) 2013–2015 Brian Reavis & contributors
  4. *
  5. * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
  6. * file except in compliance with the License. You may obtain a copy of the License at:
  7. * http://www.apache.org/licenses/LICENSE-2.0
  8. *
  9. * Unless required by applicable law or agreed to in writing, software distributed under
  10. * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
  11. * ANY KIND, either express or implied. See the License for the specific language
  12. * governing permissions and limitations under the License.
  13. *
  14. * @author Brian Reavis <brian@thirdroute.com>
  15. */
  16. @import "selectize";
  17. @selectize-font-family: @baseFontFamily;
  18. @selectize-font-size: @baseFontSize;
  19. @selectize-line-height: @baseLineHeight;
  20. @selectize-color-text: @textColor;
  21. @selectize-color-highlight: rgba(255,237,40,0.4);
  22. @selectize-color-input: @inputBackground;
  23. @selectize-color-input-full: @inputBackground;
  24. @selectize-color-disabled: @inputBackground;
  25. @selectize-color-item: @btnBackgroundHighlight;
  26. @selectize-color-item-border: @btnBorder;
  27. @selectize-color-item-active: @dropdownLinkBackgroundHover;
  28. @selectize-color-item-active-text: @dropdownLinkColorHover;
  29. @selectize-color-item-active-border: darken(@selectize-color-item-active, 5%);
  30. @selectize-color-optgroup: @dropdownBackground;
  31. @selectize-color-optgroup-text: @grayLight;
  32. @selectize-color-optgroup-border: @dropdownDividerTop;
  33. @selectize-color-dropdown: @dropdownBackground;
  34. @selectize-color-dropdown-border: @inputBorder;
  35. @selectize-color-dropdown-border-top: @dropdownDividerTop;
  36. @selectize-color-dropdown-item-active: @dropdownLinkBackgroundHover;
  37. @selectize-color-dropdown-item-active-text: @dropdownLinkColorHover;
  38. @selectize-color-dropdown-item-create-active-text: @dropdownLinkColorHover;
  39. @selectize-lighten-disabled-item: 8%;
  40. @selectize-lighten-disabled-item-text: 8%;
  41. @selectize-lighten-disabled-item-border: 8%;
  42. @selectize-opacity-disabled: 0.5;
  43. @selectize-shadow-input: none;
  44. @selectize-shadow-input-focus: inset 0 1px 2px rgba(0,0,0,0.15);
  45. @selectize-border-radius: @inputBorderRadius;
  46. @selectize-padding-x: 10px;
  47. @selectize-padding-y: 7px;
  48. @selectize-padding-dropdown-item-x: @selectize-padding-x;
  49. @selectize-padding-dropdown-item-y: 3px;
  50. @selectize-padding-item-x: 3px;
  51. @selectize-padding-item-y: 1px;
  52. @selectize-margin-item-x: 3px;
  53. @selectize-margin-item-y: 3px;
  54. @selectize-caret-margin: 0;
  55. @selectize-arrow-size: 5px;
  56. @selectize-arrow-color: @black;
  57. @selectize-arrow-offset: @selectize-padding-x + 5px;
  58. @selectize-width-item-border: 1px;
  59. .selectize-dropdown {
  60. margin: 2px 0 0 0;
  61. z-index: @zindexDropdown;
  62. border: 1px solid @dropdownBorder;
  63. border-radius: @baseBorderRadius;
  64. .box-shadow(0 5px 10px rgba(0,0,0,.2));
  65. .optgroup-header {
  66. font-size: 11px;
  67. font-weight: bold;
  68. text-shadow: 0 1px 0 rgba(255,255,255,.5);
  69. text-transform: uppercase;
  70. }
  71. .optgroup:first-child:before {
  72. display: none;
  73. }
  74. .optgroup:before {
  75. content: ' ';
  76. display: block;
  77. .nav-divider();
  78. margin-left: @selectize-padding-dropdown-item-x * -1;
  79. margin-right: @selectize-padding-dropdown-item-x * -1;
  80. }
  81. [data-selectable].active {
  82. #gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));
  83. }
  84. }
  85. .selectize-dropdown-content {
  86. padding: 5px 0;
  87. }
  88. .selectize-dropdown-header {
  89. padding: @selectize-padding-dropdown-item-y * 2 @selectize-padding-dropdown-item-x;
  90. }
  91. .selectize-input {
  92. .transition(~"border linear .2s, box-shadow linear .2s");
  93. &.dropdown-active {
  94. .selectize-border-radius(@selectize-border-radius);
  95. }
  96. &.dropdown-active::before {
  97. display: none;
  98. }
  99. &.input-active, &.input-active:hover, .selectize-control.multi &.focus {
  100. background: @selectize-color-input !important;
  101. border-color: rgba(82,168,236,.8) !important;
  102. outline: 0 !important;
  103. outline: thin dotted \9 !important;
  104. .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)") !important;
  105. }
  106. }
  107. .selectize-control {
  108. &.single {
  109. .selectize-input {
  110. .buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
  111. .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
  112. &:hover {
  113. color: @grayDark;
  114. text-decoration: none;
  115. background-position: 0 -15px;
  116. .transition(background-position .1s linear);
  117. }
  118. &.disabled {
  119. background: @btnBackgroundHighlight !important;
  120. .box-shadow(none);
  121. }
  122. }
  123. }
  124. &.multi {
  125. .selectize-input {
  126. .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
  127. &.has-items {
  128. @padding-x: @selectize-padding-x - @selectize-padding-item-x;
  129. padding-left: @padding-x;
  130. padding-right: @padding-x;
  131. }
  132. }
  133. .selectize-input > div {
  134. .gradientBar(@btnBackground, @btnBackgroundHighlight, @selectize-color-item-text, none);
  135. *background-color: @selectize-color-item;
  136. border: @selectize-width-item-border solid @selectize-color-item-border;
  137. .border-radius(@baseBorderRadius);
  138. .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
  139. &.active {
  140. .box-shadow(~"0 1px 2px rgba(0,0,0,.05)");
  141. .gradientBar(@selectize-color-item-active, @selectize-color-item-active-border, @selectize-color-item-active-text, none);
  142. *background-color: @selectize-color-item-active;
  143. border: @selectize-width-item-border solid @dropdownLinkBackgroundHover;
  144. }
  145. }
  146. }
  147. }