@iamproperty/components 7.0.0 → 7.1.0--beta2

package/assets/sass/components/nav.old.scss

@@ -1,13 +1,11 @@
-@use "../_func" as *;
+@use '../_func' as *;
 
 // #region set dark background for mobile view
 .nav .nav__mobile-bar {
-  
   background: var(--colour-primary);
   color: white;
 
-  @if $compatible != "true" {
-    
+  @if $compatible != 'true' {
     @include invert-colours();
   }
 
@@ -15,13 +13,12 @@
   flex-direction: column;
   flex-wrap: nowrap;
   width: rem(375);
-  
+
   @include media-breakpoint-up(sm) {
     width: 100%;
   }
 
   > .container {
-
     padding-top: rem(16);
     padding-bottom: 1rem;
     flex-shrink: 0;
@@ -32,19 +29,16 @@
 
 // #region General styles
 .nav {
-  
   overflow-x: hidden;
   font-weight: bold;
 
-  &__inner, 
+  &__inner,
   &__menu--account {
-
     display: flex;
     flex-direction: column;
     flex-wrap: nowrap;
 
     > .container {
-
       padding-top: rem(16);
       padding-bottom: 0;
       flex-shrink: 0;
@@ -79,7 +73,6 @@
 
 .nav__search-btn,
 .nav__menu-btn {
-
   display: flex;
 
   label {
@@ -94,18 +87,16 @@
 
     &:hover,
     &:focus {
-
       color: var(--colour-hover);
     }
 
     &:active {
-
       color: var(--colour-active);
     }
 
     &:before,
     &:after {
-      content: "";
+      content: '';
       position: absolute;
       width: 0%;
       height: 2px;
@@ -113,13 +104,14 @@
       left: 0;
       background: currentColor;
       transform-origin: 50% 50%;
-      transition: transform 0.5s, width 0.5s;
+      transition:
+        transform 0.5s,
+        width 0.5s;
     }
   }
 }
 
 .nav__search-btn {
-
   label {
     text-indent: 0;
     overflow: visible;
@@ -133,7 +125,6 @@
     color: inherit;
 
     &__outline {
-
       stroke-width: 2px;
       stroke: currentColor;
     }
@@ -144,10 +135,9 @@
   display: flex;
 
   label {
-
     border-top: 2px solid currentColor;
     border-bottom: 2px solid currentColor;
-    
+
     &:before,
     &:after {
       width: 100%;
@@ -156,7 +146,6 @@
 }
 
 .nav__account-btn {
-
   label {
     font-size: rem(18);
     text-indent: 0;
@@ -177,7 +166,6 @@
     color: inherit;
 
     &__outline {
-
       stroke-width: 2px;
       stroke: currentColor;
     }
@@ -194,10 +182,10 @@
     position: relative;
     text-decoration: none;
 
-    &.current{
+    &.current {
       border-left: #{rem(6)} solid var(--colour-info);
       margin-left: rem(-20);
-      padding-left: rem(20 - 6)
+      padding-left: rem(20 - 6);
     }
   }
 }
@@ -207,7 +195,6 @@
 // #region nav search
 
 @include media-breakpoint-up(md) {
-
   .nav__menu--search {
     display: none;
   }
@@ -219,7 +206,7 @@
     left: 0;
     width: 100%;
 
-    background: rgba(0,0,0,.6);
+    background: rgba(0, 0, 0, 0.6);
     height: calc(100vh - 5rem);
     display: block;
   }
@@ -235,10 +222,10 @@
     display: flex;
     justify-content: space-between;
   }
-    
+
   .service--active {
     &:before {
-      content: "";
+      content: '';
       height: 1em;
       width: 1em;
       display: inline-block;
@@ -261,26 +248,23 @@
     padding-inline: 1rem;
   }
 
-
   > *:last-child {
-    margin-bottom: 0!important;
+    margin-bottom: 0 !important;
   }
 }
 // #endregion
 
 // #region Nav with background colour applied
-.nav[class*="bg-"] {
-
+.nav[class*='bg-'] {
   .nav__inner {
     background-color: transparent;
   }
   .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);
     --colour-active: var(--colour-active-theme);
@@ -303,9 +287,7 @@
   }
 
   > .container > ul > li {
-
-    &:not(:last-child){
-        
+    &:not(:last-child) {
       border-bottom: 1px solid var(--colour-border);
     }
 
@@ -363,10 +345,8 @@
 }
 // #endregion
 
-
 // #region Sticky nav
 .nav {
-
   position: sticky;
   top: 0;
   left: 0;
@@ -374,9 +354,8 @@
   z-index: var(--index-menu);
 
   &.is-stuck {
-
-    -webkit-box-shadow: 0 4px 20px -10px rgba(51,51,51,0.25);
-    box-shadow: 0 4px 20px -10px rgba(51,51,51,0.25);
+    -webkit-box-shadow: 0 4px 20px -10px rgba(51, 51, 51, 0.25);
+    box-shadow: 0 4px 20px -10px rgba(51, 51, 51, 0.25);
   }
 }
 
@@ -384,14 +363,12 @@ nav + main > *:first-child {
   padding-top: 2rem;
 }
 
-
 // #endregion
 
 // #region Show/hide
 .nav__menu,
 .nav__btn,
 .nav__menu--secondary {
-
   display: none;
 }
 
@@ -406,7 +383,6 @@ nav + main > *:first-child {
   overscroll-behavior: contain;
 
   @include media-breakpoint-up(sm) {
-    
     width: rem(375);
   }
 }
@@ -416,33 +392,28 @@ nav + main > *:first-child {
   height: 100vh;
 }
 
-.nav:has(#showMenu:checked){
+.nav:has(#showMenu:checked) {
   min-height: 100vh;
 }
 
 #showMenu:checked ~ .nav__inner,
 #showAccount:checked ~ .nav__menu--account {
-
   height: 100vh;
   overflow: visible;
   overflow-x: auto;
   left: 0;
 
   @include media-breakpoint-up(sm) {
-    
     left: calc(100% - #{rem(375)});
   }
 }
 
 @include media-breakpoint-up(md) {
-   
   #showAccount ~ .nav__menu--account {
-
     display: none;
   }
 
   #showAccount:checked ~ .nav__menu--account {
-
     left: 0;
     width: 100%;
     height: auto;
@@ -450,9 +421,9 @@ nav + main > *:first-child {
     top: 6rem;
     border-top: rem(5) solid var(--colour-primary);
     border-bottom: 1px solid var(--colour-border-light);
-    -webkit-box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
-    -moz-box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
-    box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
+    -webkit-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
+    -moz-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
+    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
   }
 }
 
@@ -463,13 +434,10 @@ nav + main > *:first-child {
   display: block;
 }
 
-
-
 #showMenu:checked ~ div .nav__menu-btn label,
 #showSearch:checked ~ div .nav__search-btn label {
-  
   border: 0;
-  
+
   .icon {
     opacity: 0;
   }
@@ -478,31 +446,27 @@ nav + main > *:first-child {
     transform: rotate(45deg);
   }
   &:after {
-
     width: 100%;
     transform: rotate(-45deg);
   }
 }
 
 @include media-breakpoint-up(sm) {
-    
   #showMenu:checked ~ .nav__bg {
-      content: " ";
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100vw;
-      height: 100vh;
-      background: rgba(0,0,0,0.5);
-      z-index: 1;
-    
+    content: ' ';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 1;
   }
 }
 
 @include media-breakpoint-up(md) {
-    
   .nav__bg {
-      display: none;
+    display: none;
   }
 }
 
@@ -510,17 +474,14 @@ nav + main > *:first-child {
 
 // #region Desktop nav
 @include media-breakpoint-up(md) {
-
   .nav .nav__mobile-bar {
-
     display: none;
   }
 
-
   .nav__logo {
     height: rem(64);
   }
-  
+
   #showMenu:checked ~ .nav__inner,
   .nav__inner {
     overflow: visible;
@@ -539,13 +500,11 @@ nav + main > *:first-child {
   }
 
   .nav {
-
     .nav__inner > .container {
       padding-bottom: 1rem;
     }
-    
   }
-  
+
   .nav__search-btn,
   .nav__btn {
     order: 2;
@@ -559,8 +518,8 @@ nav + main > *:first-child {
     padding-top: 0;
   }
   .nav__menu > .list-unstyled {
-    margin-left: -1.5rem!important;
-    margin-right: -1.5rem!important;
+    margin-left: -1.5rem !important;
+    margin-right: -1.5rem !important;
     width: calc(100% + 3rem);
     margin-bottom: 0;
     //text-align: right;
@@ -573,8 +532,7 @@ nav + main > *:first-child {
       padding-left: 1rem;
       padding-right: 1rem;
 
-      &:not(:last-child){
-          
+      &:not(:last-child) {
         border-right: 1px solid var(--colour-border);
       }
       > a {
@@ -589,17 +547,16 @@ nav + main > *:first-child {
   }
 
   .nav__account-btn {
-    max-width: fit-content!important;
+    max-width: fit-content !important;
 
     label {
-      
-      border: none!important;
+      border: none !important;
       padding-top: 0.5rem;
       position: relative;
       padding-right: 2.5rem;
 
       &:after {
-        content: "";
+        content: '';
         position: absolute;
         top: calc(50% + 0.5rem);
         right: 0;
@@ -624,16 +581,11 @@ nav + main > *:first-child {
     font-size: rem(15);
     padding-top: 0;
   }
-
-
 }
 // #endregion
 
-
-// #region Nav secondary DESKTOP 
+// #region Nav secondary DESKTOP
 @include media-breakpoint-up(md) {
-
-
   .nav__menu--secondary {
     background-color: var(--colour-primary);
     @include invert-colours();
@@ -648,8 +600,8 @@ nav + main > *:first-child {
   }
 
   .nav__menu--secondary > .container > .list-unstyled {
-    margin-left: -1rem!important;
-    margin-right: -1rem!important;
+    margin-left: -1rem !important;
+    margin-right: -1rem !important;
     width: calc(100% + 2rem);
     margin-bottom: 0;
 
@@ -657,10 +609,10 @@ nav + main > *:first-child {
       display: inline-block;
       padding-left: 1rem;
       padding-right: 1rem;
-      border: none!important;
+      border: none !important;
       padding-block: 0;
       position: relative;
-        
+
       a,
       .nav__section-link {
         display: block;
@@ -676,9 +628,7 @@ nav + main > *:first-child {
       &:hover,
       &:focus,
       &:focus-within {
-
         > .nav__section-link {
-          
           color: var(--colour-selected);
         }
 
@@ -690,20 +640,18 @@ nav + main > *:first-child {
           left: 0;
           padding-top: rem(16);
 
-          -webkit-box-shadow: 0 4px 20px -10px rgba(51,51,51,0.25);
-          box-shadow: 0 4px 20px -10px rgba(51,51,51,0.25);
-          
+          -webkit-box-shadow: 0 4px 20px -10px rgba(51, 51, 51, 0.25);
+          box-shadow: 0 4px 20px -10px rgba(51, 51, 51, 0.25);
+
           @include reset-colours();
 
           --colour-admin: var(--colour-admin-theme);
 
           li {
-            
             padding-inline: rem(24);
           }
 
           li:last-child {
-            
             padding-bottom: rem(16);
           }
 
@@ -736,24 +684,18 @@ nav + main > *:first-child {
   .nav__menu--secondary > .container > .logout-button {
     display: none;
   }
-
 }
 // #endregion
 
-
 // #region Nav account Desktop
 
-
 @include media-breakpoint-up(md) {
   .nav__menu--account {
-
     > .container:first-child {
-      
       display: none;
     }
 
     > .container:not(:first-child) {
-
       &:before {
         display: none;
       }
@@ -761,22 +703,20 @@ nav + main > *:first-child {
       display: flex;
       flex-wrap: wrap;
       gap: 2rem;
-      
-    align-items: start;
+
+      align-items: start;
 
       > .row,
       .nav__featured-link,
       .credits {
-
         flex-basis: 22%;
         flex-grow: 1;
         margin: 0;
-
       }
 
       > .row > .col:first-child,
       .nav__featured-link > .row > .col:first-child {
-        max-width: 100%!important;
+        max-width: 100% !important;
         width: 100%;
         flex-shrink: 0;
         min-width: 100%;
@@ -786,17 +726,14 @@ nav + main > *:first-child {
       .logout-button {
         min-width: 100%;
       }
-    } 
+    }
   }
 }
 // #endregion
 
-
 // #region Mega menu
 .nav .list-unstyled > li details.nav__mega-menu {
-
   @include media-breakpoint-up(md) {
-
     position: static;
 
     height: 4.5rem;
@@ -804,39 +741,35 @@ nav + main > *:first-child {
   }
 
   .inner {
-
     z-index: 5;
-    
-    [class*="bg-"]{
 
+    [class*='bg-'] {
       --bs-bg-opacity: 0;
       @include media-breakpoint-up(md) {
         --bs-bg-opacity: 1;
       }
     }
 
-
     @include media-breakpoint-up(md) {
-
       --bs-bg-opacity: 1;
       position: absolute;
       top: 100%;
       left: 50%;
-      width: 100vw!important;
-      max-width: 100vw!important;
+      width: 100vw !important;
+      max-width: 100vw !important;
       -webkit-transform: translateX(-50%);
       -ms-transform: translateX(-50%);
       transform: translateX(-50%);
 
-      background: rgba(0,0,0,.6);
+      background: rgba(0, 0, 0, 0.6);
       height: calc(100vh - 8rem);
 
       pointer-events: none;
       padding-top: 0;
 
       .container {
-        padding: 0 rem(60 - 36) 1rem rem(60 - 36)!important;
-        max-width: rem(1440)!important;
+        padding: 0 rem(60 - 36) 1rem rem(60 - 36) !important;
+        max-width: rem(1440) !important;
         text-align: left;
         pointer-events: all;
         display: flex;
@@ -852,7 +785,6 @@ nav + main > *:first-child {
 
 // #region inline search
 .nav--inline-search {
-
   .nav__menu form {
     position: relative;
     .form-control__wrapper .form-control {
@@ -878,7 +810,7 @@ nav + main > *:first-child {
   @include media-breakpoint-up(md) {
     .nav__menu > .list-unstyled {
       text-align: left;
-      margin-right: 0!important;
+      margin-right: 0 !important;
     }
 
     .nav__menu form {
@@ -925,17 +857,15 @@ nav + main > *:first-child {
 // #region
 
 .nav--just-account {
-
   .nav__menu,
   .nav__account-btn {
-    display: none!important;
+    display: none !important;
   }
 
   @include media-breakpoint-up(md) {
-    
     .nav__menu,
     .nav__account-btn {
-      display: block!important;
+      display: block !important;
     }
   }
 
@@ -948,7 +878,6 @@ nav + main > *:first-child {
     background: transparent;
 
     @include media-breakpoint-up(sm) {
-    
       width: rem(375);
       left: calc(100% - #{rem(375)});
     }
@@ -962,4 +891,4 @@ nav + main > *:first-child {
   }
 }
 
-// #endregion
+// #endregion

package/assets/sass/components/nav.preload.scss

@@ -1,12 +1,10 @@
-@use "sass:math";
-@use "../_func" as *;
+@use 'sass:math';
+@use '../_func' as *;
 
 nav:has(iam-nav) {
-
   grid-column: container;
 }
 iam-nav {
-
   display: block;
   padding: var(--container-padding);
   padding-top: 1.5rem;
@@ -14,7 +12,7 @@ iam-nav {
   max-width: 100%;
   margin-inline: auto;
   column-grid: container;
-  
+
   .brand {
     font-size: rem(48);
     height: rem(48);
@@ -24,26 +22,27 @@ iam-nav {
   }
 
   @include media-breakpoint-up(md) {
-    padding-inline: max(var(--padding-inline), calc((100% - var(--container-max-width)) / 2 + var(--padding-inline)))!important;
+    padding-inline: max(
+      var(--padding-inline),
+      calc((100% - var(--container-max-width)) / 2 + var(--padding-inline))
+    ) !important;
   }
 }
 
 @media (scripting: enabled) {
-
   iam-nav:not(:defined) {
-
-    > *:not([slot="logo"]) {
+    > *:not([slot='logo']) {
       display: none;
     }
-    
+
     &:not(:target) > *:not(.brand) {
       display: none;
     }
 
     @include media-breakpoint-up(md) {
-      &:has([slot="secondary"]){
+      &:has([slot='secondary']) {
         padding-top: rem(64);
       }
     }
   }
-}
+}