Janus007/PlanTempusApp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CSS optimization

Browse source
This commit is contained in:
Janus C. H. Knudsen 2026-01-14 00:47:06 +01:00
parent e739ce2ac7
commit 29f9c79764
22 changed files with 1175 additions and 642 deletions
Download patch file Download diff file Expand all files Collapse all files

54
PlanTempus.Application/wwwroot/css/controls.css
View file

@ -13,10 +13,10 @@ swp-toggle-row {
justify-content: space-between;
padding: var(--spacing-3) 0;
border-bottom: 1px solid var(--color-border);
}
swp-toggle-row:last-child {
border-bottom: none;
&:last-child {
border-bottom: none;
}
}
swp-toggle-label {
@ -48,14 +48,14 @@ swp-toggle-slider::before {
left: 2px;
width: calc(50% - 4px);
height: calc(100% - 4px);
background: color-mix(in srgb, var(--color-green) 18%, white);
background: var(--bg-green-strong);
border-radius: var(--radius-sm);
transition: transform 200ms ease, background 200ms ease;
}
swp-toggle-slider[data-value="no"]::before {
transform: translateX(100%);
background: color-mix(in srgb, var(--color-red) 18%, white);
background: var(--bg-red-strong);
}
swp-toggle-option {
@ -97,10 +97,19 @@ swp-checkbox-row {
border-radius: var(--radius-md);
cursor: pointer;
transition: background var(--transition-fast);
}
swp-checkbox-row:hover {
background: var(--color-background-alt);
&:hover {
background: var(--color-background-alt);
}
&.checked swp-checkbox-box {
background: var(--color-teal);
border-color: var(--color-teal);
& svg {
opacity: 1;
}
}
}
swp-checkbox-box {
@ -114,23 +123,14 @@ swp-checkbox-box {
flex-shrink: 0;
margin-top: 1px;
transition: all var(--transition-fast);
}
swp-checkbox-row.checked swp-checkbox-box {
background: var(--color-teal);
border-color: var(--color-teal);
}
swp-checkbox-box svg {
width: 12px;
height: 12px;
fill: white;
opacity: 0;
transition: opacity var(--transition-fast);
}
swp-checkbox-row.checked swp-checkbox-box svg {
opacity: 1;
& svg {
width: 12px;
height: 12px;
fill: white;
opacity: 0;
transition: opacity var(--transition-fast);
}
}
swp-checkbox-text {