mypgs 1.0.0

package/assets/scss/index.scss

@@ -0,0 +1,64 @@
+//+ MIXIN
+@import "./mixin/mixin.scss";
+
+/*
+|--------------------------------------------------------------------------
+| Base
+|--------------------------------------------------------------------------
+*/
+
+@import "base/variables";
+@import "base/color";
+@import "base/reset";
+@import "base/html";
+@import "base/body";
+@import "base/heading";
+@import "base/general";
+
+
+/*
+|--------------------------------------------------------------------------
+| Layout
+|--------------------------------------------------------------------------
+*/
+
+@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";
+
+
+/*
+|--------------------------------------------------------------------------
+| Patterns
+|--------------------------------------------------------------------------
+*/
+
+@import "patterns/header";
+@import "patterns/footer";
+@import "patterns/cookieConsent";

package/assets/scss/layout/_flex.scss

@@ -0,0 +1,47 @@
+
+//= FLEX 
+
+//== FLEX COLUMN
+[pgs~=flexColumn] {
+    @include flexColumn();
+}
+
+[pgs~=flexColumnTexts] {
+    @include flexColumn();
+}
+
+[pgs~=flexColumnElements] {
+    @include flexColumnElements();
+}
+
+[pgs~=flexColumnSections] {
+    @include flexColumnSections();
+}
+
+//== FLEX ROW
+[pgs~=flexRow] {
+    @include flexRow();
+}
+
+[pgs~=flexRowTexts] {
+    @include flexRow();
+}
+
+[pgs~=flexRowElements] {
+    @include flexRowElements();
+}
+
+[pgs~=flexRowSection] {
+    @include flexRowSection();
+}
+
+//== responsive flex
+@for $i from 1 through 10 {
+    [pgs~=flex-#{$i}] {
+        @include rFlex($i);
+    }
+
+    [pgs~=flex-#{$i}-m2e] {
+        @include rFlex($i, true);
+    }
+}

package/assets/scss/layout/_gap.scss

@@ -0,0 +1,12 @@
+//# GAP
+[pgs~=gapTexts] {
+    gap: var(--gap-texts);
+}
+
+[pgs~=gapElements]{
+    gap: var(--gap-elements);
+}
+
+[pgs~=gapSections] {
+    gap: var(--gap-sections);
+}

package/assets/scss/layout/_grid.scss

@@ -0,0 +1,11 @@
+//== GRID
+@for $i from 1 through 10 {
+    [pgs~=grid-#{$i}] {
+        @include rGrid($i);
+    }
+
+    [pgs~=grid-#{$i}-m2e] {
+        @include rGrid($i, true);
+    }
+}
+

package/assets/scss/layout/_layout.scss

@@ -0,0 +1,41 @@
+//# SEMANTIC
+[pgs~=main] {
+    @include main;
+}
+
+[pgs~=aside] {
+    @include aside;
+}
+
+[pgs~=containerAside] {
+    @include containerAside;
+}
+
+[pgs~=sectionAside] {
+    @include sectionNoPadding;
+}
+
+[pgs~=sectionNoPadding] {
+    @include sectionNoPadding;
+}
+
+[pgs~=section] {
+    @include section;
+}
+
+[pgs~=sectionSpecificity] {
+    @include sectionSpecifity-child('[pgs~=sectionSpecificity-child]');
+}
+
+[pgs~=sectionMax] {
+    @include sectionMax;
+}
+
+[pgs~=sectionFull] {
+    @include sectionFull;
+}
+
+//== CONTAINER
+[pgs~=container] {
+    container-type: inline-size;
+}

package/assets/scss/layout/_pageShell.scss

@@ -0,0 +1,171 @@
+//# pageShell
+
+[pgs~="pageShell"] {
+    --pageShell-aside-left-width: 400px;
+    --pageShell-aside-right-width: 400px;
+    --pageShell-aside-width-total: 0px;
+    --pageShell-content-min-width: 500px;
+    --pageShell-content-max-width: var(--page-width);
+    --pageShell-gap: var(--gap-elements);
+    --pageShell-aside-sticky-top: 10svh;
+    --pageShell-aside-sticky-bottom: var(--pageShell-gap);
+    --pageShell-aside-count: 0;
+    --pageShell-gap-count: 0;
+    --pageShell-max-width: calc(
+        var(--pageShell-content-max-width) +
+        var(--pageShell-aside-width-total) +
+        (var(--pageShell-gap) * var(--pageShell-gap-count))
+    );
+
+    display: grid;
+    grid-template-columns: minmax(0, var(--pageShell-content-max-width));
+    grid-template-areas: "content";
+    gap: var(--pageShell-gap);
+    padding-inline: var(--padding-page);
+    margin-inline: auto;
+    align-items: start;
+    justify-content: center;
+    width: 100%;
+    max-width: calc(var(--pageShell-max-width) + (var(--padding-page) * 2));
+
+    &:has(> [pgs~="pageShell-asideLeft"]) {
+        --pageShell-aside-width-total: var(--pageShell-aside-left-width);
+        --pageShell-aside-count: 1;
+        --pageShell-gap-count: 1;
+        grid-template-columns:
+            var(--pageShell-aside-left-width)
+            minmax(var(--pageShell-content-min-width), var(--pageShell-content-max-width));
+        grid-template-areas: "aside-left content";
+    }
+
+    &:has(> [pgs~="pageShell-asideRight"]) {
+        --pageShell-aside-width-total: var(--pageShell-aside-right-width);
+        --pageShell-aside-count: 1;
+        --pageShell-gap-count: 1;
+        grid-template-columns:
+            minmax(var(--pageShell-content-min-width), var(--pageShell-content-max-width))
+            var(--pageShell-aside-right-width);
+        grid-template-areas: "content aside-right";
+    }
+
+    &:has(> [pgs~="pageShell-asideLeft"]):has(> [pgs~="pageShell-asideRight"]) {
+        --pageShell-aside-width-total: calc(var(--pageShell-aside-left-width) + var(--pageShell-aside-right-width));
+        --pageShell-aside-count: 2;
+        --pageShell-gap-count: 2;
+        grid-template-columns:
+            var(--pageShell-aside-left-width)
+            minmax(var(--pageShell-content-min-width), var(--pageShell-content-max-width))
+            var(--pageShell-aside-right-width);
+        grid-template-areas: "aside-left content aside-right";
+    }
+    
+    [pgs~="pageShell-content"] {
+        grid-area: content;
+        width: 100%;
+        min-width: 0;
+    }
+
+    [pgs~="pageShell-asideLeft"],
+    [pgs~="pageShell-asideRight"] {
+        @include flexColumn;
+        align-items: flex-start;
+        isolation: isolate;
+        position: sticky;
+        top: var(--pageShell-aside-sticky-top);
+        width: 100%;
+        max-height: calc(100svh - var(--pageShell-aside-sticky-top) - var(--pageShell-aside-sticky-bottom));
+        overflow-y: auto;
+        overscroll-behavior: contain;
+        scrollbar-gutter: stable;
+        scrollbar-width: none;
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
+
+        >* {
+            width: 100%;
+        }
+    }
+
+
+    [pgs~="pageShell-asideLeft"] {
+        grid-area: aside-left;
+        max-width: var(--pageShell-aside-left-width);
+    }
+
+    [pgs~="pageShell-asideRight"] {
+        grid-area: aside-right;
+        max-width: var(--pageShell-aside-right-width);
+    }
+
+    @media (max-width: 1500px) {
+        &:has(> [pgs~="pageShell-asideLeft"]):has(> [pgs~="pageShell-asideRight"]) {
+            grid-template-columns: minmax(0, var(--pageShell-content-max-width));
+            grid-template-areas:
+                "aside-left"
+                "content"
+                "aside-right";
+
+            [pgs~="pageShell-asideLeft"],
+            [pgs~="pageShell-asideRight"] {
+                position: relative;
+                top: auto;
+                max-height: none;
+                max-width: none;
+                overflow: visible;
+            }
+        }
+    }
+
+    //- laptop 
+    @media (max-width: $laptop){
+        &:has(> [pgs~="pageShell-asideLeft"]):has(> [pgs~="pageShell-asideRight"]) {
+            grid-template-columns: minmax(0, var(--pageShell-content-max-width));
+            grid-template-areas:
+                "aside-left"
+                "content"
+                "aside-right";
+        }
+
+        &:has(> [pgs~="pageShell-asideLeft"]):not(:has(> [pgs~="pageShell-asideRight"])) {
+            grid-template-columns: minmax(0, var(--pageShell-content-max-width));
+            grid-template-areas:
+                "aside-left"
+                "content";
+        }
+
+        &:has(> [pgs~="pageShell-asideRight"]):not(:has(> [pgs~="pageShell-asideLeft"])) {
+            grid-template-columns: minmax(0, var(--pageShell-content-max-width));
+            grid-template-areas:
+                "content"
+                "aside-right";
+        }
+
+        [pgs~="pageShell-asideLeft"],
+        [pgs~="pageShell-asideRight"] {
+            position: relative;
+            top: auto;
+            max-height: none;
+            max-width: none;
+            overflow: visible;
+        }
+    }
+
+    @media (max-width: $tablet) {
+        [pgs~="pageShell-asideLeft"],
+        [pgs~="pageShell-asideRight"],
+        [pgs~="pageShell-content"] {
+            width: 100%;
+            max-width: none;
+        }
+
+        [pgs~="pageShell-asideLeft"],
+        [pgs~="pageShell-asideRight"] {
+            position: relative;
+            top: auto;
+            max-height: none;
+            overflow: visible;
+        }
+    }
+}

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

@@ -0,0 +1,126 @@
+//= TEXTAREA
+@mixin textarea() {
+    align-items: flex-start;
+    @include flexColumn();
+    @include list;
+
+    hr{
+        align-self: stretch;
+    }
+
+    h1,
+    h3,
+    h2 {
+        margin-top: 25px;
+    }
+}
+
+//= LISTA
+@mixin list() {
+
+    :is(ul),
+    &:is(ul) {
+        list-style: disc;
+
+        >li {
+            list-style-type: disc;
+
+            >ul>li {
+                list-style: circle;
+                margin-top: var(--gap-texts);
+
+                ul>li {
+                    list-style: "-";
+                }
+            }
+        }
+    }
+
+    :is(ol),
+    &:is(ol) {
+        list-style: decimal;
+
+        li {
+            list-style-type: decimal;
+        }
+    }
+
+    li {
+        display: list-item;
+        padding-left: 5px;
+        margin-left: 21px;
+        margin-top: calc(var(--gap-texts)/2);
+        color: var(--color-text);
+        // &:nth-child(1) {
+        //     margin-top: calc(var(--gap-texts)/2);
+        // }
+    }
+}
+
+//= HEADING
+@mixin heading($size, $marginTop: true) {
+    font-family: var(--font-titoli);
+    --heading-size: #{$size};
+    color: var(--color-black);
+    margin-bottom: calc(var(--heading-size)/4);
+    font-size: var(--heading-size);
+    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));
+    }
+
+    @media (max-width: $mobile) {
+        font-size: clamp(1.6rem, var(--heading-size) / 3 + 5vw, var(--heading-size));
+    }
+
+    @media (max-width: $watch) {
+        font-size: clamp(1.6rem, var(--heading-size) / 3 + 2.5vw, var(--heading-size));
+    }
+
+    //-( tablet 
+    @container (max-width: #{$tablet}) {
+        :is(h1, h2, h3, h4, h5, h6) {
+            line-height: 1.1;
+        }
+    }
+}
+
+
+@mixin h1(){
+    @include heading($h1,false);
+}
+
+@mixin h2(){
+    @include heading($h2, false);
+}
+
+@mixin h3(){
+    @include heading($h3);
+}
+
+@mixin h4(){
+    @include heading($h4);
+}
+
+@mixin h5(){
+    @include heading($h5);
+}
+
+//= ICON SVG
+@mixin iconSvgBase64($url, $size: 2.0rem, $color: var(--color-primary-strong)) {
+    content: "";
+    display: inline-block;
+    width: $size;
+    height: $size;
+    background-color: $color;
+    -webkit-mask: $url center/contain no-repeat;
+    mask: $url center/contain no-repeat;
+}

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

@@ -0,0 +1,186 @@
+@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};
+}
+
+color: var(--button-color#{$for});
+background: var(--button-background#{$for});
+
+i {
+    color: var(--button-color#{$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-border: var(--border-complete);
+    --button-size: 1.5rem;
+    --button-icon-size: 2.0rem;
+    --button-padding: var(--button-size);
+    @include _var-button-color(var(--color-box));
+    font-family: var(--font);
+    font-size: 1.6rem;
+    font-weight: 600;
+    text-decoration: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    user-select: none;
+    border: none;
+    outline: var(--button-border);
+    border-radius: var(--border-radius-input);
+    display: flex;
+    gap: calc(var(--button-size)/2);
+    align-items: center;
+    padding: var(--button-padding);
+    width: max-content;
+
+    i {
+        --fa-secondary-opacity: 0.5;
+        --fa-size: var(--button-icon-size);
+    }
+
+    &:disabled {
+        opacity: 0.2;
+        cursor: not-allowed;
+    }
+
+    //== onlyIcon
+    @if($onlyIcon ==true) {
+        aspect-ratio: 1;
+    }
+
+    @else {
+        &:has(i) {
+            --button-padding: var(--button-size) calc(var(--button-size) + var(--button-size)/2) var(--button-size) var(--button-size);
+        }
+
+        &:not(:has(i)) {
+            --button-padding: var(--button-size) calc(var(--button-size) * 2);
+        }
+    }
+
+    //== hover 
+    @if ($hover ==true) {
+        @include buttonHover();
+    }
+
+    @else {
+        transition: all 200ms;
+        cursor: inherit;
+    }
+
+    //== strong 
+    @if ($strong ==true) {
+        @include _var-button-color(var(--color-primary), "-strong", var(--color-whiteFixed));
+    }
+
+    //== current 
+    &[aria-current="page"]:not(:hover, :focus-visible) {
+        @include _var-button-color(var(--color-primary), "-current", var(--color-whiteFixed));
+    }
+}
+
+//= Button HOVER
+@mixin buttonHover() {
+    transition: all 200ms;
+    cursor: pointer;
+    text-decoration: none;
+
+    &:not(:disabled) {
+        @media (hover: hover) and (pointer: fine) {
+
+            &:focus-visible,
+            &:hover {
+                $n: .25rem;
+                $-n: -$n;
+                box-shadow: $-n $n 0px var(--color-black);
+                transform: translate($n, $-n);
+                @include _var-button-color(var(--color-primary-soft), "-hover");
+                outline-color: transparent;
+
+                i {
+                    --fa-secondary-opacity: 0.5;
+                }
+            }
+        }
+    }
+
+    &:is(a):hover {
+        text-decoration: none;
+    }
+
+    &:active {
+        box-shadow: 0 0 0 var(--color-black);
+        transform: translate(0, 0);
+    }
+}
+
+//= Button mini
+@mixin buttonMini($hover: true) {
+    @include button($hover, true);
+    --button-size: 0.5rem;
+    display: inline-flex;
+    aspect-ratio: unset;
+}
+
+//== Button BIG
+@mixin buttonBig($hover: true) {
+    @include button($hover);
+    position: relative;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    padding: var(--button-size);
+    border-radius: var(--border-radius);
+    aspect-ratio: 1;
+    text-align: center;
+    height: 100%;
+
+    &:not(:has(i)) {
+        padding-inline: var(--padding);
+    }
+
+    i {
+        font-size: 6.5rem;
+        z-index: 1;
+    }
+}
+
+//= Button CLOSE 
+@mixin buttonClose {
+    @include button(true, true);
+    --button-background: var(--color-error-background);
+    --button-color: var(--color-error);
+    --button-size: 1rem;
+    --button-icon-size: 1.3rem;
+    aspect-ratio: 1;
+    height: max-content;
+
+    &:hover {}
+
+    i {
+        color: var(--color-error);
+    }
+}
+
+//= 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);
+}