mypgs 1.0.0

package/assets/scss/base/_variables.scss

@@ -0,0 +1,39 @@
+//+ MIXIN
+// = SETTINGS 
+:root {
+    --font: 'Urbanist', sans-serif;
+    --font-titoli: var(--font);
+    --padding: 30px;
+    --padding-2: calc(var(--padding)/2);
+    --padding-page: 5vw;
+    --border-radius: 4.5rem;
+    --border-radius-external: calc(var(--border-radius) + var(--padding));
+    --border-radius-input: 2.25rem;
+    --border: 1.5px solid;
+    --border-color: light-dark(#ebebeb, #353535);
+    --border-complete: var(--border) var(--border-color);
+    --border-complete-hover: var(--border) var(--color-white);
+    --box-shadow: 0px 0px 38px 0px #0000000d;
+    --text-shadow: 0px 0px 50px #000000;
+    --backdrop: #0000003e;
+    --blur: blur(20px);
+    --page-top: 20svh;
+    --page-width: 1280px;
+    --page-space: clamp(var(--padding-page), calc((100% - var(--section-width)) / 2 + var(--padding-page)), 100%);
+    --gap-texts: 1.0rem;
+    --gap-elements: 4.0rem;
+    --gap-sections: calc(1.0rem + 15svh);
+    --fa-primary-color: var(--color-icon-primary);
+    --fa-primary-opacity: 1;
+    --fa-secondary-color: var(--color-icon-sceondary);
+    --fa-secondary-opacity: 1;
+    --fa-size: inherit;
+    --focus-visible: 3px solid var(--color-link);
+    
+    --heightOfHeader: 13.3rem; ///preload fittizio
+
+    //- mobile 
+    @media (max-width: $mobile) {
+        --gap-sections: calc(7.3rem + 8svh);
+    }
+}

package/assets/scss/components/_accordion.scss

@@ -0,0 +1,91 @@
+//# ACCORDION
+[pgs~=accordion] {
+    padding: 0 !important;
+    flex-direction: column !important;
+    display: block !important;
+    width: 100% !important;
+    position: relative;
+    user-select: unset !important;
+
+    &:not([pgs-state~=open]) {
+        @include button(true);
+        --button-background: var(--color-box);
+        --button-size: var(--padding-2);
+    }
+
+    //= BUTTON
+    [pgs~="accordion-button"] {
+        padding: var(--button-padding);
+        cursor: pointer;
+        @include flexRow;
+        appearance: none;
+        border: 0;
+        background: transparent;
+        flex-wrap: nowrap;
+        box-shadow: none;
+        outline: none;
+        font: inherit;
+        color: inherit;
+        line-height: inherit;
+        text-align: inherit;
+        border-radius: var(--border-radius-input);
+        width: 100%;
+        $url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M371.515%20229.055L219.516%20373.033C211.797%20380.344%20201.891%20384%20192%20384S172.203%20380.344%20164.484%20373.033L12.485%20229.055C-3.546%20213.87%20-4.233%20188.561%2010.97%20172.532C26.157%20156.472%2051.485%20155.785%2067.516%20171.001L192%20288.921L316.484%20171.001C332.499%20155.754%20357.827%20156.441%20373.03%20172.532C388.233%20188.561%20387.546%20213.87%20371.515%20229.055Z'/%3E%3C/svg%3E");
+
+        &::after {
+            @include iconSvgBase64($url);
+            margin-left: auto;
+        }
+    }
+
+    //= CONTENT
+    [pgs~="accordion-content"] {
+        padding-left: var(--button-padding);
+        @include flexColumn();
+        visibility: hidden;
+        opacity: 0;
+        max-height: 0;
+        top: 20px;
+        left: 0;
+        width: 100%;
+        font-weight: normal;
+        transition: padding 500ms, opacity 1000ms;
+        overflow: hidden;
+    }
+
+    //= OPEN
+    &[pgs-state~=open] {
+        @include button(false);
+        --button-background: var(--color-box);
+        --button-size: var(--padding-2);
+        margin-top: var(--padding);
+
+        [pgs~="accordion-button"] {
+            padding-inline: var(--padding);
+            padding-top: var(--padding);
+
+            &::after {
+                rotate: 180deg;
+            }
+
+            >i {
+                padding: .5rem;
+                background: color-mix(in srgb, var(--fa-primary-color) 5%, var(--color-white) 95%);
+                border-radius: .8rem;
+                display: table;
+                position: absolute;
+                top: calc(var(--padding) * -1);
+                left: var(--padding);
+                font-size: 40px;
+            }
+        }
+
+        [pgs~="accordion-content"] {
+            padding: calc(var(--button-size) * 2);
+            padding-top: var(--button-size);
+            visibility: visible;
+            opacity: 1;
+            max-height: unset;
+        }
+    }
+}

package/assets/scss/components/_breadcumbs.scss

@@ -0,0 +1,40 @@
+[pgs~=breadcrumb] {
+    font-size: 1.4rem;
+    line-height: 1;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0;
+
+    [pgs~=breadcrumb-item] {
+        display: inline-flex;
+        align-items: center;
+
+        a {
+            color: var(--color-primary-strong);
+            text-decoration: none;
+            font-weight: 500;
+            
+            &:hover {
+                color: var(--color-primary);
+                text-decoration: underline;
+            }
+        }
+
+        [aria-current="page"] {
+            color: var(--color-primary);
+            font-weight: 600;
+        }
+
+        [pgs~=breadcrumb-item-separator] {
+            color: var(--color-primary-soft);
+            margin: 0 8px;
+            display: inline-flex;
+            align-items: center;
+        }
+    }
+
+}

package/assets/scss/components/_button.scss

@@ -0,0 +1,28 @@
+//# BUTTON
+[pgs~=button] {
+    @include button()
+}
+
+[pgs~=buttonNohover] {
+    @include button(false)
+}
+
+[pgs~=buttonIcon] {
+    @include button(true, true);
+}
+
+[pgs~=buttonStrong] {
+    @include button(true, false, true)
+}
+
+[pgs~=buttonMini] {
+    @include buttonMini();
+}
+
+[pgs~=buttonBig] {
+    @include buttonBig()
+}
+
+[pgs~=buttonClose] {
+    @include buttonClose();
+}

package/assets/scss/components/_dropdown.scss

@@ -0,0 +1,106 @@
+//# 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%;
+    position: relative;
+    display: inline-block;
+
+    //= CONTENT
+    [pgs~="dropdown-content"] {
+        visibility: hidden;
+        opacity: 0;
+        max-height: 0;
+        transition:
+            opacity 200ms ease-in-out,
+            visibility 200ms ease-in-out,
+            max-height 100ms ease-in-out;
+        transition-behavior: allow-discrete;
+        border: none;
+        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;
+        // overflow: clip;
+        @include flexColumn;
+        height: 0;
+
+        &::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;
+        }
+
+        &: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)
+    @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;
+
+            &:popover-open {
+                margin-top: 0;
+            }
+        }
+    }
+
+    //+( 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);
+            }
+        }
+    }
+}

package/assets/scss/components/_form.scss

@@ -0,0 +1,53 @@
+//# FORM
+[pgs~=textarea] {
+    @include textarea();
+}
+
+[pgs~=label] {
+    @include label();
+}
+
+[pgs~=legend] {
+    @include legend();
+}
+
+[pgs~=required] {
+    @include required();
+}
+
+[pgs~=input] {
+    @include input();
+}
+
+[pgs~=select] {
+    @include select();
+}
+
+[pgs~=checkboxBackground] {
+    @include checkboxBackground();
+}
+
+[pgs~=twoState] {
+    @include twoState();
+}
+
+[pgs~=toggle] {
+    @include toggle();
+}
+
+[pgs~=chips] {
+    @include chips();
+}
+
+[pgs~=radio],
+[pgs~=checkbox] {
+    @include checkbox();
+}
+
+[pgs~=form] {
+    @include form();
+}
+
+[pgs~=formError] {
+    @include formError();
+}

package/assets/scss/components/_logo.scss

@@ -0,0 +1,51 @@
+//# LOGO 
+[pgs~="logo"] {
+    display: flex;
+    min-width: max-content;
+    --logo-height: var(--header-size, 6.0rem);
+    --logo-finter: invert(1) hue-rotate(180deg) brightness(1.5);
+
+    //== DARKMODE
+    @at-root [data-darkmode=true] #{&}[pgs~="logo-darkmode"] [pgs~="logo-image"] {
+        filter: var(--logo-finter);
+    }
+    
+    //== FIXED DARKMODE
+    &[pgs~="logo-darkmodeFixed"][pgs~="logo-darkmode"] [pgs~="logo-image"] {
+        filter: var(--logo-finter);
+    }
+    
+
+    //- tablet 
+    @media (max-width: $tablet) {
+        min-width: var(--logo-height);
+    }
+
+    //= LOGO
+    >*:not([pgs~="logo-text"]) {
+        height: var(--logo-height);
+        object-fit: contain;
+        object-position: left;
+        align-items: center;
+        width: initial;
+
+        lottie-player,
+        object {
+            max-width: var(--logo-height);
+        }
+    }
+
+    //= SENZA LOGO
+    &:has([pgs~="logo-text"]) {
+        display: flex;
+        align-items: center;
+        filter: unset !important;
+
+        [pgs~="logo-text"] {
+            font-family: var(--font-titoli);
+            font-size: 20px;
+            font-weight: 600;
+            text-wrap: nowrap;
+        }
+    }
+}

package/assets/scss/components/_menu.scss

@@ -0,0 +1,23 @@
+//# MENU
+[pgs~=menuHorizontal] {
+    @include menu(row);
+
+    li.menu-item-has-children {
+        @include menu(column);
+    }
+}
+[pgs~=menuHorizontalNotHeader] {
+    @include menu(row, false);
+
+    li.menu-item-has-children {
+        @include menu(column);
+    }
+}
+
+[pgs~=menuVertical] {
+    @include menu(column)
+}
+
+[pgs~=menuFooter] {
+    @include menuFooter()
+}

package/assets/scss/components/_modals.scss

@@ -0,0 +1,120 @@
+html:has(dialog[open]) {
+    overflow: hidden;
+    position: relative;
+    scrollbar-gutter: stable;
+    cursor: pointer;
+}
+
+//= MODAL
+[pgs~="modal"] {
+
+    //#OPTION
+    //== CONTAINER ID    
+    &[pgs-option~="containerID[]"] {}
+}
+
+//= DIALOG
+dialog[pgs~="modal-dialog"] {
+    --modal-backdrop: var(--backdrop);
+    --modal-background: var(--color-box);
+    --modal-color: var(--color-black);
+    border: none;
+    min-width: 100%;
+    min-height: 100svh;
+    padding-inline: var(--padding-page);
+    padding-bottom: var(--padding);
+    padding-top: var(--page-top);
+    background: var(--modal-backdrop);
+    transition: opacity 600ms ease;
+    margin: 0;
+    opacity: 1;
+    transition-behavior: allow-discrete;
+
+    &::backdrop {
+        // height: 0;
+        // display: none;
+    }
+
+    @at-root dialog:not(:has([pgs~="modal-dialog-content"])) {
+        cursor: pointer;
+    }
+
+    //- big-mobile 
+    @media (max-width: $big-mobile) {
+        padding-inline: 0;
+    }
+
+    //=== CONTENT
+    [pgs~="modal-dialog-content"] {
+        @include sectionNoPadding();
+        padding: 0;
+        cursor: auto;
+        container-type: inline-size;
+        background: var(--modal-background);
+        color: var(--modal-color);
+        border-radius: var(--border-radius);
+        position: relative;
+
+        >* {
+            padding: var(--padding);
+        }
+
+        //==== HEADER
+        [pgs~="modal-dialog-content-header"] {
+            @include flexRow();
+            border-bottom: var(--border-complete);
+            border-radius: var(--border-radius) var(--border-radius) 0 0;
+            z-index: 1;
+
+            [pgs~="modal-close"] {
+                margin-left: auto;
+            }
+        }
+
+        //=== SCROLL
+        &:has([pgs~="modal-dialog-content-scroll"]) {
+            max-height: calc(90svh - var(--heightOfHeader));
+            overflow: hidden;
+
+            [pgs~="modal-dialog-content-scroll"] {
+                overflow: auto;
+                max-height: 100%;
+            }
+        }
+    }
+
+    //== CLOSE
+    >[pgs~="modal-close"] {
+        position: fixed !important;
+        right: var(--padding-page);
+        top: calc(var(--heightOfHeader) + var(--padding));
+        z-index: 1;
+
+        @at-root dialog:not(:has(>[pgs~="modal-close"])) {
+            padding-top: var(--padding-page);
+        }
+    }
+
+    //#OPTION
+    
+    //== RIGHT
+    &[pgs-option~="right"] {
+        [pgs~="modal-dialog-content"] {
+            margin-left: auto;
+            margin-right: unset;
+            width: min(400px, 100%);
+            min-width: unset;
+        }
+    }
+
+    //== TOP LEVEL
+    &:not([pgs-option~="topLevel"]) {
+        height: 100svh;
+        top: 0;
+        overflow-y: auto;
+        padding-top: calc(var(--heightOfHeader) + var(--padding));
+        z-index: 90;
+        position: fixed;
+        inset: 0;
+    }
+}