mypgs 2.1.0 → 3.0.0

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

@@ -1,5 +1,6 @@
 @use "mx-button" as *;
 @use "mx-form" as *;
+@use "mx-responsive" as *;
 
 //= checkboxBackground 
 @mixin checkboxBackground() {
@@ -31,53 +32,6 @@
     }
 }
 
-//= TWOSTATE 
-@mixin twoState() {
-    //== label
-    position: relative;
-    isolation: isolate;
-    --button-background-active: var(--color-primary);
-    --button-color-active: var(--color-white);
-    @include button();
-    flex-wrap: wrap;
-    display: flex !important;
-    cursor: pointer;
-
-    i {
-        opacity: 0.4;
-        min-width: 1.4rem;
-        transition: 300ms;
-    }
-
-    &:hover {
-        i {
-            opacity: 1;
-        }
-    }
-
-    //== checked
-    &:has(input:checked) {
-        --button-background: var(--button-background-active);
-        --button-color: var(--button-color-active);
-
-        @supports not (color: contrast-color(red)) {
-            --button-color: var(--button-color-active);
-        }
-
-        i {
-            --fa-secondary-opacity: 0.6;
-            opacity: 1;
-        }
-    }
-
-    input {
-        opacity: 0;
-        z-index: -1;
-        position: absolute;
-        appearance: none;
-    }
-}
-
 //= TOGGLE 
 @mixin toggle() {
     --toggle-size: var(--border-radius-input);
@@ -163,18 +117,106 @@
     }
 }
 
-//= Buttons
+//= TWOSTATE
+@mixin twoState($ifHover: true) {
+    //== label
+    position: relative;
+    isolation: isolate;
+    @include buttonBase();
+    @include buttonContent();
+
+    @if($ifHover) {
+        @include buttonHover();
+    }
+
+    flex-wrap: wrap;
+    display: flex !important;
+    cursor: pointer;
+
+    i {
+        opacity: 0.4;
+        min-width: 1.4rem;
+    }
+
+    &:hover {
+        i {
+            opacity: 1;
+        }
+    }
+
+    //== checked
+    &:has(input:checked) {
+        --button-background: var(--button-background-active);
+        --button-color: var(--button-color-active);
+
+        i {
+            --fa-secondary-opacity: 0.6;
+            opacity: 1;
+        }
+    }
+
+    input {
+        opacity: 0;
+        z-index: -1;
+        position: absolute;
+        appearance: none;
+    }
+}
+
+@mixin chip() {
+    @include twoState(false);
+    --button-size: 1rem;
+
+    &:has(input:checked) {
+        &:not(:has(i)) {
+
+            &::after,
+            &::before {
+                display: grid;
+                place-items: center;
+                width: 1.5rem;
+                height: 1.5rem;
+                border-radius: 50%;
+                font-size: 1.5rem;
+                line-height: 1;
+                font-weight: bold;
+                color: var(--color-blackFixed);
+                background-color: var(--color-whiteFixed);
+                padding: 0.2rem;
+                cursor: pointer;
+            }
+        }
+    }
+
+    //== checkbox
+    &:has(input[type=checkbox]:checked) {
+        &:not(:has(i)) {
+            padding-right: var(--button-size);
+
+            &::after {
+                content: "×";
+            }
+        }
+    }
+
+    //== radio
+    &:has(input[type=radio]:checked) {
+        &:not(:has(i)) {
+            padding-left: var(--button-size);
+
+            &::before {
+                content: "";
+            }
+        }
+    }
+}
+
+//= CHIPS
 @mixin chips() {
-    display: flex;
-    gap: .1rem;
-    padding: .4rem;
-    outline: var(--border-complete);
-    width: fit-content;
-    border-radius: var(--border-radius-input);
-    background-color: var(--color-box-transparent);
+    border: unset;
+    @include flexRow();
 
     label {
-        outline: unset;
-        --button-background: var(--color-box-transparent);
+        @include chip();
     }
-}
+}

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

@@ -1,15 +1,24 @@
 @mixin _hoverColor() {
-    $color: var(--color-primary-strong);
-    $colorTxtSafari: var(--color-white);
-    --hover-color: #{$colorTxtSafari};
-    --hover-background: #{$color};
+    --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);
-    background: var(--hover-background);
 
-    :is(h1, h2, h3, h4, h5, h6, p) {
+    &: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);
     }
 }
 
@@ -20,7 +29,7 @@
         &:focus-visible,
         &:hover {
             box-shadow: 0px 0px 38px 0px var(--hover-shadow-color);
-            // outline-color: var(--color-primary);
+            outline-width: 0;
             @include _hoverColor();
         }
     }
@@ -46,11 +55,16 @@
     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();
@@ -59,14 +73,6 @@
         &[pgs-option~=buttonStyle-2] {
             @include _hoverContent2();
         }
-
-        &:hover {
-            --fa-secondary-opacity: 0.5;
-            --hover-color: var(--color-whiteFixed);
-            color: var(--hover-color);
-            --fa-primary-color: var(--hover-color);
-            --fa-secondary-color: var(--hover-color);
-        }
     }
 
     &:is(a):hover {

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/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>