sass/utilities/controls.sass

@import "derived-variables"

$control-radius: $radius !default
$control-radius-small: $radius-small !default

$control-border-width: 1px !default

$control-height: 2.5em !default
$control-line-height: 1.5 !default

$control-padding-vertical: calc(0.5em - #{$control-border-width}) !default
$control-padding-horizontal: calc(0.75em - #{$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

// 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
Use single file for extends (#3216) * Use single file for extends * Update changelog 2020-12-20 12:10:04 +00:00			`@import "derived-variables"`
Use imports everywhere 2020-10-31 23:52:27 +00:00
Add table variables 2016-09-24 16:04:53 +01:00			`$control-radius: $radius !default`
			`$control-radius-small: $radius-small !default`

Add control and button border variables 2018-04-08 19:46:32 +01:00			`$control-border-width: 1px !default`

Increase controls size, Update base colors 2019-10-12 21:44:57 +01:00			`$control-height: 2.5em !default`
New control height and line height variables 2018-10-02 07:01:43 +01:00			`$control-line-height: 1.5 !default`

Increase controls size, Update base colors 2019-10-12 21:44:57 +01:00			`$control-padding-vertical: calc(0.5em - #{$control-border-width}) !default`
			`$control-padding-horizontal: calc(0.75em - #{$control-border-width}) !default`
Fix #584, Fix #571 2017-04-13 01:10:39 +01:00
Fix control extend 2018-10-02 07:04:19 +01:00			`=control`
Restructure controls, Remove vertical padding from controls, Fix panel 2016-05-05 21:54:32 +01:00			`-moz-appearance: none`
			`-webkit-appearance: none`
			`align-items: center`
Add control and button border variables 2018-04-08 19:46:32 +01:00			`border: $control-border-width solid transparent`
Add table variables 2016-09-24 16:04:53 +01:00			`border-radius: $control-radius`
Use em for controls 2016-10-29 18:53:30 +01:00			`box-shadow: none`
Restructure controls, Remove vertical padding from controls, Fix panel 2016-05-05 21:54:32 +01:00			`display: inline-flex`
Fix button icons 2016-10-30 10:41:53 +00:00			`font-size: $size-normal`
New control height and line height variables 2018-10-02 07:01:43 +01:00			`height: $control-height`
Add display responsive classes 2016-05-07 13:31:31 +01:00			`justify-content: flex-start`
New control height and line height variables 2018-10-02 07:01:43 +01:00			`line-height: $control-line-height`
Fix #584, Fix #571 2017-04-13 01:10:39 +01:00			`padding-bottom: $control-padding-vertical`
			`padding-left: $control-padding-horizontal`
			`padding-right: $control-padding-horizontal`
			`padding-top: $control-padding-vertical`
Restructure controls, Remove vertical padding from controls, Fix panel 2016-05-05 21:54:32 +01:00			`position: relative`
			`vertical-align: top`
Fix control variables 2016-10-29 21:51:13 +01:00			`// States`
Fix #214 2016-05-30 19:41:54 +01:00			`&:focus,`
Fix control variables 2016-10-29 21:51:13 +01:00			`&.is-focused,`
			`&:active,`
Fix #214 2016-05-30 19:41:54 +01:00			`&.is-active`
Restructure controls, Remove vertical padding from controls, Fix panel 2016-05-05 21:54:32 +01:00			`outline: none`
fieldset disabled styles (#1682) * fieldset disabled styles * Added disabled styles to button elements included inside a disabled fieldset * Added comma, and fieldset element reset * fieldset doesn't need display block 2018-11-01 05:29:55 +11:00			`&[disabled],`
			`fieldset[disabled] &`
Fix disabled buttons 2017-03-31 22:25:53 +01:00			`cursor: not-allowed`
Restructure controls, Remove vertical padding from controls, Fix panel 2016-05-05 21:54:32 +01:00
Fix button icons 2016-10-30 10:41:53 +00:00			`// The controls sizes use mixins so they can be used at different breakpoints`
Restructure controls, Remove vertical padding from controls, Fix panel 2016-05-05 21:54:32 +01:00			`=control-small`
Add table variables 2016-09-24 16:04:53 +01:00			`border-radius: $control-radius-small`
Use em for controls 2016-10-29 18:53:30 +01:00			`font-size: $size-small`
Restructure controls, Remove vertical padding from controls, Fix panel 2016-05-05 21:54:32 +01:00			`=control-medium`
Use em for controls 2016-10-29 18:53:30 +01:00			`font-size: $size-medium`
Restructure controls, Remove vertical padding from controls, Fix panel 2016-05-05 21:54:32 +01:00			`=control-large`
Use em for controls 2016-10-29 18:53:30 +01:00			`font-size: $size-large`