You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
83 lines
1.9 KiB
Stylus
83 lines
1.9 KiB
Stylus
@import './var.inc.styl'
|
|
|
|
.button
|
|
font-size: rem($font-size-secondary)
|
|
line-height: rem($form-control-height - 2)
|
|
background-color: lighten($default-color, 50%)
|
|
border: 1px solid $default-color
|
|
height: rem($form-control-height)
|
|
padding: rem(0 25px)
|
|
display: inline-block
|
|
outline: 0
|
|
margin: 0 0 1rem
|
|
transition: background-color .2s, box-shadow .5s
|
|
transition-timing-function: ease-out-sine
|
|
cursor: pointer
|
|
user-select: none
|
|
|
|
&, &:visited, &:hover
|
|
&, .typo &
|
|
color: $text-1-color
|
|
|
|
&:hover, &:focus
|
|
text-decoration: none
|
|
|
|
&:not(.disabled)
|
|
&:hover, &:focus
|
|
background-color: darken($default-color, 5%)
|
|
border-color: darken($default-color, 5%)
|
|
box-shadow: 0 4px 15px rgba(darken($default-color, 10%), 0.5)
|
|
|
|
&:focus
|
|
border-color: $input-focus-color
|
|
|
|
&.expanded
|
|
padding-left: 0
|
|
padding-right: 0
|
|
text-align: center
|
|
width: 100%
|
|
|
|
&.rounded
|
|
border-radius: rem($form-control-height / 2)
|
|
|
|
&.primary
|
|
border-color: $primary-color
|
|
background-color: $primary-color
|
|
|
|
&, &:visited, &:hover
|
|
&, .typo &
|
|
color: #FFF
|
|
|
|
&:not(.disabled)
|
|
&:hover
|
|
background-color: lighten(saturate($primary-color, 30%), 10%)
|
|
border-color: saturate($primary-color, 70%)
|
|
box-shadow: 0 4px 15px rgba(saturate($primary-color, 70%), 0.3)
|
|
|
|
&.disabled
|
|
cursor: default
|
|
opacity: 0.5
|
|
|
|
&.compact
|
|
margin-bottom: 0
|
|
height: rem($compact-control-height)
|
|
line-height: rem($compact-control-height - 2)
|
|
padding: rem(0 15px)
|
|
|
|
.button.inverse
|
|
line-height: rem($form-control-height - 4)
|
|
border: 2px solid #FFF
|
|
background: none
|
|
|
|
&, &:visited
|
|
&, .typo &
|
|
color: #FFF
|
|
|
|
&:not(.disabled)
|
|
&:hover, &:focus
|
|
border-color: $immersive-primary-color
|
|
background: none
|
|
box-shadow: none
|
|
&, .typo &
|
|
color: $immersive-primary-color
|