@iamproperty/components 3.1.0 → 3.4.4

package/assets/sass/foundations/root.scss

@@ -1,126 +1,126 @@
-@use "../func" as *;
-
-@import "../../../node_modules/bootstrap/scss/_root.scss";
-
-:root {
-  // Print out the $vars array setup in the variables file so they can be used as CSS vars
-  // Custom variable values only support SassScript inside `#{}`.
-  @each $var, $value in $vars {
-    #{$var}: #{$value};
-  }
-
-  // Add in media query based updates to the global vars like updating the heading 1 font size
-  @include media-breakpoint-up(md) {
-    
-    @each $var, $value in $varsMD {
-      #{$var}: #{$value};
-    }
-  }
-
-  // Extra vars needed
-  --body-bg: white;
-  --colour-underline: var(--colour-primary);
-  --colour-heading: var(--colour-primary);
-  --alpha: var(--bg-opacity,1);
-  --#{$variable-prefix}gradient: #{$gradient};
-  --content-max-width: #{$content-max-width};
-  --colour-brand: var(--colour-primary);
-
-  /* Button colours */
-  --btn-bg: var(--colour-warning);
-  --btn-text: var(--colour-primary);
-  --btn-hover-text: var(--colour-primary);
-  --btn-tertiary-bg: var(--colour-primary);
-  --btn-tertiary-hover-text: white;
-}
-
-// Dark mode; functional colours get updated
-@media screen and (prefers-color-scheme: dark) {
-  :root {
-    --body-bg: var(--colour-primary);
-    --colour-admin: var(--colour-primary);
-    @include invert-colours();
-  }
-
-  body .text-primary {
-    color: white!important;
-  }
-
-  body .bg-white {
-    background-color: transparent!important;
-  }
-}
-
-@media screen {
-
-  // Reset the colours of lighter backgrounds to make sure they aren't over written by dark mode. Some other tweaks to colours are applied
-  [class*="bg-"]:not(.bg-primary):not(.bg-dark):not(.bg-danger):not(.bg-black):not(.invert-colours):not(.bg-white):not(.bg-admin) {
-
-    @include reset-colours();
-
-    --colour-body: var(--colour-primary);
-    --colour-heading: var(--colour-primary);
-    color: var(--colour-body);
-
-    --btn-bg: var(--colour-primary);
-    --btn-text: var(--colour-white);
-    --colour-underline: var(--colour-primary);
-
-    .btn-secondary {
-
-      --btn-text: var(--colour-primary);
-    }
-    
-  }
-
-  
-
-  // Slight colour adjustments on the light background to match brand guidelines
-  .bg-light[class*="bg-"]:not(.bg-primary):not(.bg-dark):not(.bg-danger):not(.prevent-invert) {
-    --body-bg: var(--colour-light);
-    --colour-heading: var(--colour-dark);
-    color: var(--colour-dark);
-  }
-
-  // Override the colours when on a dark background, similiar to dark mode but on a module level
-  .bg-primary:not(.prevent-invert),
-  .bg-dark:not(.prevent-invert),
-  .bg-danger:not(.prevent-invert),
-  .bg-black:not(.prevent-invert),
-  .invert-colours {
-    
-    @if $compatible != "true" {
-      
-      @include invert-colours();
-    }
-    color: white;
-  }
-
-  // Only update the the colour of the underline on dark backgrounds except the primary as the secondary colour looks good on it
-  .bg-dark:not(.prevent-invert),
-  .bg-danger:not(.prevent-invert),
-  .bg-black:not(.prevent-invert),
-  .invert-colours {
-    
-    --colour-underline: white;
-  }
-}
-
-
-
-@include media-breakpoint-up(md) {
-
-  .invert-colours-md {
-    
-    @if $compatible != "true" {
-      
-      @include invert-colours();
-    }
-    color: white;
-    --colour-underline: white;
-  }
-
-  [class*="bg-"].bg-md-transparent {
-    background: transparent!important;
-  }
+@use "../func" as *;
+
+@import "../../../node_modules/bootstrap/scss/_root.scss";
+
+:root {
+  // Print out the $vars array setup in the variables file so they can be used as CSS vars
+  // Custom variable values only support SassScript inside `#{}`.
+  @each $var, $value in $vars {
+    #{$var}: #{$value};
+  }
+
+  // Add in media query based updates to the global vars like updating the heading 1 font size
+  @include media-breakpoint-up(md) {
+    
+    @each $var, $value in $varsMD {
+      #{$var}: #{$value};
+    }
+  }
+
+  // Extra vars needed
+  --body-bg: white;
+  --colour-underline: var(--colour-primary);
+  --colour-heading: var(--colour-primary);
+  --alpha: var(--bg-opacity,1);
+  --#{$variable-prefix}gradient: #{$gradient};
+  --content-max-width: #{$content-max-width};
+  --colour-brand: var(--colour-primary);
+
+  /* Button colours */
+  --btn-bg: var(--colour-warning);
+  --btn-text: var(--colour-primary);
+  --btn-hover-text: var(--colour-primary);
+  --btn-tertiary-bg: var(--colour-primary);
+  --btn-tertiary-hover-text: white;
+}
+
+// Dark mode; functional colours get updated
+@media screen and (prefers-color-scheme: dark) {
+  :root {
+    --body-bg: var(--colour-primary);
+    --colour-admin: var(--colour-primary);
+    @include invert-colours();
+  }
+
+  body .text-primary {
+    color: white!important;
+  }
+
+  body .bg-white {
+    background-color: transparent!important;
+  }
+}
+
+@media screen {
+
+  // Reset the colours of lighter backgrounds to make sure they aren't over written by dark mode. Some other tweaks to colours are applied
+  [class*="bg-"]:not(.bg-primary):not(.bg-dark):not(.bg-danger):not(.bg-black):not(.invert-colours):not(.bg-white):not(.bg-admin) {
+
+    @include reset-colours();
+
+    --colour-body: var(--colour-primary);
+    --colour-heading: var(--colour-primary);
+    color: var(--colour-body);
+
+    --btn-bg: var(--colour-primary);
+    --btn-text: var(--colour-white);
+    --colour-underline: var(--colour-primary);
+
+    .btn-secondary {
+
+      --btn-text: var(--colour-primary);
+    }
+    
+  }
+
+  
+
+  // Slight colour adjustments on the light background to match brand guidelines
+  .bg-light[class*="bg-"]:not(.bg-primary):not(.bg-dark):not(.bg-danger):not(.prevent-invert) {
+    --body-bg: var(--colour-light);
+    --colour-heading: var(--colour-dark);
+    color: var(--colour-dark);
+  }
+
+  // Override the colours when on a dark background, similiar to dark mode but on a module level
+  .bg-primary:not(.prevent-invert),
+  .bg-dark:not(.prevent-invert),
+  .bg-danger:not(.prevent-invert),
+  .bg-black:not(.prevent-invert),
+  .invert-colours {
+    
+    @if $compatible != "true" {
+      
+      @include invert-colours();
+    }
+    color: white;
+  }
+
+  // Only update the the colour of the underline on dark backgrounds except the primary as the secondary colour looks good on it
+  .bg-dark:not(.prevent-invert),
+  .bg-danger:not(.prevent-invert),
+  .bg-black:not(.prevent-invert),
+  .invert-colours {
+    
+    --colour-underline: white;
+  }
+}
+
+
+
+@include media-breakpoint-up(md) {
+
+  .invert-colours-md {
+    
+    @if $compatible != "true" {
+      
+      @include invert-colours();
+    }
+    color: white;
+    --colour-underline: white;
+  }
+
+  [class*="bg-"].bg-md-transparent {
+    background: transparent!important;
+  }
 }

package/assets/sass/{elements → foundations}/type.scss

@@ -1,137 +1,137 @@
-@use "../_func.scss" as *;
-
-/* Duplicated from bootstrap reboot so that the type file will compile */
-mark {
-  padding: $mark-padding;
-  background-color: $mark-bg;
-}
-
-small {
-  @include font-size($small-font-size);
-}
-
-
-@import "../../../node_modules/bootstrap/scss/_type.scss";
-
-// #region headings
-%heading {
-  clear: both;
-  @include var(font-weight,--heading-weight);
-  @include var(font-family, --font-heading);
-  @include var(color,--colour-heading);
-  color: var(--colour-heading,var(--colour-primary));
-  display: block;
-  text-indent: -0.04em;
-  letter-spacing: -0.01em;
-
-  margin-top: 0; // 1
-  margin-bottom: $headings-margin-bottom;
-  font-style: $headings-font-style;
-  line-height: $headings-line-height;
-}
-
-.h1 {
-  @include font-size($h1-font-size);
-}
-
-.h2 {
-  @include font-size($h2-font-size);
-}
-
-.h3 {
-  @include font-size($h3-font-size);
-}
-
-.h4 {
-  @include font-size($h4-font-size);
-}
-
-.h5 {
-  @include font-size($h5-font-size);
-}
-
-.h6 {
-  @include font-size($h6-font-size);
-}
-
-@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('.display-1,.display-2, .display-3, .display-4') {
-
-  font-size: var(--fs-display);
-}
-
-// #endregion
-
-p {
-  max-width: var(--content-max-width);
-}
-
-p + p {
-  margin-top: rem(-16);
-}
-
-.strapline {
-  @include var(font-size,--fs-strapline);
-  @include var(font-family, --font-heading);
-  @include var(color,--colour-secondary);
-  line-height: 1.2;
-  font-weight: 700;
-  margin-bottom: clamp(1rem,0.5em,0.5em);
-  //text-shadow: ;
-
-  h1 + &,
-  .h1 + & {
-    margin-top: -0.5rem;
-    margin-bottom: 2rem;
-  }
-}
-
-.lead {
-  @include var(font-size,--fs-strapline);
-  @include var(font-family, --font-heading);
-  font-weight: 700;
-  line-height: 1.2;
-  margin-bottom: 3rem;
-  @include var(color,--colour-heading);
-}
-
-blockquote {
-
-  quotes: "“" "”" "‘" "’";
-  margin-bottom: 1rem;
-
-  p {
-    @include var(font-size,--fs-4);
-    @include var(color,--colour-heading);
-    margin-top: 0;
-    margin-bottom: 1rem;
-  }
-
-  & p:first-child:before {
-    content: open-quote;
-  }
-  & p:last-of-type:after {
-    content: close-quote;
-  }
-
-  cite {
-    @include var(font-size,--fs-5);
-    @include var(color,--colour-heading);
-    font-style: normal;
-    font-weight: bold;
-  }
-}
-
-.stat {
-  font-size: rem(48);
-  @extend %heading;
-  text-decoration: underline;
-  text-underline-offset: 1rem;
-  text-decoration-color: var(--colour-secondary);
-  text-decoration-thickness: 0.4rem;
-  margin-bottom: 2rem;
+@use "../_func.scss" as *;
+
+/* Duplicated from bootstrap reboot so that the type file will compile */
+mark {
+  padding: $mark-padding;
+  background-color: $mark-bg;
+}
+
+small {
+  @include font-size($small-font-size);
+}
+
+
+@import "../../../node_modules/bootstrap/scss/_type.scss";
+
+// #region headings
+%heading {
+  clear: both;
+  @include var(font-weight,--heading-weight);
+  @include var(font-family, --font-heading);
+  @include var(color,--colour-heading);
+  color: var(--colour-heading,var(--colour-primary));
+  display: block;
+  text-indent: -0.04em;
+  letter-spacing: -0.01em;
+
+  margin-top: 0; // 1
+  margin-bottom: $headings-margin-bottom;
+  font-style: $headings-font-style;
+  line-height: $headings-line-height;
+}
+
+.h1 {
+  @include font-size($h1-font-size);
+}
+
+.h2 {
+  @include font-size($h2-font-size);
+}
+
+.h3 {
+  @include font-size($h3-font-size);
+}
+
+.h4 {
+  @include font-size($h4-font-size);
+}
+
+.h5 {
+  @include font-size($h5-font-size);
+}
+
+.h6 {
+  @include font-size($h6-font-size);
+}
+
+@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('.display-1,.display-2, .display-3, .display-4') {
+
+  font-size: var(--fs-display);
+}
+
+// #endregion
+
+p {
+  max-width: var(--content-max-width);
+}
+
+p + p {
+  margin-top: rem(-16);
+}
+
+.strapline {
+  @include var(font-size,--fs-strapline);
+  @include var(font-family, --font-heading);
+  @include var(color,--colour-secondary);
+  line-height: 1.2;
+  font-weight: 700;
+  margin-bottom: clamp(1rem,0.5em,0.5em);
+  //text-shadow: ;
+
+  h1 + &,
+  .h1 + & {
+    margin-top: -0.5rem;
+    margin-bottom: 2rem;
+  }
+}
+
+.lead {
+  @include var(font-size,--fs-strapline);
+  @include var(font-family, --font-heading);
+  font-weight: 700;
+  line-height: 1.2;
+  margin-bottom: 3rem;
+  @include var(color,--colour-heading);
+}
+
+blockquote {
+
+  quotes: "“" "”" "‘" "’";
+  margin-bottom: 1rem;
+
+  p {
+    @include var(font-size,--fs-4);
+    @include var(color,--colour-heading);
+    margin-top: 0;
+    margin-bottom: 1rem;
+  }
+
+  & p:first-child:before {
+    content: open-quote;
+  }
+  & p:last-of-type:after {
+    content: close-quote;
+  }
+
+  cite {
+    @include var(font-size,--fs-5);
+    @include var(color,--colour-heading);
+    font-style: normal;
+    font-weight: bold;
+  }
+}
+
+.stat {
+  font-size: rem(48);
+  @extend %heading;
+  text-decoration: underline;
+  text-underline-offset: 1rem;
+  text-decoration-color: var(--colour-secondary);
+  text-decoration-thickness: 0.4rem;
+  margin-bottom: 2rem;
 }

package/assets/sass/main.scss

@@ -1,7 +1,7 @@
-@charset "UTF-8";
-
-@use "_fonts";
-@use "_corefiles";
-@use "_forms";
-@use "_components";
-@use "_print";
+@charset "UTF-8";
+
+@use "_fonts";
+@use "_corefiles";
+@use "_forms";
+@use "_components";
+@use "_print";