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.

80 lines
2.4 KiB

9 months ago
  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. --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator)};
  7. display: block;
  8. width: 100%;
  9. padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x;
  10. font-family: $form-select-font-family;
  11. @include font-size($form-select-font-size);
  12. font-weight: $form-select-font-weight;
  13. line-height: $form-select-line-height;
  14. color: $form-select-color;
  15. appearance: none;
  16. background-color: $form-select-bg;
  17. background-image: var(--#{$prefix}form-select-bg-img), var(--#{$prefix}form-select-bg-icon, none);
  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. &:focus {
  26. border-color: $form-select-focus-border-color;
  27. outline: 0;
  28. @if $enable-shadows {
  29. @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
  30. } @else {
  31. // Avoid using mixin so we can pass custom focus shadow properly
  32. box-shadow: $form-select-focus-box-shadow;
  33. }
  34. }
  35. &[multiple],
  36. &[size]:not([size="1"]) {
  37. padding-right: $form-select-padding-x;
  38. background-image: none;
  39. }
  40. &:disabled {
  41. color: $form-select-disabled-color;
  42. background-color: $form-select-disabled-bg;
  43. border-color: $form-select-disabled-border-color;
  44. }
  45. // Remove outline from select box in FF
  46. &:-moz-focusring {
  47. color: transparent;
  48. text-shadow: 0 0 0 $form-select-color;
  49. }
  50. }
  51. .form-select-sm {
  52. padding-top: $form-select-padding-y-sm;
  53. padding-bottom: $form-select-padding-y-sm;
  54. padding-left: $form-select-padding-x-sm;
  55. @include font-size($form-select-font-size-sm);
  56. @include border-radius($form-select-border-radius-sm);
  57. }
  58. .form-select-lg {
  59. padding-top: $form-select-padding-y-lg;
  60. padding-bottom: $form-select-padding-y-lg;
  61. padding-left: $form-select-padding-x-lg;
  62. @include font-size($form-select-font-size-lg);
  63. @include border-radius($form-select-border-radius-lg);
  64. }
  65. @if $enable-dark-mode {
  66. @include color-mode(dark) {
  67. .form-select {
  68. --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator-dark)};
  69. }
  70. }
  71. }