@iamproperty/components 2.7.0 → 2.7.3

package/assets/sass/components/nav.scss

@@ -32,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 {
 
@@ -113,8 +123,8 @@
     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);
     display: inline-block;
@@ -136,6 +146,10 @@
     }
   }
 
+  .nav__title {
+    display: block;
+    padding: rem(8) 0 rem(8) 0;
+  }
 
   .nav__menu--search {
     order: 2;
@@ -152,8 +166,12 @@
 // 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);
@@ -165,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
@@ -215,7 +247,7 @@
   padding-top: 1px;
   left: 0;
   width: 100%;
-  z-index: 99999;
+  z-index: var(--index-menu);
 
   &.is-stuck {
 
@@ -229,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);
 
@@ -238,7 +270,7 @@ nav + main > *:first-child {
       top: 0;
       left: 0;
       width: 100%;
-      z-index: 99999;
+      z-index: var(--index-menu);
     }
   }
 }
@@ -347,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);
@@ -362,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;
   }
 
@@ -376,7 +408,7 @@ nav + main > *:first-child {
 
 // #region Drop down links
 
-.nav__menu .list-unstyled {
+.nav .list-unstyled {
 
   > li {
 
@@ -408,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;
       
@@ -438,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;
@@ -505,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) {
 
@@ -532,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%);
@@ -573,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;
@@ -616,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/stepper.scss

@@ -1,7 +1,7 @@
 @use "../_func" as *;
 
 .stepper {
-  background: var(--bs-body-bg);
+  background: #f0f0f0;
   display: flex;
   flex-wrap: wrap;
   margin-bottom: 2rem;

package/assets/sass/components/tabs.scss

@@ -7,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);
@@ -23,6 +24,7 @@
 
       &:before {
         width: 0;
+        width: calc(var(--is-current) * 100%);
       }
 
       &:hover:before,
@@ -37,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/elements/container.scss

@@ -56,7 +56,7 @@
   > .circle {
 
     position: absolute;
-    z-index: -1;
+    z-index: var(--index-below);
     border-width: 3px;
   }
 

package/assets/sass/elements/forms.scss

@@ -1,10 +1,30 @@
 .form-control__wrapper {
   margin-bottom: 1.5rem;
   max-width: $content-max-width;
+  position: relative;
 
   label {
     display: block;
 
+    &[title]:after{
+
+      content: "";
+      display: inline-block;
+      margin-left: 0.25em;
+      margin-bottom: 0.1em;
+      width: 1em;
+      height: 1em;
+      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%;
+    }
   }
 }
 
@@ -126,3 +146,49 @@ select[multiple]::-webkit-scrollbar-thumb {
   border-radius: 0.35rem;
 }
 // #endregion
+
+// #region prefix
+
+.form-control__wrapper :is(.prefix,.suffix) {
+
+  color: #212529;
+  background: #e9ecef;
+  padding: 0.75em 1em;
+  font-size: 1rem;
+  font-weight: normal;
+  line-height: 1.5;
+  position: absolute;
+  bottom: 1px;
+}
+
+.form-control__wrapper .prefix {
+
+  border-top-left-radius: 0.625rem;
+  border-bottom-left-radius: 0.625rem;
+  left: 1px;
+}
+
+.form-control__wrapper :is(.prefix-sm,.suffix-sm) {
+
+  font-size: var(--fs-small);
+}
+.form-control__wrapper :is(.prefix-lg,.suffix-lg) {
+
+  font-size: 1.5rem;
+}
+
+.form-control__wrapper .prefix + .form-control {
+  padding-left: em(64);
+}
+.form-control__wrapper .suffix + .form-control {
+  padding-right: em(64);
+}
+
+.form-control__wrapper .suffix {
+  left: auto;
+  right: 1px;
+  border-top-right-radius: 0.625rem;
+  border-bottom-right-radius: 0.625rem;
+}
+
+// #endregion

package/assets/sass/elements/lists.scss

@@ -4,6 +4,69 @@
   max-width: $content-max-width;
 }
 
+.tick-list {
+
+  padding-left: 0;
+
+  li {
+    position: relative;
+    list-style: none;
+    padding-bottom: 1rem;
+    padding-left: 2.5rem;
+    
+    &:before {
+      
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 1.5em;
+      height: 1.5em;
+      
+      background: var(--colour-secondary);
+      mask-image: var(--icon-tick);
+      mask-size: 100%;
+      mask-repeat: no-repeat;
+      mask-position: 50% 50%;
+      -webkit-mask-image: var(--icon-tick);
+      -webkit-mask-size: 100%;
+      -webkit-mask-repeat: no-repeat;
+      -webkit-mask-position: 50% 50%;
+    }
+
+    &[class*="bg-"] {
+      padding: 1rem;
+      padding-left: 4rem;
+      margin-bottom: 1rem;
+      border-radius: 0.5rem;
+      z-index: 0;
+
+      &:before,
+      &:after {
+      
+        top: 50%;
+        left: 1rem;
+        width: 2rem;
+        height: 2rem;
+        margin-top: -1rem;
+      }
+
+      &:after {
+      
+        content: "";
+        position: absolute;
+        z-index: -1;
+        background-color: white;
+        border-radius: 50%;
+        transform-origin: 50% 50%;
+        transform: scale(0.9);
+      }
+
+    }
+  }
+}
+
+
 .breadcrumb {
 
   font-size: rem(14);