@solcre-org/core-ui 2.11.42 → 2.12.0

package/assets/css/inc/components/image-carousel.css

@@ -0,0 +1,236 @@
+/* ******************************************** */
+/** COMPONENT: IMAGE CAROUSEL
+/* ******************************************** */
+
+
+.c-img-carousel {
+  --_br: 10px;
+  --_controls-size: var(--controls-size,2rem);
+  --_controls-color: var(--color-neutral-100);
+  --_controls-bg-hsl: var(--color-neutral-900-hsl);
+  --_controls-bottom: 2rem;
+  --_controls-offset-x: var(--controls-offset,1rem);
+  --_nav-color-hsl: var(--color-neutral-100-hsl);
+
+  position: relative;
+}
+
+.c-img-carousel__viewport{
+    position: relative;
+    overflow: hidden;
+    border-radius: var(--_br);
+    background: var(--color-neutral-200);
+    touch-action: pan-y;
+    user-select: none;
+    -webkit-user-drag: none; 
+}
+
+.c-img-carousel[data-per-view]{
+    border-radius: 0;
+}
+
+.c-img-carousel[data-per-view] .c-img-carousel__slide{
+  padding-inline: calc(var(--items-gap)/2);
+}
+.c-img-carousel[data-per-view] .c-img-carousel__slide-inner{
+  border-radius: var(--_br);
+  overflow: hidden;
+}
+
+.c-img-carousel__holder {
+  display: flex;
+  transition: transform 350ms ease;
+  will-change: transform;
+}
+
+.c-img-carousel[data-per-view] .c-img-carousel__holder{
+    margin-inline: calc(var(--items-gap)/-2);
+}
+
+.c-img-carousel__slide {
+  position: relative;
+  flex: 0 0 calc(100% / var(--per-view, 1));
+}
+
+.c-img-carousel__slide-inner::before{
+    content: "";
+    display: block;
+    height: 0;
+    padding-bottom: 56.25%;
+}
+
+.c-img-carousel__slide-inner{
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+.c-img-carousel__slide img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.c-img-carousel__btn--prev { 
+    left: var(--_controls-offset-x); 
+}
+.c-img-carousel__btn--next {
+    right: var(--_controls-offset-x); 
+}
+
+.c-img-carousel--arrows-out .c-img-carousel__btn--prev { 
+    left: calc(var(--_controls-offset-x)*-1); 
+}
+
+.c-img-carousel--arrows-out .c-img-carousel__btn--next { 
+    right: calc(var(--_controls-offset-x)*-1); 
+}
+
+.c-img-carousel__btn {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    border: none;
+    background: hsl(var(--_controls-bg-hsl)/40%);
+    padding: calc(var(--_controls-size)/2);
+    border-radius: 50%;
+    color: var(--_controls-color);
+    font-size: var(--_controls-size);
+    cursor: pointer;
+    transition: opacity var(--trs-duration-400) ease-out, color var(--trs-duration-400) ease-out;
+    z-index: 1;
+}
+
+.c-img-carousel__btn:disabled {
+    opacity: .4;
+    transition: opacity var(--trs-duration-400) ease-out, color var(--trs-duration-400) ease-out;
+}
+
+.c-img-carousel__dots {
+  position: absolute;
+  display: flex;
+  gap: 1rem;
+  left: 50%;
+  bottom: var(--_controls-bottom);
+  transform: translateX(-50%);
+  z-index: 1;
+}
+
+.c-img-carousel__dot {
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  border: 0;
+  background: hsl(var(--_nav-color-hsl)/100%);
+  opacity: 60%;
+  cursor: pointer;
+}
+.c-img-carousel__dot[aria-current="true"] { 
+    opacity: 1;
+    pointer-events: none;
+}
+
+
+ /* ********************** MEDIA HOVER ********************** */
+ 
+ @media (hover: hover) { 
+ 
+     .c-img-carousel__dot:not([aria-current="true"]):hover{
+        background-color: var(--color-hover);
+     }
+
+     .c-img-carousel__btn{
+        transition: background-color var(--trs-duration-400) ease-out;
+     }
+
+     .c-img-carousel__btn:hover{
+        background-color: hsl(var(--color-hover-hsl)/50%);
+        transition: background-color var(--trs-duration-400) ease-out;
+     }
+ 
+ }
+
+
+
+/* ********************** SHORT MOBILE ********************** */
+
+@media (max-width: 22.4375rem) { /* 359px */
+}
+
+
+
+
+
+/* ********************** TALL MOBILE PORTRAIT ********************** */
+
+@media (max-width: 47.9375rem) and (min-height: 45.625rem) { /* 767px, 730px */
+}
+
+ 
+
+
+
+/* ********************** MOBILE LANDSCAPE ********************** */
+
+@media (orientation: landscape) and (min-width: 31.25rem) and (max-width: 47.9375rem) { /* 500px, 767px */
+}
+
+
+
+
+
+/* ********************** de Mobile a TABLET ********************** */
+
+@media (min-width: 48rem) { /* 768px */
+}
+@media (min-width: 48rem) and (orientation: portrait) {
+}
+
+
+
+
+/* ********************** de Tablet a DESKTOP ********************** */
+
+@media (min-width: 61.25rem) { /* 980px */
+}
+
+
+
+
+/* ********************** de Desktop a DESKTOP 2 ********************** */
+
+@media (min-width: 75rem) { /* 1200px */
+}
+@media (min-width: 75rem) and (min-height: 45rem) { /* 1200, 720 */
+}
+
+
+
+
+/* ********************** de Desktop 2 a HD ********************** */
+
+@media (min-width: 87.5rem) { /* 1400px */
+}
+@media (min-width: 87.5rem) and (min-height: 49.375rem) { /* 1400px, 790px */
+}
+
+
+
+
+/* ********************** de Hd a FULL HD ********************** */
+
+@media (min-width: 100rem) { /* 1600px */
+}
+
+@media (min-width: 100rem) and (min-height: 49.375rem) { /* 1600px, 790px */
+}
+@media (min-width: 100rem) and (min-height: 56.25rem) { /* 1600px, 900px */
+}
+
+@media (min-width: 112.5rem) { /* 1800px */
+}
+@media (min-width: 112.5rem) and (min-height: 56.25rem) { /* 1800px, 900px */
+}

package/assets/css/main.css

@@ -67,6 +67,7 @@
 /* ❌ */ @import url(inc/components/bottom-nav.css); /* !(test) */
 /* ⭐️ */ @import url(inc/components/calendar.css);
 /* ⭐️ */ @import url(inc/components/progressbar.css);
+/* ✅ */ @import url(inc/components/image-carousel.css); /* !(new) */
 
 
 /* Utilities */