mypgs 1.3.4 → 1.3.7

package/assets/scss/index.scss

@@ -1,16 +1,16 @@
-//+ MIXIN
-@import "./mixin/mixin.scss";
+@use "sass:meta";
+@use "./mixin/mixin" as *;
 /*
 |--------------------------------------------------------------------------
 | Base
 |--------------------------------------------------------------------------
 */
-@import "base/variables";
-@import "base/color";
-@import "base/html";
-@import "base/body";
-@import "base/heading";
-@import "base/general";
+@include meta.load-css("base/variables");
+@include meta.load-css("base/color");
+@include meta.load-css("base/html");
+@include meta.load-css("base/body");
+@include meta.load-css("base/heading");
+@include meta.load-css("base/general");
 
 /*
 |--------------------------------------------------------------------------
@@ -18,11 +18,11 @@
 |--------------------------------------------------------------------------
 */
 [pgs~=initP] {
-    @import "layout/layout";
-    @import "layout/flex";
-    @import "layout/grid";
-    @import "layout/pageShell";
-    @import "layout/gap";
+    @include meta.load-css("layout/layout");
+    @include meta.load-css("layout/flex");
+    @include meta.load-css("layout/grid");
+    @include meta.load-css("layout/pageShell");
+    @include meta.load-css("layout/gap");
 }
 
 /*
@@ -31,21 +31,21 @@
 |--------------------------------------------------------------------------
 */
 [pgs~=initP] {
-    @import "components/button";
-    @import "components/form";
-    @import "components/menu";
-    @import "components/accordion";
-    @import "components/breadcumbs";
-    @import "components/dropdown";
-    @import "components/modals";
-    @import "components/slides";
-    @import "components/steps";
-    @import "components/table";
-    @import "components/stepTabs";
-    @import "components/notification";
-    @import "components/tooltip";
-    @import "components/searchbar";
-    @import "components/logo";
+    @include meta.load-css("components/button");
+    @include meta.load-css("components/form");
+    @include meta.load-css("components/menu");
+    @include meta.load-css("components/accordion");
+    @include meta.load-css("components/breadcumbs");
+    @include meta.load-css("components/dropdown");
+    @include meta.load-css("components/modals");
+    @include meta.load-css("components/slides");
+    @include meta.load-css("components/steps");
+    @include meta.load-css("components/table");
+    @include meta.load-css("components/stepTabs");
+    @include meta.load-css("components/notification");
+    @include meta.load-css("components/tooltip");
+    @include meta.load-css("components/searchbar");
+    @include meta.load-css("components/logo");
 }
 
 /*
@@ -54,7 +54,7 @@
 |--------------------------------------------------------------------------
 */
 [pgs~=initP] {
-    @import "patterns/header";
-    @import "patterns/footer";
-    @import "patterns/cookieConsent";
-}
+    @include meta.load-css("patterns/header");
+    @include meta.load-css("patterns/footer");
+    @include meta.load-css("patterns/cookieConsent");
+}

package/assets/scss/layout/_flex.scss

@@ -1,3 +1,5 @@
+@use "../mixin/mixin" as *;
+
 
 //= FLEX 
 

package/assets/scss/layout/_grid.scss

@@ -1,3 +1,5 @@
+@use "../mixin/mixin" as *;
+
 //== GRID
 @for $i from 1 through 10 {
     [pgs~=grid-#{$i}] {

package/assets/scss/layout/_layout.scss

@@ -1,3 +1,5 @@
+@use "../mixin/mixin" as *;
+
 //# SEMANTIC
 [pgs~=main] {
     @include main;

package/assets/scss/layout/_pageShell.scss

@@ -1,3 +1,5 @@
+@use "../mixin/mixin" as *;
+
 //# pageShell
 $aside-size: 400px;
 $content-size: 500px;

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

@@ -1,3 +1,6 @@
+@use "settings" as *;
+@use "mx-responsive" as *;
+
 //= TEXTAREA
 @mixin textarea() {
     align-items: flex-start;
@@ -95,7 +98,7 @@
 
 
 @mixin h1(){
-    @include heading($h1,false);
+    @include heading($h1, false);
 }
 
 @mixin h2(){
@@ -123,4 +126,4 @@
     background-color: $color;
     -webkit-mask: $url center/contain no-repeat;
     mask: $url center/contain no-repeat;
-}
+}

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

@@ -1,3 +1,7 @@
+@use "settings" as *;
+@use "mx-button" as *;
+@use "mx-responsive" as *;
+
 @mixin card-insideImg() {
     $cardImgPadding: calc(var(--card-padding) * -1);
     border-radius: var(--border-radius);
@@ -74,4 +78,4 @@
             --fa-secondary-color: var(--color-warning);
         }
     }
-}
+}

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

@@ -1,3 +1,6 @@
+@use "mx-button" as *;
+@use "mx-form" as *;
+
 //= checkboxBackground 
 @mixin checkboxBackground() {
     position: relative;
@@ -177,4 +180,4 @@
         outline: unset;
         --button-background: trasparent;
     }
-}
+}

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

@@ -1,3 +1,6 @@
+@use "mx-base" as *;
+@use "mx-button" as *;
+
 //=FORM
 //== INPUT 
 @mixin input($padding: 15px) {
@@ -268,8 +271,8 @@
             &::after {
                 $size: 0.4rem;
                 content: "";
-                top: $size / 2;
-                left: $size / 2;
+                top: calc($size / 2);
+                left: calc($size / 2);
                 display: inline-block;
                 width: calc(var(--checkbox-size) - $size);
                 height: calc(var(--checkbox-size) - $size);
@@ -519,4 +522,4 @@
             }
         }
     }
-}
+}

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

@@ -1,3 +1,6 @@
+@use "sass:math";
+@use "settings" as *;
+
 //= FLEX 
 //== column
 @mixin flexColumn() {
@@ -50,7 +53,7 @@
 
 //= FLEX
 @function _basis($ratio, $gap, $columns) {
-    $cols: ceil($columns * $ratio);
+    $cols: math.ceil($columns * $ratio);
     @return calc((100% - ($gap * ($cols - 1))) / $cols);
 }
 
@@ -194,17 +197,17 @@
 
         //-( laptop 
         @container (max-width: #{$laptop}) {
-            grid-template-columns: repeat(ceil($columns * 0.75), 1fr); // 75% delle colonne originali
+            grid-template-columns: repeat(math.ceil($columns * 0.75), 1fr); // 75% delle colonne originali
         }
 
         //-( big-tablet 
         @container (max-width: #{$big-tablet}) {
-            grid-template-columns: repeat(ceil($columns * 0.5), 1fr); // 50% delle colonne originali
+            grid-template-columns: repeat(math.ceil($columns * 0.5), 1fr); // 50% delle colonne originali
         }
 
         //-( tablet 
         @container (max-width: #{$tablet}) {
-            grid-template-columns: repeat(ceil($columns * 0.33), 1fr); // 33% delle colonne originali
+            grid-template-columns: repeat(math.ceil($columns * 0.33), 1fr); // 33% delle colonne originali
         }
     }
 
@@ -212,17 +215,17 @@
 
         //-( laptop 
         @container (max-width: #{$laptop}) {
-            grid-template-columns: repeat(ceil($columns * 0.75), 1fr); // 75% delle colonne originali
+            grid-template-columns: repeat(math.ceil($columns * 0.75), 1fr); // 75% delle colonne originali
         }
 
         //-( big-tablet 
         @container (max-width: #{$big-tablet}) {
-            grid-template-columns: repeat(ceil($columns * 0.5), 1fr); // 50% delle colonne originali
+            grid-template-columns: repeat(math.ceil($columns * 0.5), 1fr); // 50% delle colonne originali
         }
 
         //-( tablet 
         @container (max-width: #{$tablet}) {
-            grid-template-columns: repeat(ceil($columns * 0.33), 1fr); // 33% delle colonne originali
+            grid-template-columns: repeat(math.ceil($columns * 0.33), 1fr); // 33% delle colonne originali
         }
     }
 
@@ -259,17 +262,17 @@
 
     //-( da 1500px
     @container (max-width: #{$start}) {
-        grid-template-columns: repeat(ceil($columns * 0.75), 1fr);
+        grid-template-columns: repeat(math.ceil($columns * 0.75), 1fr);
     }
 
     //-( circa tablet landscape
     @container (max-width: #{calc($start * 0.75)}) {
-        grid-template-columns: repeat(ceil($columns * 0.5), 1fr);
+        grid-template-columns: repeat(math.ceil($columns * 0.5), 1fr);
     }
 
     //-( tablet
     @container (max-width: #{calc($start * 0.5)}) {
-        grid-template-columns: repeat(ceil($columns * 0.33), 1fr);
+        grid-template-columns: repeat(math.ceil($columns * 0.33), 1fr);
     }
 
     //-( mobile
@@ -350,4 +353,4 @@
 //     * {
 //         outline: gray solid 0.1px
 //     }
-// }
+// }

package/assets/scss/mixin/_settings.scss

@@ -0,0 +1,31 @@
+//+ devices
+$watch: 315px;
+$mobile: 430px;
+$big-mobile: 615px;
+$tablet: 800px;
+$big-tablet: 900px;
+$laptop: 1100px;
+
+@use "sass:list";
+
+@function fibonacci($n) {
+    $sequence: 0 1;
+
+    @for $_ from 1 through $n {
+        $last: list.nth($sequence, list.length($sequence));
+        $previous: list.nth($sequence, list.length($sequence) - 1);
+        $new: $last + $previous;
+
+        $sequence: list.append($sequence, $new);
+    }
+
+    @return list.nth($sequence, list.length($sequence));
+}
+
+$base-fibonacci-size: 0.05rem;
+
+$h1: fibonacci(11) * $base-fibonacci-size; // 7.2rem
+$h2: fibonacci(10) * $base-fibonacci-size; // 4.45rem
+$h3: fibonacci(9) * $base-fibonacci-size;  // 2.75rem
+$h4: fibonacci(8) * $base-fibonacci-size;  // 1.7rem
+$h5: fibonacci(8) * $base-fibonacci-size;  // 1.7rem

package/assets/scss/mixin/mixin.scss

@@ -1,35 +1,11 @@
-//+ devices 
-$watch: 315px;
-$mobile: 430px;
-$big-mobile: 615px;
-$tablet: 800px;
-$big-tablet: 900px;
-$laptop: 1100px;
-
-@function fibonacci($n) {
-    $sequence: 0 1;
-    @for $_ from 1 through $n {
-        $new: nth($sequence, length($sequence)) + nth($sequence, length($sequence) - 1);
-        $sequence: append($sequence, $new);
-    }
-    @return nth($sequence, length($sequence));
-}
-
-$base-fibonacci-size: 0.05rem;
-$h1: fibonacci(11) * $base-fibonacci-size; // 7.12rem
-$h2: fibonacci(10) * $base-fibonacci-size; // 4.4rem
-$h3: fibonacci(9) * $base-fibonacci-size;  // 2.72rem
-$h4: fibonacci(8) * $base-fibonacci-size;  // 1.68rem
-$h5: fibonacci(8) * $base-fibonacci-size;  // 1.68rem
-
-//= IMPORT ADVANCED
-@import "mx-base";
-@import "mx-responsive";
-@import "mx-form";
-@import "mx-form-addon";
-@import "mx-button";
-@import "mx-color";
-@import "mx-semantic";
-@import "mx-card";
-
- 
+@forward "settings";
+@forward "mx-base";
+@forward "mx-responsive";
+@forward "mx-form";
+@forward "mx-form-addon";
+@forward "mx-button";
+@forward "mx-color";
+@forward "mx-semantic";
+@forward "mx-card";
+
+ 

package/assets/scss/patterns/_cookieConsent.scss

@@ -1,3 +1,5 @@
+@use "../mixin/mixin" as *;
+
 [pgs~=cookieConsent] {
     --cookie-bg: var(--color-box);
     --cookie-color: var(--color-black);
@@ -82,7 +84,7 @@
 
         [pgs~=cookieConsent-panel-badge] {
             font-size: 1.35rem;
-            border-radius: 999px;
+            border-radius: 99px;
             padding: 0.25rem 0.75rem;
             background: var(--color-success-background);
             color: var(--color-success);

package/assets/scss/patterns/_footer.scss

@@ -1,3 +1,5 @@
+@use "../mixin/mixin" as *;
+
 [pgs~="footer"] {
     --footer-color: var(--color-whiteFixed);
     --footer-background: var(--color-blackFixed);

package/assets/scss/patterns/_header.scss

@@ -1,3 +1,5 @@
+@use "../mixin/mixin" as *;
+
 [pgs~="header"] {
     --header-padding-inline: 30px;
     --header-padding-block: 10px;
@@ -101,11 +103,17 @@
     //= DIALOG 
     dialog[pgs~="modal-dialogpopover"],
     dialog[pgs~="modal-dialog"] {
-        padding: 2rem;
-        padding-top: calc(var(--heightOfHeader) + var(--padding));
+        // padding: 2rem;
+        padding-top: var(--heightOfHeader);
+        padding-inline: 5px;
         --modal-background: color-mix(in srgb, var(--color-primary-soft) 50%, var(--color-white) 50%);
 
-        dialog[pgs~="modal-dialog-content"] {}
+        [pgs~="modal-dialog-content"] {
+            nav {
+                padding: var(--padding-2);
+                border-radius: var(--padding-2);
+            }
+        }
 
         &[open] {
             display: flex;
@@ -118,7 +126,7 @@
     }
 
     //- mobile 
-    &[data-header-mobileActive=true] {
+    &[pgs-state~="mobileActive"] {
         --header-gap: var(--gap-texts);
 
         [pgs~="header-element-onlyDesktop"] {