@iamgld/ui 0.0.1
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/.storybook/main.ts +16 -0
- package/.storybook/preview.ts +14 -0
- package/.storybook/tsconfig.json +12 -0
- package/.storybook/typings.d.ts +4 -0
- package/README.md +63 -0
- package/eslint.config.js +34 -0
- package/ng-package.json +10 -0
- package/package.json +16 -0
- package/public/styles/layers/_base.scss +39 -0
- package/public/styles/layers/_objects.scss +154 -0
- package/public/styles/layers/_setting.scss +119 -0
- package/public/styles/layers/_tools.scss +390 -0
- package/public/styles/layers/_trumps.scss +11 -0
- package/public/styles/styles.scss +14 -0
- package/src/lib/components/buttons/button/button.component.html +10 -0
- package/src/lib/components/buttons/button/button.component.scss +128 -0
- package/src/lib/components/buttons/button/button.component.spec.ts +21 -0
- package/src/lib/components/buttons/button/button.component.stories.ts +91 -0
- package/src/lib/components/buttons/button/button.component.ts +29 -0
- package/src/lib/components/buttons/index.ts +1 -0
- package/src/lib/components/index.ts +1 -0
- package/src/public-api.ts +6 -0
- package/tsconfig.lib.json +15 -0
- package/tsconfig.lib.prod.json +11 -0
- package/tsconfig.spec.json +11 -0
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import type { StorybookConfig } from '@storybook/angular'
|
|
2
|
+
|
|
3
|
+
const config: StorybookConfig = {
|
|
4
|
+
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
|
|
5
|
+
addons: [
|
|
6
|
+
'@storybook/addon-onboarding',
|
|
7
|
+
'@storybook/addon-essentials',
|
|
8
|
+
'@chromatic-com/storybook',
|
|
9
|
+
'@storybook/addon-interactions',
|
|
10
|
+
],
|
|
11
|
+
framework: {
|
|
12
|
+
name: '@storybook/angular',
|
|
13
|
+
options: {},
|
|
14
|
+
},
|
|
15
|
+
}
|
|
16
|
+
export default config
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
{
|
|
2
|
+
"extends": "../tsconfig.lib.json",
|
|
3
|
+
"compilerOptions": {
|
|
4
|
+
"types": ["node"],
|
|
5
|
+
"allowSyntheticDefaultImports": true,
|
|
6
|
+
"resolveJsonModule": true
|
|
7
|
+
},
|
|
8
|
+
"exclude": ["../src/test.ts", "../src/**/*.spec.ts"],
|
|
9
|
+
"include": ["../src/**/*.stories.*", "./preview.ts"],
|
|
10
|
+
"files": ["./typings.d.ts"]
|
|
11
|
+
}
|
|
12
|
+
|
package/README.md
ADDED
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
# IamgldUi
|
|
2
|
+
|
|
3
|
+
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.0.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 iamgld-ui
|
|
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/iamgld-ui
|
|
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/eslint.config.js
ADDED
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
// @ts-check
|
|
2
|
+
const tseslint = require('typescript-eslint')
|
|
3
|
+
const rootConfig = require('../../eslint.config.js')
|
|
4
|
+
|
|
5
|
+
module.exports = tseslint.config(
|
|
6
|
+
...rootConfig,
|
|
7
|
+
{
|
|
8
|
+
files: ['**/*.ts'],
|
|
9
|
+
extends: [],
|
|
10
|
+
rules: {
|
|
11
|
+
'@angular-eslint/directive-selector': [
|
|
12
|
+
'error',
|
|
13
|
+
{
|
|
14
|
+
type: 'attribute',
|
|
15
|
+
prefix: 'gld',
|
|
16
|
+
style: 'camelCase',
|
|
17
|
+
},
|
|
18
|
+
],
|
|
19
|
+
'@angular-eslint/component-selector': [
|
|
20
|
+
'error',
|
|
21
|
+
{
|
|
22
|
+
type: 'element',
|
|
23
|
+
prefix: 'gld',
|
|
24
|
+
style: 'kebab-case',
|
|
25
|
+
},
|
|
26
|
+
],
|
|
27
|
+
},
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
files: ['**/*.html'],
|
|
31
|
+
rules: {},
|
|
32
|
+
},
|
|
33
|
+
)
|
|
34
|
+
|
package/ng-package.json
ADDED
package/package.json
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@iamgld/ui",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"publishConfig": {
|
|
5
|
+
"access": "public"
|
|
6
|
+
},
|
|
7
|
+
"peerDependencies": {
|
|
8
|
+
"@angular/common": "19.0.0",
|
|
9
|
+
"@angular/core": "19.0.0"
|
|
10
|
+
},
|
|
11
|
+
"dependencies": {
|
|
12
|
+
"tslib": "2.3.0"
|
|
13
|
+
},
|
|
14
|
+
"sideEffects": false
|
|
15
|
+
}
|
|
16
|
+
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
@use './setting' as setting;
|
|
2
|
+
@use './tools' as tools;
|
|
3
|
+
|
|
4
|
+
/*
|
|
5
|
+
En esta capa estarán:
|
|
6
|
+
1. Estilos que normalizan comportamiento en distintos entornos
|
|
7
|
+
2. Reset de estilos ejm. normalize css etc..
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
*,
|
|
11
|
+
*::before,
|
|
12
|
+
*::after {
|
|
13
|
+
box-sizing: border-box;
|
|
14
|
+
min-width: 0;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
html,
|
|
18
|
+
body {
|
|
19
|
+
font-family: var(--font--poppins);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
body {
|
|
23
|
+
margin: 0;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
h1,
|
|
27
|
+
h2,
|
|
28
|
+
h3,
|
|
29
|
+
h4,
|
|
30
|
+
h5,
|
|
31
|
+
h6 {
|
|
32
|
+
text-wrap: balance;
|
|
33
|
+
margin: 0;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
p {
|
|
37
|
+
text-wrap: pretty;
|
|
38
|
+
margin: 0;
|
|
39
|
+
}
|
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
@use './setting' as setting;
|
|
2
|
+
@use './tools' as tools;
|
|
3
|
+
|
|
4
|
+
/*
|
|
5
|
+
En esta capa estarán:
|
|
6
|
+
1. Patrones de diseños, elementos reutilizables
|
|
7
|
+
2. No cosméticos, ni colores, ni tipografías
|
|
8
|
+
3. Exclusivamente se usaran selectores de clase
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
.Spinner {
|
|
12
|
+
position: absolute;
|
|
13
|
+
top: 0;
|
|
14
|
+
left: 0;
|
|
15
|
+
width: 100%;
|
|
16
|
+
height: 100%;
|
|
17
|
+
display: flex;
|
|
18
|
+
justify-content: center;
|
|
19
|
+
align-items: center;
|
|
20
|
+
z-index: var(--zindex--one);
|
|
21
|
+
background-color: rgba(var(--darkgray--three), 0.5);
|
|
22
|
+
opacity: 0.5;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.Icon {
|
|
26
|
+
color: inherit;
|
|
27
|
+
font-size: var(--font-size--heading-three);
|
|
28
|
+
font-weight: normal;
|
|
29
|
+
position: relative;
|
|
30
|
+
|
|
31
|
+
&--little {
|
|
32
|
+
font-size: var(--font-size--normal);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
&--left {
|
|
36
|
+
margin-left: var(--spacing--xxs);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
&--right {
|
|
40
|
+
margin-right: var(--spacing--xxs);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
&--button {
|
|
44
|
+
font-size: var(--font-size--heading-three);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
&--button-icon {
|
|
48
|
+
top: -4px;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
// Colors
|
|
53
|
+
.Color {
|
|
54
|
+
// Utilities class for colors
|
|
55
|
+
// @each $key, $value in setting.$colors {
|
|
56
|
+
// &--#{$key} {
|
|
57
|
+
// color: $value !important;
|
|
58
|
+
// }
|
|
59
|
+
// }
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
// Background Colors
|
|
63
|
+
.BgColor {
|
|
64
|
+
// Utilities class for background colors
|
|
65
|
+
// @each $key, $value in setting.$colors {
|
|
66
|
+
// &--#{$key} {
|
|
67
|
+
// background-color: $value !important;
|
|
68
|
+
// }
|
|
69
|
+
// }
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
// Paddings
|
|
73
|
+
.Padding {
|
|
74
|
+
// Utilities class for padding
|
|
75
|
+
// @each $key, $value in setting.$spacing {
|
|
76
|
+
// &--#{$key} {
|
|
77
|
+
// padding: $value !important;
|
|
78
|
+
// }
|
|
79
|
+
// &-bottom--#{$key} {
|
|
80
|
+
// padding-bottom: $value !important;
|
|
81
|
+
// }
|
|
82
|
+
// &-top--#{$key} {
|
|
83
|
+
// padding-top: $value !important;
|
|
84
|
+
// }
|
|
85
|
+
// &-right--#{$key} {
|
|
86
|
+
// padding-right: $value !important;
|
|
87
|
+
// }
|
|
88
|
+
// &-left--#{$key} {
|
|
89
|
+
// padding-left: $value !important;
|
|
90
|
+
// }
|
|
91
|
+
// }
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
// Margins
|
|
95
|
+
.Margin {
|
|
96
|
+
// Utilities class for margins auto
|
|
97
|
+
// &-bottom--auto {
|
|
98
|
+
// margin-bottom: auto;
|
|
99
|
+
// }
|
|
100
|
+
// &-top--auto {
|
|
101
|
+
// margin-top: auto;
|
|
102
|
+
// }
|
|
103
|
+
// &-right--auto {
|
|
104
|
+
// margin-right: auto;
|
|
105
|
+
// }
|
|
106
|
+
// &-left--auto {
|
|
107
|
+
// margin-left: auto;
|
|
108
|
+
// }
|
|
109
|
+
// Utilities class for padding
|
|
110
|
+
// @each $key, $value in setting.$spacing {
|
|
111
|
+
// &--#{$key} {
|
|
112
|
+
// margin: $value !important;
|
|
113
|
+
// }
|
|
114
|
+
// &-bottom--#{$key} {
|
|
115
|
+
// margin-bottom: $value !important;
|
|
116
|
+
// }
|
|
117
|
+
// &-top--#{$key} {
|
|
118
|
+
// margin-top: $value !important;
|
|
119
|
+
// }
|
|
120
|
+
// &-right--#{$key} {
|
|
121
|
+
// margin-right: $value !important;
|
|
122
|
+
// }
|
|
123
|
+
// &-left--#{$key} {
|
|
124
|
+
// margin-left: $value !important;
|
|
125
|
+
// }
|
|
126
|
+
// }
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
// Border Radius
|
|
130
|
+
.Radius {
|
|
131
|
+
// Utilities class for border radius
|
|
132
|
+
// @each $key, $value in setting.$radius {
|
|
133
|
+
// &--#{$key} {
|
|
134
|
+
// border-radius: $value;
|
|
135
|
+
// }
|
|
136
|
+
// }
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
// Font Family
|
|
140
|
+
.Font-poppins {
|
|
141
|
+
font-family: var(--font--poppins);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.Font--normal {
|
|
145
|
+
font-weight: normal;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.Font--lighter {
|
|
149
|
+
font-weight: lighter;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.Font--bold {
|
|
153
|
+
font-weight: bold;
|
|
154
|
+
}
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
/*
|
|
2
|
+
En esta capa estarán:
|
|
3
|
+
1. configuraciones disponibles globalmente
|
|
4
|
+
2. cambios de configuraciones
|
|
5
|
+
3. colores representativos de la marca o empresa
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
:root {
|
|
9
|
+
// Breakpoints
|
|
10
|
+
--gld-break-point--zero: 0;
|
|
11
|
+
--gld-break-point--mobile: 320px;
|
|
12
|
+
--gld-break-point--landscape: 576px;
|
|
13
|
+
--gld-break-point--tablet: 768px;
|
|
14
|
+
--gld-break-point--desktop: 1080px;
|
|
15
|
+
--gld-break-point--extra-desktop: 1280px;
|
|
16
|
+
|
|
17
|
+
// Fonts
|
|
18
|
+
--gld-font-size--heading-one: 36px;
|
|
19
|
+
--gld-font-size--heading-two: 26px;
|
|
20
|
+
--gld-font-size--heading-three: 20px;
|
|
21
|
+
--gld-font-size--normal: 16px;
|
|
22
|
+
--gld-font-size--small: 12px;
|
|
23
|
+
--gld-font-size--tiny: 8px;
|
|
24
|
+
--gld-font--poppins: 'Poppins', sans-serif;
|
|
25
|
+
|
|
26
|
+
// Radius
|
|
27
|
+
--gld-radius--z: 0;
|
|
28
|
+
--gld-radius--xxxs: 4px;
|
|
29
|
+
--gld-radius--xxs: 6px;
|
|
30
|
+
--gld-radius--xs: 8px;
|
|
31
|
+
--gld-radius--s: 12px;
|
|
32
|
+
--gld-radius--m: 16px;
|
|
33
|
+
--gld-radius--l: 24px;
|
|
34
|
+
--gld-radius--xl: 32px;
|
|
35
|
+
--gld-radius--xxl: 40px;
|
|
36
|
+
|
|
37
|
+
// Spacing
|
|
38
|
+
--gld-spacing--z: 0;
|
|
39
|
+
--gld-spacing--xxxs: 4px;
|
|
40
|
+
--gld-spacing--xxs: 8px;
|
|
41
|
+
--gld-spacing--xs: 12px;
|
|
42
|
+
--gld-spacing--s: 16px;
|
|
43
|
+
--gld-spacing--m: 24px;
|
|
44
|
+
--gld-spacing--l: 32px;
|
|
45
|
+
--gld-spacing--xl: 48px;
|
|
46
|
+
--gld-spacing--xxl: 70px;
|
|
47
|
+
|
|
48
|
+
// Z Index
|
|
49
|
+
--gld-zindex--one: 1000;
|
|
50
|
+
--gld-zindex--two: 2000;
|
|
51
|
+
--gld-zindex--three: 3000;
|
|
52
|
+
--gld-zindex--four: 4000;
|
|
53
|
+
--gld-zindex--five: 5000;
|
|
54
|
+
|
|
55
|
+
// Icons Size
|
|
56
|
+
--gld-icon-size--large: 48px;
|
|
57
|
+
--gld-icon-size--medium: 40px;
|
|
58
|
+
--gld-icon-size--normal: 32px;
|
|
59
|
+
--gld-icon-size--small: 24px;
|
|
60
|
+
--gld-icon-size--tiny: 16px;
|
|
61
|
+
|
|
62
|
+
// Colors
|
|
63
|
+
--gld-red: #ef4444;
|
|
64
|
+
--gld-red-transparent--010: #{rgba(#ef4444, 0.1)};
|
|
65
|
+
--gld-red-transparent--020: #{rgba(#ef4444, 0.2)};
|
|
66
|
+
--gld-red-transparent--030: #{rgba(#ef4444, 0.3)};
|
|
67
|
+
--gld-blue: #3c82f6;
|
|
68
|
+
--gld-blue-transparent--010: #{rgba(#3c82f6, 0.1)};
|
|
69
|
+
--gld-blue-transparent--020: #{rgba(#3c82f6, 0.2)};
|
|
70
|
+
--gld-blue-transparent--030: #{rgba(#3c82f6, 0.3)};
|
|
71
|
+
--gld-green: #12b981;
|
|
72
|
+
--gld-green-transparent--010: #{rgba(#12b981, 0.1)};
|
|
73
|
+
--gld-green-transparent--020: #{rgba(#12b981, 0.2)};
|
|
74
|
+
--gld-green-transparent--030: #{rgba(#12b981, 0.3)};
|
|
75
|
+
--gld-purple: #a855f7;
|
|
76
|
+
--gld-purple-transparent--010: #{rgba(#a855f7, 0.1)};
|
|
77
|
+
--gld-purple-transparent--020: #{rgba(#a855f7, 0.2)};
|
|
78
|
+
--gld-purple-transparent--030: #{rgba(#a855f7, 0.3)};
|
|
79
|
+
--gld-mustard: #ebb305;
|
|
80
|
+
--gld-mustard-transparent--010: #{rgba(#ebb305, 0.1)};
|
|
81
|
+
--gld-mustard-transparent--020: #{rgba(#ebb305, 0.2)};
|
|
82
|
+
--gld-mustard-transparent--030: #{rgba(#ebb305, 0.3)};
|
|
83
|
+
--gld-orange: #f97315;
|
|
84
|
+
--gld-orange-transparent--010: #{rgba(#f97315, 0.1)};
|
|
85
|
+
--gld-orange-transparent--020: #{rgba(#f97315, 0.2)};
|
|
86
|
+
--gld-orange-transparent--020: #{rgba(#f97315, 0.3)};
|
|
87
|
+
--gld-pink: #ec4899;
|
|
88
|
+
--gld-pink-transparent--010: #{rgba(#ec4899, 0.1)};
|
|
89
|
+
--gld-pink-transparent--020: #{rgba(#ec4899, 0.2)};
|
|
90
|
+
--gld-pink-transparent--030: #{rgba(#ec4899, 0.3)};
|
|
91
|
+
--gld-gray: #b5b5b5;
|
|
92
|
+
--gld-gray-transparent--015: #{rgba(#b5b5b5, 0.15)};
|
|
93
|
+
--gld-gray-transparent--050: #{rgba(#b5b5b5, 0.5)};
|
|
94
|
+
--gld-gray-transparent--075: #{rgba(#b5b5b5, 0.75)};
|
|
95
|
+
--gld-white: #fff;
|
|
96
|
+
--gld-whitelight: #f9fafb;
|
|
97
|
+
--gld-whitelight-transparent--090: #{rgba(#f9fafb, 0.9)};
|
|
98
|
+
--gld-whitelight-transparent--080: #{rgba(#f9fafb, 0.8)};
|
|
99
|
+
--gld-whitelight-transparent--070: #{rgba(#f9fafb, 0.7)};
|
|
100
|
+
--gld-whitelight-transparent--060: #{rgba(#f9fafb, 0.6)};
|
|
101
|
+
--gld-whitelight-transparent--030: #{rgba(#f9fafb, 0.3)};
|
|
102
|
+
--gld-darkblue: #101827;
|
|
103
|
+
--gld-darkblue-transparent--090: #{rgba(#101827, 0.9)};
|
|
104
|
+
--gld-darkblue-transparent--080: #{rgba(#101827, 0.8)};
|
|
105
|
+
--gld-darkblue-transparent--070: #{rgba(#101827, 0.7)};
|
|
106
|
+
--gld-darkblue-transparent--060: #{rgba(#101827, 0.6)};
|
|
107
|
+
--gld-darkblue-transparent--030: #{rgba(#101827, 0.3)};
|
|
108
|
+
|
|
109
|
+
// Borders
|
|
110
|
+
--gld-border-size: 1px;
|
|
111
|
+
// Animations
|
|
112
|
+
--gld-animation-time--150: 150ms;
|
|
113
|
+
--gld-animation-time--250: 250ms;
|
|
114
|
+
--gld-animation-time--10s: 10s;
|
|
115
|
+
// General
|
|
116
|
+
--gld-max-width: 1280px;
|
|
117
|
+
--gld-navbar-height: 50px;
|
|
118
|
+
--gld-sidebar-width: 250px;
|
|
119
|
+
}
|
|
@@ -0,0 +1,390 @@
|
|
|
1
|
+
@use './setting' as setting;
|
|
2
|
+
@use 'sass:math';
|
|
3
|
+
|
|
4
|
+
/*
|
|
5
|
+
En esta capa estarán:
|
|
6
|
+
1. Herramientas que están disponible globalmente
|
|
7
|
+
2. Funciones utilitarias
|
|
8
|
+
3. Mixins
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
/*
|
|
12
|
+
Transforma un valor de pixeles a em.
|
|
13
|
+
@param {number} $el - el valor en pixeles que se desea convertir.
|
|
14
|
+
@param {number} $context - el valor en pixeles del contenedor.
|
|
15
|
+
@return {number} el tamaño transformado en em.
|
|
16
|
+
*/
|
|
17
|
+
@function em($el, $context: 16px) {
|
|
18
|
+
@if meta.type_of($el) ==number and math.unit($el) == 'px' {
|
|
19
|
+
@return math.div($el, $context) * 1em;
|
|
20
|
+
} @else {
|
|
21
|
+
@error 'Function em() requires a px unit as first argument / La función em() requiere una unidad de pixeles como primer argumento (el segundo es opcional)';
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
/*
|
|
26
|
+
Transforma un valor de pixeles a rem.
|
|
27
|
+
@param {number} $el - el valor en pixeles que se desea convertir.
|
|
28
|
+
@return {number} el tamaño transformado en rem.
|
|
29
|
+
*/
|
|
30
|
+
@function rem($el) {
|
|
31
|
+
@if meta.type_of($el) ==number and math.unit($el) == 'px' {
|
|
32
|
+
@return math.div($el / 16px) * 1rem;
|
|
33
|
+
} @else {
|
|
34
|
+
@error 'Function rem() requires a px unit as argument / La funcion rem() requiere una unidad de pixeles como argumento';
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
// Devuelve true si el breakpoint es parte del core
|
|
39
|
+
@function isCoreBreakpoint($breakpoint) {
|
|
40
|
+
@if var($breakpoint) {
|
|
41
|
+
@return true;
|
|
42
|
+
} @else {
|
|
43
|
+
@return false;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
// Devuelve true si el breakpoint es válido (em, rem, px)
|
|
48
|
+
@function isValidBreakpoint($breakpoint) {
|
|
49
|
+
@if meta.type-of($breakpoint)
|
|
50
|
+
==number and
|
|
51
|
+
(
|
|
52
|
+
math.unit($breakpoint) ==
|
|
53
|
+
'px' or
|
|
54
|
+
math.unit($breakpoint) ==
|
|
55
|
+
'em' or
|
|
56
|
+
math.unit($breakpoint) ==
|
|
57
|
+
'rem'
|
|
58
|
+
)
|
|
59
|
+
{
|
|
60
|
+
@return true;
|
|
61
|
+
} @else {
|
|
62
|
+
@return false;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
// Obtiene un breakpoint del core
|
|
67
|
+
@function getBp($breakpoint) {
|
|
68
|
+
@return var($breakpoint);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
// Convierte un valor en em o rem a px
|
|
72
|
+
@function toPx($value) {
|
|
73
|
+
@if meta.type-of($value) ==number {
|
|
74
|
+
@if math.unit($value) == 'em' {
|
|
75
|
+
@return math.div($value, 1em) * 16px;
|
|
76
|
+
} @else if math.unit($value) == 'rem' {
|
|
77
|
+
@return math.div($value, 1rem) * 16px;
|
|
78
|
+
} @else if math.unit($value) == 'px' {
|
|
79
|
+
@return $value;
|
|
80
|
+
} @else {
|
|
81
|
+
@error "La funcion toPx() solo acepta números en em o rem o px";
|
|
82
|
+
}
|
|
83
|
+
} @else {
|
|
84
|
+
@error "La funcion toPx() solo acepta números en em o rem";
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
// From (mayor que $breakpoint)
|
|
89
|
+
@mixin from($from) {
|
|
90
|
+
@if $from ==zero {
|
|
91
|
+
@media screen and (width > 0) {
|
|
92
|
+
@content;
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
@if $from ==mobile {
|
|
97
|
+
@media screen and (width > 320px) {
|
|
98
|
+
@content;
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
@if $from ==landscape {
|
|
103
|
+
@media screen and (width > 576px) {
|
|
104
|
+
@content;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
@if $from ==tablet {
|
|
109
|
+
@media screen and (width > 768px) {
|
|
110
|
+
@content;
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
@if $from ==desktop {
|
|
115
|
+
@media screen and (width > 992px) {
|
|
116
|
+
@content;
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
@if $from ==extra-desktop {
|
|
121
|
+
@media screen and (width > 1280px) {
|
|
122
|
+
@content;
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
// To (es menor que $to)
|
|
128
|
+
@mixin to($to) {
|
|
129
|
+
@if $to ==zero {
|
|
130
|
+
@media screen and (width <=0) {
|
|
131
|
+
@content;
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
@if $to ==mobile {
|
|
136
|
+
@media screen and (width <=320px) {
|
|
137
|
+
@content;
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
@if $to ==landscape {
|
|
142
|
+
@media screen and (width <=576px) {
|
|
143
|
+
@content;
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
@if $to ==tablet {
|
|
148
|
+
@media screen and (width <=768px) {
|
|
149
|
+
@content;
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
@if $to ==desktop {
|
|
154
|
+
@media screen and (width <=992px) {
|
|
155
|
+
@content;
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
@if $to ==extra-desktop {
|
|
160
|
+
@media screen and (width <=1280px) {
|
|
161
|
+
@content;
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
// fromTo la regla se ejecuta entre ambos breakpoints.
|
|
167
|
+
@mixin fromTo($from, $to) {
|
|
168
|
+
// Si ambos son breakpoints del core
|
|
169
|
+
@if isCoreBreakpoint($from) and isCoreBreakpoint($to) {
|
|
170
|
+
@if getBp($to) >getBp($from) {
|
|
171
|
+
@media screen and (min-width: getBp($from)) and (max-width: (getBp($to) - 1px)) {
|
|
172
|
+
@content;
|
|
173
|
+
}
|
|
174
|
+
} @else {
|
|
175
|
+
@error "El segundo argumento del mixin fromTo debe ser mayor que el primero";
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
// Si solo $from es breakpoint del core
|
|
180
|
+
@else if isCoreBreakpoint($from) and not isCoreBreakpoint($to) {
|
|
181
|
+
@if isValidBreakpoint($to) {
|
|
182
|
+
@if toPx($to) >toPx(getBp($from)) {
|
|
183
|
+
@media screen and (min-width: getBp($from)) and (max-width: (toPx($to) - 1px)) {
|
|
184
|
+
@content;
|
|
185
|
+
}
|
|
186
|
+
} @else {
|
|
187
|
+
@error "El segundo argumento del mixin fromTo debe ser mayor que el primero";
|
|
188
|
+
}
|
|
189
|
+
} @else {
|
|
190
|
+
@error "El segundo argumento del mixin fromTo() debe ser un breakpoint del Core (#{map-keys(setting.$breakPoints)}) o un número en px, em o rem";
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
// Si solo $to es breakpoint del core
|
|
195
|
+
@else if not isCoreBreakpoint($from) and isCoreBreakpoint($to) {
|
|
196
|
+
@if isValidBreakpoint($from) {
|
|
197
|
+
@if toPx(getBp($to)) >toPx($from) {
|
|
198
|
+
@media screen and (min-width: $from) and (max-width: (getBp($to) - 1px)) {
|
|
199
|
+
@content;
|
|
200
|
+
}
|
|
201
|
+
} @else {
|
|
202
|
+
@error "El segundo argumento del mixin fromTo debe ser mayor que el primero";
|
|
203
|
+
}
|
|
204
|
+
} @else {
|
|
205
|
+
@error "El primer argumento del mixin fromTo() debe ser un breakpoint del Core (#{map-keys(setting.$breakPoints)}) o un número en px, em o rem";
|
|
206
|
+
}
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
// Si no son breakpoints del core pero son breakpoints válidos (px, em, rem)
|
|
210
|
+
@else if isValidBreakpoint($from) and isValidBreakpoint($to) {
|
|
211
|
+
@if toPx($to) >toPx($from) {
|
|
212
|
+
@media screen and (min-width: $from) and (max-width: (toPx($to) - 1px)) {
|
|
213
|
+
@content;
|
|
214
|
+
}
|
|
215
|
+
} @else {
|
|
216
|
+
@error "El segundo argumento del mixin fromTo debe ser mayor que el primero";
|
|
217
|
+
}
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
// Si al menos hay un breakpoint inválido
|
|
221
|
+
@else {
|
|
222
|
+
@error 'Los argumentos del mixin fromTo() deben ser breakpoints del Core (#{map-keys(setting.$breakPoints)}) o números en px, em o rem';
|
|
223
|
+
}
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
// Styles of Scroll Bar on Chrome, Edge y Safari.
|
|
227
|
+
@mixin scrollbar {
|
|
228
|
+
// Chrome, Edge y Safari.
|
|
229
|
+
&::-webkit-scrollbar {
|
|
230
|
+
width: var(--spacing--xxs);
|
|
231
|
+
height: var(--spacing--xxs);
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
&::-webkit-scrollbar-track {
|
|
235
|
+
background-color: transparent; // color of the tracking area
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
&::-webkit-scrollbar-thumb {
|
|
239
|
+
background-color: var(--green); // color of the scroll thumb
|
|
240
|
+
border-radius: var(--radius--s); // roundness of the scroll thumb
|
|
241
|
+
// border: 2px solid Palette(Primary); // creates padding around scroll thumb
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
overflow: auto;
|
|
245
|
+
scrollbar-width: thin;
|
|
246
|
+
|
|
247
|
+
// color of the scroll thumb, color of the tracking area
|
|
248
|
+
scrollbar-color: var(--green) transparent;
|
|
249
|
+
scroll-behavior: smooth;
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
@mixin scrollbar--dark {
|
|
253
|
+
// Chrome, Edge y Safari.
|
|
254
|
+
&::-webkit-scrollbar {
|
|
255
|
+
width: var(--spacing--xxs);
|
|
256
|
+
height: var(--spacing--xxs);
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
&::-webkit-scrollbar-track {
|
|
260
|
+
background-color: transparent; // color of the tracking area
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
&::-webkit-scrollbar-thumb {
|
|
264
|
+
background-color: var(--darkblue); // color of the scroll thumb
|
|
265
|
+
border-radius: var(--radius--s); // roundness of the scroll thumb
|
|
266
|
+
// border: 2px solid Palette(Primary); // creates padding around scroll thumb
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
overflow: auto;
|
|
270
|
+
scrollbar-width: thin;
|
|
271
|
+
|
|
272
|
+
// color of the scroll thumb, color of the tracking area
|
|
273
|
+
scrollbar-color: var(--darkblue) transparent;
|
|
274
|
+
scroll-behavior: smooth;
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
@mixin scrollbar--light {
|
|
278
|
+
// Chrome, Edge y Safari.
|
|
279
|
+
&::-webkit-scrollbar {
|
|
280
|
+
width: var(--spacing--xxs);
|
|
281
|
+
height: var(--spacing--xxs);
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
&::-webkit-scrollbar-track {
|
|
285
|
+
background-color: transparent; // color of the tracking area
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
&::-webkit-scrollbar-thumb {
|
|
289
|
+
background-color: var(--whitelight); // color of the scroll thumb
|
|
290
|
+
border-radius: var(--radius--s); // roundness of the scroll thumb
|
|
291
|
+
// border: 2px solid Palette(Primary); // creates padding around scroll thumb
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
overflow: auto;
|
|
295
|
+
scrollbar-width: thin;
|
|
296
|
+
|
|
297
|
+
// color of the scroll thumb, color of the tracking area
|
|
298
|
+
scrollbar-color: var(--whitelight) transparent;
|
|
299
|
+
scroll-behavior: smooth;
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
@mixin fontsizeHeadingOne() {
|
|
303
|
+
font-size: var(--font-size--heading-two);
|
|
304
|
+
|
|
305
|
+
@include from(desktop) {
|
|
306
|
+
font-size: var(--font-size--heading-one);
|
|
307
|
+
}
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
@mixin fontsizeHeadingTwo() {
|
|
311
|
+
font-size: var(--font-size--heading-three);
|
|
312
|
+
|
|
313
|
+
@include from(desktop) {
|
|
314
|
+
font-size: var(--font-size--heading-two);
|
|
315
|
+
}
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
@mixin fontsizeHeadingThree() {
|
|
319
|
+
font-size: var(--font-size--normal);
|
|
320
|
+
|
|
321
|
+
@include from(desktop) {
|
|
322
|
+
font-size: var(--font-size--heading-three);
|
|
323
|
+
}
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
@mixin fontsizeNormal() {
|
|
327
|
+
font-size: var(--font-size--small);
|
|
328
|
+
|
|
329
|
+
@include from(desktop) {
|
|
330
|
+
font-size: var(--font-size--normal);
|
|
331
|
+
}
|
|
332
|
+
}
|
|
333
|
+
|
|
334
|
+
@mixin fontsizeSmall() {
|
|
335
|
+
font-size: var(--font-size--tiny);
|
|
336
|
+
|
|
337
|
+
@include from(desktop) {
|
|
338
|
+
font-size: var(--font-size--small);
|
|
339
|
+
}
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
@mixin fontsizeTiny() {
|
|
343
|
+
font-size: var(--font-size--tiny);
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
// Gradient's Color
|
|
347
|
+
@mixin gradients($type) {
|
|
348
|
+
@if $type == 'all' {
|
|
349
|
+
color: var(--pink--one);
|
|
350
|
+
background: linear-gradient(
|
|
351
|
+
to right,
|
|
352
|
+
var(--green--three),
|
|
353
|
+
var(--blue--one),
|
|
354
|
+
var(--pink--one),
|
|
355
|
+
var(--purple--one),
|
|
356
|
+
var(--green--three)
|
|
357
|
+
);
|
|
358
|
+
-webkit-text-fill-color: transparent;
|
|
359
|
+
background-clip: text;
|
|
360
|
+
}
|
|
361
|
+
}
|
|
362
|
+
|
|
363
|
+
// Gradient's Background
|
|
364
|
+
@mixin backgroundGradients($type, $direction: 'horizontal') {
|
|
365
|
+
@if $direction == 'horizontal' {
|
|
366
|
+
@if $type == 'all' {
|
|
367
|
+
background: linear-gradient(
|
|
368
|
+
to right,
|
|
369
|
+
var(--green--three),
|
|
370
|
+
var(--blue--one),
|
|
371
|
+
var(--pink--one),
|
|
372
|
+
var(--purple--one),
|
|
373
|
+
var(--green--three)
|
|
374
|
+
);
|
|
375
|
+
}
|
|
376
|
+
}
|
|
377
|
+
|
|
378
|
+
@if $direction == 'vertical' {
|
|
379
|
+
@if $type == 'all' {
|
|
380
|
+
background: linear-gradient(
|
|
381
|
+
to bottom,
|
|
382
|
+
var(--green--three),
|
|
383
|
+
var(--blue--one),
|
|
384
|
+
var(--pink--one),
|
|
385
|
+
var(--purple--one),
|
|
386
|
+
var(--green--three)
|
|
387
|
+
);
|
|
388
|
+
}
|
|
389
|
+
}
|
|
390
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
@use './setting' as setting;
|
|
2
|
+
@use './tools' as tools;
|
|
3
|
+
|
|
4
|
+
/*
|
|
5
|
+
En esta capa estarán:
|
|
6
|
+
1. sobreescrituras de estilos
|
|
7
|
+
2. helpers o utilities
|
|
8
|
+
3. pueden usar el flag !important
|
|
9
|
+
4. solo afecta a una pieza del DOM a la vez
|
|
10
|
+
5. especificidad por lo regular alta
|
|
11
|
+
*/
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
// Utils Imports
|
|
2
|
+
|
|
3
|
+
/*
|
|
4
|
+
1. Piensa en la especificidad
|
|
5
|
+
2. Nunca se añaden estilos para sobre escribir otros
|
|
6
|
+
3. Cada capa en mas detallada o especifica que la anterior
|
|
7
|
+
4. Se pueden añadir o eliminar capaz de ser necesario
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
@forward './layers/_setting';
|
|
11
|
+
@forward './layers/_tools';
|
|
12
|
+
@forward './layers/_base';
|
|
13
|
+
@forward './layers/_objects';
|
|
14
|
+
@forward './layers/_trumps';
|
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
// @use 'styles';
|
|
2
|
+
|
|
3
|
+
.Button {
|
|
4
|
+
--color: initial;
|
|
5
|
+
--border-color: initial;
|
|
6
|
+
--border: var(--gld-border-size) solid var(--border-color);
|
|
7
|
+
--background: initial;
|
|
8
|
+
--background--hover: initial;
|
|
9
|
+
--box-shadow-size: 2px;
|
|
10
|
+
--box-shadow-size--hover: 0;
|
|
11
|
+
--padding: var(--gld-spacing--xxs) var(--gld-spacing--xs);
|
|
12
|
+
--radius: var(--gld-radius--xxs);
|
|
13
|
+
--font-size: var(--gld-font-size--normal);
|
|
14
|
+
--font: 600 var(--font-size) var(--gld-font--poppins);
|
|
15
|
+
|
|
16
|
+
outline: none;
|
|
17
|
+
border: var(--border);
|
|
18
|
+
padding: var(--padding);
|
|
19
|
+
border-radius: var(--radius);
|
|
20
|
+
font: var(--font);
|
|
21
|
+
cursor: pointer;
|
|
22
|
+
width: inherit;
|
|
23
|
+
color: var(--color);
|
|
24
|
+
background: var(--background);
|
|
25
|
+
box-shadow: 0 var(--box-shadow-size) 0 0;
|
|
26
|
+
display: inline-flex;
|
|
27
|
+
align-items: center;
|
|
28
|
+
justify-content: center;
|
|
29
|
+
gap: var(--gld-spacing--xxxs);
|
|
30
|
+
will-change: background, color;
|
|
31
|
+
transition:
|
|
32
|
+
background var(--gld-animation-time--150),
|
|
33
|
+
box-shadow var(--gld-animation-time--150),
|
|
34
|
+
color var(--gld-animation-time--150);
|
|
35
|
+
|
|
36
|
+
&:hover,
|
|
37
|
+
&:focus {
|
|
38
|
+
--background: var(--background--hover);
|
|
39
|
+
--box-shadow-size: var(--box-shadow-size--hover);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
span {
|
|
43
|
+
text-transform: capitalize;
|
|
44
|
+
user-select: none;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
&--pink {
|
|
48
|
+
--color: var(--gld-pink);
|
|
49
|
+
--border-color: var(--gld-pink);
|
|
50
|
+
--background: var(--gld-pink-transparent--010);
|
|
51
|
+
--background--hover: var(--gld-pink-transparent--020);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
&--purple {
|
|
55
|
+
--color: var(--gld-purple);
|
|
56
|
+
--border-color: var(--gld-purple);
|
|
57
|
+
--background: var(--gld-purple-transparent--010);
|
|
58
|
+
--background--hover: var(--gld-purple-transparent--020);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
&--mustard {
|
|
62
|
+
--color: var(--gld-mustard);
|
|
63
|
+
--border-color: var(--gld-mustard);
|
|
64
|
+
--background: var(--gld-mustard-transparent--010);
|
|
65
|
+
--background--hover: var(--gld-mustard-transparent--020);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
&--orange {
|
|
69
|
+
--color: var(--gld-orange);
|
|
70
|
+
--border-color: var(--gld-orange);
|
|
71
|
+
--background: var(--gld-orange-transparent--010);
|
|
72
|
+
--background--hover: var(--gld-orange-transparent--020);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
&--blue {
|
|
76
|
+
--color: var(--gld-blue);
|
|
77
|
+
--border-color: var(--gld-blue);
|
|
78
|
+
--background: var(--gld-blue-transparent--010);
|
|
79
|
+
--background--hover: var(--gld-blue-transparent--020);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
&--red {
|
|
83
|
+
--color: var(--gld-red);
|
|
84
|
+
--border-color: var(--gld-red);
|
|
85
|
+
--background: var(--gld-red-transparent--010);
|
|
86
|
+
--background--hover: var(--gld-red-transparent--020);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
&--green {
|
|
90
|
+
--color: var(--gld-green);
|
|
91
|
+
--border-color: var(--gld-green);
|
|
92
|
+
--background: var(--gld-green-transparent--010);
|
|
93
|
+
--background--hover: var(--gld-green-transparent--020);
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
&--tiny {
|
|
97
|
+
--font-size: var(--gld-font-size--small);
|
|
98
|
+
--padding: var(--gld-spacing--xxxs) var(--gld-spacing--xxs);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
&--small {
|
|
102
|
+
--font-size: var(--gld-font-size--small);
|
|
103
|
+
--padding: var(--gld-spacing--xxs);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
&--normal {
|
|
107
|
+
--font-size: var(--gld-font-size--normal);
|
|
108
|
+
--padding: var(--gld-spacing--xxs) var(--gld-spacing--xs);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
&--medium {
|
|
112
|
+
--padding: var(--gld-spacing--xs) var(--gld-spacing--m);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
&--large {
|
|
116
|
+
--font-size: var(--gld-font-size--heading-three);
|
|
117
|
+
--padding: var(--gld-spacing--xs) var(--gld-spacing--l);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
&--disable {
|
|
121
|
+
--color: var(--gld-gray-transparent--075);
|
|
122
|
+
--border-color: var(--gld-gray-transparent--075);
|
|
123
|
+
--background: var(--gld-gray-transparent--015);
|
|
124
|
+
--background--hover: var(--gld-gray-transparent--015);
|
|
125
|
+
pointer-events: none;
|
|
126
|
+
cursor: not-allowed;
|
|
127
|
+
}
|
|
128
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { type ComponentFixture, TestBed } from '@angular/core/testing'
|
|
2
|
+
|
|
3
|
+
import { ButtonComponent } from './button.component'
|
|
4
|
+
|
|
5
|
+
describe('ButtonComponent', () => {
|
|
6
|
+
let component: ButtonComponent
|
|
7
|
+
let fixture: ComponentFixture<ButtonComponent>
|
|
8
|
+
|
|
9
|
+
beforeEach(() => {
|
|
10
|
+
TestBed.configureTestingModule({
|
|
11
|
+
imports: [ButtonComponent],
|
|
12
|
+
})
|
|
13
|
+
fixture = TestBed.createComponent(ButtonComponent)
|
|
14
|
+
component = fixture.componentInstance
|
|
15
|
+
fixture.detectChanges()
|
|
16
|
+
})
|
|
17
|
+
|
|
18
|
+
it('should create', () => {
|
|
19
|
+
expect(component).toBeTruthy()
|
|
20
|
+
})
|
|
21
|
+
})
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
// Storybook Imports
|
|
2
|
+
import { Meta, StoryObj } from '@storybook/angular'
|
|
3
|
+
import { fn } from '@storybook/test'
|
|
4
|
+
// This Component Imports
|
|
5
|
+
import { ButtonComponent } from './button.component'
|
|
6
|
+
|
|
7
|
+
const meta: Meta<ButtonComponent> = {
|
|
8
|
+
title: 'buttons/button',
|
|
9
|
+
component: ButtonComponent,
|
|
10
|
+
tags: ['autodocs'],
|
|
11
|
+
argTypes: {
|
|
12
|
+
name: {
|
|
13
|
+
description: 'Required name',
|
|
14
|
+
control: {
|
|
15
|
+
type: 'text',
|
|
16
|
+
accept: 'string',
|
|
17
|
+
},
|
|
18
|
+
table: {
|
|
19
|
+
type: { summary: 'Name' },
|
|
20
|
+
defaultValue: { summary: 'button name' },
|
|
21
|
+
},
|
|
22
|
+
},
|
|
23
|
+
color: {
|
|
24
|
+
description: 'Supported colors',
|
|
25
|
+
control: {
|
|
26
|
+
type: 'select',
|
|
27
|
+
accept: 'string',
|
|
28
|
+
},
|
|
29
|
+
options: ['pink', 'purple', 'mustard', 'orange', 'red', 'blue', 'green'],
|
|
30
|
+
table: {
|
|
31
|
+
type: { summary: 'ButtonColor' },
|
|
32
|
+
defaultValue: { summary: 'pink' },
|
|
33
|
+
},
|
|
34
|
+
},
|
|
35
|
+
size: {
|
|
36
|
+
description: 'Supported sizes',
|
|
37
|
+
control: {
|
|
38
|
+
type: 'select',
|
|
39
|
+
accept: 'string',
|
|
40
|
+
},
|
|
41
|
+
options: ['tiny', 'small', 'normal', 'medium', 'large'],
|
|
42
|
+
table: {
|
|
43
|
+
type: { summary: 'ButtonSize' },
|
|
44
|
+
defaultValue: { summary: 'normal' },
|
|
45
|
+
},
|
|
46
|
+
},
|
|
47
|
+
disable: {
|
|
48
|
+
control: {
|
|
49
|
+
type: 'boolean',
|
|
50
|
+
accept: 'boolean',
|
|
51
|
+
},
|
|
52
|
+
table: {
|
|
53
|
+
type: { summary: 'boolean' },
|
|
54
|
+
defaultValue: { summary: 'false' },
|
|
55
|
+
},
|
|
56
|
+
},
|
|
57
|
+
clicked: {
|
|
58
|
+
table: {
|
|
59
|
+
type: { summary: 'function' },
|
|
60
|
+
defaultValue: { summary: '() => void' },
|
|
61
|
+
},
|
|
62
|
+
},
|
|
63
|
+
},
|
|
64
|
+
args: {
|
|
65
|
+
name: 'button',
|
|
66
|
+
color: 'pink',
|
|
67
|
+
size: 'normal',
|
|
68
|
+
disable: false,
|
|
69
|
+
clicked: fn(),
|
|
70
|
+
},
|
|
71
|
+
parameters: {},
|
|
72
|
+
render: (args) => ({
|
|
73
|
+
props: {
|
|
74
|
+
...args,
|
|
75
|
+
ngContent: 'Button',
|
|
76
|
+
},
|
|
77
|
+
template: `
|
|
78
|
+
<gld-button [name]="name" [color]="color" [size]="size" [disable]="disable">
|
|
79
|
+
{{ ngContent }}
|
|
80
|
+
</gld-button>`,
|
|
81
|
+
}),
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
export default meta
|
|
85
|
+
type Story = StoryObj<ButtonComponent>
|
|
86
|
+
|
|
87
|
+
export const Pink: Story = {
|
|
88
|
+
args: {
|
|
89
|
+
color: 'pink',
|
|
90
|
+
},
|
|
91
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
// Angular Imports
|
|
2
|
+
import { ChangeDetectionStrategy, Component, booleanAttribute, input, output } from '@angular/core'
|
|
3
|
+
|
|
4
|
+
@Component({
|
|
5
|
+
selector: 'gld-button',
|
|
6
|
+
templateUrl: './button.component.html',
|
|
7
|
+
styleUrl: './button.component.scss',
|
|
8
|
+
imports: [],
|
|
9
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
10
|
+
})
|
|
11
|
+
export class ButtonComponent {
|
|
12
|
+
name = input.required<string>()
|
|
13
|
+
disable = input<boolean, string | boolean>(false, { transform: booleanAttribute })
|
|
14
|
+
// hasIcon = input<boolean, string | boolean>(false, { transform: booleanAttribute })
|
|
15
|
+
// icon = input<Icons>(Icons.addLine)
|
|
16
|
+
// iconSize = input<keyof typeof IconsSize>(IconsSize.small)
|
|
17
|
+
// iconMoveTopToBottom = input<number, string | number>(0, { transform: numberAttribute })
|
|
18
|
+
// iconMoveLeftToRight = input<number, string | number>(0, { transform: numberAttribute })
|
|
19
|
+
color = input<ButtonColor>('pink')
|
|
20
|
+
size = input<ButtonSize>('normal')
|
|
21
|
+
clicked = output<void>()
|
|
22
|
+
|
|
23
|
+
emitClick() {
|
|
24
|
+
if (!this.disable()) this.clicked.emit()
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
export type ButtonColor = 'pink' | 'purple' | 'mustard' | 'orange' | 'red' | 'blue' | 'green'
|
|
29
|
+
export type ButtonSize = 'tiny' | 'small' | 'normal' | 'medium' | 'large'
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './button/button.component'
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './buttons'
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
|
|
2
|
+
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
|
|
3
|
+
{
|
|
4
|
+
"extends": "../../tsconfig.json",
|
|
5
|
+
"compilerOptions": {
|
|
6
|
+
"outDir": "../../out-tsc/lib",
|
|
7
|
+
"declaration": true,
|
|
8
|
+
"declarationMap": true,
|
|
9
|
+
"inlineSources": true,
|
|
10
|
+
"types": []
|
|
11
|
+
},
|
|
12
|
+
"exclude": [
|
|
13
|
+
"**/*.spec.ts"
|
|
14
|
+
]
|
|
15
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
|
|
2
|
+
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
|
|
3
|
+
{
|
|
4
|
+
"extends": "./tsconfig.lib.json",
|
|
5
|
+
"compilerOptions": {
|
|
6
|
+
"declarationMap": false
|
|
7
|
+
},
|
|
8
|
+
"angularCompilerOptions": {
|
|
9
|
+
"compilationMode": "partial"
|
|
10
|
+
}
|
|
11
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
|
|
2
|
+
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
|
|
3
|
+
{
|
|
4
|
+
"extends": "../../tsconfig.json",
|
|
5
|
+
"compilerOptions": {
|
|
6
|
+
"outDir": "../../out-tsc/spec",
|
|
7
|
+
"types": []
|
|
8
|
+
},
|
|
9
|
+
"include": ["**/*.spec.ts", "**/*.d.ts"]
|
|
10
|
+
}
|
|
11
|
+
|