@iamproperty/components 7.7.1--beta15 → 7.7.1--beta17

package/assets/sass/elements/popover.scss

@@ -72,7 +72,7 @@
       /* right: auto; */
       margin: 0 0 0 0.25rem;
       /* padding: 1rem; */
-      padding: 1.5rem;
+      padding: 0.5rem;
 
       &::backdrop {
         display: none;

package/assets/sass/elements/prefix.scss

@@ -84,7 +84,7 @@
 
     select ~ span:after {
       content: ' \f078';
-      font-family: 'Font Awesome 7 Pro';
+      font-family: var(--fa-family-classic);
       font-size: 0.8em;
       display: inline-block;
       padding-left: 1em;

package/assets/sass/elements/select.scss

@@ -0,0 +1,238 @@
+@use 'sass:map';
+@use 'sass:math';
+
+@use '../_func' as *;
+
+
+@layer elements {
+  /*  1. Remove the margin in Firefox and Safari */
+  select,
+  optgroup {
+    margin: 0; /*  1 */
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+  }
+
+  select {
+    text-transform: none;
+    word-wrap: normal;
+
+    /*  Undo the opacity change from Chrome */
+    &:disabled {
+      opacity: 1;
+    }
+  }
+
+  /* #region Select */
+
+  select:not(.select--minimal, .btn) {
+    $form-select-indicator-new: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m2 5 6 6 6-6'/></svg>") !default;
+
+    background:
+      var(--icon-select) right var(--input-padding-block, 0.75rem) top
+        var(--input-padding-block, 0.75rem) / var(--input-lh, 1.25rem) var(--input-lh, 1.25rem) no-repeat,
+      linear-gradient(to left, var(--colour-primary-theme), var(--colour-primary-theme) 100%) right top /
+        calc(var(--input-padding-block, 0.75rem) + var(--input-padding-block, 0.75rem) + var(--input-lh, 1.25rem))
+        calc(var(--input-padding-block, 0.75rem) + var(--input-padding-block, 0.8rem) + var(--input-lh, 1.25rem))
+        no-repeat,
+      linear-gradient(to right, var(--colour-canvas-2), var(--colour-canvas-2));
+
+    padding-right: calc(
+      var(--input-padding-inline, 1rem) + var(--input-padding-inline, 1rem) + var(--input-lh, 1.25rem)
+    ) !important;
+    option {
+      font-size: 1.2em;
+    }
+
+    box-shadow: inset -2px 0px 0px var(--colour-primary-theme);
+
+    max-width: var(--select-max-width);
+
+    &[multiple],
+    &[size]:not([size='1']) {
+      background: none;
+      max-height: none !important;
+    }
+
+    &:disabled {
+
+      background-color: gray;
+      border-color: black;
+    }
+
+    /*  Remove outline from select box in FF */
+    &:-moz-focusring {
+      color: transparent;
+      text-shadow: 0 0 0 inherit;
+    }
+  }
+
+  div:has(> select) {
+    margin-bottom: 1.5rem;
+
+    select {
+      margin-bottom: 0 !important;
+    }
+  }
+
+  .select--minimal {
+    all: unset;
+    font-size: inherit;
+    line-height: inherit;
+    background: none;
+    border: 2px solid transparent;
+    display: inline-block;
+    padding: 0.4em calc(1em + 0.8ch) 0.4rem var(--select-padding-left, 0.4em) !important;
+    font-weight: normal !important;
+    margin: -0.4em 0 !important;
+    border-radius: 0.25em;
+
+    color: var(--colour-body);
+
+    height: auto;
+    cursor: pointer;
+    font-family: var(--font-body) !important;
+
+    option {
+      background-color: var(--colour-canvas);
+      padding-left: 1em;
+      font-size: inherit;
+      line-height: inherit;
+    }
+
+    &:hover {
+      /* border: none; */
+      background: var(--colour-light);
+    }
+
+    &:is(:focus, .focus):not(:disabled) {
+      border-color: var(--colour-info);
+      outline: 0;
+      box-shadow: 0 0 0 0.1rem rgba(30, 190, 230, 0.25);
+    }
+  }
+
+  *:has(> .select--minimal) {
+    position: relative;
+    display: inline-block !important;
+    width: auto !important;
+    font-size: inherit !important;
+    line-height: 1 !important;
+
+    padding: 0 !important;
+    margin: 0 !important;
+
+    font-family: var(--font-body) !important;
+
+    &:after {
+      font-size: 0.8em;
+      line-height: 1em;
+      content: '\f078';
+      font-family: 'Font Awesome 7 Pro';
+      position: absolute;
+      top: 40%;
+      transform: translate(0, -50%);
+      right: calc(0.8ch);
+      pointer-events: none;
+
+      color: var(--colour-body);
+    }
+  }
+  /* #endregion */
+
+
+  select:not(.select--minimal, .btn) {
+    
+    width: 100%;
+    display: block;
+    width: 100%;
+    padding: var(--input-padding-block, 0.75rem) var(--input-padding-inline, 1rem);
+    font-size: var(--input-fs, 1rem);
+    line-height: var(--input-lh, 1.25rem);
+    color: var(--colour-heading);
+    background-color: var(--colour-canvas-2);
+    background-clip: padding-box;
+    border: 2px solid var(--colour-primary);
+    border-radius: 0.5rem;
+    margin-bottom: 1.5rem;
+    min-height: calc(
+      var(--input-padding-block, 0.75rem) + var(--input-padding-block, 0.75rem) + var(--input-lh, 1.25rem) +
+        4px
+    );
+    max-height: calc(
+      var(--input-padding-block, 0.75rem) + var(--input-padding-block, 0.75rem) + var(--input-lh, 1.25rem) +
+        4px
+    );
+
+
+    /*  Customize the `:focus` state to imitate native WebKit styles. */
+    &:is(:focus, .focus):not(:disabled) {
+      border-color: var(--colour-info);
+      outline: 0;
+    }
+
+    &:is(:focus, .focus):not(:disabled):not(:invalid) {
+      box-shadow: 0 0 0 0.1rem rgba(30, 190, 230, 0.25);
+    }
+    
+    /*  Disabled inputs */
+    &:disabled {
+      background-color: #ccd6d8;
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+  }
+  
+  [disabled] select:not(.select--minimal, .btn) {
+    background-color: #ccd6d8;
+    opacity: 0.4;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  /* #region make select look like dropdown */
+  @media (hover: hover) {
+    select {
+      appearance: base-select!important;
+    }
+  }
+
+  select::picker-icon {
+    display: none;
+  }
+
+  select::picker(select) {
+    appearance: base-select;
+  }
+
+  select option::checkmark {
+    display: none;
+  }
+  
+  select selectedcontent span {
+    display: none;
+  }
+
+  /* #endregion */
+
+
+
+
+  /* #region Multi-select */
+  select[multiple] {
+    border-radius: 0.35rem;
+  }
+  select[multiple]::-webkit-scrollbar {
+    width: 0.7rem; /*  manage scrollbar width here */
+  }
+  select[multiple]::-webkit-scrollbar * {
+    background-color: transparent; /*  manage scrollbar background color here */
+  }
+  select[multiple]::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.2);
+    /* background-color:#000000!important; // manage scrollbar thumb background color here */
+    border-radius: 0.35rem;
+  }
+  /* #endregion */
+}

package/assets/sass/elements/tooltips.scss

@@ -14,7 +14,7 @@
     }
 
     &:after {
-      font-family: 'Font Awesome 7 Pro';
+      font-family: var(--fa-family-classic);
       font-weight: 900;
       content: '\f059';
       display: inline-block;

package/assets/sass/elements/type.css

@@ -38,12 +38,42 @@
     max-width: var(--content-max-width);
   }
 
-  :is(.h4, h4, .h5, h5, .h6, h6) {
+  :is(h4, h5, h6) {
     font-size: var(--h4-fs);
     line-height: var(--h4-lh);
     padding-bottom: var(--h4-pb);
     max-width: var(--content-max-width);
   }
+
+  .h1 {
+    font-size: var(--h1-fs);
+    line-height: var(--h1-lh);
+    padding-bottom: var(--h1-pb);
+    font-weight: 900;
+  }
+
+  .h2 {
+    font-size: var(--h2-fs);
+    line-height: var(--h2-lh);
+    padding-bottom: var(--h2-pb);
+    font-weight: 900;
+  }
+
+  .h3 {
+    font-size: var(--h3-fs);
+    line-height: var(--h3-lh);
+    padding-bottom: var(--h3-pb);
+    max-width: var(--content-max-width);
+  }
+
+  :is(.h4, .h5, .h6) {
+    font-size: var(--h4-fs);
+    line-height: var(--h4-lh);
+    padding-bottom: var(--h4-pb);
+    max-width: var(--content-max-width);
+  }
+
+
   /* #endregion */
 
   p {

package/assets/sass/email.scss

@@ -21,7 +21,7 @@ $container-padding-x: 32;
 $default-curve-width: 600;
 
 @import '_corefiles';
-@import '_grid';
+@import 'utilities/grid';
 @import '_bs_grid';
 @import '_bs_utilities';
 @import '_utility-mixins';

package/assets/sass/error.scss

@@ -7,7 +7,6 @@
 
 
 @use '_corefiles';
-@use '_grid';
 @use '_bs_grid';
 @use '_bs_utilities';
 @use '_utilities';

package/assets/sass/foundations/debug.scss

@@ -0,0 +1,6 @@
+@layer debug {
+
+  .debug .row {
+    outline: 2px solid red;
+  }
+}

package/assets/sass/foundations/reboot.scss

@@ -14,12 +14,14 @@
     --root-fs-px: 375;
     -webkit-font-smoothing: antialiased; /*  Fix for Safari/iOS */
     height: 100%;
-    width: 100%;
+    width: 100svw;
     overflow-x: hidden;
     overflow-y: scroll;
     font-size: #{calc(calc(16 / var(--root-fs-px)) * 100vw)};
     scroll-padding-top: 6.25rem; /* 100 */
 
+    scrollbar-gutter: stable;
+
     @media screen and (min-width: 36em) {
       --root-fs-px: 768;
     }
@@ -159,6 +161,84 @@
   details {
     width: 100%;
   }
+  
+$columns: 12;
+  /* #region Main grid setup */
+  body {
+    --excess-space: calc((100% - var(--max-width)) / 2);
+    --col-size: calc(
+      (
+          100% - max(0%, var(--excess-space)) - max(0%, var(--excess-space)) - var(--gutter) - var(--gutter) - (var(--gap) * (#{$columns - 1}))
+        ) / #{$columns}
+    );
+    column-gap: var(--gap);
+    display: grid;
+    margin-inline: 0;
+    width: 100svw;
+    grid-template-rows: auto;
+    align-content: start;
+    justify-content: center;
+
+    $templateColumns: '';
+
+    @for $i from 1 to $columns {
+      $templateColumns: $templateColumns + 'var(--col-size) [col-' + $i + '-end col-'+ ($i + 1)+'-start] ';
+    }
+    grid-template-columns:
+      [full-width-start container-start] calc(var(--gutter) - var(--gap))
+      [content-start col-1-start]
+      #{$templateColumns}
+      var(--col-size) [col-#{$columns}-end content-end] calc(var(--gutter) - var(--gap))
+      [container-end full-width-end];
+
+    @media screen and (min-width: 90em) {
+      grid-template-columns:
+        [full-width-start] calc(var(--excess-space) - var(--gap))
+        [container-start] calc(var(--gutter) - var(--gap))
+        [content-start col-1-start]
+        #{$templateColumns}
+        var(--col-size) [col-#{$columns}-end content-end] calc(var(--gutter) - var(--gap))
+        [container-end] calc(var(--excess-space) - var(--gap)) [full-width-end];
+    }
+
+    & * {
+      grid-column: content;
+
+      &:where(button):not(:has(.card)) {
+        max-width: fit-content;
+        place-self: start;
+      }
+
+      &:is(div) {
+        align-content: start;
+      }
+    }
+  }
+
+  div:has(main) {
+    display: contents !important;
+  }
+
+  :is(nav, main, footer) {
+    display: grid;
+    grid-column: full-width !important;
+    grid-template-columns: subgrid;
+  }
+
+  *:not(.row) > main:not(:has(.container:last-child)):not(:has(iam-collapsible-side:last-child)) {
+    padding-bottom: 1rem;
+  }
+
+  main > :is(.full-width, [class*='bg-']:has(.container), iam-header, iam-collapsible-side, iam-notification) {
+    grid-column: full-width!important;
+  }
+
+  [class*='bg-']:not([class*='col-']):has(.container) {
+    display: grid;
+    grid-column: full-width;
+    grid-template-columns: subgrid;
+  }
+  /* #endregion */
 }
 
 

package/assets/sass/foundations/root.scss

@@ -1,7 +1,7 @@
 @use 'sass:map';
 @use '../func' as *;
 
-@layer legacy, reset, elements, components, templates, overrides, utilities;
+@layer legacy, reset, elements, components, templates, overrides, utilities, debug;
 
 @layer reset {
   :root {
@@ -235,6 +235,24 @@
     --max-height-md: 25rem; /* 400px */
     --max-height-lg: 37.5rem; /* 600px */
 
+
+    --dropdown-bg: var(--colour-canvas-2);
+    --dropdown-margin-block: 0.25rem;
+    --dropdown-padding: 0.5rem;
+    --dropdown-border-radius: 0.5rem;
+    --dropdown-box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.1);
+
+    --option-border-radius: 0.25rem;
+
+--option-color: var(--colour-primary);
+    
+    --option-bg-hover: var(--colour-light);
+    --option-padding: 0.5rem;
+    --option-color-hover: #595959; /* Magic number */
+    --option-bg-active: hsl(from var(--colour-info) h s l / 10%);
+    
+    --option-border-left-active: 4px solid var(--colour-info);
+
     /*  Add in media query based updates to the global vars like updating the heading 1 font size */
     @media screen and (min-width: 36em) {
       --container-padding-x: 2.5rem;

package/assets/sass/main.scss

@@ -2,6 +2,5 @@
 
 @use '_fonts';
 @use '_corefiles';
-@use '_grid';
 @use '_utilities';
 @use '_print';

package/assets/sass/utilities/colours.scss

@@ -39,6 +39,9 @@
   }
 
   .text-body {
-    color: var(--colour-body);
+    color: var(--colour-body) !important;
+  }
+  .text-muted {
+    color: var(--colour-muted) !important;
   }
 }