%fieldset
.container
.line
%input#checkbox-html{:type => "checkbox"}
- 3.times do
%div
%label{:for => "checkbox-html"} HTML
View Compiled
fieldset {
.container {
display: flex;
align-items: center;
align-content: center;
}
label {
cursor: pointer;
margin-left: $p/2;
}
}
.line {
position: relative;
overflow: hidden;
background: mix($slate, $grey, 20%);
border-radius: 2px;
width: 24px;
height: 24px;
div {
position: absolute;
&:nth-of-type(1) {
transition: opacity 150ms ease-out, transform 0ms 150ms;
transform: scale(0);
will-change: transform, opacity;
transform-origin: center center;
opacity: 0;
z-index: 1;
top: calc(50% - 18px);
left: calc(50% - 18px);
border-radius: 100%;
background: $blue;
width: 36px;
height: 36px;
}
// checkmarks
&:nth-of-type(2), &:nth-of-type(3) {
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
&:before, &:after {
transform-origin: left center;
content: "";
display: block;
position: absolute;
height: 2px;
border-radius: 2px;
}
// shorter line
&:before {
bottom: 10px;
left: 3px;
width: 8px;
}
// longer line
&:after {
bottom: 5px;
right: -1px;
width: 17px;
}
}
&:nth-of-type(2) {
transition: all 150ms ease-out;
&:before, &:after {
background: mix(white, $slate, 80%);
}
// rotate into place
&:before {
transform: rotate(45deg);
}
&:after {
transform: rotate(-45deg);
}
}
&:nth-of-type(3) {
&:before, &:after {
opacity: 0;
background: white;
}
// rotate and scale into place
&:before {
transition: transform 100ms ease-out;
transform: rotate(45deg) scaleX(0);
}
&:after {
transition: transform 200ms ease-out 100ms;
transform: rotate(-45deg) scaleX(0);
}
}
}
input {
cursor: pointer;
appearance: none;
opacity: 0;
position: absolute;
z-index: 10;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
&:hover {
~ div:nth-of-type(2) {
background: rgba($blue, .1);
}
}
&:active, &:checked {
~ div {
&:nth-of-type(1) {
opacity: 1;
transition: transform 200ms ease-out;
transform: none;
}
&:nth-of-type(3) {
&:before, &:after {
opacity: 1;
}
&:before {
transform: rotate(45deg);
}
&:after {
transform: rotate(-45deg);
}
}
}
}
&:checked {
~ div:nth-of-type(2) {
background: $blue;
}
}
}
}
View Compiled
This Pen doesn't use any external JavaScript resources.