_select2.scss 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
  1. //
  2. // Select2
  3. //
  4. // Overwrite/Extend styles
  5. // --------------------------------------------------
  6. .select2-container {
  7. .select2-selection--single {
  8. height: $pbf-height;
  9. }
  10. .select2-dropdown {
  11. border-color: $input-border-color;
  12. @include border-bottom-radius(3px);
  13. }
  14. }
  15. .select2-container--default {
  16. .select2-selection--single {
  17. border-color: $input-border-color;
  18. border-radius: 3px;
  19. .select2-selection__rendered {
  20. padding-left: 12px;
  21. line-height: $pbf-height;
  22. .form-material & {
  23. padding-left: 0;
  24. }
  25. }
  26. .select2-selection__arrow {
  27. height: $pbf-height;
  28. }
  29. .form-material & {
  30. border: none;
  31. border-bottom: 1px solid $input-border-color;
  32. border-radius: 0;
  33. }
  34. .select2-selection__placeholder {
  35. color: $gray-600;
  36. }
  37. }
  38. .select2-selection--multiple {
  39. border-color: $input-border-color;
  40. border-radius: 3px;
  41. min-height: $pbf-height;
  42. .form-material & {
  43. border: none;
  44. border-bottom: 1px solid $input-border-color;
  45. border-radius: 0;
  46. }
  47. & .select2-selection__rendered {
  48. padding-right: 12px;
  49. padding-left: 12px;
  50. .form-material & {
  51. padding-left: 0;
  52. }
  53. }
  54. }
  55. &.select2-container--focus .select2-selection--multiple,
  56. &.select2-container--focus .select2-selection--single {
  57. border-color: $input-focus-border-color;
  58. .form-material & {
  59. border-bottom-color: $input-focus-border-color;
  60. }
  61. }
  62. .is-valid &,
  63. .is-valid &.select2-container--focus {
  64. .select2-selection--single,
  65. .select2-selection--multiple {
  66. border-color: $brand-success;
  67. }
  68. }
  69. .is-valid .form-control &,
  70. .is-valid .form-control &.select2-container--focus {
  71. .select2-selection--single,
  72. .select2-selection--multiple {
  73. border-bottom-color: $brand-success;
  74. }
  75. }
  76. .is-invalid &,
  77. .is-invalid &.select2-container--focus {
  78. .select2-selection--single,
  79. .select2-selection--multiple {
  80. border-color: $brand-danger;
  81. }
  82. }
  83. .is-invalid .form-material &,
  84. .is-invalid .form-material &.select2-container--focus {
  85. .select2-selection--single,
  86. .select2-selection--multiple {
  87. border-bottom-color: $brand-danger;
  88. }
  89. }
  90. .select2-selection--multiple {
  91. .select2-selection__choice {
  92. height: 22px;
  93. line-height: 22px;
  94. color: $white;
  95. font-size: 13px;
  96. font-weight: 600;
  97. background-color: $brand-primary;
  98. border: none;
  99. border-radius: 3px;
  100. }
  101. .select2-selection__choice__remove {
  102. margin-right: 5px;
  103. color: rgba(255,255,255,.5);
  104. @include hover {
  105. color: rgba(255,255,255,.75);
  106. }
  107. }
  108. }
  109. .select2-search--dropdown .select2-search__field {
  110. border-color: $input-border-color;
  111. }
  112. .select2-results__option--highlighted[aria-selected] {
  113. background-color: $brand-primary;
  114. }
  115. .select2-search--inline .select2-search__field {
  116. padding-right: 0;
  117. padding-left: 0;
  118. font-family: $font-family-base;
  119. box-shadow: none;
  120. .form-material & {
  121. padding-left: 0;
  122. }
  123. }
  124. }
  125. .select2-search--dropdown .select2-search__field {
  126. padding: 6px 12px;
  127. font-family: $font-family-base;
  128. border-radius: 3px;
  129. box-shadow: none;
  130. }