select.sass 1.8 KB

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