@iamproperty/components 3.1.0 → 3.2.0

package/assets/sass/components/cardDeck.scss

@@ -1,108 +1,108 @@
-@use "../_func" as *;
-
-// #region Card Deck
-.card-deck.container:not([data-card-type="simple"]) {
-
-  padding-bottom: 3rem;
-
-  > .row:first-child {
-    padding-top: 0.5rem;
-  }
-
-  &[class*="bg-"] {
-    padding-bottom: 5rem;
-  }
-}
-// #endregion
-
-// #region Fake container query that transforms the card into a vertical card
-@mixin vertical-card(){
-  .card-header__wrapper {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 45.8%;
-    height: 100%;
-    padding: 0;
-  }
-  .card-header__wrapper ~ .card-body,
-  .card-header__wrapper ~ .card-footer {
-    padding-left: calc(45.8% + #{$card-spacer-x + $card-spacer-x});
-  }
-}
-
-@media screen and (min-width: 36em) and (max-width: 61.99em) {
-
-  .card-deck .row-cols-sm-1 {
-    @include vertical-card();
-  }
-}
-
-@include media-breakpoint-up(md) {
-
-  .card-deck:not(.card-deck--featured) .row-cols-md-1 {
-    
-    @include vertical-card();
-  }
-}
-// #endregion
-
-// #region Featured Card deck
-.card-deck--featured {
-
-  > .row > .col:nth-child(4) ~ .col {
-    display: none;
-  }
-
-  > .row > .col:not(:first-child) .card-header__wrapper {
-    display: none;
-  }
-
-  .row-cols-sm-1 > .col:not(:first-child) .card-header__wrapper ~ .card-body {
-    padding-left: 1.5rem;
-  }
-
-  .card-footer {
-    display: none;
-  }
-
-  @include media-breakpoint-up(md) {
-
-    > .row {
-      display: grid;
-      grid-template-columns: 1fr 1fr 41.66666667%; 
-      grid-template-rows: auto auto auto; 
-      gap: var(--gutter-y) var(--gutter-x); 
-      grid-template-areas: 
-        "featured featured card2"
-        "featured featured card3"
-        "featured featured card4";
-      margin-top:0;
-    }
-    > .row > .col:first-child {
-      grid-area: featured;
-    }
-    > .row > .col:not(:first-child) {
-      min-height: 0;
-    }
-
-    > .row > .col:nth-child(2) {
-      grid-area: card2;
-    }
-
-    > .row > .col:nth-child(3) {
-      grid-area: card3;
-    }
-
-    > .row > .col:nth-child(4) {
-      grid-area: card4;
-    }
-
-    > .row > .col {
-      width: 100%;
-      margin-top:0;
-    }
-
-  }
-}
+@use "../_func" as *;
+
+// #region Card Deck
+.card-deck.container:not([data-card-type="simple"]) {
+
+  padding-bottom: 3rem;
+
+  > .row:first-child {
+    padding-top: 0.5rem;
+  }
+
+  &[class*="bg-"] {
+    padding-bottom: 5rem;
+  }
+}
+// #endregion
+
+// #region Fake container query that transforms the card into a vertical card
+@mixin vertical-card(){
+  .card-header__wrapper {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 45.8%;
+    height: 100%;
+    padding: 0;
+  }
+  .card-header__wrapper ~ .card-body,
+  .card-header__wrapper ~ .card-footer {
+    padding-left: calc(45.8% + #{$card-spacer-x + $card-spacer-x});
+  }
+}
+
+@media screen and (min-width: 36em) and (max-width: 61.99em) {
+
+  .card-deck .row-cols-sm-1 {
+    @include vertical-card();
+  }
+}
+
+@include media-breakpoint-up(md) {
+
+  .card-deck:not(.card-deck--featured) .row-cols-md-1 {
+    
+    @include vertical-card();
+  }
+}
+// #endregion
+
+// #region Featured Card deck
+.card-deck--featured {
+
+  > .row > .col:nth-child(4) ~ .col {
+    display: none;
+  }
+
+  > .row > .col:not(:first-child) .card-header__wrapper {
+    display: none;
+  }
+
+  .row-cols-sm-1 > .col:not(:first-child) .card-header__wrapper ~ .card-body {
+    padding-left: 1.5rem;
+  }
+
+  .card-footer {
+    display: none;
+  }
+
+  @include media-breakpoint-up(md) {
+
+    > .row {
+      display: grid;
+      grid-template-columns: 1fr 1fr 41.66666667%; 
+      grid-template-rows: auto auto auto; 
+      gap: var(--gutter-y) var(--gutter-x); 
+      grid-template-areas: 
+        "featured featured card2"
+        "featured featured card3"
+        "featured featured card4";
+      margin-top:0;
+    }
+    > .row > .col:first-child {
+      grid-area: featured;
+    }
+    > .row > .col:not(:first-child) {
+      min-height: 0;
+    }
+
+    > .row > .col:nth-child(2) {
+      grid-area: card2;
+    }
+
+    > .row > .col:nth-child(3) {
+      grid-area: card3;
+    }
+
+    > .row > .col:nth-child(4) {
+      grid-area: card4;
+    }
+
+    > .row > .col {
+      width: 100%;
+      margin-top:0;
+    }
+
+  }
+}
 // #endregion

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 {
-
-    --gutter-x: #{$grid-gutter-width};
-    overflow: auto;
-    scroll-snap-type: x mandatory;
-    margin-right: calc(var(--gutter-x) * -.5);
-    margin-left: calc(var(--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(--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!important;
-}
-
-.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 {
+
+    --gutter-x: #{$grid-gutter-width};
+    overflow: auto;
+    scroll-snap-type: x mandatory;
+    margin-right: calc(var(--gutter-x) * -.5);
+    margin-left: calc(var(--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(--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!important;
+}
+
+.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;
+  }
 }