_form_select_box.scss 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. $select-input-height: 35px;
  2. $select-input-bg-disabled: $input-bg-disabled;
  3. @mixin select-control() {
  4. width: 100%;
  5. margin-right: $gf-form-margin;
  6. @include border-radius($input-border-radius-sm);
  7. background-color: $input-bg;
  8. }
  9. @mixin select-control-focus() {
  10. border-color: $input-border-focus;
  11. outline: none;
  12. $shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px $input-box-shadow-focus;
  13. @include box-shadow($shadow);
  14. }
  15. .gf-form-select-box__control {
  16. @include select-control();
  17. border: 1px solid $input-border-color;
  18. color: $input-color;
  19. cursor: default;
  20. display: table;
  21. border-spacing: 0;
  22. border-collapse: separate;
  23. height: $select-input-height;
  24. outline: none;
  25. overflow: hidden;
  26. position: relative;
  27. }
  28. .gf-form-select-box__control--is-focused {
  29. background-color: $input-bg;
  30. @include select-control-focus();
  31. }
  32. .gf-form-select-box__control--is-disabled {
  33. background-color: $select-input-bg-disabled;
  34. }
  35. .gf-form-select-box__control--menu-right {
  36. .gf-form-select-box__menu {
  37. right: 0;
  38. left: unset;
  39. }
  40. }
  41. .gf-form-select-box__input {
  42. padding-left: 5px;
  43. }
  44. .gf-form-select-box__menu {
  45. background: $dropdownBackground;
  46. position: absolute;
  47. z-index: 2;
  48. }
  49. .tag-filter .gf-form-select-box__menu {
  50. width: 100%;
  51. }
  52. .gf-form-select-box__multi-value {
  53. display: inline;
  54. }
  55. .gf-form-select-box__option {
  56. border-left: 2px solid transparent;
  57. &.gf-form-select-box__option--is-focused {
  58. color: $dropdownLinkColorHover;
  59. background-color: $dropdownLinkBackgroundHover;
  60. @include left-brand-border-gradient();
  61. }
  62. &.gf-form-select-box__option--is-selected {
  63. .fa {
  64. color: $input-color-select-arrow;
  65. }
  66. }
  67. }
  68. .gf-form-select-box__control--is-focused .gf-form-select-box__placeholder {
  69. display: none;
  70. }
  71. .gf-form-select-box__value-container {
  72. display: table-cell;
  73. padding: 8px 10px;
  74. > div {
  75. display: inline-block;
  76. }
  77. }
  78. .gf-form-select-box__indicators {
  79. display: table-cell;
  80. vertical-align: middle;
  81. text-align: right;
  82. padding-right: 10px;
  83. width: 20px;
  84. }
  85. .gf-form-select-box__select-arrow {
  86. border-color: $input-color-select-arrow transparent transparent;
  87. border-style: solid;
  88. border-width: 5px 5px 2.5px;
  89. display: inline-block;
  90. height: 0;
  91. width: 0;
  92. position: relative;
  93. &.gf-form-select-box__select-arrow--reversed {
  94. border-color: transparent transparent $input-color-select-arrow;
  95. top: -2px;
  96. border-width: 0 5px 5px;
  97. }
  98. }
  99. .gf-form-input--form-dropdown {
  100. padding: 0;
  101. border: 0;
  102. overflow: visible;
  103. }
  104. .gf-form--has-input-icon {
  105. .gf-form-select-box__value-container {
  106. padding-left: 30px;
  107. }
  108. }