_layout.scss 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  1. @import "../globals";
  2. $input-height: 32px;
  3. .select2-container--jet {
  4. @import "single";
  5. @import "multiple";
  6. min-width: 160px;
  7. .select2-selection {
  8. background-color: $input-background-color;
  9. border: 1px solid $input-border-color;
  10. border-radius: 4px;
  11. outline: 0;
  12. height: $input-height;
  13. @include for-mobile {
  14. fieldset.module & {
  15. box-shadow: inset 0 2px 6px 0 rgba(0, 0, 0, 0.04);
  16. }
  17. }
  18. .select2-selection__rendered {
  19. color: $input-text-color;
  20. line-height: $input-height;
  21. font-size: 13px;
  22. }
  23. .select2-selection__placeholder {
  24. color: $input-placeholder-color;
  25. }
  26. }
  27. .select2-buttons {
  28. background-color: $input-contrast-background-color;
  29. text-align: center;
  30. padding: 6px;
  31. &-button {
  32. &, &:visited, &:hover {
  33. color: $input-contrast-text-color;
  34. margin-left: 10px;
  35. }
  36. &:hover {
  37. text-decoration: underline;
  38. }
  39. &:first-child {
  40. margin-left: 0;
  41. }
  42. }
  43. }
  44. .select2-dropdown {
  45. border: 0;
  46. border-radius: 4px;
  47. box-shadow: 0 0 4px 0 $input-shadow-color;
  48. overflow: hidden;
  49. z-index: 1;
  50. &--below {
  51. top: -$input-height;
  52. }
  53. &--above {
  54. top: $input-height;
  55. }
  56. &.select2-multiple-dropdown {
  57. top: auto;
  58. }
  59. }
  60. .select2-search--dropdown {
  61. padding: 0;
  62. .select2-search__field {
  63. outline: 0;
  64. border: 0;
  65. background-color: $input-background-color;
  66. color: $input-text-color;
  67. height: $input-height;
  68. -webkit-appearance: textfield;
  69. box-shadow: none;
  70. }
  71. }
  72. .select2-search--inline {
  73. .select2-search__field {
  74. background: transparent;
  75. border: none;
  76. outline: 0;
  77. color: $input-text-color;
  78. -webkit-appearance: textfield;
  79. box-shadow: none;
  80. }
  81. }
  82. .select2-results > .select2-results__options {
  83. max-height: 200px;
  84. overflow-y: auto;
  85. }
  86. .select2-results__option {
  87. font-size: 13px;
  88. &[role=group] {
  89. padding: 0;
  90. }
  91. &[aria-disabled=true] {
  92. color: $input-disabled-text-color;
  93. }
  94. &[aria-selected=true] {
  95. color: $input-selected-text-color;
  96. }
  97. .select2-results__option {
  98. padding-left: 1em;
  99. .select2-results__group {
  100. padding-left: 0;
  101. }
  102. .select2-results__option {
  103. margin-left: -1em;
  104. padding-left: 2em;
  105. .select2-results__option {
  106. margin-left: -2em;
  107. padding-left: 3em;
  108. .select2-results__option {
  109. margin-left: -3em;
  110. padding-left: 4em;
  111. .select2-results__option {
  112. margin-left: -4em;
  113. padding-left: 5em;
  114. .select2-results__option {
  115. margin-left: -5em;
  116. padding-left: 6em;
  117. }
  118. }
  119. }
  120. }
  121. }
  122. }
  123. }
  124. .select2-results__option--highlighted[aria-selected] {
  125. background-color: $input-hover-background-color;
  126. color: $input-hover-text-color;
  127. }
  128. .select2-results__group {
  129. cursor: default;
  130. display: block;
  131. padding: 6px;
  132. }
  133. }