vault-lib 0.0.1 → 0.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +63 -63
- package/fesm2022/vault-lib.mjs +42 -42
- package/fesm2022/vault-lib.mjs.map +1 -1
- package/package.json +1 -1
- package/src/assets/gear.svg +9 -9
- package/src/lib/styles/_colors.scss +2 -2
- package/src/lib/styles/_fonts.scss +4 -0
- package/src/lib/styles/_hover-border-directive.scss +22 -22
- package/src/lib/styles/_mixins.scss +4 -4
- package/src/lib/styles/_reset.scss +6 -0
- package/src/lib/styles/index.scss +5 -3
package/README.md
CHANGED
|
@@ -1,63 +1,63 @@
|
|
|
1
|
-
# VaultLib
|
|
2
|
-
|
|
3
|
-
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.3.0.
|
|
4
|
-
|
|
5
|
-
## Code scaffolding
|
|
6
|
-
|
|
7
|
-
Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
|
|
8
|
-
|
|
9
|
-
```bash
|
|
10
|
-
ng generate component component-name
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
|
|
14
|
-
|
|
15
|
-
```bash
|
|
16
|
-
ng generate --help
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
## Building
|
|
20
|
-
|
|
21
|
-
To build the library, run:
|
|
22
|
-
|
|
23
|
-
```bash
|
|
24
|
-
ng build vault-lib
|
|
25
|
-
```
|
|
26
|
-
|
|
27
|
-
This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
|
|
28
|
-
|
|
29
|
-
### Publishing the Library
|
|
30
|
-
|
|
31
|
-
Once the project is built, you can publish your library by following these steps:
|
|
32
|
-
|
|
33
|
-
1. Navigate to the `dist` directory:
|
|
34
|
-
```bash
|
|
35
|
-
cd dist/vault-lib
|
|
36
|
-
```
|
|
37
|
-
|
|
38
|
-
2. Run the `npm publish` command to publish your library to the npm registry:
|
|
39
|
-
```bash
|
|
40
|
-
npm publish
|
|
41
|
-
```
|
|
42
|
-
|
|
43
|
-
## Running unit tests
|
|
44
|
-
|
|
45
|
-
To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
|
|
46
|
-
|
|
47
|
-
```bash
|
|
48
|
-
ng test
|
|
49
|
-
```
|
|
50
|
-
|
|
51
|
-
## Running end-to-end tests
|
|
52
|
-
|
|
53
|
-
For end-to-end (e2e) testing, run:
|
|
54
|
-
|
|
55
|
-
```bash
|
|
56
|
-
ng e2e
|
|
57
|
-
```
|
|
58
|
-
|
|
59
|
-
Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
|
|
60
|
-
|
|
61
|
-
## Additional Resources
|
|
62
|
-
|
|
63
|
-
For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
|
|
1
|
+
# VaultLib
|
|
2
|
+
|
|
3
|
+
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.3.0.
|
|
4
|
+
|
|
5
|
+
## Code scaffolding
|
|
6
|
+
|
|
7
|
+
Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
ng generate component component-name
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
ng generate --help
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Building
|
|
20
|
+
|
|
21
|
+
To build the library, run:
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
ng build vault-lib
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
|
|
28
|
+
|
|
29
|
+
### Publishing the Library
|
|
30
|
+
|
|
31
|
+
Once the project is built, you can publish your library by following these steps:
|
|
32
|
+
|
|
33
|
+
1. Navigate to the `dist` directory:
|
|
34
|
+
```bash
|
|
35
|
+
cd dist/vault-lib
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
2. Run the `npm publish` command to publish your library to the npm registry:
|
|
39
|
+
```bash
|
|
40
|
+
npm publish
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
## Running unit tests
|
|
44
|
+
|
|
45
|
+
To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
|
|
46
|
+
|
|
47
|
+
```bash
|
|
48
|
+
ng test
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
## Running end-to-end tests
|
|
52
|
+
|
|
53
|
+
For end-to-end (e2e) testing, run:
|
|
54
|
+
|
|
55
|
+
```bash
|
|
56
|
+
ng e2e
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
|
|
60
|
+
|
|
61
|
+
## Additional Resources
|
|
62
|
+
|
|
63
|
+
For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
|
package/fesm2022/vault-lib.mjs
CHANGED
|
@@ -5,18 +5,18 @@ import { CommonModule } from '@angular/common';
|
|
|
5
5
|
|
|
6
6
|
class VaultLib {
|
|
7
7
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: VaultLib, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", type: VaultLib, isStandalone: true, selector: "vault-vault-lib", ngImport: i0, template: `
|
|
9
|
-
<p>
|
|
10
|
-
vault-lib works!
|
|
11
|
-
</p>
|
|
8
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", type: VaultLib, isStandalone: true, selector: "vault-vault-lib", ngImport: i0, template: `
|
|
9
|
+
<p>
|
|
10
|
+
vault-lib works!
|
|
11
|
+
</p>
|
|
12
12
|
`, isInline: true, styles: [""] });
|
|
13
13
|
}
|
|
14
14
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: VaultLib, decorators: [{
|
|
15
15
|
type: Component,
|
|
16
|
-
args: [{ selector: 'vault-vault-lib', imports: [], template: `
|
|
17
|
-
<p>
|
|
18
|
-
vault-lib works!
|
|
19
|
-
</p>
|
|
16
|
+
args: [{ selector: 'vault-vault-lib', imports: [], template: `
|
|
17
|
+
<p>
|
|
18
|
+
vault-lib works!
|
|
19
|
+
</p>
|
|
20
20
|
` }]
|
|
21
21
|
}] });
|
|
22
22
|
|
|
@@ -30,38 +30,38 @@ class Button {
|
|
|
30
30
|
}, ...(ngDevMode ? [{ debugName: "isSecondary" }] : []));
|
|
31
31
|
onClick = output();
|
|
32
32
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: Button, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
33
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.4", type: Button, isStandalone: true, selector: "vault-button", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, host: { properties: { "class.vault-button--primary": "isPrimary()", "class.vault-button--secondary": "isSecondary()" } }, ngImport: i0, template: ` <button type="button" (click)="onClick.emit($event)" class="vault-button">
|
|
34
|
-
<ng-content>Button</ng-content>
|
|
35
|
-
</button>`, isInline: true, styles: [":host{position:relative;display:block;width:fit-content}.hover-border-directive:after{position:absolute;content:\"\";width:calc(100% + 8px);height:calc(100% + 8px);top:-6px;left:-6px;border:2px solid #44FF57}.vault-button{border:none;background:none;padding:10px
|
|
33
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.4", type: Button, isStandalone: true, selector: "vault-button", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, host: { properties: { "class.vault-button--primary": "isPrimary()", "class.vault-button--secondary": "isSecondary()" } }, ngImport: i0, template: ` <button type="button" (click)="onClick.emit($event)" class="vault-button">
|
|
34
|
+
<ng-content>Button</ng-content>
|
|
35
|
+
</button>`, isInline: true, styles: ["@font-face{font-family:Space Mono,monospace;src:url(https://fonts.googleapis.com/css2?family=Noto+Sans+Display:ital,wght@0,100..900;1,100..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&family=Share+Tech&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap)}*{padding:0;margin:0;font-family:Space Mono,monospace}:host{position:relative;display:block;width:fit-content}.hover-border-directive:after{position:absolute;content:\"\";width:calc(100% + 8px);height:calc(100% + 8px);top:-6px;left:-6px;border:2px solid #44FF57}.vault-button{border:none;background:none;padding:10px 18px;cursor:pointer;border:2px solid #44FF57;box-sizing:border-box}:host(.vault-button--primary) .vault-button{background:#44ff57;color:#060606}:host(.vault-button--secondary) .vault-button{background:#000;color:#44ff57}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
36
36
|
}
|
|
37
37
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: Button, decorators: [{
|
|
38
38
|
type: Component,
|
|
39
|
-
args: [{ selector: 'vault-button', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: ` <button type="button" (click)="onClick.emit($event)" class="vault-button">
|
|
40
|
-
<ng-content>Button</ng-content>
|
|
39
|
+
args: [{ selector: 'vault-button', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: ` <button type="button" (click)="onClick.emit($event)" class="vault-button">
|
|
40
|
+
<ng-content>Button</ng-content>
|
|
41
41
|
</button>`, host: {
|
|
42
42
|
'[class.vault-button--primary]': 'isPrimary()',
|
|
43
43
|
'[class.vault-button--secondary]': 'isSecondary()',
|
|
44
|
-
}, styles: [":host{position:relative;display:block;width:fit-content}.hover-border-directive:after{position:absolute;content:\"\";width:calc(100% + 8px);height:calc(100% + 8px);top:-6px;left:-6px;border:2px solid #44FF57}.vault-button{border:none;background:none;padding:10px
|
|
44
|
+
}, styles: ["@font-face{font-family:Space Mono,monospace;src:url(https://fonts.googleapis.com/css2?family=Noto+Sans+Display:ital,wght@0,100..900;1,100..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&family=Share+Tech&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap)}*{padding:0;margin:0;font-family:Space Mono,monospace}:host{position:relative;display:block;width:fit-content}.hover-border-directive:after{position:absolute;content:\"\";width:calc(100% + 8px);height:calc(100% + 8px);top:-6px;left:-6px;border:2px solid #44FF57}.vault-button{border:none;background:none;padding:10px 18px;cursor:pointer;border:2px solid #44FF57;box-sizing:border-box}:host(.vault-button--primary) .vault-button{background:#44ff57;color:#060606}:host(.vault-button--secondary) .vault-button{background:#000;color:#44ff57}\n"] }]
|
|
45
45
|
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], onClick: [{ type: i0.Output, args: ["onClick"] }] } });
|
|
46
46
|
|
|
47
47
|
class Fieldset {
|
|
48
48
|
legend = input(...(ngDevMode ? [undefined, { debugName: "legend" }] : []));
|
|
49
49
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: Fieldset, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
50
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: Fieldset, isStandalone: true, selector: "vault-fieldset", inputs: { legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<fieldset>
|
|
51
|
-
@if (legend()) {
|
|
52
|
-
<legend>{{ legend() }}</legend>
|
|
53
|
-
}
|
|
54
|
-
<ng-content></ng-content>
|
|
55
|
-
</fieldset>`, isInline: true, styles: [":host{position:relative;display:block;width:fit-content}.hover-border-directive:after{position:absolute;content:\"\";width:calc(100% + 8px);height:calc(100% + 8px);top:-6px;left:-6px;border:2px solid #44FF57}fieldset{border-color:#44ff57}fieldset legend{color:#44ff57}\n"] });
|
|
50
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: Fieldset, isStandalone: true, selector: "vault-fieldset", inputs: { legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<fieldset>
|
|
51
|
+
@if (legend()) {
|
|
52
|
+
<legend>{{ legend() }}</legend>
|
|
53
|
+
}
|
|
54
|
+
<ng-content></ng-content>
|
|
55
|
+
</fieldset>`, isInline: true, styles: ["@font-face{font-family:Space Mono,monospace;src:url(https://fonts.googleapis.com/css2?family=Noto+Sans+Display:ital,wght@0,100..900;1,100..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&family=Share+Tech&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap)}*{padding:0;margin:0;font-family:Space Mono,monospace}:host{position:relative;display:block;width:fit-content}.hover-border-directive:after{position:absolute;content:\"\";width:calc(100% + 8px);height:calc(100% + 8px);top:-6px;left:-6px;border:2px solid #44FF57}fieldset{border-color:#44ff57}fieldset legend{color:#44ff57}\n"] });
|
|
56
56
|
}
|
|
57
57
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: Fieldset, decorators: [{
|
|
58
58
|
type: Component,
|
|
59
|
-
args: [{ selector: 'vault-fieldset', imports: [], template: `<fieldset>
|
|
60
|
-
@if (legend()) {
|
|
61
|
-
<legend>{{ legend() }}</legend>
|
|
62
|
-
}
|
|
63
|
-
<ng-content></ng-content>
|
|
64
|
-
</fieldset>`, styles: [":host{position:relative;display:block;width:fit-content}.hover-border-directive:after{position:absolute;content:\"\";width:calc(100% + 8px);height:calc(100% + 8px);top:-6px;left:-6px;border:2px solid #44FF57}fieldset{border-color:#44ff57}fieldset legend{color:#44ff57}\n"] }]
|
|
59
|
+
args: [{ selector: 'vault-fieldset', imports: [], template: `<fieldset>
|
|
60
|
+
@if (legend()) {
|
|
61
|
+
<legend>{{ legend() }}</legend>
|
|
62
|
+
}
|
|
63
|
+
<ng-content></ng-content>
|
|
64
|
+
</fieldset>`, styles: ["@font-face{font-family:Space Mono,monospace;src:url(https://fonts.googleapis.com/css2?family=Noto+Sans+Display:ital,wght@0,100..900;1,100..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&family=Share+Tech&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap)}*{padding:0;margin:0;font-family:Space Mono,monospace}:host{position:relative;display:block;width:fit-content}.hover-border-directive:after{position:absolute;content:\"\";width:calc(100% + 8px);height:calc(100% + 8px);top:-6px;left:-6px;border:2px solid #44FF57}fieldset{border-color:#44ff57}fieldset legend{color:#44ff57}\n"] }]
|
|
65
65
|
}], propDecorators: { legend: [{ type: i0.Input, args: [{ isSignal: true, alias: "legend", required: false }] }] } });
|
|
66
66
|
|
|
67
67
|
class Spinner {
|
|
@@ -69,25 +69,25 @@ class Spinner {
|
|
|
69
69
|
timingFunction = input('linear', ...(ngDevMode ? [{ debugName: "timingFunction" }] : []));
|
|
70
70
|
duration = input(5000, ...(ngDevMode ? [{ debugName: "duration" }] : []));
|
|
71
71
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: Spinner, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
72
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.4", type: Spinner, isStandalone: true, selector: "vault-spinner", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, timingFunction: { classPropertyName: "timingFunction", publicName: "timingFunction", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<img
|
|
73
|
-
class="spinner"
|
|
74
|
-
[ngStyle]="{
|
|
75
|
-
'animation-duration': duration() + 'ms',
|
|
76
|
-
'animation-timing-function': timingFunction(),
|
|
77
|
-
}"
|
|
78
|
-
[src]="type() + '.svg'"
|
|
79
|
-
/>`, isInline: true, styles: [":host{position:relative;display:block;width:fit-content}.hover-border-directive:after{position:absolute;content:\"\";width:calc(100% + 8px);height:calc(100% + 8px);top:-6px;left:-6px;border:2px solid #44FF57}.spinner{animation-iteration-count:infinite;animation-name:spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
72
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.4", type: Spinner, isStandalone: true, selector: "vault-spinner", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, timingFunction: { classPropertyName: "timingFunction", publicName: "timingFunction", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<img
|
|
73
|
+
class="spinner"
|
|
74
|
+
[ngStyle]="{
|
|
75
|
+
'animation-duration': duration() + 'ms',
|
|
76
|
+
'animation-timing-function': timingFunction(),
|
|
77
|
+
}"
|
|
78
|
+
[src]="type() + '.svg'"
|
|
79
|
+
/>`, isInline: true, styles: ["@font-face{font-family:Space Mono,monospace;src:url(https://fonts.googleapis.com/css2?family=Noto+Sans+Display:ital,wght@0,100..900;1,100..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&family=Share+Tech&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap)}*{padding:0;margin:0;font-family:Space Mono,monospace}:host{position:relative;display:block;width:fit-content}.hover-border-directive:after{position:absolute;content:\"\";width:calc(100% + 8px);height:calc(100% + 8px);top:-6px;left:-6px;border:2px solid #44FF57}.spinner{animation-iteration-count:infinite;animation-name:spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
80
80
|
}
|
|
81
81
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: Spinner, decorators: [{
|
|
82
82
|
type: Component,
|
|
83
|
-
args: [{ selector: 'vault-spinner', imports: [CommonModule], template: `<img
|
|
84
|
-
class="spinner"
|
|
85
|
-
[ngStyle]="{
|
|
86
|
-
'animation-duration': duration() + 'ms',
|
|
87
|
-
'animation-timing-function': timingFunction(),
|
|
88
|
-
}"
|
|
89
|
-
[src]="type() + '.svg'"
|
|
90
|
-
/>`, styles: [":host{position:relative;display:block;width:fit-content}.hover-border-directive:after{position:absolute;content:\"\";width:calc(100% + 8px);height:calc(100% + 8px);top:-6px;left:-6px;border:2px solid #44FF57}.spinner{animation-iteration-count:infinite;animation-name:spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
83
|
+
args: [{ selector: 'vault-spinner', imports: [CommonModule], template: `<img
|
|
84
|
+
class="spinner"
|
|
85
|
+
[ngStyle]="{
|
|
86
|
+
'animation-duration': duration() + 'ms',
|
|
87
|
+
'animation-timing-function': timingFunction(),
|
|
88
|
+
}"
|
|
89
|
+
[src]="type() + '.svg'"
|
|
90
|
+
/>`, styles: ["@font-face{font-family:Space Mono,monospace;src:url(https://fonts.googleapis.com/css2?family=Noto+Sans+Display:ital,wght@0,100..900;1,100..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&family=Share+Tech&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap)}*{padding:0;margin:0;font-family:Space Mono,monospace}:host{position:relative;display:block;width:fit-content}.hover-border-directive:after{position:absolute;content:\"\";width:calc(100% + 8px);height:calc(100% + 8px);top:-6px;left:-6px;border:2px solid #44FF57}.spinner{animation-iteration-count:infinite;animation-name:spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
91
91
|
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], timingFunction: [{ type: i0.Input, args: [{ isSignal: true, alias: "timingFunction", required: false }] }], duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }] } });
|
|
92
92
|
|
|
93
93
|
class HoverBorder {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vault-lib.mjs","sources":["../../../projects/vault-lib/src/lib/vault-lib.ts","../../../projects/vault-lib/src/lib/components/button/button.ts","../../../projects/vault-lib/src/lib/components/fieldset/fieldset.ts","../../../projects/vault-lib/src/lib/components/spinner/spinner.ts","../../../projects/vault-lib/src/lib/directives/hover-border.ts","../../../projects/vault-lib/src/public-api.ts","../../../projects/vault-lib/src/vault-lib.ts"],"sourcesContent":["import { Component } from '@angular/core';\
|
|
1
|
+
{"version":3,"file":"vault-lib.mjs","sources":["../../../projects/vault-lib/src/lib/vault-lib.ts","../../../projects/vault-lib/src/lib/components/button/button.ts","../../../projects/vault-lib/src/lib/components/fieldset/fieldset.ts","../../../projects/vault-lib/src/lib/components/spinner/spinner.ts","../../../projects/vault-lib/src/lib/directives/hover-border.ts","../../../projects/vault-lib/src/public-api.ts","../../../projects/vault-lib/src/vault-lib.ts"],"sourcesContent":["import { Component } from '@angular/core';\n\n@Component({\n selector: 'vault-vault-lib',\n imports: [],\n template: `\n <p>\n vault-lib works!\n </p>\n `,\n styles: ``,\n})\nexport class VaultLib {\n\n}\n","import {\n ChangeDetectionStrategy,\n Component,\n computed,\n input,\n InputSignal,\n output,\n OutputEmitterRef,\n} from '@angular/core';\n\ntype ButtonType = 'primary' | 'secondary';\n\n@Component({\n selector: 'vault-button',\n standalone: true,\n imports: [],\n styleUrl: './button.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: ` <button type=\"button\" (click)=\"onClick.emit($event)\" class=\"vault-button\">\n <ng-content>Button</ng-content>\n </button>`,\n host: {\n '[class.vault-button--primary]': 'isPrimary()',\n '[class.vault-button--secondary]': 'isSecondary()',\n },\n})\nexport class Button {\n type: InputSignal<ButtonType> = input<ButtonType>('primary');\n\n isPrimary = computed(() => {\n return this.type() === 'primary';\n });\n\n isSecondary = computed(() => {\n return this.type() === 'secondary';\n });\n\n onClick: OutputEmitterRef<MouseEvent> = output();\n}\n","import { Component, input, InputSignal } from '@angular/core';\n\n@Component({\n selector: 'vault-fieldset',\n imports: [],\n template: `<fieldset>\n @if (legend()) {\n <legend>{{ legend() }}</legend>\n }\n <ng-content></ng-content>\n </fieldset>`,\n styleUrl: './fieldset.scss',\n})\nexport class Fieldset {\n legend: InputSignal<string | undefined> = input<string | undefined>();\n}\n","import { CommonModule } from '@angular/common';\nimport { Component, input, InputSignal } from '@angular/core';\n\nexport type SpinnerType = 'gear';\n\n@Component({\n selector: 'vault-spinner',\n imports: [CommonModule],\n template: `<img\n class=\"spinner\"\n [ngStyle]=\"{\n 'animation-duration': duration() + 'ms',\n 'animation-timing-function': timingFunction(),\n }\"\n [src]=\"type() + '.svg'\"\n />`,\n styleUrl: './spinner.scss',\n})\nexport class Spinner {\n type: InputSignal<SpinnerType> = input<SpinnerType>('gear');\n timingFunction: InputSignal<'linear' | 'ease-in-out'> = input<'linear' | 'ease-in-out'>('linear');\n duration: InputSignal<number> = input<number>(5000);\n}\n","import { Directive, ElementRef, inject, signal, WritableSignal } from '@angular/core';\n\n@Directive({\n selector: '[vaultHoverBorder]',\n standalone: true,\n host: {\n '(mouseenter)': 'onMouseEnter()',\n '(mouseleave)': 'onMouseLeave()',\n },\n})\nexport class HoverBorder {\n private element: ElementRef<HTMLElement> = inject(ElementRef);\n private readonly borderDirectiveClassName: string = 'hover-border-directive';\n\n onMouseEnter(): void {\n if (!this.element.nativeElement.classList.contains(this.borderDirectiveClassName))\n this.element.nativeElement.classList.add(this.borderDirectiveClassName);\n }\n\n onMouseLeave(): void {\n if (this.element.nativeElement.classList.contains(this.borderDirectiveClassName))\n this.element.nativeElement.classList.remove(this.borderDirectiveClassName);\n }\n}\n","/*\n * Public API of vault-lib\n */\n\nexport * from './lib/vault-lib';\n\nexport * from './lib/components/button/button';\nexport * from './lib/components/fieldset/fieldset';\nexport * from './lib/components/spinner/spinner';\n\nexport * from './lib/directives/hover-border';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
package/src/assets/gear.svg
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
<svg width="66" height="66" viewBox="0 0 66 66" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path d="M35.6562 0.5L35.8984 0.512695C37.0907 0.639408 37.9697 1.69013 37.9697 2.87891V8.95508C40.7234 9.58191 43.3106 10.6937 45.623 12.1504L49.875 7.83887L49.877 7.83691C50.3302 7.38368 50.9823 7.12308 51.5781 7.10742H51.5791C52.1837 7.09285 52.781 7.31233 53.2402 7.77148L57.71 12.2412C58.6448 13.176 58.5356 14.7141 57.6455 15.6045L53.3291 19.9199C54.7397 22.169 55.8121 24.6558 56.4561 27.3174H63.1211C64.3892 27.3174 65.5 28.3181 65.5 29.6318V35.9795C65.5 37.2932 64.3891 38.2939 63.1211 38.2939H56.5283C55.9032 41.1119 54.8164 43.7692 53.3281 46.1436L57.6455 50.46C58.5348 51.3495 58.6456 52.8231 57.71 53.7588L53.2402 58.2285C52.3053 59.1634 50.7672 59.0533 49.877 58.1631L45.626 53.9121C43.3097 55.3712 40.7131 56.4205 37.9697 57.0439V63.1865C37.9696 64.4774 36.9471 65.4998 35.6562 65.5H29.3076C28.0165 65.5 26.9943 64.4775 26.9941 63.1865V57.0439C24.2474 56.4203 21.6582 55.3713 19.3369 53.9121L15.0215 58.2285C14.1086 59.1411 12.6366 59.1411 11.7236 58.2285L7.25391 53.7588C6.34084 52.8458 6.34096 51.3729 7.25391 50.46L11.5684 46.1445C10.0741 43.7697 8.99274 41.1114 8.37012 38.2939H2.81348C1.52246 38.2938 0.499974 37.2706 0.5 35.9795V29.6318C0.5 28.3407 1.52245 27.3175 2.81348 27.3174H8.44141C9.07879 24.6402 10.141 22.1155 11.5684 19.8545L7.25391 15.54C6.34182 14.6279 6.34039 13.2217 7.25098 12.3086L11.7207 7.77441L11.7236 7.77148C12.1895 7.30589 12.7981 7.10751 13.3721 7.10742C13.9461 7.10742 14.5555 7.30563 15.0215 7.77148L19.4023 12.1523C21.704 10.7089 24.2529 9.58117 26.9941 8.95508V2.87891C26.9941 1.61083 27.9939 0.500012 29.3076 0.5H35.6562Z" stroke="#44FF57"/>
|
|
3
|
-
<mask id="mask0_204_95" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="1" y="1" width="64" height="64">
|
|
4
|
-
<path d="M29.3076 1C28.2926 1 27.4939 1.86352 27.4939 2.87854V9.35628C24.5325 9.97569 21.7879 11.1992 19.3319 12.7895L14.668 8.12551C14.3092 7.76665 13.8343 7.60729 13.3724 7.60729C12.9106 7.60729 12.4358 7.76669 12.0769 8.12551L7.60727 12.6599C6.8895 13.3776 6.88956 14.4685 7.60727 15.1862L12.2065 19.7854C10.6301 22.1903 9.48024 24.9162 8.83804 27.8178H2.81376C1.79874 27.8178 1 28.6165 1 29.6316V35.9798C0.999979 36.9948 1.79872 37.7935 2.81376 37.7935H8.77326C9.39556 40.8372 10.5612 43.6974 12.2065 46.2146L7.60727 50.8138C6.88956 51.5315 6.8895 52.6871 7.60727 53.4049L12.0769 57.8745C12.7946 58.5922 13.9502 58.5922 14.668 57.8745L19.2672 53.2753C21.7303 54.8852 24.5198 56.0162 27.4939 56.6437V63.1862C27.4939 64.2013 28.2926 65 29.3076 65H35.6558C36.6708 65 37.4696 64.2013 37.4696 63.1862V56.6437C40.4401 56.0162 43.2402 54.8852 45.6963 53.2753L50.2307 57.8097C50.9484 58.5274 52.1688 58.5923 52.8865 57.8745L57.3562 53.4049C58.0739 52.6871 58.0091 51.5315 57.2915 50.8138L52.6923 46.2146C54.3303 43.6974 55.5008 40.8372 56.1255 37.7935H63.1215C64.1365 37.7935 65 36.9948 65 35.9798V29.6316C65 28.6165 64.1365 27.8178 63.1215 27.8178H56.0607C55.4124 24.9325 54.2502 22.2492 52.6923 19.8502L57.2915 15.251C58.0092 14.5333 58.074 13.3129 57.3562 12.5951L52.8865 8.12551C52.5277 7.76663 52.0643 7.59585 51.591 7.60729C51.1178 7.61972 50.5895 7.83141 50.2307 8.19028L45.6963 12.7895C43.2359 11.1839 40.446 9.97955 37.4696 9.35628V2.87854C37.4696 1.86352 36.6708 1 35.6558 1H29.3076Z" fill="black"/>
|
|
5
|
-
</mask>
|
|
6
|
-
<g mask="url(#mask0_204_95)">
|
|
7
|
-
<path d="M29.3076 1C28.2926 1 27.4939 1.86352 27.4939 2.87854V9.35628C24.5325 9.97569 21.7879 11.1992 19.3319 12.7895L14.668 8.12551C14.3092 7.76665 13.8343 7.60729 13.3724 7.60729C12.9106 7.60729 12.4358 7.76669 12.0769 8.12551L7.60727 12.6599C6.8895 13.3776 6.88956 14.4685 7.60727 15.1862L12.2065 19.7854C10.6301 22.1903 9.48024 24.9162 8.83804 27.8178H2.81376C1.79874 27.8178 1 28.6165 1 29.6316V35.9798C0.999979 36.9948 1.79872 37.7935 2.81376 37.7935H8.77326C9.39556 40.8372 10.5612 43.6974 12.2065 46.2146L7.60727 50.8138C6.88956 51.5315 6.8895 52.6871 7.60727 53.4049L12.0769 57.8745C12.7946 58.5922 13.9502 58.5922 14.668 57.8745L19.2672 53.2753C21.7303 54.8852 24.5198 56.0162 27.4939 56.6437V63.1862C27.4939 64.2013 28.2926 65 29.3076 65H35.6558C36.6708 65 37.4696 64.2013 37.4696 63.1862V56.6437C40.4401 56.0162 43.2402 54.8852 45.6963 53.2753L50.2307 57.8097C50.9484 58.5274 52.1688 58.5923 52.8865 57.8745L57.3562 53.4049C58.0739 52.6871 58.0091 51.5315 57.2915 50.8138L52.6923 46.2146C54.3303 43.6974 55.5008 40.8372 56.1255 37.7935H63.1215C64.1365 37.7935 65 36.9948 65 35.9798V29.6316C65 28.6165 64.1365 27.8178 63.1215 27.8178H56.0607C55.4124 24.9325 54.2502 22.2492 52.6923 19.8502L57.2915 15.251C58.0092 14.5333 58.074 13.3129 57.3562 12.5951L52.8865 8.12551C52.5277 7.76663 52.0643 7.59585 51.591 7.60729C51.1178 7.61972 50.5895 7.83141 50.2307 8.19028L45.6963 12.7895C43.2359 11.1839 40.446 9.97955 37.4696 9.35628V2.87854C37.4696 1.86352 36.6708 1 35.6558 1H29.3076Z" fill="#44FF57"/>
|
|
8
|
-
</g>
|
|
9
|
-
</svg>
|
|
1
|
+
<svg width="66" height="66" viewBox="0 0 66 66" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M35.6562 0.5L35.8984 0.512695C37.0907 0.639408 37.9697 1.69013 37.9697 2.87891V8.95508C40.7234 9.58191 43.3106 10.6937 45.623 12.1504L49.875 7.83887L49.877 7.83691C50.3302 7.38368 50.9823 7.12308 51.5781 7.10742H51.5791C52.1837 7.09285 52.781 7.31233 53.2402 7.77148L57.71 12.2412C58.6448 13.176 58.5356 14.7141 57.6455 15.6045L53.3291 19.9199C54.7397 22.169 55.8121 24.6558 56.4561 27.3174H63.1211C64.3892 27.3174 65.5 28.3181 65.5 29.6318V35.9795C65.5 37.2932 64.3891 38.2939 63.1211 38.2939H56.5283C55.9032 41.1119 54.8164 43.7692 53.3281 46.1436L57.6455 50.46C58.5348 51.3495 58.6456 52.8231 57.71 53.7588L53.2402 58.2285C52.3053 59.1634 50.7672 59.0533 49.877 58.1631L45.626 53.9121C43.3097 55.3712 40.7131 56.4205 37.9697 57.0439V63.1865C37.9696 64.4774 36.9471 65.4998 35.6562 65.5H29.3076C28.0165 65.5 26.9943 64.4775 26.9941 63.1865V57.0439C24.2474 56.4203 21.6582 55.3713 19.3369 53.9121L15.0215 58.2285C14.1086 59.1411 12.6366 59.1411 11.7236 58.2285L7.25391 53.7588C6.34084 52.8458 6.34096 51.3729 7.25391 50.46L11.5684 46.1445C10.0741 43.7697 8.99274 41.1114 8.37012 38.2939H2.81348C1.52246 38.2938 0.499974 37.2706 0.5 35.9795V29.6318C0.5 28.3407 1.52245 27.3175 2.81348 27.3174H8.44141C9.07879 24.6402 10.141 22.1155 11.5684 19.8545L7.25391 15.54C6.34182 14.6279 6.34039 13.2217 7.25098 12.3086L11.7207 7.77441L11.7236 7.77148C12.1895 7.30589 12.7981 7.10751 13.3721 7.10742C13.9461 7.10742 14.5555 7.30563 15.0215 7.77148L19.4023 12.1523C21.704 10.7089 24.2529 9.58117 26.9941 8.95508V2.87891C26.9941 1.61083 27.9939 0.500012 29.3076 0.5H35.6562Z" stroke="#44FF57"/>
|
|
3
|
+
<mask id="mask0_204_95" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="1" y="1" width="64" height="64">
|
|
4
|
+
<path d="M29.3076 1C28.2926 1 27.4939 1.86352 27.4939 2.87854V9.35628C24.5325 9.97569 21.7879 11.1992 19.3319 12.7895L14.668 8.12551C14.3092 7.76665 13.8343 7.60729 13.3724 7.60729C12.9106 7.60729 12.4358 7.76669 12.0769 8.12551L7.60727 12.6599C6.8895 13.3776 6.88956 14.4685 7.60727 15.1862L12.2065 19.7854C10.6301 22.1903 9.48024 24.9162 8.83804 27.8178H2.81376C1.79874 27.8178 1 28.6165 1 29.6316V35.9798C0.999979 36.9948 1.79872 37.7935 2.81376 37.7935H8.77326C9.39556 40.8372 10.5612 43.6974 12.2065 46.2146L7.60727 50.8138C6.88956 51.5315 6.8895 52.6871 7.60727 53.4049L12.0769 57.8745C12.7946 58.5922 13.9502 58.5922 14.668 57.8745L19.2672 53.2753C21.7303 54.8852 24.5198 56.0162 27.4939 56.6437V63.1862C27.4939 64.2013 28.2926 65 29.3076 65H35.6558C36.6708 65 37.4696 64.2013 37.4696 63.1862V56.6437C40.4401 56.0162 43.2402 54.8852 45.6963 53.2753L50.2307 57.8097C50.9484 58.5274 52.1688 58.5923 52.8865 57.8745L57.3562 53.4049C58.0739 52.6871 58.0091 51.5315 57.2915 50.8138L52.6923 46.2146C54.3303 43.6974 55.5008 40.8372 56.1255 37.7935H63.1215C64.1365 37.7935 65 36.9948 65 35.9798V29.6316C65 28.6165 64.1365 27.8178 63.1215 27.8178H56.0607C55.4124 24.9325 54.2502 22.2492 52.6923 19.8502L57.2915 15.251C58.0092 14.5333 58.074 13.3129 57.3562 12.5951L52.8865 8.12551C52.5277 7.76663 52.0643 7.59585 51.591 7.60729C51.1178 7.61972 50.5895 7.83141 50.2307 8.19028L45.6963 12.7895C43.2359 11.1839 40.446 9.97955 37.4696 9.35628V2.87854C37.4696 1.86352 36.6708 1 35.6558 1H29.3076Z" fill="black"/>
|
|
5
|
+
</mask>
|
|
6
|
+
<g mask="url(#mask0_204_95)">
|
|
7
|
+
<path d="M29.3076 1C28.2926 1 27.4939 1.86352 27.4939 2.87854V9.35628C24.5325 9.97569 21.7879 11.1992 19.3319 12.7895L14.668 8.12551C14.3092 7.76665 13.8343 7.60729 13.3724 7.60729C12.9106 7.60729 12.4358 7.76669 12.0769 8.12551L7.60727 12.6599C6.8895 13.3776 6.88956 14.4685 7.60727 15.1862L12.2065 19.7854C10.6301 22.1903 9.48024 24.9162 8.83804 27.8178H2.81376C1.79874 27.8178 1 28.6165 1 29.6316V35.9798C0.999979 36.9948 1.79872 37.7935 2.81376 37.7935H8.77326C9.39556 40.8372 10.5612 43.6974 12.2065 46.2146L7.60727 50.8138C6.88956 51.5315 6.8895 52.6871 7.60727 53.4049L12.0769 57.8745C12.7946 58.5922 13.9502 58.5922 14.668 57.8745L19.2672 53.2753C21.7303 54.8852 24.5198 56.0162 27.4939 56.6437V63.1862C27.4939 64.2013 28.2926 65 29.3076 65H35.6558C36.6708 65 37.4696 64.2013 37.4696 63.1862V56.6437C40.4401 56.0162 43.2402 54.8852 45.6963 53.2753L50.2307 57.8097C50.9484 58.5274 52.1688 58.5923 52.8865 57.8745L57.3562 53.4049C58.0739 52.6871 58.0091 51.5315 57.2915 50.8138L52.6923 46.2146C54.3303 43.6974 55.5008 40.8372 56.1255 37.7935H63.1215C64.1365 37.7935 65 36.9948 65 35.9798V29.6316C65 28.6165 64.1365 27.8178 63.1215 27.8178H56.0607C55.4124 24.9325 54.2502 22.2492 52.6923 19.8502L57.2915 15.251C58.0092 14.5333 58.074 13.3129 57.3562 12.5951L52.8865 8.12551C52.5277 7.76663 52.0643 7.59585 51.591 7.60729C51.1178 7.61972 50.5895 7.83141 50.2307 8.19028L45.6963 12.7895C43.2359 11.1839 40.446 9.97955 37.4696 9.35628V2.87854C37.4696 1.86352 36.6708 1 35.6558 1H29.3076Z" fill="#44FF57"/>
|
|
8
|
+
</g>
|
|
9
|
+
</svg>
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
$primary: #44FF57;
|
|
2
|
-
$light: #44ff5780;
|
|
1
|
+
$primary: #44FF57;
|
|
2
|
+
$light: #44ff5780;
|
|
3
3
|
$background: #060606;
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
@font-face {
|
|
2
|
+
font-family: "Space Mono", monospace;
|
|
3
|
+
src: url("https://fonts.googleapis.com/css2?family=Noto+Sans+Display:ital,wght@0,100..900;1,100..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&family=Share+Tech&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");
|
|
4
|
+
}
|
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
@use 'colors' as *;
|
|
2
|
-
|
|
3
|
-
$space: 4px;
|
|
4
|
-
$border-width: 2px;
|
|
5
|
-
|
|
6
|
-
:host {
|
|
7
|
-
position: relative;
|
|
8
|
-
display: block;
|
|
9
|
-
width: fit-content;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
.hover-border-directive {
|
|
13
|
-
|
|
14
|
-
&::after {
|
|
15
|
-
position: absolute;
|
|
16
|
-
content: '';
|
|
17
|
-
width: calc(100% + $space * 2);
|
|
18
|
-
height: calc(100% + $space * 2);
|
|
19
|
-
top: -$space - $border-width;
|
|
20
|
-
left: -$space - $border-width;
|
|
21
|
-
border: $border-width solid $primary;
|
|
22
|
-
}
|
|
1
|
+
@use 'colors' as *;
|
|
2
|
+
|
|
3
|
+
$space: 4px;
|
|
4
|
+
$border-width: 2px;
|
|
5
|
+
|
|
6
|
+
:host {
|
|
7
|
+
position: relative;
|
|
8
|
+
display: block;
|
|
9
|
+
width: fit-content;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.hover-border-directive {
|
|
13
|
+
|
|
14
|
+
&::after {
|
|
15
|
+
position: absolute;
|
|
16
|
+
content: '';
|
|
17
|
+
width: calc(100% + $space * 2);
|
|
18
|
+
height: calc(100% + $space * 2);
|
|
19
|
+
top: -$space - $border-width;
|
|
20
|
+
left: -$space - $border-width;
|
|
21
|
+
border: $border-width solid $primary;
|
|
22
|
+
}
|
|
23
23
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
@mixin flex-center {
|
|
2
|
-
display: flex;
|
|
3
|
-
align-items: center;
|
|
4
|
-
justify-content: center;
|
|
1
|
+
@mixin flex-center {
|
|
2
|
+
display: flex;
|
|
3
|
+
align-items: center;
|
|
4
|
+
justify-content: center;
|
|
5
5
|
}
|