@iamproperty/components 7.6.4--beta7 → 7.7.0

package/assets/sass/components/nav.global.scss

@@ -97,11 +97,11 @@ body:has(iam-nav.open:not(.nav--sticky,.demo-open):not(.nav--xs-sticky)) {
 }
 
 body {
-  --nav-height: #{rem(96)};
+  --nav-height: 6rem; /* 96 */
   --sticky-padding: 0px;
 
   &:has(iam-nav a[slot='secondary']) {
-    --nav-height: #{rem(96 + 40)};
+    --nav-height: 8.5rem; /* 96 + 40 */
   }
 
   &:has(iam-nav.nav--sticky) {
@@ -111,7 +111,7 @@ body {
 
 // #region Create the correct padding top of the page
 nav:has(iam-nav) {
-  min-height: #{rem(96)};
+  min-height: 6rem; /* 96 */
   display: block;
   position: relative;
 
@@ -126,7 +126,7 @@ nav:has(iam-nav) {
 
 @media screen and (min-width: 62em) {
   nav:has(iam-nav a[slot='secondary']) {
-    min-height: #{rem(96 + 40)};
+    min-height: 8.5rem; /* 96 + 40 */
   }
 }
 
@@ -187,10 +187,10 @@ body[data-direction='down'].past100 nav:has(.nav--sticky) .nav--sticky{
 
 // #region General styles
 iam-nav {
-  --nav-height: #{rem(96)};
+  --nav-height: 6rem; /* 96 */
 
   &:has(a[slot='secondary']) {
-    --nav-height: #{rem(96 + 40)};
+    --nav-height: 8.5rem; /* 96 + 40 */
   }
 
   overscroll-behavior: contain !important;
@@ -202,7 +202,6 @@ iam-nav {
   padding-top: 1.5rem;
   padding-bottom: 1.5rem;
   width: 100%;
-  //max-width: rem(1280);
 
   .brand {
     font-size: 3rem;
@@ -289,113 +288,113 @@ iam-nav details {
 // #endregion
 
 // #region mobile and tablet mega menu
-
-@mixin mobDetails() {
-
-  margin-left: -1.5rem;
-  margin-right: -1.5rem;
-  padding-inline: 1.5rem;
-  width: auto;
-  position: relative;
-
-  summary {
-    background-color: var(--colour-canvas-2);
-
-    /*
-    @container style(--theme: dark) {
-      background-color: var(--colour-canvas-2);
-    }
-      */
-    display: block;
-    border: none;
-    color: var(--colour-link);
-    margin: 0;
+iam-nav details {
+  @container style(--mobDetails) {
 
     margin-left: -1.5rem;
     margin-right: -1.5rem;
-    padding: 1.5rem 4rem 1.5rem 1.5rem;
-    font-size: 1rem;
-    line-height: 1.5rem;
-    min-height: 1.5rem;
+    padding-inline: 1.5rem;
+    width: auto;
     position: relative;
-    font-weight: normal;
 
-    &:after {
-      content: '\f055';
+    summary {
+      background-color: var(--colour-canvas-2);
+
+      /*
+      @container style(--theme: dark) {
+        background-color: var(--colour-canvas-2);
+      }
+        */
       display: block;
-      font-size: 1.5rem;
-      font-weight: 300;
-      position: absolute;
-      top: 1.5rem;
-      right: 1.5rem;
-      font-family: 'Font Awesome 6 Pro';
-      line-height: 1em;
+      border: none;
+      color: var(--colour-link);
+      margin: 0;
+
+      margin-left: -1.5rem;
+      margin-right: -1.5rem;
+      padding: 1.5rem 4rem 1.5rem 1.5rem;
+      font-size: 1rem;
+      line-height: 1.5rem;
+      min-height: 1.5rem;
+      position: relative;
+      font-weight: normal;
+
+      &:after {
+        content: '\f055';
+        display: block;
+        font-size: 1.5rem;
+        font-weight: 300;
+        position: absolute;
+        top: 1.5rem;
+        right: 1.5rem;
+        font-family: 'Font Awesome 7 Pro';
+        line-height: 1em;
+      }
     }
-  }
 
-  &[open] > summary:after {
-    content: '\f056';
-    font-weight: bold;
-  }
+    &[open] > summary:after {
+      content: '\f056';
+      font-weight: bold;
+    }
 
-  a {
-    text-decoration: none;
-    display: block;
-    border: none;
-    color: var(--colour-link);
-    margin: 0;
-    margin-left: 3rem;
-    padding: 1.5rem 0 1.5rem 0;
-    font-size: 1rem;
-    line-height: 1.5rem;
-    min-height: 1.5rem;
-    position: relative;
-    font-weight: normal;
+    a {
+      text-decoration: none;
+      display: block;
+      border: none;
+      color: var(--colour-link);
+      margin: 0;
+      margin-left: 3rem;
+      padding: 1.5rem 0 1.5rem 0;
+      font-size: 1rem;
+      line-height: 1.5rem;
+      min-height: 1.5rem;
+      position: relative;
+      font-weight: normal;
 
-    &:after {
-      background: var(--colour-border) !important;
-      top: calc(100% - 2px) !important;
-      width: 100% !important;
+      &:after {
+        background: var(--colour-border) !important;
+        top: calc(100% - 2px) !important;
+        width: 100% !important;
+      }
     }
-  }
 
-  // Hide cards
-  a:has(iam-card) {
-    display: none !important;
-  }
+    // Hide cards
+    a:has(iam-card) {
+      display: none !important;
+    }
 
-  > div a:last-child {
-    margin-bottom: 0 !important;
-  }
+    > div a:last-child {
+      margin-bottom: 0 !important;
+    }
 
-  > div a:last-child:after {
-    display: none;
-  }
+    > div a:last-child:after {
+      display: none;
+    }
 
-  &:after {
-    content: '';
-    position: absolute;
-    top: calc(100% - 2px);
-    left: 1.5rem;
-    height: 2px;
-    width: calc(100% - 3rem);
-    display: block;
-    height: 2px;
-    background-color: var(--colour-border) !important;
+    &:after {
+      content: '';
+      position: absolute;
+      top: calc(100% - 2px);
+      left: 1.5rem;
+      height: 2px;
+      width: calc(100% - 3rem);
+      display: block;
+      height: 2px;
+      background-color: var(--colour-border) !important;
+    }
   }
 }
-
 @media screen and (max-width: 62em) {
 
   iam-nav details {
 
     background-color: #eeeeee;
   }
-  iam-nav details {
-    @include mobDetails();
+  iam-nav {
+    --mobDetails: 'true';
 
     // Sub details
-    details {
+    details details {
       &:after {
         display: none;
       }
@@ -408,7 +407,7 @@ iam-nav details {
       summary:after {
         left: 1.5rem;
         font-size: 1rem;
-        top: rem(3);
+        top: 0.1875rem; /* 3 */
         transform: none;
         font-weight: 400;
       }
@@ -418,7 +417,7 @@ iam-nav details {
       }
     }
 
-    a + details > summary {
+    details a + details > summary {
       padding-top: 1.5rem;
 
       &:after {
@@ -426,7 +425,7 @@ iam-nav details {
       }
     }
 
-    details[open] + details:before {
+    details details[open] + details:before {
       content: '';
       display: block;
       background: var(--colour-canvas-2);
@@ -440,40 +439,42 @@ iam-nav details {
 // #endregion
 
 // #region tablet mega menu tweaks
+iam-nav details {
 
-@mixin tabletDetails() {
-  padding-right: 2.5rem;
-  margin-right: -2.5rem;
-
-  &:after {
-    width: calc(100% - 4rem);
-  }
-
-  summary {
+  @container style(--tabletDetails) {
     padding-right: 2.5rem;
     margin-right: -2.5rem;
 
     &:after {
-      right: 2.5rem;
+      width: calc(100% - 4rem);
+    }
+
+    summary {
+      padding-right: 2.5rem;
+      margin-right: -2.5rem;
+
+      &:after {
+        right: 2.5rem;
+      }
     }
   }
 }
 
 @media screen and (max-width: 62em) and (min-width: 36em) {
-  iam-nav details {
-    @include tabletDetails();
+  iam-nav {
+    --tabletDetails: 'true';
   }
 
   iam-nav details details[open] + details:before {
     padding-right: 2.5rem;
-    margin-right: rem(-40);
+    margin-right: -2.5rem; /* -40 */
   }
 }
 
 @media screen and (min-width: 62em) {
-  iam-nav .nav--menu details {
-    @include mobDetails();
-    @include tabletDetails();
+  iam-nav .nav--menu {
+    --mobDetails: 'true';
+    --tabletDetails: 'true';
   }
 }
 
@@ -491,8 +492,8 @@ iam-nav details {
       color: var(--colour-link);
       margin: 0;
       font-size: 1rem;
-      line-height: rem(96);
-      min-height: rem(96);
+      line-height: 6rem; /* 96 */
+      min-height: 6rem; /* 96 */
       margin-block: -1.5rem;
       position: relative;
       font-weight: normal;
@@ -508,7 +509,7 @@ iam-nav details {
         top: 50%;
         transform: translate(0, -50%);
         right: 0;
-        font-family: 'Font Awesome 6 Pro';
+        font-family: 'Font Awesome 7 Pro';
         line-height: 1em;
       }
     }
@@ -573,10 +574,10 @@ iam-nav details {
       background: var(--colour-canvas);
 
 
-      padding-top: rem(40 + 88);
-      padding-bottom: rem(64);
+      padding-top: 8rem; /* (40 + 88); */
+      padding-bottom: 4rem; /* 64 */
       columns: 3;
-      column-gap: rem(110);
+      column-gap: 6.875rem;
 
       > a {
         margin-right: 0 !important;
@@ -606,7 +607,7 @@ iam-nav details {
         ) !important;
         font-size: 2rem;
         font-weight: bold;
-        line-height: rem(88);
+        line-height: 5.5rem;
 
         --gradient-direction: 90deg;
         background-color: var(--colour-info-theme);
@@ -621,7 +622,7 @@ iam-nav details {
         column-gap: 1rem;
 
         a:not(:has(iam-card)) {
-          margin-right: rem(94) !important;
+          margin-right: 5.875rem !important;
         }
 
         a:has(iam-card) {
@@ -701,7 +702,7 @@ iam-nav details {
   iam-nav.nav--large *:not(.nav--menu) > details {
     &[open] > div:not(:has(details)) {
       columns: 4;
-      column-gap: rem(110);
+      column-gap: 6.875rem;
     }
   }
 }
@@ -772,7 +773,7 @@ iam-nav > .dialog__wrapper {
     --compact-size: 2rem;
     all: unset;
     display: block !important;
-    font-size: rem(14) !important;
+    font-size: 0.875rem !important;
     line-height: 2rem !important;
     height: 2rem !important;
     min-height: 2rem !important;
@@ -834,7 +835,7 @@ iam-nav .nav--menu {
     margin: 0 !important;
 
     &:not(.mb-0):not(:has(+ a)) {
-      margin: 0 0 rem(36) 0 !important;
+      margin: 0 0 2.25rem 0 !important;
     }
 
     flex-shrink: 0;

package/assets/sass/components/nav.preload.scss

@@ -46,7 +46,7 @@
 
       @media screen and (min-width: 62em) {
         &:has([slot='secondary']) {
-          padding-top: rem(64);
+          padding-top: 4rem; /* 64 */
         }
       }
     }

package/assets/sass/components/notification.scss

@@ -5,12 +5,12 @@
 :host,
 .iam-notification {
   display: block;
-  padding: rem(22) 1.5rem rem(22) rem(24 - 8) !important;
+  padding: 1.375rem 1.5rem 1.375rem 1rem;
   border-radius: 0.5rem;
   box-shadow: 2px 6px 12px rgba(0, 0, 0, 0.2);
   margin-bottom: 1rem;
-  font-size: rem(15);
-  border: rem(2) solid var(--colour, var(--colour-info));
+  font-size: 0.9375rem;
+  border: 2px solid var(--colour, var(--colour-info));
   outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
   background: var(--colour-notification-bg);
 
@@ -29,26 +29,23 @@
 
 :host([data-type]),
 .iam-notification[data-type] {
-  border: rem(2) solid transparent;
+  border: 2px solid transparent;
 }
 
 
-:host(.colour-warning),
-.iam-notification.colour-warning {
-  background: var(--colour-notification-warning-bg);
-}
+:host([class*="colour-"]) {
+  
+  --bg-colour: color-mix(in oklab, var(--colour), #ffffff 80%) !important;
+  background: var(--bg-colour);
 
-  :host(.colour-danger),
-  .iam-notification.colour-danger {
-    
-  background: var(--colour-notification-danger-bg);
+  
+  --colour-heading: var(--colour-primary-theme);
+  --colour-body: var(--colour-primary-theme);
+  > * {
+    color-scheme: light;
   }
+}
 
-  :host(.colour-success),
-  .iam-notification.colour-success {
-    
-  background: var(--colour-notification-success-bg);
-  }
 
 :host(.bg-white),
 .iam-notification.bg-white {
@@ -85,13 +82,15 @@
   display: block;
 
   width: 100%;
-  max-width: rem(360);
+  max-width: 22.5rem;
 }
 
 :host([data-type='toast'].notification--dismissable) {
-  max-width: rem(454);
+  max-width: 28.375rem;
 }
 
+
+
 .notification {
   container-type: inline-size;
   display: flex;
@@ -199,3 +198,21 @@
     }
   }
 }
+
+// #region no icon
+:host(.notification--no-icon) {
+  .notification__icon {
+    display: none;
+  }
+}
+// #endregion
+
+
+// #region no background
+:host(.notification--no-bg){
+  box-shadow: none;
+  background: none!important;
+  padding: 0;
+  border: 0 !important;
+}
+// #endregion

package/assets/sass/components/pagination.scss

@@ -1,6 +1,6 @@
 @use '../_func' as *;
-@use '../elements/forms.scss' as *;
-@use '../elements/buttons.scss' as *;
+@use '../elements/forms' as *;
+@use '../elements/buttons' as *;
 
 @use '../utilities/margins' as *;
 
@@ -37,7 +37,7 @@
 // #region page jump and per page
 .pagination div:is(.page-jump, .per-page) {
   border: 1px solid var(--colour-light);
-  height: rem(52);
+  height: 3.25rem; /* (52); */
 
   display: none;
   align-items: center;
@@ -121,8 +121,8 @@
 // #region buttons
 *:where(.prev, .next) {
   border: 1px solid var(--colour-light);
-  line-height: rem(52);
-  height: rem(52);
+  line-height: 3.25rem; /* (52); */
+  height: 3.25rem; /* (52); */
   margin: 0;
   display: none;
   background: none;
@@ -137,7 +137,7 @@
     margin-left: 0.5em;
     font-size: 0.8rem;
     content: '\f054';
-    font-family: 'Font Awesome 6 Pro';
+    font-family: 'Font Awesome 7 Pro';
     color: var(--colour-info);
   }
 
@@ -181,7 +181,7 @@
     margin-right: 0.5em;
     font-size: 0.8rem;
     content: '\f053';
-    font-family: 'Font Awesome 6 Pro';
+    font-family: 'Font Awesome 7 Pro';
     color: var(--colour-info);
   }
 }

package/assets/sass/components/password.component.scss

@@ -1,5 +1,5 @@
 @use '../func' as *;
-@use '../elements/prefix.scss' as *;
+@use '../elements/prefix' as *;
 
 *,
 *::before,

package/assets/sass/components/popover.component.scss

@@ -1,4 +1,4 @@
-@use '../_func.scss' as *;
+@use '../_func' as *;
 
 @layer components {
 
@@ -19,10 +19,10 @@
     }
 
     @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); */
     }
   } 
 }

package/assets/sass/components/property-searchbar.scss

@@ -104,7 +104,7 @@
   padding: 1rem;
   background-color: #fff;
   width: 100%;
-  border-radius: rem(10);
+  border-radius: 0.625rem; /* 10 */
   -webkit-box-shadow: 0 2px 4px 0 rgb(0 0 0 / 24%);
   box-shadow: 0 2px 4px 0 rgb(0 0 0 / 24%);
   position: relative;