mypgs 2.0.0 → 2.1.0

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 (104) hide show
  1. package/README.md +25 -25
  2. package/assets/scss/components/_accordion.scss +0 -2
  3. package/assets/scss/components/_button.scss +1 -1
  4. package/assets/scss/components/_form.scss +0 -16
  5. package/assets/scss/components/_formAddon.scss +18 -0
  6. package/assets/scss/components/_modals.scss +5 -3
  7. package/assets/scss/components/_search.scss +2 -2
  8. package/assets/scss/components/_slides.scss +0 -1
  9. package/assets/scss/components/_tooltip.scss +0 -1
  10. package/assets/scss/index.scss +1 -0
  11. package/assets/scss/layout/_footer.scss +0 -2
  12. package/assets/scss/layout/_header.scss +9 -1
  13. package/assets/scss/layout/_pageShell.scss +6 -2
  14. package/assets/scss/mixin/_mx-button.scss +30 -76
  15. package/assets/scss/mixin/_mx-card.scss +11 -9
  16. package/assets/scss/mixin/_mx-form.scss +3 -5
  17. package/assets/scss/mixin/{_mx-form-addon.scss → _mx-formAddon.scss} +23 -26
  18. package/assets/scss/mixin/_mx-hover.scss +75 -0
  19. package/assets/scss/mixin/_settings.scss +2 -1
  20. package/assets/scss/mixin/mixin.scss +2 -1
  21. package/demo/demo.js +4 -3
  22. package/dist/css/index.css +1166 -1517
  23. package/dist/css/index.css.map +1 -1
  24. package/dist/css/index.min.css +1 -1
  25. package/docs/componenti-e-markup.md +6 -5
  26. package/docs/components/accordion.md +22 -22
  27. package/docs/components/badges.md +19 -19
  28. package/docs/components/breadcumbs.md +8 -8
  29. package/docs/components/button.md +17 -17
  30. package/docs/components/card.md +19 -19
  31. package/docs/components/dropdown.md +29 -29
  32. package/docs/components/form.md +63 -40
  33. package/docs/components/formAddon.md +79 -0
  34. package/docs/components/logo.md +11 -11
  35. package/docs/components/menu.md +20 -20
  36. package/docs/components/modal.md +46 -46
  37. package/docs/components/notification.md +34 -34
  38. package/docs/components/search.md +51 -50
  39. package/docs/components/slides.md +39 -39
  40. package/docs/components/stepTabs.md +41 -41
  41. package/docs/components/steps.md +16 -16
  42. package/docs/components/summary.md +20 -20
  43. package/docs/components/table.md +7 -7
  44. package/docs/components/tooltip.md +22 -22
  45. package/docs/convenzioni.md +11 -11
  46. package/docs/export-e-sviluppo.md +3 -3
  47. package/docs/helper-javascript.md +7 -7
  48. package/docs/layout/body.md +11 -11
  49. package/docs/layout/flex.md +44 -44
  50. package/docs/layout/footer.md +23 -23
  51. package/docs/layout/grid.md +44 -44
  52. package/docs/layout/header.md +34 -34
  53. package/docs/layout/pageShell.md +11 -11
  54. package/docs/layout/section.md +26 -26
  55. package/docs/patterns/cookieConsent.md +38 -38
  56. package/docs/utilizzo-css-scss.md +8 -8
  57. package/package.json +1 -1
  58. package/scripts/generate-component-docs.js +5 -5
  59. package/templates/html/components/accordion.html +19 -19
  60. package/templates/html/components/badges.html +17 -17
  61. package/templates/html/components/breadcumbs.html +6 -6
  62. package/templates/html/components/button.html +15 -15
  63. package/templates/html/components/card.html +17 -17
  64. package/templates/html/components/dropdown.html +25 -25
  65. package/templates/html/components/form.html +58 -35
  66. package/templates/html/components/formAddon.html +72 -0
  67. package/templates/html/components/logo.html +9 -9
  68. package/templates/html/components/menu.html +16 -16
  69. package/templates/html/components/modal.html +42 -42
  70. package/templates/html/components/notification.html +30 -30
  71. package/templates/html/components/search.html +43 -42
  72. package/templates/html/components/slides.html +31 -31
  73. package/templates/html/components/stepTabs.html +37 -37
  74. package/templates/html/components/steps.html +13 -13
  75. package/templates/html/components/summary.html +17 -17
  76. package/templates/html/components/table.html +5 -5
  77. package/templates/html/components/tooltip.html +18 -18
  78. package/templates/html/layout/body.html +9 -10
  79. package/templates/html/layout/flex.html +42 -42
  80. package/templates/html/layout/footer.html +20 -20
  81. package/templates/html/layout/grid.html +42 -42
  82. package/templates/html/layout/header.html +32 -32
  83. package/templates/html/layout/pageShell.html +8 -8
  84. package/templates/html/layout/section.html +24 -24
  85. package/templates/html/patterns/cookieConsent.html +33 -33
  86. package/templates/react/components/accordion.jsx +4 -4
  87. package/templates/react/components/breadcumbs.jsx +1 -1
  88. package/templates/react/components/button.jsx +5 -5
  89. package/templates/react/components/card.jsx +4 -4
  90. package/templates/react/components/dropdown.jsx +8 -8
  91. package/templates/react/components/form.jsx +2 -2
  92. package/templates/react/components/modal.jsx +14 -14
  93. package/templates/react/components/notification.jsx +3 -3
  94. package/templates/react/components/search.jsx +5 -5
  95. package/templates/react/components/slides.jsx +3 -3
  96. package/templates/react/components/stepTabs.jsx +8 -8
  97. package/templates/react/components/summary.jsx +3 -3
  98. package/templates/react/components/table.jsx +2 -2
  99. package/templates/react/layout/flex.jsx +8 -8
  100. package/templates/react/layout/grid.jsx +8 -8
  101. package/templates/react/layout/section.jsx +12 -12
  102. package/templates/react/patterns/cookieConsent.jsx +8 -8
  103. package/templates/react/patterns/footer.jsx +3 -3
  104. package/templates/react/patterns/header.jsx +3 -3
package/README.md CHANGED
@@ -1,22 +1,22 @@
1
1
  # MyPGS
2
2
 
3
- `mypgs` e' una libreria frontend condivisa per costruire interfacce coerenti tramite attributi `pgs`, SCSS sorgenti, componenti UI e comportamenti JavaScript riutilizzabili.
3
+ `mypgs` is a shared frontend library for building consistent interfaces through `pgs` attributes, SCSS sources, UI components, and reusable JavaScript behaviors.
4
4
 
5
- La libreria nasce come base di design system: layout, spacing, colori, bottoni, form, menu, modali, dropdown, ricerca con suggerimenti, slides, notifiche e pattern ricorrenti vengono definiti una volta sola e riusati nei progetti.
5
+ The library provides a design-system foundation: layouts, spacing, colors, buttons, forms, menus, modals, dropdowns, suggestion search, slides, notifications, and recurring patterns are defined once and reused across projects.
6
6
 
7
- ## Cosa contiene
7
+ ## What it includes
8
8
 
9
- - `assets/scss/`: SCSS sorgenti divisi in base, layout, componenti, pattern e mixin.
10
- - `assets/javascript/`: helper `pgs`, componenti JS, funzioni e pattern.
11
- - `templates/`: esempi HTML pronti per componenti e layout.
12
- - `dist/css/`: CSS compilato.
13
- - `dist/javascript/`: bundle JavaScript compilato.
14
- - `dist/index.d.ts`: dichiarazioni TypeScript esportate dal pacchetto.
15
- - `AGENTS.md`: guida operativa per AI.
9
+ - `assets/scss/`: SCSS sources divided into base, layouts, components, patterns, and mixins.
10
+ - `assets/javascript/`: the `pgs` helper, JavaScript components, functions, and patterns.
11
+ - `templates/`: ready-to-use HTML examples for components and layouts.
12
+ - `dist/css/`: compiled CSS.
13
+ - `dist/javascript/`: compiled JavaScript bundle.
14
+ - `dist/index.d.ts`: TypeScript declarations exported by the package.
15
+ - `AGENTS.md`: operating guide for AI agents.
16
16
 
17
- ## Installazione
17
+ ## Installation
18
18
 
19
- Da registry **npm**:
19
+ From the **npm** registry:
20
20
 
21
21
  ```bash
22
22
  npm install mypgs
@@ -28,15 +28,15 @@ npm install mypgs
28
28
  import "mypgs";
29
29
  ```
30
30
 
31
- Se ti serve accedere direttamente all'helper:
31
+ To access the helper directly:
32
32
 
33
33
  ```js
34
34
  import { pgs } from "mypgs";
35
35
  ```
36
36
 
37
- **React/TSX con Vite:**
37
+ **React/TSX with Vite:**
38
38
 
39
- Configura il plugin che converte `pgsHtml` in `pgs`:
39
+ Configure the plugin that converts `pgsHtml` into `pgs`:
40
40
 
41
41
  ```ts
42
42
  // vite.config.ts
@@ -51,7 +51,7 @@ export default {
51
51
 
52
52
  ### SCSS
53
53
 
54
- Se il progetto vuole compilare un CSS unico, importa gli SCSS sorgenti:
54
+ To compile a single CSS file, import the SCSS sources:
55
55
 
56
56
  ```scss
57
57
  @use "sass:meta";
@@ -59,7 +59,7 @@ Se il progetto vuole compilare un CSS unico, importa gli SCSS sorgenti:
59
59
  @include meta.load-css("../../node_modules/mypgs/assets/scss/index.scss");
60
60
  ```
61
61
 
62
- Se servono solo i mixin:
62
+ To import only the mixins:
63
63
 
64
64
  ```scss
65
65
  @use "../../node_modules/mypgs/assets/scss/mixin/mixin.scss" as * ;
@@ -67,20 +67,20 @@ Se servono solo i mixin:
67
67
 
68
68
  ### Markup
69
69
 
70
- `initP` e' importante: tutti i layout, componenti e pattern SCSS sono definiti sotto `[pgs~=initP]`.
70
+ `initP` is required: every SCSS layout, component, and pattern is scoped under `[pgs~=initP]`.
71
71
 
72
72
  ```html
73
- <html lang="it" pgs="htmlBase initP">
73
+ <html lang="en" pgs="htmlBase initP">
74
74
  <body pgs="bodyBase bodyImg bodyText bodyHeading">
75
75
  <main pgs="main"></main>
76
76
  </body>
77
77
  </html>
78
78
  ```
79
79
 
80
- ## Documentazione
80
+ ## Documentation
81
81
 
82
- - [Utilizzo CSS/SCSS](docs/utilizzo-css-scss.md)
83
- - [Helper JavaScript](docs/helper-javascript.md)
84
- - [Componenti e markup](docs/componenti-e-markup.md)
85
- - [Export npm e sviluppo](docs/export-e-sviluppo.md)
86
- - [Convenzioni](docs/convenzioni.md)
82
+ - [CSS/SCSS usage](docs/utilizzo-css-scss.md)
83
+ - [JavaScript helper](docs/helper-javascript.md)
84
+ - [Components and markup](docs/componenti-e-markup.md)
85
+ - [npm exports and development](docs/export-e-sviluppo.md)
86
+ - [Conventions](docs/convenzioni.md)
package/assets/scss/components/_accordion.scss CHANGED
@@ -11,7 +11,6 @@
11
11
 
12
12
  &:not([pgs-state~=open]) {
13
13
  @include button(true);
14
- --button-background: var(--color-box);
15
14
  --button-size: var(--padding-2);
16
15
  }
17
16
 
@@ -59,7 +58,6 @@
59
58
  //= OPEN
60
59
  &[pgs-state~=open] {
61
60
  @include button(false);
62
- --button-background: var(--color-box);
63
61
  --button-size: var(--padding-2);
64
62
  margin-top: var(--padding);
65
63
 
package/assets/scss/components/_button.scss CHANGED
@@ -27,4 +27,4 @@
27
27
 
28
28
  [pgs~=buttonClose] {
29
29
  @include buttonClose();
30
- }
30
+ }
package/assets/scss/components/_form.scss CHANGED
@@ -25,22 +25,6 @@
25
25
  @include select();
26
26
  }
27
27
 
28
- [pgs~=checkboxBackground] {
29
- @include checkboxBackground();
30
- }
31
-
32
- [pgs~=twoState] {
33
- @include twoState();
34
- }
35
-
36
- [pgs~=toggle] {
37
- @include toggle();
38
- }
39
-
40
- [pgs~=chips] {
41
- @include chips();
42
- }
43
-
44
28
  [pgs~=radio],
45
29
  [pgs~=checkbox] {
46
30
  @include checkbox();
package/assets/scss/components/_formAddon.scss ADDED
@@ -0,0 +1,18 @@
1
+ @use "../mixin/mixin" as *;
2
+
3
+ //# FORM ADDON
4
+ [pgs~=checkboxBackground] {
5
+ @include checkboxBackground();
6
+ }
7
+
8
+ [pgs~=twoState] {
9
+ @include twoState();
10
+ }
11
+
12
+ [pgs~=toggle] {
13
+ @include toggle();
14
+ }
15
+
16
+ [pgs~=chips] {
17
+ @include chips();
18
+ }
package/assets/scss/components/_modals.scss CHANGED
@@ -20,6 +20,8 @@ dialog[pgs~="modal-dialog"] {
20
20
  --modal-backdrop: var(--backdrop);
21
21
  --modal-background: var(--color-box);
22
22
  --modal-color: var(--color-black);
23
+ --modal-padding: var(--padding);
24
+ --modal-borderRadius: var(--border-radius);
23
25
  border: none;
24
26
  min-width: 100%;
25
27
  min-height: 100svh;
@@ -54,12 +56,12 @@ dialog[pgs~="modal-dialog"] {
54
56
  container-type: inline-size;
55
57
  background: var(--modal-background);
56
58
  color: var(--modal-color);
57
- border-radius: var(--border-radius);
59
+ border-radius: var(--modal-borderRadius);
58
60
  position: relative;
59
61
  gap: 0;
60
62
 
61
63
  >* {
62
- padding: var(--padding);
64
+ padding: var(--modal-padding);
63
65
  }
64
66
 
65
67
  //==== HEADER
@@ -67,7 +69,7 @@ dialog[pgs~="modal-dialog"] {
67
69
  @include flexRow(nowrap);
68
70
  padding-bottom: calc(var(--padding) / 2);
69
71
  border-bottom: var(--border-complete);
70
- border-radius: var(--border-radius) var(--border-radius) 0 0;
72
+ border-radius: var(--modal-borderRadius) var(--modal-borderRadius) 0 0;
71
73
  z-index: 1;
72
74
 
73
75
  [pgs~="modal-close"] {
package/assets/scss/components/_search.scss CHANGED
@@ -133,8 +133,8 @@
133
133
  margin-inline: auto;
134
134
  background-color: var(--color-white);
135
135
 
136
- input {
137
- padding-block: 20px;
136
+ [pgs~="modal-close"]{
137
+ padding: var(--button-size);
138
138
  }
139
139
  }
140
140
  }
package/assets/scss/components/_slides.scss CHANGED
@@ -113,7 +113,6 @@
113
113
  [pgs~="slides-next"] {
114
114
  position: absolute;
115
115
  z-index: 4;
116
- --button-background: var(--color-box);
117
116
  top: 50%;
118
117
  translate: 0 -50%;
119
118
 
package/assets/scss/components/_tooltip.scss CHANGED
@@ -4,7 +4,6 @@
4
4
  --dropdown-padding: 15px;
5
5
 
6
6
  [pgs~="tooltip-button"][pgs~="dropdown-button"] {
7
- // --button-background: var(--color-black);
8
7
  --fa-size: .9rem;
9
8
  }
10
9
 
package/assets/scss/index.scss CHANGED
@@ -39,6 +39,7 @@
39
39
  @include meta.load-css("components/card");
40
40
  @include meta.load-css("components/button");
41
41
  @include meta.load-css("components/form");
42
+ @include meta.load-css("components/formAddon");
42
43
  @include meta.load-css("components/menu");
43
44
  @include meta.load-css("components/accordion");
44
45
  @include meta.load-css("components/breadcumbs");
package/assets/scss/layout/_footer.scss CHANGED
@@ -20,8 +20,6 @@
20
20
  top: 0;
21
21
  translate: 0 -50%;
22
22
  z-index: 1;
23
- --button-background: var(--color-primary);
24
- --button-color: var(--color-whiteFixed);
25
23
 
26
24
  &:has(i.fa-sun) {
27
25
  &::after {
package/assets/scss/layout/_header.scss CHANGED
@@ -74,6 +74,14 @@
74
74
  opacity: 0.6;
75
75
  }
76
76
 
77
+ &:hover {
78
+
79
+ &::before,
80
+ &::after {
81
+ background-color: var(--color-white);
82
+ }
83
+ }
84
+
77
85
  //=== OPEN
78
86
  &[aria-expanded="true"] {
79
87
  gap: 0px;
@@ -154,4 +162,4 @@
154
162
  padding-inline: var(--header-padding-block);
155
163
  }
156
164
  }
157
- }
165
+ }
package/assets/scss/layout/_pageShell.scss CHANGED
@@ -10,10 +10,14 @@ $pageShell-test-gap: 4rem;
10
10
  max-height: none;
11
11
  width: 100%;
12
12
  min-width: 100%;
13
+ overflow: visible;
14
+ overscroll-behavior: auto;
15
+ scrollbar-gutter: auto;
13
16
 
14
- [pgs~="pageShell-aside"] {
17
+ [pgs~="pageShell-aside-scroll"] {
15
18
  scrollbar-gutter: auto;
16
19
  overflow: visible;
20
+ overscroll-behavior: auto;
17
21
  }
18
22
  }
19
23
 
@@ -194,4 +198,4 @@ $pageShell-test-gap: 4rem;
194
198
  @include pageShell-aside-flow;
195
199
  }
196
200
  }
197
- }
201
+ }
package/assets/scss/mixin/_mx-button.scss CHANGED
@@ -1,40 +1,31 @@
1
1
  //+ VAR
2
- @mixin _var-button-color($background, $for: null, $colorNotContrast: var(--color-black)) {
3
- @supports (color: contrast-color(red)) {
4
- --button-color#{$for}: contrast-color(color-mix(in srgb, var(--button-background#{$for}) 77%, black));
5
- }
6
-
7
- @supports not (color: contrast-color(red)) {
8
- --button-color#{$for}: #{$colorNotContrast};
9
- }
10
-
11
- --button-background#{$for}: #{$background};
2
+ @use "mx-hover" as *;
3
+
4
+ @mixin button-mx-varColor($for: "") {
5
+ --button-color: var(--color-black);
6
+ --button-color-strong: var(--color-whiteFixed);
7
+ --button-color-current: var(--color-whiteFixed);
8
+ --button-background: var(--color-box);
9
+ --button-background-strong: var(--color-primary);
10
+ --button-background-current: var(--color-primary);
11
+ /// Application
12
12
  color: var(--button-color#{$for});
13
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
- }
14
+ --fa-primary-color: var(--button-color#{$for});
15
+ --fa-secondary-color: var(--button-color#{$for});
24
16
  }
25
17
 
26
18
  //= BUTTON
27
19
  @mixin button($hover: true, $onlyIcon: false, $strong: false) {
28
20
  --button-border: var(--border-complete);
29
21
  --button-size: 1.5rem;
30
- --button-icon-size: 2.0rem;
22
+ --button-icon-size: 2rem;
31
23
  --button-padding-block: var(--button-size);
32
24
  --button-padding-left: calc(var(--button-size) * 2);
33
25
  --button-padding-right: calc(var(--button-size) * 2);
34
26
  --button-padding: var(--button-padding-block) var(--button-padding-right) var(--button-padding-block) var(--button-padding-left);
35
27
  --fa-secondary-opacity: 0.5;
36
28
  --fa-size: var(--button-icon-size);
37
- @include _var-button-color(var(--color-box));
38
29
  font-family: var(--font);
39
30
  font-size: 1.6rem;
40
31
  font-weight: 600;
@@ -46,26 +37,26 @@
46
37
  outline: var(--button-border);
47
38
  border-radius: var(--border-radius-input);
48
39
  display: flex;
49
- gap: calc(var(--button-size)/1.5);
40
+ gap: calc(var(--button-size) / 1.5);
50
41
  align-items: center;
51
42
  padding: var(--button-padding);
52
43
  height: max-content;
53
44
  width: max-content;
54
45
  margin-block: auto;
55
46
 
56
- //== onlyIcon
57
- @if($onlyIcon ==true) {
47
+ //== ONLY ICON
48
+ @if $onlyIcon {
49
+ --button-padding: var(--button-padding-block);
58
50
  flex: 0 0;
59
51
  aspect-ratio: 1;
60
52
  border-radius: 50%;
61
53
  justify-content: center;
62
54
  align-items: center;
63
- --button-padding: var(--button-padding-block);
64
55
 
65
56
  i {
66
57
  display: inline-grid;
67
58
  place-items: center;
68
- inline-size: calc(var(--button-icon-size) - -2px);
59
+ inline-size: calc(var(--button-icon-size) + 2px);
69
60
  block-size: var(--button-icon-size);
70
61
  line-height: 1;
71
62
  aspect-ratio: 1;
@@ -87,24 +78,24 @@
87
78
  }
88
79
  }
89
80
 
90
- //== hover
91
- @if ($hover ==true) {
92
- @include buttonHover();
93
- }
94
-
95
- @else {
81
+ //== HOVER
82
+ @if $hover {
83
+ @include hover();
84
+ } @else {
96
85
  transition: all 200ms;
97
86
  cursor: inherit;
98
87
  }
99
88
 
100
- //== strong
101
- @if ($strong ==true) {
102
- @include _var-button-color(var(--color-primary), "-strong", var(--color-whiteFixed));
89
+ //== STRONG
90
+ @if $strong {
91
+ @include button-mx-varColor("-strong");
92
+ } @else {
93
+ @include button-mx-varColor();
103
94
  }
104
95
 
105
- //== current
96
+ //== CURRENT
106
97
  &[aria-current="page"]:not(:hover, :focus-visible) {
107
- @include _var-button-color(var(--color-primary), "-current", var(--color-whiteFixed));
98
+ @include button-mx-varColor("-current");
108
99
  }
109
100
 
110
101
  &:disabled {
@@ -113,41 +104,6 @@
113
104
  }
114
105
  }
115
106
 
116
- //= Button HOVER
117
- @mixin buttonHover() {
118
- transition: all 200ms;
119
- cursor: pointer;
120
- text-decoration: none;
121
-
122
- &:not(:disabled) {
123
- @media (hover: hover) and (pointer: fine) {
124
-
125
- &:focus-visible,
126
- &:hover {
127
- $n: .25rem;
128
- $-n: -$n;
129
- box-shadow: $-n $n 0px var(--color-black);
130
- transform: translate($n, $-n);
131
- @include _var-button-color(var(--color-primary-soft), "-hover");
132
- outline-color: transparent;
133
-
134
- i {
135
- --fa-secondary-opacity: 0.5;
136
- }
137
- }
138
- }
139
- }
140
-
141
- &:is(a):hover {
142
- text-decoration: none;
143
- }
144
-
145
- &:active {
146
- box-shadow: 0 0 0 var(--color-black);
147
- transform: translate(0, 0);
148
- }
149
- }
150
-
151
107
  //= Button mini
152
108
  @mixin buttonMini($hover: true) {
153
109
  @include button($hover, true);
@@ -195,8 +151,6 @@
195
151
  --button-background: var(--color-error-background);
196
152
  --button-color: var(--color-error);
197
153
  }
198
-
199
- &:hover {}
200
154
  }
201
155
 
202
156
  //= button header
@@ -206,4 +160,4 @@
206
160
  overflow-wrap: break-word;
207
161
  height: calc(var(--button-size) * 4);
208
162
  // height: var(--header-size);
209
- }
163
+ }
package/assets/scss/mixin/_mx-card.scss CHANGED
@@ -1,10 +1,11 @@
1
1
  @use "settings" as *;
2
2
  @use "mx-button" as *;
3
+ @use "mx-hover" as *;
3
4
  @use "mx-responsive" as *;
4
5
 
5
6
  @mixin card-insideImg() {
6
7
  $cardImgPadding: calc(var(--card-padding) * -1);
7
- border-radius: var(--border-radius);
8
+ border-radius: var(--card-borderRadius);
8
9
  border-bottom-left-radius: 0;
9
10
  border-bottom-right-radius: 0;
10
11
  margin: $cardImgPadding;
@@ -14,26 +15,27 @@
14
15
  }
15
16
 
16
17
  @mixin card() {
17
- --card-padding: var(--padding);
18
+ --card-padding: var(--padding-2);
19
+ --card-borderRadius: calc(var(--border-radius-input) + var(--card-padding));
20
+ --card-background: var(--color-box-transparent);
21
+ --card-padding-img: 0;
18
22
  height: 100%;
19
23
 
20
24
  &:not(:has(>a)) {
21
- --card-background: var(--color-box-transparent);
22
- --card-padding-img: 0;
23
25
  padding: var(--card-padding);
24
26
  background: var(--card-background);
25
- border-radius: var(--border-radius);
27
+ border-radius: var(--card-borderRadius);
26
28
  // box-shadow: var(--box-shadow);
27
29
  }
28
30
 
29
31
  >a {
30
32
  --card-background: var(--color-white);
31
- --card-padding-img: .3rem;
32
- @include buttonHover();
33
+ @include hover();
33
34
  height: 100%;
34
35
  padding: var(--card-padding);
36
+ padding-bottom: calc(var(--card-padding) * 2);
35
37
  background: var(--card-background);
36
- border-radius: var(--border-radius);
38
+ border-radius: var(--card-borderRadius);
37
39
  outline: var(--border-complete);
38
40
  }
39
41
 
@@ -78,4 +80,4 @@
78
80
  --fa-secondary-color: var(--color-warning);
79
81
  }
80
82
  }
81
- }
83
+ }
package/assets/scss/mixin/_mx-form.scss CHANGED
@@ -93,7 +93,6 @@
93
93
  &::file-selector-button {
94
94
  --button-background: var(--color-box);
95
95
  --button-color: var(--color-black);
96
-
97
96
  width: 40%;
98
97
  margin-bottom: var(--gap-texts);
99
98
  margin-right: var(--gap-texts);
@@ -232,6 +231,7 @@
232
231
  outline: solid var(--color-boxDark) 0.1rem;
233
232
  background: var(--checkbox-box-background);
234
233
  color: var(--color-primary-soft);
234
+ transform: translateX(0.3rem);
235
235
  }
236
236
 
237
237
  //=== ICON CHECK
@@ -241,6 +241,7 @@
241
241
  text-align: center;
242
242
  opacity: 0;
243
243
  color: var(--checkbox-check-color);
244
+ transform: translateX(0.25rem);
244
245
  }
245
246
 
246
247
  //=== Checked
@@ -504,9 +505,6 @@
504
505
  }
505
506
  }
506
507
 
507
- // button[type=submit] {
508
- // --button-background: var(--color-error);
509
- // }
510
508
  label:has(+[pgs-option~="error"], [pgs-option~="error"]) {
511
509
  &:has(input[type=checkbox]) {
512
510
  background-color: var(--color-error) !important;
@@ -522,4 +520,4 @@
522
520
  }
523
521
  }
524
522
  }
525
- }
523
+ }
package/assets/scss/mixin/{_mx-form-addon.scss → _mx-formAddon.scss} RENAMED
@@ -20,12 +20,12 @@
20
20
  //== checked
21
21
  &:has(input:checked) {
22
22
  background-color: var(--color-primary-soft);
23
- color: var(--color-black);
24
23
 
24
+ // color: var(--color-black);
25
25
  i {
26
- --fa-primary-color: var(--color-black);
27
- --fa-secondary-color: var(--color-black);
28
- color: var(--color-black);
26
+ // --fa-primary-color: var(--color-black);
27
+ // --fa-secondary-color: var(--color-black);
28
+ // color: var(--color-black);
29
29
  opacity: 1;
30
30
  }
31
31
  }
@@ -33,36 +33,33 @@
33
33
 
34
34
  //= TWOSTATE
35
35
  @mixin twoState() {
36
+ //== label
36
37
  position: relative;
37
38
  isolation: isolate;
38
- --button-background-active: var(--color-primary-strong);
39
+ --button-background-active: var(--color-primary);
39
40
  --button-color-active: var(--color-white);
41
+ @include button();
42
+ flex-wrap: wrap;
43
+ display: flex !important;
44
+ cursor: pointer;
45
+
46
+ i {
47
+ opacity: 0.4;
48
+ min-width: 1.4rem;
49
+ transition: 300ms;
50
+ }
40
51
 
41
- //== label
42
- label {
43
- @include button();
44
- flex-wrap: wrap;
45
- display: flex !important;
46
- cursor: pointer;
47
-
52
+ &:hover {
48
53
  i {
49
- color: var(--color-black);
50
- opacity: 0.4;
51
- min-width: 1.4rem;
52
- transition: 300ms;
53
- }
54
-
55
- &:hover {
56
- i {
57
- opacity: 1;
58
- }
54
+ opacity: 1;
59
55
  }
60
56
  }
61
57
 
62
58
  //== checked
63
- &:has(input:checked) label {
59
+ &:has(input:checked) {
64
60
  --button-background: var(--button-background-active);
65
-
61
+ --button-color: var(--button-color-active);
62
+
66
63
  @supports not (color: contrast-color(red)) {
67
64
  --button-color: var(--button-color-active);
68
65
  }
@@ -178,6 +175,6 @@
178
175
 
179
176
  label {
180
177
  outline: unset;
181
- --button-background: trasparent;
178
+ --button-background: var(--color-box-transparent);
182
179
  }
183
- }
180
+ }