@iamproperty/components 7.6.0 → 7.6.2

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

@@ -1,10 +1,10 @@
 @use '../_func' as *;
 
-$layers: 'true' !default;
-$mobileOnly: 'false' !default;
-$darkMode: 'true' !default;
 
-@include layer('elements', $layers) {
+
+
+
+@layer elements {
   // #region Tertiary Button
 
   .btn.btn-tertiary {
@@ -13,10 +13,10 @@ $darkMode: 'true' !default;
     color: var(--colour-link);
     margin: 0 var(--btn-margin) var(--btn-margin) 0;
     padding: 0;
-    font-size: rem(18);
+    font-size: 1.125rem; /* 18/16 */
     font-weight: normal;
-    line-height: rem(24);
-    min-height: rem(24);
+    line-height: 1.5rem;
+    min-height: 1.5rem;
     position: relative;
 
     &:after {

package/assets/sass/elements/buttons.scss

@@ -1,37 +1,13 @@
 @use '../_func.scss' as *;
 
-$layers: 'true' !default;
-$mobileOnly: 'false' !default;
-$darkMode: 'true' !default;
 
-@use './buttons--global.scss' with (
-  $layers: $layers,
-  $darkMode: $darkMode,
-  $mobileOnly: $mobileOnly
-);
-@use './buttons--secondary.scss' with (
-  $layers: $layers,
-  $darkMode: $darkMode,
-  $mobileOnly: $mobileOnly
-);
-@use './buttons--tertiary.scss' with (
-  $layers: $layers,
-  $darkMode: $darkMode,
-  $mobileOnly: $mobileOnly
-);
-@use './buttons--action.scss' with (
-  $layers: $layers,
-  $darkMode: $darkMode,
-  $mobileOnly: $mobileOnly
-);
-@use './buttons--compact.scss' with (
-  $layers: $layers,
-  $darkMode: $darkMode,
-  $mobileOnly: $mobileOnly
-);
 
-@use './buttons--special.scss' with (
-  $layers: $layers,
-  $darkMode: $darkMode,
-  $mobileOnly: $mobileOnly
-);
+
+
+@use './buttons--global.scss';
+@use './buttons--secondary.scss';
+@use './buttons--tertiary.scss';
+@use './buttons--action.scss';
+@use './buttons--compact.scss';
+
+@use './buttons--special.scss';

package/assets/sass/elements/code.css

@@ -0,0 +1,46 @@
+@layer elements {
+  pre,
+  code,
+  kbd,
+  samp {
+    font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+    font-size: 1rem;
+  }
+
+  pre {
+    display: block;
+    margin-top: 0; 
+    margin-bottom: 1rem;
+    overflow: auto;
+    font-size: 0.875rem; /* 14/16 */
+
+    /* Account for some code outputs that place code tags in pre tags */
+    code {
+      font-size: inherit;
+      color: inherit;
+      word-break: normal;
+    }
+  }
+
+  code {
+    font-size: 0.875rem; /* 14/16 */
+    color: #d63384;
+    word-wrap: break-word;
+  }
+
+  /* Streamline the style when inside anchors to avoid broken underline and more */
+  a > code {
+    color: inherit;
+  }
+
+  kbd {
+    padding: 0.1875rem 0.375rem;
+    font-size: 0.875rem; /* 14/16 */
+
+    kbd {
+      padding: 0;
+      font-size: 1rem;
+      font-weight: normal;
+    }
+  }
+}

package/assets/sass/elements/container.scss

@@ -1,11 +1,11 @@
 @use 'sass:math';
 @use '../_func' as *;
 
-$layers: 'true' !default;
-$mobileOnly: 'false' !default;
-$darkMode: 'true' !default;
 
-@include layer('elements', $layers) {
+
+
+
+@layer elements {
   // #region container
   .container {
     display: block;
@@ -37,13 +37,13 @@ $darkMode: 'true' !default;
       --col-start: auto;
     }
 
-    @include media-breakpoint-up(sm, $mobileOnly) {
+    @media screen and (min-width: 36em) {
       [class*='sm-col-span-']:not(:first-child) {
         --col-start: auto;
       }
     }
 
-    @include media-breakpoint-up(md, $mobileOnly) {
+    @media screen and (min-width: 62em) {
       [class*='md-col-span-']:not(:first-child) {
         --col-start: auto;
       }
@@ -61,12 +61,12 @@ $darkMode: 'true' !default;
     }
 
     &[class*='bg-'] {
-      padding-top: #{rem(48)};
-      padding-bottom: #{rem(32)};
+      padding-top: 3rem;
+      padding-bottom: 2rem;
     }
 
     &[class*='bg-'] + .container:not([class*='bg-']) {
-      padding-top: #{rem(32)};
+      padding-top: 2rem;
     }
 
     // Fix the clearing for containers
@@ -86,7 +86,7 @@ $darkMode: 'true' !default;
       margin-right: -1.25rem;
       width: calc(100% + 2.5rem);
 
-      @include media-breakpoint-up(sm, $mobileOnly) {
+      @media screen and (min-width: 36em) {
         margin-left: auto;
         margin-right: auto;
         width: 100%;
@@ -104,15 +104,15 @@ $darkMode: 'true' !default;
 
   // replicate container padding-bottom
   main > .row {
-    padding-bottom: #{rem(16)};
+    padding-bottom: 1rem;
 
     &[class*='bg-'] {
-      padding-top: #{rem(48)};
-      padding-bottom: #{rem(32)};
+      padding-top: 3rem;
+      padding-bottom: 2rem;
     }
 
     &[class*='bg-'] + :is(.row, .container):not([class*='bg-']) {
-      padding-top: #{rem(32)};
+      padding-top: 2rem;
     }
   }
   // #endregion
@@ -144,55 +144,6 @@ $darkMode: 'true' !default;
       right: rem(-100);
       bottom: rem(-200);
     }
-
-    @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);
-      }
-    }
-
-    // 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) {
-      &.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
 }

package/assets/sass/elements/details.scss

@@ -1,20 +1,20 @@
 @use 'sass:map';
 @use '../_func' as *;
 
-$layers: 'true' !default;
-$mobileOnly: 'false' !default;
-$darkMode: 'true' !default;
 
-@include layer('elements', $layers) {
+
+
+
+@layer elements {
   details {
     display: block;
 
     &:not([open]) {
-      padding-bottom: rem(32);
+      padding-bottom: 2rem;
     }
 
     summary {
-      font-size: rem(18);
+      font-size: 1.125rem; /* 18/16 */
       line-height: rem(21);
       font-weight: normal;
       color: var(--colour-heading);
@@ -31,26 +31,26 @@ $darkMode: 'true' !default;
     }
 
     &[open] summary {
-      margin-bottom: rem(16);
+      margin-bottom: 1rem;
     }
   }
 
   iam-accordion details {
     --inline-padding: #{rem(2)};
-    --border-radius: #{rem(8)} #{rem(8)} 0 0;
-    --icon-top: #{rem(14)};
-    --line-height: #{rem(24)};
-      --block-padding: #{rem(14)};
+    --border-radius: 0.5rem 0.5rem 0 0;
+    --icon-top: 0.875rem; /* 14/16 */
+    --line-height: 1.5rem;
+      --block-padding: 0.875rem; /* 14/16 */
 
     *:not(iam-tabs) > &:not([open]) {
       padding-bottom: rem(42);
     }
 
-    @include media-breakpoint-up(sm) {
-      --inline-padding: #{rem(14)};
-      --block-padding: #{rem(14)};
-      --icon-top: #{rem(24)};
-      --line-height: #{rem(24)};
+    @media screen and (min-width: 36em) {
+      --inline-padding: 0.875rem; /* 14/16 */
+      --block-padding: 0.875rem; /* 14/16 */
+      --icon-top: 1.5rem;
+      --line-height: 1.5rem;
 
       summary {
         &:has(.h2, h2, .h4, h4) {
@@ -73,10 +73,10 @@ $darkMode: 'true' !default;
     summary {
       border-bottom: 1px solid var(--colour-border);
       padding-left: 0;
-      padding-inline-end: calc(#{var(--inline-padding)} + #{rem(27)} + #{rem(12)});
+      padding-inline-end: calc(#{var(--inline-padding)} + #{rem(27)} + 0.75rem);
       padding-block: var(--block-padding) !important;
       position: relative;
-      color: $headings-color;
+      color: var(--colour-heading);
 
       &:is(:hover, :focus-visible) {
         background: var(--colour-light);
@@ -100,12 +100,12 @@ $darkMode: 'true' !default;
         &:after {
           content: '\f055';
           position: absolute;
-          font-size: rem(24);
-          top: calc((#{var(--line-height)} / 2) - #{rem(12)});
+          font-size: 1.5rem;
+          top: calc((#{var(--line-height)} / 2) - 0.75rem);
           right: var(--inline-padding);
-          width: rem(24);
-          height: rem(24);
-          line-height: rem(24);
+          width: 1.5rem;
+          height: 1.5rem;
+          line-height: 1.5rem;
           font-weight: 300;
           font-family: 'Font Awesome 6 Pro';
         }
@@ -134,9 +134,9 @@ $darkMode: 'true' !default;
     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;
+      font-family: var(--font-heading);
+      font-style: normal;
+      color: var(--colour-heading);
       clear: both;
       display: block;
 
@@ -144,9 +144,9 @@ $darkMode: 'true' !default;
         margin-right: 0.5rem;
       }
 
-      font-size: rem(18);
+      font-size: 1.125rem; /* 18/16 */
       line-height: var(--line-height);
-      padding-bottom: map.get($heading-sizes, 'h3_pb');
+      padding-bottom: var(--heading-pb);
       font-weight: 700;
       max-width: 100%;
 
@@ -154,13 +154,13 @@ $darkMode: 'true' !default;
         content: '\f055';
         display: block;
         position: absolute;
-        font-size: rem(24);
-        top: calc((#{var(--line-height)} / 2) - #{rem(12)} + #{rem(14)});
+        font-size: 1.5rem;
+        top: calc((#{var(--line-height)} / 2) - 0.75rem + #{rem(14)});
         right: var(--inline-padding);
-        width: rem(24);
-        height: rem(24);
+        width: 1.5rem;
+        height: 1.5rem;
         margin: 0;
-        line-height: rem(24);
+        line-height: 1.5rem;
         font-weight: 300;
         font-family: 'Font Awesome 6 Pro';
       }
@@ -189,8 +189,8 @@ $darkMode: 'true' !default;
       overflow: hidden;
     }
 
-    @include media-breakpoint-up(sm, $mobileOnly) {
-      --dialog-padding: #{rem(32)};
+    @media screen and (min-width: 36em) {
+      --dialog-padding: 2rem;
       
     margin-inline: calc(var(--dialog-padding) * -1);
     padding-inline: var(--dialog-padding);

package/assets/sass/elements/dialog.scss

@@ -1,9 +1,9 @@
 @use 'sass:math';
 @use '../_func' as *;
 
-$layers: 'true' !default;
-$mobileOnly: 'false' !default;
-$darkMode: 'true' !default;
+
+
+
 
 @layer elements {
   // non-js fallback
@@ -14,7 +14,7 @@ $darkMode: 'true' !default;
   // #region Default styling of both modals
   dialog,
   [popover] {
-    --dialog-padding: #{rem(24)};
+    --dialog-padding: 1.5rem;
 
     --mh-padding-inline: var(--dialog-padding);
     color: inherit;
@@ -61,15 +61,15 @@ $darkMode: 'true' !default;
     max-height: min(90vh, #{rem(752)});
     overscroll-behavior: contain;
 
-    @include media-breakpoint-up(sm, $mobileOnly) {
-      //--dialog-padding: #{rem(32)};
+    @media screen and (min-width: 36em) {
+      //--dialog-padding: 2rem;
       //padding: var(--dialog-padding);
       min-width: rem(335);
       width: fit-content;
       max-width: rem(686);
     }
 
-    @include media-breakpoint-up(md, $mobileOnly) {
+    @media screen and (min-width: 62em) {
       min-width: rem(454);
       width: fit-content;
       max-width: rem(736);

package/assets/sass/elements/feature.scss

@@ -1,10 +1,10 @@
 @use '../_func' as *;
 
-$layers: 'true' !default;
-$mobileOnly: 'false' !default;
-$darkMode: 'true' !default;
 
-@include layer('elements', $layers) {
+
+
+
+@layer elements {
   
 
   .feature {