mypgs 2.0.0 → 3.0.0

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

@@ -0,0 +1,81 @@
+@mixin _hoverColor() {
+    --hover-background: var(--color-primary-strong);
+    --hover-color: var(--color-white);
+    background: var(--hover-background);
+    color: var(--hover-color);
+    --fa-primary-color: var(--hover-color);
+    --fa-secondary-color: var(--hover-color);
+
+    &:not(:disabled) {
+        :is(h1, h2, h3, h4, h5, h6, p) {
+            color: var(--hover-color);
+        }
+
+        [pgs~=hover-text] {
+            color: var(--hover-color);
+        }
+
+        color: var(--hover-color);
+        --fa-secondary-opacity: 0.5;
+        --fa-primary-color: var(--hover-color);
+        --fa-secondary-color: var(--hover-color);
+    }
+}
+
+//+ HOVER
+@mixin _hoverContent1() {
+    @media (hover: hover) and (pointer: fine) {
+
+        &:focus-visible,
+        &:hover {
+            box-shadow: 0px 0px 38px 0px var(--hover-shadow-color);
+            outline-width: 0;
+            @include _hoverColor();
+        }
+    }
+}
+
+@mixin _hoverContent2() {
+    @media (hover: hover) and (pointer: fine) {
+
+        &:focus-visible,
+        &:hover {
+            $n: var(--hover-shadow-displacement);
+            $-n: calc(var(--hover-shadow-displacement) * -1);
+            box-shadow: $-n $n 0 var(--color-black);
+            transform: translate($n, $-n);
+            outline-color: transparent;
+            @include _hoverColor();
+        }
+    }
+}
+
+//= HOVER
+@mixin hover() {
+    transition: all 200ms;
+    cursor: pointer;
+    text-decoration: none;
+    --hover-color: var(--color-whiteFixed);
+    --hover-shadow-color: var(--color-primary);
+    --hover-shadow-displacement: 0.25rem;
+    $color: var(--color-primary-strong);
+    $colorTxtSafari: var(--color-whiteFixed);
+
+    * {
+        transition: all 200ms;
+    }
+
+    &:not(:disabled) {
+        &:not([pgs-option~=buttonStyle-2]) {
+            @include _hoverContent1();
+        }
+
+        &[pgs-option~=buttonStyle-2] {
+            @include _hoverContent2();
+        }
+    }
+
+    &:is(a):hover {
+        text-decoration: none;
+    }
+}

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

@@ -3,46 +3,20 @@
 
 //= FLEX 
 //== column
-@mixin flexColumn() {
+@mixin flexColumn($gap: var(--gap-texts)) {
     display: flex;
-    gap: var(--gap-texts);
-    flex-direction: column;
-}
-
-@mixin flexColumnElements() {
-    display: flex;
-    gap: var(--gap-elements);
-    flex-direction: column;
-}
-
-@mixin flexColumnSections() {
-    display: flex;
-    gap: var(--gap-sections);
+    gap: $gap;
     flex-direction: column;
 }
 
 //== row
-@mixin flexRow($wrap: wrap) {
+@mixin flexRow($wrap: wrap, $gap: var(--gap-texts)) {
     display: flex;
-    gap: var(--gap-texts);
+    gap: $gap;
     flex-direction: row;
     flex-wrap: $wrap;
 }
 
-@mixin flexRowElements() {
-    display: flex;
-    gap: var(--gap-elements);
-    flex-direction: row;
-    flex-wrap: wrap;
-}
-
-@mixin flexRowSection() {
-    display: flex;
-    gap: var(--gap-sections);
-    flex-direction: row;
-    flex-wrap: wrap;
-}
-
 //== center
 @mixin center($gap: var(--gap-texts)) {
     display: flex;
@@ -51,23 +25,16 @@
     justify-content: center;
 }
 
-//= FLEX
+//++ basis
 @function _basis($ratio, $gap, $columns) {
     $cols: math.ceil($columns * $ratio);
     @return calc((100% - ($gap * ($cols - 1))) / $cols);
 }
 
-//== responsive flex
-@mixin rFlex(
-    $columns: 4, 
-    $mobileTwoElements: false, 
-    $gap: var(--gap-elements)) 
-    {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    width: 100%;
-    gap: $gap;
+//== Column
+@mixin columnFlex($columns: 4) {
+    --flex-gap: var(--gap-elements);
+    $gap: var(--flex-gap);
 
     >* {
         flex: 1 0;
@@ -97,15 +64,13 @@
 
     //-( mobile: 1 o 2 colonne
     @container (max-width: #{$mobile}) {
-        @if $mobileTwoElements {
-            >* {
-                flex-basis:#{_basis(0.33, $gap, $columns)};
-            }
+        >* {
+            flex-basis:#{_basis(0.15, $gap, $columns)};
         }
 
-        @else {
+        &[pgs-option~=m2e] {
             >* {
-                flex-basis:#{_basis(0.15, $gap, $columns)};
+                flex-basis:#{_basis(0.33, $gap, $columns)};
             }
         }
     }
@@ -118,79 +83,10 @@
     }
 }
 
-//== adaptive flex
-@mixin aFlex(
-    $columns: 4,
-    $start: var(--page-width),
-    $mobileTwoElements: false,
-    $gap: var(--gap-elements)) 
-    {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    width: 100%;
-    gap: $gap;
-
-    >* {
-        flex: 1 0;
-        flex-basis: #{_basis(1, $gap, $columns)};
-    }
-
-    // ↓ da start (es. 1500px): ratio = 0.75
-    @container (max-width: #{$start}) {
-        >* {
-            flex-basis: #{_basis(0.75, $gap, $columns)};
-        }
-    }
-
-    // ↓ ~ 75% di start: ratio = 0.5
-    @container (max-width: #{calc($start * 0.75)}) {
-        >* {
-            flex-basis: #{_basis(0.5, $gap, $columns)};
-        }
-    }
-
-    // ↓ ~ 50% di start: ratio = 0.33
-    @container (max-width: #{calc($start * 0.5)}) {
-        >* {
-            flex-basis: #{_basis(0.33, $gap, $columns)};
-        }
-    }
-
-    // ↓ ~ 33% di start: mobile (1 o 2 colonne)
-    @container (max-width: #{calc($start * 0.33)}) {
-        @if $mobileTwoElements ==true {
-            >* {
-                flex-basis: #{_basis(0.33, $gap, $columns)};
-            }
-        }
-
-        @else {
-            >* {
-                flex-basis: #{_basis(0.15, $gap, $columns)};
-            }
-        }
-    }
-
-    // ↓ ~ 20% di start: mobile small / watch (sempre 1 colonna)
-    @container (max-width: #{calc($start * 0.2)}) {
-        >* {
-            flex-basis: #{_basis(0.15, $gap, $columns)};
-        }
-    }
-}
-
 //= GRID 
-//== responsive grid
-@mixin rGrid(
-    $columns: 4, 
-    $mobileTwoElements: false, 
-    $gap: var(--gap-elements)) 
-    {
-    display: grid;
-    width: 100%;
+//== column
+@mixin columnGrid($columns: 4) {
     grid-template-columns: repeat($columns, 1fr);
-    gap: $gap;
 
     /// dispari
     @if $columns % 2==1 {
@@ -234,9 +130,8 @@
         grid-template-columns: 1fr; // 1 colonna
     }
 
-    @if $mobileTwoElements ==true {
-
-        //-( mobile 
+    //-( mobile m2e
+    &[pgs-option~=m2e] {
         @container (max-width: #{$mobile}) {
             grid-template-columns: 1fr 1fr; // 2 colonne su mobile
         }
@@ -248,109 +143,94 @@
     }
 }
 
+//= ADAPTIVE
+//== adaptive flex
+@mixin _columnAdaptiveFlex($columns: 4) {
+    --adaptiveFlex-width: var(--page-width);
+    --adaptiveFlex-gap: var(--gap-elements);
+    $gap: var(--adaptiveFlex-gap);
+
+    >* {
+        flex: 1 0;
+        flex-basis: #{_basis(1, $gap, $columns)};
+    }
+
+    // ↓ da start (es. 1500px): ratio = 0.75
+    @container (max-width: #{var(--adaptiveFlex-width)}) {
+        >* {
+            flex-basis: #{_basis(0.75, $gap, $columns)};
+        }
+    }
+
+    // ↓ ~ 75% di start: ratio = 0.5
+    @container (max-width: #{calc(var(--adaptiveFlex-width) * 0.75)}) {
+        >* {
+            flex-basis: #{_basis(0.5, $gap, $columns)};
+        }
+    }
+
+    // ↓ ~ 50% di start: ratio = 0.33
+    @container (max-width: #{calc(var(--adaptiveFlex-width) * 0.5)}) {
+        >* {
+            flex-basis: #{_basis(0.33, $gap, $columns)};
+        }
+    }
+
+    // ↓ ~ 33% di start: mobile (1 o 2 colonne)
+    @container (max-width: #{calc(var(--adaptiveFlex-width) * 0.33)}) {
+        >* {
+            flex-basis: #{_basis(0.15, $gap, $columns)};
+        }
+
+        &[pgs-option~=m2e] {
+            >* {
+                flex-basis: #{_basis(0.33, $gap, $columns)};
+            }
+        }
+    }
+
+    // ↓ ~ 20% di start: mobile small / watch (sempre 1 colonna)
+    @container (max-width: #{calc(var(--adaptiveFlex-width) * 0.2)}) {
+        >* {
+            flex-basis: #{_basis(0.15, $gap, $columns)};
+        }
+    }
+}
+
 //== adaptive Grid
-@mixin aGrid(
-    $columns: 4,
-    $start: var(--page-width),
-    $mobileTwoElements: false,
-    $gap: var(--gap-elements)) 
-    {
-    display: grid;
-    width: 100%;
+@mixin _columnAdaptiveGrid($columns: 4) {
+    --adaptiveGrid-width: var(--page-width);
     grid-template-columns: repeat($columns, 1fr);
-    gap: $gap;
 
     //-( da 1500px
-    @container (max-width: #{$start}) {
+    @container (max-width: #{var(--adaptiveGrid-width)}) {
         grid-template-columns: repeat(math.ceil($columns * 0.75), 1fr);
     }
 
     //-( circa tablet landscape
-    @container (max-width: #{calc($start * 0.75)}) {
+    @container (max-width: #{calc(var(--adaptiveGrid-width) * 0.75)}) {
         grid-template-columns: repeat(math.ceil($columns * 0.5), 1fr);
     }
 
     //-( tablet
-    @container (max-width: #{calc($start * 0.5)}) {
+    @container (max-width: #{calc(var(--adaptiveGrid-width) * 0.5)}) {
         grid-template-columns: repeat(math.ceil($columns * 0.33), 1fr);
     }
 
     //-( mobile
-    @container (max-width: #{calc($start * 0.33)}) {
+    @container (max-width: #{calc(var(--adaptiveGrid-width) * 0.33)}) {
         grid-template-columns: 1fr;
     }
 
-    @if $mobileTwoElements ==true {
-        @container (max-width: #{calc($start * 0.33)}) {
+    //-( mobile m2e
+    &[pgs-option~=m2e] {
+        @container (max-width: #{calc(var(--adaptiveGrid-width) * 0.33)}) {
             grid-template-columns: 1fr 1fr;
         }
     }
 
     //-( mobile small / watch
-    @container (max-width: #{calc($start * 0.2)}) {
+    @container (max-width: #{calc(var(--adaptiveGrid-width) * 0.2)}) {
         grid-template-columns: 1fr;
     }
 }
-
-// //- laptop 
-// @media (max-width: $laptop) {
-//     * {
-//         outline: red solid 0.1px
-//     }
-// }
-
-// //- tablet 
-// @media (max-width: $tablet) {
-//     * {
-//         outline: green solid 0.1px
-//     }
-// }
-
-// //- mobile 
-// @media (max-width: $mobile) {
-//     * {
-//         outline: blue solid 0.1px
-//     }
-// }
-
-// //- mobile small
-// @media (max-width: $watch) {
-//     * {
-//         outline: yellow solid 0.1px
-//     }
-// }
-
-// //-( laptop 
-// @container (max-width: #{$laptop}) {
-//     * {
-//         outline: purple solid 0.1px
-//     }
-// }
-
-// //-( big-tablet 
-// @container (max-width: #{$big-tablet}) {
-//     * {
-//         outline: orange solid 0.1px
-//     }
-// }
-
-// //-( tablet 
-// @container (max-width: #{$tablet}) {
-//     * {
-//         outline: pink solid 0.1px
-//     }
-// }
-
-// //-( mobile 
-// @container (max-width: #{$mobile}) {
-//     * {
-//         outline: brown solid 0.1px
-//     }
-// }
-
-// //-( mobile small
-// @container (max-width: #{$watch}) {
-//     * {
-//         outline: gray solid 0.1px
-//     }
-// }

package/assets/scss/mixin/_settings.scss

@@ -1,3 +1,5 @@
+@use "sass:list";
+
 //+ devices
 $watch: 315px;
 $mobile: 430px;
@@ -6,7 +8,6 @@ $tablet: 800px;
 $big-tablet: 900px;
 $laptop: 1100px;
 
-@use "sass:list";
 
 @function fibonacci($n) {
     $sequence: 0 1;

package/assets/scss/mixin/mixin.scss

@@ -1,8 +1,9 @@
 @forward "settings";
+@forward "mx-hover";
 @forward "mx-base";
 @forward "mx-responsive";
 @forward "mx-form";
-@forward "mx-form-addon";
+@forward "mx-formAddon";
 @forward "mx-button";
 @forward "mx-color";
 @forward "mx-semantic";

package/demo/demo.css

@@ -1,5 +1,8 @@
 body{
     --color-background: light-dark(#f1ffef, #101010);
+    &.is-loading{
+        display: none;
+    }
 }
 
 .primary-menu {
@@ -15,7 +18,7 @@ pre {
     }
 }
 
-.template-title {
+.reference-title {
     color: var(--color-primary);
     display: flex;
     align-items: center;
@@ -50,20 +53,20 @@ pre {
     }
 }
 
-[pgs~=buttonBig]{
+[pgs~=button][pgs-option~=buttonBig]{
     max-width: 300px;
 }
 
-#templates-demo-before{
+#reference-demo-before{
     position: relative;
     z-index: 2;
 }
 
-#templates-demo-main{
+#reference-demo-main{
     position: relative;
     z-index: 1;
 }
 
-#templates-demo-after{
+#reference-demo-after{
     position: relative;
-}
+}

package/demo/demo.html

@@ -4,7 +4,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>MyPGS templates demo</title>
+    <title>MyPGS reference demo</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap">
@@ -13,11 +13,13 @@
     <link rel="stylesheet" href="demo.css">
 </head>
 
-<body pgs="bodyBase bodyImg bodyText bodyHeading">
-    <div id="templates-demo-before"></div>
-    <main id="templates-demo-main" pgs="main"></main>
-    <div id="templates-demo-after"></div>
+<body class="is-loading" pgs="bodyBase bodyImg bodyText bodyHeading">
+    <div id="reference-demo-before"></div>
+    <main id="reference-demo-main" pgs="main"></main>
+    <div id="reference-demo-after"></div>
+
     <script src="./demo.js"></script>
+
 </body>
 
 </html>