@iamproperty/components 2.9.0 → 3.1.0

package/assets/sass/components/carousel.scss

@@ -11,11 +11,11 @@
 
   .carousel__inner {
 
-    --bs-gutter-x: #{$grid-gutter-width};
+    --gutter-x: #{$grid-gutter-width};
     overflow: auto;
     scroll-snap-type: x mandatory;
-    margin-right: calc(var(--bs-gutter-x) * -.5);
-    margin-left: calc(var(--bs-gutter-x) * -.5);   
+    margin-right: calc(var(--gutter-x) * -.5);
+    margin-left: calc(var(--gutter-x) * -.5);   
 
     > .row {
       flex-wrap: nowrap;
@@ -25,7 +25,7 @@
         padding-top: rem(36);
         padding-bottom: rem(24);
         scroll-snap-align: start;
-        scroll-padding: calc(var(--bs-gutter-x) * -1);
+        scroll-padding: calc(var(--gutter-x) * -1);
       }
     }
   }
@@ -53,7 +53,7 @@ body.js-enabled .carousel__inner::-webkit-scrollbar {
 
 // #region carousel controls/pips
 .carousel:not(.hide-controls) {
-  padding-bottom: 4.5rem;
+  padding-bottom: 4.5rem!important;
 }
 
 .carousel.hide-controls .carousel__controls {

package/assets/sass/components/charts.scss

@@ -514,7 +514,7 @@ $chart-colors: map-merge((
   }
 
   .pie foreignObject {
-    background: var(--bs-body-bg);
+    background: var(--body-bg);
     border-radius: 50%;
     z-index: var(--index-focus);
     pointer-events: none;

package/assets/sass/components/nav.scss

@@ -5,6 +5,7 @@
   
   background: var(--colour-primary);
   color: white;
+
   @if $compatible != "true" {
     
     @include invert-colours();
@@ -160,7 +161,7 @@
     font-size: rem(18);
     text-indent: 0;
     overflow: visible;
-    color: var(--colour-primary);
+    color: var(--colour-body);
     height: rem(48);
     line-height: rem(48);
     display: block;
@@ -399,7 +400,7 @@ nav + main > *:first-child {
   position: absolute;
   top: 0;
   left: 100%;
-  background: white;
+  background: var(--body-bg);
   z-index: 2;
   width: 100%;
   overscroll-behavior: contain;
@@ -690,6 +691,8 @@ nav + main > *:first-child {
           
           @include reset-colours();
 
+          --colour-admin: var(--colour-admin-theme);
+
           li {
             
             padding-inline: rem(24);
@@ -913,4 +916,46 @@ nav + main > *:first-child {
     }
   }
 }
+// #endregion
+
+// #region
+
+.nav--just-account {
+
+  .nav__menu,
+  .nav__account-btn {
+    display: none!important;
+  }
+
+  @include media-breakpoint-up(md) {
+    
+    .nav__menu,
+    .nav__account-btn {
+      display: block!important;
+    }
+  }
+
+  #showMenu:checked ~ .nav__menu--account {
+    height: 100vh;
+    overflow: visible;
+    overflow-x: auto;
+    left: 0;
+    pointer-events: none;
+    background: transparent;
+
+    @include media-breakpoint-up(sm) {
+    
+      width: rem(375);
+      left: calc(100% - #{rem(375)});
+    }
+
+    > .container:first-child {
+      opacity: 0;
+    }
+    > .container:not(:first-child) {
+      pointer-events: all;
+    }
+  }
+}
+
 // #endregion

package/assets/sass/components/stepper.scss

@@ -5,7 +5,7 @@
   display: flex;
   flex-wrap: wrap;
   margin-bottom: 2rem;
-  border: 1px solid var(--bs-body-bg);
+  border: 1px solid var(--body-bg);
   overflow: hidden;
 
   @include media-breakpoint-up(md) {
@@ -17,7 +17,7 @@
   ol {
     margin: 0;
     z-index: 1;
-    background: var(--bs-body-bg);
+    background: var(--body-bg);
     counter-reset: section;
     width: 100%;
     overflow: auto;
@@ -40,7 +40,7 @@
     li {
       width: 100%;
       max-width: 100%;
-      background: var(--bs-body-bg);
+      background: var(--body-bg);
       padding: 1px;
 
       @include media-breakpoint-up(sm) {

package/assets/sass/elements/buttons.scss

@@ -19,7 +19,7 @@
   border-radius: rem(20);
   margin-bottom: rem(24);
   margin-right: rem(16);
-  transition: background-color .5s, color .5s;
+  transition: all .5s, color .5s;
   height: auto;
 
   a:hover &,
@@ -79,6 +79,11 @@
   &.btn-tag.btn-primary {
     --btn-bg: var(--colour-warning);
   }
+
+  &.btn-admin:not(:hover):not(:focus) {
+    background: var(--colour-admin);
+    border-color: var(--colour-admin)!important;
+  }
 }
 
 input:checked + .btn:not(:hover):not(:focus),
@@ -96,9 +101,9 @@ details[open] > summary.btn:first-child {
 
 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);
+  background: var(--colour-selected);
+  border-color: var(--colour-selected)!important;
+  color: var(--colour-primary);
 }
 
 
@@ -205,6 +210,43 @@ input:checked + .btn-tag:not(.btn-primary):not(.btn-secondary):not(:hover):not(:
     width: 100%;
   }
 }
+
+.btn-group--admin {
+
+  position: relative;
+
+  &:before {
+    content: "";
+    width: calc(100% - 2px);
+    height: rem(48);
+    background-color: var(--colour-admin)!important;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 0;
+    border-radius: 0.5rem!important;
+  }
+
+  > .btn:not(:hover):not(:focus) {
+    border-radius: 0.5rem!important;
+    background: var(--colour-admin);
+
+    border-color: var(--colour-admin)!important;
+  }
+
+  > .btn:is(:hover, :focus) {
+    border-radius: 0.5rem!important;
+    background: var(--colour-selected);
+
+    border-color: var(--colour-admin)!important;
+    color: var(--colour-primary);
+  }
+
+  > input:checked + .btn-tertiary:not(:hover):not(:focus):not(:active) {
+    border-color: var(--colour-admin)!important;
+
+  }
+}
 // #endregion
 
 @import "../../../node_modules/bootstrap/scss/_button-group.scss";

package/assets/sass/elements/card.scss

@@ -84,6 +84,26 @@ a.card {
   }
 }
 
+.card-banner {
+  padding: 0.5rem;
+
+  &__tag {
+
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: var(--colour-secondary);
+    font-size: rem(14);
+    font-weight: bold;
+    aspect-ratio: 1;
+    padding: 0.75rem;
+    border-radius: 50%;
+    transform: translate(-0.25rem,-1.25rem) rotate(-25deg);
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15)!important;
+
+  }
+}
+
 .card-body {
 
   color: var(--colour-body);
@@ -175,3 +195,95 @@ a.card {
   }
 }
 // #endregion
+
+// #region Small cards 
+.card--small {
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding-inline: 0.5rem;
+
+  .card-header__wrapper,
+  .card-body > *:not(.card-title) {
+    display: none;
+  }
+
+  .card-body,
+  .card-footer {
+    padding: 0.5rem;
+  }
+
+  .card-title {
+    margin: 0;
+  }
+
+  .btn {
+    margin-right: 0;
+    white-space: nowrap;
+
+    &:not(.btn--link) {
+      padding: 0.5em 1em
+    }
+  }
+
+  &:not([target="_blank"]) .btn-primary:not(.btn--link):after {
+      
+    content: "";
+    height: 1em;    
+    width: 1em;
+    margin-left: 0.5em;
+    margin-right: -0.5em;
+    display: inline-block;
+    vertical-align: baseline;
+    margin-bottom: -0.15em;
+
+    mask-image: var(--icon-arrow);
+    mask-size: 100% 100%;
+    mask-repeat: no-repeat;
+    mask-position: 0 0;
+  
+    -webkit-mask-image: var(--icon-arrow);
+    -webkit-mask-size: 100% 100%;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: 0 0;
+    background-color: currentColor;
+  }
+
+    
+  @include media-breakpoint-up(md) {
+
+    flex-wrap: wrap;
+    .card-footer {
+      min-width: 100%;
+      text-align: right;
+    }
+  }
+}
+
+.card--danger,
+.card--warning,
+.card--success {
+  position: relative;
+  padding-left: 1.5rem;
+
+  &:after {
+
+    content: "";
+    height: 100%;
+    width: 1rem;
+    background: var(--colour-danger);
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+}
+
+.card--warning:after {
+  background: var(--colour-warning);
+}
+.card--success:after {
+  background: var(--colour-success);
+}
+// #endregion

package/assets/sass/elements/container.scss

@@ -15,12 +15,11 @@
     max-width: rem(1440);
   }
   
-  .container {
+  .container:not(.container-xs-breakout) {
     padding-left: 0;
     padding-right: 0;
     padding-bottom: 0;
     padding-top: 0;
-    content-visiblity: unset!important; /* We only want to delay the painting of top level containers */
   }
 
   &[class*="bg-"] {
@@ -45,6 +44,18 @@
     clear: both;
     content: "";
   }
+
+  &.container-xs-breakout {
+    margin-left: -1.25rem;
+    margin-right: -1.25rem;
+    width: calc(100% + 2.5rem);
+
+    @include media-breakpoint-up(sm) {
+      margin-left: auto;
+      margin-right: auto;
+      width: 100%;
+    }
+  }
 }
 // #endregion
 

package/assets/sass/elements/forms.scss

@@ -192,3 +192,71 @@ select[multiple]::-webkit-scrollbar-thumb {
 }
 
 // #endregion
+
+
+// #region large upload field
+
+.form-control__wrapper.form-control--lrg-file {
+  aspect-ratio: 4/2;
+  border: 1px dashed var(--colour-selected);
+  position: relative;
+
+  .icon {
+    position: absolute;
+    top: 50%;
+    left:50%;
+    transform: translate(-50%,calc(-50% - 1rem));
+    color: var(--colour-muted);
+    font-size: 5rem;
+    height: 1em;
+    width: 1em;
+    pointer-events: none;
+  }
+
+  > label {
+    
+    position: absolute;
+    top: calc(50% + 2rem);
+    left:50%;
+    transform: translate(-50%,-50%);
+    width: 100%;
+    text-align: center;
+  }
+
+  > input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    opacity: 0;
+  }
+
+  .file-uploaded & {
+    border: 3px solid var(--colour-success);
+    border-radius: 50%;
+    aspect-ratio: 1;
+    margin-inline: auto;
+    max-width: 10rem;
+
+    > label {
+      content: "File uploaded";
+    }
+  }
+}
+
+.file-upload__add {
+  display: none;
+
+  .file-uploaded & {
+    display: block;
+    margin-inline: auto;
+    color: var(--colour-muted);
+    font-size: rem(14);
+    text-align: center;
+    margin-top: -1rem;
+    margin-bottom: 1rem;
+    cursor: pointer;
+  }
+}
+// #endrgion

package/assets/sass/elements/links.scss

@@ -43,7 +43,8 @@ a,
     @include var (color, --colour-active);
   }
 
-  &[target="_blank"]:after {
+  &[target="_blank"]:not(.card):after,
+  &.card[target="_blank"] .btn:after {
     
     content: "";
     height: 1em;    

package/assets/sass/elements/lists.scss

@@ -50,7 +50,7 @@
 
     &.tick--incomplete:before {
 
-      background: currentColor;
+      background: var(--colour-admin);
       mask-image: none;
       -webkit-mask-image: none;
       border-radius: 50%;
@@ -110,4 +110,51 @@
       text-transform: uppercase;
     }
   }
+}
+
+.orderable-list {
+
+  margin-left: 3.5rem;
+  counter-reset: countItem; 
+  padding-left: 0;
+
+  li {
+    position: relative;
+    list-style: none;
+    --spread: 0.75rem;
+    box-shadow: 0 2px var(--spread) 0 rgba(154, 154, 154, 0.25);
+    padding: 1rem;
+    margin-bottom: 1rem;
+    border-radius: 0.5rem;
+    cursor: grab;
+  }
+
+  li:before {
+    content: "";
+    --gradient-direction: 180deg;
+    background-color: var(--colour-info);
+    background-image: linear-gradient(var(--gradient-direction), var(--colour-secondary) 0, transparent 100%) !important;
+    height: 100%;
+    width: 2.5rem;
+    display: inline-block;
+    position: absolute;
+    top: 0;
+    right: calc(100% + 1rem);
+    border-radius: 0.5rem;
+  }
+
+  li:after {
+    counter-increment: countItem; /* Increment the value of section counter by 1 */
+    content: counter(countItem);
+    height: 2rem;
+    width: 2.5rem;
+    line-height: 2rem;
+    font-size: rem(20);
+    font-weight: bold;
+    display: inline-block;
+    position: absolute;
+    top: calc(50% - 1rem);
+    right: calc(100% + 1rem);
+    text-align: center;
+  }
 }

package/assets/sass/elements/panel.scss

@@ -3,7 +3,7 @@
 .admin-panel {
   --panel-gutter: 1rem;
   --panel-tab-colour: #fafafa;
-  background: var(--bs-body-bg);
+  background: var(--body-bg);
 
   &.bg-secondary{
 
@@ -113,7 +113,7 @@
   margin-right: calc(var(--panel-gutter) * -1);
   display: flex;
   flex-direction: column;
-  background-color: var(--bs-body-bg);
+  background-color: var(--body-bg);
   border-bottom: 2px solid var(--colour-border-light);
   margin-bottom: var(--panel-gutter);
 
@@ -155,7 +155,7 @@
   .current {
     
     --is-current: 1;
-    --panel-tab-colour: var(--bs-body-bg);;
+    --panel-tab-colour: var(--body-bg);;
     --panel-tab-border: var(--colour-secondary);
     pointer-events: none;
   }

package/assets/sass/elements/tables.scss

@@ -99,7 +99,7 @@ table.border-0 {
 
 // #region Tables are only stacked on mobile
 @media screen and (max-width: 36em) {
-  .table__wrapper:not(.table-fullwidth) {
+  .table__wrapper:not(.table-fullwidth):not(.client-table) {
 
     overflow: hidden;
 

package/assets/sass/elements/tooltips.scss

@@ -25,7 +25,7 @@
   left: 50%;
   min-width: max(120%, #{rem(100)});
   transform: translate(-50%,0);
-  background: var(--bs-body-bg);
+  background: var(--body-bg);
   color: inherit;
   padding: 0.5em;
   border-radius: 3px;

package/assets/sass/foundations/icons.scss

@@ -26,6 +26,14 @@
   & + .icon {
     margin-inline-start: 1rem;
   }
+
+  &[class*="fs-"] {
+    width: 1.5em;
+    height: 1.5em;
+    vertical-align: text-top;
+    margin-top: -0.15em;
+    margin-inline: 0.25em;
+  }
 }
 
 @include inline-text(){

package/assets/sass/foundations/root.scss

@@ -18,10 +18,10 @@
   }
 
   // Extra vars needed
-  --bs-body-bg: white;
+  --body-bg: white;
   --colour-underline: var(--colour-primary);
   --colour-heading: var(--colour-primary);
-  --alpha: var(--bs-bg-opacity,1);
+  --alpha: var(--bg-opacity,1);
   --#{$variable-prefix}gradient: #{$gradient};
   --content-max-width: #{$content-max-width};
   --colour-brand: var(--colour-primary);
@@ -37,7 +37,7 @@
 // Dark mode; functional colours get updated
 @media screen and (prefers-color-scheme: dark) {
   :root {
-    --bs-body-bg: var(--colour-primary);
+    --body-bg: var(--colour-primary);
     --colour-admin: var(--colour-primary);
     @include invert-colours();
   }
@@ -77,7 +77,7 @@
 
   // 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);
+    --body-bg: var(--colour-light);
     --colour-heading: var(--colour-dark);
     color: var(--colour-dark);
   }
@@ -104,4 +104,23 @@
     
     --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/ts/main.js

@@ -0,0 +1,57 @@
+// Modules
+import * as helpers from '../js/modules/helpers';
+import nav from '../js/modules/nav';
+import table from '../js/modules/table';
+import accordion from './modules/accordion';
+import testimonial from '../js/modules/testimonial';
+import carousel from '../js/modules/carousel';
+import form from '../js/modules/form';
+import youtubeVideo from '../js/modules/youtubevideo';
+import modal from '../js/modules/modal';
+// Attach classes to dom elements
+document.addEventListener("DOMContentLoaded", function () {
+    helpers.addBodyClasses(document.body);
+    helpers.addGlobalEvents(document.body);
+    helpers.checkElements(document.body);
+    console.log('test.js');
+    // ANav
+    Array.from(document.querySelectorAll('.nav')).forEach((arrayElement, index) => {
+        nav(arrayElement);
+    });
+    // Advanced tables
+    Array.from(document.querySelectorAll('.table__wrapper')).forEach((arrayElement, index) => {
+        table(arrayElement);
+    });
+    // Accordions
+    Array.from(document.querySelectorAll('.accordion')).forEach((arrayElement, index) => {
+        accordion(arrayElement);
+    });
+    // Testimonial
+    Array.from(document.querySelectorAll('.testimonial')).forEach((arrayElement, index) => {
+        testimonial(arrayElement);
+    });
+    // Carousel
+    Array.from(document.querySelectorAll('.carousel')).forEach((arrayElement, index) => {
+        carousel(arrayElement);
+    });
+    // Form
+    Array.from(document.querySelectorAll('form')).forEach((arrayElement, index) => {
+        form(arrayElement);
+    });
+    // Modal
+    Array.from(document.querySelectorAll('.modal')).forEach((arrayElement, index) => {
+        modal(arrayElement);
+    });
+    // YouTube videos
+    Array.from(document.querySelectorAll('.youtube-embed')).forEach((arrayElement, index) => {
+        new youtubeVideo(arrayElement);
+    });
+    window.addEventListener('hashchange', function () {
+        const hash = location.hash.replace('#', '');
+        const label = document.querySelector(`label[for="${hash}"]`);
+        if (label instanceof HTMLElement) {
+            label.click();
+        }
+    }, false);
+});
+//# sourceMappingURL=main.js.map