open-vault/ui/app/styles/core/toggle.scss

105 lines
2.1 KiB
SCSS
Raw Normal View History

/* COPIED FROM BULMA/SWITCH */
.toggle[type='checkbox'] {
outline: 0;
user-select: none;
position: absolute;
margin-bottom: 0;
opacity: 0;
left: 0;
}
.toggle[type='checkbox'][disabled] {
cursor: not-allowed;
}
.toggle[type='checkbox'][disabled] + label {
opacity: 0.5;
}
.toggle[type='checkbox'][disabled] + label::before {
opacity: 0.5;
}
.toggle[type='checkbox'][disabled] + label::after {
opacity: 0.5;
}
.toggle[type='checkbox'][disabled] + label:hover {
cursor: not-allowed;
}
.toggle[type='checkbox'] + label {
position: relative;
display: inline-block;
font-size: 1rem;
padding-left: 3.5rem;
cursor: pointer;
}
.toggle[type='checkbox'] + label::before {
position: absolute;
display: block;
top: 0;
left: 0;
width: 3rem;
height: 1.5rem;
border: 0.1rem solid transparent;
border-radius: 0.75rem;
background: $ui-gray-300;
content: '';
}
.toggle[type='checkbox'] + label::after {
display: block;
position: absolute;
top: 0.25rem;
left: 0.25rem;
width: 1rem;
height: 1rem;
transform: translate3d(0, 0, 0);
border-radius: 50%;
background: white;
transition: all 0.25s ease-out;
content: '';
}
.toggle[type='checkbox']:checked + label::before {
background: $ui-gray-700;
}
.toggle[type='checkbox']:checked + label::after {
left: 1.625rem;
}
/* CUSTOM */
.toggle[type='checkbox'] {
&.is-small {
+ label {
font-size: $size-8;
font-weight: bold;
padding-left: $size-8 * 2.5;
margin: 0 0.25rem;
&::before {
top: $size-8 / 5;
height: $size-8;
width: $size-8 * 2;
}
&::after {
width: $size-8 * 0.8;
height: $size-8 * 0.8;
transform: translateX(0.15rem);
left: 0;
top: $size-8/ 4;
}
}
&:checked + label::after {
left: 0;
transform: translateX(($size-8 * 2) - ($size-8 * 0.94));
}
}
&.is-large {
width: 4.5rem;
height: 2.25rem;
}
}
.toggle[type='checkbox'].is-small + label::after {
will-change: left;
}
.toggle[type='checkbox']:focus + label {
box-shadow: 0 0 1px $blue;
}
.toggle[type='checkbox'].is-success:checked + label::before {
background: $blue;
}