mypgs 1.0.0 → 1.1.5

package/assets/scss/components/_dropdown.scss

@@ -14,15 +14,25 @@
     position: relative;
     display: inline-block;
 
+    &[pgs-state~=open] {
+        [pgs~="dropdown-content"] {
+            transition: opacity .3s ease;
+            opacity: 1;
+            pointer-events: auto;
+
+            &::backdrop {
+                background: var(--backdrop);
+            }
+        }
+    }
+
     //= CONTENT
     [pgs~="dropdown-content"] {
-        visibility: hidden;
+        // start view
+        display: flex;
         opacity: 0;
-        max-height: 0;
-        transition:
-            opacity 200ms ease-in-out,
-            visibility 200ms ease-in-out,
-            max-height 100ms ease-in-out;
+        pointer-events: none;
+        // end view
         transition-behavior: allow-discrete;
         border: none;
         border-radius: calc(var(--border-radius-input) + var(--dropdown-padding));
@@ -33,9 +43,9 @@
         background: var(--dropdown-background);
         overflow: initial;
         z-index: -1;
-        // overflow: clip;
+        margin-top: var(--dropdown-offset);
+        padding: var(--dropdown-padding);
         @include flexColumn;
-        height: 0;
 
         &::before {
             content: "";
@@ -49,19 +59,6 @@
             pointer-events: none;
             z-index: 0;
         }
-
-        &:popover-open {
-            margin-top: var(--dropdown-offset);
-            padding: var(--dropdown-padding);
-            visibility: visible;
-            opacity: 1;
-            max-height: max-content;
-            height: unset;
-
-            &::backdrop {
-                background: var(--backdrop);
-            }
-        }
     }
 
     //-(LEGACY (default fallback)
@@ -74,10 +71,6 @@
             right: auto;
             max-height: var(--dropdown-fallback-max-height);
             overflow: visible;
-
-            &:popover-open {
-                margin-top: 0;
-            }
         }
     }
 
@@ -103,4 +96,4 @@
             }
         }
     }
-}
+}

package/assets/scss/components/_notification.scss

@@ -161,25 +161,25 @@
         }
     }
 
-    [pgs-state="success"] {
+    [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);
     }
 
-    [pgs-state="error"] {
+    [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);
     }
 
-    [pgs-state="warning"] {
+    [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);
     }
 
-    [pgs-state="info"] {
+    [pgs-state~="info"] {
         --notification-background: var(--color-box);
     }
 }

package/assets/scss/components/_searchbar.scss

@@ -39,10 +39,10 @@
         width: 100%;
         min-width: 21.4rem;
         background-color: transparent;
-        color: ourContrastColor(var(--button-background));
+        color: contrast-color(color-mix(in srgb, var(--button-background) 77%, black));
         
         &::placeholder {
-            color: ourContrastColor(var(--button-background));
+            color: contrast-color(color-mix(in srgb, var(--button-background) 77%, black));
             opacity: .6;
         }
 

package/assets/scss/components/_slides.scss

@@ -43,13 +43,11 @@
             }
 
             // &:has([pgs~="slides-container"] .view) {
-
             //     &::before,
             //     &::after {
             //         opacity: 1;
             //     }
             // }
-
             &:has([pgs~="slides-container"] li:first-child.view) {
                 &::before {
                     opacity: 0;
@@ -114,8 +112,6 @@
         position: absolute;
         z-index: 4;
         --button-background: var(--color-box);
-        padding: var(--gap-texts);
-        aspect-ratio: 1;
         top: 50%;
         translate: 0 -50%;
 
@@ -141,6 +137,11 @@
                 margin: 0;
             }
         }
+
+        //- mobile 
+        @media (max-width: $mobile) {
+            display: none;
+        }
     }
 
     //= DOTS

package/assets/scss/components/_stepTabs.scss

@@ -0,0 +1,58 @@
+[pgs~=stepTabs] {
+    [pgs~=stepTabs-container] {
+        [pgs~=tab] {
+            display: none;
+
+            &[pgs-state~=is-active] {
+                display: flex;
+            }
+        }
+    }
+
+    [pgs~=stepTabs-next] {
+        --button-background: var(--color-primary);
+        --button-color: var(--color-whiteFixed);
+    }
+
+    [pgs~=stepTabs-dots] {
+        display: flex;
+        gap: var(--gap-texts);
+        justify-content: space-between;
+        align-items: center;
+        position: relative;
+        margin-inline: 10%;
+        margin-block: var(--gap-texts);
+        isolation: isolate;
+
+        &::before {
+            content: "";
+            width: 100%;
+            border-bottom: var(--border-complete);
+            position: absolute;
+            top: 50%;
+            z-index: -1;
+        }
+
+        [pgs~=stepTabs-dots-dot] {
+            @include button(false, true);
+            border-radius: 50%;
+            --fa-size: 1.8rem;
+
+            &[pgs-state~=is-completed] {
+                cursor: pointer;
+                background: var(--color-primary-soft);
+            }
+
+            &[pgs-state~=is-active] {
+                background: var(--color-primary);
+                scale: 1.2;
+
+                i {
+                    --fa-primary-color: var(--color-whiteFixed);
+                    --fa-secondary-color: var(--color-whiteFixed);
+                    color: var(--color-whiteFixed);
+                }
+            }
+        }
+    }
+}

package/assets/scss/components/_steps.scss

@@ -7,8 +7,9 @@ ol[pgs~="steps"] {
         align-items: start;
         position: relative;
         --steps-circle-size: 50px;
-        --steps-line-size: 4px;
-        --steps-line-color: var(--color-primary-soft);
+        --steps-circle-color: var(--color-primary-soft);
+        --steps-line-size: 2px;
+        --steps-line-color: var(--color-gray);
 
         //== CONTENT
         [pgs~=steps-step-content] {
@@ -23,7 +24,7 @@ ol[pgs~="steps"] {
         [pgs~=steps-step-circle] {
             min-width: var(--steps-circle-size);
             aspect-ratio: 1;
-            background: var(--color-primary-soft);
+            background: var(--steps-circle-color);
             display: flex;
             align-items: center;
             justify-content: center;

package/assets/scss/components/_table.scss

@@ -9,7 +9,7 @@
         --table-row-background-odd: var(--border-box);
         --table-row-color: var(--color-black);
 
-        --table-row-hover-background: var(--color-secondary);
+        --table-row-hover-background: var(--color-secondary-soft);
         --table-row-hover-color: var(--color-blackFixed);
         
         width: 100%;

package/assets/scss/components/_tooltip.scss

@@ -1,16 +1,21 @@
 [pgs~="tooltip"][pgs~="dropdown"] {
     --dropdown-position-right: center;
     --dropdown-maxwidth: 400px;
+    --dropdown-padding: 15px;
 
     [pgs~="tooltip-button"][pgs~="dropdown-button"] {
-        --button-background: var(--color-black);
-
-        i {
-            --fa-size: .9rem;
-        }
+        // --button-background: var(--color-black);
+        --fa-size: .9rem;
     }
 
     [pgs~="tooltip-content"][pgs~="dropdown-content"]:popover-open {
-        padding: 15px;
+        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;
     }
 }

package/assets/scss/index.scss

@@ -1,12 +1,10 @@
 //+ MIXIN
 @import "./mixin/mixin.scss";
-
 /*
 |--------------------------------------------------------------------------
 | Base
 |--------------------------------------------------------------------------
 */
-
 @import "base/variables";
 @import "base/color";
 @import "base/reset";
@@ -15,50 +13,49 @@
 @import "base/heading";
 @import "base/general";
 
-
 /*
 |--------------------------------------------------------------------------
 | Layout
 |--------------------------------------------------------------------------
 */
-
-@import "layout/layout";
-@import "layout/flex";
-@import "layout/grid";
-@import "layout/pageShell";
-@import "layout/gap";
-
-
+[pgs~=initP] {
+    @import "layout/layout";
+    @import "layout/flex";
+    @import "layout/grid";
+    @import "layout/pageShell";
+    @import "layout/gap";
+}
 
 /*
 |--------------------------------------------------------------------------
 | Components
 |--------------------------------------------------------------------------
 */
-
-@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/tabs";
-@import "components/notification";
-@import "components/tooltip";
-@import "components/searchbar";
-@import "components/logo";
-
+[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";
+}
 
 /*
 |--------------------------------------------------------------------------
 | Patterns
 |--------------------------------------------------------------------------
 */
-
-@import "patterns/header";
-@import "patterns/footer";
-@import "patterns/cookieConsent";
+[pgs~=initP] {
+    @import "patterns/header";
+    @import "patterns/footer";
+    @import "patterns/cookieConsent";
+}

package/assets/scss/layout/_gap.scss

@@ -9,4 +9,7 @@
 
 [pgs~=gapSections] {
     gap: var(--gap-sections);
+}
+[pgs~=nowrap] {
+    flex-wrap: nowrap;
 }

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

@@ -1,26 +1,26 @@
-@function ourContrastColor($backgorundReferenze) {
-    @return contrast-color(color-mix(in srgb, $backgorundReferenze 77%, black));
-}
-
 //+ VAR
 @mixin _var-button-color($background, $for: null, $colorNotContrast: var(--color-black)) {
-    --button-background#{$for}: #{$background};
-    --button-color#{$for}: #{ourContrastColor(var(--button-background#{$for}))
-}
-
-;
-@supports not (color: contrast-color(red)) {
-    --button-color#{$for}: #{$colorNotContrast};
-}
+    @supports (color: contrast-color(red)) {
+        --button-color#{$for}: contrast-color(color-mix(in srgb, var(--button-background#{$for}) 77%, black));
+    }
 
-color: var(--button-color#{$for});
-background: var(--button-background#{$for});
+    @supports not (color: contrast-color(red)) {
+        --button-color#{$for}: #{$colorNotContrast};
+    }
 
-i {
+    --button-background#{$for}: #{$background};
     color: var(--button-color#{$for});
-    --fa-primary-color: var(--button-color#{$for});
-    --fa-secondary-color: var(--button-color#{$for});
-}
+    background: var(--button-background#{$for});
+
+    &:is(a) {
+        color: var(--button-color#{$for});
+    }
+
+    i {
+        color: var(--button-color#{$for});
+        --fa-primary-color: var(--button-color#{$for});
+        --fa-secondary-color: var(--button-color#{$for});
+    }
 }
 
 //= BUTTON
@@ -28,7 +28,12 @@ i {
     --button-border: var(--border-complete);
     --button-size: 1.5rem;
     --button-icon-size: 2.0rem;
-    --button-padding: var(--button-size);
+    --button-padding-block: var(--button-size);
+    --button-padding-left: calc(var(--button-size) * 2);
+    --button-padding-right: calc(var(--button-size) * 2);
+    --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 _var-button-color(var(--color-box));
     font-family: var(--font);
     font-size: 1.6rem;
@@ -41,33 +46,44 @@ i {
     outline: var(--button-border);
     border-radius: var(--border-radius-input);
     display: flex;
-    gap: calc(var(--button-size)/2);
+    gap: calc(var(--button-size)/1.5);
     align-items: center;
     padding: var(--button-padding);
+    height: max-content;
     width: max-content;
-
-    i {
-        --fa-secondary-opacity: 0.5;
-        --fa-size: var(--button-icon-size);
-    }
-
-    &:disabled {
-        opacity: 0.2;
-        cursor: not-allowed;
-    }
+    margin-block: auto;
 
     //== onlyIcon
     @if($onlyIcon ==true) {
+        flex: 0 0;
         aspect-ratio: 1;
+        border-radius: 50%;
+        justify-content: center;
+        align-items: center;
+        --button-padding: var(--button-padding-block);
+
+        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;
+        }
     }
 
     @else {
+        $button-right: calc(var(--button-size) * 2);
+        $button-left: calc(var(--button-size) * 1.5);
+
         &:has(i) {
-            --button-padding: var(--button-size) calc(var(--button-size) + var(--button-size)/2) var(--button-size) var(--button-size);
+            --button-padding-right: #{$button-right};
+            --button-padding-left: #{$button-left};
         }
 
-        &:not(:has(i)) {
-            --button-padding: var(--button-size) calc(var(--button-size) * 2);
+        &[pgs-option~="buttonReverse"]:has(i) {
+            --button-padding-right: #{$button-left};
+            --button-padding-left: #{$button-right};
         }
     }
 
@@ -90,6 +106,11 @@ i {
     &[aria-current="page"]:not(:hover, :focus-visible) {
         @include _var-button-color(var(--color-primary), "-current", var(--color-whiteFixed));
     }
+
+    &:disabled {
+        opacity: 0.2;
+        cursor: not-allowed;
+    }
 }
 
 //= Button HOVER
@@ -133,9 +154,11 @@ i {
     --button-size: 0.5rem;
     display: inline-flex;
     aspect-ratio: unset;
+    margin-block: auto;
+    aspect-ratio: 1;
 }
 
-//== Button BIG
+//= Button BIG
 @mixin buttonBig($hover: true) {
     @include button($hover);
     position: relative;
@@ -160,20 +183,20 @@ i {
 }
 
 //= Button CLOSE 
-@mixin buttonClose {
+@mixin buttonClose($important: false) {
     @include button(true, true);
-    --button-background: var(--color-error-background);
-    --button-color: var(--color-error);
+    --button-background: var(--color-primary-soft);
     --button-size: 1rem;
     --button-icon-size: 1.3rem;
     aspect-ratio: 1;
     height: max-content;
 
-    &:hover {}
-
-    i {
-        color: var(--color-error);
+    @if($important ==true) {
+        --button-background: var(--color-error-background);
+        --button-color: var(--color-error);
     }
+
+    &:hover {}
 }
 
 //= button header

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

@@ -59,7 +59,7 @@
                         }
                     }
 
-                    &[pgs-state=open] {
+                    &[pgs-state~=open] {
                         display: flex;
                     }
                 }