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.

72 lines
2.3 KiB

  1. // Select
  2. //
  3. // Replaces the browser default select with a custom one, mostly pulled from
  4. // https://primer.github.io/.
  5. .form-select {
  6. display: block;
  7. width: 100%;
  8. padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x;
  9. // stylelint-disable-next-line property-no-vendor-prefix
  10. -moz-padding-start: subtract($form-select-padding-x, 3px); // See https://github.com/twbs/bootstrap/issues/32636
  11. font-family: $form-select-font-family;
  12. @include font-size($form-select-font-size);
  13. font-weight: $form-select-font-weight;
  14. line-height: $form-select-line-height;
  15. color: $form-select-color;
  16. background-color: $form-select-bg;
  17. background-image: escape-svg($form-select-indicator);
  18. background-repeat: no-repeat;
  19. background-position: $form-select-bg-position;
  20. background-size: $form-select-bg-size;
  21. border: $form-select-border-width solid $form-select-border-color;
  22. @include border-radius($form-select-border-radius, 0);
  23. @include box-shadow($form-select-box-shadow);
  24. @include transition($form-select-transition);
  25. appearance: none;
  26. &:focus {
  27. border-color: $form-select-focus-border-color;
  28. outline: 0;
  29. @if $enable-shadows {
  30. @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
  31. } @else {
  32. // Avoid using mixin so we can pass custom focus shadow properly
  33. box-shadow: $form-select-focus-box-shadow;
  34. }
  35. }
  36. &[multiple],
  37. &[size]:not([size="1"]) {
  38. padding-right: $form-select-padding-x;
  39. background-image: none;
  40. }
  41. &:disabled {
  42. color: $form-select-disabled-color;
  43. background-color: $form-select-disabled-bg;
  44. border-color: $form-select-disabled-border-color;
  45. }
  46. // Remove outline from select box in FF
  47. &:-moz-focusring {
  48. color: transparent;
  49. text-shadow: 0 0 0 $form-select-color;
  50. }
  51. }
  52. .form-select-sm {
  53. padding-top: $form-select-padding-y-sm;
  54. padding-bottom: $form-select-padding-y-sm;
  55. padding-left: $form-select-padding-x-sm;
  56. @include font-size($form-select-font-size-sm);
  57. @include border-radius($form-select-border-radius-sm);
  58. }
  59. .form-select-lg {
  60. padding-top: $form-select-padding-y-lg;
  61. padding-bottom: $form-select-padding-y-lg;
  62. padding-left: $form-select-padding-x-lg;
  63. @include font-size($form-select-font-size-lg);
  64. @include border-radius($form-select-border-radius-lg);
  65. }