mypgs 1.6.0 → 2.1.0

package/assets/scss/components/_modals.scss

@@ -20,6 +20,8 @@ dialog[pgs~="modal-dialog"] {
     --modal-backdrop: var(--backdrop);
     --modal-background: var(--color-box);
     --modal-color: var(--color-black);
+    --modal-padding: var(--padding);
+    --modal-borderRadius: var(--border-radius);
     border: none;
     min-width: 100%;
     min-height: 100svh;
@@ -54,12 +56,12 @@ dialog[pgs~="modal-dialog"] {
         container-type: inline-size;
         background: var(--modal-background);
         color: var(--modal-color);
-        border-radius: var(--border-radius);
+        border-radius: var(--modal-borderRadius);
         position: relative;
         gap: 0;
 
         >* {
-            padding: var(--padding);
+            padding: var(--modal-padding);
         }
 
         //==== HEADER
@@ -67,7 +69,7 @@ dialog[pgs~="modal-dialog"] {
             @include flexRow(nowrap);
             padding-bottom: calc(var(--padding) / 2);
             border-bottom: var(--border-complete);
-            border-radius: var(--border-radius) var(--border-radius) 0 0;
+            border-radius: var(--modal-borderRadius) var(--modal-borderRadius) 0 0;
             z-index: 1;
 
             [pgs~="modal-close"] {

package/assets/scss/components/_notification.scss

@@ -3,34 +3,7 @@
 //= NOTIFICATION GROUP / TRIGGER
 [pgs~="notificationTrigger"] {}
 
-//= NOTIFICATION STYLE
-@mixin notification($position: center) {
-    @if ($position ==center) {
-        inset-inline: 0;
-        top: calc(var(--heightOfHeader) + 10px);
-
-        @at-root body:has(header[data-header-scroll="true"]) #{&} {
-            top: 10px;
-        }
-    }
-
-    @else if($position ==right) {
-        top: calc(var(--heightOfHeader) + 10px);
-        right: 10px;
-
-        @at-root body:has(header[data-header-scroll="true"]) #{&} {
-            top: 0;
-        }
-    }
-
-    @else if($position ==bottom) {
-        bottom: 10px;
-        right: 10px;
-    }
-}
-
-[pgs~="notification"],
-[pgs~="toast"] {
+[pgs~="notification"] {
     display: flex;
     flex-direction: column;
     gap: var(--gap-texts);
@@ -183,10 +156,30 @@
     }
 }
 
-[pgs~="notification"] {
+//= NOTIFICATION STYLE
+@mixin notification($position: center) {
+    $size: 1.0rem;
+
+    @if ($position ==center) {
+        inset-inline: 0;
+        top: calc(var(--heightOfHeaderScroll) + $size);
+    }
+
+    @else if($position ==right) {
+        top: calc(var(--heightOfHeaderScroll) + $size);
+        right: $size;
+    }
+
+    @else if($position ==bottom) {
+        inset-inline: 0;
+        bottom: $size;
+    }
+}
+
+[pgs~="notification"]:not([pgs-option~="toast"]) {
     @include notification(right);
 }
 
-[pgs~="toast"] {
+[pgs~="notification"][pgs-option~="toast"] {
     @include notification(center);
 }

package/assets/scss/components/_search.scss

@@ -5,9 +5,9 @@
     --search-suggestions-color: var(--color-text);
     --search-suggestions-border: var(--border-complete);
     --search-suggestions-borderRadius: var(--border-radius-input);
-    --search-suggestions-box-shadow: var(--box-shadow);
+    --search-suggestions-boxShadow: var(--box-shadow);
     --search-suggestions-gap: 0;
-    --search-suggestions-max-height: 32rem;
+    --search-suggestions-maxHeight: 32rem;
     --search-suggestions-offset: .5rem;
     --search-suggestions-padding: .5rem;
     --search-suggestions-item-padding: 1rem;
@@ -15,12 +15,12 @@
     --search-suggestions-item-selected-color: var(--color-whiteFixed);
     position: relative;
     @include flexRow(nowrap);
+    @include button_header();
     flex: 1;
     width: 100%;
     overflow: visible;
     margin-inline: auto;
     padding: 0;
-    @include button_header();
 
     @media (min-width: $mobile) {
         min-width: 21.4rem;
@@ -67,30 +67,33 @@
         outline: var(--focus-visible);
     }
 
-    &:not([pgs-state~="open"])>[pgs~="search-suggestions"] {
-        display: none;
-    }
+    @mixin _color($varColor) {
+        background: var(#{$varColor}-background);
+        color: var(#{$varColor}-color);
 
-    &[pgs-state~="open"]>[pgs~="search-suggestions"] {
-        display: flex;
+        i {
+            color: var(#{$varColor}-color);
+            --fa-primary-color: var(#{$varColor}-color);
+            --fa-secondary-color: var(#{$varColor}-color);
+        }
     }
 
-    >[pgs~="search-suggestions"] {
+    [pgs~="search-suggestions"] {
+        display: none;
         position: absolute;
         inset: calc(100% + var(--search-suggestions-offset)) 0 auto;
         z-index: 1000;
         flex-direction: column;
         gap: var(--search-suggestions-gap);
-        max-height: var(--search-suggestions-max-height);
+        max-height: var(--search-suggestions-maxHeight);
         overflow-y: auto;
         padding: var(--search-suggestions-padding);
         margin: 0;
         list-style: none;
         border: var(--search-suggestions-border);
         border-radius: calc(var(--search-suggestions-borderRadius) + var(--search-suggestions-padding));
-        background: var(--search-suggestions-background);
-        color: var(--search-suggestions-color);
-        box-shadow: var(--search-suggestions-box-shadow);
+        box-shadow: var(--search-suggestions-boxShadow);
+        @include _color(--search-suggestions);
 
         [pgs~="search-suggestions-item"] {
             padding: var(--search-suggestions-item-padding);
@@ -100,8 +103,7 @@
 
             &[aria-selected="true"],
             &:hover {
-                background: var(--search-suggestions-item-selected-background);
-                color: var(--search-suggestions-item-selected-color);
+                @include _color(--search-suggestions-item-selected);
             }
 
             &[aria-disabled="true"] {
@@ -110,25 +112,29 @@
             }
         }
 
-        &:has([pgs~="search-suggestions-item"]:hover) [pgs~="search-suggestions-item"][aria-selected="true"] {
-            background: var(--search-suggestions-background);
-            color: var(--search-suggestions-color);
+        &:has([pgs~="search-suggestions-item"]:hover) {
+            [pgs~="search-suggestions-item"][aria-selected="true"] {
+                @include _color(--search-suggestions);
 
-            &:hover {
-                background: var(--search-suggestions-item-selected-background);
-                color: var(--search-suggestions-item-selected-color);
+                &:hover {
+                    @include _color(--search-suggestions-item-selected);
+                }
             }
         }
     }
 
+    &[pgs-state~="open"] [pgs~="search-suggestions"] {
+        display: flex;
+    }
+
     @at-root dialog #{&} {
         max-width: calc(100% - var(--padding-page) * 2);
         height: max-content;
         margin-inline: auto;
         background-color: var(--color-white);
 
-        input {
-            padding-block: 20px;
+        [pgs~="modal-close"]{
+            padding: var(--button-size);
         }
     }
 }

package/assets/scss/components/_slides.scss

@@ -113,7 +113,6 @@
     [pgs~="slides-next"] {
         position: absolute;
         z-index: 4;
-        --button-background: var(--color-box);
         top: 50%;
         translate: 0 -50%;
 

package/assets/scss/components/_tooltip.scss

@@ -4,7 +4,6 @@
     --dropdown-padding: 15px;
 
     [pgs~="tooltip-button"][pgs~="dropdown-button"] {
-        // --button-background: var(--color-black);
         --fa-size: .9rem;
     }
 

package/assets/scss/index.scss

@@ -39,6 +39,7 @@
     @include meta.load-css("components/card");
     @include meta.load-css("components/button");
     @include meta.load-css("components/form");
+    @include meta.load-css("components/formAddon");
     @include meta.load-css("components/menu");
     @include meta.load-css("components/accordion");
     @include meta.load-css("components/breadcumbs");

package/assets/scss/layout/_footer.scss

@@ -20,8 +20,6 @@
         top: 0;
         translate: 0 -50%;
         z-index: 1;
-        --button-background: var(--color-primary);
-        --button-color: var(--color-whiteFixed);
 
         &:has(i.fa-sun) {
             &::after {

package/assets/scss/layout/_header.scss

@@ -74,6 +74,14 @@
                     opacity: 0.6;
                 }
 
+                &:hover {
+
+                    &::before,
+                    &::after {
+                        background-color: var(--color-white);
+                    }
+                }
+
                 //=== OPEN
                 &[aria-expanded="true"] {
                     gap: 0px;
@@ -154,4 +162,4 @@
             padding-inline: var(--header-padding-block);
         }
     }
-}
+}

package/assets/scss/layout/_pageShell.scss

@@ -10,17 +10,24 @@ $pageShell-test-gap: 4rem;
     max-height: none;
     width: 100%;
     min-width: 100%;
+    overflow: visible;
+    overscroll-behavior: auto;
+    scrollbar-gutter: auto;
 
-    [pgs~="pageShell-aside"] {
+    [pgs~="pageShell-aside-scroll"] {
         scrollbar-gutter: auto;
         overflow: visible;
+        overscroll-behavior: auto;
     }
 }
 
 [pgs~="pageShell"] {
-    --pageShell-aside-sticky-top: 0;
+    --pageShell-width: calc(var(--pageShell-content-width) + (var(--padding-page) * 2));
+    --pageShell-content-width: var(--page-width);
     --pageShell-aside-width: #{$aside-size};
-    --pageShell-content-width: 500px;
+    --pageShell-aside-sticky-top: 0;
+    --pageShell-paddingInline: var(--padding-page);
+    --pageShell-paddingTop: var(--page-top);
     --pageShell-gap: var(--gap-elements);
     display: flex;
     flex-wrap: wrap;
@@ -29,17 +36,17 @@ $pageShell-test-gap: 4rem;
     align-items: start;
     justify-content: center;
     width: 100%;
-    max-width: calc(var(--page-width) + (var(--padding-page) * 2));
-    padding-inline: var(--padding-page);
+    max-width: var(--pageShell-width);
+    padding-inline: var(--pageShell-paddingInline);
     container-type: inline-size;
 
     [pgs~="pageShell-content"] {
         grid-area: content;
-        flex: 999 1 var(--pageShell-content-width);
-        min-width: min(100%, var(--pageShell-content-width));
-        width: min(100%, var(--page-width));
-        max-width: var(--page-width);
-        padding-top: var(--page-top);
+        flex: 999 1 $content-size;
+        min-width: min(100%, $content-size);
+        width: min(100%, var(--pageShell-content-width));
+        max-width: var(--pageShell-content-width);
+        padding-top: var(--pageShell-paddingTop);
         padding-bottom: var(--gap-elements);
     }
 
@@ -56,7 +63,7 @@ $pageShell-test-gap: 4rem;
         overscroll-behavior: contain;
         scrollbar-gutter: stable;
         scrollbar-width: none;
-        padding-top: var(--page-top);
+        padding-top: var(--pageShell-paddingTop);
         padding-bottom: var(--gap-elements);
         flex: 1 1 var(--pageShell-aside-width);
         min-width: min(100%, var(--pageShell-aside-width));
@@ -82,7 +89,7 @@ $pageShell-test-gap: 4rem;
             overscroll-behavior: contain;
             scrollbar-gutter: stable;
             scrollbar-width: none;
-            padding-top: var(--page-top);
+            padding-top: var(--pageShell-paddingTop);
             padding-bottom: calc(var(--gap-elements)*2);
 
             &::-webkit-scrollbar {
@@ -116,11 +123,11 @@ $pageShell-test-gap: 4rem;
     }
 
     &:has(> [pgs~="pageShell-aside"]) {
-        max-width: calc(var(--page-width) + var(--pageShell-aside-width) + var(--pageShell-gap) + (var(--padding-page) * 2));
+        --pageShell-width: calc(var(--pageShell-content-width) + var(--pageShell-aside-width) + var(--pageShell-gap) + (var(--padding-page) * 2));
     }
 
     &:has(> [pgs~="pageShell-aside"] ~ [pgs~="pageShell-aside"]) {
-        max-width: calc(var(--page-width) + (var(--pageShell-aside-width) * 2) + (var(--pageShell-gap) * 2) + (var(--padding-page) * 2));
+        --pageShell-width: calc(var(--pageShell-content-width) + (var(--pageShell-aside-width) * 2) + (var(--pageShell-gap) * 2) + (var(--padding-page) * 2));
     }
 
     //== RESPONSIVE ==//
@@ -150,7 +157,7 @@ $pageShell-test-gap: 4rem;
     &:has(> [pgs~="pageShell-aside"]):has(> [pgs~="pageShell-content"] + [pgs~="pageShell-aside"]) {
         @container (max-width: calc(#{$aside-size} + #{$content-size} + #{$aside-size} + (#{$pageShell-test-gap} * 2))) {
             display: grid;
-            grid-template-columns: var(--pageShell-aside-width) minmax(0, var(--page-width));
+            grid-template-columns: var(--pageShell-aside-width) minmax(0, var(--pageShell-content-width));
             grid-template-areas:
                 "asideLeft content"
                 "asideLeft asideRight";
@@ -179,7 +186,7 @@ $pageShell-test-gap: 4rem;
     }
 
     @container (max-width: #{$content-size}) {
-        padding-top: var(--page-top);
+        padding-top: var(--pageShell-paddingTop);
 
         [pgs~="pageShell-content"],
         [pgs~="pageShell-aside"] {
@@ -191,4 +198,4 @@ $pageShell-test-gap: 4rem;
             @include pageShell-aside-flow;
         }
     }
-}
+}

package/assets/scss/mixin/_mx-button.scss

@@ -1,40 +1,31 @@
 //+ VAR
-@mixin _var-button-color($background, $for: null, $colorNotContrast: var(--color-black)) {
-    @supports (color: contrast-color(red)) {
-        --button-color#{$for}: contrast-color(color-mix(in srgb, var(--button-background#{$for}) 77%, black));
-    }
-
-    @supports not (color: contrast-color(red)) {
-        --button-color#{$for}: #{$colorNotContrast};
-    }
-
-    --button-background#{$for}: #{$background};
+@use "mx-hover" as *;
+
+@mixin button-mx-varColor($for: "") {
+    --button-color: var(--color-black);
+    --button-color-strong: var(--color-whiteFixed);
+    --button-color-current: var(--color-whiteFixed);
+    --button-background: var(--color-box);
+    --button-background-strong: var(--color-primary);
+    --button-background-current: var(--color-primary);
+    /// Application
     color: var(--button-color#{$for});
     background: var(--button-background#{$for});
-
-    &:is(a) {
-        color: var(--button-color#{$for});
-    }
-
-    i {
-        color: var(--button-color#{$for});
-        --fa-primary-color: var(--button-color#{$for});
-        --fa-secondary-color: var(--button-color#{$for});
-    }
+    --fa-primary-color: var(--button-color#{$for});
+    --fa-secondary-color: var(--button-color#{$for});
 }
 
 //= BUTTON
 @mixin button($hover: true, $onlyIcon: false, $strong: false) {
     --button-border: var(--border-complete);
     --button-size: 1.5rem;
-    --button-icon-size: 2.0rem;
+    --button-icon-size: 2rem;
     --button-padding-block: var(--button-size);
     --button-padding-left: calc(var(--button-size) * 2);
     --button-padding-right: calc(var(--button-size) * 2);
     --button-padding: var(--button-padding-block) var(--button-padding-right) var(--button-padding-block) var(--button-padding-left);
     --fa-secondary-opacity: 0.5;
     --fa-size: var(--button-icon-size);
-    @include _var-button-color(var(--color-box));
     font-family: var(--font);
     font-size: 1.6rem;
     font-weight: 600;
@@ -46,26 +37,26 @@
     outline: var(--button-border);
     border-radius: var(--border-radius-input);
     display: flex;
-    gap: calc(var(--button-size)/1.5);
+    gap: calc(var(--button-size) / 1.5);
     align-items: center;
     padding: var(--button-padding);
     height: max-content;
     width: max-content;
     margin-block: auto;
 
-    //== onlyIcon
-    @if($onlyIcon ==true) {
+    //== ONLY ICON
+    @if $onlyIcon {
+        --button-padding: var(--button-padding-block);
         flex: 0 0;
         aspect-ratio: 1;
         border-radius: 50%;
         justify-content: center;
         align-items: center;
-        --button-padding: var(--button-padding-block);
 
         i {
             display: inline-grid;
             place-items: center;
-            inline-size: calc(var(--button-icon-size) - -2px);
+            inline-size: calc(var(--button-icon-size) + 2px);
             block-size: var(--button-icon-size);
             line-height: 1;
             aspect-ratio: 1;
@@ -87,24 +78,24 @@
         }
     }
 
-    //== hover 
-    @if ($hover ==true) {
-        @include buttonHover();
-    }
-
-    @else {
+    //== HOVER
+    @if $hover {
+        @include hover();
+    } @else {
         transition: all 200ms;
         cursor: inherit;
     }
 
-    //== strong 
-    @if ($strong ==true) {
-        @include _var-button-color(var(--color-primary), "-strong", var(--color-whiteFixed));
+    //== STRONG
+    @if $strong {
+        @include button-mx-varColor("-strong");
+    } @else {
+        @include button-mx-varColor();
     }
 
-    //== current 
+    //== CURRENT
     &[aria-current="page"]:not(:hover, :focus-visible) {
-        @include _var-button-color(var(--color-primary), "-current", var(--color-whiteFixed));
+        @include button-mx-varColor("-current");
     }
 
     &:disabled {
@@ -113,41 +104,6 @@
     }
 }
 
-//= Button HOVER
-@mixin buttonHover() {
-    transition: all 200ms;
-    cursor: pointer;
-    text-decoration: none;
-
-    &:not(:disabled) {
-        @media (hover: hover) and (pointer: fine) {
-
-            &:focus-visible,
-            &:hover {
-                $n: .25rem;
-                $-n: -$n;
-                box-shadow: $-n $n 0px var(--color-black);
-                transform: translate($n, $-n);
-                @include _var-button-color(var(--color-primary-soft), "-hover");
-                outline-color: transparent;
-
-                i {
-                    --fa-secondary-opacity: 0.5;
-                }
-            }
-        }
-    }
-
-    &:is(a):hover {
-        text-decoration: none;
-    }
-
-    &:active {
-        box-shadow: 0 0 0 var(--color-black);
-        transform: translate(0, 0);
-    }
-}
-
 //= Button mini
 @mixin buttonMini($hover: true) {
     @include button($hover, true);
@@ -195,8 +151,6 @@
         --button-background: var(--color-error-background);
         --button-color: var(--color-error);
     }
-
-    &:hover {}
 }
 
 //= button header
@@ -206,4 +160,4 @@
     overflow-wrap: break-word;
     height: calc(var(--button-size) * 4);
     // height: var(--header-size);
-}
+}

package/assets/scss/mixin/_mx-card.scss

@@ -1,10 +1,11 @@
 @use "settings" as *;
 @use "mx-button" as *;
+@use "mx-hover" as *;
 @use "mx-responsive" as *;
 
 @mixin card-insideImg() {
     $cardImgPadding: calc(var(--card-padding) * -1);
-    border-radius: var(--border-radius);
+    border-radius: var(--card-borderRadius);
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     margin: $cardImgPadding;
@@ -14,26 +15,27 @@
 }
 
 @mixin card() {
-    --card-padding: var(--padding);
+    --card-padding: var(--padding-2);
+    --card-borderRadius: calc(var(--border-radius-input) + var(--card-padding));
+    --card-background: var(--color-box-transparent);
+    --card-padding-img: 0;
     height: 100%;
 
     &:not(:has(>a)) {
-        --card-background: var(--color-box-transparent);
-        --card-padding-img: 0;
         padding: var(--card-padding);
         background: var(--card-background);
-        border-radius: var(--border-radius);
+        border-radius: var(--card-borderRadius);
         // box-shadow: var(--box-shadow);
     }
 
     >a {
         --card-background: var(--color-white);
-        --card-padding-img: .3rem;
-        @include buttonHover();
+        @include hover();
         height: 100%;
         padding: var(--card-padding);
+        padding-bottom: calc(var(--card-padding) * 2);
         background: var(--card-background);
-        border-radius: var(--border-radius);
+        border-radius: var(--card-borderRadius);
         outline: var(--border-complete);
     }
 
@@ -78,4 +80,4 @@
             --fa-secondary-color: var(--color-warning);
         }
     }
-}
+}

package/assets/scss/mixin/_mx-form.scss

@@ -93,7 +93,6 @@
     &::file-selector-button {
         --button-background: var(--color-box);
         --button-color: var(--color-black);
-
         width: 40%;
         margin-bottom: var(--gap-texts);
         margin-right: var(--gap-texts);
@@ -232,6 +231,7 @@
             outline: solid var(--color-boxDark) 0.1rem;
             background: var(--checkbox-box-background);
             color: var(--color-primary-soft);
+            transform: translateX(0.3rem);
         }
 
         //=== ICON CHECK
@@ -241,6 +241,7 @@
             text-align: center;
             opacity: 0;
             color: var(--checkbox-check-color);
+            transform: translateX(0.25rem);
         }
 
         //=== Checked
@@ -486,17 +487,17 @@
     }
 }
 
-//== formError
-@mixin formError() {
+//== formValidate
+@mixin formValidate() {
 
     //=== ERROR
-    &[data-form-status="error"] {
-        [data-form-field-status="error"] {
+    &[pgs-option~="error"] {
+        [pgs-option~="error"] {
             &:not([type=checkbox], [type=radio]) {
                 outline: solid 3px var(--color-error) !important;
 
                 &::before {
-                    content: "Questo campo è obbligatorio";
+                    content: "This field is required";
                     color: var(--color-error);
                     font-weight: 500;
                     font-size: 1.7rem;
@@ -504,10 +505,7 @@
             }
         }
 
-        // button[type=submit] {
-        //     --button-background: var(--color-error);
-        // }
-        label:has(+[data-form-field-status="error"], [data-form-field-status="error"]) {
+        label:has(+[pgs-option~="error"], [pgs-option~="error"]) {
             &:has(input[type=checkbox]) {
                 background-color: var(--color-error) !important;
                 padding: 6px;
@@ -516,10 +514,10 @@
             }
         }
 
-        fieldset:has(input[type=radio][data-form-field-status="error"]) {
+        fieldset:has(input[type=radio][pgs-option~="error"]) {
             legend {
                 --label-background: var(--color-error) !important;
             }
         }
     }
-}
+}