_select2.scss 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270
  1. //
  2. // Plugin: Select2
  3. //
  4. //Signle select
  5. // .select2-container--default,
  6. // .select2-selection {
  7. // &.select2-container--focus,
  8. // &:focus,
  9. // &:active {
  10. // outline: none;
  11. // }
  12. // }
  13. .select2-container--default {
  14. .select2-selection--single {
  15. border: $input-border-width solid $input-border-color;
  16. //border-radius: $input-radius;
  17. padding: ($input-padding-y * 1.25) $input-padding-x;
  18. height: $input-height;
  19. }
  20. &.select2-container--open {
  21. .select2-selection--single {
  22. border-color: lighten($primary, 25%);
  23. }
  24. }
  25. & .select2-dropdown {
  26. border: $input-border-width solid $input-border-color;
  27. //border-radius: $input-radius;
  28. }
  29. & .select2-results__option {
  30. padding: 6px 12px;
  31. user-select: none;
  32. -webkit-user-select: none;
  33. }
  34. & .select2-selection--single .select2-selection__rendered {
  35. padding-left: 0;
  36. //padding-right: 0;
  37. height: auto;
  38. margin-top: -3px;
  39. }
  40. &[dir="rtl"] .select2-selection--single .select2-selection__rendered {
  41. padding-right: 6px;
  42. padding-left: 20px;
  43. }
  44. & .select2-selection--single .select2-selection__arrow {
  45. height: 31px;
  46. right: 6px;
  47. }
  48. & .select2-selection--single .select2-selection__arrow b {
  49. margin-top: 0;
  50. }
  51. .select2-dropdown,
  52. .select2-search--inline {
  53. .select2-search__field {
  54. border: $input-border-width solid $input-border-color;
  55. &:focus {
  56. outline: none;
  57. border: $input-border-width solid $input-focus-border-color;
  58. }
  59. }
  60. }
  61. .select2-dropdown {
  62. &.select2-dropdown--below {
  63. border-top: 0;
  64. }
  65. &.select2-dropdown--above {
  66. border-bottom: 0;
  67. }
  68. }
  69. .select2-results__option {
  70. &[aria-disabled='true'] {
  71. color: $gray-600;
  72. }
  73. &[aria-selected='true'] {
  74. $color: $gray-300;
  75. background-color: $color;
  76. &,
  77. &:hover {
  78. color: color-yiq($color);
  79. }
  80. }
  81. }
  82. .select2-results__option--highlighted {
  83. $color: $primary;
  84. background-color: $color;
  85. color: color-yiq($color);
  86. &[aria-selected] {
  87. $color: darken($color, 3%);
  88. &,
  89. &:hover {
  90. background-color: $color;
  91. color: color-yiq($color);
  92. }
  93. }
  94. }
  95. //Multiple select
  96. & {
  97. .select2-selection--multiple {
  98. border: $input-border-width solid $input-border-color;
  99. min-height: $input-height;
  100. &:focus {
  101. border-color: $input-focus-border-color;
  102. }
  103. .select2-selection__rendered {
  104. padding: 0 $input-padding-x / 2 $input-padding-y;
  105. margin-bottom: -$input-padding-x / 2;
  106. li:first-child.select2-search.select2-search--inline {
  107. width: 100%;
  108. margin-left: $input-padding-x / 2;
  109. .select2-search__field {
  110. width: 100% !important;
  111. }
  112. }
  113. .select2-search.select2-search--inline {
  114. .select2-search__field {
  115. border: 0;
  116. margin-top: 6px;
  117. }
  118. }
  119. }
  120. .select2-selection__choice {
  121. background-color: $primary;
  122. border-color: darken($primary, 5%);
  123. color: color-yiq($primary);
  124. padding: 0 10px;
  125. margin-top: .31rem;
  126. }
  127. .select2-selection__choice__remove {
  128. color: rgba(255, 255, 255, 0.7);
  129. float: right;
  130. margin-left: 5px;
  131. margin-right: -2px;
  132. &:hover {
  133. color: $white;
  134. }
  135. }
  136. .text-sm &,
  137. &.text-sm {
  138. .select2-search.select2-search--inline {
  139. .select2-search__field {
  140. margin-top: 8px;
  141. }
  142. }
  143. .select2-selection__choice {
  144. margin-top: .4rem;
  145. }
  146. }
  147. }
  148. &.select2-container--focus {
  149. .select2-selection--single,
  150. .select2-selection--multiple {
  151. border-color: $input-focus-border-color;
  152. }
  153. .select2-search__field {
  154. border: 0;
  155. }
  156. }
  157. }
  158. & .select2-selection--single .select2-selection__rendered li {
  159. padding-right: 10px;
  160. }
  161. .input-group-prepend ~ & {
  162. .select2-selection {
  163. border-bottom-left-radius: 0;
  164. border-top-left-radius: 0;
  165. }
  166. }
  167. .input-group > &:not(:last-child) {
  168. .select2-selection {
  169. border-bottom-right-radius: 0;
  170. border-top-right-radius: 0;
  171. }
  172. }
  173. }
  174. // Select2 Bootstrap4 Theme overrides
  175. .select2-container--bootstrap4 {
  176. &.select2-container--focus .select2-selection {
  177. box-shadow: none;
  178. }
  179. }
  180. // text-sm / form-control-sm override
  181. select.form-control-sm ~ {
  182. .select2-container--default {
  183. font-size: $font-size-sm;
  184. }
  185. }
  186. .text-sm,
  187. select.form-control-sm ~ {
  188. .select2-container--default {
  189. .select2-selection--single {
  190. height: $input-height-sm;
  191. .select2-selection__rendered {
  192. margin-top: -.4rem;
  193. }
  194. .select2-selection__arrow {
  195. top: -.12rem;
  196. }
  197. }
  198. .select2-selection--multiple {
  199. min-height: $input-height-sm;
  200. .select2-selection__rendered {
  201. padding: 0 $input-padding-x-sm / 2 $input-padding-y-sm;
  202. margin-top: -($input-padding-x-sm / 5);
  203. li:first-child.select2-search.select2-search--inline {
  204. margin-left: $input-padding-x-sm / 2;
  205. }
  206. .select2-search.select2-search--inline {
  207. .select2-search__field {
  208. margin-top: 6px;
  209. }
  210. }
  211. }
  212. }
  213. }
  214. }
  215. // Background colors (theme colors)
  216. @each $name, $color in $theme-colors {
  217. @include select2-variant($name, $color);
  218. }
  219. // Background colors (colors)
  220. @each $name, $color in $colors {
  221. @include select2-variant($name, $color);
  222. }