@iamproperty/components 2.6.3 → 2.7.0

package/assets/sass/{components → elements}/card.scss

@@ -1,3 +1,7 @@
+@use "../_func.scss" as *;
+
+@import "../../../node_modules/bootstrap/scss/_card.scss";
+
 // #region Defaul Card
 // Reset the link
 a.card {
@@ -9,7 +13,12 @@ a.card {
   }
 }
 
+.card:not(.card--simple) {
+
+  @include reset-colours();
+}
 .card {
+
   --spread: #{rem(12)};
   box-shadow: 0 2px var(--spread) 0 rgba(154,154,154,0.25);
   min-height: 100%;

package/assets/sass/elements/container.scss

@@ -1,3 +1,8 @@
+@use "sass:math";
+@use "../_func.scss" as *;
+
+@import "../../../node_modules/bootstrap/scss/_grid.scss";
+
 // #region container
 .container {
 
@@ -48,11 +53,6 @@
   position: relative;
   z-index: 1;
 
-
-  &[class*="circle-pattern"] {
-    //overflow: hidden;
-  }
-
   > .circle {
 
     position: absolute;
@@ -130,6 +130,7 @@
 
 
 // #region Curve
+$default-curve-width: 576!default;
 @mixin curve($start: 10, $point-1: 20, $point-2: 95, $end: 70, $padding-top:16)
 {
   // Constant rules
@@ -137,8 +138,8 @@
   
   // Let vars
   $height: 100;
-  $width: 576;
-  $middle-x: $width/2;
+  $width: $default-curve-width;
+  $middle-x: math.div($width,2);
   $edge: 2;
   $modify: 1;
 
@@ -146,21 +147,23 @@
   width: #{$width}px;
   padding-top: calc(#{($height*$modify)}px + #{$padding-top}px)!important;
   margin-top: -#{($height*$modify)}px;
-  margin-left: calc(-#{($width/2)}px + 50vw);
+  margin-left: calc(-#{math.div($width,2)}px + 50vw);
   clip-path: path('#{'M0,'+($start*$modify)+' L'+($edge)+','+($start*$modify)+' C'+$middle-x+','+($point-1*$modify)+' '+$middle-x+','+($point-2*$modify)+' '+($width - $edge)+','+($end*$modify)+' L'+($width + $edge)+','+($end * $modify)+' L'+$width+',5000 L0,5000 Z'}');
 
+  padding-inline: calc((#{math.div($width,2)}px - 50vw) + var(--container-padding-x));
+
   @include media-breakpoint-up(sm) {
 
     // Tablet vars
     $width: 992;
-    $middle-x: $width/2;
+    $middle-x: math.div($width,2);
     $modify: 1.5;
 
     // Tablet CSS rules
     width: #{$width}px;
     padding-top: calc(#{($height*$modify)}px + #{$padding-top}px)!important;
     margin-top: -#{($height*$modify)}px;
-    margin-left: calc(-#{($width/2)}px + 50vw);
+    margin-left: calc(-#{math.div($width,2)}px + 50vw);
     clip-path: path('#{'M0,'+($start*$modify)+' L'+($edge)+','+($start*$modify)+' C'+$middle-x+','+($point-1*$modify)+' '+$middle-x+','+($point-2*$modify)+' '+($width - $edge)+','+($end*$modify)+' L'+($width + $edge)+','+($end*$modify)+' L'+$width+',5000 L0,5000 Z'}');
   }
 
@@ -168,7 +171,7 @@
 
     // Desktop vars
     $width: 1440;
-    $middle-x: $width/2;
+    $middle-x: math.div($width,2);
     $modify: 2;
 
     // Desktop CSS rules
@@ -176,7 +179,7 @@
     max-width: #{$width}px!important;
     padding-top: calc(#{($height*$modify)}px + #{$padding-top}px)!important;
     margin-top: -#{($height*$modify)}px;
-    margin-left: calc(-#{($width/2)}px + 50vw);
+    margin-left: calc(-#{math.div($width,2)}px + 50vw);
     clip-path: path('#{'M0,'+($start*$modify)+' L'+($edge)+','+($start*$modify)+' C'+$middle-x+','+($point-1*$modify)+' '+$middle-x+','+($point-2*$modify)+' '+($width - $edge)+','+($end*$modify)+' L'+($width + $edge)+','+($end*$modify)+' L'+$width+',5000 L0,5000 Z'}');
   }
 }
@@ -193,7 +196,6 @@
   }
 }
 
-
 .container--curve {
 
   @include curve();
@@ -215,8 +217,9 @@
 
   position: relative;
 
-  @media (min-width: #{em(1440)}) {
+  @media (min-width: #{em($device-md-width)}) {
     margin-left: auto;
+    padding-inline: var(--container-padding-x);
   }
 }
 // #endregion

package/assets/sass/elements/links.scss

@@ -1,3 +1,5 @@
+@use "../_func.scss" as *;
+
 a,
 .link {
   @include var (color, --colour-link);

package/assets/sass/elements/lists.scss

@@ -1,5 +1,6 @@
-ol li,
-ul li{
+@use "../_func.scss" as *;
+
+@include is('ol, ul','','li'){
   max-width: $content-max-width;
 }
 

package/assets/sass/elements/tables.scss

@@ -1,3 +1,5 @@
+@use "../_func.scss" as *;
+
 // #region Default table
 table {
   --border-width: 2px;
@@ -17,6 +19,7 @@ td,th {
   border: none;
   font-size: rem(16);
   line-height: rem(24);
+  color: var(--colour-body);
 
   &:first-child {
     padding-left: rem(8);

package/assets/sass/elements/tooltips.scss

@@ -1,3 +1,5 @@
+@use "../_func.scss" as *;
+
 abbr[title],
 .tooltip {
 
@@ -26,7 +28,8 @@ abbr[title],
   left: 50%;
   min-width: max(120%, #{rem(100)});
   transform: translate(-50%,0);
-  background: #eee;
+  background: var(--bs-body-bg);
+  color: inherit;
   padding: 0.5em;
   border-radius: 3px;
   box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.3);

package/assets/sass/elements/type.scss

@@ -1,3 +1,18 @@
+@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;
@@ -6,38 +21,46 @@
   @include var(color,--colour-heading);
   color: var(--colour-heading,var(--colour-primary));
   display: block;
-  //margin-bottom: clamp(1rem,0.5em,0.5em);
-  //line-height: clamp(2.5rem,1em,1.2em);
   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);
 }
 
-h1,
-.h1,
-h2,
 .h2 {
-  @extend %heading;
+  @include font-size($h2-font-size);
 }
-h3,
+
 .h3 {
-  @extend %heading;
+  @include font-size($h3-font-size);
+}
+
+.h4 {
+  @include font-size($h4-font-size);
+}
+
+.h5 {
+  @include font-size($h5-font-size);
 }
-h4,
-.h4,
-h5,
-.h5,
-h6,
-.h6  {
+
+.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;
 }
 
-.display-1,
-.display-2,
-.display-3,
-.display-4 {
+@include is('.display-1,.display-2, .display-3, .display-4') {
 
-  @extend %heading;
   font-size: var(--fs-display);
 }
 
@@ -73,7 +96,7 @@ p + p {
   font-weight: 700;
   line-height: 1.2;
   margin-bottom: 3rem;
-  @include var(color,--colour-primary);
+  @include var(color,--colour-heading);
 }
 
 blockquote {
@@ -108,7 +131,7 @@ blockquote {
   @extend %heading;
   text-decoration: underline;
   text-underline-offset: 1rem;
-  text-decoration-color: var(--colour-secondary-theme);
+  text-decoration-color: var(--colour-secondary);
   text-decoration-thickness: 0.4rem;
   margin-bottom: 2rem;
 }

package/assets/sass/email.scss

@@ -0,0 +1,66 @@
+@charset "UTF-8";
+
+// Set mobile only variable so that the media query mixin doesn't print out non mobile rules
+
+@use "_func" as *;
+
+$mobileOnly: "true";
+$compatible: "true";
+
+// Update the breakpoints to just one to remove some utility classes
+$grid-breakpoints: (
+  xs: 0
+);
+
+// Simplify the grid
+$grid-columns: 4;
+
+$device-xs-width: 600;
+$device-md-width: 600;
+$container-padding-x: 32;
+$default-curve-width: 600;
+
+@import "_corefiles";
+
+:root {
+
+  --container-padding-x: #{rem(66)};
+}
+
+html {
+
+  @media (min-width: #{em(600)}) {
+    font-size: 100%;
+  }
+}
+
+.content-wrapper > * {
+  max-width: 600px;
+  margin-inline: auto;
+}
+
+.container:not(.container-fluid) {
+  max-width: 600px;
+  padding-left: #{rem(48)};
+  padding-right: #{rem(48)};
+}
+
+.table--email,
+.table--email tr,
+.table--email td {
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+.table--email td + td {
+  padding-left: 1rem;
+}
+
+/* card */
+.card {
+  min-height: auto;
+}
+/* utilities */
+.text-white {
+  color: white;;
+}

package/assets/sass/error.scss

@@ -0,0 +1,5 @@
+@charset "UTF-8";
+
+// Set mobile only variable so that the media query mixin doesn't print out non mobile rules
+@use "_func" as *;
+@import "_corefiles";

package/assets/sass/foundations/brand.scss

@@ -1,3 +1,5 @@
+@use "../_func" as *;
+
 .brand {
 
   --svg-width: #{em(380,130)};
@@ -28,17 +30,13 @@
   min-width: 100%;
   min-width: Min(100%, var(--svg-width));
   font-size: rem(64);
-  @include var(color,--colour-primary);
+  @include var(color,--colour-brand);
 
   /* Restrict the logo colours so that only text-secondary can be defined */
   &[class*="text-"]:not(.text-secondary){
     color: inherit!important;
   }
 
-  &[class*="text-"].text-secondary{
-    color: var(--colour-secondary-theme)!important;
-  }
-
   svg {
     fill: currentColor;
     height: 1em;
@@ -57,10 +55,10 @@
   }
 }
 
-a.brand,
-a .brand {
+a.brand:not(:hover):not(:focus):not(:active),
+a:not(:hover):not(:focus):not(:active) .brand {
 
-  @include var(color,--colour-primary);
+  @include var(color,--colour-brand);
 }
 
 a.brand:hover,

package/assets/sass/foundations/circles.scss

@@ -1,3 +1,5 @@
+@use "../_func" as *;
+
 .circle {
   position: relative;
   border-radius: 50%;

package/assets/sass/foundations/icons.scss

@@ -1,7 +1,9 @@
+@use "../_func" as *;
+
 .icon {
   fill: currentColor;
   stroke: transparent;
-  @include var(color,--colour-primary-theme);
+  @include var(color,--colour-brand);
   width: rem(64);
   height: rem(64);
   display: inline-block;
@@ -40,7 +42,6 @@
   font-size: rem(64 - 16);
   height: rem(64);
   padding: 0.5rem;
-  @include var(color,--colour-primary-theme);
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   display: inline-block;

package/assets/sass/foundations/media.scss

@@ -1,3 +1,7 @@
+@use "../_func" as *;
+
+@import "../../../node_modules/bootstrap/scss/_images.scss";
+
 img {
   max-width: 100%;
 }

package/assets/sass/foundations/reboot.scss

@@ -1,3 +1,7 @@
+@use "../_func" as *;
+
+@import "../../../node_modules/bootstrap/scss/_reboot.scss";
+
 /* Reset & Defaults - Most of the resets/normailization stuff is done by Bootstrap */
 html {
 
@@ -15,14 +19,16 @@ html {
   @include media-breakpoint-up(md) {
     font-size: vw($device-md-width);
   }
-  @media (min-width: #{em(1440)}) {
-      font-size: 100%;
-  }
 
-  @media print {
-    font-size: 16px;
+  @if $mobileOnly != "true" {
+    @media (min-width: #{em(1440)}) {
+        font-size: 100%;
+    }
+
+    @media print {
+      font-size: 16px;
+    }
   }
-  
   /*
   @media (min-width: #{em(1440)}) {
     font-size: vw(1440);

package/assets/sass/foundations/root.scss

@@ -1,47 +1,96 @@
+@use "../func" as *;
+
 :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
+  --bs-body-bg: white;
   --colour-underline: var(--colour-secondary);
   --colour-heading: var(--colour-primary);
-  --alpha: var(--bs-bg-opacity);
+  --alpha: var(--bs-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 {
+    --bs-body-bg: var(--colour-primary);
+    @include invert-colours();
+  }
+
+  body .text-primary {
+    color: white!important;
+  }
 }
 
 @media screen {
-  /* Override the colours when on a drark background */
+
+  // 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) {
+
+    @include reset-colours();
+
+    --colour-body: var(--colour-primary);
+    --colour-heading: var(--colour-primary);
+    color: var(--colour-body);
+
+    --btn-bg: var(--colour-primary);
+    --btn-text: white;
+
+    .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) {
+    --bs-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 {
-    > * {
-
-      --colour-secondary-rgb: 255,255,255;
-      --colour-primary-rgb: 255,255,255;
-      --colour-secondary: white;
-      --colour-primary: white;
+    
+    @if $compatible != "true" {
+      
+      @include invert-colours();
     }
-    --colour-body: white;
-    --colour-link: white;
-    --colour-hover: white;
-    --colour-active: white;
-    --colour-heading: white;
-    --colour-underline: white;
-    --colour-border: white;
     color: white;
   }
 
-  .bg-light:not(.prevent-invert) {
-    --colour-heading: var(--colour-dark);
-    color: var(--colour-dark);
+  // 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;
   }
 }

package/assets/sass/main.scss

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