@iamproperty/components 2.6.1 → 2.7.0

package/assets/sass/_functions/variables.scss

@@ -1,6 +1,4 @@
-// Declare global vars variable
-$vars: ();
-$varsMD: ();
+@import "../../../node_modules/bootstrap/scss/_variables.scss";
 
 // #region Grid Breakpoints, layouts
 $grid-breakpoints: (
@@ -85,41 +83,51 @@ $theme-colors: map-merge((
 
 $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
 
-@each $color, $value in $theme-colors-rgb {
 
-  $vars: map-merge((
-    --colour-#{$color}-rgb: #{$value}
-  ), $vars);
-}
 @each $color, $value in $theme-colors-rgb {
 
   $vars: map-merge((
-    --colour-#{$color}: rgba(var(--colour-#{$color}-rgb),var(--alpha,1))
-  ), $vars);
-}
-
-@each $color, $value in $theme-colors-rgb {
-
-  $vars: map-merge((
-    --colour-#{$color}-theme: rgba(var(--colour-#{$color}-rgb),var(--alpha,1))
+    --colour-#{$color}: rgba($value,var(--alpha, 1))
   ), $vars);
 }
 
 //  RGB Theme colours
 @function show-css-var($identifier) {
-  @return rgba(var(--colour-#{$identifier}-rgb),var(--bs-bg-opacity,1));
+
+  @if $compatible == "true" {
+    @return #{map-get($theme-colors, #{$identifier})};
+  }
+
+  @return var(--colour-#{$identifier});
 }
 @function show-css-var-text($identifier) {
-  @return rgba(var(--colour-#{$identifier}-rgb),var(--bs-text-opacity,1));
+
+  @if $compatible == "true" {
+    @return #{map-get($theme-colors, #{$identifier})};
+  }
+
+  @return var(--colour-#{$identifier});
 }
+
+$utilities-colors: map-merge(
+  $utilities-colors,
+  (
+    "black": to-rgb($black),
+    "white": to-rgb($white),
+    "body": to-rgb($body-color)
+  )
+);
+
 $utilities-bg-colors: map-loop($utilities-colors, show-css-var, "$key");
-$utilities-text-colors: map-loop($utilities-colors, show-css-var-text, "$key");
+$utilities-text-colors: map-loop($utilities-text, show-css-var-text, "$key");
 
 
 
 // Colours that we want setting but not used for Bootstraps mixins, i.e. .text-primary, .bg-muted
 $non-theme-colors: ();
 $non-theme-colors: map-merge((
+  "black":      #000000,
+  "white":      #ffffff,
   "muted":      $colour-muted,
   "border":           $colour-border,
   "link":             $colour-link,
@@ -138,12 +146,12 @@ $non-theme-colors: map-merge((
 }
 
 $vars: map-merge((
-  "--colour-body-rgb": to-rgb($colour-body),
-  "--colour-white-rgb": to-rgb(#ffffff),
-  "--colour-black-rgb": to-rgb(#000000),
-  "--colour-body":  rgba(var(--colour-body-rgb),var(--alpha,1)),
-  "--colour-white": rgba(var(--colour-white-rgb),var(--alpha,1)),
-  "--colour-black": rgba(var(--colour-black-rgb),var(--alpha,1))
+  "--colour-body-theme":  rgba(to-rgb($colour-body),var(--alpha,1)),
+  "--colour-white-theme": rgba(to-rgb(#ffffff),var(--alpha,1)),
+  "--colour-black-theme": rgba(to-rgb(#000000),var(--alpha,1)),
+  "--colour-body":  rgba(to-rgb($colour-body),var(--alpha,1)),
+  "--colour-white": rgba(to-rgb(#ffffff),var(--alpha,1)),
+  "--colour-black": rgba(to-rgb(#000000),var(--alpha,1))
 ), $vars);
 
 $gradient: linear-gradient(180deg, var(--colour-secondary) 0, var(--colour-info) 100%);
@@ -190,14 +198,6 @@ $type-scale-5: #{rem(28)};
 $type-scale-6: #{rem(16)};
 $type-scale-7: #{rem(14)};
 
-
-$h1-font-size: var(--fs-1);
-$h2-font-size: var(--fs-2);
-$h3-font-size: var(--fs-3);
-$h4-font-size: var(--fs-4);
-$h5-font-size: var(--fs-5);
-$h6-font-size: var(--fs-6);
-
 $font-sizes: (
   'display': $type-scale-3,
   1: $type-scale-3,
@@ -218,6 +218,14 @@ $font-sizes: (
   ), $vars);
 }
 
+
+$h1-font-size: var(--fs-1);
+$h2-font-size: var(--fs-2);
+$h3-font-size: var(--fs-3);
+$h4-font-size: var(--fs-4);
+$h5-font-size: var(--fs-5);
+$h6-font-size: var(--fs-6);
+
 $headings-margin-bottom: clamp(1rem,0.5em,0.5em);
 $headings-font-style: normal;
 $headings-line-height: clamp(1em,2.5rem,clamp(1.5em,1rem,1.2em));
@@ -373,23 +381,23 @@ $vars: map-merge((
 
 // #region pagination
 // Default
-$pagination-color: var(--colour-primary);
+$pagination-color: var(--colour-heading);
 $pagination-disabled-color: var(--colour-muted);
 $pagination-bg: transparent;
 $pagination-border-width: 1px;
 $pagination-border-color: var(--colour-border);
 
 // Hover and focus
-$pagination-hover-color: var(--colour-primary);
+$pagination-hover-color: var(--colour-heading);
 $pagination-hover-bg: var(--colour-muted);
 $pagination-hover-border-color: var(--colour-border);
-$pagination-focus-color: var(--colour-primary);
+$pagination-focus-color: var(--colour-hover);
 $pagination-focus-bg: var(--colour-muted);
 
 // Active
-$pagination-active-color: white;
-$pagination-active-bg: var(--colour-primary);
-$pagination-active-border-color: var(--colour-primary);
+$pagination-active-color: var(--bs-body-bg);
+$pagination-active-bg: var(--colour-heading);
+$pagination-active-border-color: var(--colour-heading);
 
 // Disabled
 $pagination-disabled-bg: $pagination-bg;

package/assets/sass/_print.scss

@@ -1,3 +1,5 @@
+@use "_func" as *;
+
 $printMedia: print!default;
 @media #{$printMedia} {
   :root {

package/assets/sass/components/accordion.scss

@@ -1,3 +1,5 @@
+@use "../_func.scss" as *;
+
 // Accordion
 .accordion {
   --accordion-indent: 0.75rem;
@@ -18,7 +20,7 @@
 .accordion-button {
 
   padding: $accordion-button-padding-y var(--accordion-right-padding) $accordion-button-padding-y $accordion-button-padding-x;
-  color: $accordion-button-color;
+  color: var(--colour-heading);
   text-align: left; // Reset button style
   background-color: $accordion-button-bg;
   overflow-anchor: none;
@@ -92,7 +94,7 @@
   }
 
   [open] > summary > & {
-    color: $accordion-button-active-color;
+    color: var(--colour-heading);
     background-color: $accordion-button-active-bg;
     
     &::after {

package/assets/sass/components/alert.scss

@@ -1,3 +1,5 @@
+@use "../_func" as *;
+
 .alert {
 
   &__inner {

package/assets/sass/components/cardDeck.scss

@@ -1,3 +1,4 @@
+@use "../_func" as *;
 
 // #region Card Deck
 .card-deck.container:not([data-card-type="simple"]) {

package/assets/sass/components/carousel.scss

@@ -1,3 +1,5 @@
+@use "../_func" as *;
+
 // #region default carousel
 .carousel {
   padding-bottom: 3rem;
@@ -89,18 +91,6 @@ body.js-enabled .carousel__inner::-webkit-scrollbar {
   }
 }
 
-
-.carousel__controls {
-
-  @include invert-colours(){
-    
-    a:not(:hover):not(:focus):not(:active):not(.active){
-
-      opacity: 0.5;
-    }
-  }
-}
-
 .carousel .carousel__controls > a:nth-child(10) ~ a {
 
   display: none;
@@ -176,20 +166,10 @@ body.js-enabled .carousel__inner::-webkit-scrollbar {
 
   // Make sure that we dont just have one pip showing
   .carousel .carousel__controls.cols-sm-2 > a:first-child:nth-last-child(2),
-  .carousel .carousel__controls.cols-sm-3 > a:first-child:nth-last-child(2),
-  .carousel .carousel__controls.cols-sm-3 > a:first-child:nth-last-child(3),
-  .carousel .carousel__controls.cols-sm-4 > a:first-child:nth-last-child(2),
-  .carousel .carousel__controls.cols-sm-4 > a:first-child:nth-last-child(3),
-  .carousel .carousel__controls.cols-sm-4 > a:first-child:nth-last-child(4),
-  .carousel .carousel__controls.cols-sm-5 > a:first-child:nth-last-child(2),
-  .carousel .carousel__controls.cols-sm-5 > a:first-child:nth-last-child(3),
-  .carousel .carousel__controls.cols-sm-5 > a:first-child:nth-last-child(4),
-  .carousel .carousel__controls.cols-sm-5 > a:first-child:nth-last-child(5),
-  .carousel .carousel__controls.cols-sm-6 > a:first-child:nth-last-child(2),
-  .carousel .carousel__controls.cols-sm-6 > a:first-child:nth-last-child(3),
-  .carousel .carousel__controls.cols-sm-6 > a:first-child:nth-last-child(4),
-  .carousel .carousel__controls.cols-sm-6 > a:first-child:nth-last-child(5),
-  .carousel .carousel__controls.cols-sm-6 > a:first-child:nth-last-child(6) {
+  .carousel .carousel__controls.cols-sm-3 > :is(a:first-child:nth-last-child(2), a:first-child:nth-last-child(3)),
+  .carousel .carousel__controls.cols-sm-4 > :is(a:first-child:nth-last-child(2), a:first-child:nth-last-child(3), a:first-child:nth-last-child(4)),
+  .carousel .carousel__controls.cols-sm-5 > :is(a:first-child:nth-last-child(2),a:first-child:nth-last-child(3),a:first-child:nth-last-child(4),a:first-child:nth-last-child(5)),
+  .carousel .carousel__controls.cols-sm-6 > :is(a:first-child:nth-last-child(2),a:first-child:nth-last-child(3),a:first-child:nth-last-child(4),a:first-child:nth-last-child(5),a:first-child:nth-last-child(6)) {
     display: none;
   }
 
@@ -235,20 +215,10 @@ body.js-enabled .carousel__inner::-webkit-scrollbar {
 
   // Make sure that we dont just have one pip showing
   .carousel .carousel__controls.cols-md-2 > a:first-child:nth-last-child(2),
-  .carousel .carousel__controls.cols-md-3 > a:first-child:nth-last-child(2),
-  .carousel .carousel__controls.cols-md-3 > a:first-child:nth-last-child(3),
-  .carousel .carousel__controls.cols-md-4 > a:first-child:nth-last-child(2),
-  .carousel .carousel__controls.cols-md-4 > a:first-child:nth-last-child(3),
-  .carousel .carousel__controls.cols-md-4 > a:first-child:nth-last-child(4),
-  .carousel .carousel__controls.cols-md-5 > a:first-child:nth-last-child(2),
-  .carousel .carousel__controls.cols-md-5 > a:first-child:nth-last-child(3),
-  .carousel .carousel__controls.cols-md-5 > a:first-child:nth-last-child(4),
-  .carousel .carousel__controls.cols-md-5 > a:first-child:nth-last-child(5),
-  .carousel .carousel__controls.cols-md-6 > a:first-child:nth-last-child(2),
-  .carousel .carousel__controls.cols-md-6 > a:first-child:nth-last-child(3),
-  .carousel .carousel__controls.cols-md-6 > a:first-child:nth-last-child(4),
-  .carousel .carousel__controls.cols-md-6 > a:first-child:nth-last-child(5),
-  .carousel .carousel__controls.cols-md-6 > a:first-child:nth-last-child(6) {
+  .carousel .carousel__controls.cols-md-3 > :is(a:first-child:nth-last-child(2), a:first-child:nth-last-child(3)),
+  .carousel .carousel__controls.cols-md-4 > :is(a:first-child:nth-last-child(2), a:first-child:nth-last-child(3), a:first-child:nth-last-child(4)),
+  .carousel .carousel__controls.cols-md-5 > :is(a:first-child:nth-last-child(2),a:first-child:nth-last-child(3),a:first-child:nth-last-child(4),a:first-child:nth-last-child(5)),
+  .carousel .carousel__controls.cols-md-6 > :is(a:first-child:nth-last-child(2),a:first-child:nth-last-child(3),a:first-child:nth-last-child(4),a:first-child:nth-last-child(5),a:first-child:nth-last-child(6)) {
     display: none;
   }
 

package/assets/sass/components/charts.scss

@@ -1,3 +1,5 @@
+@use "../_func" as *;
+
 // #region Chart Colours
 $chart-colors: ();
 $chart-colors: map-merge((
@@ -13,12 +15,21 @@ $chart-colors: map-merge((
   10: --colour-warning,
 ), $chart-colors);
 
-html {
+:root {
   
   @each $index, $value in $chart-colors {
     --colour-chart-#{$index}: var(#{$value});
   }
 }
+
+@media screen and (prefers-color-scheme: dark) {
+  :root {
+    --colour-chart-1: var(--colour-dark);
+    --colour-chart-5: var(--colour-light);
+    --colour-chart-6: var(--colour-dark);
+    --colour-chart-7: var(--colour-secondary);
+  }
+}
 // #endregion
 
 // #region Apply colours
@@ -507,7 +518,7 @@ html {
   }
 
   .pie foreignObject {
-    background: white;
+    background: var(--bs-body-bg);
     border-radius: 50%;
     z-index: 100;
     pointer-events: none;

package/assets/sass/components/drawer.scss

@@ -1,3 +1,5 @@
+@use "../_func" as *;
+
 .drawer__btn {
 
   position: sticky;

package/assets/sass/components/header.scss

@@ -1,3 +1,5 @@
+@use "../_func" as *;
+
 .header-banner {
   background: linear-gradient(180deg,var(--colour-secondary) 0, var(--colour-info) 100%);
   margin-bottom: rem(32);
@@ -13,6 +15,10 @@
   }
 
   &__inner {
+    
+    @include reset-colours();
+
+    color: var(--colour-body);
     background: white;
     padding: rem(32);
     margin: rem(30) 0;

package/assets/sass/components/modal.scss

@@ -1,3 +1,6 @@
+@use "sass:math";
+@use "../_func" as *;
+
 .modal {
   display: none;
 }
@@ -44,14 +47,14 @@
       }
 
       &.modal__dock--left {
-        right: calc(50% + #{rem(820/2)} + 1rem);
+        right: calc(50% + #{rem(math.div(820,2))} + 1rem);
         
         &:after {
           transform: rotate(-180deg);
         }
       }
       &.modal__dock--right {
-        left: calc(50% + #{rem(820/2)} + 1rem);
+        left: calc(50% + #{rem(math.div(820,2))} + 1rem);
       }
     }
   }

package/assets/sass/components/nav.scss

@@ -1,6 +1,9 @@
+@use "../_func" as *;
+
 .nav {
 
-  background: white;
+  background: var(--bs-body-bg);
+
 
   &__inner {
 
@@ -113,7 +116,7 @@
   &__menu li a:not(.text-decoration-none):not(.btn),
   &__menu li .link:not(.text-decoration-none):not(.btn) {
     text-decoration: none;
-    @include var(color,--colour-primary,!important);
+    //@include var(color,--colour-primary,!important);
     display: inline-block;
     padding: rem(8) 0 rem(8) 0;
     margin-bottom: 0;
@@ -143,10 +146,6 @@
 
     background: rgba(0,0,0,.6);
     height: calc(100vh - 5rem);
-
-    > div:first-child {
-      
-    }
   }
 }
 

package/assets/sass/components/property-searchbar.scss

@@ -1,3 +1,5 @@
+@use "../_func" as *;
+
 // #region Property searchbar
 .property-searchbar {
 
@@ -99,6 +101,9 @@
 
 // #region Heror searchbar
 .property-searchbar--hero .property-searchbar {
+
+  @include reset-colours();
+
   padding: 1rem;
   background-color: #fff;
   width: 100%;

package/assets/sass/components/snapshot.scss

@@ -1,3 +1,5 @@
+@use "../_func" as *;
+
 .snapshot {
 
   > .row {

package/assets/sass/components/stepper.scss

@@ -1,9 +1,11 @@
+@use "../_func" as *;
+
 .stepper {
-  background: #f0f0f0;
+  background: var(--bs-body-bg);
   display: flex;
   flex-wrap: wrap;
   margin-bottom: 2rem;
-  border: 1px solid white;
+  border: 1px solid var(--bs-body-bg);
   overflow: hidden;
 
   @include media-breakpoint-up(md) {
@@ -15,7 +17,7 @@
   ol {
     margin: 0;
     z-index: 1;
-    background: white;
+    background: var(--bs-body-bg);
     counter-reset: section;
     width: 100%;
     overflow: auto;
@@ -38,7 +40,7 @@
     li {
       width: 100%;
       max-width: 100%;
-      background: white;
+      background: var(--bs-body-bg);
       padding: 1px;
 
       @include media-breakpoint-up(sm) {

package/assets/sass/components/tabs.scss

@@ -1,3 +1,5 @@
+@use "../_func" as *;
+
 .tabs__container {
 
   .tabs__links {

package/assets/sass/components/testimonial.scss

@@ -1,3 +1,5 @@
+@use "../_func" as *;
+
 .testimonial {
 
   --testimonial-padding: 1rem;

package/assets/sass/components/timeline.scss

@@ -1,3 +1,6 @@
+@use "sass:math";
+@use "../_func" as *;
+
 .timeline {
 
   --breakpoint:(100% - #{rem(992)});
@@ -57,12 +60,12 @@
   }
 
   > * {
-    max-width: rem((1320 / 2) - 96);
+    max-width: rem(math.div(1320,2) - 96);
     order: 1;
   }
 
   > img {
-    max-width: min(100%, #{rem((1320 / 2) - 96)});
+    max-width: min(100%, #{rem(math.div(1320,2) - 96)});
     margin-bottom: 2rem;
   }
 

package/assets/sass/core.scss

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

package/assets/sass/elements/buttons.scss

@@ -1,15 +1,6 @@
-.btn {
-  --btn-bg: var(--colour-warning);
-  --btn-outline: var(--colour-warning);
-  --btn-text: var(--colour-primary);
-
-  --btn-bg-hover: white;
-  --btn-outline-hover: var(--colour-warning);
-  --btn-text-hover: var(--colour-primary);
+@use "../_func.scss" as *;
 
-  --btn-bg-active: white;
-  --btn-outline-active: var(--colour-primary);
-  --btn-text-active: var(--colour-primary);
+.btn {
 
   display: inline-block;
   font-weight: 600;
@@ -19,7 +10,7 @@
   cursor: pointer;
   user-select: none;
   background: var(--btn-bg);
-  border: 2px solid var(--btn-outline);
+  border: 2px solid var(--btn-bg);
   color: var(--btn-text);
   font-family: var(--font-heading);
   font-size: 1rem;
@@ -38,26 +29,21 @@
     outline: 0;
     text-decoration: none;
     border-radius: rem(20);
-    
-    background: var(--btn-bg-hover);
-    border-color: var(--btn-outline-hover);
-    color: var(--btn-text-hover);
+    background: transparent;
+    border-color: var(--btn-bg)!important;
+    color: var(--btn-hover-text);
   }
 
   a:active &,
   a.active &,
   &:active,
-  &.active,
-  *:checked + &,
-  details[open] > &:is(summary):first-child {
-    --btn-colour: var(--btn-active-colour);
-    @include box-shadow($btn-active-box-shadow);
+  &.active {
+    
     border-radius: rem(20);
     transition: 0s;
-
-    background: var(--btn-bg-active);
-    border-color: var(--btn-outline-active);
-    color: var(--btn-text-active);
+    background: transparent;
+    border-color: var(--btn-text);
+    color: var(--btn-hover-text);
 
     &:focus {
       @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
@@ -73,83 +59,49 @@
   &.btn-secondary {
 
     --btn-bg: var(--colour-secondary);
-    --btn-outline: var(--colour-secondary);
-    --btn-outline-hover: var(--colour-secondary);
   }
 
   &.btn-tertiary,
   &.btn-tag:not(.btn-primary):not(.btn-secondary) {
 
-    --btn-bg: transparent;
-    --btn-bg-hover: var(--colour-primary);
-    --btn-bg-active: var(--colour-primary);
-    --btn-outline: var(--colour-primary);
-    --btn-outline-hover: var(--colour-primary);
-    --btn-text-hover:  #ffffff;
-    --btn-text-active: #ffffff;
-  }
-
-  [class*="bg-"]:not(.prevent-invert) & {
-
-    --btn-bg: var(--colour-primary);
-    --btn-bg-hover: transparent;
-    --btn-bg-active: transparent;
-    --btn-outline: var(--colour-primary);
-    --btn-outline-hover: var(--colour-primary);
-    --btn-text-hover:  var(--colour-primary);
-    --btn-text:  #ffffff;
+    background: var(--btn-tertiary-bg);
+    border-color: var(--btn-hover-text) !important;
+    color: var(--btn-tertiary-hover-text);
 
-    &.btn-tertiary,
-    &.btn-tag:not(.btn-primary):not(.btn-secondary) {
+    &:not(:hover):not(:focus) {
 
-      --btn-bg: transparent;
-      --btn-bg-hover: var(--colour-primary);
-      --btn-text:  var(--colour-primary);
-      --btn-text-hover:  #ffffff;
+      background: transparent;
+      color: var(--colour-link);
+      border-color: var(--btn-hover-text);
     }
   }
 
-  @include invert-colours {
-    
-    --btn-bg: #ffffff;
-    --btn-bg-hover: transparent;
-    --btn-outline: #ffffff;
-    --btn-outline-hover: #ffffff;
-    --btn-text-hover:  #ffffff;
-    --btn-text:  var(--colour-primary-theme);
-
-    &.btn-tertiary,
-    &.btn-tag:not(.btn-primary):not(.btn-secondary) {
-
-      --btn-bg: transparent;
-      --btn-bg-hover: #ffffff;
-      --btn-text:  #ffffff;
-      --btn-text-hover:  var(--colour-primary-theme);
-    }
+  &.btn-tag.btn-primary {
+    --btn-bg: var(--colour-warning);
   }
+}
 
-  [class*="bg-"].bg-light:not(.prevent-invert) & {
-    
-    --btn-bg: #ffffff;
-    --btn-bg-hover: transparent;
-    --btn-outline: #ffffff;
-    --btn-outline-hover: var(--colour-dark-theme);
-    --btn-text-hover: var(--colour-dark-theme);
-    --btn-text: var(--colour-dark-theme);
-
-    &.btn-tertiary,
-    &.btn-tag:not(.btn-primary):not(.btn-secondary) {
-
-      --btn-bg: transparent;
-      --btn-bg-hover: #ffffff;
-      --btn-text:  var(--colour-dark-theme);
-      --btn-outline:  var(--colour-dark-theme);
-      --btn-outline-hover: #ffffff;
-      --btn-text-hover:  var(--colour-dark-theme);
-    }
+input:checked + .btn:not(:hover):not(:focus),
+details[open] > summary.btn:first-child {
+  
+  transition: 0s;
+  background: var(--btn-tertiary-bg);
+  border-color: var(--btn-hover-text);
+  color: var(--btn-tertiary-hover-text);
+
+  &:focus {
+    @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
   }
 }
 
+input:checked + .btn-tertiary:not(:hover):not(:focus):not(:active),
+input:checked + .btn-tag:not(.btn-primary):not(.btn-secondary):not(:hover):not(:focus):not(:active) {
+  background: var(--btn-tertiary-bg);
+  border-color: var(--btn-hover-text);
+  color: var(--btn-tertiary-hover-text);
+}
+
+
 // #region button small and tag
 .btn-sm {
 
@@ -253,5 +205,6 @@
     width: 100%;
   }
 }
+// #endregion
 
-// #endregion
+@import "../../../node_modules/bootstrap/scss/_button-group.scss";