dselect.css 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. .dselect-wrapper .form-select {
  2. padding-left: 0.75rem;
  3. display: flex;
  4. align-items: center;
  5. flex-wrap: wrap;
  6. gap: 0.25rem;
  7. text-align: left;
  8. }
  9. .dselect-wrapper .form-select.show {
  10. border-color: #86b7fe;
  11. outline: 0;
  12. box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  13. }
  14. .dselect-wrapper .form-select.dselect-clearable {
  15. padding-right: 3.25rem;
  16. }
  17. .dselect-wrapper .form-select.form-select-sm {
  18. padding-left: 0.5rem;
  19. }
  20. .dselect-wrapper .form-select.form-select-sm.dselect-clearable {
  21. padding-right: 3.125rem;
  22. }
  23. .dselect-wrapper .form-select.form-select-lg {
  24. padding-left: 1rem;
  25. }
  26. .dselect-wrapper .form-select.form-select-lg.dselect-clearable {
  27. padding-right: 3.375rem;
  28. }
  29. .dselect-wrapper .dropdown-menu {
  30. padding: 0.375rem;
  31. width: 100%;
  32. }
  33. .dselect-wrapper .dropdown-menu > .flex-column {
  34. gap: 0.375rem;
  35. }
  36. .dselect-wrapper .form-select-sm + .dropdown-menu {
  37. padding: 0.25rem;
  38. font-size: 0.875rem;
  39. }
  40. .dselect-wrapper .form-select-lg + .dropdown-menu {
  41. padding: 0.5rem;
  42. font-size: 1.25rem;
  43. }
  44. .dselect-wrapper .dropdown-item,
  45. .dselect-wrapper .dropdown-header {
  46. padding-left: 0.375rem;
  47. padding-right: 0.375rem;
  48. }
  49. .dselect-wrapper .form-select-sm + .dropdown-menu .dropdown-item,
  50. .dselect-wrapper .form-select-sm + .dropdown-menu .dropdown-header {
  51. padding-left: 0.25rem;
  52. padding-right: 0.25rem;
  53. }
  54. .dselect-wrapper .form-select-lg + .dropdown-menu .dropdown-item,
  55. .dselect-wrapper .form-select-lg + .dropdown-menu .dropdown-header {
  56. padding-left: 0.5rem;
  57. padding-right: 0.5rem;
  58. }
  59. .dselect-wrapper .form-control {
  60. border-radius: 0;
  61. box-shadow: none !important;
  62. border-color: #ced4da !important;
  63. padding: 0.25rem calc(0.375rem - 1px);
  64. font-size: inherit;
  65. }
  66. .dselect-wrapper .form-select-sm + .dropdown-menu .form-control {
  67. padding: calc(0.25rem - 1px) calc(0.25rem - 1px);
  68. }
  69. .dselect-wrapper .form-select-lg + .dropdown-menu .form-control {
  70. padding: 0.25rem calc(0.5rem - 1px);
  71. }
  72. .dselect-wrapper .dselect-no-results {
  73. padding: 0.25rem 0.375rem;
  74. }
  75. .dselect-wrapper .form-select-sm + .dropdown-menu .dselect-no-results {
  76. padding: calc(0.25rem - 1px) 0.25rem;
  77. }
  78. .dselect-wrapper .form-select-lg + .dropdown-menu .dselect-no-results {
  79. padding: 0.25rem 0.5rem;
  80. }
  81. .dselect-wrapper .dselect-tag {
  82. background-color: #6c757d;
  83. color: #f8f9fa;
  84. padding-left: calc(0.5rem + 14px);
  85. padding-right: 0.5rem;
  86. border-radius: 0.25rem;
  87. height: calc(1.5 * 1rem);
  88. line-height: calc((1.5 * 1rem) - 1px);
  89. position: relative;
  90. }
  91. .dselect-wrapper .form-select-sm .dselect-tag {
  92. height: auto;
  93. line-height: inherit;
  94. }
  95. .dselect-wrapper .form-select-lg .dselect-tag {
  96. height: calc(1.5 * 1.25rem);
  97. line-height: calc(1.5 * 1.25rem);
  98. }
  99. .dselect-wrapper .dselect-tag-remove {
  100. position: absolute;
  101. left: 0.25rem;
  102. top: 50%;
  103. margin-top: -7px;
  104. color: rgba(248, 249, 250, 0.35);
  105. transition: color 0.15s ease-in-out;
  106. }
  107. @media (prefers-reduced-motion: reduce) {
  108. .dselect-wrapper .dselect-tag-remove {
  109. transition: none;
  110. }
  111. }
  112. .dselect-wrapper .dselect-tag-remove:hover {
  113. color: #f8f9fa;
  114. }
  115. .dselect-wrapper .dselect-placeholder {
  116. color: #6c757d;
  117. }
  118. .dselect-wrapper .dropdown-header ~ .dropdown-item {
  119. padding-left: 0.75rem;
  120. padding-right: 0.75rem;
  121. }
  122. .dselect-wrapper .form-select-sm + .dropdown-menu .dropdown-header {
  123. font-size: 0.85em;
  124. }
  125. .dselect-wrapper .form-select-sm + .dropdown-menu .dropdown-header ~ .dropdown-item {
  126. padding-left: 0.5rem;
  127. padding-right: 0.5rem;
  128. }
  129. .dselect-wrapper .form-select-lg + .dropdown-menu .dropdown-header {
  130. font-size: 0.85em;
  131. }
  132. .dselect-wrapper .form-select-lg + .dropdown-menu .dropdown-header ~ .dropdown-item {
  133. padding-left: 1rem;
  134. padding-right: 1rem;
  135. }
  136. .dselect-wrapper .dselect-clear {
  137. position: absolute;
  138. padding: 0;
  139. border: 0;
  140. box-shadow: none;
  141. top: 0;
  142. bottom: 0;
  143. right: 2.25rem;
  144. display: flex;
  145. align-items: center;
  146. color: #6c757d;
  147. cursor: pointer;
  148. }
  149. .dselect-wrapper .dselect-clear:hover {
  150. color: inherit;
  151. }
  152. .dselect-wrapper .dselect-clear svg {
  153. width: 0.625rem;
  154. height: 0.625rem;
  155. }
  156. .dselect-wrapper [data-dselect-text=""] ~ .dselect-clear {
  157. display: none;
  158. }
  159. .was-validated .form-select:invalid + .dselect-wrapper .form-select, .form-select.is-invalid + .dselect-wrapper .form-select {
  160. border-color: #dc3545;
  161. }
  162. .was-validated .form-select:invalid + .dselect-wrapper .form-select.show, .was-validated .form-select:invalid + .dselect-wrapper .form-select:focus, .form-select.is-invalid + .dselect-wrapper .form-select.show, .form-select.is-invalid + .dselect-wrapper .form-select:focus {
  163. box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
  164. }
  165. .was-validated .form-select:valid + .dselect-wrapper .form-select, .form-select.is-valid + .dselect-wrapper .form-select {
  166. border-color: #198754;
  167. }
  168. .was-validated .form-select:valid + .dselect-wrapper .form-select.show, .was-validated .form-select:valid + .dselect-wrapper .form-select:focus, .form-select.is-valid + .dselect-wrapper .form-select.show, .form-select.is-valid + .dselect-wrapper .form-select:focus {
  169. box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
  170. }
  171. /*# sourceMappingURL=dselect.css.map */