@iamproperty/components 2.7.7 → 2.9.0

package/assets/sass/components/carousel.scss

@@ -1,235 +1,235 @@
-@use "../_func" as *;
-
-// #region default carousel
-.carousel {
-  padding-bottom: 3rem;
-
-  .carousel__wrapper {
-
-    position: relative;
-  }
-
-  .carousel__inner {
-
-    --bs-gutter-x: #{$grid-gutter-width};
-    overflow: auto;
-    scroll-snap-type: x mandatory;
-    margin-right: calc(var(--bs-gutter-x) * -.5);
-    margin-left: calc(var(--bs-gutter-x) * -.5);   
-
-    > .row {
-      flex-wrap: nowrap;
-      margin: 0;
-
-      > .col {
-        padding-top: rem(36);
-        padding-bottom: rem(24);
-        scroll-snap-align: start;
-        scroll-padding: calc(var(--bs-gutter-x) * -1);
-      }
-    }
-  }
-
-  .carousel__item > *:last-child {
-    margin-bottom: 0;
-    padding-bottom: 0;
-  }
-}
-// #endregion
-
-// #region Remove the scrollbar
-body.js-enabled .carousel__inner {
-  // FireFox
-  scrollbar-width: none;
-  // IE10+
-  -ms-overflow-style: none;
-}
-
-body.js-enabled .carousel__inner::-webkit-scrollbar {
-  // Chrome, Safari, Edge
-  display: none;
-}
-// #endregion
-
-// #region carousel controls/pips
-.carousel:not(.hide-controls) {
-  padding-bottom: 4.5rem;
-}
-
-.carousel.hide-controls .carousel__controls {
-  display: none;
-}
-
-.carousel .carousel__controls {
-  position: absolute;
-  text-align: center;
-  width: auto;
-  left: 0;
-  width: calc(100% + 2rem);
-  margin-left: -1rem;
-  margin-right: -1rem;
-  bottom: -3rem;
-
-  a {
-    width: 1rem;
-    height: 1rem;
-    min-height: 1rem;
-    border-radius: 50%;
-    text-indent: -50rem;
-    overflow: hidden;
-    background: currentColor;
-    padding: 0;
-    margin: 0 0.5rem 0.5rem 0.5rem;
-
-    &:before {
-      display: none;
-    }
-  }
-
-  a:first-child:last-child {
-    display: none;
-  }
-}
-
-.carousel .carousel__controls > a:nth-child(10) ~ a {
-
-  display: none;
-}
-// #endregion
-
-// #region Carousel buttons
-.carousel.hide-btns .carousel__wrapper > .btn {
-  display: none;
-}
-
-.carousel:not(.hide-btns) .carousel__inner {
-
-  margin-left: rem(28);
-  margin-right: rem(28);
-}
-
-.carousel .carousel__wrapper > .btn {
-  position: absolute;
-  top: 50%;
-  left: -1.25rem;
-  transform: translate(0,-50%);
-
-  &.btn-next {
-    left: auto;
-    right: -1.25rem;
-  }
-
-  @include media-breakpoint-up(md) {
-
-    margin-left: -1rem;
-    margin-right: -1rem;
-  }
-}
-
-
-// #endregion
-
-.carousel .carousel__inner > .row > .col:first-child {
-  margin-left: 0!important;
-}
-
-@include media-breakpoint-up(sm) {
-
-  .carousel .carousel__controls > a:nth-child(10) ~ a {
-
-    display: inline-block;
-  }
-
-  .carousel .carousel__inner > .row[class*="row-cols-sm-"] > .col{
-    scroll-snap-align: unset;
-  }
-
-  .carousel .carousel__inner > .row-cols-sm-2 > .col:nth-child(odd),
-  .carousel .carousel__inner > .row-cols-sm-3 > .col:nth-child(3n+1),
-  .carousel .carousel__inner > .row-cols-sm-4 > .col:nth-child(4n+1),
-  .carousel .carousel__inner > .row-cols-sm-5 > .col:nth-child(5n+1),
-  .carousel .carousel__inner > .row-cols-sm-6 > .col:nth-child(6n+1) {
-    scroll-snap-align: start;
-
-    body:not(.js-enabled) & {
-      margin-left: 4rem;
-    }
-  }
-
-  .carousel .carousel__controls.cols-sm-2 > a:not(:nth-child(odd)),
-  .carousel .carousel__controls.cols-sm-3 > a:not(:nth-child(3n+1)),
-  .carousel .carousel__controls.cols-sm-4 > a:not(:nth-child(4n+1)),
-  .carousel .carousel__controls.cols-sm-5 > a:not(:nth-child(5n+1)),
-  .carousel .carousel__controls.cols-sm-6 > a:not(:nth-child(6n+1)) {
-    display: none;
-  }
-
-  // Make sure that we dont just have one pip showing
-  .carousel .carousel__controls.cols-sm-2 > a:first-child:nth-last-child(2),
-  .carousel .carousel__controls.cols-sm-3 > :is(a:first-child:nth-last-child(2), a:first-child:nth-last-child(3)),
-  .carousel .carousel__controls.cols-sm-4 > :is(a:first-child:nth-last-child(2), a:first-child:nth-last-child(3), a:first-child:nth-last-child(4)),
-  .carousel .carousel__controls.cols-sm-5 > :is(a:first-child:nth-last-child(2),a:first-child:nth-last-child(3),a:first-child:nth-last-child(4),a:first-child:nth-last-child(5)),
-  .carousel .carousel__controls.cols-sm-6 > :is(a:first-child:nth-last-child(2),a:first-child:nth-last-child(3),a:first-child:nth-last-child(4),a:first-child:nth-last-child(5),a:first-child:nth-last-child(6)) {
-    display: none;
-  }
-
-  // Hide buttons if not needed
-  .carousel.hide-sm-btns .carousel__wrapper > .btn {
-    display: none;
-  }
-
-  .carousel.hide-sm-btns .carousel__inner {
-
-    margin-left: 0;
-    margin-right: 0;
-  }
-}
-
-@include media-breakpoint-up(md) {
-
-  .carousel .carousel__inner > .row[class*="row-cols-md-"] > .col{
-    scroll-snap-align: unset;
-    margin-left: 0;
-  }
-  
-  .carousel .carousel__inner > .row-cols-md-2 > .col:nth-child(odd),
-  .carousel .carousel__inner > .row-cols-md-3 > .col:nth-child(3n+1),
-  .carousel .carousel__inner > .row-cols-md-4 > .col:nth-child(4n+1),
-  .carousel .carousel__inner > .row-cols-md-5 > .col:nth-child(5n+1),
-  .carousel .carousel__inner > .row-cols-md-6 > .col:nth-child(6n+1) {
-    scroll-snap-align: start;
-    
-    body:not(.js-enabled) & {
-
-      margin-left: calc(50vw);
-    }
-  }
-
-  .carousel .carousel__controls.cols-md-2 > a:not(:nth-child(odd)),
-  .carousel .carousel__controls.cols-md-3 > a:not(:nth-child(3n+1)),
-  .carousel .carousel__controls.cols-md-4 > a:not(:nth-child(4n+1)),
-  .carousel .carousel__controls.cols-md-5 > a:not(:nth-child(5n+1)),
-  .carousel .carousel__controls.cols-md-6 > a:not(:nth-child(6n+1)) {
-    display: none;
-  }
-
-  // Make sure that we dont just have one pip showing
-  .carousel .carousel__controls.cols-md-2 > a:first-child:nth-last-child(2),
-  .carousel .carousel__controls.cols-md-3 > :is(a:first-child:nth-last-child(2), a:first-child:nth-last-child(3)),
-  .carousel .carousel__controls.cols-md-4 > :is(a:first-child:nth-last-child(2), a:first-child:nth-last-child(3), a:first-child:nth-last-child(4)),
-  .carousel .carousel__controls.cols-md-5 > :is(a:first-child:nth-last-child(2),a:first-child:nth-last-child(3),a:first-child:nth-last-child(4),a:first-child:nth-last-child(5)),
-  .carousel .carousel__controls.cols-md-6 > :is(a:first-child:nth-last-child(2),a:first-child:nth-last-child(3),a:first-child:nth-last-child(4),a:first-child:nth-last-child(5),a:first-child:nth-last-child(6)) {
-    display: none;
-  }
-
-  // Hide buttons when not needed
-  .carousel.hide-md-btns .carousel__wrapper > .btn {
-    display: none;
-  }
-
-  .carousel.hide-md-btns .carousel__inner {
-
-    margin-left: 0;
-    margin-right: 0;
-  }
+@use "../_func" as *;
+
+// #region default carousel
+.carousel {
+  padding-bottom: 3rem;
+
+  .carousel__wrapper {
+
+    position: relative;
+  }
+
+  .carousel__inner {
+
+    --bs-gutter-x: #{$grid-gutter-width};
+    overflow: auto;
+    scroll-snap-type: x mandatory;
+    margin-right: calc(var(--bs-gutter-x) * -.5);
+    margin-left: calc(var(--bs-gutter-x) * -.5);   
+
+    > .row {
+      flex-wrap: nowrap;
+      margin: 0;
+
+      > .col {
+        padding-top: rem(36);
+        padding-bottom: rem(24);
+        scroll-snap-align: start;
+        scroll-padding: calc(var(--bs-gutter-x) * -1);
+      }
+    }
+  }
+
+  .carousel__item > *:last-child {
+    margin-bottom: 0;
+    padding-bottom: 0;
+  }
+}
+// #endregion
+
+// #region Remove the scrollbar
+body.js-enabled .carousel__inner {
+  // FireFox
+  scrollbar-width: none;
+  // IE10+
+  -ms-overflow-style: none;
+}
+
+body.js-enabled .carousel__inner::-webkit-scrollbar {
+  // Chrome, Safari, Edge
+  display: none;
+}
+// #endregion
+
+// #region carousel controls/pips
+.carousel:not(.hide-controls) {
+  padding-bottom: 4.5rem;
+}
+
+.carousel.hide-controls .carousel__controls {
+  display: none;
+}
+
+.carousel .carousel__controls {
+  position: absolute;
+  text-align: center;
+  width: auto;
+  left: 0;
+  width: calc(100% + 2rem);
+  margin-left: -1rem;
+  margin-right: -1rem;
+  bottom: -3rem;
+
+  a {
+    width: 1rem;
+    height: 1rem;
+    min-height: 1rem;
+    border-radius: 50%;
+    text-indent: -50rem;
+    overflow: hidden;
+    background: currentColor;
+    padding: 0;
+    margin: 0 0.5rem 0.5rem 0.5rem;
+
+    &:before {
+      display: none;
+    }
+  }
+
+  a:first-child:last-child {
+    display: none;
+  }
+}
+
+.carousel .carousel__controls > a:nth-child(10) ~ a {
+
+  display: none;
+}
+// #endregion
+
+// #region Carousel buttons
+.carousel.hide-btns .carousel__wrapper > .btn {
+  display: none;
+}
+
+.carousel:not(.hide-btns) .carousel__inner {
+
+  margin-left: rem(28);
+  margin-right: rem(28);
+}
+
+.carousel .carousel__wrapper > .btn {
+  position: absolute;
+  top: 50%;
+  left: -1.25rem;
+  transform: translate(0,-50%);
+
+  &.btn-next {
+    left: auto;
+    right: -1.25rem;
+  }
+
+  @include media-breakpoint-up(md) {
+
+    margin-left: -1rem;
+    margin-right: -1rem;
+  }
+}
+
+
+// #endregion
+
+.carousel .carousel__inner > .row > .col:first-child {
+  margin-left: 0!important;
+}
+
+@include media-breakpoint-up(sm) {
+
+  .carousel .carousel__controls > a:nth-child(10) ~ a {
+
+    display: inline-block;
+  }
+
+  .carousel .carousel__inner > .row[class*="row-cols-sm-"] > .col{
+    scroll-snap-align: unset;
+  }
+
+  .carousel .carousel__inner > .row-cols-sm-2 > .col:nth-child(odd),
+  .carousel .carousel__inner > .row-cols-sm-3 > .col:nth-child(3n+1),
+  .carousel .carousel__inner > .row-cols-sm-4 > .col:nth-child(4n+1),
+  .carousel .carousel__inner > .row-cols-sm-5 > .col:nth-child(5n+1),
+  .carousel .carousel__inner > .row-cols-sm-6 > .col:nth-child(6n+1) {
+    scroll-snap-align: start;
+
+    body:not(.js-enabled) & {
+      margin-left: 4rem;
+    }
+  }
+
+  .carousel .carousel__controls.cols-sm-2 > a:not(:nth-child(odd)),
+  .carousel .carousel__controls.cols-sm-3 > a:not(:nth-child(3n+1)),
+  .carousel .carousel__controls.cols-sm-4 > a:not(:nth-child(4n+1)),
+  .carousel .carousel__controls.cols-sm-5 > a:not(:nth-child(5n+1)),
+  .carousel .carousel__controls.cols-sm-6 > a:not(:nth-child(6n+1)) {
+    display: none;
+  }
+
+  // Make sure that we dont just have one pip showing
+  .carousel .carousel__controls.cols-sm-2 > a:first-child:nth-last-child(2),
+  .carousel .carousel__controls.cols-sm-3 > :is(a:first-child:nth-last-child(2), a:first-child:nth-last-child(3)),
+  .carousel .carousel__controls.cols-sm-4 > :is(a:first-child:nth-last-child(2), a:first-child:nth-last-child(3), a:first-child:nth-last-child(4)),
+  .carousel .carousel__controls.cols-sm-5 > :is(a:first-child:nth-last-child(2),a:first-child:nth-last-child(3),a:first-child:nth-last-child(4),a:first-child:nth-last-child(5)),
+  .carousel .carousel__controls.cols-sm-6 > :is(a:first-child:nth-last-child(2),a:first-child:nth-last-child(3),a:first-child:nth-last-child(4),a:first-child:nth-last-child(5),a:first-child:nth-last-child(6)) {
+    display: none;
+  }
+
+  // Hide buttons if not needed
+  .carousel.hide-sm-btns .carousel__wrapper > .btn {
+    display: none;
+  }
+
+  .carousel.hide-sm-btns .carousel__inner {
+
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
+
+@include media-breakpoint-up(md) {
+
+  .carousel .carousel__inner > .row[class*="row-cols-md-"] > .col{
+    scroll-snap-align: unset;
+    margin-left: 0;
+  }
+  
+  .carousel .carousel__inner > .row-cols-md-2 > .col:nth-child(odd),
+  .carousel .carousel__inner > .row-cols-md-3 > .col:nth-child(3n+1),
+  .carousel .carousel__inner > .row-cols-md-4 > .col:nth-child(4n+1),
+  .carousel .carousel__inner > .row-cols-md-5 > .col:nth-child(5n+1),
+  .carousel .carousel__inner > .row-cols-md-6 > .col:nth-child(6n+1) {
+    scroll-snap-align: start;
+    
+    body:not(.js-enabled) & {
+
+      margin-left: calc(50vw);
+    }
+  }
+
+  .carousel .carousel__controls.cols-md-2 > a:not(:nth-child(odd)),
+  .carousel .carousel__controls.cols-md-3 > a:not(:nth-child(3n+1)),
+  .carousel .carousel__controls.cols-md-4 > a:not(:nth-child(4n+1)),
+  .carousel .carousel__controls.cols-md-5 > a:not(:nth-child(5n+1)),
+  .carousel .carousel__controls.cols-md-6 > a:not(:nth-child(6n+1)) {
+    display: none;
+  }
+
+  // Make sure that we dont just have one pip showing
+  .carousel .carousel__controls.cols-md-2 > a:first-child:nth-last-child(2),
+  .carousel .carousel__controls.cols-md-3 > :is(a:first-child:nth-last-child(2), a:first-child:nth-last-child(3)),
+  .carousel .carousel__controls.cols-md-4 > :is(a:first-child:nth-last-child(2), a:first-child:nth-last-child(3), a:first-child:nth-last-child(4)),
+  .carousel .carousel__controls.cols-md-5 > :is(a:first-child:nth-last-child(2),a:first-child:nth-last-child(3),a:first-child:nth-last-child(4),a:first-child:nth-last-child(5)),
+  .carousel .carousel__controls.cols-md-6 > :is(a:first-child:nth-last-child(2),a:first-child:nth-last-child(3),a:first-child:nth-last-child(4),a:first-child:nth-last-child(5),a:first-child:nth-last-child(6)) {
+    display: none;
+  }
+
+  // Hide buttons when not needed
+  .carousel.hide-md-btns .carousel__wrapper > .btn {
+    display: none;
+  }
+
+  .carousel.hide-md-btns .carousel__inner {
+
+    margin-left: 0;
+    margin-right: 0;
+  }
 }