@ppg_pl/pallete 0.0.1

package/dist/collection/components/my-component/my-component.js

@@ -0,0 +1,106 @@
+import { Component, Prop, Method, Element, State, Listen, h } from '@stencil/core';
+import Helmet from '@stencil/helmet';
+export class MyModalBundle {
+  constructor() {
+    this.show = false;
+  }
+  async open() {
+    this.show = true;
+  }
+  closeModalHandler() {
+    this.show = false;
+  }
+  render() {
+    let content = null;
+    if (this.show) {
+      content = [h("my-backdrop", null), h("my-modal", { shop: this.shop, product: this.product })];
+    }
+    return (h("div", null,
+      h(Helmet, null,
+        h("script", null, `(function (w, d, s, l, i) {
+        w[l] = w[l] || [];
+        w[l].push({ 'gtm.start': new Date().getTime(), 'event': 'gtm.js' });
+        var f = d.getElementsByTagName(s)[0],
+          j = d.createElement(s),
+          dl = l != 'dataLayer' ? '&l=' + l : '';
+        j.async = true;
+        j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
+        f.parentNode.insertBefore(j, f);
+      })(window, document, 'script', 'dataLayer', 'GTM-PMTKHDX');`)),
+      h("div", { class: "pallete-wrapper" }, content),
+      h("noscript", null,
+        h("iframe", { src: "https://www.googletagmanager.com/ns.html?id=GTM-PMTKHDX", height: "0", width: "0", style: { display: 'none', visibility: 'hidden' } }))));
+  }
+  static get is() { return "my-component"; }
+  static get originalStyleUrls() { return {
+    "$": ["my-component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["my-component.css"]
+  }; }
+  static get properties() { return {
+    "shop": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "shop",
+      "reflect": false
+    },
+    "product": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "product",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "show": {}
+  }; }
+  static get methods() { return {
+    "open": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "modalEl"; }
+  static get listeners() { return [{
+      "name": "close",
+      "method": "closeModalHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}

package/dist/collection/components/my-loader/my-loader.css

@@ -0,0 +1,85 @@
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100px;
+  overflow: hidden;
+}
+
+.item {
+  width: 20px;
+  height: 20px;
+  margin: 3px;
+  list-style-type: none;
+  transition: 0.5s all ease;
+}
+
+.item:nth-child(1) {
+  animation: right-1 1s infinite alternate;
+  background-color: #b8cf40;
+  animation-delay: 20ms;
+}
+@keyframes right-1 {
+  0% {
+    transform: translateY(-18px);
+  }
+  100% {
+    transform: translateY(18px);
+  }
+}
+
+.item:nth-child(2) {
+  animation: right-2 1s infinite alternate;
+  background-color: #ee4b5e;
+  animation-delay: 40ms;
+}
+@keyframes right-2 {
+  0% {
+    transform: translateY(-21px);
+  }
+  100% {
+    transform: translateY(21px);
+  }
+}
+
+.item:nth-child(3) {
+  animation: right-3 1s infinite alternate;
+  background-color: #ea0f47;
+  animation-delay: 60ms;
+}
+@keyframes right-3 {
+  0% {
+    transform: translateY(-24px);
+  }
+  100% {
+    transform: translateY(24px);
+  }
+}
+
+.item:nth-child(4) {
+  animation: right-4 1s infinite alternate;
+  background-color: #d42840;
+  animation-delay: 80ms;
+}
+@keyframes right-4 {
+  0% {
+    transform: translateY(-27px);
+  }
+  100% {
+    transform: translateY(27px);
+  }
+}
+
+.item:nth-child(5) {
+  animation: right-5 1s infinite alternate;
+  background-color: #8b2850;
+  animation-delay: 100ms;
+}
+@keyframes right-5 {
+  0% {
+    transform: translateY(-30px);
+  }
+  100% {
+    transform: translateY(30px);
+  }
+}

package/dist/collection/components/my-loader/my-loader.js

@@ -0,0 +1,18 @@
+import { Component, h } from '@stencil/core';
+export class MyLoader {
+  render() {
+    return (h("div", { class: "container" },
+      h("div", { class: "item" }),
+      h("div", { class: "item" }),
+      h("div", { class: "item" }),
+      h("div", { class: "item" }),
+      h("div", { class: "item" })));
+  }
+  static get is() { return "my-loader"; }
+  static get originalStyleUrls() { return {
+    "$": ["my-loader.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["my-loader.css"]
+  }; }
+}

package/dist/collection/components/my-modal/my-modal.css

@@ -0,0 +1,323 @@
+html {
+  font-size: 62.5%;
+}
+
+body {
+  font-size: 1.5rem;
+}
+
+* {
+  font-family: "Galatea", sans-serif;
+}
+
+.my-modal {
+  box-shadow: 1px 1px 1px #ccc;
+  background-color: #fff;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  max-width: 1555px;
+  width: 90%;
+  z-index: 1000;
+  text-align: center;
+  padding: 35px 40px;
+  max-height: calc(100vh - 100px);
+  overflow-y: auto;
+}
+@media (max-width: 1024px) {
+  .my-modal {
+    padding: 80px 20px 20px;
+  }
+}
+.my-modal::-webkit-scrollbar {
+  display: none;
+}
+.my-modal .loader {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 300px;
+}
+.my-modal > img {
+  width: 300px;
+  object-fit: cover;
+}
+@media (max-width: 768px) {
+  .my-modal > img {
+    width: 200px;
+  }
+}
+.my-modal__close {
+  position: absolute;
+  right: 20px;
+  top: 20px;
+  background: transparent;
+  border: none;
+}
+.my-modal__close > img {
+  width: 45px;
+  height: 45px;
+  object-fit: cover;
+  cursor: pointer;
+}
+@media (max-width: 1024px) {
+  .my-modal__close {
+    top: 65px;
+  }
+}
+.my-modal__see-more {
+  font-size: 2.2rem;
+  margin-bottom: 27px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+@media (max-width: 1024px) {
+  .my-modal__see-more {
+    font-size: 1.8rem;
+  }
+}
+.my-modal__see-more img {
+  width: 45px;
+  height: 45px;
+}
+@media (max-width: 1024px) {
+  .my-modal__see-more img {
+    display: none;
+  }
+}
+.my-modal__wrapper {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+.my-modal__wrapper .boxes {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+}
+.my-modal__wrapper .boxes__list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px 5px;
+}
+.my-modal__wrapper .boxes__box-content {
+  width: 100%;
+  margin-bottom: 5px;
+  height: 500px;
+  text-align: left;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  position: relative;
+}
+.my-modal__wrapper .boxes__box-content .closebtn {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  width: 53px;
+  height: 53px;
+  cursor: pointer;
+  object-fit: cover;
+  z-index: 9999;
+}
+@media (max-width: 1024px) {
+  .my-modal__wrapper .boxes__box-content {
+    flex-direction: column-reverse;
+    height: 350px;
+  }
+}
+.my-modal__wrapper .boxes__box-content__info {
+  width: 40%;
+  padding: 50px 40px;
+  position: relative;
+}
+@media (max-width: 1024px) {
+  .my-modal__wrapper .boxes__box-content__info {
+    width: 100%;
+    padding: 15px;
+    min-height: 100px;
+  }
+}
+.my-modal__wrapper .boxes__box-content__info h2 {
+  font-size: 3.5rem;
+  font-weight: normal;
+  text-transform: capitalize;
+  margin-bottom: 7px;
+  color: #232323;
+}
+.my-modal__wrapper .boxes__box-content__info h4 {
+  margin-top: 0px;
+  margin-bottom: 15px;
+  font-size: 1.6rem;
+  color: #4c4c4c;
+}
+.my-modal__wrapper .boxes__box-content__info .divider {
+  border: 1px solid #4c4c4c;
+  opacity: 0.2;
+  margin-bottom: 20px;
+}
+.my-modal__wrapper .boxes__box-content__info__value {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+}
+@media (max-width: 1024px) {
+  .my-modal__wrapper .boxes__box-content__info__value {
+    justify-content: flex-start;
+  }
+}
+.my-modal__wrapper .boxes__box-content__info__value-image img {
+  width: 114px;
+  object-fit: cover;
+}
+@media (max-width: 1024px) {
+  .my-modal__wrapper .boxes__box-content__info__value-image img {
+    width: 75px;
+  }
+}
+.my-modal__wrapper .boxes__box-content__info__value-product {
+  color: #232323;
+  margin-left: 10px;
+}
+@media (max-width: 1024px) {
+  .my-modal__wrapper .boxes__box-content__info__value-product h2 {
+    font-size: 2.6rem;
+    margin: 0;
+    margin-right: 10px;
+  }
+}
+@media (max-width: 768px) {
+  .my-modal__wrapper .boxes__box-content__info__value-product h2 {
+    font-size: 1.6rem;
+  }
+}
+.my-modal__wrapper .boxes__box-content__info__value-product p {
+  font-size: 2rem;
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+.my-modal__wrapper .boxes__box-content__info__value-product p:last-of-type {
+  margin-bottom: 20px;
+}
+@media (max-width: 1024px) {
+  .my-modal__wrapper .boxes__box-content__info__value-product p:last-of-type {
+    margin-bottom: 0;
+  }
+}
+@media (max-width: 768px) {
+  .my-modal__wrapper .boxes__box-content__info__value-product p {
+    font-size: 1rem;
+  }
+}
+.my-modal__wrapper .boxes__box-content__info__value-product a {
+  background-color: #fff;
+  font-size: 1.6rem;
+  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1);
+  border-radius: 22.5px;
+  padding: 15px 30px;
+  color: #232323;
+  text-decoration: none;
+  display: block;
+  text-align: center;
+  transition: all 0.7s ease-in-out;
+}
+@media (max-width: 1024px) {
+  .my-modal__wrapper .boxes__box-content__info__value-product a {
+    max-width: 150px;
+    font-size: 1.3rem;
+    padding: 12px 25px;
+  }
+}
+.my-modal__wrapper .boxes__box-content__info__value-product a:hover {
+  color: #fff;
+  background-color: #232323;
+}
+.my-modal__wrapper .boxes__box-content__info__value-product a.inverse {
+  background-color: #232323;
+  color: #fff;
+}
+.my-modal__wrapper .boxes__box-content__info__value-product a.inverse:hover {
+  color: #232323;
+  background-color: #fff;
+}
+@media (max-width: 1024px) {
+  .my-modal__wrapper .boxes__box-content__info__value-product > div {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
+}
+.my-modal__wrapper .boxes__box-content__slider {
+  width: 60%;
+  position: relative;
+}
+@media (max-width: 1024px) {
+  .my-modal__wrapper .boxes__box-content__slider {
+    width: 100%;
+    display: block;
+  }
+}
+.my-modal__wrapper .boxes__box-content__white * {
+  color: #fff;
+}
+.my-modal__wrapper .boxes__box-content__white h2 {
+  color: #fff;
+}
+.my-modal__wrapper .pagination {
+  margin: 10px 0px;
+  font-size: 16px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+.my-modal__wrapper .pagination > span {
+  margin: 0 3px;
+  cursor: pointer;
+  min-width: 20px;
+  padding: 5px;
+  box-shadow: 1px 1px 1px #ccc;
+}
+.my-modal__wrapper .pagination .current {
+  background-color: wheat;
+}
+.my-modal .categories {
+  padding-bottom: 20px;
+  margin-bottom: 20px;
+  border-bottom: 1px solid #dfdfdf;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+.my-modal .categories__container {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 5px 5px;
+  overflow-x: auto;
+  width: 100%;
+}
+@media (max-width: 1024px) {
+  .my-modal .categories__container {
+    padding-bottom: 5px;
+  }
+}
+.my-modal .categories__slide-information {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+.my-modal .categories__slide-information span {
+  color: #4c4c4c;
+  font-size: 1.6rem;
+  font-weight: normal;
+}
+.my-modal .categories__slide-information span:first-of-type {
+  margin-left: 7px;
+}
+.my-modal .categories__slide-information span:last-of-type {
+  margin-right: 7px;
+}