설명 없음
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.

layout.scss 3.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  1. @import "~bootstrap/scss/functions";
  2. @import "~bootstrap/scss/variables";
  3. @import "single";
  4. @import "multiple";
  5. // basic
  6. .select2-container {
  7. display: block;
  8. *:focus {
  9. outline: 0;
  10. }
  11. }
  12. // input-group
  13. .input-group .select2-container--bootstrap4 {
  14. flex-grow: 1;
  15. }
  16. .input-group-prepend ~ .select2-container--bootstrap4 .select2-selection {
  17. border-top-left-radius: 0;
  18. border-bottom-left-radius: 0;
  19. }
  20. // waiting for css4
  21. //.select2-container--bootstrap4:has(~ .input-group-append) .select2-selection {
  22. // border-top-right-radius: 0;
  23. // border-bottom-right-radius: 0;
  24. //}
  25. .select2-container--bootstrap4 {
  26. // input box
  27. .select2-selection {
  28. border: $input-border-width solid $input-border-color;
  29. border-radius: $input-border-radius;
  30. width: 100%;
  31. }
  32. // focused input box
  33. &.select2-container--focus {
  34. .select2-selection {
  35. border-color: $info;
  36. box-shadow: $input-focus-box-shadow;
  37. }
  38. // when open, hide bottom border
  39. &.select2-container--open .select2-selection {
  40. border-bottom: none;
  41. border-bottom-left-radius: 0;
  42. border-bottom-right-radius: 0;
  43. }
  44. }
  45. // disabled input box
  46. &.select2-container--disabled,
  47. &.select2-container--disabled.select2-container--focus {
  48. .select2-selection {
  49. background-color: $input-disabled-bg;
  50. cursor: not-allowed;
  51. border-color: $input-border-color;
  52. box-shadow: none;
  53. }
  54. .select2-search__field {
  55. background-color: transparent;
  56. }
  57. }
  58. // validated input box
  59. select.is-invalid ~ & .select2-selection,
  60. form.was-validated select:invalid ~ & .select2-selection {
  61. border-color: $danger;
  62. }
  63. select.is-valid ~ & .select2-selection,
  64. form.was-validated select:valid ~ & .select2-selection {
  65. border-color: $success;
  66. }
  67. // dropdown
  68. .select2-dropdown {
  69. border-color: $input-border-color;
  70. border-top: none;
  71. border-top-left-radius: 0;
  72. border-top-right-radius: 0;
  73. // dropdown opened above
  74. &.select2-dropdown--above {
  75. border-top: 1px solid $input-border-color;
  76. border-top-left-radius: $input-border-radius;
  77. border-top-right-radius: $input-border-radius;
  78. }
  79. // selected item
  80. .select2-results__option[aria-selected=true] {
  81. background-color: darken($light, 5%);
  82. }
  83. }
  84. // mouse hovered item
  85. .select2-results__option--highlighted,
  86. .select2-results__option--highlighted.select2-results__option[aria-selected=true] {
  87. background-color: $primary;
  88. color: $light;
  89. }
  90. // for <optgroup>
  91. .select2-results__option[role=group] {
  92. padding: 0;
  93. }
  94. // fixes vertical overflow
  95. .select2-results > .select2-results__options {
  96. max-height: 15em;
  97. overflow-y: auto;
  98. }
  99. .select2-results__group {
  100. padding: 6px;
  101. display: list-item;
  102. color: $secondary;
  103. }
  104. // all clear button
  105. .select2-selection__clear {
  106. width: 1.2em;
  107. height: 1.2em;
  108. line-height: 1.15em;
  109. padding-left: 0.3em;
  110. margin-top: 0.5em;
  111. border-radius: 100%;
  112. background-color: $secondary;
  113. color: $light;
  114. float: right;
  115. margin-right: 0.3em;
  116. &:hover {
  117. background-color: $dark;
  118. }
  119. }
  120. }