mypgs 1.0.0

package/assets/scss/components/_notification.scss

@@ -0,0 +1,193 @@
+
+
+//= NOTIFICATION GROUP / TRIGGER
+[pgs~="notificationTrigger"]{}
+
+
+
+//= NOTIFICATION STYLE
+@mixin notification($position: center) {
+    @if ($position ==center) {
+        inset-inline: 0;
+        top: calc(var(--heightOfHeader) + 10px);
+
+        @at-root body:has(header[data-header-scroll="true"]) #{&} {
+            top: 10px;
+        }
+    }
+
+    @else if($position ==right) {
+        top: calc(var(--heightOfHeader) + 10px);
+        right: 10px;
+
+        @at-root body:has(header[data-header-scroll="true"]) #{&} {
+            top: 0;
+        }
+    }
+
+    @else if($position ==bottom) {
+        bottom: 10px;
+        right: 10px;
+    }
+}
+
+[pgs~="notification"],
+[pgs~="toast"] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap-texts);
+    height: min-content;
+    position: fixed;
+    z-index: 99;
+    isolation: isolate;
+    max-height: 80vh;
+
+    [pgs~=notification-element] {
+        --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-timeout: unset;
+        display: flex;
+        gap: var(--gap-texts);
+        border: var(--border-complete);
+        background: var(--notification-background);
+        flex-direction: row;
+        opacity: 1;
+        font-weight: 600;
+        overflow: hidden;
+        transition: all 280ms;
+        align-items: center;
+        box-shadow: 0px 0px 200px 20px var(--notification-shadow);
+        border-radius: var(--border-radius-input);
+        max-width: 90vw;
+        margin-inline: auto;
+        height: max-content;
+        padding: var(--padding);
+        position: relative;
+
+        //- mobile 
+        @media (max-width: $mobile) {
+            padding: calc(var(--padding)/ 1.5);
+        }
+
+        [pgs~=notification-element-title] {
+            font-weight: 700;
+        }
+
+        [pgs~=notification-element-content] {
+            font-weight: 400;
+            font-size: 1.4rem;
+        }
+
+        &::before {
+            content: "";
+            width: 0%;
+            height: 100%;
+            position: absolute;
+            top: 0;
+            left: 0;
+            background-color: var(--notification-background-timer);
+            border-top-left-radius: var(--border-radius-input);
+            border-bottom-left-radius: var(--border-radius-input);
+            animation: timeline var(--notification-timeout) linear;
+        }
+
+        @keyframes timeline {
+            0% {
+                width: 100%;
+                opacity: 0;
+            }
+
+            10% {
+                opacity: 1;
+            }
+
+            50% {
+                opacity: 1;
+            }
+
+            100% {
+                width: 0%;
+                opacity: 0;
+            }
+        }
+
+        p,
+        >i {
+            --fa-primary-color: var(--notification-shadow);
+            --fa-secondary-color: color-mix(in srgb, var(--notification-shadow) 50%, var(--color-white) 50%);
+            color: var(--notification-color);
+            margin-right: 5px;
+            z-index: 1;
+            line-height: unset;
+
+            &:is(i) {
+                color: var(--notification-shadow);
+                font-size: 2.5rem;
+            }
+        }
+
+        //== close
+        button {
+            opacity: 0;
+            position: absolute;
+            right: 2px;
+            top: 2px;
+            scale: 0.75;
+            z-index: 1;
+
+            &:focus {
+                opacity: 1;
+            }
+        }
+
+        //== hover
+        &:is(a) {
+            border-color: var(--color-primary-soft);
+
+            &:hover {
+                background-color: var(--color-white);
+                text-decoration: none;
+                color: var(--color-black);
+            }
+        }
+
+        &:focus-visible,
+        &:hover {
+            button {
+                opacity: 1;
+            }
+        }
+    }
+
+    [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"] {
+        --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"] {
+        --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"] {
+        --notification-background: var(--color-box);
+    }
+}
+
+[pgs~="notification"] {
+    @include notification(right);
+}
+
+[pgs~="toast"] {
+    @include notification(center);
+}

package/assets/scss/components/_searchbar.scss

@@ -0,0 +1,68 @@
+//= SEARCH BAR
+[pgs~="searchbar"] {
+    position: relative;
+    flex: 1;
+    width: 100%;
+    overflow: hidden;
+    margin-inline: auto;
+    @include button_header();
+    padding: 0;
+    gap: 0;
+
+    //+ mobile 
+    @media (min-width: $mobile) {
+        min-width: 21.4rem;
+    }
+
+    button {
+        outline: none;
+        border: none;
+        background: none;
+        padding-left: var(--button-size);
+        aspect-ratio: 1;
+        height: 100%;
+        border-radius: var(--border-radius-input);
+        cursor: pointer;
+    }
+
+    input {
+        cursor: text !important;
+        border: 0;
+        padding: var(--button-size);
+        margin: 2px;
+        margin-left: 0;
+        font-family: var(--font);
+        font-weight: 600;
+        font-size: 1.6rem;
+        border-radius: var(--border-radius-input);
+        height: 100%;
+        width: 100%;
+        min-width: 21.4rem;
+        background-color: transparent;
+        color: ourContrastColor(var(--button-background));
+        
+        &::placeholder {
+            color: ourContrastColor(var(--button-background));
+            opacity: .6;
+        }
+
+        &:focus-visible {
+            outline: unset;
+        }
+    }
+
+    &:has(input:focus-visible){
+        outline: var(--focus-visible);
+    }
+
+    @at-root dialog #{&} {
+        margin-inline: auto;
+        max-width: calc(100% - var(--padding-page) * 2);
+        height: max-content;
+        background-color: var(--color-white);
+
+        input {
+            padding-block: 20px;
+        }
+    }
+}

package/assets/scss/components/_slides.scss

@@ -0,0 +1,198 @@
+[pgs~="slides"] {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    container-type: inline-size;
+    align-items: center;
+    isolation: isolate;
+    height: max-content;
+    --slide-width: calc(var(--page-width) /2.3);
+    --slide-width-tablet: 100%;
+    --slide-shadow-color: var(--color-background);
+    --slide-shadow-width: 100px;
+
+    //option for suggestions
+    &[pgs-option~=singleScroll],
+    &[pgs-option~=notScrollAnimation] {}
+
+    //+( tablet 
+    @container (min-width: #{$tablet}) {
+        &[pgs-option~=shadowDesktop] {
+
+            //== shadow
+            &::after,
+            &::before {
+                content: "";
+                height: 100%;
+                width: var(--slide-shadow-width);
+                z-index: 3;
+                position: absolute;
+                transition: opacity 200ms;
+                pointer-events: none;
+                opacity: 1;
+            }
+
+            &::before {
+                left: 0;
+                background: linear-gradient(90deg, var(--slide-shadow-color), transparent);
+            }
+
+            &::after {
+                right: 0;
+                background: linear-gradient(90deg, transparent, var(--slide-shadow-color));
+            }
+
+            // &:has([pgs~="slides-container"] .view) {
+
+            //     &::before,
+            //     &::after {
+            //         opacity: 1;
+            //     }
+            // }
+
+            &:has([pgs~="slides-container"] li:first-child.view) {
+                &::before {
+                    opacity: 0;
+                }
+            }
+
+            &:has([pgs~="slides-container"] li:last-child.view) {
+                &::after {
+                    opacity: 0;
+                }
+            }
+        }
+    }
+
+    //= CONTAINER SLIDES (ul)
+    [pgs~="slides-container"] {
+        display: flex;
+        width: 100%;
+        overflow-x: scroll;
+        overflow-y: hidden;
+        scroll-behavior: smooth;
+        scroll-snap-type: x mandatory;
+        scrollbar-width: none;
+        position: relative;
+        user-select: none;
+        padding: 3px;
+        gap: var(--gap-texts);
+
+        &::-webkit-scrollbar {
+            height: 0;
+            display: none;
+        }
+
+        //== li
+        >* {
+            scroll-snap-align: center;
+            scroll-snap-stop: always;
+            position: relative;
+            opacity: 1;
+            margin-inline: auto;
+            min-width: var(--slide-width);
+            max-width: 100%;
+            height: auto;
+            border-radius: var(--border-radius-input);
+
+            >* {
+                scale: var(--visible-percent);
+            }
+        }
+
+        //-( tablet 
+        @container (max-width: #{$tablet}) {
+            >* {
+                min-width: var(--slide-width-tablet);
+            }
+        }
+    }
+
+    //= ARROW
+    [pgs~="slides-prec"],
+    [pgs~="slides-next"] {
+        position: absolute;
+        z-index: 4;
+        --button-background: var(--color-box);
+        padding: var(--gap-texts);
+        aspect-ratio: 1;
+        top: 50%;
+        translate: 0 -50%;
+
+        &:is([pgs~="slides-prec"]) {
+            left: 0;
+            margin-left: 0.5rem;
+        }
+
+        &:is([pgs~="slides-next"]) {
+            right: 0;
+            margin-right: 0.5rem;
+        }
+
+        //- tablet 
+        @media (max-width: $tablet) {
+            &:is([pgs~="slides-prec"]) {
+                left: 10px;
+                margin: 0;
+            }
+
+            &:is([pgs~="slides-next"]) {
+                right: 10px;
+                margin: 0;
+            }
+        }
+    }
+
+    //= DOTS
+    [pgs~="slides-dots"] {
+        display: flex;
+        justify-content: center;
+        flex-wrap: wrap;
+        width: 80%;
+        gap: 0.5rem;
+        margin-top: 1px;
+        max-width: max-content;
+        background-color: var(--color-box);
+        padding: 0.6rem;
+        z-index: 3;
+        border-radius: var(--border-radius);
+        transition: all 100ms;
+        translate: 0px calc(50%);
+        position: absolute;
+        bottom: 0;
+        border: var(--border-complete);
+
+        &:hover {
+            padding: 1.2rem;
+            z-index: 1;
+
+            >* {
+                padding: 1.2rem;
+                width: 1.2rem;
+                height: 1.2rem;
+            }
+        }
+
+        >* {
+            padding: 0.6rem;
+            width: 0.6rem;
+            height: 0.6rem;
+            border-radius: 50%;
+            border: none;
+            cursor: pointer;
+            background-color: var(--color-primary-soft);
+            transition: all 100ms;
+            margin-block: auto;
+
+            &.active {
+                background-color: var(--color-primary);
+                // scale: 1.2;
+                // margin: 0.3rem;
+            }
+
+            &:hover {
+                background-color: var(--color-secondary);
+            }
+        }
+    }
+}

package/assets/scss/components/_steps.scss

@@ -0,0 +1,111 @@
+ol[pgs~="steps"] {
+    color: var(--color-black);
+
+    //== step
+    [pgs~=steps-step] {
+        display: flex;
+        align-items: start;
+        position: relative;
+        --steps-circle-size: 50px;
+        --steps-line-size: 4px;
+        --steps-line-color: var(--color-primary-soft);
+
+        //== CONTENT
+        [pgs~=steps-step-content] {
+            @include flexColumn();
+            margin-bottom: calc(var(--gap-elements) / 2 - 8px);
+            padding-bottom: calc(var(--gap-elements) / 2);
+            min-height: 8.5rem;
+            width: 100%;
+        }
+
+        //== NUMBER
+        [pgs~=steps-step-circle] {
+            min-width: var(--steps-circle-size);
+            aspect-ratio: 1;
+            background: var(--color-primary-soft);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-right: 20px;
+            // margin-top: 4px;
+            border-radius: var(--border-radius);
+            font-weight: 600;
+            text-align: center;
+
+            i {
+                color: var(--color-black);
+                --fa-primary-color: var(--color-black);
+                --fa-secondary-color: var(--color-black);
+                --fa-secondary-opacity: 0.5;
+            }
+        }
+
+        //== LINE
+        [pgs~=steps-step-line] {
+            $space: 15px;
+            display: block;
+            position: absolute;
+            top: calc(var(--steps-circle-size) + $space );
+            left: 0;
+            height: calc(100% - (var(--steps-circle-size) + ($space * 2)));
+            width: var(--steps-circle-size);
+            z-index: -1;
+
+            //=== line
+            &::before {
+                content: "";
+                width: var(--steps-line-size);
+                background: var(--steps-line-color);
+                border-radius: var(--steps-line-size);
+                height: 100%;
+                position: absolute;
+                bottom: -3px;
+                left: 50%;
+                translate: -50%;
+            }
+
+            //=== arrow
+            &::after {
+                content: "";
+                $line: solid var(--steps-line-size) var(--steps-line-color);
+                border-right: $line;
+                border-bottom: $line;
+                height: 15px;
+                aspect-ratio: 1;
+                position: absolute;
+                bottom: -10px;
+                left: 50%;
+                transform: rotate(45deg) translatex(-74%);
+            }
+        }
+
+        //== LAST
+        &:last-child {
+            [pgs~=steps-step] {
+                padding-bottom: 0;
+                margin-bottom: 0;
+            }
+
+            [pgs~=steps-step-circle] {
+                background-color: var(--color-primary);
+                color: var(--color-whiteFixed);
+
+                i {
+                    color: var(--color-whiteFixed);
+                    --fa-primary-color: var(--color-whiteFixed);
+                    --fa-secondary-color: var(--color-whiteFixed);
+                    --fa-secondary-opacity: 0.5;
+                }
+            }
+
+            [pgs~=steps-step-line] {
+                opacity: 0;
+            }
+        }
+    }
+}
+
+[pgs~="list"] {
+    @include list();
+}

package/assets/scss/components/_table.scss

@@ -0,0 +1,59 @@
+[pgs~="table"] {
+
+    &:is(table),
+    table {
+        --table-title-background: var(--border-color);
+        --table-title-color: var(--color-black);
+    
+        --table-row-background-even: var(--border-box-transparent);
+        --table-row-background-odd: var(--border-box);
+        --table-row-color: var(--color-black);
+
+        --table-row-hover-background: var(--color-secondary);
+        --table-row-hover-color: var(--color-blackFixed);
+        
+        width: 100%;
+        max-width: 100%; // Limita la larghezza della tabella al contenitore
+        table-layout: auto; // Cambiato da fixed ad auto per migliorare la flessibilità del layout
+        border-collapse: collapse;
+        color: var(--color-text);
+        border-radius: var(--border-radius-input);
+        border: var(--border-complete-hover);
+        overflow: hidden;
+
+        th,
+        td {
+            padding: 12px;
+            border: var(--border-complete-hover);
+            text-align: left;
+            min-width: 100px;
+        }
+
+        th {
+            background-color: var(--table-title-background);
+            color: var(--table-title-color);
+            font-weight: bold;
+        }
+
+        tr {
+            color: var(--table-row-color);
+
+            &:nth-child(even) {
+                background-color: var(--table-row-background-even);
+            }
+
+            &:nth-child(odd) {
+                background-color: var(--table-row-background-odd);
+            }
+
+            &:hover {
+                background-color: var(--table-row-hover-background);
+                color: var(--table-row-hover-color);
+            }
+        }
+
+        td {
+            color: var(--color-text);
+        }
+    }
+}

package/assets/scss/components/_tabs.scss

@@ -0,0 +1,69 @@
+[pgs~=tabs] {
+    [pgs~=tabs-container] {
+        [pgs~=tab] {
+            display: none;
+
+            &.is-active {
+                display: flex;
+            }
+        }
+    }
+
+    [pgs~=tabs-next] {
+        --button-background: var(--color-primary);
+        color: var(--color-whiteFixed);
+        --button-padding: var(--button-size) var(--button-size) var(--button-size) calc(var(--button-size) + var(--button-size) / 2);
+    }
+
+    [pgs~=tabs-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;
+        }
+
+        .tab-dot {
+            padding: 12px;
+            border-radius: 50%;
+            aspect-ratio: 1;
+            border: none;
+            background: light-dark(var(--color-background), var(--color-box-transparent));
+            transition: all 0.2s ease;
+
+            i {
+                --fa-size: 2.2rem;
+                --fa-primary-color: var(--color-black);
+                --fa-secondary-color: var(--color-black);
+                color: var(--color-black);
+            }
+        }
+
+        .tab-dot.is-completed {
+            cursor: pointer;
+            background: var(--color-primary-soft);
+        }
+
+        .tab-dot.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/_tooltip.scss

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