select.sass 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. $select-colors: $form-colors !default
  2. .select
  3. display: inline-block
  4. max-width: 100%
  5. position: relative
  6. vertical-align: top
  7. &:not(.is-multiple)
  8. height: $input-height
  9. &:not(.is-multiple):not(.is-loading)
  10. &::after
  11. @extend %arrow
  12. border-color: $input-arrow
  13. +ltr-position(1.125em)
  14. z-index: 4
  15. &.is-rounded
  16. select
  17. border-radius: $radius-rounded
  18. +ltr-property("padding", 1em, false)
  19. select
  20. @extend %input
  21. cursor: pointer
  22. display: block
  23. font-size: 1em
  24. max-width: 100%
  25. outline: none
  26. &::-ms-expand
  27. display: none
  28. &[disabled]:hover,
  29. fieldset[disabled] &:hover
  30. border-color: $input-disabled-border-color
  31. &:not([multiple])
  32. +ltr-property("padding", 2.5em)
  33. &[multiple]
  34. height: auto
  35. padding: 0
  36. option
  37. padding: 0.5em 1em
  38. // States
  39. &:not(.is-multiple):not(.is-loading):hover
  40. &::after
  41. border-color: $input-hover-color
  42. // Colors
  43. @each $name, $pair in $select-colors
  44. $color: nth($pair, 1)
  45. &.is-#{$name}
  46. &:not(:hover)::after
  47. border-color: $color
  48. select
  49. border-color: $color
  50. &:hover,
  51. &.is-hovered
  52. border-color: bulmaDarken($color, 5%)
  53. &:focus,
  54. &.is-focused,
  55. &:active,
  56. &.is-active
  57. box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25)
  58. // Sizes
  59. &.is-small
  60. +control-small
  61. &.is-medium
  62. +control-medium
  63. &.is-large
  64. +control-large
  65. // Modifiers
  66. &.is-disabled
  67. &::after
  68. border-color: $input-disabled-color
  69. &.is-fullwidth
  70. width: 100%
  71. select
  72. width: 100%
  73. &.is-loading
  74. &::after
  75. @extend %loader
  76. margin-top: 0
  77. position: absolute
  78. +ltr-position(0.625em)
  79. top: 0.625em
  80. transform: none
  81. &.is-small:after
  82. font-size: $size-small
  83. &.is-medium:after
  84. font-size: $size-medium
  85. &.is-large:after
  86. font-size: $size-large