aron/awebsite
aron/awebsite
1
0
Fork 0
Code Issues Pull requests Wiki Activity Actions

adjust style

Browse source
This commit is contained in:
Aron Petau 2025-05-16 12:08:22 +02:00
parent c9612d8a1d
commit ad8718ba49
48 changed files with 4217 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

203
sass/_input.scss Normal file
View file

@ -0,0 +1,203 @@
input[type="radio"],
input[type="checkbox"],
input[type="color"] {
position: relative;
appearance: none;
transition: var(--transition);
cursor: pointer;
border: 0.15rem solid var(--fg-muted-2);
background-color: var(--fg-muted-1);
width: 1rem;
height: 1rem;
&:hover {
background-color: var(--fg-muted-2);
}
&:disabled {
opacity: var(--disabled-opacity);
cursor: not-allowed;
&:hover {
background-color: var(--fg-muted-1);
&:checked {
background-color: var(--accent-color);
}
}
}
}
input[type="radio"],
input[type="checkbox"] {
&::before {
display: block;
position: absolute;
transform: scale(0.5);
opacity: 0;
transition: var(--transition);
background-color: var(--contrast-color);
content: "";
}
&:checked {
border: 0.15rem solid transparent;
background-color: var(--accent-color);
&::before {
transform: scale(1);
opacity: 1;
}
}
}
input[type="radio"] {
vertical-align: -0.1875em;
border-radius: 50%;
&::before {
inset-block-start: 0.125rem;
inset-inline-start: 0.125rem;
border-radius: 50%;
width: 0.5rem;
height: 0.5rem;
}
}
input[type="checkbox"] {
vertical-align: -0.1875em;
border-radius: calc(var(--rounded-corner-small) / 2);
&::before {
-webkit-mask-image: var(--icon-checkmark);
transform-origin: bottom left;
mask-image: var(--icon-checkmark);
mask-size: cover;
inset-block-start: -0.125rem;
inset-inline-start: -0.125rem;
width: 1rem;
height: 1rem;
}
&.switch {
vertical-align: -0.375rem;
box-shadow: var(--edge-highlight);
border: none;
border-radius: 999px;
width: 2.5rem;
height: 1.5rem;
&.big {
vertical-align: -0.625rem;
width: 3rem;
height: 2rem;
&::before {
width: 1.5rem;
height: 1.5rem;
}
}
&::before {
transform: none;
transform-origin: center;
opacity: 1;
mask-image: none;
transition: var(--transition);
inset-block-start: 0.25rem;
inset-inline-start: 0.25rem;
box-shadow: var(--shadow);
border-radius: 50%;
background-color: white;
width: 1rem;
height: 1rem;
}
&:checked {
background-color: var(--accent-color);
&::before {
transform: translateX(1rem);
background-color: var(--contrast-color);
:root[dir*="rtl"] & {
transform: translateX(-1rem);
}
}
}
&:disabled {
&::before {
box-shadow: none;
}
}
}
}
input[type="color"] {
vertical-align: -0.375em;
box-shadow: var(--edge-highlight);
border: none;
border-radius: var(--rounded-corner-small);
padding: 0.25rem;
width: 3rem;
height: 2rem;
&::-moz-color-swatch {
border: none;
border-radius: calc(var(--rounded-corner-small) - 0.25rem);
}
&::-webkit-color-swatch-wrapper {
padding: 0;
}
&::-webkit-color-swatch {
border-radius: calc(var(--rounded-corner-small) - 0.25rem);
}
}
input[type="range"] {
appearance: none;
transition: var(--transition);
cursor: pointer;
box-shadow: var(--edge-highlight);
border-radius: 999px;
background: var(--accent-color);
width: 100%;
height: 0.5rem;
&::-webkit-slider-thumb {
appearance: none;
filter: brightness(0.9);
transition: var(--transition);
cursor: grab;
box-shadow: var(--shadow);
border-radius: 999px;
background-color: white;
width: 1.5rem;
height: 1.5rem;
&:active {
transform: var(--active);
cursor: grabbing;
}
}
&::-moz-range-thumb {
appearance: none;
transition: var(--transition);
cursor: grab;
box-shadow: var(--shadow);
border: none;
border-radius: 999px;
background-color: white;
width: 1.5rem;
height: 1.5rem;
&:active {
transform: var(--active);
cursor: grabbing;
}
}
}