Last active
December 23, 2020 17:25
-
-
Save tak-dcxi/1f873390bb549ce02e9855554f913b42 to your computer and use it in GitHub Desktop.
My Custom Checkbox
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.my-checkbox { | |
align-items: center; | |
cursor: pointer; | |
display: inline-flex; | |
} | |
.my-checkbox__input { | |
// a11y-css-resetから引用 | |
// https://github.com/mike-engel/a11y-css-reset | |
border: 0; | |
clip: rect(0 0 0 0); | |
clip-path: inset(50%); | |
height: 1px; | |
margin: -1px; | |
overflow: hidden; | |
padding: 0; | |
position: absolute; | |
white-space: nowrap; | |
width: 1px; | |
} | |
.my-checkbox__icon { | |
display: inline-block; | |
height: 1.5em; | |
position: relative; | |
width: 1.5em; | |
&::before, | |
&::after { | |
content: ''; | |
position: absolute; | |
} | |
&::before { | |
border: 2px solid #999; | |
height: 100%; | |
left: 0; | |
top: 0; | |
transition: border-color .5s, opacity .5s, transform .5s $easeOutCirc; | |
width: 100%; | |
// input[type=checkbox]がチェックされたとき | |
.my-checkbox__input:checked + & { | |
border-color: #779a75; | |
opacity: 0; | |
transform: rotate(45deg) scale3d(2, 2, 1); | |
pointer-events: none; // クリッカブルな箇所が広がってしまうのでクリックを無効にする | |
} | |
} | |
&::after { | |
border-bottom: 2px solid transparent; | |
border-left: 2px solid transparent; | |
height: .5em; | |
left: .25em; | |
opacity: 0; | |
top: .375em; | |
transform: rotate(-225deg); | |
transition: opacity .5s, transform .5s $easeOutCirc; | |
width: 1em; | |
// input[type=checkbox]がチェックされたとき | |
.my-checkbox__input:checked + & { | |
border-bottom: 2px solid #779a75; | |
border-left: 2px solid #779a75; | |
opacity: 1; | |
transform: rotate(-45deg); | |
} | |
} | |
} | |
.my-checkbox__text { | |
display: inline-block; | |
letter-spacing: .01em; | |
line-height: 1.5; | |
position: relative; | |
transition: color .3s; | |
@mixin isActive { | |
color: #779a75; | |
} | |
.my-checkbox__input:checked ~ & { | |
@include isActive; | |
} | |
// :focus-visibleで指定することでTab移動でfocusされた場合のみfocusを可視化する | |
.my-checkbox__input.focus-visible ~ & { | |
@include isActive; | |
} | |
@media(hover) { | |
&:hover { | |
@include isActive; | |
} | |
} | |
&::after { | |
background-color: #999; | |
bottom: -2px; | |
content: ''; | |
display: inline-block; | |
height: 2px; | |
left: 0; | |
position: absolute; | |
transform: scale3d(0, 1, 1); | |
transform-origin: right; | |
transition: transform .3s; | |
width: 100%; | |
@mixin isActive { | |
transform: scale3d(1, 1, 1); | |
transform-origin: left; | |
} | |
// :focus-visibleで指定することでTab移動でfocusされた場合のみfocusを可視化する | |
.my-checkbox__input:focus-visible ~ & { | |
@include isActive; | |
} | |
@media(hover) { | |
.my-checkbox:hover & { | |
@include isActive; | |
} | |
} | |
} | |
.my-checkbox__icon + & { | |
margin-left: 1em; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<label class="my-checkbox"> | |
<input class="my-checkbox__input" type="checkbox"> | |
<span class="my-checkbox__icon"></span> | |
<span class="my-checkbox__text">ラベル</span> | |
</label> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment