@iamproperty/components 2.6.2 → 2.7.1

package/assets/sass/components/modal.scss

@@ -1,3 +1,6 @@
+@use "sass:math";
+@use "../_func" as *;
+
 .modal {
   display: none;
 }
@@ -10,7 +13,7 @@
   width: 100%;
   height: 100%;
   background: rgba(0,0,0,0.25);
-  z-index: 99999;
+  z-index: var(--index-overlay);
   border: none;
   overscroll-behavior: contain;
 
@@ -31,7 +34,7 @@
     @include media-breakpoint-up(md) {
       display: block;
       position: absolute;
-      z-index: 1;
+      z-index: var(--index-focus);
       top: 50%;
       transform: translate(0,-50%);
       overflow: hidden;
@@ -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);
       }
     }
   }
@@ -93,7 +96,7 @@
     right: 0;    
     margin-top: -0.75rem;
     margin-right: -0.75rem;
-    z-index: 99;
+    z-index: var(--index-focus);
 
     &:not(:hover):not(:focus):not(:active){
       background: white;

package/assets/sass/components/nav.scss

@@ -1,6 +1,9 @@
+@use "../_func" as *;
+
 .nav {
 
-  background: white;
+  background: var(--bs-body-bg);
+
 
   &__inner {
 
@@ -29,6 +32,16 @@
     }
   }
 
+  .nav__logo img {
+    height: rem(48);
+    width: auto;
+
+    @include media-breakpoint-up(sm) {
+      height: rem(60);
+      width: auto;
+    }
+  }
+
   .nav__search-btn,
   .nav__menu-btn {
 
@@ -110,10 +123,10 @@
     padding-top: 1rem;
   }
 
-  &__menu li a:not(.text-decoration-none):not(.btn),
-  &__menu li .link:not(.text-decoration-none):not(.btn) {
+  .list-unstyled li a:not(.text-decoration-none):not(.btn),
+  .list-unstyled 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;
@@ -133,6 +146,10 @@
     }
   }
 
+  .nav__title {
+    display: block;
+    padding: rem(8) 0 rem(8) 0;
+  }
 
   .nav__menu--search {
     order: 2;
@@ -143,18 +160,18 @@
 
     background: rgba(0,0,0,.6);
     height: calc(100vh - 5rem);
-
-    > div:first-child {
-      
-    }
   }
 }
 
 // Nav with background colour applied
 .nav[class*="bg-"] {
 
-  .nav__menu--secondary.bg-primary {
+  .nav__menu--secondary {
+
     background-color: white!important;
+  }
+  .nav__menu--secondary > .container > .list-unstyled > li > a,
+  .nav__menu--secondary > .container > .list-unstyled > li > details > summary .link {
 
     --colour-link: var(--colour-link-theme);
     --colour-hover: var(--colour-hover-theme);
@@ -166,16 +183,30 @@
 .nav__menu--secondary {
   flex-grow: 1;
 
-  a {
+  background: var(--colour-primary);
+  
+  > .container > .list-unstyled > li > a,
+  > .container > .list-unstyled > li > details > summary .link {
+    --colour-body: white;
+    --colour-link: white;
+    --colour-hover: white;
+    --colour-active: white;
+    --colour-heading: white;
+    --colour-underline: white;
+    --colour-border: white;
+  }
+
+  a,
+  .link {
     display: inline-block;
     font-size: rem(15);
     padding: rem(8) 0 rem(8) 0;
     text-decoration: none;
-  }
 
-  a:hover,
-  a:focus {
-    text-decoration: underline!important;
+    &:hover,
+    &:focus {
+      text-decoration: underline!important;
+    }
   }
 }
 // #endregion
@@ -216,7 +247,7 @@
   padding-top: 1px;
   left: 0;
   width: 100%;
-  z-index: 99999;
+  z-index: var(--index-menu);
 
   &.is-stuck {
 
@@ -230,7 +261,7 @@ nav + main > *:first-child {
 }
 
 @include media-breakpoint-up(md) {
-  .nav.has-secondary:not(.nav--admin) {
+  .nav.has-secondary:not(.nav--admin):not(.nav--marketplace) {
 
     top: rem(-40);
 
@@ -239,7 +270,7 @@ nav + main > *:first-child {
       top: 0;
       left: 0;
       width: 100%;
-      z-index: 99999;
+      z-index: var(--index-menu);
     }
   }
 }
@@ -348,7 +379,7 @@ nav + main > *:first-child {
     }
   }
 
-  .nav__menu--secondary .list-unstyled {
+  .nav__menu--secondary > .container > .list-unstyled {
     margin-left: -1rem!important;
     margin-right: -1rem!important;
     width: calc(100% + 2rem);
@@ -363,12 +394,12 @@ nav + main > *:first-child {
   }
 
 
-  .nav:not(.nav--admin) .nav__menu--secondary .list-unstyled {
+  .nav:not(.nav--admin) .nav__menu--secondary > .container > .list-unstyled {
     font-size: rem(15);
     padding-top: 0;
   }
 
-  .nav.nav--admin .nav__menu--secondary .list-unstyled {
+  .nav.nav--admin .nav__menu--secondary > .container > .list-unstyled {
     text-align: left;
   }
 
@@ -377,7 +408,7 @@ nav + main > *:first-child {
 
 // #region Drop down links
 
-.nav__menu .list-unstyled {
+.nav .list-unstyled {
 
   > li {
 
@@ -409,7 +440,6 @@ nav + main > *:first-child {
     .link:not(.text-decoration-none):not(.btn) {
       padding: 0.5rem 1.5rem 0.5rem 0;
       display: inline-block;
-      color: var(--colour-primary);
       cursor: pointer;
       position: relative;
       
@@ -439,7 +469,7 @@ nav + main > *:first-child {
     details {
       @include media-breakpoint-up(md) {
 
-        z-index: 1;
+        z-index: var(--index-above);
         padding: 0 1rem;
         margin-left: -1rem;
         margin-right: -1rem;
@@ -506,7 +536,7 @@ nav + main > *:first-child {
 // #endregion
 
 // #region Mega menu
-.nav__menu .list-unstyled > li  details.nav__mega-menu {
+.nav .list-unstyled > li details.nav__mega-menu {
 
   @include media-breakpoint-up(md) {
 
@@ -533,7 +563,8 @@ nav + main > *:first-child {
       position: absolute;
       top: 100%;
       left: 50%;
-      width: 100vw;
+      width: 100vw!important;
+      max-width: 100vw!important;
       -webkit-transform: translateX(-50%);
       -ms-transform: translateX(-50%);
       transform: translateX(-50%);
@@ -574,7 +605,7 @@ nav + main > *:first-child {
       bottom: 0;
       right: 0;
       margin: 0;
-      z-index: 1;
+      z-index: var(--index-focus);
       border-color: transparent;
       background: transparent;
       padding: 0.85rem 0rem;
@@ -617,3 +648,168 @@ nav + main > *:first-child {
   }
 }
 // #endregion
+
+// #region Martketplace
+.nav--marketplace {
+
+  --nav-border: #eeeeee;
+  --nav-height: 6rem;
+
+  &.nav--admin {
+
+    --nav-height: 4.5rem;
+  }
+
+  border-bottom: 1px solid var(--nav-border);
+
+  .nav__logo {
+
+    a:not(.current) {
+      display: none;
+    }
+  }
+
+  .nav__menu {
+    height: 100%;
+    padding-top: 1.5rem;
+    padding-left: var(--container-padding-x);
+    padding-right: var(--container-padding-x);
+  }
+
+  .nav__featured-link:hover {
+    background: #eeeeee;
+  }
+
+  .list-unstyled {
+    a:before {
+      display: none!important;
+    }
+  }
+
+  .nav__menu-btn {
+    margin-left: 2rem;
+  }
+
+  @include media-breakpoint-up(md) {
+
+    .nav__inner > .container:not(.container-fluid) {
+      max-width: 100%;
+      padding-left: 2rem;
+      padding-right: 2rem;
+    }
+
+    .nav__logo {
+      display: flex;
+      justify-content: space-between;
+
+
+      a:not(.current) {
+        display: inline-block;
+      }
+
+      a:before {
+        content: '';
+        position: absolute;
+        left: 50%;
+        top: 100%;
+        margin-top: rem(10);
+        width: 0%;
+        height: rem(6);
+        @include var(background-color,--colour-underline);
+        -webkit-transform: translateX(-50%);
+        -ms-transform: translateX(-50%);
+        transform: translateX(-50%);
+        -webkit-transition: .3s ease-in;
+        transition: .3s ease-in;
+        z-index: calc(var(--index-menu) + var(--index-above));
+      }
+
+      a:hover:before,
+      .current:before {
+        
+        width: 100%;
+      }
+    }
+
+    // Update the nav
+    #showMenu:checked ~ .nav__inner {
+      height: auto;
+      overflow: visible;
+    }
+    .nav__menu {
+      display: block;
+      height: calc(100vh - var(--nav-height));
+      width: rem(400);
+      position: absolute;
+      top: var(--nav-height);
+      z-index: 60;
+      background: #fff;
+      overflow-y: auto;
+      box-shadow: -0.5rem 1rem 1rem rgb(0 0 0 / 5%);
+      border-top: 1px solid var(--nav-border);
+      border-left: 1px solid var(--nav-border);
+      transition: right ease-in-out 0.3s;
+      padding: 2.5rem;
+      right: rem(-416);
+    }
+    #showMenu:checked ~ .nav__inner .nav__menu {
+      right: 0;
+    }
+
+    .nav__menu {
+
+        padding-top: 1.5rem;
+        padding-left: 2rem;
+        padding-right: 1.5rem;
+      
+      > .list-unstyled {
+        text-align: left;
+
+        li {
+          width: 100%;
+        }
+      }
+    }
+
+    // Secondary nav
+    
+    .nav__menu--secondary {
+      position: absolute;
+      top: calc(var(--nav-height) + 1px);
+      left: 0;
+      height: calc(100vh - var(--nav-height));
+      width: rem(280);
+      overflow: auto;
+
+      .container {
+
+      padding-left: 2rem;
+      padding-right: 1.5rem;
+      padding-bottom: rem(48);
+      }
+
+      .list-unstyled {
+        text-align: left;
+
+        li {
+          width: 100%;
+        }
+      }
+    }
+    
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .main--marketplace {
+    padding-left: rem(280);
+    
+    .container {
+      --container-padding: 2rem;
+      --container-padding-x: 2rem;
+      max-width: 100%!important;
+    }
+  }
+}
+
+// #endregion

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;
   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 {
@@ -5,6 +7,7 @@
     overflow: hidden;
 
     .link:not(.text-decoration-none):not(.btn) {
+      --is-current: 0;
       font-weight: bold;
       font-family: var(--font-heading);
       font-size: rem(18);
@@ -21,6 +24,7 @@
 
       &:before {
         width: 0;
+        width: calc(var(--is-current) * 100%);
       }
 
       &:hover:before,
@@ -35,12 +39,36 @@
   }
 
   @for $i from 1 through 10 {
-    input:checked:nth-child(#{$i}) ~ .tabs__links .link:not(.text-decoration-none):not(.btn):nth-child(#{$i}):before {
-      width: 100%;
+    input:checked:nth-child(#{$i}) ~ .tabs__links .link:not(.text-decoration-none):not(.btn):nth-child(#{$i}) {
+      
+      --is-current: 1;
+      --panel-tab-colour: white;
+      --panel-tab-border: var(--colour-secondary)
     }
     input:checked:nth-child(#{$i}) ~ .tabs .tab:nth-child(#{$i}){
       display: block;
+      display: contents;
     }
   }
 }
 
+// #region admin panel
+.admin-panel > .tabs__container:first-child {
+
+  display: contents;
+
+  .tabs {
+    display: contents;
+  }
+
+  .tabs__links {
+
+    padding-bottom: 0;
+
+    .link:not(.text-decoration-none):not(.btn) {
+
+      margin-bottom: 0;
+    }
+  }
+}
+// #endregion

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";