diff --git a/projects/my-wallet-ds/src/lib/atoms/checkbox/checkbox.component.css b/projects/my-wallet-ds/src/lib/atoms/checkbox/checkbox.component.css new file mode 100644 index 0000000..eca7425 --- /dev/null +++ b/projects/my-wallet-ds/src/lib/atoms/checkbox/checkbox.component.css @@ -0,0 +1,50 @@ +label { + cursor: pointer; +} + +.checkbox-hidden { + position: absolute; + opacity: 0; + cursor: pointer; + height: 0; + width: 0; + + &:checked + .checkmark::after { + content: ""; + position: absolute; + left: 11px; + bottom: 3px; + width: 6px; + height: 18px; + border: solid #0ea5e9; + border-width: 0 6px 6px 0; + transform: rotate(45deg); + box-shadow: 2px 4px 4px -3px #0ea5e9; + } + + &:checked + .checkmark::before { + opacity: 1; + } + +} + +.checkmark { + display: inline-block; + width: 24px; + height: 24px; + border: 1px solid #606463; + position: relative; + transition: all 0.3s ease; + + &::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + border-radius: 4px; + pointer-events: none; + transition: all 0.3s ease; + } +} \ No newline at end of file diff --git a/projects/my-wallet-ds/src/lib/atoms/checkbox/checkbox.component.html b/projects/my-wallet-ds/src/lib/atoms/checkbox/checkbox.component.html new file mode 100644 index 0000000..ad97b2d --- /dev/null +++ b/projects/my-wallet-ds/src/lib/atoms/checkbox/checkbox.component.html @@ -0,0 +1,5 @@ + + diff --git a/projects/my-wallet-ds/src/lib/atoms/checkbox/checkbox.component.spec.ts b/projects/my-wallet-ds/src/lib/atoms/checkbox/checkbox.component.spec.ts new file mode 100644 index 0000000..07c8825 --- /dev/null +++ b/projects/my-wallet-ds/src/lib/atoms/checkbox/checkbox.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CheckboxComponent } from './checkbox.component'; + +describe('CheckboxComponent', () => { + let component: CheckboxComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [CheckboxComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(CheckboxComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/my-wallet-ds/src/lib/atoms/checkbox/checkbox.component.ts b/projects/my-wallet-ds/src/lib/atoms/checkbox/checkbox.component.ts new file mode 100644 index 0000000..375c22c --- /dev/null +++ b/projects/my-wallet-ds/src/lib/atoms/checkbox/checkbox.component.ts @@ -0,0 +1,12 @@ +import { Component, output } from '@angular/core'; + +@Component({ + selector: 'mw-checkbox', + standalone: true, + imports: [], + templateUrl: './checkbox.component.html', + styleUrl: './checkbox.component.css' +}) +export class CheckboxComponent { + checked = output() +}