@iamproperty/components 2.6.3 → 2.7.2

package/assets/sass/elements/tooltips.scss

@@ -1,5 +1,6 @@
-abbr[title],
-.tooltip {
+@use "../_func.scss" as *;
+
+:is(abbr[title], .tooltip) {
 
   text-decoration: underline;
   text-underline-offset: 0.2em;
@@ -9,9 +10,7 @@ abbr[title],
   position: relative;
   cursor: help;
 
-  &:hover,
-  &:focus,
-  &:active{
+  &:is(:hover, :focus, :active){
 
     text-decoration: none;
   }
@@ -20,13 +19,14 @@ abbr[title],
 @mixin tooltip(){
 
   display: block;
-  z-index: 2;
+  z-index: var(--index-above);
   position: absolute;
   top: calc(100% + 0.25rem);
   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);
@@ -34,6 +34,27 @@ abbr[title],
 
 .tooltip {
 
+
+  &:after{
+
+    content: "";
+    display: inline-block;
+    margin-left: 0.1em;
+    margin-bottom: 0.1em;
+    width: 0.8em;
+    height: 0.9em;
+    vertical-align: text-bottom;
+    background: currentColor;
+    mask-image: var(--icon-question);
+    mask-size: 100%;
+    mask-repeat: no-repeat;
+    mask-position: 50% 50%;
+    -webkit-mask-image: var(--icon-question);
+    -webkit-mask-size: 100%;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: 50% 50%;
+  }
+
   .tooltip__content {
 
     opacity: 0;
@@ -41,9 +62,7 @@ abbr[title],
     
   }
 
-  &:hover,
-  &:focus,
-  &:active{
+  &:is(:hover, :focus, :active){
 
     .tooltip__content {
 
@@ -55,17 +74,12 @@ abbr[title],
 
 @media (hover: none) {
   
-  abbr[title],
-  .tooltip[title] {
+  :is(abbr[title], .tooltip[title]) {
 
-    &:hover,
-    &:focus,
-    &:active{
+    &:is(:hover, :focus, :active):before{
       
-      &::after {
-        content: attr(title);
-        @include tooltip();
-      }
+      content: attr(title);
+      @include tooltip();
     }
   }
 }

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%;
 }
@@ -22,7 +26,7 @@ img {
 
   a:before,
   a:after {
-    display: none;
+    display: none!important;
   }
 
   img {
@@ -33,7 +37,7 @@ img {
     height: 100%;
     transform: translate(-50%,-50%);
     object-fit: cover;
-    z-index: 1;
+    z-index: var(--index-base);
   }
 
   .btn-secondary {
@@ -41,7 +45,7 @@ img {
     top: 50%;
     left: 50%;
     transform: translate(-50%,-50%);
-    z-index: 2;
+    z-index: var(--index-focus);
   }
 }
 // #endregion

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,105 @@
+@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);
+    --colour-admin: var(--colour-primary);
+    @include invert-colours();
+  }
+
+  body .text-primary {
+    color: white!important;
+  }
+
+  body .bg-white {
+    background-color: transparent!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):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) {
+    --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";