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

package/assets/sass/templates/auth.scss

@@ -1,106 +1,106 @@
-@use '../_func' as *;
-
-
-
-
-
-@layer templates {
-  body:has(.template--auth) {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    background-color: var(--colour-canvas-2);
-  }
-
-  .template--auth {
-    --padding-top: 1.5rem;
-    --brand-size: 2.25rem;
-
-    display: flex;
-    flex-wrap: wrap;
-    max-width: 80rem;
-    margin-inline: auto;
-
-    @media screen and (min-width: 62em) {
-      --padding-top: 2.5rem;
-      --brand-size: 4rem;
-    }
-
-    main {
-      display: flex;
-      flex-direction: column;
-      min-height: 100vh;
-      padding-top: var(--padding-top);
-      padding-bottom: var(--padding-top);
-      padding-inline: var(--container-padding-x);
-
-      @media screen and (min-width: 62em) {
-        flex: 0 0 auto;
-        width: 43.75%;
-        padding-inline-end: calc(var(--container-padding-x) - 1rem);
-      }
-
-      .brand {
-        font-size: var(--brand-size);
-        padding-top: 0;
-      }
-    }
-
-    aside {
-      display: none;
-      background-color: var(--colour-primary-theme);
-
-      @media screen and (min-width: 62em) {
-        display: block;
-        flex: 0 0 auto;
-        width: 56.25%;
-        padding-inline: var(--container-padding-x) !important;
-        padding-block: var(--padding-top);
-        position: relative;
-        overflow: hidden;
-      }
-
-      > figure {
-        position: relative;
-        display: block;
-        margin-top: calc(var(--padding-top) * -1);
-        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: 25rem; /* 400 */
-        clip-path: ellipse(70% 80% at 50% 20%);
-        rotate: -5deg;
-
-        &:after {
-          content: '';
-          position: absolute;
-          display: block;
-
-          right: -2rem;
-          left: -2rem;
-          bottom: -1rem;
-          height: 50%;
-
-          rotate: -5deg;
-          background: linear-gradient(
-            0deg,
-            rgba(0, 49, 60, 1) 0%,
-            rgba(28, 182, 226, 0.45) 40%,
-            rgba(28, 182, 226, 0) 100%
-          );
-          opacity: 0.9;
-        }
-      }
-
-      img {
-        margin-inline: -1.5rem;
-        min-width: calc(100% + 1.5rem + 1.5rem);
-        margin-top: -0.75rem;
-        max-height: 26.5rem;
-        object-fit: cover;
-        object-position: 50% 50%;
-        rotate: 5deg;
-      }
-    }
-  }
-}
+@use '../_func' as *;
+
+
+
+
+
+@layer templates {
+  body:has(.template--auth) {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    background-color: var(--colour-canvas-2);
+  }
+
+  .template--auth {
+    --padding-top: 1.5rem;
+    --brand-size: 2.25rem;
+
+    display: flex;
+    flex-wrap: wrap;
+    max-width: 80rem;
+    margin-inline: auto;
+
+    @media screen and (min-width: 62em) {
+      --padding-top: 2.5rem;
+      --brand-size: 4rem;
+    }
+
+    main {
+      display: flex;
+      flex-direction: column;
+      min-height: 100vh;
+      padding-top: var(--padding-top);
+      padding-bottom: var(--padding-top);
+      padding-inline: var(--container-padding-x);
+
+      @media screen and (min-width: 62em) {
+        flex: 0 0 auto;
+        width: 43.75%;
+        padding-inline-end: calc(var(--container-padding-x) - 1rem);
+      }
+
+      .brand {
+        font-size: var(--brand-size);
+        padding-top: 0;
+      }
+    }
+
+    aside {
+      display: none;
+      background-color: var(--colour-primary-theme);
+
+      @media screen and (min-width: 62em) {
+        display: block;
+        flex: 0 0 auto;
+        width: 56.25%;
+        padding-inline: var(--container-padding-x) !important;
+        padding-block: var(--padding-top);
+        position: relative;
+        overflow: hidden;
+      }
+
+      > figure {
+        position: relative;
+        display: block;
+        margin-top: calc(var(--padding-top) * -1);
+        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: 25rem; /* 400 */
+        clip-path: ellipse(70% 80% at 50% 20%);
+        rotate: -5deg;
+
+        &:after {
+          content: '';
+          position: absolute;
+          display: block;
+
+          right: -2rem;
+          left: -2rem;
+          bottom: -1rem;
+          height: 50%;
+
+          rotate: -5deg;
+          background: linear-gradient(
+            0deg,
+            rgba(0, 49, 60, 1) 0%,
+            rgba(28, 182, 226, 0.45) 40%,
+            rgba(28, 182, 226, 0) 100%
+          );
+          opacity: 0.9;
+        }
+      }
+
+      img {
+        margin-inline: -1.5rem;
+        min-width: calc(100% + 1.5rem + 1.5rem);
+        margin-top: -0.75rem;
+        max-height: 26.5rem;
+        object-fit: cover;
+        object-position: 50% 50%;
+        rotate: 5deg;
+      }
+    }
+  }
+}

package/assets/sass/templates/form.scss

@@ -1,95 +1,95 @@
-@use 'sass:map';
-@use 'sass:math';
-
-@use '../_func' as *;
-
-
-
-
-
-@layer templates {
-  body:has(.template--form) {
-    background-color: #e9f9fd;
-  }
-
-  .template--form {
-    --input-max-width: 28.125rem;
-    --select-max-width: 31.25rem
-
-    .container {
-
-      max-width: 80rem !important;
-    }
-
-    @supports selector(:has(*)) {
-      label:has(> :is(.suffix, .prefix)) {
-        --input-max-width: 31.25rem
-        max-width: var(--input-max-width);
-      }
-      div:has(> :is(.suffix, .prefix)) {
-        --input-max-width: 31.25rem
-        max-width: var(--input-max-width);
-      }
-    }
-
-    /*  Make H2's look like H3's */
-    :is(h2, .h2) {
-      font-size: var(--h3-fs);
-      max-width: var(--content-max-width);
-    }
-
-    background-color: #e9f9fd;
-    
-
-    .form-panel {
-      display: block;
-      padding: 2rem;
-      box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
-      background-color: var(--colour-canvas-2);
-      margin-bottom: 1.5rem;
-      outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
-      width: 100%;
-
-      > *:last-child {
-        margin-bottom: 0 !important;
-      }
-    }
-
-    @media screen and (min-width: 36em) {
-      .form-panel {
-        max-width: calc(100% - 5rem); /*  Guess */
-        margin-inline: auto;
-      }
-    }
-
-    @media screen and (min-width: 62em) {
-      .form-panel {
-        max-width: 57.75rem; /* 924 */  /*  Guess */
-        border-radius: 0.5rem;
-        padding-inline: 5.875rem;
-        padding-block: 2.5rem;
-        margin-bottom: 2rem;
-      }
-      
-      .form-panel--sm {
-        max-width: 40rem; /* 640px */
-        padding-inline: 2rem;
-      }
-    }
-
-    @media screen and (min-width: 62em) {
-      .container--form {
-        padding-inline: 0;
-        max-width: 57.75rem !important;
-      }
-
-      .form-panel .btn__group {
-        margin-bottom: 0;
-      }
-    }
-
-    [data-loading] {
-      opacity: 0.5;
-    }
-  }
-}
+@use 'sass:map';
+@use 'sass:math';
+
+@use '../_func' as *;
+
+
+
+
+
+@layer templates {
+  body:has(.template--form) {
+    background-color: #e9f9fd;
+  }
+
+  .template--form {
+    --input-max-width: 28.125rem;
+    --select-max-width: 31.25rem
+
+    .container {
+
+      max-width: 80rem !important;
+    }
+
+    @supports selector(:has(*)) {
+      label:has(> :is(.suffix, .prefix)) {
+        --input-max-width: 31.25rem
+        max-width: var(--input-max-width);
+      }
+      div:has(> :is(.suffix, .prefix)) {
+        --input-max-width: 31.25rem
+        max-width: var(--input-max-width);
+      }
+    }
+
+    /*  Make H2's look like H3's */
+    :is(h2, .h2) {
+      font-size: var(--h3-fs);
+      max-width: var(--content-max-width);
+    }
+
+    background-color: #e9f9fd;
+    
+
+    .form-panel {
+      display: block;
+      padding: 2rem;
+      box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
+      background-color: var(--colour-canvas-2);
+      margin-bottom: 1.5rem;
+      outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
+      width: 100%;
+
+      > *:last-child {
+        margin-bottom: 0 !important;
+      }
+    }
+
+    @media screen and (min-width: 36em) {
+      .form-panel {
+        max-width: calc(100% - 5rem); /*  Guess */
+        margin-inline: auto;
+      }
+    }
+
+    @media screen and (min-width: 62em) {
+      .form-panel {
+        max-width: 57.75rem; /* 924 */  /*  Guess */
+        border-radius: 0.5rem;
+        padding-inline: 5.875rem;
+        padding-block: 2.5rem;
+        margin-bottom: 2rem;
+      }
+      
+      .form-panel--sm {
+        max-width: 40rem; /* 640px */
+        padding-inline: 2rem;
+      }
+    }
+
+    @media screen and (min-width: 62em) {
+      .container--form {
+        padding-inline: 0;
+        max-width: 57.75rem !important;
+      }
+
+      .form-panel .btn__group {
+        margin-bottom: 0;
+      }
+    }
+
+    [data-loading] {
+      opacity: 0.5;
+    }
+  }
+}

package/assets/sass/utilities/align.css

@@ -1,25 +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;
-  }
+@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.css

@@ -1,66 +1,66 @@
-@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-gradient {
-    background: linear-gradient(white, white) padding-box, linear-gradient(to right, var(--colour-primary-theme), var(--colour-info)) border-box;
-    border: var(--border-width) solid transparent;
-  }
+@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-gradient {
+    background: linear-gradient(white, white) padding-box, linear-gradient(to right, var(--colour-primary-theme), var(--colour-info)) border-box;
+    border: var(--border-width) solid transparent;
+  }
 }

package/assets/sass/utilities/clearfix.css

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

package/assets/sass/utilities/colours.scss

@@ -1,44 +1,44 @@
-@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} {
-      color: var(--colour-#{$color}) !important;
-    }
-
-    .bg-#{$color} {
-      --bg-colour: var(--colour-#{$color}) !important;
-      background-color: var(--colour-#{$color}) !important;
-    }
-
-    .hover-#{$color}:is(:hover,:focus,:focus-within) {
-      --bg-colour: var(--colour-#{$color}) !important;
-      background-color: var(--colour-#{$color}) !important;
-    }
-
-    .colour-#{$color} {
-      --colour: var(--colour-#{$color}) !important;
-    }
-  }
-
-  .text-body {
-    color: var(--colour-body);
-  }
+@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} {
+      color: var(--colour-#{$color}) !important;
+    }
+
+    .bg-#{$color} {
+      --bg-colour: var(--colour-#{$color}) !important;
+      background-color: var(--colour-#{$color}) !important;
+    }
+
+    .hover-#{$color}:is(:hover,:focus,:focus-within) {
+      --bg-colour: var(--colour-#{$color}) !important;
+      background-color: var(--colour-#{$color}) !important;
+    }
+
+    .colour-#{$color} {
+      --colour: var(--colour-#{$color}) !important;
+    }
+  }
+
+  .text-body {
+    color: var(--colour-body);
+  }
 }