gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2025-01-04 15:53:30 +03:00
Code Issues Packages Projects Releases Wiki Activity

Style indeterminate checkboxes

Browse Source
This commit is contained in:
Mattias Granlund 2023-12-19 15:18:49 +01:00
parent ef99630540
commit b73ccf8251
1 changed files with 19 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
packages/ui/src/lib/components/Checkbox.svelte
View File

@ -72,12 +72,21 @@
} }
&:indeterminate { &:indeterminate {
background-color: lime;
&::after { &::after {
opacity: 1; opacity: 1;
filter: invert(0); filter: invert(0);
transform: scale(1); transform: scale(1);
} }
&::before {
content: '';
position: absolute;
width: 50%;
height: 2px;
background-color: var(--clr-theme-scale-ntrl-30);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
} }
/* checked */ /* checked */
@ -103,23 +112,24 @@
} }
} }
/* tick element */
&::after { &::after {
content: ''; content: '';
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: var(--radius-s); border-radius: var(--radius-s);
transition:
opacity var(--transition-fast),
transform var(--transition-fast);
opacity: 0;
}
/* tick element */
&:not(:indeterminate)::after {
background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik05IDEuNUw0LjkyMTM5IDUuNzQ4NTVDNC41Mjc4MyA2LjE1ODUxIDMuODcyMTcgNi4xNTg1MSAzLjQ3ODYxIDUuNzQ4NTZMMSAzLjE2NjY3IiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjEuNSIvPgo8L3N2Zz4K'); background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik05IDEuNUw0LjkyMTM5IDUuNzQ4NTVDNC41Mjc4MyA2LjE1ODUxIDMuODcyMTcgNi4xNTg1MSAzLjQ3ODYxIDUuNzQ4NTZMMSAzLjE2NjY3IiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjEuNSIvPgo8L3N2Zz4K');
background-position: center; background-position: center;
background-size: 80%; background-size: 80%;
background-repeat: no-repeat; background-repeat: no-repeat;
transition:
opacity var(--transition-fast),
transform var(--transition-fast);
filter: invert(var(--helpers-invert-1));
transform: scale(0.4);
opacity: 0;
} }
/* modifiers */ /* modifiers */
@ -129,4 +139,5 @@
height: var(--space-14); height: var(--space-14);
} }
} }
/* test */
</style> </style>