ershisan99/flashcards-example-project
1
0
Fork 0
mirror of https://github.com/ershisan99/flashcards-example-project.git synced 2025-12-19 12:33:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

homework 1: components

Browse Source
This commit is contained in:
Andres
2023-07-29 12:47:02 +02:00
parent e0792c6b6f
commit 06afed2826
35 changed files with 1343 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/components/ui/checkbox/checkbox.module.scss Normal file
View File

@@ -0,0 +1,80 @@
.container {
display: flex;
align-items: center;
}
.label {
cursor: pointer;
display: flex;
align-items: center;
&.disabled {
cursor: initial;
color: var(--color-dark-100);
}
}
.root {
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
background-color: var(--color-dark-900);
border: 2px solid var(--color-light-900);
border-radius: 2px;
&:focus {
background-color: var(--color-bg-focus);
}
&:disabled {
cursor: initial;
border-color: var(--color-dark-100);
}
&[data-state='checked']:disabled {
background-color: var(--color-checkbox-disabled);
}
}
.buttonWrapper {
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background-color: var(--color-dark-900);
border-radius: 50%;
&.disabled {
cursor: initial;
}
&:focus-within,
&:hover:not(.disabled),
&:hover .root:not([data-state='checked']) {
background-color: var(--color-dark-500);
}
&:active:not(.disabled) {
background-color: var(--color-dark-100);
}
&.left {
margin-left: -9px;
}
}
.indicator {
width: 18px;
height: 18px;
}