1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950 |
- $control-radius: $radius !default
- $control-radius-small: $radius-small !default
-
- $control-border-width: 1px !default
-
- $control-height: 2.25em !default
- $control-line-height: 1.5 !default
-
- $control-padding-vertical: calc(0.375em - #{$control-border-width}) !default
- $control-padding-horizontal: calc(0.625em - #{$control-border-width}) !default
-
- =control
- -moz-appearance: none
- -webkit-appearance: none
- align-items: center
- border: $control-border-width solid transparent
- border-radius: $control-radius
- box-shadow: none
- display: inline-flex
- font-size: $size-normal
- height: $control-height
- justify-content: flex-start
- line-height: $control-line-height
- padding-bottom: $control-padding-vertical
- padding-left: $control-padding-horizontal
- padding-right: $control-padding-horizontal
- padding-top: $control-padding-vertical
- position: relative
- vertical-align: top
- // States
- &:focus,
- &.is-focused,
- &:active,
- &.is-active
- outline: none
- &[disabled],
- fieldset[disabled] &
- cursor: not-allowed
-
- %control
- +control
-
- // The controls sizes use mixins so they can be used at different breakpoints
- =control-small
- border-radius: $control-radius-small
- font-size: $size-small
- =control-medium
- font-size: $size-medium
- =control-large
- font-size: $size-large
|