dzeio/markblog
1
0
Fork 0
mirror of https://github.com/dzeiocom/markblog.git synced 2025-06-18 05:29:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

WIP

Browse Source 
Signed-off-by: Avior <florian.bouillon@delta-wings.net>
This commit is contained in:
Florian Bouillon
2019-12-16 23:59:00 +01:00
parent f19f4f43a6
commit 70f05363e2
33 changed files with 8242 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
styl/include/_button.styl Normal file
View File

@ -0,0 +1,102 @@
$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)