@iamproperty/components 7.7.1--beta14 → 7.7.1--beta16

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

@@ -59,6 +59,16 @@
     padding-bottom: 1.5rem;
   }
 
+  /* #region CMS support */
+  p:empty {
+    display: none;
+  }
+
+  p:has(a:first-child:last-child){
+    /* display: contents; */
+  }
+  /* #endregion */
+
   :is(.lead, .strapline) {
     font-size: 1.125rem; /* 18/16 */
     line-height: 1.75rem; /* 28/16 */

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/colours.scss

@@ -29,7 +29,6 @@
         
       --colour-heading: var(--colour-white);
       --colour-body: var(--colour-white);
-      --colour-underline: var(--colour-white);
       color: var(--colour-white);
     }
     

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 {
@@ -70,7 +70,7 @@
     --colour-activeLink: light-dark(#e8f9fd,#173c45);
     --colour-activeLinkBorder: light-dark(#1dbde6,#1dbde6);
 
-    --colour-underline: var(--colour-secondary-theme);
+    --colour-underline: light-dark(#b4e6a5, #fcfcfc);
     --colour-selected: var(--colour-info-theme);
 
     --colour-inverted: #fcfcfc;
@@ -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/{_grid.scss → utilities/grid.scss}

@@ -1,6 +1,11 @@
 @use 'sass:math';
 @use 'sass:map';
-@use '_func' as *;
+
+@use 'sass:meta';
+@use 'sass:list';
+@use 'sass:string';
+
+
 
 $columns: 12;
 $rows-per-page: 20;
@@ -123,83 +128,7 @@ $breakpoints: (
 }
 /* #endregion */
 
-@layer reset {
-  /* #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: 100%;
-    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: #{em(1280 * 1.125)}) {
-      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;
-  }
-
-  [class*='bg-']:not([class*='col-']):has(.container) {
-    display: grid;
-    grid-column: full-width;
-    grid-template-columns: subgrid;
-  }
-  /* #endregion */
+@layer utilities {
 
   /* #region Grid utility classes */
   .grid {
@@ -242,7 +171,7 @@ $breakpoints: (
   }
 
   *:not(:where(html, body)):has(
-      :is([class*='cols-'], [class*='col-start-'], [class*='col-end-'], [class*='col-span-'])
+      :is([class*='cols-'], [class*='col-start-'], [class*='col-end-'], [class*='col-span-']):not([class*='row-cols-'])
     ) {
     display: grid;
     grid-template-columns: subgrid;
@@ -293,7 +222,7 @@ $breakpoints: (
     $count: math.div($columns, $i);
 
     .cols-#{$i} > * {
-      grid-column: auto / span #{math.floor($count)};
+      grid-column: auto / span #{math.floor($count)}!important;
     }
   }
   
@@ -318,8 +247,10 @@ $breakpoints: (
 
   /* #endregion */
 
+  /* #region auto grid */
   .auto-grid {
     display: flex;
+    flex-wrap: nowrap;
     column-gap: var(--gap);
 
     > * {
@@ -350,4 +281,113 @@ $breakpoints: (
       }
     }
   }
+  /* #endregion */
+
+  /* #region Bootstrap grid */
+  .row {
+    
+    display: flex;
+    flex-wrap: wrap;
+    margin-right: calc(-0.5 * var(--gap)); /*  stylelint-disable-line function-disallowed-list */
+    margin-left: calc(-0.5 * var(--gap)); /*  stylelint-disable-line function-disallowed-list */
+
+    > * {
+      
+      flex-shrink: 0;
+      width: 100%;
+      max-width: 100%;
+      padding-right: calc(var(--gap) * 0.5);
+      padding-left: calc(var(--gap) * 0.5);
+    }
+  }
+  
+  .col {
+    flex: 1 0 0%;
+  }
+
+  @for $i from 1 through 12 {
+    .col-#{$i} {
+      flex: 0 0 auto;
+      $width: math.div($i, 12);
+      width: math.percentage($width);
+    }
+  }
+
+  .row-cols-auto {
+
+    display: flex;
+    flex: 0 0 auto;
+    width: auto;
+
+    > * {
+      display: block!important;
+      width: 100%;
+    }
+  }
+  
+  @for $i from 1 through 4 {
+    .row-cols-#{$i} {
+      
+      display: flex;
+
+      > * {
+        display: block!important;
+        flex: 0 0 auto;
+        width: math.div(100%, $i);
+      }
+    }
+  }
+
+
+  @media screen and (min-width: 36em) {
+    
+    @for $i from 1 through 4 {
+      .row-cols-sm-#{$i} {
+        > * {
+          flex: 0 0 auto;
+          width: calc(100% / #{$i});
+        }
+      }
+    }
+    
+    .col-sm-auto {
+      flex: 0 0 auto;
+      width: auto;
+    }
+
+    @for $i from 1 through 12 {
+      .col-sm-#{$i} {
+        flex: 0 0 auto;
+        $width: math.div($i, 12);
+        width: math.percentage($width);
+      }
+    }
+  }
+
+  @media screen and (min-width: 62em) {
+    
+    @for $i from 1 through 4 {
+      .row-cols-md-#{$i} {
+        > * {
+          flex: 0 0 auto;
+          width: calc(100% / #{$i});
+        }
+      }
+    }
+    
+    .col-md-auto {
+      flex: 0 0 auto;
+      width: auto;
+    }
+
+    @for $i from 1 through 12 {
+      .col-md-#{$i} {
+        flex: 0 0 auto;
+        $width: math.div($i, 12);
+        width: math.percentage($width);
+      }
+    }
+  }
+
+  /* #endregion */
 }