@iamproperty/components 7.6.0 → 7.6.2

package/assets/sass/utilities/margins.scss

@@ -0,0 +1,75 @@
+@layer utilities {
+  @for $key from 0 through 5 {
+    $value: var(--spacer-#{$key});
+
+    .m-#{$key} {
+      margin: #{$value} !important;
+    }
+
+    .mx-#{$key} {
+      margin-left: #{$value} !important;
+      margin-right: #{$value} !important;
+    }
+
+    .mx-minus-#{$key} {
+      margin-left: -#{$value} !important;
+      margin-right: -#{$value} !important;
+    }
+
+    .my-minus-#{$key} {
+      margin-top: -#{$value} !important;
+      margin-bottom: -#{$value} !important;
+    }
+
+    .my-#{$key} {
+      margin-top: #{$value} !important;
+      margin-bottom: #{$value} !important;
+    }
+
+    .mt-#{$key} {
+      margin-top: #{$value} !important;
+    }
+
+    .me-#{$key} {
+      margin-right: #{$value} !important;
+    }
+
+    .mb-#{$key} {
+      margin-bottom: #{$value} !important;
+    }
+
+    .ms-#{$key} {
+      margin-left: #{$value} !important;
+    }
+  }
+
+  .m-auto {
+    margin: auto !important;
+  }
+
+  .mx-auto {
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
+
+  .my-auto {
+    margin-top: auto !important;
+    margin-bottom: auto !important;
+  }
+
+  .mt-auto {
+    margin-top: auto !important;
+  }
+
+  .me-auto {
+    margin-right: auto !important;
+  }
+
+  .mb-auto {
+    margin-bottom: auto !important;
+  }
+
+  .ms-auto {
+    margin-left: auto !important;
+  }
+}

package/assets/sass/utilities/max-height.scss

@@ -0,0 +1,94 @@
+@use '../func' as *;
+
+@layer utilities {
+  :is(.mh-sm, .mh-md, .mh-lg, .mh-sm-sm, .mh-sm-md, .mh-sm-lg, .mh-md-sm, .mh-md-md, .mh-md-lg, .mh-fluid) {
+    &:not(iam-table):not(.table__wrapper) {
+      padding-inline: var(--mh-padding-inline, 0);
+      margin-inline: calc(var(--mh-padding-inline, 0) * -1);
+    }
+
+    &::before {
+      top: calc(100% - 1.5rem);
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 1.5rem;
+      position: sticky;
+      display: block;
+      background: linear-gradient(180deg, transparent 0%, var(--colour-canvas-2) 100%);
+      z-index: 2;
+      margin-bottom: -1.5rem;
+    }
+  }
+
+  :is(.mh-sm, .mh-md, .mh-lg, .mh-fluid) {
+    overflow: auto;
+    overscroll-behavior: contain;
+
+    &::before {
+      content: '';
+    }
+  }
+
+  .mh-sm {
+    max-height: calc(var(--max-height-sm) - var(--mh-modifier, 0rem));
+  }
+
+  .mh-md {
+    max-height: calc(var(--max-height-md) - var(--mh-modifier, 0rem));
+  }
+
+  .mh-lg {
+    max-height: calc(var(--max-height-lg) - var(--mh-modifier, 0rem));
+  }
+
+  .mh-fluid {
+    max-height: 100%;
+  }
+
+  @media screen and (min-width: 36em) {
+    :is(.mh-sm-sm, .mh-sm-md, .mh-sm-lg) {
+      overflow: auto;
+      overscroll-behavior: contain;
+
+      &::before {
+        content: '';
+      }
+    }
+
+    .mh-sm-sm {
+      max-height: calc(var(--max-height-sm) - var(--mh-modifier, 0rem));
+    }
+
+    .mh-sm-md {
+      max-height: calc(var(--max-height-md) - var(--mh-modifier, 0rem));
+    }
+
+    .mh-sm-lg {
+      max-height: calc(var(--max-height-lg) - var(--mh-modifier, 0rem));
+    }
+  }
+
+  @media screen and (min-width: 62em) {
+    :is(.mh-md-sm, .mh-md-md, .mh-md-lg) {
+      overflow: auto;
+      overscroll-behavior: contain;
+
+      &::before {
+        content: '';
+      }
+    }
+
+    .mh-md-sm {
+      max-height: calc(var(--max-height-sm) - var(--mh-modifier, 0rem));
+    }
+
+    .mh-md-md {
+      max-height: calc(var(--max-height-md) - var(--mh-modifier, 0rem));
+    }
+
+    .mh-md-lg {
+      max-height: calc(var(--max-height-lg) - var(--mh-modifier, 0rem));
+    }
+  }
+}

package/assets/sass/utilities/opacity.scss

@@ -0,0 +1,21 @@
+@layer utilities {
+  .opacity-0 {
+    opacity: 0 !important;
+  }
+
+  .opacity-25 {
+    opacity: 0.25 !important;
+  }
+
+  .opacity-50 {
+    opacity: 0.5 !important;
+  }
+
+  .opacity-75 {
+    opacity: 0.75 !important;
+  }
+
+  .opacity-100 {
+    opacity: 1 !important;
+  }
+}

package/assets/sass/utilities/order.scss

@@ -0,0 +1,43 @@
+@layer utilities {
+  
+  $breakpoints: (
+    sm: 36em,
+    md: 62em,
+  );
+  @each $breakpoint,$width in $breakpoints {
+    @media screen and (min-width: $width) {
+
+      .order-#{$breakpoint}-first {
+        order: -1 !important;
+      }
+
+      .order-#{$breakpoint}-0 {
+        order: 0 !important;
+      }
+
+      .order-#{$breakpoint}-1 {
+        order: 1 !important;
+      }
+
+      .order-#{$breakpoint}-2 {
+        order: 2 !important;
+      }
+
+      .order-#{$breakpoint}-3 {
+        order: 3 !important;
+      }
+
+      .order-#{$breakpoint}-4 {
+        order: 4 !important;
+      }
+
+      .order-#{$breakpoint}-5 {
+        order: 5 !important;
+      }
+
+      .order-#{$breakpoint}-last {
+        order: 6 !important;
+      }
+    }
+  }
+}

package/assets/sass/utilities/overflow.scss

@@ -0,0 +1,17 @@
+@layer utilities {
+  .overflow-auto {
+    overflow: auto !important;
+  }
+
+  .overflow-hidden {
+    overflow: hidden !important;
+  }
+
+  .overflow-visible {
+    overflow: visible !important;
+  }
+
+  .overflow-scroll {
+    overflow: scroll !important;
+  }
+}

package/assets/sass/utilities/paddings.scss

@@ -0,0 +1,34 @@
+@layer utilities {
+  @for $key from 0 through 5 {
+    $value: var(--spacer-#{$key});
+    .p-#{$key} {
+      padding: #{$value} !important;
+    }
+
+    .px-#{$key} {
+      padding-left: #{$value} !important;
+      padding-right: #{$value} !important;
+    }
+
+    .py-#{$key} {
+      padding-top: #{$value} !important;
+      padding-bottom: #{$value} !important;
+    }
+
+    .pt-#{$key} {
+      padding-top: #{$value} !important;
+    }
+
+    .pe-#{$key} {
+      padding-right: #{$value} !important;
+    }
+
+    .pb-#{$key} {
+      padding-bottom: #{$value} !important;
+    }
+
+    .ps-#{$key} {
+      padding-left: #{$value} !important;
+    }
+  }
+}

package/assets/sass/utilities/pointer-events.scss

@@ -0,0 +1,9 @@
+@layer utilities {
+  .pe-none {
+    pointer-events: none !important;
+  }
+
+  .pe-auto {
+    pointer-events: auto !important;
+  }
+}

package/assets/sass/utilities/position.scss

@@ -0,0 +1,90 @@
+@layer utilities {
+  $breakpoints: (
+    sm: 36em,
+    md: 62em,
+  );
+  @each $breakpoint,$width in $breakpoints {
+    @media screen and (min-width: $width) {
+
+      .position-#{$breakpoint}-static {
+        position: static !important;
+      }
+
+      .position-#{$breakpoint}-relative {
+        position: relative !important;
+      }
+
+      .position-#{$breakpoint}-absolute {
+        position: absolute !important;
+      }
+
+      .position-#{$breakpoint}-fixed {
+        position: fixed !important;
+      }
+
+      .position-#{$breakpoint}-sticky {
+        position: sticky !important;
+      }
+
+      .top-#{$breakpoint}-0 {
+        top: 0 !important;
+      }
+
+      .top-#{$breakpoint}-50 {
+        top: 50% !important;
+      }
+
+      .top-#{$breakpoint}-100 {
+        top: 100% !important;
+      }
+
+      .bottom-#{$breakpoint}-0 {
+        bottom: 0 !important;
+      }
+
+      .bottom-#{$breakpoint}-50 {
+        bottom: 50% !important;
+      }
+
+      .bottom-#{$breakpoint}-100 {
+        bottom: 100% !important;
+      }
+
+      .start-#{$breakpoint}-0 {
+        left: 0 !important;
+      }
+
+      .start-#{$breakpoint}-50 {
+        left: 50% !important;
+      }
+
+      .start-#{$breakpoint}-100 {
+        left: 100% !important;
+      }
+
+      .end-#{$breakpoint}-0 {
+        right: 0 !important;
+      }
+
+      .end-#{$breakpoint}-50 {
+        right: 50% !important;
+      }
+
+      .end-#{$breakpoint}-100 {
+        right: 100% !important;
+      }
+
+      .translate-#{$breakpoint}-middle {
+        transform: translate(-50%, -50%) !important;
+      }
+
+      .translate-#{$breakpoint}-middle-x {
+        transform: translateX(-50%) !important;
+      }
+
+      .translate-#{$breakpoint}-middle-y {
+        transform: translateY(-50%) !important;
+      }
+    }
+  }
+}

package/assets/sass/utilities/ratio.scss

@@ -0,0 +1,33 @@
+@layer utilities {
+  .ratio {
+    position: relative;
+    width: 100%;
+
+    &::before {
+      display: block;
+      padding-top: var(--aspect-ratio);
+      content: '';
+    }
+
+    > * {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .ratio-1x1 {
+    --aspect-ratio: 100%;
+  }
+  .ratio-4x3 {
+    --aspect-ratio: calc(3 / 4 * 100%);
+  }
+  .ratio-16x9 {
+    --aspect-ratio: calc(9 / 16 * 100%);
+  }
+  .ratio-21x9 {
+    --aspect-ratio: calc(9 / 21 * 100%);
+  }
+}

package/assets/sass/utilities/rounded.scss

@@ -0,0 +1,57 @@
+@layer utilities {
+  .rounded {
+    border-radius: var(--border-radius) !important;
+  }
+
+  .rounded-0 {
+    border-radius: 0 !important;
+  }
+
+  .rounded-1 {
+    border-radius: var(--border-radius-sm) !important;
+  }
+
+  .rounded-2 {
+    border-radius: var(--border-radius) !important;
+  }
+
+  .rounded-3 {
+    border-radius: var(--border-radius-lg) !important;
+  }
+
+  .rounded-4 {
+    border-radius: var(--border-radius-xl) !important;
+  }
+
+  .rounded-5 {
+    border-radius: var(--border-radius-2xl) !important;
+  }
+
+  .rounded-circle {
+    border-radius: 50% !important;
+  }
+
+  .rounded-pill {
+    border-radius: var(--border-radius-pill) !important;
+  }
+
+  .rounded-top {
+    border-top-left-radius: var(--border-radius) !important;
+    border-top-right-radius: var(--border-radius) !important;
+  }
+
+  .rounded-end {
+    border-top-right-radius: var(--border-radius) !important;
+    border-bottom-right-radius: var(--border-radius) !important;
+  }
+
+  .rounded-bottom {
+    border-bottom-right-radius: var(--border-radius) !important;
+    border-bottom-left-radius: var(--border-radius) !important;
+  }
+
+  .rounded-start {
+    border-bottom-left-radius: var(--border-radius) !important;
+    border-top-left-radius: var(--border-radius) !important;
+  }
+}

package/assets/sass/utilities/sizes.scss

@@ -0,0 +1,89 @@
+@layer utilities {
+  .w-25 {
+    width: 25% !important;
+  }
+
+  .w-50 {
+    width: 50% !important;
+  }
+
+  .w-75 {
+    width: 75% !important;
+  }
+
+  .w-100 {
+    width: 100% !important;
+  }
+
+  .w-auto {
+    width: auto !important;
+  }
+
+  .mw-100 {
+    max-width: 100% !important;
+  }
+
+  .mw-fit-content {
+    max-width: fit-content !important;
+  }
+
+  .mw-content {
+    max-width: var(--content-max-width) !important;
+  }
+
+  .vw-100 {
+    width: 100vw !important;
+  }
+
+  .min-vw-100 {
+    min-width: 100vw !important;
+  }
+
+  .h-25 {
+    height: 25% !important;
+  }
+
+  .h-50 {
+    height: 50% !important;
+  }
+
+  .h-75 {
+    height: 75% !important;
+  }
+
+  .h-100 {
+    height: 100% !important;
+  }
+
+  .h-auto {
+    height: auto !important;
+  }
+
+  .mh-100 {
+    max-height: 100% !important;
+  }
+
+  .vh-100 {
+    height: 100vh !important;
+  }
+
+  .min-vh-100 {
+    min-height: 100vh !important;
+  }
+
+  .min-100 {
+    min-width: 100% !important;
+  }
+
+  .min-fit-content {
+    min-width: fit-content !important;
+  }
+
+  .object-cover {
+    object-fit: cover !important;
+  }
+
+  .object-contain {
+    object-fit: contain !important;
+  }
+}

package/assets/sass/utilities/sticky.scss

@@ -0,0 +1,39 @@
+@layer utilities {
+  .sticky-top {
+    position: sticky;
+    top: 0;
+    z-index: var(--index-floating);
+  }
+  .sticky-bottom {
+    position: sticky;
+    bottom: 0;
+    z-index: var(--index-floating);
+  }
+
+  @media screen and (min-width: 36em) {
+
+    .sticky-sm-top {
+      position: sticky;
+      top: 0;
+      z-index: var(--index-floating);
+    }
+    .sticky-sm-bottom {
+      position: sticky;
+      bottom: 0;
+      z-index: var(--index-floating);
+    }
+  }
+  @media screen and (min-width: 62em) {
+
+    .sticky-md-top {
+      position: sticky;
+      top: 0;
+      z-index: var(--index-floating);
+    }
+    .sticky-md-bottom {
+      position: sticky;
+      bottom: 0;
+      z-index: var(--index-floating);
+    }
+  }
+}

package/assets/sass/utilities/text-truncate.scss

@@ -0,0 +1,7 @@
+@layer utilities {
+  .text-truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}