controls.sass 1.3 KB

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