@iamproperty/components 7.8.2--beta6 → 7.8.2--beta8

package/assets/sass/components/nav-standalone.component.scss

@@ -0,0 +1,50 @@
+@use 'sass:map';
+
+@use '../_func' as *;
+
+@use '../bs_grid' as *;
+
+@use '../elements/forms' as *;
+@use '../elements/buttons' as *;
+
+@use '../elements/brand.css';
+
+@use '../elements/dialog' as *;
+@use '../elements/modal' as *;
+@use '../elements/container' as *;
+
+@use '../elements/links' as *;
+
+@use '../utilities/colours' as *;
+@use '../utilities/margins' as *;
+@use '../utilities/paddings' as *;
+@use '../utilities/sizes' as *;
+@use '../utilities/display' as *;
+
+
+
+@use '../components/nav.preload.scss' as *;
+@use '../components/nav.global.scss' as *;
+
+@layer legacy, reset, elements, components, templates, overrides, utilities, debug;
+
+*, *::before, *::after {
+    box-sizing: border-box;
+}
+
+
+:host {
+  display: grid;
+  grid-column: full-width !important;
+  grid-template-columns: subgrid;
+}
+
+iam-nav {
+  display: grid;
+  grid-column: full-width !important;
+  grid-template-columns: subgrid;
+}
+
+.wrapper {
+  display: contents;
+}

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

@@ -2,6 +2,7 @@
 
 @use '../_func' as *;
 
+// TODO: do i need to load these files 
 @use '../bs_grid' as *;
 
 @use '../elements/forms' as *;
@@ -13,6 +14,7 @@
 @use '../elements/modal' as *;
 @use '../elements/container' as *;
 
+@use '../elements/links' as *;
 
 @use '../utilities/colours' as *;
 @use '../utilities/margins' as *;
@@ -21,33 +23,62 @@
 @use '../utilities/display' as *;
 
 *, *::before, *::after {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 
-
-
 :host {
   display: flex !important;
   flex-direction: row !important;
   flex-wrap: wrap !important;
   align-items: center !important;
   color: var(--colour-heading);
-}
 
+  overscroll-behavior: contain !important;
+  background-color: var(--colour-canvas);
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  padding: var(--container-padding);
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+  width: 100%;
+  
+}
 
-/* #region Fix colours  */
+@media screen and (min-width: 62em) {
+  :host(.has-secondary) {
+    --nav-height: 8.5rem; 
+  }
+}
 
-:host(.bg-primary) .container {
+/* #region scrollbars */
+.menu::-webkit-scrollbar {
+  width: 6px;
+}
 
-  /* color-scheme: dark; */
+.menu::-webkit-scrollbar-track {
+  border: 0 !important;
+}
 
-  .menu {
-    
-    /* color-scheme: light; */
-  }
+.menu::-webkit-scrollbar-thumb {
+  border: 0 !important;
 }
+/* #endregion 
 
+/* #region menu buttons */
+
+/* #region logo */
+
+::slotted(.brand) {
+  font-size: 3rem;
+  height: 3rem;
+  padding: 0;
+  text-decoration: none;
+  min-width: min(var(--svg-width), 14rem);
+  margin-right: auto;
+
+}
 /* #endregion */
 
 .btn-menu {
@@ -83,16 +114,6 @@
     display: none;
   }
 
-  &[aria-expanded] {
-    i {
-      display: none;
-    }
-
-    i + i {
-      display: inline;
-    }
-  }
-
   @media screen and (max-width: 62em) {
     > .btn {
       display: contents;
@@ -113,30 +134,23 @@
     width: auto;
     padding-right: 1.875rem; /* 24 + 6 */
     text-indent: 0;
-
-    &[aria-expanded] {
-      text-indent: -1000%;
-    }
   }
 
   @media screen and (min-width: 62em) {
     min-width: 3rem;
     width: fit-content;
     height: auto;
-    margin: 0 0 0 1.5rem;
+    margin: 0 0 0 3rem;
     padding: 0 !important;
     text-indent: 0;
     padding-right: 0 !important;
 
-    &[aria-expanded] {
-      text-indent: 0;
-    }
-
     .btn {
       
       margin: 0 !important;
       display: flex;
-
+      --btn-padding-inline: 1.5rem;
+      
       span {
         order: 2;
       }
@@ -157,12 +171,37 @@
   }
 }
 
+.btn-menu[aria-expanded] {
+
+  i {
+    display: none;
+  }
+
+  i + i {
+    display: inline;
+  }
+  
+  @media screen and (min-width: 36em) {
+
+    text-indent: -1000%;
+  }
+
+  @media screen and (min-width: 62em) {
+
+      text-indent: 0;
+  }
+}
+
 :host(.bg-primary) .btn {
   &:is(:hover, :focus) {
     color: var(--colour-inverted);
   }
 }
 
+/* #endregion */
+
+
+
 /* #region mobile and tablet menu */
 @media screen and (max-width: 62em) {
   :host > .container {
@@ -171,10 +210,10 @@
 
   .menu__outer {
     position: absolute;
-    top: 6rem; /* 96 */
+    top: var(--nav-height);
     left: 0;
     width: 100%;
-    height: calc(100vh - 6rem);
+    height: calc(100vh - var(--nav-height));
     overflow: hidden;
     pointer-events: none;
     transition: background 0.5s;
@@ -185,21 +224,8 @@
     }
   }
 
-  .menu::-webkit-scrollbar {
-    width: 6px;
-  }
-
-  .menu::-webkit-scrollbar-track {
-    border: 0 !important;
-  }
-
-  .menu::-webkit-scrollbar-thumb {
-    border: 0 !important;
-  }
-
   .menu {
 
-    
     overscroll-behavior: contain;
     width: 23.4375rem;
     background-color: var(--colour-canvas-2);
@@ -215,6 +241,9 @@
     flex-direction: column;
     flex-wrap: nowrap;
 
+    /*  The menu is always white unless in dark mode */
+    background-color: var(--colour-canvas-2);
+      
     > * {
       flex-shrink: 0;
       
@@ -222,11 +251,6 @@
     }
 
 
-    /*  The menu is always white unless in dark mode */
-    
-      background-color: var(--colour-canvas-2);
-      
-
     @media (forced-colors: active) {
       outline: 1px solid white;
     }
@@ -244,21 +268,17 @@
 
     &.open {
       left: calc(100% - 23.4375rem);
-      -webkit-box-shadow: 0 6px 12px 0px rgba(0, 0, 0, 0.2);
-      box-shadow: 0 6px 12px 0px rgba(0, 0, 0, 0.2);
+      -webkit-box-shadow: 0 12px 12px 0px rgba(0, 0, 0, 0.2);
+      box-shadow: 0 12px 12px 0px rgba(0, 0, 0, 0.2);
       pointer-events: all;
     }
-
-    &.closed * {
-      //display: none !important;
-    }
   }
 
   .menu__secondary {
     display: none;
   }
 
-  .has-secondary .menu__secondary {
+  :host(.has-secondary) .menu__secondary {
     display: block;
     margin-left: -1.5rem;
     margin-right: -1.5rem;
@@ -274,7 +294,7 @@
     }
   }
 
-  ::slotted(a:not([slot='logo']):not(.btn-compact):not(.btn-primary)) {
+  ::slotted(a:not([slot='logo']):not(.btn-compact):not(.btn-primary):not(.switch-account)) {
     display: block !important;
     line-height: 1.25rem !important;
     padding: 1.5rem 0 !important;
@@ -293,12 +313,7 @@
     }
   }
 
-  *:is(.has-search, .has-actions) .menu__primary {
-    display: block;
-    padding-bottom: 3rem;
-  }
-
-  .menu:not(.has-secondary) .menu__primary {
+  .menu__primary {
     display: block;
     padding-bottom: 3rem;
   }
@@ -321,6 +336,10 @@
     margin-top: 0 !important;
   }
 
+  ::slotted(iam-branch-selector[slot='account']) {
+    margin-block-end: 1rem!important;
+  }
+
   /*  Search */
   .dialog__wrapper {
     width: 100%;
@@ -336,7 +355,7 @@
   }
   .dialog__wrapper dialog {
     display: contents;
-  }
+  } 
 }
 /* #endregion */
 
@@ -375,16 +394,17 @@
     flex-wrap: nowrap;
     align-items: center;
 
-    &:has(.has-secondary) {
-      padding-top: 4rem !important; /* 24 + 40 */
-    }
 
     > * {
       margin-bottom: 0 !important;
     }
   }
 
-  .btn-menu {
+  :host(.has-secondary) {
+    padding-top: 2.5rem !important; /* 40 */
+  }
+
+  #btn-menu {
     display: none;
   }
 
@@ -406,7 +426,7 @@
     display: none;
   }
 
-  .has-secondary .menu__secondary {
+  :host(.has-secondary) .menu__secondary {
     background-color: var(--colour-canvas-2);
     display: block;
     position: absolute;
@@ -419,27 +439,35 @@
       margin-left: auto;
       margin-right: auto;
       padding: var(--container-padding) !important;
-      padding-top: 0.5rem !important;
-      padding-bottom: 0.5rem !important;
-      text-align: right;
+      padding-top: 0.25rem !important;
+      padding-bottom: 0.25rem !important;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
     }
   }
 
   ::slotted(a[slot='secondary']) {
-    font-size: 0.875rem !important;
+    font-size: 0.75rem !important;
+    line-height: 2rem!important;
+    margin: 0!important;
 
     &:after {
-      top: calc(100% - 0.25em) !important;
+      display: none;
     }
   }
 
+  ::slotted(iam-branch-selector[slot='secondary']) {
+    margin-inline-end: auto!important;
+  }
+
   ::slotted(a:not([slot='logo'])),
   ::slotted(.btn) {
     margin-bottom: 0 !important;
     margin-right: 0 !important;
   }
 
-  ::slotted(a:not([slot='logo']):not(.btn-compact):not(.btn-primary)) {
+  ::slotted(a:not([slot='logo']):not(.btn-compact):not(.btn-primary):not([slot='secondary']):not(.switch-account)) {
     font-size: 1rem !important;
     font-weight: normal !important;
 
@@ -448,10 +476,14 @@
     }
   }
 
-  ::slotted(a:not([slot='logo']):not([slot='dual'])) {
+  ::slotted(a:not([slot='logo']):not([slot='dual']):not(.switch-account):not([slot='secondary'])) {
     margin-left: 2rem !important;
   }
 
+  ::slotted(a[slot='secondary']) {
+    margin-left: 1.125rem !important;
+  }
+
   ::slotted(.btn-primary) {
     margin-left: 3rem !important;
   }
@@ -478,6 +510,7 @@
   #search-close,
   #search-button {
     margin: 0;
+    outline: none!important;
   }
 
   #search-dialog[open] {
@@ -546,6 +579,8 @@
     }
   }
 
+
+
   :host(.open-secondary) .backdrop{
 
     z-index: 1;
@@ -553,15 +588,17 @@
     height: 100vh;
   }
 
-  :host(.open-secondary) .has-secondary .menu__secondary {
+  :host(.has-secondary.open-secondary) .menu__secondary {
 
     z-index: 2;
   }
 }
 /* #endregion */ 
 
-/* #region Menus */
-::slotted(.nav--menu) {
+/* #region account menu */
+
+.nav--menu {
+
   pointer-events: all;
   overscroll-behavior: contain;
   width: 23.4375rem;
@@ -570,7 +607,7 @@
   height: calc(100vh - 6rem);
   left: 100%;
   top: 0;
-  padding: 0 1.5rem 0 1.5rem;
+  padding: 1.5rem 1.5rem 0 1.5rem;
   z-index: var(--index-menu);
   overflow: auto;
   transition: all 1s ease-out;
@@ -582,36 +619,11 @@
     flex-shrink: 0;
   }
 
-
   /*  The menu is always white unless in dark mode */
-
-
   @media (forced-colors: active) {
     outline: 1px solid white;
   }
 
-  &:before {
-    display: block;
-    width: calc(100% + 3rem);
-    border-top: 2px solid var(--colour-border);
-    z-index: 1;
-    padding: 1.5rem 1.5rem;
-    margin: 0 -1.5rem;
-    font-family: var(--font-heading);
-    font-style: normal;
-    font-weight: var(--heading-weight);
-    color: var(--colour-heading);
-    clear: both;
-    font-size: var(--h3-fs);
-    line-height: var(--heading-lh);
-    max-width: var(--content-max-width);
-
-    @media screen and (min-width: 36em) {
-      margin-right: -2.5rem;
-      padding-right: 2.5rem;
-      width: calc(100% + 4rem);
-    }
-  }
 
   @media screen and (min-width: 36em) {
     padding-right: 2.5rem !important;
@@ -621,8 +633,28 @@
     height: calc(100vh - var(--nav-height));
     top: var(--nav-height);
   }
+
 }
 
+::slotted(a[slot='account']:not(.btn-compact):not(.btn-primary):not(.switch-account)) {
+    display: block !important;
+    line-height: 1.25rem !important;
+    padding: 1.5rem 0 !important;
+    margin: 0 !important;
+    flex-shrink: 0;
+    font-size: 1rem !important;
+    font-weight: normal !important;
+
+    &:after {
+      content: '';
+      display: block!important;
+      height: 2px;
+      width: 100% !important;
+      background-color: var(--colour-border) !important;
+      top: calc(100% - 2px) !important;
+    }
+  }
+
 slot[name='menus'] {
   position: absolute;
   top: 0;
@@ -634,17 +666,11 @@ slot[name='menus'] {
   width: 23.4375rem;
 }
 
-::slotted(.nav--menu[data-open-title]) {
-  &:before {
-    content: attr(data-open-title);
-  }
-}
-
-::slotted(.nav--menu.open) {
+.nav--menu.open {
   width: calc(23.4375rem - var(--modifier, 0px));
   left: calc(100% - (23.4375rem - var(--modifier, 0px)));
-  -webkit-box-shadow: 0 6px 12px 0px rgba(0, 0, 0, 0.2);
-  box-shadow: 0 6px 12px 0px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0 12px 12px 0px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 12px 12px 0px rgba(0, 0, 0, 0.2);
   pointer-events: all;
 }