@iamproperty/components 1.0.12 → 2.1.0

package/assets/sass/components/property-searchbar.scss

@@ -0,0 +1,138 @@
+// #region Property searchbar
+.property-searchbar {
+
+  fieldset {
+    position: relative;
+
+    @include media-breakpoint-up(md) {
+      position: relative;
+      padding-right: 1.5rem;
+
+      &:after {
+        content: "";
+        position: absolute;
+        top: 0;
+        right: 0.5rem;
+        display: block;
+        height: 100%;
+        width: 1px;
+        background-color: var(--colour-muted);
+        opacity: 0.25;
+      }
+    }
+  }
+
+  .form-control__wrapper {
+    margin-bottom: 1rem;
+
+    @include media-breakpoint-up(md) {
+      margin-bottom: 0;
+    }
+  }
+
+  .form-label,
+  label {
+    font-size: rem(14);
+    text-transform: uppercase;
+  }
+
+  @include media-breakpoint-up(md) {
+
+    .row .row {
+      .form-label {
+        display: none;
+      }
+    }
+
+    .form-control,
+    .form-select {
+      padding: 0.5rem 1.5rem 0.5rem 0.5rem;
+    }
+
+    .form-select {
+      background-position: right 0.5rem center;
+    }
+  }
+
+  .input--locations {
+    padding-right: 5.5rem;
+  }
+
+  .select--miles {
+    position: absolute;
+    bottom: 0rem;
+    right: 0.5rem;
+    width: 5rem;
+
+    @include media-breakpoint-up(md) {
+      right: 1.5rem;
+    }
+
+    label {
+      display: none;
+    }
+
+    select {
+      background-color: transparent;
+      border-color: transparent;
+    }
+  }
+
+  @include media-breakpoint-up(md) {
+    .property-searchbar__btn {
+      align-items: flex-end;
+    }
+  }
+
+  button {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+
+    @include media-breakpoint-up(md) {
+      margin: 0;
+      padding-left: 3.5rem;
+      padding-right: 3.5rem;
+    }
+  }
+}
+// #endregion
+
+// #region Heror searchbar
+.property-searchbar--hero .property-searchbar {
+  padding: 1rem;
+  background-color: #fff;
+  width: 100%;
+  border-radius: rem(10);
+  -webkit-box-shadow: 0 2px 4px 0 rgb(0 0 0 / 24%);
+  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 24%);
+  position: relative;
+
+  @include media-breakpoint-up(md) {
+
+    border-radius: rem(48);
+    padding: 1.5rem 2.5rem;
+
+    .form-label,
+    label {
+      margin-bottom: 0;
+    }
+
+    .form-control,
+    .form-select {
+      margin-left: -0.5rem; // Add a negative margin too keep text inline but also allow for a padding left so that the focus state looks presentable
+      border: none;
+      padding-top: 0.25rem;
+      padding-bottom: 0.25rem;
+    }
+
+    .form-select {
+      background-position: right 0rem center;
+      padding-right: 1rem;
+    }
+
+    .property-searchbar__btn {
+      align-items: center;
+    }
+  }
+}
+// #endregion

package/assets/sass/components/snapshot.scss

@@ -0,0 +1,69 @@
+.snapshot {
+
+  > .row {
+
+    padding-bottom: 1rem;
+
+  }
+
+  > .row > .col {
+
+    margin-bottom: 1rem;
+    min-width: rem(150);
+    position: relative;
+  }
+
+  @include media-breakpoint-up(sm) {
+    > .row > .col:nth-child(8) ~ .col {
+      max-width: 25%;
+    }
+  }
+
+  @include media-breakpoint-up(md) {
+    > .row > .col:nth-child(8) ~ .col {
+      max-width: 12.5%;
+    }
+  }
+
+  &__item {
+
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 100%;
+    padding: 1rem;
+
+    &:not([class*="bg-"]){
+      border: 1px solid var(--colour-border);
+    }
+  }
+
+
+  a {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    opacity: 0;
+    z-index: 1;
+
+    &:hover + .snapshot__item {
+      opacity: 0.8;
+    }
+  }
+
+  &__title {
+    margin-bottom: 1rem;
+
+    &:after {
+      content: ":";
+    }
+  }
+
+  .stat {
+    text-decoration: none;
+    margin-bottom: 0;
+  }
+}

package/assets/sass/components/tabs.scss

@@ -0,0 +1,46 @@
+.tabs__container {
+
+  .tabs__links {
+    padding-bottom: 1.5rem;
+    overflow: hidden;
+
+    .link:not(.text-decoration-none):not(.btn) {
+      font-weight: bold;
+      font-family: var(--font-heading);
+      font-size: rem(18);
+      cursor: pointer;
+      margin: 0 0 0.5rem 0;
+      float: left;
+      clear: both;
+
+      @include media-breakpoint-up(sm) {
+        clear: none;
+        margin-bottom: 0;
+        margin-right: 2rem;
+      }
+
+      &:before {
+        width: 0;
+      }
+
+      &:hover:before,
+      &:focus:before {
+        width: 100%;
+      }
+    }
+  }
+
+  .tab {
+    display: none;
+  }
+
+  @for $i from 1 through 10 {
+    input:checked:nth-child(#{$i}) ~ .tabs__links .link:not(.text-decoration-none):not(.btn):nth-child(#{$i}):before {
+      width: 100%;
+    }
+    input:checked:nth-child(#{$i}) ~ .tabs .tab:nth-child(#{$i}){
+      display: block;
+    }
+  }
+}
+

package/assets/sass/components/testimonial.scss

@@ -0,0 +1,131 @@
+.testimonial {
+
+  --testimonial-padding: 1rem;
+  --testimonial-spacing: 1rem;
+
+  @include media-breakpoint-up(md) {
+    --testimonial-padding: 4rem;
+    --testimonial-spacing: 2rem;
+  }
+
+  // Circle
+  > div:first-child {
+
+    position: relative;
+    overflow: hidden;
+  }
+
+  .circle {
+    color: currentColor;
+    position: absolute;
+    top: -18rem;
+    right: -8rem;
+    font-size: 28rem;
+    border-width: 4px;
+  }
+
+  &__images {
+    overflow: auto;
+    scroll-snap-type: x mandatory;
+    display: flex;
+    user-select: none;
+    touch-action: pan-x;
+    height: rem(230);
+
+    @include media-breakpoint-up(sm) {
+
+      height: rem(340);
+    }
+    @include media-breakpoint-up(md) {
+
+      min-height: 100%;
+      scroll-snap-type: y mandatory;
+      flex-direction: column;
+      touch-action: pan-y;
+    }
+
+    img {
+
+      scroll-snap-align: start;
+      user-select: none;
+      pointer-events: none;
+      flex-shrink: 0;
+    }
+  }
+
+  .testimonial__controls {
+    display: none;
+  }
+
+  &.testimonial--multi .testimonial__controls {
+    display: block;
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translate(-50%, 50%);
+
+    @include media-breakpoint-up(md) {
+      left: auto;
+      bottom: auto;
+      right: 0;
+      top: 50%;
+      transform: rotate(90deg) translate(0,-120%);
+      transform-origin: center;
+    }
+  }
+
+  // Make space for the circle
+  h2 {
+    padding: 2rem var(--testimonial-padding) 0 var(--testimonial-padding);
+
+    @include media-breakpoint-up(sm) {
+      padding-top: 3rem;
+    }
+    @include media-breakpoint-up(md) {
+      padding-top: 9rem;
+    }
+  }
+
+  &__content {
+
+    --display-none: none;
+    margin: 0 var(--testimonial-padding) var(--testimonial-spacing) var(--testimonial-padding);
+    position: relative;
+
+    @include media-breakpoint-up(md) {
+      --display-none: block;
+
+      blockquote:not(.largest) {
+        position: absolute;
+        top: 0;
+      }
+    }
+  }
+
+  // Only show 1 blockquote at a time
+  @for $i from 1 through 10 {
+
+    &[data-show="#{$i}"] blockquote:not(:nth-child(#{$i})) {
+      display: var(--display-none);
+      opacity: 0;
+      user-select: none;
+      pointer-events: none;
+    }
+  }
+
+  &__after {
+
+    padding: 1rem var(--testimonial-padding) var(--testimonial-spacing) var(--testimonial-padding);
+  }
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.testimonial__images::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.testimonial__images {
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}

package/assets/sass/components/timeline.scss

@@ -0,0 +1,93 @@
+.timeline {
+
+  --breakpoint:(100% - #{rem(992)});
+  --pl: clamp(0rem, var(--breakpoint) * -1000, 4rem);
+  --line-pos: clamp(1rem, var(--breakpoint) * 1000, 50%);
+  --circle-pos: 1rem;
+  --line-length: 100%;
+  --img-order: 1;
+
+
+  position: relative;
+  padding-top: rem(4);
+  padding-left: var(--pl);
+  padding-bottom: 1rem;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: flex-start;
+
+  .timeline__container:not(.timeline--simple) & {
+
+    align-items: center;
+
+    @include media-breakpoint-up(md) {
+      --img-order: 0;
+      --circle-pos: 50%;
+      --line-length: 50%;
+    }
+  }
+
+  &:before {
+    content: " ";
+    display: block;
+    background: black;
+    width: 4px;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: var(--line-pos);
+  }
+
+  &:after {
+    content: " ";
+    display: block;
+    background: white;
+    width: 2rem;
+    height: 2rem;
+    margin-top: -1rem;
+    position: absolute;
+    top: var(--circle-pos);
+    left: var(--line-pos);
+    margin-left: calc(-1rem + 2px);
+    border: 4px solid black;
+    border-radius: 50%;
+  }
+
+  > * {
+    max-width: rem((1320 / 2) - 96);
+    order: 1;
+  }
+
+  > img {
+    max-width: min(100%, #{rem((1320 / 2) - 96)});
+    margin-bottom: 2rem;
+  }
+
+  &:nth-child(even) > img {
+    order: var(--img-order);
+  }
+
+  &:first-child {
+
+    &:before {
+      top: var(--circle-pos);
+      height: var(--line-length);
+    }
+  }
+
+  &:last-child {
+    padding-bottom: 0;
+    margin-bottom: 2rem;
+
+    &:before {
+      height: var(--line-length);
+    }
+
+    > img {
+      margin-bottom: 0;
+    }
+  }
+}

package/assets/sass/core.scss

@@ -0,0 +1,4 @@
+@charset "UTF-8";
+
+@import "_func";
+@import "_corefiles";