@apipass/buttons 1.0.7 → 1.0.9

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.
Files changed (38) hide show
  1. package/assets/css/buttons.scss +135 -127
  2. package/assets/css/colors.scss +34 -34
  3. package/assets/css/fonts.scss +24 -24
  4. package/assets/css/pt_sans.scss +143 -143
  5. package/assets/css/spacing.scss +28 -28
  6. package/assets/css/texts.scss +18 -18
  7. package/buttons.module.d.ts +16 -16
  8. package/default-button/default-button.component.d.ts +15 -15
  9. package/{esm2020 → esm2022}/apipass-buttons.mjs +4 -4
  10. package/esm2022/buttons.module.mjs +63 -0
  11. package/esm2022/default-button/default-button.component.mjs +49 -0
  12. package/esm2022/outline-button/outline-button.component.mjs +39 -0
  13. package/esm2022/primary-button/primary-button.component.mjs +39 -0
  14. package/{esm2020 → esm2022}/public-api.mjs +7 -7
  15. package/esm2022/secondary-button/secondary-button.component.mjs +39 -0
  16. package/esm2022/tab-button/tab-button.component.mjs +49 -0
  17. package/esm2022/tertiary-button/tertiary-button.component.mjs +39 -0
  18. package/fesm2022/apipass-buttons.mjs +292 -0
  19. package/fesm2022/apipass-buttons.mjs.map +1 -0
  20. package/index.d.ts +5 -5
  21. package/outline-button/outline-button.component.d.ts +14 -14
  22. package/package.json +12 -18
  23. package/primary-button/primary-button.component.d.ts +14 -14
  24. package/public-api.d.ts +7 -7
  25. package/secondary-button/secondary-button.component.d.ts +14 -14
  26. package/tab-button/tab-button.component.d.ts +15 -15
  27. package/tertiary-button/tertiary-button.component.d.ts +14 -14
  28. package/esm2020/buttons.module.mjs +0 -62
  29. package/esm2020/default-button/default-button.component.mjs +0 -50
  30. package/esm2020/outline-button/outline-button.component.mjs +0 -40
  31. package/esm2020/primary-button/primary-button.component.mjs +0 -40
  32. package/esm2020/secondary-button/secondary-button.component.mjs +0 -40
  33. package/esm2020/tab-button/tab-button.component.mjs +0 -50
  34. package/esm2020/tertiary-button/tertiary-button.component.mjs +0 -40
  35. package/fesm2015/apipass-buttons.mjs +0 -305
  36. package/fesm2015/apipass-buttons.mjs.map +0 -1
  37. package/fesm2020/apipass-buttons.mjs +0 -305
  38. package/fesm2020/apipass-buttons.mjs.map +0 -1
package/assets/css/buttons.scss CHANGED
@@ -1,127 +1,135 @@
1
- @import "colors";
2
- @import "fonts";
3
- @import "spacing";
4
-
5
- /* Buttons */
6
- .mdc-icon-button {
7
- font-size: inherit !important;
8
- width: auto !important;
9
- height: auto !important;
10
- }
11
-
12
- .mat-mdc-icon-button .mat-mdc-button-persistent-ripple {
13
- border-radius: inherit !important;
14
- }
15
-
16
- .apipass-tab-button {
17
- display: flex !important;
18
- justify-content: center !important;
19
- align-items: center !important;
20
- padding: $spacing-tab-button-top $spacing-tab-button-right $spacing-tab-button-bottom $spacing-tab-button-left !important;
21
- font-weight: bold;
22
- font-size: $base-font-size - 2px;
23
- border-radius: 6px 6px 0 0 !important;
24
- .mat-button-wrapper, .mat-icon, .button-text {
25
- display: flex;
26
- justify-content: center;
27
- align-items: center;
28
- }
29
- .apipass-btn-icon-text {
30
- padding-right: 10px;
31
- }
32
- .apipass-btn-icon-text-suffix {
33
- padding-left: 10px;
34
- }
35
- }
36
-
37
- .apipass-btn-default {
38
- display: flex !important;
39
- justify-content: center !important;
40
- align-items: center !important;
41
- padding: 10px 15px !important;
42
- font-weight: bold;
43
- border-radius: 6px !important;
44
- .mat-button-wrapper, .mat-icon, .button-text {
45
- display: flex;
46
- justify-content: center;
47
- align-items: center;
48
- }
49
- .apipass-btn-icon-text {
50
- padding-right: 10px;
51
- }
52
- .apipass-btn-icon-text-suffix {
53
- padding-left: 10px;
54
- }
55
- }
56
-
57
- .apipass-btn-primary {
58
- background: var(--color-primary);
59
- color: #FFF;
60
- &:hover, .hover {
61
- background: var(--color-primary-hover);
62
- }
63
- &:active, .active {
64
- background: var(--color-primary-active);
65
- }
66
- &:disabled, .disabled {
67
- background: var(--color-tertiary);
68
- color: var(--color-fonts-tertiary);
69
- border: 1px px solid var(--color-tertiary-hover);
70
- cursor: no-drop !important;
71
- }
72
- }
73
-
74
- .apipass-btn-secondary {
75
- background: var(--color-secondary);
76
- color: var(--color-primary);
77
- &:hover, .hover {
78
- background: var(--color-secondary-hover);
79
- }
80
- &:active, .active {
81
- background: var(--color-secondary-active);
82
- }
83
- &:disabled, .disabled {
84
- background: var(--color-tertiary);
85
- color: var(--color-fonts-tertiary);
86
- border: 1px px solid var(--color-tertiary-hover);
87
- cursor: no-drop !important;
88
- }
89
- }
90
-
91
- .apipass-btn-tertiary {
92
- background: var(--color-tertiary);
93
- color: var(--color-primary);
94
- border: 1px solid var(--color-tertiary-hover);
95
- &:hover, .hover {
96
- background: var(--color-tertiary-hover);
97
- }
98
- &:active, .active {
99
- background: var(--color-tertiary-active);
100
- }
101
- &:disabled, .disabled {
102
- background: var(--color-tertiary);
103
- color: var(--color-fonts-tertiary);
104
- border: 1px px solid var(--color-tertiary-hover);
105
- cursor: no-drop !important;
106
- }
107
- }
108
-
109
- .apipass-btn-outline {
110
- color: var(--color-fonts-tertiary);
111
- &.remove-button {
112
- color: var(--color-red);
113
- }
114
- &:hover, .hover {
115
- background: var(--color-tertiary-hover);
116
- }
117
- &:active, .active {
118
- background: var(--color-tertiary-active);
119
- }
120
- &:disabled, .disabled {
121
- background: var(--color-tertiary);
122
- color: var(--color-fonts-tertiary);
123
- border: 1px px solid var(--color-tertiary-hover);
124
- cursor: no-drop !important;
125
- }
126
- }
127
-
1
+ @import "colors";
2
+ @import "fonts";
3
+ @import "spacing";
4
+
5
+ /* Buttons */
6
+ .mdc-icon-button {
7
+ font-size: inherit !important;
8
+ width: auto !important;
9
+ height: auto !important;
10
+ }
11
+
12
+ .mat-button-focus-overlay {
13
+ background-color: transparent !important;
14
+ }
15
+
16
+ .mat-mdc-icon-button .mat-mdc-button-persistent-ripple {
17
+ border-radius: unset !important;
18
+ }
19
+
20
+ .mat-mdc-icon-button .mat-mdc-button-persistent-ripple {
21
+ border-radius: inherit !important;
22
+ }
23
+
24
+ .apipass-tab-button {
25
+ display: flex !important;
26
+ justify-content: center !important;
27
+ align-items: center !important;
28
+ padding: $spacing-tab-button-top $spacing-tab-button-right $spacing-tab-button-bottom $spacing-tab-button-left !important;
29
+ font-weight: bold;
30
+ font-size: $base-font-size - 2px;
31
+ border-radius: 6px 6px 0 0 !important;
32
+ .mat-button-wrapper, .mat-icon, .button-text {
33
+ display: flex;
34
+ justify-content: center;
35
+ align-items: center;
36
+ }
37
+ .apipass-btn-icon-text {
38
+ padding-right: 10px;
39
+ }
40
+ .apipass-btn-icon-text-suffix {
41
+ padding-left: 10px;
42
+ }
43
+ }
44
+
45
+ .apipass-btn-default {
46
+ display: flex !important;
47
+ justify-content: center !important;
48
+ align-items: center !important;
49
+ padding: 10px 15px !important;
50
+ font-weight: bold;
51
+ border-radius: 6px !important;
52
+ .mat-button-wrapper, .mat-icon, .button-text {
53
+ display: flex;
54
+ justify-content: center;
55
+ align-items: center;
56
+ }
57
+ .apipass-btn-icon-text {
58
+ padding-right: 10px;
59
+ }
60
+ .apipass-btn-icon-text-suffix {
61
+ padding-left: 10px;
62
+ }
63
+ }
64
+
65
+ .apipass-btn-primary {
66
+ background: var(--color-primary);
67
+ color: #FFF;
68
+ &:hover, .hover {
69
+ background: var(--color-primary-hover);
70
+ }
71
+ &:active, .active {
72
+ background: var(--color-primary-active);
73
+ }
74
+ &:disabled, .disabled {
75
+ background: var(--color-tertiary);
76
+ color: var(--color-fonts-tertiary);
77
+ border: 1px px solid var(--color-tertiary-hover);
78
+ cursor: no-drop !important;
79
+ }
80
+ }
81
+
82
+ .apipass-btn-secondary {
83
+ background: var(--color-secondary);
84
+ color: var(--color-primary);
85
+ &:hover, .hover {
86
+ background: var(--color-secondary-hover);
87
+ }
88
+ &:active, .active {
89
+ background: var(--color-secondary-active);
90
+ }
91
+ &:disabled, .disabled {
92
+ background: var(--color-tertiary);
93
+ color: var(--color-fonts-tertiary);
94
+ border: 1px px solid var(--color-tertiary-hover);
95
+ cursor: no-drop !important;
96
+ }
97
+ }
98
+
99
+ .apipass-btn-tertiary {
100
+ background: var(--color-tertiary);
101
+ color: var(--color-primary);
102
+ border: 1px solid var(--color-tertiary-hover);
103
+ &:hover, .hover {
104
+ background: var(--color-tertiary-hover);
105
+ }
106
+ &:active, .active {
107
+ background: var(--color-tertiary-active);
108
+ }
109
+ &:disabled, .disabled {
110
+ background: var(--color-tertiary);
111
+ color: var(--color-fonts-tertiary);
112
+ border: 1px px solid var(--color-tertiary-hover);
113
+ cursor: no-drop !important;
114
+ }
115
+ }
116
+
117
+ .apipass-btn-outline {
118
+ color: var(--color-fonts-tertiary);
119
+ &.remove-button {
120
+ color: var(--color-red);
121
+ }
122
+ &:hover, .hover {
123
+ background: var(--color-tertiary-hover);
124
+ }
125
+ &:active, .active {
126
+ background: var(--color-tertiary-active);
127
+ }
128
+ &:disabled, .disabled {
129
+ background: var(--color-tertiary);
130
+ color: var(--color-fonts-tertiary);
131
+ border: 1px px solid var(--color-tertiary-hover);
132
+ cursor: no-drop !important;
133
+ }
134
+ }
135
+
package/assets/css/colors.scss CHANGED
@@ -1,34 +1,34 @@
1
- :root {
2
- --color-primary: #222D57;
3
- --color-primary-hover: #18203D;
4
- --color-primary-active: #29376A;
5
-
6
- --color-secondary: #D3D921;
7
- --color-secondary-hover: #B3B81C;
8
- --color-secondary-active: #DCE13F;
9
-
10
- --color-tertiary: #EFEFEF;
11
- --color-tertiary-hover: #CBCBCB;
12
- --color-tertiary-active: #F1F1F1;
13
-
14
- --color-fonts-tertiary: #777777;
15
-
16
-
17
-
18
-
19
- // Defaults
20
- --color-body-light: #FFF;
21
- --color-red: rgb(255, 0, 0);
22
- --limit-plan-color: #ff6c00;
23
- --color_disabled: #E0E0E0;
24
- --color_components_light: #FFF;
25
- --color-inputs-border: #DDD;
26
- --color-inputs-background: #FFF;
27
- --color_icon_remove: var(--color-red);
28
- --color_icon_success: #070;
29
- --color_graph_primary: #1643EF;
30
- --color_graph_primary_hover: #0A2692;
31
- --color_graph_error: #EB5757;
32
- --color_graph_error_hover: #C91717;
33
-
34
- }
1
+ :root {
2
+ --color-primary: #222D57;
3
+ --color-primary-hover: #18203D;
4
+ --color-primary-active: #29376A;
5
+
6
+ --color-secondary: #D3D921;
7
+ --color-secondary-hover: #B3B81C;
8
+ --color-secondary-active: #DCE13F;
9
+
10
+ --color-tertiary: #EFEFEF;
11
+ --color-tertiary-hover: #CBCBCB;
12
+ --color-tertiary-active: #F1F1F1;
13
+
14
+ --color-fonts-tertiary: #777777;
15
+
16
+
17
+
18
+
19
+ // Defaults
20
+ --color-body-light: #FFF;
21
+ --color-red: rgb(255, 0, 0);
22
+ --limit-plan-color: #ff6c00;
23
+ --color_disabled: #E0E0E0;
24
+ --color_components_light: #FFF;
25
+ --color-inputs-border: #DDD;
26
+ --color-inputs-background: #FFF;
27
+ --color_icon_remove: var(--color-red);
28
+ --color_icon_success: #070;
29
+ --color_graph_primary: #1643EF;
30
+ --color_graph_primary_hover: #0A2692;
31
+ --color_graph_error: #EB5757;
32
+ --color_graph_error_hover: #C91717;
33
+
34
+ }
package/assets/css/fonts.scss CHANGED
@@ -1,24 +1,24 @@
1
- $base-font-size: 14px;
2
- $base-input-font-size: $base-font-size;
3
-
4
- @import "pt_sans";
5
-
6
- .text-primary {
7
- color: var(--color-primary) !important;
8
- }
9
-
10
- .text-secondary {
11
- color: var(--color-secondary) !important;
12
- }
13
-
14
- .text-tertiary {
15
- color: var(--color-fonts-tertiary) !important;
16
- }
17
-
18
- .text-weight-bold {
19
- font-weight: bold !important;
20
- }
21
-
22
- .text-weight-normal {
23
- font-weight: normal !important;
24
- }
1
+ $base-font-size: 14px;
2
+ $base-input-font-size: $base-font-size;
3
+
4
+ @import "pt_sans";
5
+
6
+ .text-primary {
7
+ color: var(--color-primary) !important;
8
+ }
9
+
10
+ .text-secondary {
11
+ color: var(--color-secondary) !important;
12
+ }
13
+
14
+ .text-tertiary {
15
+ color: var(--color-fonts-tertiary) !important;
16
+ }
17
+
18
+ .text-weight-bold {
19
+ font-weight: bold !important;
20
+ }
21
+
22
+ .text-weight-normal {
23
+ font-weight: normal !important;
24
+ }