_variables.scss 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  1. // Height
  2. $s2bs5-height: $input-height !default;
  3. $s2bs5-height-inner: $input-line-height * 1rem !default;
  4. // Z-Index
  5. $s2bs5-zindex: $zindex-modal + 1 !default;
  6. // Padding
  7. $s2bs5-padding-y: $form-select-padding-y !default;
  8. $s2bs5-padding-x: $form-select-padding-x !default;
  9. // Font
  10. $s2bs5-font-family: inherit !default;
  11. $s2bs5-font-size: $form-select-font-size !default;
  12. $s2bs5-font-weight: $form-select-font-weight !default;
  13. $s2bs5-line-height: $form-select-line-height !default;
  14. // Color & background
  15. $s2bs5-color: $form-select-color !default;
  16. $s2bs5-placeholder-color: $input-placeholder-color !default;
  17. $s2bs5-bg: $form-select-bg !default;
  18. $s2bs5-bg-position: $form-select-bg-position !default;
  19. $s2bs5-bg-size: $form-select-bg-size !default;
  20. // Border & shadow
  21. $s2bs5-border-width: $form-select-border-width !default;
  22. $s2bs5-border-color: $form-select-border-color !default;
  23. $s2bs5-border-radius: $form-select-border-radius !default;
  24. $s2bs5-box-shadow: $form-select-box-shadow !default;
  25. $s2bs5-transition: $input-transition !default;
  26. // Indicator
  27. $s2bs5-indicator-padding: $form-select-indicator-padding !default;
  28. $s2bs5-indicator: $form-select-indicator !default;
  29. // Focus
  30. $s2bs5-focus-border-color: $form-select-focus-border-color !default;
  31. $s2bs5-focus-width: $form-select-focus-width !default;
  32. $s2bs5-focus-box-shadow: $form-select-focus-box-shadow !default;
  33. // Valid
  34. $s2bs5-valid-border-color: $form-feedback-valid-color !default;
  35. $s2bs5-valid-focus-box-shadow: 0 0 0 $s2bs5-focus-width rgba($s2bs5-valid-border-color, $input-btn-focus-color-opacity) !default;
  36. // Invalid
  37. $s2bs5-invalid-border-color: $form-feedback-invalid-color !default;
  38. $s2bs5-invalid-focus-box-shadow: 0 0 0 $s2bs5-focus-width rgba($s2bs5-invalid-border-color, $input-btn-focus-color-opacity) !default;
  39. // Disabled
  40. $s2bs5-disabled-color: $text-muted !default;
  41. $s2bs5-disabled-bg: $form-select-disabled-bg !default;
  42. $s2bs5-disabled-border-color: $s2bs5-border-color !default;
  43. // Items
  44. $s2bs5-item-padding-y: $s2bs5-padding-y !default;
  45. $s2bs5-item-padding-x: $s2bs5-padding-x !default;
  46. $s2bs5-item-active-bg: $primary !default;
  47. $s2bs5-item-hover-bg: $gray-200 !default;
  48. $s2bs5-item-focus-bg: $gray-200 !default;
  49. // Groups
  50. $s2bs5-group-padding-y: $s2bs5-padding-y !default;
  51. $s2bs5-group-padding-x: $s2bs5-padding-x * .5 !default;
  52. $s2bs5-group-color: $secondary !default;
  53. $s2bs5-group-font-weight: $headings-font-weight !default;
  54. // Multiple items
  55. $s2bs5-multi-item-padding-y: $badge-padding-y !default;
  56. $s2bs5-multi-item-padding-x: $badge-padding-x !default;
  57. $s2bs5-options-max-height: 15rem !default;
  58. // Clear/Remove
  59. $s2bs5-clear-width: .75rem !default;
  60. $s2bs5-clear-height: .75rem !default;
  61. $s2bs5-clear-padding-y: $btn-close-padding-y !default;
  62. $s2bs5-clear-padding-x: $btn-close-padding-x !default;
  63. $s2bs5-clear-icon: str-replace($btn-close-bg, #{$btn-close-color}, #{shade-color($s2bs5-border-color, 50%)}) !default;
  64. $s2bs5-clear-bg: transparent escape-svg($s2bs5-clear-icon) center / $s2bs5-clear-height auto no-repeat !default;
  65. $s2bs5-clear-hover-bg: transparent escape-svg($btn-close-bg) center / $s2bs5-clear-height auto no-repeat !default;
  66. // Small
  67. $s2bs5-height-sm: $input-height-sm !default;
  68. $s2bs5-height-inner-sm: $input-line-height * 1em !default;
  69. $s2bs5-padding-y-sm: $form-select-padding-y-sm !default;
  70. $s2bs5-padding-x-sm: $form-select-padding-x-sm !default;
  71. $s2bs5-font-size-sm: $form-select-font-size-sm !default;
  72. $s2bs5-border-radius-sm: $form-select-border-radius-sm !default;
  73. $s2bs5-item-padding-y-sm: $s2bs5-padding-y-sm !default;
  74. $s2bs5-item-padding-x-sm: $s2bs5-padding-x-sm !default;
  75. $s2bs5-group-padding-y-sm: $s2bs5-padding-y-sm !default;
  76. $s2bs5-group-padding-x-sm: $s2bs5-padding-x-sm * .5 !default;
  77. $s2bs5-clear-width-sm: .5rem !default;
  78. $s2bs5-clear-height-sm: .5rem !default;
  79. $s2bs5-clear-padding-y-sm: .125rem !default;
  80. $s2bs5-clear-padding-x-sm: .125rem !default;
  81. $s2bs5-clear-bg-sm: transparent escape-svg($s2bs5-clear-icon) center / $s2bs5-clear-height-sm auto no-repeat !default;
  82. $s2bs5-clear-hover-bg-sm: transparent escape-svg($btn-close-bg) center / $s2bs5-clear-height-sm auto no-repeat !default;
  83. $s2bs5-small: (
  84. "height": $s2bs5-height-sm,
  85. "height-inner": $s2bs5-height-inner-sm,
  86. "padding-y": $s2bs5-padding-y-sm,
  87. "padding-x": $s2bs5-padding-x-sm,
  88. "font-size": $s2bs5-font-size-sm,
  89. "border-radius": $s2bs5-border-radius-sm,
  90. "item-padding-y": $s2bs5-item-padding-y-sm,
  91. "item-padding-x": $s2bs5-item-padding-x-sm,
  92. "group-padding-y": $s2bs5-group-padding-y-sm,
  93. "group-padding-x": $s2bs5-group-padding-x-sm,
  94. "clear-width": $s2bs5-clear-width-sm,
  95. "clear-height": $s2bs5-clear-height-sm,
  96. "clear-padding-y": $s2bs5-clear-padding-y-sm,
  97. "clear-padding-x": $s2bs5-clear-padding-x-sm,
  98. "clear-bg": $s2bs5-clear-bg-sm,
  99. "clear-hover-bg": $s2bs5-clear-hover-bg-sm,
  100. ) !default;
  101. // Large
  102. $s2bs5-height-lg: $input-height-lg !default;
  103. $s2bs5-height-inner-lg: $input-line-height * 1em !default;
  104. $s2bs5-padding-y-lg: $form-select-padding-y-lg !default;
  105. $s2bs5-padding-x-lg: $form-select-padding-x-lg !default;
  106. $s2bs5-font-size-lg: $form-select-font-size-lg !default;
  107. $s2bs5-border-radius-lg: $form-select-border-radius-lg !default;
  108. $s2bs5-item-padding-y-lg: $s2bs5-padding-y-lg !default;
  109. $s2bs5-item-padding-x-lg: $s2bs5-padding-x-lg !default;
  110. $s2bs5-group-padding-y-lg: $s2bs5-padding-y-lg !default;
  111. $s2bs5-group-padding-x-lg: $s2bs5-padding-x-lg * .5 !default;
  112. $s2bs5-clear-width-lg: 1rem !default;
  113. $s2bs5-clear-height-lg: 1rem !default;
  114. $s2bs5-clear-padding-y-lg: .5rem !default;
  115. $s2bs5-clear-padding-x-lg: .5rem !default;
  116. $s2bs5-clear-bg-lg: transparent escape-svg($s2bs5-clear-icon) center / $s2bs5-clear-height-lg auto no-repeat !default;
  117. $s2bs5-clear-hover-bg-lg: transparent escape-svg($btn-close-bg) center / $s2bs5-clear-height-lg auto no-repeat !default;
  118. $s2bs5-large: (
  119. "height": $s2bs5-height-lg,
  120. "height-inner": $s2bs5-height-inner-lg,
  121. "padding-y": $s2bs5-padding-y-lg,
  122. "padding-x": $s2bs5-padding-x-lg,
  123. "font-size": $s2bs5-font-size-lg,
  124. "border-radius": $s2bs5-border-radius-lg,
  125. "item-padding-y": $s2bs5-item-padding-y-lg,
  126. "item-padding-x": $s2bs5-item-padding-x-lg,
  127. "group-padding-y": $s2bs5-group-padding-y-lg,
  128. "group-padding-x": $s2bs5-group-padding-x-lg,
  129. "clear-width": $s2bs5-clear-width-lg,
  130. "clear-height": $s2bs5-clear-height-lg,
  131. "clear-padding-y": $s2bs5-clear-padding-y-lg,
  132. "clear-padding-x": $s2bs5-clear-padding-x-lg,
  133. "clear-bg": $s2bs5-clear-bg-lg,
  134. "clear-hover-bg": $s2bs5-clear-hover-bg-lg,
  135. ) !default;