mypgs 2.0.0 → 2.1.0

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

@@ -0,0 +1,75 @@
+@mixin _hoverColor() {
+    $color: var(--color-primary-strong);
+    $colorTxtSafari: var(--color-white);
+    --hover-color: #{$colorTxtSafari};
+    --hover-background: #{$color};
+    color: var(--hover-color);
+    --fa-primary-color: var(--hover-color);
+    --fa-secondary-color: var(--hover-color);
+    background: var(--hover-background);
+
+    :is(h1, h2, h3, h4, h5, h6, p) {
+        color: var(--hover-color);
+    }
+}
+
+//+ HOVER
+@mixin _hoverContent1() {
+    @media (hover: hover) and (pointer: fine) {
+
+        &:focus-visible,
+        &:hover {
+            box-shadow: 0px 0px 38px 0px var(--hover-shadow-color);
+            // outline-color: var(--color-primary);
+            @include _hoverColor();
+        }
+    }
+}
+
+@mixin _hoverContent2() {
+    @media (hover: hover) and (pointer: fine) {
+
+        &:focus-visible,
+        &:hover {
+            $n: var(--hover-shadow-displacement);
+            $-n: calc(var(--hover-shadow-displacement) * -1);
+            box-shadow: $-n $n 0 var(--color-black);
+            transform: translate($n, $-n);
+            outline-color: transparent;
+            @include _hoverColor();
+        }
+    }
+}
+
+//= HOVER
+@mixin hover() {
+    transition: all 200ms;
+    cursor: pointer;
+    text-decoration: none;
+    --hover-shadow-color: var(--color-primary);
+    --hover-shadow-displacement: 0.25rem;
+    $color: var(--color-primary-strong);
+    $colorTxtSafari: var(--color-whiteFixed);
+
+    &:not(:disabled) {
+        &:not([pgs-option~=buttonStyle-2]) {
+            @include _hoverContent1();
+        }
+
+        &[pgs-option~=buttonStyle-2] {
+            @include _hoverContent2();
+        }
+
+        &:hover {
+            --fa-secondary-opacity: 0.5;
+            --hover-color: var(--color-whiteFixed);
+            color: var(--hover-color);
+            --fa-primary-color: var(--hover-color);
+            --fa-secondary-color: var(--hover-color);
+        }
+    }
+
+    &:is(a):hover {
+        text-decoration: none;
+    }
+}

package/assets/scss/mixin/_settings.scss

@@ -1,3 +1,5 @@
+@use "sass:list";
+
 //+ devices
 $watch: 315px;
 $mobile: 430px;
@@ -6,7 +8,6 @@ $tablet: 800px;
 $big-tablet: 900px;
 $laptop: 1100px;
 
-@use "sass:list";
 
 @function fibonacci($n) {
     $sequence: 0 1;

package/assets/scss/mixin/mixin.scss

@@ -1,8 +1,9 @@
 @forward "settings";
+@forward "mx-hover";
 @forward "mx-base";
 @forward "mx-responsive";
 @forward "mx-form";
-@forward "mx-form-addon";
+@forward "mx-formAddon";
 @forward "mx-button";
 @forward "mx-color";
 @forward "mx-semantic";

package/demo/demo.js

@@ -4,6 +4,7 @@
 const demoRenderer = {
     templateFiles: [
         "components/form.html",
+        "components/formAddon.html",
         "components/search.html",
         "components/summary.html",
         "components/menu.html",
@@ -214,9 +215,9 @@ function configureFormDemo() {
 
     const formValidate = new pgsApi.formValidate(form, {
         message: {
-            fieldError: "Completa questo campo",
-            fieldsError: "Completa tutti i campi obbligatori",
-            success: "Inviato con successo"
+            fieldError: "Please complete this field",
+            fieldsError: "Please complete all required fields",
+            success: "Sent successfully"
         }
     });