@pelcro/react-pelcro-js 4.0.0-alpha.2 → 4.0.0-alpha.4

package/dist/pelcro.css

@@ -1693,6 +1693,114 @@ Add the correct display in Chrome and Safari.
 
 /* used by multiple input sub-components */
 
+.pelcro-root .alice-carousel {
+  padding-left: 5rem;
+  padding-right: 5rem;
+}
+
+.pelcro-root .alice-carousel__stage {
+  display: flex;
+}
+
+.pelcro-root .alice-carousel__stage-item {
+  flex: 1 0 auto;
+  height: auto;
+}
+
+.pelcro-root .alice-carousel__next-btn,
+.pelcro-root .alice-carousel__prev-btn {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: auto;
+}
+
+.pelcro-root .alice-carousel__next-btn {
+  right: 0;
+}
+
+.pelcro-root .alice-carousel__prev-btn {
+  left: 0;
+}
+
+.pelcro-root .alice-carousel__next-btn-item span,
+.pelcro-root .alice-carousel__prev-btn-item span {
+  width: 3.5rem;
+  height: 3.5rem;
+  border-radius: 999999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background-color: black;
+  color: white;
+}
+
+.pelcro-root .alice-carousel__next-btn-item span {
+  padding-left: 5px;
+}
+
+.pelcro-root .alice-carousel__prev-btn-item span {
+  padding-right: 5px;
+}
+
+.pelcro-root .alice-carousel__next-btn-item [data-area]::after,
+.pelcro-root .alice-carousel__prev-btn-item [data-area]::after {
+  height: 28px;
+  width: 28px;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pelcro-root .alice-carousel__stage-item {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.pelcro-root .alice-carousel__dots {
+  margin-top: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pelcro-root .alice-carousel__dots-item {
+  width: 0.75rem;
+  height: 0.75rem;
+  background-color: #d1d5db;
+}
+
+.pelcro-root
+  .alice-carousel__dots-item:not(.__custom):not(:last-child) {
+  margin-right: 0.5rem;
+}
+
+.pelcro-root .alice-carousel__dots-item:not(.__custom):hover,
+.alice-carousel__dots-item:not(.__custom).__active {
+  background-color: black;
+}
+
+.pelcro-root .alice-carousel__next-btn-item [data-area]::after {
+  content: url("/assets/arrow-thin-right.svg");
+}
+
+.pelcro-root .alice-carousel__prev-btn-item [data-area]::after {
+  content: url("/assets/arrow-thin-left.svg");
+}
+
+@media (max-width: 1024px) {
+  .pelcro-root .alice-carousel__prev-btn,
+  .pelcro-root .alice-carousel__next-btn {
+    display: none;
+  }
+
+  .pelcro-root .alice-carousel {
+    padding-right: 0;
+    padding-left: 0;
+  }
+}
+
 /* 
 styling is copied from react-easy-crop/react-easy-crop.css 
 in order to scope selectors under pelcro-root

package/package.json

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