@iamproperty/components 1.0.13 → 2.2.0

package/assets/sass/components/card.scss

@@ -0,0 +1,168 @@
+// #region Defaul Card
+// Reset the link
+a.card {
+
+  cursor: pointer;
+  
+  &:before {
+    display: none;
+  }
+}
+
+.card {
+  --spread: #{rem(12)};
+  box-shadow: 0 2px var(--spread) 0 rgba(154,154,154,0.25);
+  min-height: 100%;
+  overflow: hidden;
+  max-width: rem(925);
+
+  &:hover,
+  &:focus {
+    --spread: #{rem(6)};
+
+    .card-body *:not(.badge) {
+      color: var(--colour-hover)!important;
+    }
+  }
+
+  &:active {
+    --spread: #{rem(3)};
+  }
+}
+
+.card-header__wrapper {
+  padding-bottom: 0;
+  padding-top: 55%;
+  position: relative;
+  overflow: hidden;
+  background: rgba(0,0,0,0.1);
+
+  > * {
+
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .card-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 101%;
+    height: 101%;
+    object-fit: cover;
+  }
+  
+  .card-header {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: space-between;
+  }
+
+  .card-logo {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: auto;
+    height: 3.5rem;
+    width: 8rem;
+    object-fit: contain;
+    object-position: right;
+  }
+}
+
+.card-body {
+
+  color: var(--colour-body);
+
+  *:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.card-footer {
+  padding-top: 0;
+}
+
+// Add a default margin bottom
+.row:not([class*="g-"]) .card {
+
+  margin-bottom: 1rem;
+}
+// #endregion
+
+// #region Simple card variant
+.card--simple {
+
+  box-shadow: none;
+  min-height: 0;
+  background: none;
+  
+  .card-header__wrapper {
+
+    @include border-radius($card-border-radius);
+    margin-bottom: 1rem;
+  }
+
+  .card-body {
+    padding-top: 0;
+  }
+  .card-body,
+  .card-footer {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+// #endregion
+
+// #region Quick link card
+.card--quick{
+  
+  .card-header,
+  .card-footer,
+  .card-body > *:not(.card-title) {
+    display: none;
+  }
+
+  .card-title {
+    margin-bottom: 0;
+    padding-left: 2em;
+    position: relative;
+
+    &:before,
+    &:after {
+
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 1.2em;
+      height: 1.2em;
+    }
+    &:before  {
+
+      left: 0.05em;
+      background: currentColor;
+      mask-image: escape-svg($accordion-button-icon);
+      mask-size: 50%;
+      mask-repeat: no-repeat;
+      mask-position: 50% 50%;
+    
+      -webkit-mask-image: escape-svg($accordion-button-icon);
+      -webkit-mask-size: 50%;
+      -webkit-mask-repeat: no-repeat;
+      -webkit-mask-position: 50% 50%;
+    }
+
+    &:after {
+      border: 2px solid currentColor;
+      border-radius: 50%;
+    }
+
+  }
+}
+// #endregion

package/assets/sass/components/cardDeck.scss

@@ -0,0 +1,107 @@
+
+// #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(--bs-gutter-y) var(--bs-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

@@ -0,0 +1,265 @@
+// #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__controls {
+
+  @include invert-colours(){
+    
+    a:not(:hover):not(:focus):not(:active):not(.active){
+
+      opacity: 0.5;
+    }
+  }
+}
+
+.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 > a:first-child:nth-last-child(2),
+  .carousel .carousel__controls.cols-sm-3 > a:first-child:nth-last-child(3),
+  .carousel .carousel__controls.cols-sm-4 > a:first-child:nth-last-child(2),
+  .carousel .carousel__controls.cols-sm-4 > a:first-child:nth-last-child(3),
+  .carousel .carousel__controls.cols-sm-4 > a:first-child:nth-last-child(4),
+  .carousel .carousel__controls.cols-sm-5 > a:first-child:nth-last-child(2),
+  .carousel .carousel__controls.cols-sm-5 > a:first-child:nth-last-child(3),
+  .carousel .carousel__controls.cols-sm-5 > a:first-child:nth-last-child(4),
+  .carousel .carousel__controls.cols-sm-5 > a:first-child:nth-last-child(5),
+  .carousel .carousel__controls.cols-sm-6 > a:first-child:nth-last-child(2),
+  .carousel .carousel__controls.cols-sm-6 > a:first-child:nth-last-child(3),
+  .carousel .carousel__controls.cols-sm-6 > a:first-child:nth-last-child(4),
+  .carousel .carousel__controls.cols-sm-6 > a:first-child:nth-last-child(5),
+  .carousel .carousel__controls.cols-sm-6 > 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 > a:first-child:nth-last-child(2),
+  .carousel .carousel__controls.cols-md-3 > a:first-child:nth-last-child(3),
+  .carousel .carousel__controls.cols-md-4 > a:first-child:nth-last-child(2),
+  .carousel .carousel__controls.cols-md-4 > a:first-child:nth-last-child(3),
+  .carousel .carousel__controls.cols-md-4 > a:first-child:nth-last-child(4),
+  .carousel .carousel__controls.cols-md-5 > a:first-child:nth-last-child(2),
+  .carousel .carousel__controls.cols-md-5 > a:first-child:nth-last-child(3),
+  .carousel .carousel__controls.cols-md-5 > a:first-child:nth-last-child(4),
+  .carousel .carousel__controls.cols-md-5 > a:first-child:nth-last-child(5),
+  .carousel .carousel__controls.cols-md-6 > a:first-child:nth-last-child(2),
+  .carousel .carousel__controls.cols-md-6 > a:first-child:nth-last-child(3),
+  .carousel .carousel__controls.cols-md-6 > a:first-child:nth-last-child(4),
+  .carousel .carousel__controls.cols-md-6 > a:first-child:nth-last-child(5),
+  .carousel .carousel__controls.cols-md-6 > 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;
+  }
+}