@iamproperty/components 7.7.1--beta4 → 7.7.1--beta6

package/assets/sass/elements/tooltips.scss

@@ -1,151 +1,152 @@
-@use '../_func' as *;
-
-@layer elements {
-  abbr[title] {
-    text-underline-offset: 0.2em;
-  }
-
-  .tooltip {
-    text-decoration: none;
-    position: relative;
-
-    &:is(:hover, :focus, :active) {
-      text-decoration: none;
-    }
-
-    &:after {
-      font-family: 'Font Awesome 7 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);
-    }
-
-    > span {
-      opacity: 0;
-      position: absolute;
-    }
-
-    &:is(:hover, .hover, :focus, :active) {
-      > span {
-        opacity: 1;
-        display: block;
-        z-index: var(--index-floating);
-        position: absolute;
-        top: calc(100% + 0.5rem);
-        left: auto;
-        right: 0.85em;
-        width: 16.875rem; /* 270 */ 
-        transform: translate(50%, 0);
-        background: var(--colour-primary);
-        color: var(--colour-white);
-        padding: 1.5rem;
-        border-radius: 0.5rem;
-        box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.11);
-
-        > strong:first-child {
-          display: block;
-          padding-bottom: 1rem;
-          color: inherit;
-        }
-
-        @media screen and (min-width: 36em) {
-          width: 20.9375rem; /* 335 */ 
-        }
-
-        @media screen and (min-width: 62em) {
-          width: 22.5rem; /* 360 */ 
-        }
-
-        &::after {
-          content: '';
-          position: absolute;
-          bottom: 100%;
-          left: 50%;
-          margin-left: -0.25rem;
-          border-width: 0.5rem;
-          border-style: solid;
-          border-color: transparent transparent var(--colour-primary) transparent;
-          margin-bottom: -1px;
-        }
-      }
-    }
-
-    &.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;
-      }
-    }
-
-    &.shift--left span {
-      transform: translate(calc(0% + 1.5rem), 0);
-
-      &:after {
-        left: calc(100% - 1.5rem);
-      }
-    }
-    &.shift--right span {
-      transform: translate(calc(100% - 1rem), 0);
-
-      &:after {
-        left: 1rem;
-      }
-    }
-
-    @media screen and (min-width: 36em) {
-      &:is(.shift--left, .shift--right) span {
-        transform: translate(50%, 0);
-
-        &:after {
-          left: 50%;
-        }
-      }
-
-      &.tooltip--left span {
-        top: 50%;
-        bottom: auto;
-        left: auto;
-        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;
-        }
-      }
-    }
-  }
-}
+@use '../_func' as *;
+
+@layer elements {
+  abbr[title] {
+    text-underline-offset: 0.2em;
+  }
+
+  .tooltip {
+    text-decoration: none;
+    position: relative;
+
+    &:is(:hover, :focus, :active) {
+      text-decoration: none;
+    }
+
+    &:after {
+      font-family: 'Font Awesome 7 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);
+    }
+
+    > span {
+      opacity: 0;
+      position: absolute;
+    }
+
+    &:is(:hover, .hover, :focus, :active) {
+      & > span {
+        opacity: 1;
+        display: block;
+        z-index: var(--index-floating);
+        position: absolute;
+        top: calc(100% + 0.5rem);
+        left: auto;
+        right: 0.85em;
+        width: 16.875rem; /* 270 */ 
+        transform: translate(50%, 0);
+        background: var(--colour-primary);
+        color: var(--colour-white);
+        padding: 1.5rem;
+        border-radius: 0.5rem;
+        box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.11);
+
+        & > strong:first-child {
+          display: block;
+          padding-bottom: 1rem;
+          color: inherit;
+        }
+
+
+        &::after {
+          content: '';
+          position: absolute;
+          bottom: 100%;
+          left: 50%;
+          margin-left: -0.25rem;
+          border-width: 0.5rem;
+          border-style: solid;
+          border-color: transparent transparent var(--colour-primary) transparent;
+          margin-bottom: -1px;
+        }
+        
+        @media screen and (min-width: 36em) {
+          width: 20.9375rem; /* 335 */ 
+        }
+
+        @media screen and (min-width: 62em) {
+          width: 22.5rem; /* 360 */ 
+        }
+      }
+    }
+
+    &.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;
+      }
+    }
+
+    &.shift--left span {
+      transform: translate(calc(0% + 1.5rem), 0);
+
+      &:after {
+        left: calc(100% - 1.5rem);
+      }
+    }
+    &.shift--right span {
+      transform: translate(calc(100% - 1rem), 0);
+
+      &:after {
+        left: 1rem;
+      }
+    }
+
+    @media screen and (min-width: 36em) {
+      &:is(.shift--left, .shift--right) span {
+        transform: translate(50%, 0);
+
+        &:after {
+          left: 50%;
+        }
+      }
+
+      &.tooltip--left span {
+        top: 50%;
+        bottom: auto;
+        left: auto;
+        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.css

@@ -1,166 +1,166 @@
-@layer elements {
-
-  /* #region Headings */
-  :is(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6,.display-1,.display-2, .display-3, .display-4) {
-    margin-top: 0; 
-    margin-bottom: 0;
-    font-family: var(--font-heading);
-    font-style: normal;
-    font-weight: bold;
-
-    color: var(--colour-heading);
-    clear: both;
-    display: block;
-
-    & [class*='fa-'] {
-      margin-right: 0.5rem;
-    }
-  }
-
-  :is(.h1, h1) {
-    font-size: var(--h1-fs);
-    line-height: var(--h1-lh);
-    padding-bottom: var(--h1-pb);
-    font-weight: 900;
-  }
-
-  :is(h2, .h2) {
-    font-size: var(--h2-fs);
-    line-height: var(--h2-lh);
-    padding-bottom: var(--h2-pb);
-    font-weight: 900;
-  }
-
-  :is(h3, .h3) {
-    font-size: var(--h3-fs);
-    line-height: var(--h3-lh);
-    padding-bottom: var(--h3-pb);
-    max-width: var(--content-max-width);
-  }
-
-  :is(.h4, h4, .h5, h5, .h6, h6) {
-    font-size: var(--h4-fs);
-    line-height: var(--h4-lh);
-    padding-bottom: var(--h4-pb);
-    max-width: var(--content-max-width);
-  }
-  /* #endregion */
-
-  p {
-    margin-top: 0;
-    font-size: var(--body-fs);
-    line-height: 1.5rem;
-    padding-bottom: 3rem;
-    max-width: var(--content-max-width);
-    margin-bottom: 0;
-  }
-
-  p:has(+ p) {
-    padding-bottom: 1.5rem;
-  }
-
-  :is(.lead, .strapline) {
-    font-size: 1.125rem; /* 18/16 */
-    line-height: 1.75rem; /* 28/16 */
-   padding-bottom: 3rem;
-    max-width: var(--content-max-width);
-    font-weight: 700;
-  }
-
-  small,
-  .small {
-    font-size: 0.875rem; /* 14/16 */
-    line-height: 1.5rem;
-    padding-bottom: 2rem;
-    max-width: var(--content-max-width);
-    font-weight: normal;
-  }
-  
-  .x-small {
-    font-size: 0.625rem; /* 10/16 */
-    line-height: 1.5rem;
-    padding-bottom: 1rem;
-    max-width: var(--content-max-width);
-    font-weight: normal;
-  }
-
-  sub,
-  sup {
-    position: relative;
-    font-size: 0.75em;
-    line-height: 0;
-    vertical-align: baseline;
-  }
-
-  sub {
-    bottom: -0.25em;
-  }
-  sup {
-    top: -0.5em;
-  }
-
-  abbr[title] {
-    text-decoration: underline dotted;
-    cursor: help;
-    text-decoration-skip-ink: none;
-  }
-
-  strong {
-    font-weight: bolder;
-    font-family: var(--font-heading);
-    color: var(--colour-heading);
-  }
-
-  address {
-    margin-bottom: 1rem;
-    font-style: normal;
-    line-height: inherit;
-  }
-
-  blockquote {
-    margin: 0;
-    quotes: '“' '”' '‘' '’';
-    padding-bottom: 3rem;
-    overflow: hidden;
-
-    & p {
-      font-size: 1.5rem;
-      line-height: 2rem;
-      padding-bottom: 0;
-    }
-
-    & p:first-child:before {
-      content: open-quote;
-    }
-    & p:last-of-type:after {
-      content: close-quote;
-    }
-
-    & cite {
-      font-size: 1.125rem; /* 18/16 */
-      line-height: 2rem;
-      padding-bottom: 0;
-      font-weight: bold;
-      font-style: normal;
-    }
-  }
-
-  mark {
-    padding: 0.1875em;
-    background-color: yellow;
-  }
-
-  .stat {
-    font-size: 4rem /* 64/16 */;
-    line-height: 4.5rem; /* 72/16 */
-    font-weight: bold;
-    color: var(--colour-heading);
-    display: block;
-
-    text-decoration: underline;
-    text-underline-offset: 0.75rem;
-    text-decoration-color: var(--colour-secondary);
-    text-decoration-thickness: 0.25rem;
-    margin-bottom: 4rem /* 64/16 */;
-  }
-}
+@layer elements {
+
+  /* #region Headings */
+  :is(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6,.display-1,.display-2, .display-3, .display-4) {
+    margin-top: 0; 
+    margin-bottom: 0;
+    font-family: var(--font-heading);
+    font-style: normal;
+    font-weight: bold;
+
+    color: var(--colour-heading);
+    clear: both;
+    display: block;
+
+    & [class*='fa-'] {
+      margin-right: 0.5rem;
+    }
+  }
+
+  :is(.h1, h1) {
+    font-size: var(--h1-fs);
+    line-height: var(--h1-lh);
+    padding-bottom: var(--h1-pb);
+    font-weight: 900;
+  }
+
+  :is(h2, .h2) {
+    font-size: var(--h2-fs);
+    line-height: var(--h2-lh);
+    padding-bottom: var(--h2-pb);
+    font-weight: 900;
+  }
+
+  :is(h3, .h3) {
+    font-size: var(--h3-fs);
+    line-height: var(--h3-lh);
+    padding-bottom: var(--h3-pb);
+    max-width: var(--content-max-width);
+  }
+
+  :is(.h4, h4, .h5, h5, .h6, h6) {
+    font-size: var(--h4-fs);
+    line-height: var(--h4-lh);
+    padding-bottom: var(--h4-pb);
+    max-width: var(--content-max-width);
+  }
+  /* #endregion */
+
+  p {
+    margin-top: 0;
+    font-size: var(--body-fs);
+    line-height: 1.5rem;
+    padding-bottom: 3rem;
+    max-width: var(--content-max-width);
+    margin-bottom: 0;
+  }
+
+  p:has(+ p) {
+    padding-bottom: 1.5rem;
+  }
+
+  :is(.lead, .strapline) {
+    font-size: 1.125rem; /* 18/16 */
+    line-height: 1.75rem; /* 28/16 */
+   padding-bottom: 3rem;
+    max-width: var(--content-max-width);
+    font-weight: 700;
+  }
+
+  small,
+  .small {
+    font-size: 0.875rem; /* 14/16 */
+    line-height: 1.5rem;
+    padding-bottom: 2rem;
+    max-width: var(--content-max-width);
+    font-weight: normal;
+  }
+  
+  .x-small {
+    font-size: 0.625rem; /* 10/16 */
+    line-height: 1.5rem;
+    padding-bottom: 1rem;
+    max-width: var(--content-max-width);
+    font-weight: normal;
+  }
+
+  sub,
+  sup {
+    position: relative;
+    font-size: 0.75em;
+    line-height: 0;
+    vertical-align: baseline;
+  }
+
+  sub {
+    bottom: -0.25em;
+  }
+  sup {
+    top: -0.5em;
+  }
+
+  abbr[title] {
+    text-decoration: underline dotted;
+    cursor: help;
+    text-decoration-skip-ink: none;
+  }
+
+  strong {
+    font-weight: bolder;
+    font-family: var(--font-heading);
+    color: var(--colour-heading);
+  }
+
+  address {
+    margin-bottom: 1rem;
+    font-style: normal;
+    line-height: inherit;
+  }
+
+  blockquote {
+    margin: 0;
+    quotes: '“' '”' '‘' '’';
+    padding-bottom: 3rem;
+    overflow: hidden;
+
+    & p {
+      font-size: 1.5rem;
+      line-height: 2rem;
+      padding-bottom: 0;
+    }
+
+    & p:first-child:before {
+      content: open-quote;
+    }
+    & p:last-of-type:after {
+      content: close-quote;
+    }
+
+    & cite {
+      font-size: 1.125rem; /* 18/16 */
+      line-height: 2rem;
+      padding-bottom: 0;
+      font-weight: bold;
+      font-style: normal;
+    }
+  }
+
+  mark {
+    padding: 0.1875em;
+    background-color: yellow;
+  }
+
+  .stat {
+    font-size: 4rem /* 64/16 */;
+    line-height: 4.5rem; /* 72/16 */
+    font-weight: bold;
+    color: var(--colour-heading);
+    display: block;
+
+    text-decoration: underline;
+    text-underline-offset: 0.75rem;
+    text-decoration-color: var(--colour-secondary);
+    text-decoration-thickness: 0.25rem;
+    margin-bottom: 4rem /* 64/16 */;
+  }
+}