MCorange/cinny
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add checkbox component

Browse Source 
Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
Ajay Bura
2021-12-30 11:37:18 +05:30
parent fd9f734de1
commit d3dcb320f4
2 changed files with 67 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/app/atoms/button/Checkbox.scss Normal file
View File

@@ -0,0 +1,37 @@
@use '../../partials/flex';
.checkbox {
width: 20px;
height: 20px;
border-radius: calc(var(--bo-radius) / 2);
background-color: var(--bg-surface-border);
box-shadow: var(--bs-surface-border);
cursor: pointer;
@extend .cp-fx__row--c-c;
&--active {
background-color: black;
&::before {
content: "";
display: inline-block;
width: 12px;
height: 6px;
border: 6px solid white;
border-width: 0 0 3px 3px;
transform: rotateZ(-45deg) translate(1px, -1px);
}
}
}
.checkbox-primary.checkbox--active {
background-color: var(--bg-primary);
}
.checkbox-positive.checkbox--active {
background-color: var(--bg-positive);
}
.checkbox-caution.checkbox--active {
background-color: var(--bg-caution);
}
.checkbox-danger.checkbox--active {
background-color: var(--bg-danger);
}