@iamproperty/components 7.6.1 → 7.6.3--beta1

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

@@ -1,7 +1,7 @@
 @use 'sass:math';
 @use '../_func' as *;
 
-$darkMode: 'true' !default;
+
 
 // Default colour 
 iam-nav {
@@ -52,7 +52,7 @@ iam-nav:is(.bg-primary, .bg-danger, .bg-dark) {
   }
 
 
-@include media-breakpoint-up(md) {
+@media screen and (min-width: 62em) {
   iam-nav:is(.bg-primary, .bg-danger, .bg-dark) {
     > :not([slot="logo"],[slot="secondary"],[slot="menus"]) {
       color-scheme: dark;
@@ -124,7 +124,7 @@ nav:has(iam-nav) {
   }
 }
 
-@include media-breakpoint-up(md) {
+@media screen and (min-width: 62em) {
   nav:has(iam-nav a[slot='secondary']) {
     min-height: #{rem(96 + 40)};
   }
@@ -168,7 +168,7 @@ nav:has(iam-nav.nav--sticky) {
   }
 }
 
-@include media-breakpoint-up(sm) {
+@media screen and (min-width: 36em) {
   body:has(iam-nav.open:not(.nav--sticky)) {
     max-height: 100vh;
     overflow: hidden;
@@ -195,14 +195,14 @@ iam-nav {
   margin-left: auto;
   margin-right: auto;
   padding: var(--container-padding);
-  padding-top: rem(24);
-  padding-bottom: rem(24);
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
   width: 100%;
   //max-width: rem(1280);
 
   .brand {
-    font-size: rem(48);
-    height: rem(48);
+    font-size: 3rem;
+    height: 3rem;
     padding: 0;
     text-decoration: none;
     min-width: min(var(--svg-width), 14rem);
@@ -319,7 +319,7 @@ iam-nav details {
     &:after {
       content: '\f055';
       display: block;
-      font-size: rem(24);
+      font-size: 1.5rem;
       font-weight: 300;
       position: absolute;
       top: 1.5rem;
@@ -397,13 +397,13 @@ iam-nav details {
       }
 
       summary {
-        padding: 0 1.5rem rem(24) 3.5rem;
+        padding: 0 1.5rem 1.5rem 3.5rem;
         position: relative;
       }
 
       summary:after {
         left: 1.5rem;
-        font-size: rem(16);
+        font-size: 1rem;
         top: rem(3);
         transform: none;
         font-weight: 400;
@@ -438,16 +438,16 @@ iam-nav details {
 // #region tablet mega menu tweaks
 
 @mixin tabletDetails() {
-  padding-right: rem(40);
-  margin-right: rem(-40);
+  padding-right: 2.5rem;
+  margin-right: -2.5rem;
 
   &:after {
     width: calc(100% - 4rem);
   }
 
   summary {
-    padding-right: rem(40);
-    margin-right: rem(-40);
+    padding-right: 2.5rem;
+    margin-right: -2.5rem;
 
     &:after {
       right: 2.5rem;
@@ -461,7 +461,7 @@ iam-nav details {
   }
 
   iam-nav details details[open] + details:before {
-    padding-right: rem(40);
+    padding-right: 2.5rem;
     margin-right: rem(-40);
   }
 }
@@ -476,7 +476,7 @@ iam-nav details {
 // #endregion
 
 // #region Desktop mega menu
-@include media-breakpoint-up(md) {
+@media screen and (min-width: 62em) {
   iam-nav > details,
   iam-nav *:not(.nav--menu) > details {
     width: auto;
@@ -493,12 +493,12 @@ iam-nav details {
       position: relative;
       font-weight: normal;
       white-space: nowrap;
-      padding-right: rem(24);
+      padding-right: 1.5rem;
 
       &:after {
         content: '\f078';
         display: block;
-        font-size: rem(16);
+        font-size: 1rem;
         font-weight: 300;
         position: absolute;
         top: 50%;
@@ -600,7 +600,7 @@ iam-nav details {
           var(--padding-inline),
           calc((100% - var(--container-max-width)) / 2 + var(--padding-inline))
         ) !important;
-        font-size: rem(32);
+        font-size: 2rem;
         font-weight: bold;
         line-height: rem(88);
 
@@ -614,7 +614,7 @@ iam-nav details {
       }
 
       &:has(iam-card) {
-        column-gap: rem(16);
+        column-gap: 1rem;
 
         a:not(:has(iam-card)) {
           margin-right: rem(94) !important;
@@ -633,7 +633,7 @@ iam-nav details {
 
     a:not([slot='logo']):not(.btn):not(:has(iam-card)) {
       font-size: 1rem;
-      line-height: rem(24);
+      line-height: 1.5rem;
       padding-block: 1.5rem;
       position: relative;
       font-weight: normal;
@@ -674,7 +674,7 @@ iam-nav details {
     }
 
     details:not(:first-child) > summary {
-      margin-left: rem(32);
+      margin-left: 2rem;
     }
   }
 
@@ -705,7 +705,7 @@ iam-nav details {
 // #endregion
 
 // #region Search
-@include media-breakpoint-up(md) {
+@media screen and (min-width: 62em) {
   iam-nav {
     &.search-open {
       > *:not([slot='logo']):not([slot='secondary']):not([slot='search']) {
@@ -717,10 +717,10 @@ iam-nav details {
 // #endregion
 
 // #region Dual navbar in desktop
-@include media-breakpoint-up(md) {
+@media screen and (min-width: 62em) {
   iam-nav:has([slot='dual']) {
     .brand:has(~ [slot='dual']) {
-      margin-right: rem(24) !important;
+      margin-right: 1.5rem !important;
     }
 
     *:not([slot='dual']):has(+ [slot='dual']) + [slot='dual'] {
@@ -769,10 +769,10 @@ iam-nav > .dialog__wrapper {
     all: unset;
     display: block !important;
     font-size: rem(14) !important;
-    line-height: rem(32) !important;
-    height: rem(32) !important;
-    min-height: rem(32) !important;
-    max-height: rem(32) !important;
+    line-height: 2rem !important;
+    height: 2rem !important;
+    min-height: 2rem !important;
+    max-height: 2rem !important;
     width: 100% !important;
     margin: 0 !important;
     cursor: pointer;

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

@@ -1,11 +1,11 @@
 @use 'sass:math';
 @use '../_func' as *;
 
-$layers: 'true' !default;
-$mobileOnly: 'false' !default;
-$darkMode: 'true' !default;
 
-@include layer('components', $layers) {
+
+
+
+@layer components {
   nav:has(iam-nav) {
     grid-column: container;
   }
@@ -19,14 +19,14 @@ $darkMode: 'true' !default;
     column-grid: container;
 
     .brand {
-      font-size: rem(48);
-      height: rem(48);
+      font-size: 3rem;
+      height: 3rem;
       padding: 0;
       text-decoration: none;
       min-width: min(var(--svg-width), 14rem);
     }
 
-    @include media-breakpoint-up(md, $mobileOnly) {
+    @media screen and (min-width: 62em) {
       padding-inline: max(
         var(--padding-inline),
         calc((100% - var(--container-max-width)) / 2 + var(--padding-inline))
@@ -44,7 +44,7 @@ $darkMode: 'true' !default;
         display: none;
       }
 
-      @include media-breakpoint-up(md, $mobileOnly) {
+      @media screen and (min-width: 62em) {
         &:has([slot='secondary']) {
           padding-top: rem(64);
         }

package/assets/sass/components/notification.scss

@@ -1,12 +1,12 @@
 @use '../_func' as *;
 
-$darkMode: 'true' !default;
+
 
 :host,
 .iam-notification {
   display: block;
-  padding: rem(22) rem(24) rem(22) rem(24 - 8) !important;
-  border-radius: rem(8);
+  padding: rem(22) 1.5rem rem(22) rem(24 - 8) !important;
+  border-radius: 0.5rem;
   box-shadow: 2px 6px 12px rgba(0, 0, 0, 0.2);
   margin-bottom: 1rem;
   font-size: rem(15);
@@ -53,7 +53,7 @@ $darkMode: 'true' !default;
 :host(.bg-white),
 .iam-notification.bg-white {
   border: none;
-  border-left: rem(8) solid var(--colour-info);
+  border-left: 0.5rem solid var(--colour-info);
 
   ::slotted(i),
   i {
@@ -94,18 +94,16 @@ $darkMode: 'true' !default;
 
 .notification {
   container-type: inline-size;
-  max-width: rem(1112);
-  margin-inline: auto;
   display: flex;
   flex-wrap: nowrap;
   color: var(--colour-heading);
 
   .notification__icon {
-    margin-inline-end: rem(16);
+    margin-inline-end: 1rem;
     flex-grow: 0;
 
     ::slotted(i) {
-      font-size: rem(18);
+      font-size: 1.125rem; /* 18/16 */
     }
   }
 
@@ -137,19 +135,19 @@ $darkMode: 'true' !default;
     ::slotted(a),
     ::slotted(button),
     > * {
-      margin: rem(16) rem(16) 0 0 !important;
+      margin: 1rem 1rem 0 0 !important;
     }
 
     @container (width > 23.4375em) {
       display: flex;
       align-items: center;
       border-left: 1px solid currentColor;
-      margin-left: rem(32);
+      margin-left: 2rem;
 
       ::slotted(a),
       ::slotted(button),
       > * {
-        margin: 0 0 0 rem(32) !important;
+        margin: 0 0 0 2rem !important;
       }
     }
   }
@@ -166,8 +164,8 @@ $darkMode: 'true' !default;
       text-indent: 300%;
       overflow: hidden;
       border: none;
-      height: rem(18);
-      width: rem(18);
+      height: 1.125rem; /* 18/16 */
+      width: 1.125rem; /* 18/16 */
       background: transparent;
       display: inline-block;
       position: relative;
@@ -179,8 +177,8 @@ $darkMode: 'true' !default;
         left: 0;
         position: absolute;
         display: block;
-        height: rem(18);
-        width: rem(18);
+        height: 1.125rem; /* 18/16 */
+        width: 1.125rem; /* 18/16 */
         z-index: var(--index-focus);
         background: currentColor;
         mask-image: var(--icon-close);
@@ -195,7 +193,7 @@ $darkMode: 'true' !default;
     }
 
     @container (width > 23.4375em) {
-      padding-left: rem(32);
+      padding-left: 2rem;
       display: flex;
       align-items: center;
     }

package/assets/sass/components/pagination.scss

@@ -2,7 +2,7 @@
 @use '../elements/forms.scss' as *;
 @use '../elements/buttons.scss' as *;
 
-@include margins();
+@use '../utilities/margins' as *;
 
 :host {
   container-type: inline-size;
@@ -16,11 +16,11 @@
 .pagination {
   display: block;
 
-  @include container-up(sm) {
+  @media screen and (min-width: 36em) {
     display: flex;
     align-items: center;
     justify-content: space-between !important;
-    padding-top: rem(32);
+    padding-top: 2rem;
   }
 
   > div {
@@ -46,7 +46,7 @@
   .select--minimal {
     height: calc(3.25rem - 1em);
     line-height: calc(3.25rem - 1em);
-    margin-left: rem(-16);
+    margin-left: -1rem;
     font-weight: bold;
   }
 
@@ -72,7 +72,7 @@
     display: flex !important;
   }
 }
-@include container-up(sm) {
+@media screen and (min-width: 36em) {
   :host([data-page-jump]) {
     .page-jump {
       display: flex !important;
@@ -80,14 +80,14 @@
   }
 }
 
-@include container-up(sm) {
+@media screen and (min-width: 36em) {
   :host([data-per-page]:not([data-page-jump][data-item-count])) {
     .per-page {
       display: flex !important;
     }
   }
 }
-@include container-up(md) {
+@media screen and (min-width: 62em) {
   :host([data-per-page][data-page-jump][data-item-count]) {
     .per-page {
       display: flex !important;
@@ -100,11 +100,11 @@
 .pagination > .item-count {
   display: block;
   text-align: center;
-  margin-bottom: rem(16);
+  margin-bottom: 1rem;
   margin-inline: auto;
 }
 
-@include container-up(sm) {
+@media screen and (min-width: 36em) {
   .pagination > .item-count {
     display: none;
   }
@@ -129,7 +129,7 @@
   padding-inline: 1rem;
   color: var(--colour-body);
 
-  @include container-up(sm) {
+  @media screen and (min-width: 36em) {
     display: inline-block;
   }
 
@@ -163,7 +163,7 @@
   .pagination {
     justify-content: flex-end;
 
-    @include container-up(sm) {
+    @media screen and (min-width: 36em) {
       justify-content: space-between;
     }
   }
@@ -194,7 +194,7 @@
 
 :host([data-minimal]) {
   .pagination {
-    padding-top: rem(24);
+    padding-top: 1.5rem;
     display: flex;
     align-items: center;
     justify-content: flex-end;
@@ -204,7 +204,7 @@
   }
 }
 
-@include container-up(sm) {
+@media screen and (min-width: 36em) {
   .mobile-controls {
     display: none !important;
   }
@@ -217,13 +217,13 @@
 
 .fa-spin {
   display: none !important;
-  font-size: rem(48);
+  font-size: 3rem;
   color: var(--colour-info);
 }
 
 :host([data-loading]) {
   .mobile-controls {
-    padding-top: rem(32);
+    padding-top: 2rem;
   }
   .item-count,
   .mobile-controls > *:not(.fa-spin) {

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

@@ -1,10 +1,6 @@
 @use '../func' as *;
 @use '../elements/prefix.scss' as *;
 
-$icon-error: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d='M256 32a224 224 0 1 1 0 448 224 224 0 1 1 0-448zm0 480A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c-8.8 0-16 7.2-16 16V272c0 8.8 7.2 16 16 16s16-7.2 16-16V144c0-8.8-7.2-16-16-16zm24 224a24 24 0 1 0 -48 0 24 24 0 1 0 48 0z' fill='#dc3545'/></svg>");
-
-$icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d='M441 103c9.4 9.4 9.4 24.6 0 33.9L177 401c-9.4 9.4-24.6 9.4-33.9 0L7 265c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l119 119L407 103c9.4-9.4 24.6-9.4 33.9 0z' fill='#0f9d58' /></svg>");
-
 *,
 *::before,
 *::after {
@@ -30,12 +26,12 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
 // Password checker
 .invalid-feedback {
   color: var(--colour-danger);
-  margin-top: rem(8);
-  background-image: escape-svg($icon-error);
+  margin-top: 0.5rem;
+  background-image: var(--icon-error);
   background-repeat: no-repeat;
   background-position: left top 1px;
-  background-size: var(--input-fs, #{rem(16)}) var(--input-fs, #{rem(16)});
-  padding-left: calc(var(--input-fs, #{rem(16)}) + #{rem(8)});
+  background-size: var(--input-fs, 1rem) var(--input-fs, 1rem);
+  padding-left: calc(var(--input-fs, 1rem) + 0.5rem);
   //display: none;
 }
 
@@ -48,11 +44,11 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
   margin-top: 0.5rem;
 }
 .pwd-checker.invalid-feedback {
-  background-image: escape-svg($icon-error);
+  background-image: var(--icon-error);
 }
 
 .pwd-checker:not(.invalid-feedback) {
-  background-image: escape-svg($icon-tick) !important;
+  background-image: var(--icon-tick) !important;
 }
 label:has(.pwd-checker.invalid-feedback):after {
   display: none !important;

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

@@ -4,13 +4,13 @@
 
   :host {
     
-    padding: rem(16);
+    padding: 1rem;
     max-width: calc(anchor-size(width) * 2) !important;
 
     position: absolute;
     position-area: bottom span-x-end;
-    margin:  #{rem(4)};
-    padding: rem(16);
+    margin:  0.25rem;
+    padding: 1rem;
     max-width: calc(anchor-size(width) * 2) !important;
     position-try-fallbacks: top span-x-end, bottom span-x-start, top span-x-start;
 
@@ -18,10 +18,10 @@
       display: none;
     }
 
-    @include media-breakpoint-up(sm, $mobileOnly) {
+    @media screen and (min-width: 36em) {
       width: rem(335);
     }
-    @include media-breakpoint-up(md, $mobileOnly) {
+    @media screen and (min-width: 62em) {
       width: rem(360);
     }
   } 

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

@@ -5,7 +5,7 @@
   fieldset {
     position: relative;
 
-    @include media-breakpoint-up(md, $mobileOnly) {
+    @media screen and (min-width: 62em) {
       position: relative;
       padding-right: 1.5rem;
 
@@ -26,18 +26,18 @@
   .form-control__wrapper {
     margin-bottom: 1rem;
 
-    @include media-breakpoint-up(md, $mobileOnly) {
+    @media screen and (min-width: 62em) {
       margin-bottom: 0;
     }
   }
 
   .form-label,
   label {
-    font-size: rem(14);
+    font-size: 0.875rem; /* 14/16 */
     text-transform: uppercase;
   }
 
-  @include media-breakpoint-up(md, $mobileOnly) {
+  @media screen and (min-width: 62em) {
     .row .row {
       .form-label {
         display: none;
@@ -64,7 +64,7 @@
     right: 0.5rem;
     width: 5rem;
 
-    @include media-breakpoint-up(md, $mobileOnly) {
+    @media screen and (min-width: 62em) {
       right: 1.5rem;
     }
 
@@ -78,7 +78,7 @@
     }
   }
 
-  @include media-breakpoint-up(md, $mobileOnly) {
+  @media screen and (min-width: 62em) {
     .property-searchbar__btn {
       align-items: flex-end;
     }
@@ -88,7 +88,7 @@
     margin-top: 1rem;
     margin-bottom: 1rem;
 
-    @include media-breakpoint-up(md, $mobileOnly) {
+    @media screen and (min-width: 62em) {
       margin: 0;
       padding-left: 3.5rem;
       padding-right: 3.5rem;
@@ -109,8 +109,8 @@
   box-shadow: 0 2px 4px 0 rgb(0 0 0 / 24%);
   position: relative;
 
-  @include media-breakpoint-up(md, $mobileOnly) {
-    border-radius: rem(48);
+  @media screen and (min-width: 62em) {
+    border-radius: 3rem;
     padding: 1.5rem 2.5rem;
 
     .form-label,

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

@@ -2,7 +2,7 @@
 
 @use '../_func.scss' as *;
 
-@use '../elements/type.scss' as *;
+@use '../elements/type' as *;
 
 *,
 *::before,
@@ -72,9 +72,9 @@
   align-items: center;
   flex-direction: column;
   justify-content: center;
-  padding-top: rem(12);
+  padding-top: 0.75rem;
   padding-inline: rem(5);
-  padding-bottom: rem(12);
+  padding-bottom: 0.75rem;
   height: rem(84);
   position: relative;
   border-radius: 0 0 4px 4px;

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

@@ -1,9 +1,9 @@
 @use 'sass:map';
 @use '../_func.scss' as *;
 
-@use '../elements/type.scss' as *;
+@use '../elements/type' as *;
 
-@include max-height();
+@use '../utilities/max-height' as *;
 
 :host {
   overflow: visible;

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

@@ -2,7 +2,7 @@
 
 @use '../_func.scss' as *;
 
-@use '../elements/type.scss' as *;
+@use '../elements/type' as *;
 
 *,
 *::before,
@@ -51,11 +51,11 @@ iam-rankings {
     &:before {
       counter-increment: countItem; /* Increment the value of section counter by 1 */
       content: counter(countItem) '.';
-      font-size: rem(32);
-      line-height: rem(40);
+      font-size: 2rem;
+      line-height: 2.5rem;
       font-weight: bolder;
       color: var(--colour-primary);
-      width: rem(48);
+      width: 3rem;
       text-align: center;
       margin-top: 0.5rem;
     }
@@ -124,9 +124,9 @@ iam-rankings {
     --colour: var(--wider-colour-7);
   }
 
-  @each $index, $value in $chart-colors {
-    tr:nth-child(#{$index + 1}) progress {
-      --colour: var(--chart-colour-#{$index}, #{$value});
+  @for $i from 1 through 10 {
+    tr:nth-child(#{$i}) progress {
+      --colour: var(--chart-colour-#{$i});
     }
   }
 }