mypgs 1.3.2 → 1.3.4

package/assets/scss/base/_html.scss

@@ -1,4 +1,26 @@
 [pgs~="htmlBase"] {
     scroll-behavior: smooth;
     font-size: 62.5%;
-}
+
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    scroll-margin-top: calc(var(--heightOfHeader) + 5vh);
+
+    // Reset properties 
+    * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+        scroll-margin-top: calc(var(--heightOfHeader) + 5vh);
+    }
+
+    &:root,
+    :root {
+        interpolate-size: allow-keywords;
+    }
+
+    @view-transition {
+        navigation: auto;
+    }
+}

package/assets/scss/components/_dropdown.scss

@@ -1,99 +1,35 @@
-//# DROPDOWN 
+//# DROPDOWN
 [pgs~="dropdown"] {
-    --dropdown-position: bottom center;
-    --dropdown-offset: 10px;
-    --dropdown-padding: 10px;
-    --dropdown-maxwidth: min(500px, 50vw);
     --dropdown-background: var(--color-box);
     --dropdown-color: var(--color-black);
-    --dropdown-fallback-top: 0px;
-    --dropdown-fallback-left: 0px;
-    --dropdown-fallback-max-height: none;
-    --dropdown-arrow-size: 12px;
-    --dropdown-arrow-left: 50%;
+    --dropdown-border: var(--border-complete);
+    --dropdown-padding: 1rem;
+    --dropdown-inline-size: max-content;
+    --dropdown-max-inline-size: min(400px, calc(100vw - 16px));
+    --dropdown-left: 0px;
+    --dropdown-top: 0px;
+    --dropdown-display: block;
     position: relative;
-    display: inline-block;
 
-    &[pgs-state~=open] {
-        [pgs~="dropdown-content"] {
-            transition: opacity .3s ease;
-            opacity: 1;
-            pointer-events: auto;
+    &:not([pgs-state~="open"])>[pgs~="dropdown-content"] {
+        display: none;
+    }
 
-            &::backdrop {
-                background: var(--backdrop);
-            }
-        }
+    &[pgs-state~="open"]>[pgs~="dropdown-content"] {
+        display: var(--dropdown-display);
     }
 
-    //= CONTENT
-    [pgs~="dropdown-content"] {
-        // start view
-        display: flex;
-        opacity: 0;
-        pointer-events: none;
-        // end view
-        transition-behavior: allow-discrete;
-        border: none;
+    >[pgs~="dropdown-content"] {
+        position: fixed;
+        inset: var(--dropdown-top) auto auto var(--dropdown-left);
+        z-index: 1000;
+        inline-size: var(--dropdown-inline-size);
+        max-inline-size: var(--dropdown-max-inline-size);
+        overflow: auto;
+        padding: var(--dropdown-padding);
+        border: var(--dropdown-border);
         border-radius: calc(var(--border-radius-input) + var(--dropdown-padding));
-        box-sizing: border-box;
-        width: max-content;
-        max-width: min(var(--dropdown-maxwidth), calc(100vw - 16px));
-        color: var(--dropdown-color);
         background: var(--dropdown-background);
-        overflow: initial;
-        z-index: -1;
-        margin-top: var(--dropdown-offset);
-        padding: var(--dropdown-padding);
-        @include flexColumn;
-
-        &::before {
-            content: "";
-            position: absolute;
-            top: calc(var(--dropdown-arrow-size) / -2);
-            left: var(--dropdown-arrow-left);
-            width: var(--dropdown-arrow-size);
-            height: var(--dropdown-arrow-size);
-            background: var(--dropdown-background);
-            transform: translateX(-50%) rotate(45deg);
-            pointer-events: none;
-            z-index: 0;
-        }
-    }
-
-    //-(LEGACY (default fallback)
-    @supports not ((anchor-name: var(--dropdown-anchor)) and (position-anchor: var(--dropdown-anchor)) and (position-area: bottom) and (top: anchor(bottom))) {
-        [pgs~="dropdown-content"] {
-            position: fixed;
-            inset: auto;
-            top: var(--dropdown-fallback-top);
-            left: var(--dropdown-fallback-left);
-            right: auto;
-            max-height: var(--dropdown-fallback-max-height);
-            overflow: visible;
-        }
-    }
-
-    //+( MODERN (Anchor Positioning)
-    @supports (anchor-name: var(--dropdown-anchor)) and (position-anchor: var(--dropdown-anchor)) and (position-area: bottom) and (top: anchor(bottom)) {
-        [pgs~="dropdown-button"] {
-            anchor-name: var(--dropdown-anchor);
-        }
-
-        [pgs~="dropdown-content"] {
-            position: fixed;
-            position-anchor: var(--dropdown-anchor);
-            inset: auto;
-            top: 0;
-            right: 0;
-
-            @supports (top: anchor(bottom)) {
-                top: anchor(bottom);
-            }
-
-            @supports (position-area: bottom) {
-                position-area: var(--dropdown-position);
-            }
-        }
+        color: var(--dropdown-color);
     }
-}
+}

package/assets/scss/components/_menu.scss

@@ -1,23 +1,137 @@
 //# MENU
-[pgs~=menuHorizontal] {
-    @include menu(row);
+[pgs~=menu] {
+    ul {
+        display: flex;
+        font-weight: 600;
+        align-items: center;
+        column-gap: var(--gap-texts);
+        row-gap: 1.0rem;
+        flex-wrap: nowrap;
 
-    li.menu-item-has-children {
-        @include menu(column);
+        ul {
+            display: none;
+        }
+
+        //== Content
+        >li {
+            >a {
+                flex-grow: 1;
+                min-width: fit-content;
+                @include button();
+
+                >span {
+                    line-height: 1.6;
+                    flex-grow: 1;
+                }
+            }
+
+            li {
+                width: -webkit-fill-available;
+            }
+        }
     }
-}
-[pgs~=menuHorizontalNotHeader] {
-    @include menu(row, false);
 
-    li.menu-item-has-children {
-        @include menu(column);
+    //== buttonIcon
+    [pgs~=menu-buttonIcon] {
+        --button-size: 0.9rem;
+        margin-right: -15px;
+        margin-block: auto;
+        width: 40px;
+        aspect-ratio: 1;
+        padding: 0;
+        justify-content: center;
+        cursor: pointer;
+        translate: -15px;
+
+        &[aria-expanded="true"] span {
+            rotate: 180deg;
+        }
+
+        span {
+            transition: all 300ms;
+        }
     }
-}
 
-[pgs~=menuVertical] {
-    @include menu(column)
-}
+    //== horizontal
+    &[pgs-option~=horizontal] {
+        >ul {
+            flex-direction: row;
+
+            >li {
+                >a {
+                    width: max-content;
+                }
+            }
+
+            //=== Sub menu
+            >li:has(ul) {
+                --dropdown-display: flex;
+                display: flex;
+                gap: 0.2rem;
+                flex-wrap: nowrap;
+
+                >a {
+                    border-radius: var(--border-radius-input);
+                    // box-shadow: var(--box-shadow);
+                }
+
+                ul {
+                    li a {
+                        min-width: 100% !important;
+                    }
+                }
 
-[pgs~=menuFooter] {
-    @include menuFooter()
+                &[pgs-state~=open]>ul {
+                    display: flex;
+                }
+            }
+        }
+    }
+
+    //== verical
+    ul,
+    &[pgs-option~=vertical],
+    &:not([pgs-option~=horizontal]) {
+        :is(ul) {
+            flex-direction: column;
+
+            li {
+                width: 100%;
+
+                >a {
+                    width: 100%;
+                }
+            }
+
+            //=== Sub menu
+            >li:has(ul) {
+                @include flexRow;
+                flex-wrap: nowrap;
+                align-items: center;
+                position: relative;
+
+                >a {
+                    max-width: calc(100% - var(--gap-texts) - 40px);
+                }
+
+                >ul {
+                    flex-basis: 100%;
+                    // --dropdown-maxwidth: 100%;
+                }
+
+                &:not([pgs-state~=open]) ul {
+                    display: none;
+                }
+            }
+        }
+    }
+
+    //== menuHeader
+    &[pgs-option~=menuHeader] {
+        >ul>li>a {
+            @include button_header();
+        }
+    }
 }
+
+//

package/assets/scss/components/_modals.scss

@@ -54,6 +54,7 @@ dialog[pgs~="modal-dialog"] {
         color: var(--modal-color);
         border-radius: var(--border-radius);
         position: relative;
+        gap: 0;
 
         >* {
             padding: var(--padding);
@@ -61,7 +62,8 @@ dialog[pgs~="modal-dialog"] {
 
         //==== HEADER
         [pgs~="modal-dialog-content-header"] {
-            @include flexRow();
+            @include flexRow(nowrap);
+            padding-bottom: calc(var(--padding) / 2);
             border-bottom: var(--border-complete);
             border-radius: var(--border-radius) var(--border-radius) 0 0;
             z-index: 1;
@@ -75,8 +77,9 @@ dialog[pgs~="modal-dialog"] {
         &:has([pgs~="modal-dialog-content-scroll"]) {
             max-height: calc(90svh - var(--heightOfHeader));
             overflow: hidden;
-
+            
             [pgs~="modal-dialog-content-scroll"] {
+                padding-top: calc(var(--padding) / 2);
                 overflow: auto;
                 max-height: 100%;
             }
@@ -96,7 +99,16 @@ dialog[pgs~="modal-dialog"] {
     }
 
     //#OPTION
-    
+    //== LEFT
+    &[pgs-option~="left"] {
+        [pgs~="modal-dialog-content"] {
+            margin-left: unset;
+            margin-right: auto;
+            width: min(400px, 100%);
+            min-width: unset;
+        }
+    }
+
     //== RIGHT
     &[pgs-option~="right"] {
         [pgs~="modal-dialog-content"] {

package/assets/scss/components/_notification.scss

@@ -1,9 +1,5 @@
-
-
 //= NOTIFICATION GROUP / TRIGGER
-[pgs~="notificationTrigger"]{}
-
-
+[pgs~="notificationTrigger"] {}
 
 //= NOTIFICATION STYLE
 @mixin notification($position: center) {
@@ -46,11 +42,11 @@
         --notification-background: var(--color-box);
         --notification-background-timer: color-mix(in srgb, var(--color-box) 95%, var(--color-black) 5%);
         --notification-color: unset;
-        --notification-shadow: unset;
+        --notification-shadow-color: unset;
+        --notification-shadow-perc: 0px 0px 150px 20px;
         --notification-timeout: unset;
         display: flex;
         gap: var(--gap-texts);
-        border: var(--border-complete);
         background: var(--notification-background);
         flex-direction: row;
         opacity: 1;
@@ -58,7 +54,7 @@
         overflow: hidden;
         transition: all 280ms;
         align-items: center;
-        box-shadow: 0px 0px 200px 20px var(--notification-shadow);
+        box-shadow: var(--notification-shadow-perc) var(--notification-shadow-color);
         border-radius: var(--border-radius-input);
         max-width: 90vw;
         margin-inline: auto;
@@ -115,15 +111,15 @@
 
         p,
         >i {
-            --fa-primary-color: var(--notification-shadow);
-            --fa-secondary-color: color-mix(in srgb, var(--notification-shadow) 50%, var(--color-white) 50%);
+            --fa-primary-color: var(--notification-shadow-color);
+            --fa-secondary-color: color-mix(in srgb, var(--notification-shadow-color) 50%, var(--color-white) 50%);
             color: var(--notification-color);
             margin-right: 5px;
             z-index: 1;
             line-height: unset;
 
             &:is(i) {
-                color: var(--notification-shadow);
+                color: var(--notification-shadow-color);
                 font-size: 2.5rem;
             }
         }
@@ -145,6 +141,7 @@
         //== hover
         &:is(a) {
             border-color: var(--color-primary-soft);
+            border: var(--border);
 
             &:hover {
                 background-color: var(--color-white);
@@ -164,19 +161,19 @@
     [pgs-state~="success"] {
         --notification-background: var(--color-success-background);
         --notification-background-timer: color-mix(in srgb, var(--color-success-background) 70%, var(--color-white) 30%);
-        --notification-shadow: var(--color-success);
+        --notification-shadow-color: var(--color-success);
     }
 
     [pgs-state~="error"] {
         --notification-background: var(--color-error-background);
         --notification-background-timer: color-mix(in srgb, var(--color-error-background) 70%, var(--color-white) 30%);
-        --notification-shadow: var(--color-error);
+        --notification-shadow-color: var(--color-error);
     }
 
     [pgs-state~="warning"] {
         --notification-background: var(--color-warning-background);
         --notification-background-timer: color-mix(in srgb, var(--color-warning-background) 70%, var(--color-white) 30%);
-        --notification-shadow: var(--color-warning);
+        --notification-shadow-color: var(--color-warning);
     }
 
     [pgs-state~="info"] {

package/assets/scss/components/_tooltip.scss

@@ -8,14 +8,7 @@
         --fa-size: .9rem;
     }
 
-    [pgs~="tooltip-content"][pgs~="dropdown-content"]:popover-open {
-        position: fixed;
-        position-anchor: unset;
-        position-area: unset;
-        inset: auto;
-        top: var(--dropdown-fallback-top);
-        left: var(--dropdown-fallback-left);
-        right: auto;
-        margin-top: 0;
+    [pgs~="tooltip-content"][pgs~="dropdown-content"]{
+
     }
 }

package/assets/scss/index.scss

@@ -7,7 +7,6 @@
 */
 @import "base/variables";
 @import "base/color";
-@import "base/reset";
 @import "base/html";
 @import "base/body";
 @import "base/heading";

package/assets/scss/layout/_gap.scss

@@ -3,13 +3,19 @@
     gap: var(--gap-texts);
 }
 
-[pgs~=gapElements]{
+[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/layout/_layout.scss

@@ -3,18 +3,6 @@
     @include main;
 }
 
-[pgs~=aside] {
-    @include aside;
-}
-
-[pgs~=containerAside] {
-    @include containerAside;
-}
-
-[pgs~=sectionAside] {
-    @include sectionNoPadding;
-}
-
 [pgs~=sectionNoPadding] {
     @include sectionNoPadding;
 }