%fieldset
.container
.symbol
%input#checkbox-sym{:type => "checkbox"}
- 3.times do
%div ✓
%label{:for => "checkbox-sym"} Symbol
View Compiled
fieldset {
.container {
display: flex;
align-items: center;
align-content: center;
}
label {
cursor: pointer;
margin-left: $p/2;
}
}
.symbol {
position: relative;
overflow: hidden;
border-radius: 2px;
background: mix($slate, $grey, 20%);
width: 24px;
height: 24px;
div {
position: absolute;
&:nth-of-type(1) {
transition: opacity 150ms ease-out, transform 0ms 150ms;
transform: scale(0) translateZ(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;
color: transparent;
font-size: 0;
}
&:nth-of-type(2), &:nth-of-type(3) {
transition: all 150ms ease-out;
display: flex;
align-items: center;
align-content: center;
justify-content: center;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 18px;
}
&:nth-of-type(2) {
color: rgba(white, .2);
}
&:nth-of-type(3) {
opacity: 0;
color: white;
}
}
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: translateZ(0);
}
&:nth-of-type(3) {
opacity: 1;
}
}
}
&:checked {
~ div:nth-of-type(2) {
background: $blue;
}
}
}
}
View Compiled
This Pen doesn't use any external JavaScript resources.