controls.sass 1.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041
  1. $control-radius: $radius !default
  2. $control-radius-small: $radius-small !default
  3. $control-padding-vertical: calc(0.375em - 1px) !default
  4. $control-padding-horizontal: calc(0.625em - 1px) !default
  5. =control
  6. -moz-appearance: none
  7. -webkit-appearance: none
  8. align-items: center
  9. border: 1px solid transparent
  10. border-radius: $control-radius
  11. box-shadow: none
  12. display: inline-flex
  13. font-size: $size-normal
  14. height: 2.25em
  15. justify-content: flex-start
  16. line-height: 1.5
  17. padding-bottom: $control-padding-vertical
  18. padding-left: $control-padding-horizontal
  19. padding-right: $control-padding-horizontal
  20. padding-top: $control-padding-vertical
  21. position: relative
  22. vertical-align: top
  23. // States
  24. &:focus,
  25. &.is-focused,
  26. &:active,
  27. &.is-active
  28. outline: none
  29. &[disabled]
  30. cursor: not-allowed
  31. // The controls sizes use mixins so they can be used at different breakpoints
  32. =control-small
  33. border-radius: $control-radius-small
  34. font-size: $size-small
  35. =control-medium
  36. font-size: $size-medium
  37. =control-large
  38. font-size: $size-large