@iamproperty/components 7.6.1 → 7.6.2

package/assets/sass/utilities/border.scss

@@ -0,0 +1,81 @@
+@layer utilities {
+  .border {
+    border: var(--border-width) var(--border-style) var(--border-color) !important;
+  }
+
+  .border-0 {
+    border: 0 !important;
+  }
+
+  .border-top {
+    border-top: var(--border-width) var(--border-style) var(--border-color) !important;
+  }
+
+  .border-top-0 {
+    border-top: 0 !important;
+  }
+
+  .border-end {
+    border-right: var(--border-width) var(--border-style) var(--border-color) !important;
+  }
+
+  .border-end-0 {
+    border-right: 0 !important;
+  }
+
+  .border-bottom {
+    border-bottom: var(--border-width) var(--border-style) var(--border-color) !important;
+  }
+
+  .border-bottom-0 {
+    border-bottom: 0 !important;
+  }
+
+  .border-start {
+    border-left: var(--border-width) var(--border-style) var(--border-color) !important;
+  }
+
+  .border-start-0 {
+    border-left: 0 !important;
+  }
+
+  .border-1 {
+    --border-width: 1px;
+  }
+
+  .border-2 {
+    --border-width: 2px;
+  }
+
+  .border-3 {
+    --border-width: 3px;
+  }
+
+  .border-4 {
+    --border-width: 4px;
+  }
+
+  .border-5 {
+    --border-width: 5px;
+  }
+
+  .border-opacity-10 {
+    --border-opacity: 0.1;
+  }
+
+  .border-opacity-25 {
+    --border-opacity: 0.25;
+  }
+
+  .border-opacity-50 {
+    --border-opacity: 0.5;
+  }
+
+  .border-opacity-75 {
+    --border-opacity: 0.75;
+  }
+
+  .border-opacity-100 {
+    --border-opacity: 1;
+  }
+}

package/assets/sass/utilities/clearfix.scss

@@ -0,0 +1,9 @@
+@layer utilities {
+  .clearfix {
+    &::after {
+      display: block;
+      clear: both;
+      content: '';
+    }
+  }
+}

package/assets/sass/utilities/colours.scss

@@ -0,0 +1,43 @@
+@layer utilities {
+  .text-heading {
+    
+    color: var(--colour-heading) !important;
+  }
+
+  $theme-colors: (
+    'primary': var(--colour-primary),
+    'secondary': var(--colour-secondary),
+    'info': var(--colour-info),
+    'warning': var(--colour-warning),
+    'success': var(--colour-success),
+    'complete': var(--colour-complete),
+    'danger': var(--colour-danger),
+    'dark': var(--colour-dark),
+    'light': var(--colour-light),
+    'canvas': var(--colour-canvas),
+    'white': var(--colour-white),
+  );
+
+  @each $color, $value in $theme-colors {
+    .text-#{$color} {
+      --text-opacity: 1;
+      color: var(--colour-#{$color}) !important;
+    }
+
+    .bg-#{$color} {
+      --bg-opacity: 1;
+      --bg-colour: var(--colour-#{$color}) !important;
+      background-color: var(--colour-#{$color}) !important;
+    }
+
+    .hover-#{$color}:is(:hover,:focus,:focus-within) {
+      --bg-opacity: 1;
+      --bg-colour: var(--colour-#{$color}) !important;
+      background-color: var(--colour-#{$color}) !important;
+    }
+
+    .colour-#{$color} {
+      --colour: var(--colour-#{$color}) !important;
+    }
+  }
+}

package/assets/sass/utilities/display.scss

@@ -0,0 +1,90 @@
+@layer utilities {
+  $breakpoints: (
+    sm: 36em,
+    md: 62em,
+  );
+  .d-inline {
+    display: inline !important;
+  }
+
+  .d-inline-block {
+    display: inline-block !important;
+  }
+
+  .d-block {
+    display: block !important;
+  }
+
+  .d-grid {
+    display: grid !important;
+  }
+
+  .d-table {
+    display: table !important;
+  }
+
+  .d-table-row {
+    display: table-row !important;
+  }
+
+  .d-table-cell {
+    display: table-cell !important;
+  }
+
+  .d-flex {
+    display: flex !important;
+  }
+
+  .d-inline-flex {
+    display: inline-flex !important;
+  }
+
+  .d-none {
+    display: none !important;
+  }
+
+  @each $breakpoint,$width in $breakpoints {
+    @media screen and (min-width: $width) {
+
+      .d-#{$breakpoint}-inline {
+        display: inline !important;
+      }
+
+      .d-#{$breakpoint}-inline-block {
+        display: inline-block !important;
+      }
+
+      .d-#{$breakpoint}-block {
+        display: block !important;
+      }
+
+      .d-#{$breakpoint}-grid {
+        display: grid !important;
+      }
+
+      .d-#{$breakpoint}-table {
+        display: table !important;
+      }
+
+      .d-#{$breakpoint}-table-row {
+        display: table-row !important;
+      }
+
+      .d-#{$breakpoint}-table-cell {
+        display: table-cell !important;
+      }
+
+      .d-#{$breakpoint}-flex {
+        display: flex !important;
+      }
+
+      .d-#{$breakpoint}-inline-flex {
+        display: inline-flex !important;
+      }
+
+      .d-#{$breakpoint}-none {
+        display: none !important;
+      }
+    }
+  }
+}

package/assets/sass/utilities/fixed.scss

@@ -0,0 +1,17 @@
+@layer utilities {
+  .fixed-top {
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: var(--index-floating);
+  }
+
+  .fixed-bottom {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: var(--index-floating);
+  }
+}

package/assets/sass/utilities/flex.scss

@@ -0,0 +1,150 @@
+@layer utilities {
+  $breakpoints: (
+    sm: 36em,
+    md: 62em,
+  );
+  @each $breakpoint,$width in $breakpoints {
+    @media screen and (min-width: $width) {
+
+      .flex-#{$breakpoint}-fill {
+        flex: 1 1 auto !important;
+      }
+
+      .flex-#{$breakpoint}-row {
+        flex-direction: row !important;
+      }
+
+      .flex-#{$breakpoint}-column {
+        flex-direction: column !important;
+      }
+
+      .flex-#{$breakpoint}-row-reverse {
+        flex-direction: row-reverse !important;
+      }
+
+      .flex-#{$breakpoint}-column-reverse {
+        flex-direction: column-reverse !important;
+      }
+
+      .flex-#{$breakpoint}-grow-0 {
+        flex-grow: 0 !important;
+      }
+
+      .flex-#{$breakpoint}-grow-1 {
+        flex-grow: 1 !important;
+      }
+
+      .flex-#{$breakpoint}-shrink-0 {
+        flex-shrink: 0 !important;
+      }
+
+      .flex-#{$breakpoint}-shrink-1 {
+        flex-shrink: 1 !important;
+      }
+
+      .flex-#{$breakpoint}-wrap {
+        flex-wrap: wrap !important;
+      }
+
+      .flex-#{$breakpoint}-nowrap {
+        flex-wrap: nowrap !important;
+      }
+
+      .flex-#{$breakpoint}-wrap-reverse {
+        flex-wrap: wrap-reverse !important;
+      }
+
+      .justify-content-#{$breakpoint}-start {
+        justify-content: flex-start !important;
+      }
+
+      .justify-content-#{$breakpoint}-end {
+        justify-content: flex-end !important;
+      }
+
+      .justify-content-#{$breakpoint}-center {
+        justify-content: center !important;
+      }
+
+      .justify-content-#{$breakpoint}-between {
+        justify-content: space-between !important;
+      }
+
+      .justify-content-#{$breakpoint}-around {
+        justify-content: space-around !important;
+      }
+
+      .justify-content-#{$breakpoint}-evenly {
+        justify-content: space-evenly !important;
+      }
+
+      .align-items-#{$breakpoint}-start {
+        align-items: flex-start !important;
+      }
+
+      .align-items-#{$breakpoint}-end {
+        align-items: flex-end !important;
+      }
+
+      .align-items-#{$breakpoint}-center {
+        align-items: center !important;
+      }
+
+      .align-items-#{$breakpoint}-baseline {
+        align-items: baseline !important;
+      }
+
+      .align-items-#{$breakpoint}-stretch {
+        align-items: stretch !important;
+      }
+
+      .align-content-#{$breakpoint}-start {
+        align-content: flex-start !important;
+      }
+
+      .align-content-#{$breakpoint}-end {
+        align-content: flex-end !important;
+      }
+
+      .align-content-#{$breakpoint}-center {
+        align-content: center !important;
+      }
+
+      .align-content-#{$breakpoint}-between {
+        align-content: space-between !important;
+      }
+
+      .align-content-#{$breakpoint}-around {
+        align-content: space-around !important;
+      }
+
+      .align-content-#{$breakpoint}-stretch {
+        align-content: stretch !important;
+      }
+
+      .align-self-#{$breakpoint}-auto {
+        align-self: auto !important;
+      }
+
+      .align-self-#{$breakpoint}-start {
+        align-self: flex-start !important;
+      }
+
+      .align-self-#{$breakpoint}-end {
+        align-self: flex-end !important;
+      }
+
+      .align-self-#{$breakpoint}-center {
+        align-self: center !important;
+      }
+
+      .align-self-#{$breakpoint}-baseline {
+        align-self: baseline !important;
+      }
+
+      .align-self-#{$breakpoint}-stretch {
+        align-self: stretch !important;
+      }
+    }
+  }
+}

package/assets/sass/utilities/gap.scss

@@ -0,0 +1,8 @@
+@layer utilities {
+  @for $key from 0 through 5 {
+    $value: var(--spacer-#{$key});
+    .gap-#{$key} {
+      gap: #{$value} !important;
+    }
+  }
+}

package/assets/sass/utilities/gradients.scss

@@ -0,0 +1,40 @@
+@layer utilities {
+  .bg-gradient {
+    background-image: var(--gradient) !important;
+  }
+
+  .gradient-success {
+    --gradient-direction: 180deg;
+    background-image: linear-gradient(
+      var(--gradient-direction),
+      var(--colour-success-theme) 0,
+      transparent 100%
+    ) !important;
+  }
+
+  .gradient-primary {
+    --gradient-direction: 180deg;
+    background-image: linear-gradient(
+      var(--gradient-direction),
+      var(--colour-primary-theme) 0,
+      transparent 100%
+    ) !important;
+  }
+
+  .gradient-info {
+    --gradient-direction: 180deg;
+    background-image: linear-gradient(
+      var(--gradient-direction),
+      var(--colour-info-theme) 0,
+      transparent 100%
+    ) !important;
+  }
+
+  .gradient-direction-left {
+    --gradient-direction: 90deg;
+  }
+
+  .gradient-direction-angle {
+    --gradient-direction: 135deg;
+  }
+}

package/assets/sass/utilities/js-display.scss

@@ -0,0 +1,13 @@
+@layer utilities {
+  @media (scripting: enabled) {
+    .js-show {
+      display: none !important;
+    }
+  }
+
+  @media (scripting: none) {
+    .js-hide {
+      display: none !important;
+    }
+  }
+}

package/assets/sass/utilities/line-clamp.scss

@@ -0,0 +1,25 @@
+@layer utilities {
+  .line-clamp {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    text-overflow: hidden;
+    overflow: hidden;
+  }
+
+  .line-clamp--2 {
+    -webkit-line-clamp: 2;
+  }
+
+  .line-clamp--3 {
+    -webkit-line-clamp: 3;
+  }
+
+  .line-clamp--4 {
+    -webkit-line-clamp: 4;
+  }
+
+  .line-clamp--5 {
+    -webkit-line-clamp: 5;
+  }
+}

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;
+      }
+    }
+  }
+}