@pelcro/react-pelcro-js 4.0.0-alpha.12 → 4.0.0-alpha.14

package/dist/pelcro.css

@@ -703,6 +703,12 @@ Add the correct display in Chrome and Safari.
   width: 100%;
 }
 
+@media (min-width: 425px) {
+  .pelcro-root .pelcro-modal {
+    max-width: 425px;
+  }
+}
+
 @media (min-width: 640px) {
   .pelcro-root .pelcro-modal {
     max-width: 640px;
@@ -764,8 +770,8 @@ Add the correct display in Chrome and Safari.
   border-bottom-width: 2px;
   --tw-bg-opacity: 1;
   background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
+  padding-left: 2rem;
+  padding-right: 2rem;
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
   border-bottom-width: 1px;
@@ -774,7 +780,7 @@ Add the correct display in Chrome and Safari.
 .pelcro-root .pelcro-modal-close {
   position: absolute;
   top: 50%;
-  right: 1.25rem;
+  right: 0.5rem;
   z-index: 999999;
   width: 1.5rem;
   --tw-translate-x: 0;
@@ -818,6 +824,12 @@ Add the correct display in Chrome and Safari.
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+@media (min-width: 640px) {
+  .pelcro-root .pelcro-modal-close {
+    right: 1.25rem;
+  }
+}
+
 .pelcro-root .pelcro-modal-body {
   --tw-bg-opacity: 1;
   background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
@@ -842,7 +854,6 @@ Add the correct display in Chrome and Safari.
   --tw-bg-opacity: 1;
   background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
   padding: 1rem;
-  padding-bottom: 2.75rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
@@ -1670,12 +1681,12 @@ Add the correct display in Chrome and Safari.
 
 .pelcro-root .productTabs .tabs::-webkit-scrollbar {
   width: 15px;
-  height: 5px;
+  height: 3px;
 }
 
 .pelcro-root .productTabs .tabs::-webkit-scrollbar-track {
   background: lightGrey;
-  border-radius: 5px;
+  border-radius: 3px;
 }
 
 .pelcro-root .productTabs .tabs::-webkit-scrollbar-thumb {
@@ -1692,20 +1703,17 @@ Add the correct display in Chrome and Safari.
 }
 
 .pelcro-root .productTabs .tabs li#activeTab button {
-  color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 30%));
-}
-
-.pelcro-root .productTabs .tabs li#activeTab:after {
-  content: "";
-  position: absolute;
-  bottom: 0px;
-  left: 0px;
-  display: block;
-  height: 0.25rem;
-  width: 100%;
+  border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 30%));
   background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 30%));
+  --tw-text-opacity: 1;
+  color: rgba(255, 255, 255, var(--tw-text-opacity));
 }
 
+/* .pelcro-root .productTabs .tabs li#activeTab:after {
+    content: "";
+    @apply plc-h-1 plc-bg-primary-800 plc-w-full plc-absolute plc-bottom-0 plc-left-0 plc-block;
+  } */
+
 .pelcro-root .selectedProduct img {
   max-width: 150px;
   height: auto;
@@ -1733,7 +1741,7 @@ Add the correct display in Chrome and Safari.
   display: block;
   overflow: hidden;
   padding: 0;
-  margin: 0 -10px;
+  /* margin: 0 -10px; */
 }
 
 .pelcro-root .slick-list:focus {
@@ -1772,7 +1780,7 @@ Add the correct display in Chrome and Safari.
 }
 
 .pelcro-root .slick-slide {
-  display: flex;
+  display: flex !important;
   align-self: stretch;
   height: unset;
   margin: 0 10px;
@@ -2047,6 +2055,11 @@ in order to scope selectors under pelcro-root
   margin: auto;
 }
 
+.pelcro-root .plc-mx-1 {
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
+}
+
 .pelcro-root .plc-mx-4 {
   margin-left: 1rem;
   margin-right: 1rem;
@@ -2145,10 +2158,6 @@ in order to scope selectors under pelcro-root
   margin-bottom: 1.5rem;
 }
 
-.pelcro-root .plc-mb-8 {
-  margin-bottom: 2rem;
-}
-
 .pelcro-root .plc-mb-9 {
   margin-bottom: 2.25rem;
 }
@@ -2695,6 +2704,10 @@ in order to scope selectors under pelcro-root
   overflow-wrap: break-word;
 }
 
+.pelcro-root .plc-break-all {
+  word-break: break-all;
+}
+
 .pelcro-root .plc-rounded-none {
   border-radius: 0px;
 }
@@ -3014,6 +3027,11 @@ in order to scope selectors under pelcro-root
   padding: 1.5rem;
 }
 
+.pelcro-root .plc-px-0 {
+  padding-left: 0px;
+  padding-right: 0px;
+}
+
 .pelcro-root .plc-px-1 {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
@@ -3044,11 +3062,6 @@ in order to scope selectors under pelcro-root
   padding-right: 1.5rem;
 }
 
-.pelcro-root .plc-px-16 {
-  padding-left: 4rem;
-  padding-right: 4rem;
-}
-
 .pelcro-root .plc-py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
@@ -3508,6 +3521,9 @@ in order to scope selectors under pelcro-root
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
 
+@media (min-width: 425px) {
+}
+
 @media (min-width: 640px) {
   .pelcro-root .sm\:plc-m-4 {
     margin: 1rem;
@@ -3586,6 +3602,11 @@ in order to scope selectors under pelcro-root
     padding-right: 2rem;
   }
 
+  .pelcro-root .sm\:plc-px-16 {
+    padding-left: 4rem;
+    padding-right: 4rem;
+  }
+
   .pelcro-root .sm\:plc-pl-8 {
     padding-left: 2rem;
   }
@@ -3608,15 +3629,6 @@ in order to scope selectors under pelcro-root
 }
 
 @media (min-width: 1280px) {
-  .pelcro-root .xl\:plc-px-0 {
-    padding-left: 0px;
-    padding-right: 0px;
-  }
-
-  .pelcro-root .xl\:plc-px-16 {
-    padding-left: 4rem;
-    padding-right: 4rem;
-  }
 }
 
 @media (min-width: 1536px) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pelcro/react-pelcro-js",
   "description": "Pelcro's React UI Elements",
-  "version": "4.0.0-alpha.12",
+  "version": "4.0.0-alpha.14",
   "license": "MIT",
   "private": false,
   "main": "dist/index.cjs.js",