@iamproperty/components 7.7.1--beta6 → 7.7.1--beta7

package/assets/sass/components/tag.component.scss

@@ -1,59 +1,59 @@
-@use '../_func' as *;
-@use '../elements/forms';
-@use '../elements/admin-panel' as *;
-@use '../elements/dropdown' as *;
-@use '../utilities/visually-hidden' as *;
-@use '../utilities/display' as *;
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-@layer components {
-  .wrapper {
-
-    position: relative;
-    display: inline-block;
-    margin-bottom: 1rem;
-
-    input {
-      position: absolute;
-      min-height: unset;
-      top: 50%;
-      left: 0;
-      transform: translate(0,-50%);
-      z-index: -99;
-      opacity: 0;
-    }
-  }
-
-  ::slotted(*) {
-    margin-bottom: 0!important;
-  }
-
-
-  input:focus {
-  
-    opacity: 1;
-    z-index: 99;
-  }
-
-  .wrapper:is(:focus-within) .dropdown {
-    display: var(--display-panel, none);
-  }
-
-  @media (hover: hover) {
-    .wrapper .dropdown:hover {
-      display: var(--display-panel, none);
-    }
-  }
-
-  @media (hover: none) {
-    :host(.hover) .wrapper .dropdown {
-      display: block;
-    }
-  }
-
-}
+@use '../_func' as *;
+@use '../elements/forms';
+@use '../elements/admin-panel' as *;
+@use '../elements/dropdown' as *;
+@use '../utilities/visually-hidden' as *;
+@use '../utilities/display' as *;
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+@layer components {
+  .wrapper {
+
+    position: relative;
+    display: inline-block;
+    margin-bottom: 1rem;
+
+    input {
+      position: absolute;
+      min-height: unset;
+      top: 50%;
+      left: 0;
+      transform: translate(0,-50%);
+      z-index: -99;
+      opacity: 0;
+    }
+  }
+
+  ::slotted(*) {
+    margin-bottom: 0!important;
+  }
+
+
+  input:focus {
+  
+    opacity: 1;
+    z-index: 99;
+  }
+
+  .wrapper:is(:focus-within) .dropdown {
+    display: var(--display-panel, none);
+  }
+
+  @media (hover: hover) {
+    .wrapper .dropdown:hover {
+      display: var(--display-panel, none);
+    }
+  }
+
+  @media (hover: none) {
+    :host(.hover) .wrapper .dropdown {
+      display: block;
+    }
+  }
+
+}

package/assets/sass/components/tag.preload.scss

@@ -1,20 +1,20 @@
-@use '../_func' as *;
-
-
-@layer components {
-  
-  iam-tag:has(label:not([slot='checked']):not([slot='notmatched'])) {
-    --display-panel: block;
-  }
-
-  iam-tag:has(label[slot='checked']) {
-    --display-button: block;
-  }
-
-  @container style(--theme: dark) {
-    iam-tag :is(.tag, .badge):not([slot='checked']) {
-      color: var(--colour-heading);
-    }
-  }
-
-}
+@use '../_func' as *;
+
+
+@layer components {
+  
+  iam-tag:has(label:not([slot='checked']):not([slot='notmatched'])) {
+    --display-panel: block;
+  }
+
+  iam-tag:has(label[slot='checked']) {
+    --display-button: block;
+  }
+
+  @container style(--theme: dark) {
+    iam-tag :is(.tag, .badge):not([slot='checked']) {
+      color: var(--colour-heading);
+    }
+  }
+
+}

package/assets/sass/components/testimonial.scss

@@ -1,125 +1,125 @@
-@use '../_func' as *;
-
-.testimonial {
-  --testimonial-padding: 1rem;
-  --testimonial-spacing: 1rem;
-
-  @media screen and (min-width: 62em) {
-    --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: 14.375rem; /* 230 */ 
-
-    @media screen and (min-width: 36em) {
-      height: 21.25rem; /* 340 */ 
-    }
-    @media screen and (min-width: 62em) {
-      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%);
-
-    @media screen and (min-width: 62em) {
-      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);
-
-    @media screen and (min-width: 36em) {
-      padding-top: 3rem;
-    }
-    @media screen and (min-width: 62em) {
-      padding-top: 9rem;
-    }
-  }
-
-  &__content {
-    --display-none: none;
-    margin: 0 var(--testimonial-padding) var(--testimonial-spacing) var(--testimonial-padding);
-    position: relative;
-
-    @media screen and (min-width: 62em) {
-      --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;
+
+  @media screen and (min-width: 62em) {
+    --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: 14.375rem; /* 230 */ 
+
+    @media screen and (min-width: 36em) {
+      height: 21.25rem; /* 340 */ 
+    }
+    @media screen and (min-width: 62em) {
+      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%);
+
+    @media screen and (min-width: 62em) {
+      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);
+
+    @media screen and (min-width: 36em) {
+      padding-top: 3rem;
+    }
+    @media screen and (min-width: 62em) {
+      padding-top: 9rem;
+    }
+  }
+
+  &__content {
+    --display-none: none;
+    margin: 0 var(--testimonial-padding) var(--testimonial-spacing) var(--testimonial-padding);
+    position: relative;
+
+    @media screen and (min-width: 62em) {
+      --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,92 +1,92 @@
-@use 'sass:math';
-@use '../_func' as *;
-
-.timeline {
-  --breakpoint: (100% - 62rem);
-  --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: 0.25rem;
-  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;
-
-    @media screen and (min-width: 62em) {
-      --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: 28.75rem; /* (1112/2) - 96 */
-    order: 1;
-  }
-
-  > img {
-    max-width: min(100%, 28.75rem);
-    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% - 62rem);
+  --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: 0.25rem;
+  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;
+
+    @media screen and (min-width: 62em) {
+      --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: 28.75rem; /* (1112/2) - 96 */
+    order: 1;
+  }
+
+  > img {
+    max-width: min(100%, 28.75rem);
+    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;
+    }
+  }
+}