@iamproperty/components 7.6.0 → 7.6.2

package/assets/sass/templates/auth.scss

@@ -1,10 +1,10 @@
 @use '../_func' as *;
 
-$layers: 'true' !default;
-$mobileOnly: 'false' !default;
-$darkMode: 'true' !default;
 
-@include layer('templates', $layers) {
+
+
+
+@layer templates {
   body:has(.template--auth) {
     display: flex;
     flex-direction: row;
@@ -13,7 +13,7 @@ $darkMode: 'true' !default;
   }
 
   .template--auth {
-    --padding-top: #{rem(24)};
+    --padding-top: 1.5rem;
     --brand-size: #{rem(36)};
 
     display: flex;
@@ -21,8 +21,8 @@ $darkMode: 'true' !default;
     max-width: rem(1280);
     margin-inline: auto;
 
-    @include media-breakpoint-up(md, $mobileOnly) {
-      --padding-top: #{rem(40)};
+    @media screen and (min-width: 62em) {
+      --padding-top: 2.5rem;
       --brand-size: #{rem(64)};
     }
 
@@ -34,10 +34,10 @@ $darkMode: 'true' !default;
       padding-bottom: var(--padding-top);
       padding-inline: var(--container-padding-x);
 
-      @include media-breakpoint-up(md, $mobileOnly) {
+      @media screen and (min-width: 62em) {
         flex: 0 0 auto;
         width: 43.75%;
-        padding-inline-end: calc(var(--container-padding-x) - rem(16));
+        padding-inline-end: calc(var(--container-padding-x) - 1rem);
       }
 
       .brand {
@@ -50,7 +50,7 @@ $darkMode: 'true' !default;
       display: none;
       background-color: var(--colour-primary-theme);
 
-      @include media-breakpoint-up(md, $mobileOnly) {
+      @media screen and (min-width: 62em) {
         display: block;
         flex: 0 0 auto;
         width: 56.25%;
@@ -60,17 +60,13 @@ $darkMode: 'true' !default;
         overflow: hidden;
       }
 
-      @include light-mode($darkMode) {
-        background-color: #e9f9fd;
-      }
-
       > figure {
         position: relative;
         display: block;
         margin-top: calc(var(--padding-top) * -1);
-        margin-inline: calc(var(--container-padding-x-md) * -1);
-        min-width: calc(100% + var(--container-padding-x-md) + var(--container-padding-x-md));
-        margin-bottom: rem(40);
+        margin-inline: calc(var(--container-padding-x) * -1);
+        min-width: calc(100% + var(--container-padding-x) + var(--container-padding-x));
+        margin-bottom: 2.5rem;
         max-height: rem(400);
         clip-path: ellipse(70% 80% at 50% 20%);
         rotate: -5deg;
@@ -98,7 +94,7 @@ $darkMode: 'true' !default;
 
       img {
         margin-inline: rem(-24);
-        min-width: calc(100% + rem(24) + rem(24));
+        min-width: calc(100% + 1.5rem + 1.5rem);
         margin-top: rem(-12);
         max-height: rem(424);
         object-fit: cover;

package/assets/sass/templates/form.scss

@@ -3,15 +3,13 @@
 
 @use '../_func' as *;
 
-$layers: 'true' !default;
-$mobileOnly: 'false' !default;
-$darkMode: 'true' !default;
 
-@include layer('templates', $layers) {
+
+
+
+@layer templates {
   body:has(.template--form) {
-    @include light-mode($darkMode) {
-      background-color: #e9f9fd;
-    }
+    background-color: #e9f9fd;
   }
 
   .template--form {
@@ -36,15 +34,12 @@ $darkMode: 'true' !default;
 
     // Make H2's look like H3's
     :is(h2, .h2) {
-      font-size: map.get($heading-sizes, 'h3_fs');
-      line-height: map.get($heading-sizes, 'h3_lh');
-      padding-bottom: map.get($heading-sizes, 'h3_pb');
+      font-size: var(--h3-fs);
       max-width: var(--content-max-width);
     }
 
-    @include light-mode($darkMode) {
-      background-color: #e9f9fd;
-    }
+    background-color: #e9f9fd;
+    
 
     .form-panel {
       display: block;
@@ -55,17 +50,17 @@ $darkMode: 'true' !default;
       outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
       width: 100%;
 
-      @include media-breakpoint-up(sm, $mobileOnly) {
+      @media screen and (min-width: 36em) {
         max-width: calc(100% - 5rem); // Guess
         margin-inline: auto;
       }
 
-      @include media-breakpoint-up(md, $mobileOnly) {
+      @media screen and (min-width: 62em) {
         max-width: rem(924); // Guess
         border-radius: 0.5rem;
         padding-inline: rem(94);
-        padding-block: rem(40);
-        margin-bottom: rem(32);
+        padding-block: 2.5rem;
+        margin-bottom: 2rem;
       }
 
       > *:last-child {
@@ -73,7 +68,7 @@ $darkMode: 'true' !default;
       }
     }
 
-    @include media-breakpoint-up(md, $mobileOnly) {
+    @media screen and (min-width: 62em) {
       .container--form {
         padding-inline: 0;
         max-width: rem(924) !important;

package/assets/sass/utilities/align.scss

@@ -0,0 +1,25 @@
+@layer utilities {
+  .align-baseline {
+    vertical-align: baseline !important;
+  }
+
+  .align-top {
+    vertical-align: top !important;
+  }
+
+  .align-middle {
+    vertical-align: middle !important;
+  }
+
+  .align-bottom {
+    vertical-align: bottom !important;
+  }
+
+  .align-text-bottom {
+    vertical-align: text-bottom !important;
+  }
+
+  .align-text-top {
+    vertical-align: text-top !important;
+  }
+}

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