frst-components 0.37.0 → 0.38.0

package/dist/esm/src/components/filtro-galeria-desafio/styles/MultiSelectDemo.js

@@ -0,0 +1,245 @@
+import styled, { css } from 'styled-components';
+import ArrowIcon from './icons/arrow_carrossel_down.png.js';
+import ArrowIconWhite from './icons/arrowCarrosselDown.png.js';
+
+const FiltroPrimeReact = styled.div `
+  .multiselect-custom {
+    width: fit-content;
+    background: #ffffff;
+    height: 37px;
+    border-radius: 16px;
+    border: 2px #f26818 solid;
+
+    :hover {
+      border: 2px #f26818 solid !important;
+      background: #f26818;
+      color: #fff;
+      box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
+
+      .p-placeholder {
+        color: #fff !important;
+      }
+      .country-item-value {
+        color: #ffffff !important;
+      }
+
+      .p-placeholder {
+        color: #ffffff !important;
+      }
+      .p-multiselect-trigger i {
+        color: #ffffff !important;
+      }
+      p {
+        color: #ffffff !important;
+      }
+      .p-multiselect-items-label {
+        color: #ffffff;
+      }
+      .p-multiselect-trigger {
+        i {
+          background-image: url(${ArrowIconWhite});
+          background-size: 1rem;
+          width: 15px;
+          height: 15px;
+          background-repeat: no-repeat;
+        }
+      }
+    }
+
+    .p-placeholder {
+      color: #f26818 !important;
+      font-family: 'PT Sans';
+      font-weight: 700;
+      padding: 0.5rem 0rem 0.5rem 1rem;
+    }
+
+    .p-multiselect-label-container {
+      display: flex;
+      align-items: center;
+    }
+
+    .p-multiselect-trigger {
+      width: fit-content;
+      padding: 0 0.7rem;
+    }
+
+    ${(props) => props.onClickFilter &&
+    css `
+        border: 2px #f26818 solid !important;
+        background: #f26818;
+        color: #fff;
+
+        .p-placeholder {
+          color: #fff !important;
+        }
+
+        .country-item-value {
+          color: #ffffff !important;
+        }
+      `}
+  }
+
+  .p-multiselect .p-multiselect-trigger {
+    i {
+      background-image: url(${ArrowIcon});
+      background-size: 1rem;
+      width: 15px;
+      height: 15px;
+      background-repeat: no-repeat;
+    }
+  }
+
+  .p-multiselect-items-label {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    color: #f26818;
+    font-weight: 700;
+    font-size: 14px;
+    margin-right: 10px;
+  }
+
+  .country-item-value {
+    margin-bottom: 0.5rem;
+  }
+
+  .p-multiselect:not(.p-disabled).p-focus {
+    box-shadow: none;
+    border: 2px #f26818 solid;
+  }
+
+  .multiselect-custom .p-multiselect-label:not(.p-placeholder):not(.p-multiselect-items-label) {
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+    background-color: #c63737;
+  }
+
+  .multiselect-custom .country-item-value {
+    padding: 0px;
+    margin: 0px;
+    border-radius: 3px;
+    display: inline-flex;
+    color: #f26818;
+    font-family: 'PT Sans';
+    font-weight: 700;
+
+    :hover {
+      color: #ffffff !important;
+    }
+  }
+
+  .multiselect-custom .country-item-value img.flag {
+    width: 17px;
+    background-color: #663366;
+  }
+
+  .p-multiselect .p-component .p-inputwrapper .p-inputwrapper-focus .multiselect-custom {
+    border-color: #663366;
+    background-color: #663366 !important;
+  }
+
+.p-inputwrapper-focus {
+    border: 2px #f26818 solid !important;
+    background: #f26818 !important;
+    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3) !important;
+    .p-placeholder {
+        color: #fff !important;
+      }
+      .country-item-value {
+        color: #ffffff !important;
+      }
+
+      .p-placeholder {
+        color: #ffffff !important;
+      }
+      .p-multiselect-trigger i {
+        color: #ffffff !important;
+      }
+      p {
+        color: #ffffff !important;
+      }
+      .p-multiselect-items-label {
+        color: #ffffff;
+      }
+    .p-multiselect-trigger {
+        i {
+          background-image: url(${ArrowIconWhite});
+          background-size: 1rem;
+          width: 15px;
+          height: 15px;
+          background-repeat: no-repeat;
+        }
+      }
+  }
+`;
+styled.label `
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 21px;
+  display: flex;
+  align-items: flex-end;
+  color: #222222;
+  margin-bottom: 0.5rem;
+`;
+styled.p `
+  font-family: 'PT Sans';
+  font-size: 16px;
+  font-weight: 700;
+  color: #f26818;
+
+  :hover {
+    color: #ffff;
+  }
+
+  ${(props) => props.onClickFilter &&
+    css `
+      color: #ffff;
+    `}
+`;
+const textCountSelectNumber = styled.b `
+  width: 18px;
+  height: 18px;
+  padding: 1px 5.5px 1px 5.5px;
+  border-radius: 60px;
+  gap: 10px;
+  border-radius: 100%;
+  background: #ebeded;
+  font-family: PT Sans;
+  font-size: 12px;
+  font-weight: 700;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-left: 5px;
+  color: #000000;
+`;
+const searchAndButton = styled.div `
+  display: flex;
+  padding: 0.5rem 0.5rem 0.25rem 0.5rem;
+  border-radius: 8px 8px 0px 0px;
+  flex-direction: column;
+  a{
+    border-width: 0px 0px 1px 0px;
+    border-style: solid;
+    border-color: #ebeded;
+    padding-bottom: 1rem;
+    padding-left:1rem;
+    align-items: center;
+  }
+`;
+const containerFiltro = styled.div `
+  display: flex;
+  width: fit-content;
+  flex-direction: row-reverse;
+`;
+const countSelect = styled.div `
+  display: flex;
+  align-items: center;
+  position: absolute;
+  margin-right: 35px;
+  margin-top: 10px;
+  z-index: 999;
+`;
+
+export { FiltroPrimeReact, containerFiltro, countSelect, searchAndButton, textCountSelectNumber };

package/dist/esm/src/components/filtro-galeria-desafio/styles/icons/arrowCarrosselDown.png.js

@@ -0,0 +1,3 @@
+var ArrowIconWhite = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAlCAYAAAAqXEs9AAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACZSURBVHgB7ZHBCcAgDEWlE3QE97/UDewmztAJrAUFkdJGTeLlPwh4MD/PaAwAAAAAZIkx2lRHKv+cDTPd+fliIXBKZZlQ5bv2zvbSd1Vnm4plUznD58zCTmpsXjG9qelMTim2LI4g9m3PBEaBrx8OFpMZGSAu0zNITYYyUF2GIKUv8yO1RoYgpS/zIbVOppE6U7nlMgAAwMAN8Jd85Y4qu00AAAAASUVORK5CYII=";
+
+export { ArrowIconWhite as default };

package/dist/esm/src/components/filtro-galeria-desafio/styles/icons/arrow_carrossel_down.png.js

@@ -0,0 +1,3 @@
+var ArrowIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAlCAYAAAAqXEs9AAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEDSURBVHgB7ZLNDYJAEEa/FUk8WgKl6M2jJWgHdqIdaAkevdEKJejNhD8nTKIEWGB39uBhXkICy8zLCwFQFEVRFCUopntQ79YJlsWZbtcoiqN5vDMEZMq/6G3ExRXG7OnaII7TerdKEDImrtKW/9Kd6QfBvFoPSaiobwzq5HdIX2kyKIpOVJ8hYNRgjEGGZX7ozppBwZ4EFQnqlgAkyPOt6z9ljVmQ6953GasoQJRrDL8eEwqifGJ4ZAKfKN8YHpuBS5QkhkdnMidKGsPjDoxFAStIY3jFEWtUo5LF8JoHlihIY3jVE2uUIIbXBfSihDGsENJEleWNbp+I8pMkRlEU5R/4AAUW8eBuzqq8AAAAAElFTkSuQmCC";
+
+export { ArrowIcon as default };