master
xaoxuu 4 years ago
parent f2c94ad24b
commit 54bb07868e
  1. 36
      source/css/_tag-plugins/checkbox.styl

@ -8,8 +8,8 @@ article .checkbox
-o-appearance: none -o-appearance: none
appearance: none appearance: none
position: relative position: relative
height: 20px height: 16px
width: 20px width: 16px
transition:all .15s ease-out 0s transition:all .15s ease-out 0s
cursor: pointer cursor: pointer
display: inline-block display: inline-block
@ -17,7 +17,6 @@ article .checkbox
border-radius: 2px border-radius: 2px
flex-shrink: 0 flex-shrink: 0
margin-right: 8px margin-right: 8px
margin-bottom: 2px
if hexo-config('style.body.checkbox.enable') != true if hexo-config('style.body.checkbox.enable') != true
pointer-events: none pointer-events: none
/* Checkbox */ /* Checkbox */
@ -26,39 +25,40 @@ article .checkbox
position: absolute position: absolute
content: "" content: ""
background: #fff background: #fff
transition: all .2s ease-in-out
&:before &:before
left: 2px left: 1px
top: 8px top: 5px
width: 0 width: 0px
height: 2px height: 2px
transition: all .2s ease-in
transform: rotate(45deg) transform: rotate(45deg)
-webkit-transform: rotate(45deg) -webkit-transform: rotate(45deg)
-moz-transform: rotate(45deg) -moz-transform: rotate(45deg)
-ms-transform: rotate(45deg) -ms-transform: rotate(45deg)
-o-transform: rotate(45deg) -o-transform: rotate(45deg)
&:after &:after
right: 9px right: 7px
bottom: 3px bottom: 3px
width: 2px width: 2px
height: 0 height: 0px
transition: all .2s ease-out
transform: rotate(40deg) transform: rotate(40deg)
-webkit-transform: rotate(40deg) -webkit-transform: rotate(40deg)
-moz-transform: rotate(40deg) -moz-transform: rotate(40deg)
-ms-transform: rotate(40deg) -ms-transform: rotate(40deg)
-o-transform: rotate(40deg) -o-transform: rotate(40deg)
transition-delay: .2s transition-delay: .25s
&:checked &:checked
&:before &:before
left: 1px left: 0px
top: 10px top: 7px
width: 6px width: 6px
height: 2px height: 2px
&:after &:after
right: 5px right: 3px
bottom: 1px bottom: 1px
width: 2px width: 2px
height: 14px height: 10px
/* Radio */ /* Radio */
input[type=radio] input[type=radio]
@ -66,12 +66,12 @@ article .checkbox
&:before &:before
content: "" content: ""
display: block display: block
width: 10px width: 8px
height: 10px height: 8px
border-radius: 50% border-radius: 50%
margin: .2rem margin: 2px
transform: scale(0) transform: scale(0)
transition: all ease-out 250ms transition: all .25s ease-out
&:checked:before &:checked:before
transform: scale(1) transform: scale(1)
/* Colors */ /* Colors */

Loading…
Cancel
Save