105 lines
1.8 KiB
SCSS
105 lines
1.8 KiB
SCSS
.ct-checkboxes-container {
|
|
display: grid;
|
|
gap: 20px;
|
|
|
|
&[data-type*="grid"] {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 10px;
|
|
}
|
|
|
|
&[data-type*="bordered"] > * {
|
|
padding: 10px 15px;
|
|
border-radius: 4px;
|
|
border: 1px solid rgba(179, 189, 201, 0.3);
|
|
}
|
|
|
|
&[data-type*="reversed"] > * {
|
|
flex-direction: row-reverse;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
|
|
.ct-checkbox-container {
|
|
--checkMarkColor: #fff;
|
|
--background: rgba(179, 189, 201, 0.8);
|
|
--backgroundActive: var(--ui-accent-color);
|
|
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
// padding: 10px 0;
|
|
transition: color 0.15s ease;
|
|
|
|
&:not(.activated) {
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
|
|
.ct-checkbox:not(.active) {
|
|
--background: var(--backgroundActive);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.activated {
|
|
--checkMarkColor: rgba(104, 124, 147, 0.6);
|
|
--backgroundActive: rgba(179, 189, 201, 0.3);
|
|
}
|
|
}
|
|
|
|
|
|
.ct-checkbox {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
width: 18px;
|
|
height: 18px;
|
|
flex: 0 0 18px;
|
|
|
|
&:before {
|
|
position: absolute;
|
|
z-index: 1;
|
|
content: '';
|
|
width: 18px;
|
|
height: 18px;
|
|
margin: auto;
|
|
border-radius: 100%;
|
|
box-shadow: inset 0px 0px 0px 2px var(--background);
|
|
transition: all 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955);
|
|
}
|
|
|
|
svg {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
&.active {
|
|
&:before {
|
|
width: 22px;
|
|
height: 22px;
|
|
box-shadow: inset 0px 0px 0px 12px var(--backgroundActive);
|
|
}
|
|
}
|
|
|
|
|
|
// check mark
|
|
.check {
|
|
fill: none;
|
|
stroke: var(--checkMarkColor);
|
|
stroke-width: 2.5;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
stroke-miterlimit: 10;
|
|
|
|
stroke-dasharray: 15;
|
|
stroke-dashoffset: 16;
|
|
transition: stroke 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955),
|
|
stroke-dashoffset 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
|
|
}
|
|
|
|
&.active .check {
|
|
stroke-dashoffset: 0;
|
|
}
|
|
} |