mirror of
https://github.com/dzeiocom/markblog.git
synced 2025-04-23 11:22:13 +00:00
109 lines
2.1 KiB
Stylus
109 lines
2.1 KiB
Stylus
$color = #6200EE
|
|
$hover = #BB86FC
|
|
$active = #3700B3
|
|
|
|
$outline-shadow = inset 0 0 0 2px $color
|
|
$outline-hover = rgba($hover, 0.3)
|
|
$outline-active = rgba($active, 0.3)
|
|
|
|
$active-shadow = 0 0 0 3px rgba(204,204,204,.75)
|
|
|
|
button, a.button
|
|
cursor: pointer
|
|
color: #FFF
|
|
background-color: $color
|
|
border-radius: 10px
|
|
border: none
|
|
padding: 7px 14px
|
|
transition-property: box-shadow, background-color
|
|
transition-duration: 200ms
|
|
transition-timing-function: cubic-bezier(.2,0,.6,1)
|
|
margin: 3px
|
|
display: inline-flex
|
|
user-select: none
|
|
outline: none
|
|
/* Set Chrome on Firefox base */
|
|
line-height: 22px
|
|
text-decoration: none
|
|
box-sizing: border-box
|
|
justify-content center
|
|
|
|
&.large
|
|
padding 20px 25px
|
|
text-transform uppercase
|
|
font-size 20px
|
|
|
|
&:hover
|
|
background-color: $hover
|
|
|
|
&:active
|
|
background-color: $active
|
|
|
|
&:focus:not(.disabled)
|
|
background-color: $active
|
|
box-shadow: $active-shadow
|
|
|
|
&::-moz-focus-inner
|
|
border: none
|
|
|
|
|
|
&.outline, &.ghost
|
|
color: $color
|
|
background-color: transparent
|
|
|
|
&:hover:not(:disabled):not(.disabled)
|
|
background-color: $outline-hover
|
|
|
|
&:active:not(:disabled):not(.disabled)
|
|
background-color: $outline-active
|
|
|
|
&.loading::after
|
|
border-color: transparent transparent $color $color
|
|
|
|
&.outline
|
|
box-shadow: $outline-shadow
|
|
|
|
&:focus
|
|
box-shadow: $outline-shadow, $active-shadow
|
|
|
|
&:disabled, &.disabled
|
|
background-color: #EEE
|
|
color: #BDBDBD
|
|
cursor: default
|
|
pointer-events: none
|
|
|
|
&.outline
|
|
box-shadow: 0 0 0 2px #BDBDBD
|
|
|
|
&.loading
|
|
color: transparent
|
|
position: relative
|
|
pointer-events: none
|
|
// cursor: default
|
|
&::after
|
|
content: ""
|
|
display: block
|
|
border: white 2px solid
|
|
border-color: transparent transparent white white
|
|
width: 1em
|
|
position: absolute
|
|
top: calc(50% - (1em / 2))
|
|
left: calc(50% - (1em / 2))
|
|
border-radius: 1000000000px
|
|
height: 1em
|
|
box-sizing: inherit
|
|
animation: ButtonLoading .5s infinite linear
|
|
|
|
|
|
a.button.outline:focus:not(.disabled),
|
|
a.button.ghost:focus:not(.disabled),
|
|
button.outline:focus, button.ghost:focus
|
|
background-color: $outline-active
|
|
|
|
|
|
@keyframes ButtonLoading
|
|
0%
|
|
transform: rotate(0)
|
|
100%
|
|
transform: rotate(365deg)
|