@iamproperty/components 7.1.0--beta6 → 7.2.0

package/assets/sass/elements/container.scss

@@ -1,159 +1,198 @@
 @use 'sass:math';
-@use '../_func.scss' as *;
-
-// #region container
-.container {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-  padding: var(--container-padding);
-
-  grid-column: container !important;
-  width: 100%;
+@use '../_func' as *;
+
+$layers: 'true' !default;
+$mobileOnly: 'false' !default;
+$darkMode: 'true' !default;
+
+@include layer('elements', $layers) {
+  // #region container
+  .container {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    padding: var(--container-padding);
+
+    grid-column: container !important;
+    width: 100%;
+
+    &:not(:has(.row)):has([class*='col-']) {
+      display: grid;
+      grid-template-columns:
+        [content-start col-1-start] 1fr [col-1-end col-2-start] 1fr [col-2-end
+        col-3-start] 1fr [col-3-end
+        col-4-start] 1fr [col-4-end
+        col-5-start] 1fr [col-5-end
+        col-6-start] 1fr [col-6-end
+        col-7-start] 1fr [col-7-end
+        col-8-start] 1fr [col-8-end
+        col-9-start] 1fr [col-9-end
+        col-10-start] 1fr [col-10-end
+        col-11-start] 1fr [col-11-end
+        col-12-start] 1fr [col-12-end content-end];
+      column-gap: 1rem;
+    }
 
-  &:not(.container-fluid) {
-    max-width: var(--container-max-width);
-  }
+    [class*='col-span-']:not([class*='-col-span-']):not(:first-child) {
+      --col-start: auto;
+    }
 
-  .container:not(.container-xs-breakout) {
-    padding-left: 0;
-    padding-right: 0;
-    padding-bottom: 0;
-    padding-top: 0;
-  }
+    @include media-breakpoint-up(sm, $mobileOnly) {
+      [class*='sm-col-span-']:not(:first-child) {
+        --col-start: auto;
+      }
+    }
 
-  &[class*='bg-'] {
-    padding-top: #{rem(48)};
-    padding-bottom: #{rem(32)};
-  }
+    @include media-breakpoint-up(md, $mobileOnly) {
+      [class*='md-col-span-']:not(:first-child) {
+        --col-start: auto;
+      }
+    }
 
-  &[class*='bg-'] + .container:not([class*='bg-']) {
-    padding-top: #{rem(32)};
-  }
+    &:not(.container-fluid) {
+      max-width: var(--container-max-width);
+    }
 
-  // Fix the clearing for containers
-  &:before {
-    display: table;
-    clear: both;
-    content: '';
-  }
-  &:after {
-    display: table;
-    clear: both;
-    content: '';
-  }
+    .container:not(.container-xs-breakout) {
+      padding-left: 0;
+      padding-right: 0;
+      padding-bottom: 0;
+      padding-top: 0;
+    }
 
-  &.container-xs-breakout {
-    margin-left: -1.25rem;
-    margin-right: -1.25rem;
-    width: calc(100% + 2.5rem);
+    &[class*='bg-'] {
+      padding-top: #{rem(48)};
+      padding-bottom: #{rem(32)};
+    }
 
-    @include media-breakpoint-up(sm) {
-      margin-left: auto;
-      margin-right: auto;
-      width: 100%;
+    &[class*='bg-'] + .container:not([class*='bg-']) {
+      padding-top: #{rem(32)};
     }
-  }
-}
 
-:host .container {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-  padding: var(--container-padding);
-  width: 100%;
-}
+    // Fix the clearing for containers
+    &:before {
+      display: table;
+      clear: both;
+      content: '';
+    }
+    &:after {
+      display: table;
+      clear: both;
+      content: '';
+    }
 
-// replicate container padding-bottom
-main > .row {
-  padding-bottom: #{rem(16)};
+    &.container-xs-breakout {
+      margin-left: -1.25rem;
+      margin-right: -1.25rem;
+      width: calc(100% + 2.5rem);
 
-  &[class*='bg-'] {
-    padding-top: #{rem(48)};
-    padding-bottom: #{rem(32)};
+      @include media-breakpoint-up(sm, $mobileOnly) {
+        margin-left: auto;
+        margin-right: auto;
+        width: 100%;
+      }
+    }
   }
 
-  &[class*='bg-'] + :is(.row, .container):not([class*='bg-']) {
-    padding-top: #{rem(32)};
+  :host .container {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    padding: var(--container-padding);
+    width: 100%;
   }
-}
-// #endregion
 
-// #region Circles
-.container {
-  &:has(.circle) {
-    position: relative;
-    z-index: 1;
-  }
+  // replicate container padding-bottom
+  main > .row {
+    padding-bottom: #{rem(16)};
 
-  > .circle {
-    position: absolute;
-    z-index: var(--index-below);
-    border-width: 3px;
-  }
+    &[class*='bg-'] {
+      padding-top: #{rem(48)};
+      padding-bottom: #{rem(32)};
+    }
 
-  // Default pattern
-  &:not([class*='circle-pattern-']) > .circle {
-    font-size: rem(300);
-    top: rem(-75);
-    left: rem(-200);
+    &[class*='bg-'] + :is(.row, .container):not([class*='bg-']) {
+      padding-top: #{rem(32)};
+    }
   }
+  // #endregion
 
-  &:not([class*='circle-pattern-']) > .circle ~ .circle {
-    font-size: rem(350);
-    top: auto;
-    left: auto;
-    right: rem(-100);
-    bottom: rem(-200);
-  }
+  // #region Circles
+  .container {
+    &:has(.circle) {
+      position: relative;
+      z-index: 1;
+    }
+
+    > .circle {
+      position: absolute;
+      z-index: var(--index-below);
+      border-width: 3px;
+    }
 
-  @include media-breakpoint-up(sm) {
+    // Default pattern
     &:not([class*='circle-pattern-']) > .circle {
-      font-size: rem(450);
-      top: rem(-50);
-      left: rem(-175);
+      font-size: rem(300);
+      top: rem(-75);
+      left: rem(-200);
     }
 
     &:not([class*='circle-pattern-']) > .circle ~ .circle {
-      font-size: rem(500);
-      right: rem(-150);
-      bottom: rem(-150);
+      font-size: rem(350);
+      top: auto;
+      left: auto;
+      right: rem(-100);
+      bottom: rem(-200);
     }
-  }
-
-  // Pattern 2
-  &.circle-pattern-2 > .circle {
-    font-size: rem(300);
-    top: rem(-75);
-    right: rem(-200);
-  }
 
-  &.circle-pattern-2 > .circle ~ .circle {
-    font-size: rem(450);
-    top: auto;
-    bottom: rem(-50);
-    left: rem(-175);
-  }
+    @include media-breakpoint-up(sm, $mobileOnly) {
+      &:not([class*='circle-pattern-']) > .circle {
+        font-size: rem(450);
+        top: rem(-50);
+        left: rem(-175);
+      }
+
+      &:not([class*='circle-pattern-']) > .circle ~ .circle {
+        font-size: rem(500);
+        right: rem(-150);
+        bottom: rem(-150);
+      }
+    }
 
-  @include media-breakpoint-up(sm) {
+    // Pattern 2
     &.circle-pattern-2 > .circle {
-      font-size: rem(450);
+      font-size: rem(300);
       top: rem(-75);
       right: rem(-200);
     }
+
     &.circle-pattern-2 > .circle ~ .circle {
-      font-size: rem(500);
-      bottom: rem(-75);
-      left: rem(-200);
+      font-size: rem(450);
+      top: auto;
+      bottom: rem(-50);
+      left: rem(-175);
     }
-  }
 
-  // Desktop container adjustment
-  @include media-breakpoint-up(md) {
-    > .circle {
-      margin-left: rem(60);
-      margin-right: rem(60);
+    @include media-breakpoint-up(sm, $mobileOnly) {
+      &.circle-pattern-2 > .circle {
+        font-size: rem(450);
+        top: rem(-75);
+        right: rem(-200);
+      }
+      &.circle-pattern-2 > .circle ~ .circle {
+        font-size: rem(500);
+        bottom: rem(-75);
+        left: rem(-200);
+      }
+    }
+
+    // Desktop container adjustment
+    @include media-breakpoint-up(md, $mobileOnly) {
+      > .circle {
+        margin-left: rem(60);
+        margin-right: rem(60);
+      }
     }
   }
+  // #endregion
 }
-// #endregion

package/assets/sass/elements/details.scss

@@ -1,189 +1,198 @@
-details {
-  display: block;
+@use 'sass:map';
+@use '../_func' as *;
 
-  &:not([open]) {
-    padding-bottom: rem(32);
-  }
+$layers: 'true' !default;
+$mobileOnly: 'false' !default;
+$darkMode: 'true' !default;
 
-  summary {
-    font-size: rem(18);
-    line-height: rem(21);
-    font-weight: normal;
-    color: var(--colour-heading);
+@include layer('elements', $layers) {
+  details {
     display: block;
 
-    &:after {
-      content: '\f055';
-      display: inline-block;
-      margin-left: 0.5em;
-      line-height: 1em;
-      font-size: 1em;
-      font-family: 'Font Awesome 6 Pro';
+    &:not([open]) {
+      padding-bottom: rem(32);
     }
-  }
 
-  &[open] summary {
-    margin-bottom: rem(16);
-  }
-}
+    summary {
+      font-size: rem(18);
+      line-height: rem(21);
+      font-weight: normal;
+      color: var(--colour-heading);
+      display: block;
 
-iam-accordion details {
-  --inline-padding: #{rem(2)};
-  --border-radius: #{rem(8)} #{rem(8)} 0 0;
-  --icon-top: #{rem(14)};
-  --line-height: #{rem(24)};
+      &:after {
+        content: '\f055';
+        display: inline-block;
+        margin-left: 0.5em;
+        line-height: 1em;
+        font-size: 1em;
+        font-family: 'Font Awesome 6 Pro';
+      }
+    }
 
-  *:not(iam-tabs) > &:not([open]) {
-    padding-bottom: rem(42);
+    &[open] summary {
+      margin-bottom: rem(16);
+    }
   }
 
-  @include media-breakpoint-up(sm) {
-    --inline-padding: #{rem(30)};
-    --icon-top: #{rem(24)};
+  iam-accordion details {
+    --inline-padding: #{rem(2)};
+    --border-radius: #{rem(8)} #{rem(8)} 0 0;
+    --icon-top: #{rem(14)};
     --line-height: #{rem(24)};
-  }
 
-  summary {
-    border-bottom: 1px solid var(--colour-border);
-    padding-left: var(--inline-padding);
-    padding-right: calc(var(--inline-padding) + #{rem(24)} + #{rem(24)});
-    padding-block: rem(14) !important;
-    position: relative;
-    color: $headings-color;
+    *:not(iam-tabs) > &:not([open]) {
+      padding-bottom: rem(42);
+    }
 
-    &:is(:hover, :focus-visible) {
-      background: var(--colour-light);
-      border-radius: var(--border-radius);
+    @include media-breakpoint-up(sm, $mobileOnly) {
+      --inline-padding: #{rem(30)};
+      --icon-top: #{rem(24)};
+      --line-height: #{rem(24)};
     }
 
-    h3,
-    .h3 {
-      all: unset !important;
+    summary {
+      border-bottom: 1px solid var(--colour-border);
+      padding-left: var(--inline-padding);
+      padding-right: calc(var(--inline-padding) + #{rem(24)} + #{rem(24)});
+      padding-block: rem(14) !important;
+      position: relative;
+      color: $headings-color;
+
+      &:is(:hover, :focus-visible) {
+        background: var(--colour-light);
+        border-radius: var(--border-radius);
+      }
+
+      h3,
+      .h3 {
+        all: unset !important;
+      }
+
+      &::after {
+        display: none;
+      }
+
+      *:is(h1, h2, h4, h5, h6, .h1, .h2, .h4, .h5, .h6, .label) {
+        max-width: 100%;
+        padding: 0;
+        margin: 0;
+
+        &:after {
+          content: '\f055';
+          position: absolute;
+          font-size: rem(24);
+          top: calc((#{var(--line-height)} / 2) - #{rem(12)} + #{rem(14)});
+          right: var(--inline-padding);
+          width: rem(24);
+          height: rem(24);
+          line-height: rem(24);
+          font-weight: 300;
+          font-family: 'Font Awesome 6 Pro';
+        }
+      }
+    }
+
+    &[open] summary {
+      margin-bottom: 2rem;
     }
 
-    &::after {
-      display: none;
+    &[open] summary :is(h1, h2, h4, h5, h6, .h1, .h2, .h4, .h5, .h6, .label) {
+      &:after {
+        content: '\f056';
+        font-weight: 900;
+      }
     }
 
-    *:is(h1, h2, h4, h5, h6, .h1, .h2, .h4, .h5, .h6, .label) {
+    summary:not(:has(h1, h2, h4, h5, h6, .h1, .h2, .h4, .h5, .h6, .label)) {
+      // h3 purposelessly missed out
+
+      font-family: $headings-font-family;
+      font-style: $headings-font-style;
+      color: $headings-color;
+      clear: both;
+      display: block;
+
+      [class*='fa-'] {
+        margin-right: 0.5rem;
+      }
+
+      font-size: rem(18);
+      line-height: var(--line-height);
+      padding-bottom: rem(map.get($heading-sizes, 'h3_pb'));
+      font-weight: 700;
       max-width: 100%;
-      padding: 0;
-      margin: 0;
 
       &:after {
         content: '\f055';
+        display: block;
         position: absolute;
         font-size: rem(24);
         top: calc((#{var(--line-height)} / 2) - #{rem(12)} + #{rem(14)});
         right: var(--inline-padding);
         width: rem(24);
         height: rem(24);
+        margin: 0;
         line-height: rem(24);
         font-weight: 300;
         font-family: 'Font Awesome 6 Pro';
       }
-    }
-  }
 
-  &[open] summary {
-    margin-bottom: 2rem;
-  }
+      @include media-breakpoint-up(sm, $mobileOnly) {
+        font-size: rem(map.get($heading-sizes, 'h3_fs_sm'));
+        --line-height: #{rem(map.get($heading-sizes, 'h3_lh_sm'))};
+        padding-bottom: rem(map.get($heading-sizes, 'h3_pb_sm'));
+        font-weight: 900;
+      }
+    }
 
-  &[open] summary :is(h1, h2, h4, h5, h6, .h1, .h2, .h4, .h5, .h6, .label) {
-    &:after {
-      content: '\f056';
-      font-weight: 900;
+    &[open] summary:not(:has(h1, h2, h4, h5, h6, .h1, .h2, .h4, .h5, .h6)) {
+      &:after {
+        content: '\f056';
+        font-weight: 900;
+      }
     }
   }
 
-  summary:not(:has(h1, h2, h4, h5, h6, .h1, .h2, .h4, .h5, .h6, .label)) {
-    // h3 purposelessly missed out
+  dialog iam-accordion details {
+    --inline-padding: var(--dialog-padding);
 
-    font-family: $headings-font-family;
-    font-style: $headings-font-style;
-    color: $headings-color;
-    clear: both;
-    display: block;
+    margin-inline: calc(var(--dialog-padding) * -1);
+    width: calc(100% + var(--dialog-padding) + var(--dialog-padding));
 
-    [class*='fa-'] {
-      margin-right: 0.5rem;
+    &:has(summary:is(:hover, :focus-visible)),
+    &[open] {
+      background: var(--colour-light);
+      overflow: hidden;
     }
 
-    font-size: rem(18);
-    line-height: var(--line-height);
-    padding-bottom: rem(map-get($heading-sizes, 'h3_pb'));
-    font-weight: 700;
-    max-width: 100%;
-
-    &:after {
-      content: '\f055';
-      display: block;
-      position: absolute;
-      font-size: rem(24);
-      top: calc((#{var(--line-height)} / 2) - #{rem(12)} + #{rem(14)});
-      right: var(--inline-padding);
-      width: rem(24);
-      height: rem(24);
-      margin: 0;
-      line-height: rem(24);
-      font-weight: 300;
-      font-family: 'Font Awesome 6 Pro';
-    }
-
-    @include media-breakpoint-up(sm) {
-      font-size: rem(map-get($heading-sizes, 'h3_fs_sm'));
-      --line-height: #{rem(map-get($heading-sizes, 'h3_lh_sm'))};
-      padding-bottom: rem(map-get($heading-sizes, 'h3_pb_sm'));
-      font-weight: 900;
+    // Fix the border bottom issue
+    &:has(+ details[open]),
+    &:has(summary:is(:hover, :focus-visible)),
+    &:has(+ details summary:is(:hover, :focus-visible)),
+    &[open] {
+      border-bottom: 1px solid var(--colour-border);
     }
-  }
 
-  &[open] summary:not(:has(h1, h2, h4, h5, h6, .h1, .h2, .h4, .h5, .h6)) {
-    &:after {
-      content: '\f056';
-      font-weight: 900;
+    &:has(+ details[open]) summary,
+    &:has(summary:is(:hover, :focus-visible)) summary,
+    &:has(+ details summary:is(:hover, :focus-visible)) summary,
+    &[open] summary {
+      border-bottom: 0;
     }
-  }
-}
-
-dialog iam-accordion details {
-  --inline-padding: var(--dialog-padding);
-
-  margin-inline: calc(var(--dialog-padding) * -1);
-  width: calc(100% + var(--dialog-padding) + var(--dialog-padding));
-
-  &:has(summary:is(:hover, :focus-visible)),
-  &[open] {
-    background: var(--colour-light);
-    overflow: hidden;
-  }
-
-  // Fix the border bottom issue
-  &:has(+ details[open]),
-  &:has(summary:is(:hover, :focus-visible)),
-  &:has(+ details summary:is(:hover, :focus-visible)),
-  &[open] {
-    border-bottom: 1px solid var(--colour-border);
-  }
 
-  &:has(+ details[open]) summary,
-  &:has(summary:is(:hover, :focus-visible)) summary,
-  &:has(+ details summary:is(:hover, :focus-visible)) summary,
-  &[open] summary {
-    border-bottom: 0;
-  }
-
-  &[open] summary {
-    margin-bottom: 1rem;
-  }
+    &[open] summary {
+      margin-bottom: 1rem;
+    }
 
-  summary {
-    --inline-padding: 0;
-  }
+    summary {
+      --inline-padding: 0;
+    }
 
-  padding-inline: var(--dialog-padding);
+    padding-inline: var(--dialog-padding);
 
-  &::before {
-    content: '';
+    &::before {
+      content: '';
+    }
   }
 }