@pelcro/react-pelcro-js 4.0.0-alpha.35 → 4.0.0-alpha.37

package/dist/pelcro.css

@@ -743,9 +743,17 @@ Add the correct display in Chrome and Safari.
 
 .pelcro-root .pelcro-modal{
   position: absolute;
-  top: 0px;
+  bottom: 0px;
   display: flex;
   max-width: 32rem;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   flex-direction: column;
   align-items: center;
   overflow: hidden;
@@ -756,7 +764,8 @@ Add the correct display in Chrome and Safari.
 
 @media (min-width: 768px){
   .pelcro-root .pelcro-modal{
-    margin-top: 2rem;
+    bottom: 50%;
+    --tw-translate-y: 50%;
   }
 }
 
@@ -767,7 +776,7 @@ Add the correct display in Chrome and Safari.
 .pelcro-root .pelcro-modal-header {
   position: relative;
   display: flex;
-  min-height: 3rem;
+  min-height: 7rem;
   flex-direction: column;
   border-bottom-width: 2px;
   --tw-bg-opacity: 1;
@@ -838,7 +847,6 @@ Add the correct display in Chrome and Safari.
   padding-left: 0.5rem;
   padding-right: 0.5rem;
   padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
 }
 
 @media (min-width: 768px){
@@ -855,7 +863,10 @@ Add the correct display in Chrome and Safari.
   justify-content: center;
   --tw-bg-opacity: 1;
   background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
-  padding: 1rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 2.5rem;
+  padding-bottom: 2.5rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
@@ -1504,6 +1515,8 @@ Add the correct display in Chrome and Safari.
   display: block;
 }
 
+/* Slider */
+
 .pelcro-root .pelcro-shop-product-image {
   max-width: 13rem;
 }
@@ -1646,10 +1659,6 @@ Add the correct display in Chrome and Safari.
   display: flex !important;
 }
 
-.pelcro-root .pelcro-select-plan-radio {
-  margin-top: 0.4rem;
-}
-
 .pelcro-root .pelcro-product:before {
   content: "";
   position: absolute;
@@ -1660,51 +1669,17 @@ Add the correct display in Chrome and Safari.
   background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
 }
 
-/* Firefox */
-
-.pelcro-root .productTabs .tabs {
-  padding-bottom: 5px;
-  scrollbar-width: thin;
-  scrollbar-color: grey;
-}
-
-/* Chrome, Edge, and Safari */
-
-.pelcro-root .productTabs .tabs::-webkit-scrollbar {
-  width: 15px;
-  height: 3px;
-}
-
-.pelcro-root .productTabs .tabs::-webkit-scrollbar-track {
-  background: lightGrey;
-  border-radius: 3px;
-}
-
-.pelcro-root .productTabs .tabs::-webkit-scrollbar-thumb {
-  background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
-  border-radius: 14px;
-}
-
-.pelcro-root .productTabs .tabs li:first-child {
-  margin-left: auto;
-}
-
-.pelcro-root .productTabs .tabs li:last-child {
-  margin-right: auto;
-}
-
-.pelcro-root .productTabs .tabs li#activeTab button {
-  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), var(--plc-primary-lightness));
-  --tw-text-opacity: 1;
-  color: rgba(255, 255, 255, var(--tw-text-opacity));
+.pelcro-root .productTabs:before {
+  content: "";
+  width: calc(100% - 5.5rem);
+  left: 2.75rem;
+  position: absolute;
+  bottom: 0.125rem;
+  height: 1px;
+  --tw-bg-opacity: 1;
+  background-color: rgba(209, 213, 219, var(--tw-bg-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;
@@ -1744,137 +1719,6 @@ Add the correct display in Chrome and Safari.
 
 /* used by multiple input sub-components */
 
-/* Slider */
-
-.pelcro-root .slick-slider {
-  position: relative;
-  display: block;
-  box-sizing: border-box;
-  -webkit-user-select: none;
-          user-select: none;
-  touch-action: pan-y;
-}
-
-.pelcro-root .slick-list {
-  position: relative;
-  display: block;
-  overflow: hidden;
-  padding: 0;
-  /* margin: 0 -10px; */
-}
-
-.pelcro-root .slick-list:focus {
-  outline: none;
-}
-
-.pelcro-root .slick-list.dragging {
-  cursor: pointer;
-}
-
-.pelcro-root .slick-slider .slick-track,
-.pelcro-root .slick-slider .slick-list {
-  transform: translate3d(0, 0, 0);
-}
-
-.pelcro-root .slick-track {
-  position: relative;
-  top: 0;
-  left: 0;
-  display: flex;
-  align-items: stretch;
-}
-
-.pelcro-root .slick-track:before,
-.pelcro-root .slick-track:after {
-  display: table;
-  content: "";
-}
-
-.pelcro-root .slick-track:after {
-  clear: both;
-}
-
-.pelcro-root .slick-loading .slick-track {
-  visibility: hidden;
-}
-
-.pelcro-root .slick-slide {
-  display: flex !important;
-  align-self: stretch;
-  height: unset;
-  margin: 0 10px;
-}
-
-.pelcro-root .slick-slide > div {
-  display: flex;
-  align-self: stretch;
-  width: 100%;
-  height: 100%;
-}
-
-.pelcro-root .slick-slide img {
-  display: block;
-}
-
-.pelcro-root .slick-slide.slick-loading img {
-  display: none;
-}
-
-.pelcro-root .slick-slide.dragging img {
-  pointer-events: none;
-}
-
-.pelcro-root .slick-initialized .slick-slide {
-  display: block;
-}
-
-.pelcro-root .slick-loading .slick-slide {
-  visibility: hidden;
-}
-
-.pelcro-root .slick-vertical .slick-slide {
-  display: block;
-  height: auto;
-  border: 1px solid transparent;
-}
-
-.pelcro-root .slick-arrow.slick-hidden {
-  display: none;
-}
-
-.pelcro-root .slick-disabled {
-  opacity: 0;
-  cursor: auto;
-}
-
-.pelcro-root .slick-dots {
-  margin-top: 20px;
-  display: flex !important;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
-}
-
-.pelcro-root .slick-dots li {
-  padding: 2px;
-  border: solid 1px transparent;
-  border-radius: 9999999px;
-  width: 20px;
-  height: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  line-height: 1;
-}
-
-.pelcro-root .slick-dots li.slick-active {
-  border-color: grey;
-}
-
-.pelcro-root .slick-arrow {
-  outline: none !important;
-}
-
 /* 
 styling is copied from react-easy-crop/react-easy-crop.css 
 in order to scope selectors under pelcro-root
@@ -2165,10 +2009,6 @@ in order to scope selectors under pelcro-root
   margin-right: 1.5rem;
 }
 
-.pelcro-root .plc-mr-auto{
-  margin-right: auto;
-}
-
 .pelcro-root .plc-mb-1{
   margin-bottom: 0.25rem;
 }
@@ -2213,10 +2053,6 @@ in order to scope selectors under pelcro-root
   margin-left: 1rem;
 }
 
-.pelcro-root .plc-ml-auto{
-  margin-left: auto;
-}
-
 .pelcro-root .plc--ml-2{
   margin-left: -0.5rem;
 }
@@ -2461,8 +2297,8 @@ in order to scope selectors under pelcro-root
   width: max-content;
 }
 
-.pelcro-root .plc-max-w-sm{
-  max-width: 24rem;
+.pelcro-root .plc-max-w-lg{
+  max-width: 32rem;
 }
 
 .pelcro-root .plc-max-w-xl{
@@ -2633,6 +2469,14 @@ in order to scope selectors under pelcro-root
           appearance: none;
 }
 
+.pelcro-root .plc-grid-cols-1{
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
+.pelcro-root .plc-grid-cols-2{
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
 .pelcro-root .plc-flex-row-reverse{
   flex-direction: row-reverse;
 }
@@ -2685,6 +2529,10 @@ in order to scope selectors under pelcro-root
   justify-items: center;
 }
 
+.pelcro-root .plc-gap-2{
+  gap: 0.5rem;
+}
+
 .pelcro-root .plc-gap-x-3{
   column-gap: 0.75rem;
 }
@@ -2751,6 +2599,10 @@ in order to scope selectors under pelcro-root
   white-space: nowrap;
 }
 
+.pelcro-root .plc-whitespace-normal{
+  white-space: normal;
+}
+
 .pelcro-root .plc-whitespace-nowrap{
   white-space: nowrap;
 }
@@ -2831,6 +2683,10 @@ in order to scope selectors under pelcro-root
   border-bottom-width: 2px;
 }
 
+.pelcro-root .plc-border-b-4{
+  border-bottom-width: 4px;
+}
+
 .pelcro-root .plc-border-b{
   border-bottom-width: 1px;
 }
@@ -2896,6 +2752,10 @@ in order to scope selectors under pelcro-root
   border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 30%));
 }
 
+.pelcro-root .hover\:plc-border-primary:hover{
+  border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
+}
+
 .pelcro-root .plc-bg-transparent{
   background-color: transparent;
 }
@@ -3004,6 +2864,10 @@ in order to scope selectors under pelcro-root
   background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 10%));
 }
 
+.pelcro-root .hover\:plc-bg-primary:hover{
+  background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
+}
+
 .pelcro-root .hover\:plc-bg-white:hover{
   --tw-bg-opacity: 1;
   background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
@@ -3282,6 +3146,10 @@ in order to scope selectors under pelcro-root
   color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 30%));
 }
 
+.pelcro-root .plc-text-primary{
+  color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
+}
+
 .pelcro-root .plc-text-white{
   --tw-text-opacity: 1;
   color: rgba(255, 255, 255, var(--tw-text-opacity));
@@ -3380,6 +3248,10 @@ in order to scope selectors under pelcro-root
   color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
 }
 
+.pelcro-root .hover\:plc-text-primary:hover{
+  color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
+}
+
 .pelcro-root .hover\:plc-text-black:hover{
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
@@ -3418,6 +3290,10 @@ in order to scope selectors under pelcro-root
   text-decoration: none;
 }
 
+.pelcro-root .hover\:plc-no-underline:hover{
+  text-decoration: none;
+}
+
 .pelcro-root .hover\:plc-opacity-30:hover{
   opacity: 0.3;
 }
@@ -3646,6 +3522,16 @@ in order to scope selectors under pelcro-root
     padding-right: 2rem;
   }
 
+  .pelcro-root .sm\:plc-px-10{
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
+  }
+
+  .pelcro-root .sm\:plc-px-14{
+    padding-left: 3.5rem;
+    padding-right: 3.5rem;
+  }
+
   .pelcro-root .sm\:plc-pl-8{
     padding-left: 2rem;
   }

package/package.json

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