_select2.scss 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197
  1. // select-2 Theme
  2. .select2-container--classic{
  3. .select2-selection--single {
  4. min-height: 40px !important;
  5. }
  6. }
  7. // select2 - default
  8. .select2-container--classic,
  9. .select2-container--default {
  10. &:focus{
  11. outline: none;
  12. }
  13. // single select
  14. .select2-selection--single {
  15. min-height: 38px;
  16. padding: 5px;
  17. border: 1px solid $input-border-color;
  18. // Border color on focus
  19. &:focus{
  20. outline: 0;
  21. border-color: $primary !important;
  22. box-shadow: $input-focus-box-shadow !important;
  23. }
  24. // Select with icons scss
  25. .select2-selection__rendered {
  26. i{
  27. margin-right: 0.5rem;
  28. }
  29. }
  30. // dropdown arrow height
  31. .select2-selection__arrow{
  32. min-height: 38px !important;
  33. }
  34. }
  35. // when select container open - scss
  36. &.select2-container--open {
  37. .select2-selection--single {
  38. border-color: $primary !important;
  39. outline: 0;
  40. }
  41. }
  42. // select container - focus
  43. &.select2-container--focus {
  44. outline: 0;
  45. .select2-selection--multiple {
  46. border-color: $primary !important;
  47. outline: 0;
  48. }
  49. }
  50. // multiple select scss
  51. .select2-selection--multiple {
  52. min-height: 38px !important;
  53. border: 1px solid $input-border-color;
  54. &:focus{
  55. outline: 0;
  56. border-color: $primary !important;
  57. box-shadow: $input-focus-box-shadow !important;
  58. }
  59. // selected items bg color for multiple selection
  60. .select2-selection__choice{
  61. background-color: $primary !important;
  62. border-color: darken($primary, 10%) !important;
  63. color: $white;
  64. padding: 5px;
  65. }
  66. // font -size for selected options
  67. .select2-selection__rendered {
  68. li{
  69. // font-size: 0.9rem;
  70. .select2-search__field
  71. {
  72. margin-top: 10px;
  73. }
  74. }
  75. }
  76. .select2-selection__choice__remove{
  77. color: $white !important;
  78. float: right;
  79. margin-left: 0.5rem;
  80. }
  81. // select dropdown menu with icons
  82. i{
  83. position: relative;
  84. top: 1px;
  85. margin-right: 0.5rem;
  86. padding-left: 1px;
  87. }
  88. // Color Options for multiple selected items
  89. &[class*=bg-]{
  90. .select2-selection__choice{
  91. background-color: rgba(0,0,0,0.15) !important;
  92. border-color: rgba(0,0,0,0.2) !important;
  93. }
  94. }
  95. }
  96. .select2-results__options{
  97. .select2-results__option{
  98. i{
  99. margin-right: 0.5rem;
  100. }
  101. }
  102. }
  103. //Loading Remote Data Image Size
  104. .select2-result-repository__avatar {
  105. img {
  106. width: 50px;
  107. }
  108. }
  109. // select2 - set feather icon in options
  110. [class*="icon-"]{
  111. font-family: 'feather';
  112. }
  113. // Optional sizing
  114. // ------------------------------
  115. // Large Single select
  116. .select-lg {
  117. min-height: $input-height !important;
  118. font-size: ($font-size-lg - 0.8);
  119. margin-bottom: 0 !important;
  120. padding: 0.3rem 0.7rem;
  121. &.select2-selection--single{
  122. .select2-selection__rendered {
  123. padding-top: $input-btn-padding-y-lg - 0.9;
  124. // padding-left: 0;
  125. }
  126. .select2-selection__arrow{
  127. top: $input-btn-padding-y-lg - 0.8 !important;
  128. }
  129. }
  130. // large Multiple select
  131. &.select2-selection--multiple {
  132. padding: 0 0.2rem;
  133. .select2-selection__rendered {
  134. padding-top: 0 !important;
  135. li{
  136. font-size: ($font-size-lg - 0.8);
  137. }
  138. .select2-selection__choice {
  139. padding: 5px;
  140. }
  141. }
  142. }
  143. }
  144. // Small Single select
  145. .select-sm {
  146. min-height: $input-height-sm !important;
  147. padding: 0 $input-padding-y-xs;
  148. font-size: $font-size-xs;
  149. margin-bottom: 0 !important;
  150. line-height: $line-height-xs;
  151. // Single
  152. &.select2-selection--single {
  153. .select2-selection__arrow {
  154. top: -0.3rem !important;
  155. }
  156. }
  157. // Small Multiple select
  158. &.select2-selection--multiple {
  159. line-height: $line-height-xs - 0.2;
  160. .select2-selection__rendered{
  161. padding: 3px;
  162. li{
  163. font-size: $font-size-xs;
  164. margin-top: 2px;
  165. }
  166. }
  167. .select2-selection__choice {
  168. padding: 0 $input-padding-y-xs;
  169. }
  170. .select2-search--inline .select2-search__field {
  171. margin-top: 0;
  172. }
  173. }
  174. }
  175. }
  176. // Form-control focus color for Select2
  177. .select2{
  178. .form-control{
  179. &::focus{
  180. border-color: $primary !important;
  181. }
  182. }
  183. }