mypgs 1.0.0 → 1.1.2

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 (52) hide show
  1. package/assets/javascript/_pgs.js +18 -3
  2. package/assets/javascript/components/_slides.js +3 -3
  3. package/assets/javascript/components/_stepTabs.js +157 -0
  4. package/assets/javascript/index.js +1 -1
  5. package/assets/scss/base/_body.scss +3 -2
  6. package/assets/scss/base/_general.scss +46 -43
  7. package/assets/scss/base/_heading.scss +17 -15
  8. package/assets/scss/components/_accordion.scss +1 -0
  9. package/assets/scss/components/_notification.scss +4 -4
  10. package/assets/scss/components/_searchbar.scss +2 -2
  11. package/assets/scss/components/_slides.scss +5 -4
  12. package/assets/scss/components/_stepTabs.scss +58 -0
  13. package/assets/scss/components/_steps.scss +4 -3
  14. package/assets/scss/components/_table.scss +1 -1
  15. package/assets/scss/components/_tooltip.scss +2 -5
  16. package/assets/scss/index.scss +29 -32
  17. package/assets/scss/layout/_gap.scss +3 -0
  18. package/assets/scss/mixin/_mx-button.scss +55 -32
  19. package/assets/scss/mixin/_mx-menu.scss +1 -1
  20. package/dist/css/index.css +2113 -1691
  21. package/dist/css/index.css.map +1 -1
  22. package/dist/css/index.min.css +1 -1
  23. package/dist/javascript/index.js +135 -97
  24. package/dist/javascript/index.js.map +1 -1
  25. package/dist/javascript/index.min.js +1 -1
  26. package/package.json +2 -2
  27. package/templates/components/md-accordion.html +23 -0
  28. package/templates/components/md-breadcumbs.html +8 -8
  29. package/templates/components/md-button.html +23 -0
  30. package/templates/components/md-card.html +21 -0
  31. package/templates/components/md-dropdown.html +16 -0
  32. package/templates/components/md-form.html +26 -0
  33. package/templates/components/md-logo.html +7 -0
  34. package/templates/components/md-menu.html +39 -5
  35. package/templates/components/md-modal.html +19 -0
  36. package/templates/components/md-notification.html +4 -1
  37. package/templates/components/md-searchbar.html +6 -1
  38. package/templates/components/md-slides.html +33 -0
  39. package/templates/components/md-stepTabs.html +36 -0
  40. package/templates/components/md-steps.html +25 -0
  41. package/templates/components/md-table.html +24 -0
  42. package/templates/demo.css +47 -0
  43. package/templates/demo.html +24 -0
  44. package/templates/demo.js +141 -0
  45. package/templates/layout/md-body.html +1 -1
  46. package/templates/layout/md-cookieConsent.html +2 -2
  47. package/templates/layout/md-footer.html +21 -2
  48. package/templates/layout/md-header.html +22 -2
  49. package/templates/layout/md-pageShell.html +22 -0
  50. package/templates/layout/md-section.html +25 -0
  51. package/assets/javascript/components/_tabs.js +0 -134
  52. package/assets/scss/components/_tabs.scss +0 -69
package/assets/scss/layout/_gap.scss CHANGED
@@ -9,4 +9,7 @@
9
9
 
10
10
  [pgs~=gapSections] {
11
11
  gap: var(--gap-sections);
12
+ }
13
+ [pgs~=nowrap] {
14
+ flex-wrap: nowrap;
12
15
  }
package/assets/scss/mixin/_mx-button.scss CHANGED
@@ -1,26 +1,26 @@
1
- @function ourContrastColor($backgorundReferenze) {
2
- @return contrast-color(color-mix(in srgb, $backgorundReferenze 77%, black));
3
- }
4
-
5
1
  //+ VAR
6
2
  @mixin _var-button-color($background, $for: null, $colorNotContrast: var(--color-black)) {
7
- --button-background#{$for}: #{$background};
8
- --button-color#{$for}: #{ourContrastColor(var(--button-background#{$for}))
9
- }
10
-
11
- ;
12
- @supports not (color: contrast-color(red)) {
13
- --button-color#{$for}: #{$colorNotContrast};
14
- }
3
+ @supports (color: contrast-color(red)) {
4
+ --button-color#{$for}: contrast-color(color-mix(in srgb, var(--button-background#{$for}) 77%, black));
5
+ }
15
6
 
16
- color: var(--button-color#{$for});
17
- background: var(--button-background#{$for});
7
+ @supports not (color: contrast-color(red)) {
8
+ --button-color#{$for}: #{$colorNotContrast};
9
+ }
18
10
 
19
- i {
11
+ --button-background#{$for}: #{$background};
20
12
  color: var(--button-color#{$for});
21
- --fa-primary-color: var(--button-color#{$for});
22
- --fa-secondary-color: var(--button-color#{$for});
23
- }
13
+ background: var(--button-background#{$for});
14
+
15
+ &:is(a) {
16
+ color: var(--button-color#{$for});
17
+ }
18
+
19
+ i {
20
+ color: var(--button-color#{$for});
21
+ --fa-primary-color: var(--button-color#{$for});
22
+ --fa-secondary-color: var(--button-color#{$for});
23
+ }
24
24
  }
25
25
 
26
26
  //= BUTTON
@@ -28,7 +28,12 @@ i {
28
28
  --button-border: var(--border-complete);
29
29
  --button-size: 1.5rem;
30
30
  --button-icon-size: 2.0rem;
31
- --button-padding: var(--button-size);
31
+ --button-padding-block: var(--button-size);
32
+ --button-padding-left: calc(var(--button-size) * 2);
33
+ --button-padding-right: calc(var(--button-size) * 2);
34
+ --button-padding: var(--button-padding-block) var(--button-padding-right) var(--button-padding-block) var(--button-padding-left);
35
+ --fa-secondary-opacity: 0.5;
36
+ --fa-size: var(--button-icon-size);
32
37
  @include _var-button-color(var(--color-box));
33
38
  font-family: var(--font);
34
39
  font-size: 1.6rem;
@@ -45,29 +50,40 @@ i {
45
50
  align-items: center;
46
51
  padding: var(--button-padding);
47
52
  width: max-content;
48
-
49
- i {
50
- --fa-secondary-opacity: 0.5;
51
- --fa-size: var(--button-icon-size);
52
- }
53
-
54
- &:disabled {
55
- opacity: 0.2;
56
- cursor: not-allowed;
57
- }
53
+ height: max-content;
54
+ margin-block: auto;
58
55
 
59
56
  //== onlyIcon
60
57
  @if($onlyIcon ==true) {
58
+ flex: 0 0;
61
59
  aspect-ratio: 1;
60
+ border-radius: 50%;
61
+ justify-content: center;
62
+ align-items: center;
63
+ --button-padding: var(--button-padding-block);
64
+
65
+ i {
66
+ display: inline-grid;
67
+ place-items: center;
68
+ inline-size: calc(var(--button-icon-size) - -2px);
69
+ block-size: var(--button-icon-size);
70
+ line-height: 1;
71
+ aspect-ratio: 1;
72
+ }
62
73
  }
63
74
 
64
75
  @else {
76
+ $button-right: calc(var(--button-size) * 2);
77
+ $button-left: calc(var(--button-size) * 1.4);
78
+
65
79
  &:has(i) {
66
- --button-padding: var(--button-size) calc(var(--button-size) + var(--button-size)/2) var(--button-size) var(--button-size);
80
+ --button-padding-right: #{$button-right};
81
+ --button-padding-left: #{$button-left};
67
82
  }
68
83
 
69
- &:not(:has(i)) {
70
- --button-padding: var(--button-size) calc(var(--button-size) * 2);
84
+ &[pgs-option~="buttonReverse"]:has(i) {
85
+ --button-padding-right: #{$button-left};
86
+ --button-padding-left: #{$button-right};
71
87
  }
72
88
  }
73
89
 
@@ -90,6 +106,11 @@ i {
90
106
  &[aria-current="page"]:not(:hover, :focus-visible) {
91
107
  @include _var-button-color(var(--color-primary), "-current", var(--color-whiteFixed));
92
108
  }
109
+
110
+ &:disabled {
111
+ opacity: 0.2;
112
+ cursor: not-allowed;
113
+ }
93
114
  }
94
115
 
95
116
  //= Button HOVER
@@ -133,6 +154,8 @@ i {
133
154
  --button-size: 0.5rem;
134
155
  display: inline-flex;
135
156
  aspect-ratio: unset;
157
+ margin-block: auto;
158
+ aspect-ratio: 1;
136
159
  }
137
160
 
138
161
  //== Button BIG
package/assets/scss/mixin/_mx-menu.scss CHANGED
@@ -59,7 +59,7 @@
59
59
  }
60
60
  }
61
61
 
62
- &[pgs-state=open] {
62
+ &[pgs-state~=open] {
63
63
  display: flex;
64
64
  }
65
65
  }