@iamproperty/components 7.6.4--beta7 → 7.7.0

package/assets/sass/elements/modal.scss

@@ -15,23 +15,23 @@
       overflow-y: hidden!important;
     }
     width: 90vw;
-    max-width: rem(324); // col-width*4
+    max-width: 20.25rem; /* 324 */  // col-width*4
 
     //height: 90vh;
-    max-height: min(90vh, #{rem(752)});
+    max-height: min(90vh, 47rem);
     overscroll-behavior: contain;
 
     @media screen and (min-width: 36em) {
       --dialog-padding: 2rem;
-      min-width: rem(335);
+      min-width: 20.9375rem; /* 335 */ 
       width: fit-content;
-      max-width: rem(686);
+      max-width: 42.875rem; /* 686 */ 
     }
 
     @media screen and (min-width: 62em) {
-      min-width: rem(454);
+      min-width: 28.375rem; /* 454 */ 
       width: fit-content;
-      max-width: rem(736);
+      max-width: 46rem; /* 736 */ 
     }
 
     // Close button
@@ -81,7 +81,7 @@
 
       & + span:not(.h1, .h2, .h3, .h4, .h5, .h6) {
         padding-bottom: 0.5rem;
-        line-height: rem(19);
+        line-height: 1.1875rem; /* 19 */ 
       }
 
       & + span:not(.h1, .h2, .h3, .h4, .h5, .h6) + * {
@@ -105,7 +105,7 @@
     }
 
     &.dialog--fullwidth {
-      max-width: rem(1112);
+      max-width: 69.5rem; /* 1112*/ 
     }
 
     @media screen and (max-width: 36em) {
@@ -154,7 +154,7 @@
       font-variant: normal;
       line-height: 1;
       text-rendering: auto;
-      font-family: 'Font Awesome 6 Pro';
+      font-family: 'Font Awesome 7 Pro';
       font-size: 3rem;
       margin-top: 0;
       margin-bottom: 1.5rem;
@@ -232,13 +232,13 @@
     }
 
     @media screen and (min-width: 36em) {
-      min-width: rem(686);
-      max-width: rem(686);
+      min-width: 42.875rem; /* 686 */ 
+      max-width: 42.875rem; /* 686 */ 
     }
 
     @media screen and (min-width: 62em) {
-      min-width: rem(736);
-      max-width: rem(736);
+      min-width: 46rem; /* 736 */ 
+      max-width: 46rem; /* 736 */ 
     }
   }
   // #endregion
@@ -301,9 +301,9 @@
     }
 
     @media screen and (min-width: 36em) {
-      min-width: rem(452);
-      width: rem(452);
-      max-width: rem(452);
+      min-width: 28.25rem; /* 452 */ 
+      width: 28.25rem; /* 452 */ 
+      max-width: 28.25rem; /* 452 */ 
 
       & > button:first-child {
         top: calc(var(--dialog-padding) * 3.25) !important;
@@ -322,17 +322,17 @@
     }
 
     @media screen and (min-width: 62em) {
-      min-width: rem(924);
-      width: rem(924);
-      max-width: rem(924);
+      min-width: 57.75rem; /* 924 */ 
+      width: 57.75rem; /* 924 */ 
+      max-width: 57.75rem; /* 924 */ 
 
       & > button:first-child {
         top: calc(var(--dialog-padding) * 1) !important;
       }
 
-      @media (min-height: #{rem(500)}) {
-        height: rem(478);
-        max-height: rem(478);
+      @media (min-height: 31.25rem) {
+        height: 29.875rem; /* 478 */ 
+        max-height: 29.875rem; /* 478 */ 
       }
 
       form {
@@ -351,7 +351,7 @@
         padding-right: calc(var(--dialog-padding) - 10px);
         margin-right: calc((var(--dialog-padding) * -1) + 10px);
 
-        max-height: rem(370);
+        max-height: 23.125rem; /* 370 */
 
         &::before {
           content: '';
@@ -391,7 +391,7 @@
       }
 
       .btn--wrapper {
-        padding-top: rem(64);
+        padding-top: 4rem; /* 64 */
       }
     }
 

package/assets/sass/elements/popover.scss

@@ -92,21 +92,21 @@
       margin-top: -1rem;
       top: 100%;
       z-index: var(--index-floating);
-      min-width: rem(320);
+      min-width: 20rem; /* 320 */
       border-radius: 1rem;
-      width: rem(320);
+      width: 20rem; /* 320 */
 
       @media screen and (min-width: 36em) {
-        width: rem(335);
+        width: 20.9375rem; /* 335 */ 
       }
       @media screen and (min-width: 62em) {
-        width: rem(360);
+        width: 22.5rem; /* 360 */ 
       }
 
       &.dialog--list {
         width: fit-content !important;
-        min-width: rem(160) !important;
-        max-width: rem(240) !important;
+        min-width: 10rem !important; /* 160 */ 
+        max-width: 15rem !important; /* 240 */ 
         padding: var(--menu-padding, 0.5rem);
         margin: 0;
         background: var(--menu-bg, canvas);
@@ -141,7 +141,7 @@
         }
 
         a {
-          padding: #{rem(6)};
+          padding: 0.375rem; /* 6 */
 
           &:not(:hover, :focus, :active) {
             border-color: transparent;
@@ -160,7 +160,7 @@
           font-weight: inherit;
           font-family: inherit;
           font-size: 1rem;
-          line-height: rem(19);
+          line-height: 1.1875rem; /* 19 */ 
           display: block;
           margin: var(--menu-item-margin, 0 0 0.25rem 0);
           padding-block: var(--menu-item-padding, 0.5rem);
@@ -195,11 +195,11 @@
     }
 
     &.dialog__wrapper--sm > :is(dialog[open], dialog:popover-open) {
-      width: rem(239);
+      width: 14.9375rem; /* 239 */ 
     }
 
     &.dialog__wrapper--lg > :is(dialog[open], dialog:popover-open) {
-      width: rem(319);
+      width: 19.9375rem; /* 319*/ 
     }
 
     @media screen and (min-width: 36em) {
@@ -212,10 +212,10 @@
         left: auto;
       }
       &.dialog__wrapper--sm > dialog[open] {
-        width: rem(265);
+        width: 16.5625rem;
       }
       &.dialog__wrapper--lg > dialog[open] {
-        width: rem(452);
+        width: 28.25rem; /* 452 */ 
       }
     }
 
@@ -229,10 +229,10 @@
         left: auto;
       }
       &.dialog__wrapper--sm > dialog[open] {
-        width: rem(266);
+        width: 16.5625rem;
       }
       &.dialog__wrapper--lg > dialog[open] {
-        width: rem(454);
+        width: 28.375rem; /* 454 */ 
       }
     }
   }

package/assets/sass/elements/prefix.scss

@@ -11,7 +11,6 @@
   
   :is(.prefix, .suffix) {
     --fa-display: flex;
-    display: inline-block;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -28,7 +27,7 @@
     //margin-bottom: 1rem;
     border-end-start-radius: 0.5rem;
     border-start-start-radius: 0.5rem;
-    min-width: calc(#{rem(20 + 12 + 12)} + 4px);
+    min-width: calc(2.75rem + 4px);
     overflow: hidden;
     white-space: nowrap;
     text-align: center;
@@ -55,7 +54,7 @@
     }
 
     &[class*='fa-'] {
-      width: calc(#{rem(20 + 12 + 12)} + 4px);
+      width: calc(2.75rem + 4px);
       padding-inline: 0;
     }
 
@@ -85,7 +84,7 @@
 
     select ~ span:after {
       content: ' \f078';
-      font-family: 'Font Awesome 6 Pro';
+      font-family: 'Font Awesome 7 Pro';
       font-size: 0.8em;
       display: inline-block;
       padding-left: 1em;
@@ -94,6 +93,21 @@
     select:focus-visible ~ span:after {
       content: '\f077';
     }
+        
+    @container style(--font-body) {
+
+      &::before {
+        content: var(--iso)!important;
+      }
+      
+    }
+
+    @container style(--fa-font-regular) {
+
+      &::before {
+        content: var(--fa)!important;
+      }
+    }
   }
 
   .prefix {

package/assets/sass/elements/progress.scss

@@ -14,7 +14,7 @@
   }
 
   progress {
-    border-radius: rem(5);
+    border-radius: 0.3125rem; /* 5 */ 
     display: block;
     margin-top: 0.5rem;
     width: calc(100% + 3rem);
@@ -46,11 +46,11 @@
 
   progress::-webkit-progress-bar {
     background-color: var(--colour-light);
-    border-radius: var(--border-radius, #{rem(5)});
+    border-radius: var(--border-radius, 0.3125rem);
   }
   progress::-webkit-progress-value {
     background-color: var(--colour, var(--colour-info));
-    border-radius: var(--border-radius, #{rem(5)});
+    border-radius: var(--border-radius, 0.3125rem);
   }
 
   // #region inline progress
@@ -71,8 +71,8 @@
 
   // #region Circular
   label:has(.progress--circular) {
-    --max-width: #{rem(200)};
-    --pt: #{rem(90)};
+    --max-width: 12.5rem;
+    --pt: 5.625rem;
     --pt-percent: 45%;
     --bar-width: 1.25rem;
     --value-fs: 3rem;
@@ -98,16 +98,16 @@
   }
 
   label:has(.progress--circular.progress--md) {
-    --max-width: #{rem(170)};
-    --pt: #{rem(76.5)};
+    --max-width: 10.625rem;
+    --pt: 4.78125rem;
     --pt-percent: 45%;
     --bar-width: 1.25rem;
     --value-pb: 1.5rem;
   }
 
   label:has(.progress--circular.progress--sm) {
-    --max-width: #{rem(120)};
-    --pt: #{rem(54)};
+    --max-width: 7.5rem; /* 120 */
+    --pt: 3.375rem;
     --pt-percent: 45%;
     --bar-width: 1rem;
     --value-fs: 1.5rem;
@@ -123,8 +123,8 @@
 
   @container (width <= 10.625rem) {
     label:has(.progress--circular:not(.progress--sm):not(.progress--md)) {
-      --max-width: #{rem(170)};
-      --pt: #{rem(76.5)};
+      --max-width: 10.625rem;
+      --pt: 4.78125rem
       --pt-percent: 45%;
       --bar-width: 1.25rem;
       --value-pb: 1.5rem;
@@ -133,8 +133,8 @@
 
   @container (width <= 7.5rem) {
     label:has(.progress--circular:not(.progress--sm):not(.progress--md)) {
-      --max-width: #{rem(120)};
-      --pt: #{rem(54)};
+      --max-width: 7.5rem; /* 120 */
+      --pt: 3.375rem;
       --pt-percent: 45%;
       --bar-width: 1rem;
       --value-fs: 1.5rem;
@@ -170,7 +170,7 @@
     height: 100%;
     width: 100%;
     border-radius: 50%;
-    box-shadow: #{rem(3)} #{rem(3)} #{rem(6)} rgba(0, 0, 0, 20%);
+    box-shadow: 0.1875rem 0.1875rem 0.375rem rgba(0, 0, 0, 20%);
     transition: --progress 1s;
   }
 

package/assets/sass/elements/table.element.scss

@@ -79,6 +79,10 @@
       font-size: inherit;
       padding: 0;
     }
+
+    &.th--sm {
+      width: 1px;
+    }
   }
 
   th {
@@ -99,7 +103,7 @@
 
   // Error messages
   tr td[colspan='100%']:first-child:last-child span {
-    max-width: rem(624);
+    max-width: 39rem;
     font-weight: bold;
     padding: 3rem;
     text-align: center;
@@ -107,7 +111,7 @@
     color: var(--colour-heading);
 
     @media screen and (min-width: 62em) {
-      max-width: rem(1048);
+      max-width: 65.5rem;
     }
   }
 
@@ -115,13 +119,13 @@
     thead {
       th:not(:empty) {
         white-space: nowrap;
-        min-width: rem(120);
+        min-width: 7.5rem;
       }
       th.th--mw-md {
-        min-width: rem(240);
+        min-width: 15rem; /* 240 */
       }
       th.th--mw-lg {
-        min-width: rem(360);
+        min-width: 22.5rem; /* 360 */ 
       }
     }
   }

package/assets/sass/elements/tooltips.scss

@@ -14,7 +14,7 @@
     }
 
     &:after {
-      font-family: 'Font Awesome 6 Pro';
+      font-family: 'Font Awesome 7 Pro';
       font-weight: 900;
       content: '\f059';
       display: inline-block;
@@ -38,7 +38,7 @@
         top: calc(100% + 0.5rem);
         left: auto;
         right: 0.85em;
-        width: #{rem(270)};
+        width: 16.875rem; /* 270 */ 
         transform: translate(50%, 0);
         background: var(--colour-primary);
         color: var(--colour-white);
@@ -53,11 +53,11 @@
         }
 
         @media screen and (min-width: 36em) {
-          width: #{rem(335)};
+          width: 20.9375rem; /* 335 */ 
         }
 
         @media screen and (min-width: 62em) {
-          width: #{rem(360)};
+          width: 22.5rem; /* 360 */ 
         }
 
         &::after {

package/assets/sass/email.scss

@@ -27,7 +27,7 @@ $default-curve-width: 600;
 @import '_utility-mixins';
 
 :root {
-  --container-padding-x: #{rem(66)};
+  --container-padding-x: 4.125rem;
 }
 
 html {

package/assets/sass/foundations/animations.scss

@@ -0,0 +1,2 @@
+
+@keyframes spin {to{transform: rotate(1turn)}}

package/assets/sass/foundations/colours.scss

@@ -29,8 +29,8 @@
         
       --colour-heading: var(--colour-white);
       --colour-body: var(--colour-white);
+      --colour-underline: var(--colour-white);
       color: var(--colour-white);
-
     }
     
     :scope > * {

package/assets/sass/foundations/reboot.scss

@@ -18,7 +18,7 @@
     overflow-x: hidden;
     overflow-y: scroll;
     font-size: #{calc(calc(16 / var(--root-fs-px)) * 100vw)};
-    scroll-padding-top: rem(100);
+    scroll-padding-top: 6.25rem; /* 100 */
 
     @media screen and (min-width: 36em) {
       --root-fs-px: 768;

package/assets/sass/foundations/root.scss

@@ -46,26 +46,26 @@
     --colour-canvas-2: light-dark(#ffffff,#313131);
     --colour-body-default: light-dark(#595959,#bfbfbf);
     --colour-body: light-dark(#595959,#bfbfbf);
-    --colour-heading: light-dark(var(--colour-primary-theme),var(--colour-primary));
-    --colour-link: light-dark(var(--colour-primary-theme),var(--colour-white));
-    --colour-hover: light-dark(var(--colour-primary-theme),var(--colour-white));
-    --colour-focus: light-dark(var(--colour-primary-theme),var(--colour-white));
-    --colour-active: light-dark(var(--colour-primary-theme),var(--colour-white));
-    --colour-border: light-dark(#d8d8d8,var(--colour-white));
-    --colour-brand: light-dark(var(--colour-primary-theme),var(--colour-white));
+    --colour-heading: light-dark(#00313c,#b3c1c5);
+    --colour-link: light-dark(#00313c,#fcfcfc);
+    --colour-hover: light-dark(#00313c,#fcfcfc);
+    --colour-focus: light-dark(#00313c,#fcfcfc);
+    --colour-active: light-dark(#00313c,#fcfcfc);
+    --colour-border: light-dark(#d8d8d8,#fcfcfc);
+    --colour-brand: light-dark(#00313c,#fcfcfc);
 
     --colour-btn: var(--colour-primary-theme);
-    --colour-btn-bg: light-dark(var(--colour-warning-theme),var(--colour-white));
-    --colour-btn-border: light-dark(var(--colour-warning-theme),var(--colour-white));
+    --colour-btn-bg: light-dark(#ffa500,#fcfcfc);
+    --colour-btn-border: light-dark(#ffa500,#fcfcfc);
     --colour-btn-bg-hover: transparent;
-    --colour-btn-hover: light-dark(var(--colour-primary-theme),var(--colour-white));
+    --colour-btn-hover: light-dark(#00313c,#fcfcfc);
 
-    --colour-btn-secondary: light-dark(var(--colour-primary-theme),var(--colour-white));
-    --colour-btn-secondary-border: light-dark(var(--colour-primary-theme),var(--colour-white));
+    --colour-btn-secondary: light-dark(#00313c,#fcfcfc);
+    --colour-btn-secondary-border: light-dark(#00313c,#fcfcfc);
     --colour-btn-secondary-bg: transparent;
-    --colour-btn-secondary-bg-hover: light-dark(var(--colour-primary-theme),var(--colour-white));
-    --colour-btn-secondary-hover: light-dark(var(--colour-inverted),var(--colour-primary-theme));
-    --colour-btn-action-hover-bg: light-dark(var(--colour-light),#313131);
+    --colour-btn-secondary-bg-hover: light-dark(#00313c,#fcfcfc);
+    --colour-btn-secondary-hover: light-dark(#fcfcfc,#00313c);
+    --colour-btn-action-hover-bg: light-dark(#eeeeee,#313131);
 
     --colour-activeLink: light-dark(#e8f9fd,#173c45);
     --colour-activeLinkBorder: light-dark(#1dbde6,#1dbde6);
@@ -75,10 +75,6 @@
 
     --colour-inverted: #fcfcfc;
 
-    --colour-notification-bg: light-dark(#e9f9fd,var(--colour-canvas-2));
-    --colour-notification-warning-bg: light-dark(#fff6e6,var(--colour-canvas-2));
-    --colour-notification-danger-bg: light-dark(#fcebec,var(--colour-canvas-2));
-    --colour-notification-success-bg: light-dark(#f8fdf6,var(--colour-canvas-2));
     /* #endregion */
     /* #region Wider colours */
     --wider-colour-1: #EEEEEE;
@@ -105,56 +101,7 @@
     --wider-colour-22: #FFAF91;
     --wider-colour-23: #C2DCD9;
     /* #endregion */
-    /* #region Wider colours hover */
-    --wider-colour-1-hover: #E0E0E0;
-    --wider-colour-2-hover: #DFCCE8;
-    --wider-colour-3-hover: #B6DEED;
-    --wider-colour-4-hover: #98CBB7;
-    --wider-colour-5-hover: #EFC8D1;
-    --wider-colour-6-hover: #A6C1E5;
-    --wider-colour-7-hover: #F4CAAF;
-    --wider-colour-8-hover: #C2E3E5;
-    --wider-colour-9-hover: #F5A2B9;
-    --wider-colour-10-hover: #CFDCE3;
-    --wider-colour-11-hover: #E3B2A9;
-    --wider-colour-12-hover: #E3B2F2;
-    --wider-colour-13-hover: #F0E9C2;
-    --wider-colour-14-hover: #8AD9D6;
-    --wider-colour-15-hover: #F8E1DF;
-    --wider-colour-16-hover: #81B59A;
-    --wider-colour-17-hover: #F2E5A0;
-    --wider-colour-18-hover: #F2B69D;
-    --wider-colour-19-hover: #C2E3D7;
-    --wider-colour-20-hover: #F2D28A;
-    --wider-colour-21-hover: #8FD0E6;
-    --wider-colour-22-hover: #F0A68B;
-    --wider-colour-23-hover: #B9D1CE;
-    /* #endregion */
-    /* #region Wider colours active */
-    --wider-colour-1-active: #D6D6D6;
-    --wider-colour-2-active: #D4C2DD;
-    --wider-colour-3-active: #ABD1DF;
-    --wider-colour-4-active: #95C6B3;
-    --wider-colour-5-active: #E1BBC4;
-    --wider-colour-6-active: #9EB8DA;
-    --wider-colour-7-active: #E6BDA2;
-    --wider-colour-8-active: #B9D8DA;
-    --wider-colour-9-active: #E69AAF;
-    --wider-colour-10-active: #C6D3DA;
-    --wider-colour-11-active: #D6A9A1;
-    --wider-colour-12-active: #D8AAE6;
-    --wider-colour-13-active: #E6DFBA;
-    --wider-colour-14-active: #83CCC9;
-    --wider-colour-15-active: #F4E0DE;
-    --wider-colour-16-active: #7DB095;
-    --wider-colour-17-active: #FEF0A6;
-    --wider-colour-18-active: #E6AA90;
-    --wider-colour-19-active: #CBEFE1;
-    --wider-colour-20-active: #E6C782;
-    --wider-colour-21-active: #88C5DA;
-    --wider-colour-22-active: #E69E83;
-    --wider-colour-23-active: #AFC6C3;
-    /* #endregion */
+
     /* #region chart colours */
 
     --chart-colour-1: var(--wider-colour-3);
@@ -168,23 +115,9 @@
     --chart-colour-9: var(--wider-colour-11);
     --chart-colour-10: var(--wider-colour-12);
 
-    --chart-colour-1-hover: var(--wider-colour-3-hover);
-    --chart-colour-2-hover: var(--wider-colour-4-hover);
-    --chart-colour-3-hover: var(--wider-colour-5-hover);
-    --chart-colour-4-hover: var(--wider-colour-6-hover);
-    --chart-colour-5-hover: var(--wider-colour-7-hover);
-    --chart-colour-6-hover: var(--wider-colour-8-hover);
-    --chart-colour-7-hover: var(--wider-colour-9-hover);
-    --chart-colour-8-hover: var(--wider-colour-10-hover);
-    --chart-colour-9-hover: var(--wider-colour-11-hover);
-    --chart-colour-10-hover: var(--wider-colour-12-hover);
-
     --chart-colour-success: #d2f0c9 !important;
-    --chart-colour-success-hover: #8ad873 !important;
     --chart-colour-danger: #f5c2c7 !important;
-    --chart-colour-danger-hover: #f5c2e7 !important;
     --chart-colour-warning: #ffd280 !important;
-    --chart-colour-warning-hover: #ffb020 !important;
 
     /* #endregion */
     /* #region Type vars */
@@ -228,12 +161,12 @@
     // #endregion
     // #region Cards variables
     --card-top-padding: 2rem;
-    --card-right-padding: #{rem(16+16+24)};
+    --card-right-padding: 3.5rem; /* 16+16+24 */
     --card-bottom-padding: 2rem;
     --card-left-padding: 1rem;
     --card-border-radius: 0.5rem;
-    --card-box-shadow: #{rem(2)} #{rem(3)} #{rem(6)} rgba(0, 0, 0, 0.2);
-    --nav-height: #{rem(96)};
+    --card-box-shadow: 2px 0.1875rem 0.375rem rgba(0, 0, 0, 0.2);
+    --nav-height: 6rem; /* 96 */
     --code-color: #d63384;
     // #endregion 
     // #region Default borders
@@ -246,12 +179,12 @@
     // #region layout
     --gap: 1rem;
     --gutter: 1.5rem;
-    --max-width: #{rem(1280)};
-    --content-max-width: #{rem(800)};
-    --input-max-width: #{rem(800)};
-    --select-max-width: #{rem(800)};
+    --max-width: 80rem;
+    --content-max-width: 50rem;
+    --input-max-width: 50rem;
+    --select-max-width: 50rem;
 
-    --container-max-width: #{rem(1280)};
+    --container-max-width: 80rem;
     --container-padding-top: 0;
     --container-padding-bottom: 1rem;
     --padding-inline: 1.5rem;
@@ -311,16 +244,16 @@
     
     @media screen and (min-width: 62em) {
 
-      --container-padding-x: #{rem(84)};
+      --container-padding-x: 5.25rem;
       --padding-inline: 5.25rem;
       --gutter: 5.25rem;
       --scale: 1.414;
 
       &:has(.nav--large) {
-        --container-max-width: #{rem(1920)} !important;
-        --max-width: #{rem(1920)} !important;
-        --padding-inline: #{rem(56)} !important;
-        --container-padding-x: #{rem(56)} !important;
+        --container-max-width: 120rem !important;
+        --max-width: 120rem !important;
+        --padding-inline: 3.5rem !important;
+        --container-padding-x: 3.5rem !important;
         --container-padding: var(--container-padding-top) var(--container-padding-x)
           var(--container-padding-bottom) var(--container-padding-x);
         --gutter: 3.5rem;