hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add switch class for checkboxes (fixes #70)

Browse Source
This commit is contained in:
daudix
2024-09-01 04:51:44 +03:00
parent 65770c2d93
commit 82d82cc811
3 changed files with 81 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
sass/_input.scss
View File

@ -81,30 +81,67 @@ input[type="checkbox"] {
mask-size: cover;
width: 1rem;
height: 1rem;
content: "";
}
&.switch {
vertical-align: -0.625rem;
box-shadow: var(--edge-highlight);
border: none;
border-radius: 999px;
width: 3rem;
height: 2rem;
&::before {
-webkit-mask-image: none;
top: 0.25rem;
left: 0.25rem;
transform: none;
transform-origin: center;
opacity: 1;
mask-image: none;
transition: var(--transition);
box-shadow: var(--shadow);
border-radius: 50%;
background-color: white;
width: 1.5rem;
height: 1.5rem;
}
&:checked {
background-color: var(--primary-color);
&::before {
transform: translateX(1rem);
background-color: var(--contrast-color);
}
}
&:disabled {
&::before {
opacity: 0.6;
box-shadow: none;
}
}
}
}
input[type="color"] {
vertical-align: -0.375em;
border: 0.25rem solid var(--fg-muted-2);
box-shadow: var(--edge-highlight);
border: none;
border-radius: var(--rounded-corner-small);
padding: 0;
padding: 0.25rem;
width: 3rem;
height: 2rem;
&:hover {
background-color: var(--fg-muted-2);
}
&:disabled {
border: 0.25rem solid var(--fg-muted-2);
background-color: var(--fg-muted-1);
opacity: 0.6;
border: none;
}
&::-moz-color-swatch {
border: none;
border-radius: calc(var(--rounded-corner-small) / 2);
border-radius: calc(var(--rounded-corner-small) - 0.25rem);
}
&::-webkit-color-swatch-wrapper {
@ -112,7 +149,7 @@ input[type="color"] {
}
&::-webkit-color-swatch {
border-radius: calc(var(--rounded-corner-small) / 2);
border-radius: calc(var(--rounded-corner-small) - 0.25rem);
}
}
@ -135,16 +172,10 @@ input[type="range"] {
cursor: grab;
box-shadow: var(--shadow);
border-radius: 999px;
background-color: hsl(0, 0%, 90%);
background-color: white;
width: 1.5rem;
height: 1.5rem;
&:hover {
transform: scale(1.1);
box-shadow: var(--shadow-raised);
background-color: white;
}
&:active {
transform: scale(var(--active));
cursor: grabbing;
@ -158,16 +189,10 @@ input[type="range"] {
box-shadow: var(--shadow);
border: none;
border-radius: 999px;
background-color: hsl(0, 0%, 90%);
background-color: white;
width: 1.5rem;
height: 1.5rem;
&:hover {
transform: scale(1.1);
box-shadow: var(--shadow-raised);
background-color: white;
}
&:active {
transform: scale(var(--active));
cursor: grabbing;