No Description
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

bootstrap-select.scss 4.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
  1. // Bootstrap Select
  2. // *******************************************************************************
  3. @import "../../scss/_bootstrap-extended/include";
  4. @import "bootstrap-select/sass/bootstrap-select";
  5. /* Common Styles */
  6. .bootstrap-select *,
  7. .bootstrap-select .dropdown-toggle:focus {
  8. outline: 0 !important;
  9. }
  10. .bootstrap-select {
  11. --#{$prefix}bootstrap-select-border-color: #{$input-border-color};
  12. --#{$prefix}bootstrap-select-arrow-position: 23px;
  13. .bs-searchbox,
  14. .bs-actionsbox,
  15. .bs-donebutton {
  16. padding-block: 0 .5rem;
  17. }
  18. > .dropdown-toggle {
  19. &.bs-placeholder {
  20. &,
  21. &:hover,
  22. &:focus,
  23. &:active {
  24. color: $input-placeholder-color;
  25. }
  26. }
  27. }
  28. .dropdown-toggle {
  29. border: $input-border-width solid var(--#{$prefix}bootstrap-select-border-color);
  30. @include border-radius($input-border-radius);
  31. color: $input-color;
  32. padding-block: calc($input-padding-y - $input-border-width);
  33. padding-inline: $input-padding-x;
  34. transition: none;
  35. .filter-option {
  36. float: inline-start;
  37. inset-inline: 0 auto;
  38. text-align: start;
  39. }
  40. &::after {
  41. position: absolute;
  42. margin: 0;
  43. inset-block-start: 50%;
  44. inset-inline-end: var(--#{$prefix}bootstrap-select-arrow-position);
  45. transform: rotate(45deg) translateY(-100%);
  46. :dir(rtl) & {
  47. transform: rotate(-45deg) translateY(-100%);
  48. }
  49. }
  50. &.show,
  51. &:focus,
  52. &:active {
  53. border-width: $input-focus-border-width;
  54. border-color: $input-focus-border-color;
  55. box-shadow: $input-focus-box-shadow;
  56. padding-block: calc($input-padding-y - $input-focus-border-width);
  57. padding-inline: calc($input-padding-x - $input-border-width);
  58. &::after {
  59. inset-inline-end: calc(var(--#{$prefix}bootstrap-select-arrow-position) - $input-border-width);
  60. }
  61. }
  62. .filter-option-inner-inner {
  63. float: inline-start;
  64. line-height: $input-line-height;
  65. }
  66. }
  67. .dropdown-menu li small,
  68. .filter-option small {
  69. position: relative;
  70. float: inline-end;
  71. inset-block-start: 2px;
  72. padding-inline: .5em 0;
  73. }
  74. .dropdown-menu {
  75. .notify {
  76. border-color: color-mix(in sRGB, var(--#{$prefix}base-color) 16%, var(--#{$prefix}paper-bg));
  77. background: color-mix(in sRGB, var(--#{$prefix}base-color) 6%, var(--#{$prefix}paper-bg));
  78. }
  79. /* For header dropdown close btn */
  80. .popover-header {
  81. display: flex;
  82. flex-direction: row-reverse;
  83. align-items: center;
  84. justify-content: space-between;
  85. margin-inline: var(--#{$prefix}dropdown-item-padding-x);
  86. button {
  87. padding: 0;
  88. border: none;
  89. background: transparent;
  90. color: var(--#{$prefix}body-color);
  91. font-size: $h4-font-size;
  92. }
  93. }
  94. a[aria-selected="true"] {
  95. background: color-mix(in sRGB, var(--#{$prefix}paper-bg) #{$bg-label-tint-amount}, #{$component-active-bg});
  96. color: $component-active-bg;
  97. }
  98. li.active small,
  99. li:active small {
  100. color: $component-active-bg !important;
  101. }
  102. .dropdown-item.selected span::before,
  103. .dropdown-item:active:hover,
  104. .dropdown-toggle.show {
  105. color: $component-active-bg;
  106. }
  107. }
  108. .btn {
  109. &:disabled,
  110. &.disabled {
  111. color: $input-disabled-color;
  112. }
  113. &:hover {
  114. transform: none;
  115. }
  116. }
  117. .is-invalid {
  118. ~ .dropdown-toggle {
  119. &::after {
  120. inset-inline-end: calc(var(--#{$prefix}bootstrap-select-arrow-position) - $input-border-width);
  121. }
  122. }
  123. }
  124. &.dropup {
  125. --#{$prefix}bootstrap-select-arrow-position: 14px;
  126. .dropdown-toggle {
  127. &::after {
  128. transform: rotate(317deg) translateY(-30%);
  129. :dir(rtl) & {
  130. transform: rotate(-317deg) translateY(-30%);
  131. }
  132. }
  133. }
  134. }
  135. /* Menu Position */
  136. &.show-tick {
  137. .dropdown-menu {
  138. li {
  139. a {
  140. position: relative;
  141. span.text {
  142. margin-inline: 0 2.125rem;
  143. }
  144. }
  145. }
  146. .selected span.check-mark {
  147. inset-block-start: 50%;
  148. inset-inline: auto 1rem;
  149. inset-inline-end: 1rem;
  150. transform: translateY(-50%);
  151. }
  152. }
  153. }
  154. &:not(.input-group-btn),
  155. &[class*="col-"] {
  156. display: block;
  157. }
  158. }
  159. html[class] .bootstrap-select.form-select {
  160. padding: 0;
  161. border: 0;
  162. margin: 0;
  163. background: none;
  164. }
  165. @if $enable-dark-mode {
  166. @include color-mode(dark) {
  167. .bootstrap-select {
  168. --#{$prefix}bootstrap-select-border-color: #{$input-border-color-dark};
  169. }
  170. }
  171. }