111 lines
1.9 KiB
Stylus
111 lines
1.9 KiB
Stylus
// Buttons
|
|
|
|
button
|
|
border: none
|
|
|
|
.button
|
|
line-height: 35px
|
|
|
|
.button, button
|
|
display: inline-block
|
|
padding: 0 15px
|
|
height: 35px
|
|
background: $gray-lighter
|
|
font-size: $font-size-small
|
|
font-weight: $font-weight-bold
|
|
text-align: center
|
|
text-decoration: none
|
|
color: $blue-saturated-light
|
|
border: 1px solid $blue-saturated-lighter
|
|
border-radius: 3px
|
|
text-overflow: ellipsis
|
|
vertical-align: middle
|
|
user-select()
|
|
|
|
&:focus
|
|
outline: none
|
|
|
|
&:hover:not(:disabled)
|
|
color: $gray
|
|
background: darken($gray-lighter, 10%)
|
|
transition: all .3s ease-in
|
|
|
|
&:disabled
|
|
cursor: not-allowed
|
|
color: lighten($gray-light, 40%)
|
|
|
|
&.small
|
|
height: 25px
|
|
padding: 0 8px
|
|
font-size: $font-size-small
|
|
line-height: 25px
|
|
|
|
&.large
|
|
height: 50px
|
|
line-height: 50px
|
|
padding: 0 30px
|
|
font-size: $font-size-large
|
|
|
|
&.primary, &.secondary, &.primary:hover, &.secondary:hover
|
|
color: white
|
|
|
|
&.primary
|
|
background: $green
|
|
|
|
&:hover:not(:disabled)
|
|
background: darken($green, 10%)
|
|
|
|
&:disabled
|
|
background: $green-light
|
|
|
|
&.secondary
|
|
background: $red
|
|
|
|
&:disabled
|
|
background: $red-light
|
|
|
|
&:hover:not(:disabled)
|
|
background: darken($red, 10%)
|
|
|
|
.button-group
|
|
|
|
.button, button
|
|
border-radius: 0
|
|
margin-left: -1px
|
|
|
|
&:first-child:only-child
|
|
border-radius: 3px
|
|
|
|
&:first-child
|
|
border-radius: 3px 0 0 3px
|
|
|
|
&:last-child
|
|
border-radius: 0 3px 3px 0
|
|
|
|
&.outlined
|
|
display: inline-block
|
|
border-radius: 3px
|
|
|
|
button, .button
|
|
border: 1px solid $gray-light
|
|
|
|
&.primary
|
|
|
|
button, .button
|
|
background: $pink-lighter
|
|
border: 1px solid $pink-light
|
|
color: $pink
|
|
|
|
&:hover
|
|
background: lighten($pink-light, 40%)
|
|
|
|
&.secondary
|
|
|
|
button, .button
|
|
background: $blue-lighter
|
|
border: 1px solid $blue-light
|
|
color: $blue
|
|
|
|
&:hover
|
|
background: lighten($blue-light, 40%)
|