mirror of
https://github.com/dzeiocom/markblog.git
synced 2025-04-22 02:42:14 +00:00
103 lines
2.0 KiB
Stylus
103 lines
2.0 KiB
Stylus
$color = #4285F4
|
|
$hover = #70A8F8
|
|
$active = #3066D1
|
|
|
|
$outline-shadow = inset 0 0 0 2px $color
|
|
$outline-hover = rgba(179, 216, 253, 0.3)
|
|
$outline-active = rgba(66, 133, 244, 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: 5px
|
|
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
|
|
|
|
&: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)
|