@iamproperty/components 7.0.0 → 7.1.0--beta2

package/assets/sass/error.scss

@@ -1,37 +1,40 @@
 @charset "UTF-8";
 
 // Set mobile only variable so that the media query mixin doesn't print out non mobile rules
-@use "_func" as *;
+@use '_func' as *;
 
 @include layer('reset') {
-
   html {
-    --font-body: arial, sans-serif!important;
-    --font-heading: arial, sans-serif!important;
+    --font-body: arial, sans-serif !important;
+    --font-heading: arial, sans-serif !important;
   }
 }
 
-@import "_corefiles";
+@import '_corefiles';
 
 @include layer('elements') {
-.h1 {
-  --line-height: #{rem(map-get($heading-sizes,"h1_lh"))};
-
-  font-size: rem(map-get($heading-sizes,"h1_fs"));
-  padding-bottom: rem(map-get($heading-sizes,"h1_pb"));
-  font-weight: 900;
-
-  @include media-breakpoint-up(sm) {
-
-    font-size: rem(map-get($heading-sizes,"h1_fs_sm"));
-    --line-height: #{rem(map-get($heading-sizes,"h1_lh_sm"))};
-    padding-bottom: rem(map-get($heading-sizes,"h1_pb_sm"));
+  .h1 {
+    --line-height: #{rem(map-get($heading-sizes, 'h1_lh'))};
+
+    font-size: rem(map-get($heading-sizes, 'h1_fs'));
+    padding-bottom: rem(map-get($heading-sizes, 'h1_pb'));
+    font-weight: 900;
+
+    @include media-breakpoint-up(sm) {
+      font-size: rem(map-get($heading-sizes, 'h1_fs_sm'));
+      --line-height: #{rem(map-get($heading-sizes, 'h1_lh_sm'))};
+      padding-bottom: rem(map-get($heading-sizes, 'h1_pb_sm'));
+    }
   }
 }
-}
 
 @include layer('utilities') {
   .gradient-primary {
-    background-image: linear-gradient(var(--gradient-direction), var(--colour-primary-theme) 0, var(--colour-primary-theme) 20%, transparent 100%) !important;
+    background-image: linear-gradient(
+      var(--gradient-direction),
+      var(--colour-primary-theme) 0,
+      var(--colour-primary-theme) 20%,
+      transparent 100%
+    ) !important;
   }
-}
+}

package/assets/sass/foundations/bs_grid.scss

@@ -23,7 +23,6 @@
   }
 }
 
-
 // Columns
 //
 // Common styles for small and large grid columns

package/assets/sass/foundations/grid.scss

@@ -1,30 +1,43 @@
 @use 'sass:math';
 @use 'sass:map';
-@use "../_func" as *;
+@use '../_func' as *;
 
 // #region Main grid setup
 body {
   --excess-space: calc((100% - var(--max-width, #{$max-width})) / 2);
-  --col-size: calc((100% - max(0%,var(--excess-space)) - max(0%,var(--excess-space)) - var(--gutter, #{$gutter}) - var(--gutter, #{$gutter}) - (var(--gap, #{$gap}) * (#{$columns - 1}))) / #{$columns});
+  --col-size: calc(
+    (
+        100% - max(0%, var(--excess-space)) - max(0%, var(--excess-space)) - var(--gutter, #{$gutter}) - var(
+            --gutter,
+            #{$gutter}
+          ) -
+          (var(--gap, #{$gap}) * (#{$columns - 1}))
+      ) /
+      #{$columns}
+  );
   column-gap: var(--gap, #{$gap});
   display: grid;
   margin-inline: 0;
   width: 100%;
   $templateColumns: '';
   @for $i from 1 to $columns {
-    $templateColumns: $templateColumns + 'var(--col-size) [col-'+$i+'-end col-'+($i+1)+'-start] '
+    $templateColumns: $templateColumns + 'var(--col-size) [col-' + $i + '-end col-'+ ($i + 1)+'-start] ';
   }
-  grid-template-columns: [full-width-start container-start] calc(var(--gutter, #{$gutter}) - var(--gap, #{$gap}))
-                          [content-start col-1-start]
-                          #{$templateColumns}
-                          var(--col-size) [col-#{$columns}-end content-end] calc(var(--gutter, #{$gutter}) - var(--gap, #{$gap})) [container-end full-width-end];
+  grid-template-columns:
+    [full-width-start container-start] calc(var(--gutter, #{$gutter}) - var(--gap, #{$gap}))
+    [content-start col-1-start]
+    #{$templateColumns}
+    var(--col-size) [col-#{$columns}-end content-end] calc(var(--gutter, #{$gutter}) - var(--gap, #{$gap}))
+    [container-end full-width-end];
 
   @media screen and (min-width: #{em($max-width-px * $max-scale-up)}) {
-    grid-template-columns: [full-width-start] calc(var(--excess-space) - var(--gap, #{$gap}))
-                          [container-start] calc(var(--gutter, #{$gutter}) - var(--gap, #{$gap}))
-                          [content-start col-1-start]
-                          #{$templateColumns}
-                          var(--col-size) [col-#{$columns}-end content-end] calc(var(--gutter, #{$gutter}) - var(--gap, #{$gap})) [container-end] calc(var(--excess-space) - var(--gap, #{$gap})) [full-width-end];
+    grid-template-columns:
+      [full-width-start] calc(var(--excess-space) - var(--gap, #{$gap}))
+      [container-start] calc(var(--gutter, #{$gutter}) - var(--gap, #{$gap}))
+      [content-start col-1-start]
+      #{$templateColumns}
+      var(--col-size) [col-#{$columns}-end content-end] calc(var(--gutter, #{$gutter}) - var(--gap, #{$gap}))
+      [container-end] calc(var(--excess-space) - var(--gap, #{$gap})) [full-width-end];
   }
 
   grid-template-rows: auto;
@@ -34,38 +47,36 @@ body {
   & * {
     grid-column: content;
 
-    &:where(button):not(:has(.card)){
-        
+    &:where(button):not(:has(.card)) {
       max-width: fit-content;
       place-self: start;
     }
 
-    &:is(div){
-        
+    &:is(div) {
       align-content: start;
     }
   }
 }
 
 div:has(main) {
-  display: contents!important;
+  display: contents !important;
 }
 
 :is(nav, main, footer) {
   display: grid;
-  grid-column: full-width!important;
+  grid-column: full-width !important;
   grid-template-columns: subgrid;
 }
 
-*:not(.row)>main:not(:has(.container:last-child)):not(:has(iam-collapsible-side:last-child)) {
+*: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) {
+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) {
+[class*='bg-']:not([class*='col-']):has(.container) {
   display: grid;
   grid-column: full-width;
   grid-template-columns: subgrid;
@@ -73,11 +84,11 @@ main > :is(.full-width, [class*="bg-"]:has(.container), iam-header, iam-collapsi
 // #endregion
 
 // #region grid mixins
-@mixin grid-utilities($br: ""){
+@mixin grid-utilities($br: '') {
   .#{$br}inline-start {
     justify-self: start;
   }
-  
+
   .#{$br}block-start {
     align-self: start;
   }
@@ -85,7 +96,7 @@ main > :is(.full-width, [class*="bg-"]:has(.container), iam-header, iam-collapsi
   .#{$br}inline-center {
     justify-self: center;
   }
-  
+
   .#{$br}block-center {
     align-self: center;
   }
@@ -93,7 +104,7 @@ main > :is(.full-width, [class*="bg-"]:has(.container), iam-header, iam-collapsi
   .#{$br}inline-end {
     justify-self: end;
   }
-  
+
   .#{$br}block-end {
     align-self: end;
   }
@@ -101,34 +112,33 @@ main > :is(.full-width, [class*="bg-"]:has(.container), iam-header, iam-collapsi
   .#{$br}display-contents {
     display: contents;
   }
-  
+
   .#{$br}display-none {
     display: none;
   }
-  
+
   .#{$br}display-block {
     display: block;
   }
-      
+
   .#{$br}display-grid {
     display: grid;
   }
-      
-  .#{$br}flow-dense { // Apply to a wrapper div of the items
+
+  .#{$br}flow-dense {
+    // Apply to a wrapper div of the items
     grid-auto-flow: dense;
   }
 
   @for $i from 0 to $grid-utility-count {
-
-    .#{$br}order-#{$i+1} {
-      order: #{$i+1};
+    .#{$br}order-#{$i + 1} {
+      order: #{$i + 1};
     }
   }
 }
 
-@mixin grid-columns($br: ""){
-
-  *:not(:where(main)):has(> [class*="#{$br}col-"]){
+@mixin grid-columns($br: '') {
+  *:not(:where(main)):has(> [class*='#{$br}col-']) {
     display: grid;
     grid-template-columns: subgrid;
   }
@@ -136,134 +146,122 @@ main > :is(.full-width, [class*="bg-"]:has(.container), iam-header, iam-collapsi
   .#{$br}col-start-auto {
     --col-start: auto;
   }
-  
-  @for $i from 0 to $columns {
 
-    .#{$br}col-start-#{$i+1} {
-      --col-start: col-#{$i+1}-start!important;
+  @for $i from 0 to $columns {
+    .#{$br}col-start-#{$i + 1} {
+      --col-start: col-#{$i + 1}-start !important;
     }
 
-    .#{$br}col-end-#{$i+1} {
-      --col-end: col-#{$i+1}-end;
+    .#{$br}col-end-#{$i + 1} {
+      --col-end: col-#{$i + 1}-end;
     }
-        
-    .#{$br}col-span-#{$i+1} {
-      --col-end: span #{$i+1};
+
+    .#{$br}col-span-#{$i + 1} {
+      --col-end: span #{$i + 1};
     }
   }
 }
 
-@mixin grid-rows($br: ""){
-
+@mixin grid-rows($br: '') {
   // Assign how many rows an item takes
   @for $i from 0 to $grid-utility-count {
-    
-    .#{$br}row-span-#{$i+1} {
-      --row-span: #{$i+1};
+    .#{$br}row-span-#{$i + 1} {
+      --row-span: #{$i + 1};
     }
   }
 
   // Move the item to a set row
   @for $i from 0 to $rows-per-page {
-    
-    .#{$br}row-start-#{$i+1} {
-      --row-start: #{$i+1};
+    .#{$br}row-start-#{$i + 1} {
+      --row-start: #{$i + 1};
     }
   }
 }
 // #endregion
 
-@if $enable-new-grid == "true" {
-
-// #region Grid utility classes
-*:has([class*="order-"]) > *:not([class*="order-"]) {
-  order: 99;
-}
+@if $enable-new-grid == 'true' {
+  // #region Grid utility classes
+  *:has([class*='order-']) > *:not([class*='order-']) {
+    order: 99;
+  }
 
+  @include grid-utilities();
+  @each $br, $value in $breakpoints {
+    @include breakpoint($br) {
+      @include grid-utilities(#{$br + '-'});
+    }
+  }
+  // #endregion
 
-@include grid-utilities();
-@each $br, $value in $breakpoints {
-  @include breakpoint($br){
-    @include grid-utilities(#{$br+'-'});
+  // #region Create the columns
+  :is([class*='col-start-'], [class*='col-end-'], [class*='col-span-']) {
+    grid-column: var(--col-start, col-1-start) / var(--col-end, col-#{$columns}-end);
   }
-}
-// #endregion
 
-// #region Create the columns
-:is([class*="col-start-"], [class*="col-end-"], [class*="col-span-"]) {
-  grid-column: var(--col-start, col-1-start) / var(--col-end, col-#{$columns}-end);
-}
+  *:not(:where(html, body)):has(
+      :is([class*='cols-'], [class*='col-start-'], [class*='col-end-'], [class*='col-span-'])
+    ) {
+    display: grid;
+    grid-template-columns: subgrid;
 
-*:not(:where(html, body)):has(:is([class*="cols-"], [class*="col-start-"], [class*="col-end-"], [class*="col-span-"])){
+    [class*='col-']:not([class*='col-start-auto']) {
+      --col-start: col-1;
+    }
 
-  display: grid;
-  grid-template-columns: subgrid;    
+    [class*='col-'] [class*='col-'] {
+      --col-start: auto;
+    }
 
-  [class*="col-"]:not([class*="col-start-auto"]) {
-  
-    --col-start: col-1;   
+    * {
+      grid-column: var(--col-start, col-1-start) / var(--col-end, col-#{$columns}-end);
+    }
   }
 
-  [class*="col-"] [class*="col-"] {
-  
-    --col-start: auto;   
+  @include grid-columns();
+  @each $br, $value in $breakpoints {
+    @include breakpoint($br) {
+      @include grid-columns(#{$br + '-'});
+    }
   }
+  // #endregion
 
-  * {
-    grid-column: var(--col-start, col-1-start) / var(--col-end, col-#{$columns}-end);
+  // #region Create rows
+  :where([class*='row-'], [class*='rows-']) {
+    grid-row: var(--row-start, auto) / span var(--row-span, 1);
   }
-}
-
 
-@include grid-columns();
-@each $br, $value in $breakpoints {
-  @include breakpoint($br){
-    @include grid-columns(#{$br+'-'});
+  @include grid-rows();
+  @each $br, $value in $breakpoints {
+    @include breakpoint($br) {
+      @include grid-rows(#{$br + '-'});
+    }
   }
-}
-// #endregion
-
-// #region Create rows
-:where([class*="row-"],[class*="rows-"]) {
-  grid-row: var(--row-start, auto) / span var(--row-span, 1);
-}
-
+  // #endregion
 
-@include grid-rows();
-@each $br, $value in $breakpoints {
-  @include breakpoint($br){
-    @include grid-rows(#{$br+'-'});
+  // #region Create the Columns wrappers
+  [class*='cols-']:not(.row) {
+    display: grid;
+    grid-template-columns: subgrid;
   }
-}
-// #endregion
-
-// #region Create the Columns wrappers
-[class*="cols-"]:not(.row) {
-  display: grid;
-  grid-template-columns: subgrid;
-}
 
-@for $i from 1 to math.floor(math.div($columns,2)) + 1 {
-  
-  $count: math.div($columns,$i);
+  @for $i from 1 to math.floor(math.div($columns, 2)) + 1 {
+    $count: math.div($columns, $i);
 
-  .cols-#{$i} > * {
-    grid-column: auto / span #{math.floor($count)};
+    .cols-#{$i} > * {
+      grid-column: auto / span #{math.floor($count)};
+    }
   }
-}
 
-@each $br, $value in $breakpoints {
-  @include breakpoint($br){
-    @for $i from 1 to math.floor(math.div($columns,2)) + 1 {
-  
-      $count: math.div($columns,$i);
+  @each $br, $value in $breakpoints {
+    @include breakpoint($br) {
+      @for $i from 1 to math.floor(math.div($columns, 2)) + 1 {
+        $count: math.div($columns, $i);
 
-      .#{$br}-cols-#{$i} > * {
-        grid-column: auto / span #{math.floor($count)};
+        .#{$br}-cols-#{$i} > * {
+          grid-column: auto / span #{math.floor($count)};
+        }
       }
     }
   }
-}
-// #endregion
-
+  // #endregion
 }

package/assets/sass/foundations/reboot.scss

@@ -1,13 +1,12 @@
-@use "sass:math";
-@use "../_func" as *;
-
+@use 'sass:math';
+@use '../_func' as *;
 
 // Code
 pre,
 code,
 kbd,
 samp {
-  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
   font-size: 1rem;
 }
 
@@ -39,7 +38,7 @@ code {
 }
 
 kbd {
-  padding: .1875rem .375rem;
+  padding: 0.1875rem 0.375rem;
   font-size: rem(14);
 
   kbd {
@@ -49,11 +48,6 @@ kbd {
   }
 }
 
-
-
-
-
-
 *,
 *::before,
 *::after {
@@ -62,7 +56,6 @@ kbd {
 
 /* Reset & Defaults */
 html {
-
   -webkit-font-smoothing: antialiased; // Fix for Safari/iOS
   height: 100%;
   width: 100%;
@@ -70,7 +63,7 @@ html {
   overflow-y: scroll;
   font-size: vw($device-xs-width);
   scroll-padding-top: rem(100);
-  
+
   @include media-breakpoint-up(sm) {
     font-size: vw($device-sm-width);
   }
@@ -78,7 +71,7 @@ html {
     font-size: vw($device-md-width);
   }
 
-  @if $mobileOnly != "true" {
+  @if $mobileOnly != 'true' {
     @media (min-width: #{em(1280)}) {
       font-size: 100%;
       font-size: vw(1280);
@@ -104,23 +97,22 @@ html {
       font-size: 16px;
     }
 
-    @media screen and (min-width: 120em) { // 1920
+    @media screen and (min-width: 120em) {
+      // 1920
 
       &:has(.nav--large) {
-  
         font-size: vw(1920);
       }
     }
-
   }
 }
 
 body {
   margin: 0; // 1
   color-scheme: light dark;
-  @include var(background,--colour-canvas);
-  @include var(font-family,--font-body);
-  @include var(color,--colour-body);
+  @include var(background, --colour-canvas);
+  @include var(font-family, --font-body);
+  @include var(color, --colour-body);
   width: 100%;
   line-height: 1.2;
   min-height: 100%;
@@ -128,27 +120,25 @@ body {
   -webkit-tap-highlight-color: rgba($black, 0); // 4
 }
 
-
 // #region scrollbars
-:is(div,form,fieldset,textarea)::-webkit-scrollbar {
+:is(div, form, fieldset, textarea)::-webkit-scrollbar {
   width: 10px;
   height: 10px;
 }
- 
-:is(div,form,fieldset,textarea)::-webkit-scrollbar-track {
+
+:is(div, form, fieldset, textarea)::-webkit-scrollbar-track {
   background-color: #f1f1f1;
   border-top: 4px solid var(--colour-canvas-2);
   border-left: 4px solid var(--colour-canvas-2);
 }
- 
-:is(div,form,fieldset,textarea)::-webkit-scrollbar-thumb {
+
+:is(div, form, fieldset, textarea)::-webkit-scrollbar-thumb {
   background-color: #c1c1c1;
   width: 6px;
   border-top: 4px solid var(--colour-canvas-2);
   border-left: 4px solid var(--colour-canvas-2);
 }
 
-
 //#endregion
 
 body > footer,
@@ -179,13 +169,12 @@ hr {
   border-bottom: none;
   background-color: currentColor;
   opacity: 1;
-  clear:both;
-
+  clear: both;
 
   &:after {
     display: table;
     clear: both;
-    content: "";
+    content: '';
   }
 }
 
@@ -197,13 +186,12 @@ form {
   display: contents;
 }
 
-input[type="search" i]::-webkit-search-cancel-button {
-
+input[type='search' i]::-webkit-search-cancel-button {
   appearance: none;
 }
 
 [list]::-webkit-calendar-picker-indicator {
-  display: none!important;
+  display: none !important;
 }
 
 img {
@@ -211,10 +199,14 @@ img {
 }
 
 // Details reset
-summary {list-style: none}
-summary::-webkit-details-marker {display: none; }
+summary {
+  list-style: none;
+}
+summary::-webkit-details-marker {
+  display: none;
+}
 
-details summary { 
+details summary {
   cursor: pointer;
 }