mypgs 2.1.0 → 3.0.0

package/assets/scss/components/_menu.scss

@@ -2,6 +2,16 @@
 
 //# MENU
 [pgs~=menu] {
+    // Menu colours inherit the button theme by default.  A consumer can set the
+    // --menu-* variables on this element to theme menus independently.
+    --menu-color: var(--color-black);
+    --menu-background: var(--color-box);
+    --menu-color-current: var(--color-whiteFixed);
+    --menu-background-current: var(--color-primary);
+    --menu-color-strong: var(--color-whiteFixed);
+    --menu-background-strong: var(--color-primary);
+    --menu-border: var(--border-complete);
+
     ul {
         display: flex;
         font-weight: 600;
@@ -15,12 +25,25 @@
             >a {
                 flex-grow: 1;
                 min-width: fit-content;
-                @include button();
+                @include buttonBase();
+                @include buttonHover();
+                @include buttonContent();
+                --button-color: var(--menu-color);
+                --button-color-strong: var(--menu-color-strong);
+                --button-color-current: var(--menu-color-current);
+                --button-background: var(--menu-background);
+                --button-background-strong: var(--menu-background-strong);
+                --button-background-current: var(--menu-background-current);
+                --button-border: var(--menu-border);
 
                 >span {
-                    line-height: 1.6;
+                    line-height: 1;
                     flex-grow: 1;
                 }
+
+                &:hover {
+                    z-index: -1;
+                }
             }
 
             li {
@@ -56,7 +79,7 @@
         translate: -15px;
 
         &[aria-expanded="true"] {
-            --button-background: var(--color-primary);
+            --button-background: var(--menu-background-current);
 
             span {
                 rotate: 180deg;

package/assets/scss/components/_modals.scss

@@ -21,7 +21,7 @@ dialog[pgs~="modal-dialog"] {
     --modal-background: var(--color-box);
     --modal-color: var(--color-black);
     --modal-padding: var(--padding);
-    --modal-borderRadius: var(--border-radius);
+    --modal-borderRadius: calc(var(--border-radius-input) + var(--modal-padding));
     border: none;
     min-width: 100%;
     min-height: 100svh;
@@ -138,7 +138,7 @@ dialog[pgs~="modal-dialog"] {
         height: 100svh;
         top: 0;
         overflow-y: auto;
-        padding-top: calc(var(--heightOfHeader) + var(--padding));
+        padding-top: calc(var(--heightOfHeader) + var(--gap-texts));
         z-index: 90;
         position: fixed;
         inset: 0;

package/assets/scss/components/_stepTabs.scss

@@ -36,7 +36,8 @@
         }
 
         [pgs~=stepTabs-dots-dot] {
-            @include button(false, true);
+            @include buttonBase();
+            @include buttonIcon();
             border-radius: 50%;
             --fa-size: 1.8rem;
 

package/assets/scss/index.scss

@@ -22,10 +22,8 @@
 */
 [pgs~=initP] {
     @include meta.load-css("layout/layout");
-    @include meta.load-css("layout/flex");
-    @include meta.load-css("layout/grid");
+    @include meta.load-css("layout/responsive");
     @include meta.load-css("layout/pageShell");
-    @include meta.load-css("layout/gap");
     @include meta.load-css("layout/header");
     @include meta.load-css("layout/footer");
 }
@@ -51,6 +49,7 @@
     @include meta.load-css("components/stepTabs");
     @include meta.load-css("components/summary");
     @include meta.load-css("components/badges");
+    @include meta.load-css("components/alerts");
     @include meta.load-css("components/notification");
     @include meta.load-css("components/tooltip");
     @include meta.load-css("components/search");

package/assets/scss/layout/_header.scss

@@ -37,8 +37,7 @@
             display: contents;
         }
 
-        [pgs~=button],
-        [pgs~=buttonIcon] {
+        [pgs~=button] {
             @include button_header();
         }
 
@@ -114,6 +113,7 @@
         // padding: 2rem;
         padding-top: var(--heightOfHeader);
         padding-inline: 5px;
+        --modal-padding: 10px;
         --modal-background: color-mix(in srgb, var(--color-primary-soft) 50%, var(--color-white) 50%);
 
         [pgs~="modal-dialog-content"] {
@@ -162,4 +162,4 @@
             padding-inline: var(--header-padding-block);
         }
     }
-}
+}

package/assets/scss/layout/_responsive.scss

@@ -0,0 +1,63 @@
+@use "../mixin/mixin" as *;
+
+//# RESPONSIVE
+//= FLEX
+//== FLEX COLUMN
+[pgs~=flexColumn] {
+    @include flexColumn();
+}
+
+//== FLEX ROW
+[pgs~=flexRow] {
+    @include flexRow();
+}
+
+//== COLUMN
+[pgs~=flexColumn],
+[pgs~=flexRow] {
+    
+    @for $i from 1 through 8 {
+        &[pgs-option~=column-#{$i}] {
+            width: 100%;
+            flex-wrap: wrap;
+            flex-direction: row;
+            @include columnFlex($i);
+        }
+    }
+}
+
+//= GRID
+//== COLUMN
+[pgs~=grid] {
+    display: grid;
+    gap: var(--gap-elements);
+    width: 100%;
+
+    @for $i from 1 through 8 {
+        &[pgs-option~=column-#{$i}] {
+            @include columnGrid($i);
+        }
+    }
+}
+
+//= GAP
+[pgs~=gapTexts] {
+    gap: var(--gap-texts);
+}
+
+[pgs~=gapElements] {
+    gap: var(--gap-elements);
+}
+
+[pgs~=gapSections] {
+    gap: var(--gap-sections);
+}
+
+//= WRAP
+[pgs~=nowrap] {
+    flex-wrap: nowrap;
+}
+
+[pgs~=wrap] {
+    flex-wrap: wrap;
+}

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

@@ -61,7 +61,7 @@
 }
 
 //= HEADING
-@mixin heading($size, $marginTop: true) {
+@mixin heading($size) {
     font-family: var(--font-titoli);
     --heading-size: #{$size};
     color: var(--color-black);
@@ -70,12 +70,8 @@
     min-width: 0;
     font-weight: 900;
     overflow-wrap: anywhere;
-    
-    @if($marginTop){
-        margin-top: calc(var(--heading-size)/4);
-    }
-
     // text-box: trim-both cap alphabetic;
+
     @media (max-width: $tablet) {
         font-size: clamp(1.6rem, var(--heading-size) / 3 + 8vw, var(--heading-size));
     }
@@ -98,11 +94,11 @@
 
 
 @mixin h1(){
-    @include heading($h1, false);
+    @include heading($h1);
 }
 
 @mixin h2(){
-    @include heading($h2, false);
+    @include heading($h2);
 }
 
 @mixin h3(){

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

@@ -1,22 +1,27 @@
 //+ VAR
 @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
+//+ BUTTON COLOR
+@mixin _buttonColor($for: "") {
     color: var(--button-color#{$for});
     background: var(--button-background#{$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 BASE
+@mixin buttonBase() {
+    /// color
+    --button-color: var(--color-black);
+    --button-color-strong: var(--color-whiteFixed);
+    --button-color-current: var(--color-whiteFixed);
+    --button-color-active: var(--color-whiteFixed);
+    /// background
+    --button-background: var(--color-box);
+    --button-background-strong: var(--color-primary);
+    --button-background-current: var(--color-primary);
+    --button-background-active: var(--color-primary);
+    /// olther
     --button-border: var(--border-complete);
     --button-size: 1.5rem;
     --button-icon-size: 2rem;
@@ -26,6 +31,7 @@
     --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 _buttonColor();
     font-family: var(--font);
     font-size: 1.6rem;
     font-weight: 600;
@@ -44,79 +50,79 @@
     width: max-content;
     margin-block: auto;
 
-    //== 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;
-
-        i {
-            display: inline-grid;
-            place-items: center;
-            inline-size: calc(var(--button-icon-size) + 2px);
-            block-size: var(--button-icon-size);
-            line-height: 1;
-            aspect-ratio: 1;
-        }
+    &[aria-current="page"]:not(:hover, :focus-visible) {
+        @include _buttonColor("-current");
     }
 
-    @else {
-        $button-right: calc(var(--button-size) * 2);
-        $button-left: calc(var(--button-size) * 1.5);
+    &:disabled {
+        opacity: 0.2;
+        cursor: not-allowed;
+    }
+}
 
-        &:has(i) {
-            --button-padding-right: #{$button-right};
-            --button-padding-left: #{$button-left};
-        }
+//= BUTTON CONTENT - ICON
+//== BUTTON CONTENT
+@mixin buttonContent() {
+    $button-right: calc(var(--button-size) * 2);
+    $button-left: calc(var(--button-size) * 1.5);
 
-        &[pgs-option~="buttonReverse"]:has(i) {
-            --button-padding-right: #{$button-left};
-            --button-padding-left: #{$button-right};
-        }
+    &:has(i) {
+        --button-padding-right: #{$button-right};
+        --button-padding-left: #{$button-left};
     }
 
-    //== HOVER
-    @if $hover {
-        @include hover();
-    } @else {
-        transition: all 200ms;
-        cursor: inherit;
+    &[pgs-option~="buttonReverse"]:has(i) {
+        --button-padding-right: #{$button-left};
+        --button-padding-left: #{$button-right};
     }
+}
 
-    //== STRONG
-    @if $strong {
-        @include button-mx-varColor("-strong");
-    } @else {
-        @include button-mx-varColor();
-    }
+//== BUTTON ICON
+@mixin buttonIcon() {
+    --button-padding: var(--button-padding-block);
+    flex: 0 0;
+    aspect-ratio: 1;
+    border-radius: 50%;
+    justify-content: center;
+    align-items: center;
 
-    //== CURRENT
-    &[aria-current="page"]:not(:hover, :focus-visible) {
-        @include button-mx-varColor("-current");
+    i {
+        display: inline-grid;
+        place-items: center;
+        inline-size: calc(var(--button-icon-size) + 2px);
+        block-size: var(--button-icon-size);
+        line-height: 1;
+        aspect-ratio: 1;
     }
+}
 
-    &:disabled {
-        opacity: 0.2;
-        cursor: not-allowed;
-    }
+//= BUTTON HOVER - NOHOVER
+//== BUTTON HOVER
+@mixin buttonHover() {
+    @include hover();
 }
 
-//= Button mini
-@mixin buttonMini($hover: true) {
-    @include button($hover, true);
+//== BUTTON NOT HOVER
+@mixin buttonNohover() {
+    transition: all 200ms;
+    cursor: inherit;
+}
+
+//= BUTTON STRONG
+@mixin buttonStrong() {
+    @include _buttonColor("-strong");
+}
+
+//= BUTTON MINI
+@mixin buttonMini() {
     --button-size: 0.5rem;
     display: inline-flex;
-    aspect-ratio: unset;
-    margin-block: auto;
     aspect-ratio: 1;
+    margin-block: auto;
 }
 
-//= Button BIG
-@mixin buttonBig($hover: true) {
-    @include button($hover);
+//= BUTTON BIG
+@mixin buttonBig() {
     position: relative;
     flex-direction: column;
     justify-content: center;
@@ -138,9 +144,8 @@
     }
 }
 
-//= Button CLOSE 
+//= BUTTON CLOSE
 @mixin buttonClose($important: false) {
-    @include button(true, true);
     --button-background: var(--color-primary-soft);
     --button-size: 1rem;
     --button-icon-size: 1.3rem;
@@ -153,11 +158,10 @@
     }
 }
 
-//= button header
+//= BUTTON HEADER
 @mixin button_header() {
     --button-size: 1.2rem;
     --button-border: unset;
     overflow-wrap: break-word;
     height: calc(var(--button-size) * 4);
-    // height: var(--header-size);
-}
+}

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

@@ -3,19 +3,18 @@
 @use "mx-hover" as *;
 @use "mx-responsive" as *;
 
-@mixin card-insideImg() {
-    $cardImgPadding: calc(var(--card-padding) * -1);
-    border-radius: var(--card-borderRadius);
+@mixin cardAndWell-insideImg($for) {
+    border-radius: var(--#{$for}-borderRadius);
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
-    margin: $cardImgPadding;
-    padding: var(--card-padding-img);
-    width: calc((var(--card-padding) * 2) + 100%);
+    margin: calc(var(--#{$for}-padding) * -1);
+    padding: var(--#{$for}-padding-img);
+    width: calc((var(--#{$for}-padding) * 2) + 100%);
     margin-bottom: 0;
 }
 
 @mixin card() {
-    --card-padding: var(--padding-2);
+    --card-padding: var(--padding);
     --card-borderRadius: calc(var(--border-radius-input) + var(--card-padding));
     --card-background: var(--color-box-transparent);
     --card-padding-img: 0;
@@ -25,7 +24,6 @@
         padding: var(--card-padding);
         background: var(--card-background);
         border-radius: var(--card-borderRadius);
-        // box-shadow: var(--box-shadow);
     }
 
     >a {
@@ -43,41 +41,40 @@
     >img,
     >a>object,
     >a>img {
-        @include card-insideImg();
+        @include cardAndWell-insideImg("card");
     }
 }
 
-@mixin boxtext() {
+@mixin well() {
     @include flexColumn();
-    --boxtext-background: light-dark(color-mix(in srgb, var(--color-background) 100%, transparent 10%), color-mix(in srgb, var(--color-background) 50%, transparent 50%));
-    background: var(--boxtext-background);
-    padding: 1.5rem;
-    margin-inline: calc(-1.5rem / 2);
-    width: unset;
-    border-radius: var(--border-radius-input);
+    --well-padding: var(--padding-2);
+    --well-borderRadius: calc(var(--border-radius-input) + var(--well-padding));
+    --well-background: var(--color-box-transparent);
+    --well-padding-img: 0;
 
-    //- mobile 
-    @media (max-width: $mobile) {
-        margin-inline: 0;
-    }
-
-    &:has(.fa-solid),
-    &:has(.fa-duotone) {
-        --boxtext-background: var(--color-primary-soft);
+    //-new
 
-        i {
-            --fa-primary-color: var(--color-primary-soft);
-            --fa-secondary-color: var(--color-primary);
-            --fa-secondary-opacity: 1;
-        }
+    &:not(:has(>a)) {
+        padding: var(--well-padding);
+        background: var(--well-background);
+        border-radius: var(--well-borderRadius);
     }
 
-    &:has(.fa-triangle-exclamation) {
-        --boxtext-background: var(--color-warning-background);
+    >a {
+        --well-background: var(--color-white);
+        @include hover();
+        height: 100%;
+        padding: var(--well-padding);
+        padding-bottom: calc(var(--well-padding) * 2);
+        background: var(--well-background);
+        border-radius: var(--well-borderRadius);
+        outline: var(--border-complete);
+    }
 
-        i {
-            --fa-primary-color: var(--color-black);
-            --fa-secondary-color: var(--color-warning);
-        }
+    >object,
+    >img,
+    >a>object,
+    >a>img {
+        @include cardAndWell-insideImg("well");
     }
-}
+}

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

@@ -363,7 +363,7 @@
 
     //=== LABEL
     label {
-        &:not(:has([pgs~="label-unset"], +input[type=checkbox], +input[type=radio])) {
+        &:not(:has([pgs~="labelUnset"], +input[type=checkbox], +input[type=radio])) {
             &:has(+input, +select, +textarea) {
                 @include label();
             }
@@ -376,7 +376,7 @@
 
     //=== INPUT
     input {
-        &:not([pgs~="input-unset"], [type=checkbox], [type=file], [type=radio], [type=range]) {
+        &:not([pgs~=inputUnset], [type=checkbox], [type=file], [type=radio], [type=range]) {
             @include input();
         }
 
@@ -420,8 +420,10 @@
     }
 
     //==== CHECKBOX
-    label:has(input[type=checkbox]):not([pgs~="toggle"]),
-    label:has(input[type=radio]):not([pgs~="toggle"]) {
+    $not-checkbox: '[pgs~=toggle], [pgs~=twoState], [pgs~=chip], [pgs~=chips] label';
+
+    label:has(input[type=checkbox]):not(#{$not-checkbox}),
+    label:has(input[type=radio]):not(#{$not-checkbox}) {
         @include checkbox();
     }
 
@@ -447,7 +449,10 @@
 
     //===BUTTON 
     button[type="submit"] {
-        @include button(true, false, true)
+        @include buttonBase();
+        @include buttonContent();
+        @include buttonStrong();
+        @include buttonHover();
     }
 
     //===FIELDSET