@iamproperty/components 7.1.0--beta6 → 7.2.0

package/assets/sass/elements/tooltips.scss

@@ -1,4 +1,4 @@
-@use '../_func.scss' as *;
+@use '../_func' as *;
 
 @mixin tooltip() {
   display: block;
@@ -18,13 +18,14 @@
   > strong:first-child {
     display: block;
     padding-bottom: 1rem;
+    color: inherit;
   }
 
-  @include media-breakpoint-up(sm) {
+  @include media-breakpoint-up(sm, $mobileOnly) {
     width: #{rem(335)};
   }
 
-  @include media-breakpoint-up(md) {
+  @include media-breakpoint-up(md, $mobileOnly) {
     width: #{rem(360)};
   }
 
@@ -41,111 +42,117 @@
   }
 }
 
-abbr[title] {
-  text-underline-offset: 0.2em;
-}
-
-.tooltip {
-  text-decoration: none;
-  position: relative;
-
-  &:is(:hover, :focus, :active) {
-    text-decoration: none;
-  }
+$layers: 'true' !default;
+$mobileOnly: 'false' !default;
+$darkMode: 'true' !default;
 
-  &:after {
-    font-family: 'Font Awesome 6 Pro';
-    font-weight: 900;
-    content: '\f059';
-    display: inline-block;
-    margin-left: 0.2em;
-    margin-right: 0.1em;
-    margin-bottom: 0.1em;
-    color: var(--colour-primary);
+@include layer('elements', $layers) {
+  abbr[title] {
+    text-underline-offset: 0.2em;
   }
 
-  > span {
-    opacity: 0;
-    position: absolute;
-  }
+  .tooltip {
+    text-decoration: none;
+    position: relative;
 
-  &:is(:hover, .hover, :focus, :active) {
-    > span {
-      opacity: 1;
-      @include tooltip();
+    &:is(:hover, :focus, :active) {
+      text-decoration: none;
     }
-  }
-
-  &.tooltip--top span {
-    top: auto;
-    bottom: calc(100% + 0.5rem);
-    left: auto;
-    right: 0.85em;
 
     &:after {
-      top: 100%;
-      bottom: auto;
-      left: 50%;
-      border-color: var(--colour-primary) transparent transparent transparent;
-      margin-top: -1px;
+      font-family: 'Font Awesome 6 Pro';
+      font-weight: 900;
+      content: '\f059';
+      display: inline-block;
+      margin-left: 0.2em;
+      margin-right: 0.1em;
+      margin-bottom: 0.1em;
+      color: var(--colour-primary);
     }
-  }
-
-  &.shift--left span {
-    transform: translate(calc(0% + 1.5rem), 0);
 
-    &:after {
-      left: calc(100% - 1.5rem);
+    > span {
+      opacity: 0;
+      position: absolute;
     }
-  }
-  &.shift--right span {
-    transform: translate(calc(100% - 1rem), 0);
 
-    &:after {
-      left: 1rem;
+    &:is(:hover, .hover, :focus, :active) {
+      > span {
+        opacity: 1;
+        @include tooltip();
+      }
     }
-  }
 
-  @include media-breakpoint-up(sm) {
-    &:is(.shift--left, .shift--right) span {
-      transform: translate(50%, 0);
+    &.tooltip--top span {
+      top: auto;
+      bottom: calc(100% + 0.5rem);
+      left: auto;
+      right: 0.85em;
 
       &:after {
+        top: 100%;
+        bottom: auto;
         left: 50%;
+        border-color: var(--colour-primary) transparent transparent transparent;
+        margin-top: -1px;
       }
     }
 
-    &.tooltip--left span {
-      top: 50%;
-      bottom: auto;
-      left: auto;
-      right: 1.6em;
+    &.shift--left span {
+      transform: translate(calc(0% + 1.5rem), 0);
 
-      transform: translate(0, -50%);
+      &:after {
+        left: calc(100% - 1.5rem);
+      }
+    }
+    &.shift--right span {
+      transform: translate(calc(100% - 1rem), 0);
 
       &:after {
-        top: calc(50% - 0.5em);
-        bottom: auto;
-        left: calc(100% + 0.25em - 1px);
-        border-color: transparent transparent transparent var(--colour-primary);
-        margin-bottom: 0;
+        left: 1rem;
       }
     }
-    &.tooltip--right span {
-      top: 50%;
-      bottom: auto;
-      left: calc(100% + 0.5rem);
-      right: auto;
 
-      transform: translate(0, -50%);
+    @include media-breakpoint-up(sm, $mobileOnly) {
+      &:is(.shift--left, .shift--right) span {
+        transform: translate(50%, 0);
 
-      &:after {
-        top: calc(50% - 0.5em);
+        &:after {
+          left: 50%;
+        }
+      }
+
+      &.tooltip--left span {
+        top: 50%;
         bottom: auto;
         left: auto;
-        right: calc(100% - 1px);
-        border-color: transparent var(--colour-primary) transparent transparent;
-        margin-bottom: 0;
+        right: 1.6em;
+
+        transform: translate(0, -50%);
+
+        &:after {
+          top: calc(50% - 0.5em);
+          bottom: auto;
+          left: calc(100% + 0.25em - 1px);
+          border-color: transparent transparent transparent var(--colour-primary);
+          margin-bottom: 0;
+        }
+      }
+      &.tooltip--right span {
+        top: 50%;
+        bottom: auto;
+        left: calc(100% + 0.5rem);
+        right: auto;
+
+        transform: translate(0, -50%);
+
+        &:after {
+          top: calc(50% - 0.5em);
+          bottom: auto;
+          left: auto;
+          right: calc(100% - 1px);
+          border-color: transparent var(--colour-primary) transparent transparent;
+          margin-bottom: 0;
+        }
       }
     }
   }

package/assets/sass/elements/type.scss

@@ -1,199 +1,211 @@
 @use 'sass:map';
-@use '../_func.scss' as *;
+@use '../_func' as *;
 
-/* Duplicated from bootstrap reboot so that the type file will compile */
-mark {
-  padding: $mark-padding;
-  background-color: $mark-bg;
-}
+$layers: 'true' !default;
+$mobileOnly: 'false' !default;
+$darkMode: 'true' !default;
 
-//@import "../../bootstrap/scss/_type.scss";
+@include layer('elements', $layers) {
+  /* Duplicated from bootstrap reboot so that the type file will compile */
+  mark {
+    padding: $mark-padding;
+    background-color: $mark-bg;
+  }
 
-// #region headings
+  //@import "../../bootstrap/scss/_type.scss";
 
-%heading {
-  --line-height: #{$headings-line-height};
-  // From bootstrap reboot
-  margin-top: 0; // 1
-  margin-bottom: $headings-margin-bottom;
-  font-family: $headings-font-family;
-  font-style: $headings-font-style;
-  font-weight: bold;
-  line-height: var(--line-height);
-  color: $headings-color;
-  // END:Bootstap reboot
-  clear: both;
-  display: block;
-  padding-bottom: 2rem;
+  // #region headings
 
-  [class*='fa-'] {
-    margin-right: 0.5rem;
+  %heading {
+    --line-height: #{$headings-line-height};
+    // From bootstrap reboot
+    margin-top: 0; // 1
+    margin-bottom: $headings-margin-bottom;
+    font-family: $headings-font-family;
+    font-style: $headings-font-style;
+    font-weight: bold;
+    line-height: var(--line-height);
+    color: $headings-color;
+    // END:Bootstap reboot
+    clear: both;
+    display: block;
+    padding-bottom: 2rem;
+
+    [class*='fa-'] {
+      margin-right: 0.5rem;
+    }
   }
-}
 
-@include is('h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6,.display-1,.display-2, .display-3, .display-4') {
-  @extend %heading;
-}
+  @include is('h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6,.display-1,.display-2, .display-3, .display-4') {
+    @extend %heading;
+  }
 
-:is(.h1, h1) {
-  --line-height: #{rem(map-get($heading-sizes, 'h1_lh'))};
+  :is(.h1, 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;
+    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 media-breakpoint-up(sm, $mobileOnly) {
+      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'));
+    }
   }
-}
-
-:is(h2, .h2) {
-  font-size: rem(map-get($heading-sizes, 'h2_fs'));
-  --line-height: #{rem(map-get($heading-sizes, 'h2_lh'))};
-  padding-bottom: rem(map-get($heading-sizes, 'h1_pb'));
-  font-weight: 900;
 
-  @include media-breakpoint-up(sm) {
-    font-size: rem(map-get($heading-sizes, 'h2_fs_sm'));
-    --line-height: #{rem(map-get($heading-sizes, 'h2_lh_sm'))};
-    padding-bottom: rem(map-get($heading-sizes, 'h2_pb_sm'));
+  :is(h2, .h2) {
+    font-size: rem(map.get($heading-sizes, 'h2_fs'));
+    --line-height: #{rem(map.get($heading-sizes, 'h2_lh'))};
+    padding-bottom: rem(map.get($heading-sizes, 'h1_pb'));
+    font-weight: 900;
+
+    @include media-breakpoint-up(sm, $mobileOnly) {
+      font-size: rem(map.get($heading-sizes, 'h2_fs_sm'));
+      --line-height: #{rem(map.get($heading-sizes, 'h2_lh_sm'))};
+      padding-bottom: rem(map.get($heading-sizes, 'h2_pb_sm'));
+    }
   }
-}
-
-:is(h3, .h3) {
-  font-size: rem(map-get($heading-sizes, 'h3_fs'));
-  --line-height: #{rem(map-get($heading-sizes, 'h3_lh'))};
-  padding-bottom: rem(map-get($heading-sizes, 'h3_pb'));
-  max-width: var(--content-max-width);
-  font-weight: 900;
 
-  @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'));
+  :is(h3, .h3) {
+    font-size: rem(map.get($heading-sizes, 'h3_fs'));
+    --line-height: #{rem(map.get($heading-sizes, 'h3_lh'))};
+    padding-bottom: rem(map.get($heading-sizes, 'h3_pb'));
+    max-width: var(--content-max-width);
+    font-weight: 900;
+
+    @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'));
+    }
   }
-}
 
-:is(.h4, h4, .h5, h5, .h6, h6) {
-  font-size: rem(map-get($heading-sizes, 'h4_fs'));
-  --line-height: #{rem(map-get($heading-sizes, 'h4_lh'))};
-  padding-bottom: rem(map-get($heading-sizes, 'h4_pb'));
-  max-width: var(--content-max-width);
+  :is(.h4, h4, .h5, h5, .h6, h6) {
+    font-size: rem(map.get($heading-sizes, 'h4_fs'));
+    --line-height: #{rem(map.get($heading-sizes, 'h4_lh'))};
+    padding-bottom: rem(map.get($heading-sizes, 'h4_pb'));
+    max-width: var(--content-max-width);
 
-  /* The values for mobile and tablet are exactly the same, but if that changes this block needs to be re-instated 
-  @include media-breakpoint-up(sm) {
+    /* The values for mobile and tablet are exactly the same, but if that changes this block needs to be re-instated 
+  @include media-breakpoint-up(sm,$mobileOnly) {
 
-    font-size: rem(map-get($heading-sizes,"h4_fs_sm"));
-    line-height: rem(map-get($heading-sizes,"h4_lh_sm"));
-    padding-bottom: rem(map-get($heading-sizes,"h4_pb_sm"));
+    font-size: rem(map.get($heading-sizes,"h4_fs_sm"));
+    line-height: rem(map.get($heading-sizes,"h4_lh_sm"));
+    padding-bottom: rem(map.get($heading-sizes,"h4_pb_sm"));
   }
   */
-}
-// #endregion
-
-p {
-  margin-top: 0;
-  font-size: rem(map-get($heading-sizes, 'body_fs'));
-  line-height: rem(map-get($heading-sizes, 'body_lh'));
-  padding-bottom: rem(map-get($heading-sizes, 'body_end_pb'));
-  max-width: var(--content-max-width);
-  margin-bottom: 0;
-}
-
-p:has(+ p) {
-  padding-bottom: rem(map-get($heading-sizes, 'body_pb'));
-}
+  }
+  // #endregion
 
-:is(.lead, .strapline) {
-  font-size: rem(map-get($heading-sizes, 'lead_fs'));
-  line-height: rem(map-get($heading-sizes, 'lead_lh'));
-  padding-bottom: rem(map-get($heading-sizes, 'lead_pb'));
-  max-width: var(--content-max-width);
-  font-weight: 700;
-}
+  p {
+    margin-top: 0;
+    font-size: rem(map.get($heading-sizes, 'body_fs'));
+    line-height: rem(map.get($heading-sizes, 'body_lh'));
+    padding-bottom: rem(map.get($heading-sizes, 'body_end_pb'));
+    max-width: var(--content-max-width);
+    margin-bottom: 0;
+  }
 
-small,
-.small {
-  font-size: rem(map-get($heading-sizes, 'small_fs'));
-  line-height: rem(map-get($heading-sizes, 'small_lh'));
-  padding-bottom: rem(map-get($heading-sizes, 'small_pb'));
-  max-width: var(--content-max-width);
-  font-family: arial, sans-serif;
-  font-weight: normal;
-}
+  p:has(+ p) {
+    padding-bottom: rem(map.get($heading-sizes, 'body_pb'));
+  }
 
-sub,
-sup {
-  position: relative;
-  font-size: 0.75em;
-  line-height: 0;
-  vertical-align: baseline;
-}
+  :is(.lead, .strapline) {
+    font-size: rem(map.get($heading-sizes, 'lead_fs'));
+    line-height: rem(map.get($heading-sizes, 'lead_lh'));
+    padding-bottom: rem(map.get($heading-sizes, 'lead_pb'));
+    max-width: var(--content-max-width);
+    font-weight: 700;
+  }
 
-sub {
-  bottom: -0.25em;
-}
-sup {
-  top: -0.5em;
-}
+  small,
+  .small {
+    font-size: rem(map.get($heading-sizes, 'small_fs'));
+    line-height: rem(map.get($heading-sizes, 'small_lh'));
+    padding-bottom: rem(map.get($heading-sizes, 'small_pb'));
+    max-width: var(--content-max-width);
+    font-family: arial, sans-serif;
+    font-weight: normal;
+  }
 
-abbr[title] {
-  text-decoration: underline dotted; // 1
-  cursor: help; // 2
-  text-decoration-skip-ink: none; // 3
-}
+  sub,
+  sup {
+    position: relative;
+    font-size: 0.75em;
+    line-height: 0;
+    vertical-align: baseline;
+  }
 
-// Address
+  sub {
+    bottom: -0.25em;
+  }
+  sup {
+    top: -0.5em;
+  }
 
-address {
-  margin-bottom: 1rem;
-  font-style: normal;
-  line-height: inherit;
-}
+  abbr[title] {
+    text-decoration: underline dotted; // 1
+    cursor: help; // 2
+    text-decoration-skip-ink: none; // 3
+  }
 
-blockquote {
-}
+  strong {
+    font-weight: bolder;
+    font-family: var(--font-heading);
+    color: var(--colour-heading);
+  }
 
-blockquote {
-  margin: 0;
-  quotes: '“' '”' '‘' '’';
-  padding-bottom: rem(48);
-  overflow: hidden;
+  // Address
 
-  p {
-    font-size: rem(24);
-    line-height: rem(32);
-    padding-bottom: 0;
+  address {
+    margin-bottom: 1rem;
+    font-style: normal;
+    line-height: inherit;
   }
 
-  & p:first-child:before {
-    content: open-quote;
+  blockquote {
   }
-  & p:last-of-type:after {
-    content: close-quote;
+
+  blockquote {
+    margin: 0;
+    quotes: '“' '”' '‘' '’';
+    padding-bottom: rem(48);
+    overflow: hidden;
+
+    p {
+      font-size: rem(24);
+      line-height: rem(32);
+      padding-bottom: 0;
+    }
+
+    & p:first-child:before {
+      content: open-quote;
+    }
+    & p:last-of-type:after {
+      content: close-quote;
+    }
+
+    cite {
+      font-size: rem(18);
+      line-height: rem(32);
+      padding-bottom: 0;
+      font-weight: bold;
+      font-style: normal;
+    }
   }
 
-  cite {
-    font-size: rem(18);
-    line-height: rem(32);
-    padding-bottom: 0;
+  .stat {
+    font-size: rem(64);
+    line-height: rem(72);
     font-weight: bold;
-    font-style: normal;
+    color: $headings-color;
+    display: block;
+
+    text-decoration: underline;
+    text-underline-offset: 0.75rem;
+    text-decoration-color: var(--colour-secondary);
+    text-decoration-thickness: rem(4);
+    margin-bottom: rem(64);
   }
 }
-
-.stat {
-  font-size: rem(64);
-  line-height: rem(72);
-  font-weight: bold;
-  color: $headings-color;
-  display: block;
-
-  text-decoration: underline;
-  text-underline-offset: 0.75rem;
-  text-decoration-color: var(--colour-secondary);
-  text-decoration-thickness: rem(4);
-  margin-bottom: rem(64);
-}

package/assets/sass/email.scss

@@ -5,7 +5,6 @@
 @use '_func' as *;
 
 $mobileOnly: 'true';
-$compatible: 'true';
 
 // Update the breakpoints to just one to remove some utility classes
 $grid-breakpoints: (
@@ -21,6 +20,10 @@ $container-padding-x: 32;
 $default-curve-width: 600;
 
 @import '_corefiles';
+@import '_grid';
+@import '_bs_grid';
+@import '_utilities';
+@import '_utility-mixins';
 
 :root {
   --container-padding-x: #{rem(66)};

package/assets/sass/error.scss

@@ -1,8 +1,16 @@
+@use 'sass:map';
+
 @charset "UTF-8";
 
 // Set mobile only variable so that the media query mixin doesn't print out non mobile rules
 @use '_func' as *;
 
+@use '_corefiles';
+@use '_grid';
+@use '_bs_grid';
+@use '_utilities';
+@use '_utility-mixins';
+
 @include layer('reset') {
   html {
     --font-body: arial, sans-serif !important;
@@ -10,20 +18,18 @@
   }
 }
 
-@import '_corefiles';
-
 @include layer('elements') {
   .h1 {
-    --line-height: #{rem(map-get($heading-sizes, 'h1_lh'))};
+    --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-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 media-breakpoint-up(sm, $mobileOnly) {
+      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'));
     }
   }
 }