@iamproperty/components 3.1.0 → 3.4.4

package/assets/sass/components/tabs.scss

@@ -1,87 +1,87 @@
-@use "../_func" as *;
-
-.tabs__container {
-
-  position: relative;
-
-  .tab__input {
-    position: absolute;
-    top: 0;
-    left: 0;
-    opacity: 0;
-  }
-
-  > .tabs__links {
-    margin-bottom: 1.5rem;
-    overflow: hidden;
-
-    .link:not(.text-decoration-none):not(.btn) {
-      --is-current: 0;
-      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;
-        width: calc(var(--is-current) * 100%);
-      }
-
-      &:hover:before,
-      &:focus:before {
-        width: 100%;
-      }
-    }
-  }
-
-  .tab {
-    display: none;
-  }
-
-  input:focus-visible ~ .tabs__links {
-    outline: blue outset 1px;
-  }
-
-  @for $i from 1 through 10 {
-    input:checked:nth-child(#{$i}) ~ .tabs__links .link:not(.text-decoration-none):not(.btn):nth-child(#{$i}) {
-      
-      --is-current: 1;
-      --panel-tab-colour: white;
-      --panel-tab-border: var(--colour-secondary)
-    }
-    input:checked:nth-child(#{$i}) ~ .tabs > .tab:nth-child(#{$i}){
-      display: block;
-      display: contents;
-    }
-  }
-}
-
-// #region admin panel
-.admin-panel > .tabs__container:first-child {
-
-  display: contents;
-
-  > .tabs {
-    display: contents;
-  }
-
-  > .tabs__links {
-
-    padding-bottom: 0;
-
-    .link:not(.text-decoration-none):not(.btn) {
-
-      margin-bottom: 0;
-    }
-  }
-}
-// #endregion
+@use "../_func" as *;
+
+.tabs__container {
+
+  position: relative;
+
+  .tab__input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+  }
+
+  > .tabs__links {
+    margin-bottom: 1.5rem;
+    overflow: hidden;
+
+    .link:not(.text-decoration-none):not(.btn) {
+      --is-current: 0;
+      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;
+        width: calc(var(--is-current) * 100%);
+      }
+
+      &:hover:before,
+      &:focus:before {
+        width: 100%;
+      }
+    }
+  }
+
+  .tab {
+    display: none;
+  }
+
+  input:focus-visible ~ .tabs__links {
+    outline: blue outset 1px;
+  }
+
+  @for $i from 1 through 10 {
+    input:checked:nth-child(#{$i}) ~ .tabs__links .link:not(.text-decoration-none):not(.btn):nth-child(#{$i}) {
+      
+      --is-current: 1;
+      --panel-tab-colour: white;
+      --panel-tab-border: var(--colour-secondary)
+    }
+    input:checked:nth-child(#{$i}) ~ .tabs > .tab:nth-child(#{$i}){
+      display: block;
+      display: contents;
+    }
+  }
+}
+
+// #region admin panel
+.admin-panel > .tabs__container:first-child {
+
+  display: contents;
+
+  > .tabs {
+    display: contents;
+  }
+
+  > .tabs__links {
+
+    padding-bottom: 0;
+
+    .link:not(.text-decoration-none):not(.btn) {
+
+      margin-bottom: 0;
+    }
+  }
+}
+// #endregion

package/assets/sass/components/testimonial.scss

@@ -1,133 +1,133 @@
-@use "../_func" as *;
-
-.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 */
+@use "../_func" as *;
+
+.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

@@ -1,96 +1,96 @@
-@use "sass:math";
-@use "../_func" as *;
-
-.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(math.div(1320,2) - 96);
-    order: 1;
-  }
-
-  > img {
-    max-width: min(100%, #{rem(math.div(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;
-    }
-  }
+@use "sass:math";
+@use "../_func" as *;
+
+.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(math.div(1320,2) - 96);
+    order: 1;
+  }
+
+  > img {
+    max-width: min(100%, #{rem(math.div(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;
+    }
+  }
 }