@iamproperty/components 7.6.3--beta2 → 7.6.3

package/assets/sass/elements/buttons--compact.scss

@@ -147,7 +147,8 @@
       .fa-down,
       .fa-chevron-down,
       .fa-plus,
-      .fa-bars
+      .fa-bars,
+      .fa-edit
     ) {
       --iso-display: block;
       --iso-font-size: 1.5rem;
@@ -158,10 +159,14 @@
     @container style(--font-body) {
 
       font-size: var(--iso-font-size, 0.6rem)!important;
-      border-radius: var(--iso-border-radius, 0)!important;
       text-indent: var(--iso-text-indent, 0px);
       white-space: initial;
 
+      &:not(.btn-action){
+        
+        border-radius: var(--iso-border-radius, 0.25rem)!important;
+      }
+
       &:before {
         display: var(--iso-display, none);
         font-family: monospace!important;
@@ -173,7 +178,11 @@
 
       text-indent: -500px;
       font-size: 1rem!important;
-      border-radius: 50%!important;
+
+      &:not(.btn-action){
+        border-radius: 50%!important;
+      }
+      
 
       &:before {
         font-family: "Font Awesome 6 Pro"!important;

package/assets/sass/elements/buttons--special.scss

@@ -11,10 +11,11 @@
       display: none;
     }
 
-    &:after {
+    &:not(:has(i)):after {
       content: '';
 
       display: inline-block;
+      margin-right: -0.5em;
       margin-left: 1em;
 
       height: 0.8em;

package/assets/sass/elements/forms.scss

@@ -3,6 +3,7 @@
 
 @use '../_func' as *;
 
+@use './label' as *;
 @use './input' as *;
 
 
@@ -13,9 +14,6 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
 @layer elements {
   // #region RESETS
 
-  label {
-    display: inline-block; // 1
-  }
 
   // 1. Remove the margin in Firefox and Safari
   select,
@@ -103,19 +101,6 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
 
   // #endregion
 
-  // #region Form label
-  :is(label:not(.tag), .label) {
-    font-size: 1.125rem; /* 18/16 */
-    line-height: rem(21);
-    margin-bottom: 0.5rem;
-    font-weight: normal;
-    color: var(--colour-heading);
-    display: block;
-  }
-  // #endregion
-
-
-
   // #region input field
   :is(select:not(.select--minimal, .btn)) {
     
@@ -1107,7 +1092,7 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
   z-index: 100;
   top: 100%;
   position: absolute;
-  background-color: white;
+  background-color: var(--colour-canvas);
   border-top: none;
 
   &:not(:empty):has(option:not(.hide)){
@@ -1126,7 +1111,7 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
   display: none;
 
   option {
-    background-color: white;
+    background-color: var(--colour-canvas);
     padding: 0.5rem;
     
     cursor: pointer;
@@ -1136,9 +1121,9 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
     font-weight: inherit !important;
     font-family: inherit !important;
     font-size: 1rem !important;
-    line-height: rem(19) !important;
+    line-height: rem(24) !important;
     margin: var(--menu-item-margin, 0 0 0.25rem 0) !important;
-    padding-block: var(--menu-item-padding, 0.5rem) !important;
+    padding-block: var(--menu-item-padding, 0.25rem) !important;
     width: 100% !important;
     max-width: 100% !important;
     text-align: var(--menu-item-text-align, left) !important;
@@ -1152,6 +1137,7 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
 
     &:is(:hover, :focus) {
       background: var(--colour-light) !important;
+      color: #595959 !important;
       border-radius: 0.25rem !important;
     }
 
@@ -1168,6 +1154,32 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
   }
 }
 
+.dark-theme :is(iam-advanced-select, iam-search, iam-address-lookup, .postcode-lookup) datalist {
+
+  color-scheme: dark;
+}
+
+@media (prefers-color-scheme: dark) {
+  html:not(.light-theme) :is(.bg-primary, .bg-danger, .bg-dark):not(iam-header) {
+
+    --colour-heading: var(--colour-primary-theme);
+    --colour-body: var(--colour-primary-theme);
+    color: var(--colour-primary-theme);
+
+    // Apply the light colour scheme not on the background element but just its children so that the background colour isn't overwritten
+    > * {
+      color-scheme: light;
+    }
+  }
+
+  html:not(.light-theme) .bg-light {
+
+    color-scheme: light;
+  }
+}
+
+
+
 :is(iam-advanced-select, iam-search, iam-address-lookup, .postcode-lookup > div):is(:focus-within,:has(*:active),:active) datalist {
 
   display: block;
@@ -1183,7 +1195,7 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
   position: absolute;
   border-radius: 0.5rem;
   box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.1);
-  width: var(--menu-item-width, 50rem) !important;
+  width: 100% !important;
   max-width: var(--menu-item-width, 50rem) !important;
   z-index: 100;
   display: none;

package/assets/sass/elements/highlight.css

@@ -14,23 +14,25 @@
     }
 
     &:has(> img){
-      padding-right: 12.5rem;
+      padding-right: 13rem;
       position: relative;
-      min-height: 10rem;
+      min-height: 8rem;
       align-items: center;
-      display: flex;
     }
 
     & > img {
-      width: 12.5rem;
+      width: 16rem;
       position: absolute;
       top: auto;
       left: auto;
       bottom: 0;
       right: 0;
-      margin-right: -2rem;
+      margin-right: -3rem;
       margin-bottom: -4rem!important;
+    }
 
+    p:last-child, p:has(+ img:last-child) {
+      padding-bottom: 0;
     }
 
     & > iam-tooltip:empty:first-child {
@@ -51,7 +53,14 @@
 
     &:not(.bg-primary, .gradient-primary){
       
+      --colour-heading: var(--colour-primary-theme);
+      --colour-body: var(--colour-primary-theme);
+      color: var(--colour-primary-theme);
       background-color: color-mix(in oklab, var(--highlight-colour), var(--colour-mix, #FCFCFC) var(--tint)) !important;
+
+      & > * {
+        color-scheme: light;
+      }
     }
 
     &:not(.bg-primary, .gradient-primary, .highlight--raised){

package/assets/sass/elements/label.scss

@@ -0,0 +1,17 @@
+@layer elements {
+
+  :is(label:not(.tag), .label) {
+    
+    font-size: 1.125rem; /* 18/16 */
+    line-height: 1.3125rem; /* 21/16 */
+    margin-bottom: 0.5rem;
+    font-weight: normal;
+    color: var(--colour-heading);
+    display: block;
+
+    > iam-rating {
+      
+      margin-top: 0.25rem!important;
+    }
+  }
+}

package/assets/sass/foundations/colours.scss

@@ -53,6 +53,11 @@
 
   .dark-theme .bg-light {
     color-scheme: light;
+    --colour-body: #595959;
+
+    p {
+      color: var(--colour-body);
+    }
   }
   
   @media (prefers-color-scheme: dark) {
@@ -71,6 +76,11 @@
     html:not(.light-theme) .bg-light {
 
       color-scheme: light;
+      --colour-body: #595959;
+
+      p {
+        color: var(--colour-body);
+      }
     }
   }
   // #endregion

package/assets/sass/utilities/colours.scss

@@ -20,18 +20,15 @@
 
   @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;
     }
@@ -40,4 +37,8 @@
       --colour: var(--colour-#{$color}) !important;
     }
   }
+
+  .text-body {
+    color: var(--colour-body);
+  }
 }

package/assets/sass/utilities/columns.scss

@@ -0,0 +1,62 @@
+@layer utilities {
+
+  [class*='columns-']{
+    column-gap: var(--gap, 1rem);
+
+    > li {
+      break-inside: avoid-column; 
+    }
+  }
+
+  .columns-2 {
+    
+    column-count: 2;
+  }
+
+  .columns-3 {
+    
+    column-count: 3;
+  }
+
+  .columns-4 {
+    
+    column-count: 4;
+  }
+
+  
+  @media screen and (min-width: 36em) {
+
+    .columns-sm-2 {
+    
+      column-count: 2;
+    }
+
+    .columns-sm-3 {
+      
+      column-count: 3;
+    }
+
+    .columns-sm-4 {
+      
+      column-count: 4;
+    }
+  }
+  
+  @media screen and (min-width: 62em) {
+    .columns-md-2 {
+    
+      column-count: 2;
+    }
+
+    .columns-md-3 {
+      
+      column-count: 3;
+    }
+
+    .columns-md-4 {
+      
+      column-count: 4;
+    }
+  }
+
+}

package/assets/sass/utilities/flex.scss

@@ -1,4 +1,146 @@
 @layer utilities {
+
+  .flex-fill {
+    flex: 1 1 auto !important;
+  }
+
+  .flex-row {
+    flex-direction: row !important;
+  }
+
+  .flex-column {
+    flex-direction: column !important;
+  }
+
+  .flex-row-reverse {
+    flex-direction: row-reverse !important;
+  }
+
+  .flex-column-reverse {
+    flex-direction: column-reverse !important;
+  }
+
+  .flex-grow-0 {
+    flex-grow: 0 !important;
+  }
+
+  .flex-grow-1 {
+    flex-grow: 1 !important;
+  }
+
+  .flex-shrink-0 {
+    flex-shrink: 0 !important;
+  }
+
+  .flex-shrink-1 {
+    flex-shrink: 1 !important;
+  }
+
+  .flex-wrap {
+    flex-wrap: wrap !important;
+  }
+
+  .flex-nowrap {
+    flex-wrap: nowrap !important;
+  }
+
+  .flex-wrap-reverse {
+    flex-wrap: wrap-reverse !important;
+  }
+
+  .justify-content-start {
+    justify-content: flex-start !important;
+  }
+
+  .justify-content-end {
+    justify-content: flex-end !important;
+  }
+
+  .justify-content-center {
+    justify-content: center !important;
+  }
+
+  .justify-content-between {
+    justify-content: space-between !important;
+  }
+
+  .justify-content-around {
+    justify-content: space-around !important;
+  }
+
+  .justify-content-evenly {
+    justify-content: space-evenly !important;
+  }
+
+  .align-items-start {
+    align-items: flex-start !important;
+  }
+
+  .align-items-end {
+    align-items: flex-end !important;
+  }
+
+  .align-items-center {
+    align-items: center !important;
+  }
+
+  .align-items-baseline {
+    align-items: baseline !important;
+  }
+
+  .align-items-stretch {
+    align-items: stretch !important;
+  }
+
+  .align-content-start {
+    align-content: flex-start !important;
+  }
+
+  .align-content-end {
+    align-content: flex-end !important;
+  }
+
+  .align-content-center {
+    align-content: center !important;
+  }
+
+  .align-content-between {
+    align-content: space-between !important;
+  }
+
+  .align-content-around {
+    align-content: space-around !important;
+  }
+
+  .align-content-stretch {
+    align-content: stretch !important;
+  }
+
+  .align-self-auto {
+    align-self: auto !important;
+  }
+
+  .align-self-start {
+    align-self: flex-start !important;
+  }
+
+  .align-self-end {
+    align-self: flex-end !important;
+  }
+
+  .align-self-center {
+    align-self: center !important;
+  }
+
+  .align-self-baseline {
+    align-self: baseline !important;
+  }
+
+  .align-self-stretch {
+    align-self: stretch !important;
+  }
+
+
   $breakpoints: (
     sm: 36em,
     md: 62em,

package/assets/sass/utilities/font-awesome-iso-fallbacks.scss

@@ -29,4 +29,10 @@
   .fa-bars {
     --iso: '\039e';
   }
+  .fa-bars {
+    --iso: '\039e';
+  }
+  .fa-edit {
+    --iso: '\270e';
+  }
 }

package/assets/sass/utilities/wider-colours.scss

@@ -1,6 +1,7 @@
 @layer utilities {
   @for $i from 1 through 23 {
     .wider-colour-#{$i} {
+      --colour: var(--wider-colour-#{$i} );
       --wider-colour: var(--wider-colour-#{$i} );
       --wider-colour-hover: var(--wider-colour-#{$i}-hover);
       --wider-colour-active: var(--wider-colour-#{$i}-active);