@iamproperty/components 7.0.0 → 7.1.0--beta2

package/assets/sass/components/nav.scss

@@ -1,14 +1,13 @@
-@use "../_func" as *;
+@use '../_func' as *;
 
-:host{
-  display: flex!important;
-  flex-direction: row!important;
-  flex-wrap: wrap!important;
-  align-items: center!important;
+:host {
+  display: flex !important;
+  flex-direction: row !important;
+  flex-wrap: wrap !important;
+  align-items: center !important;
 }
 
 .btn-menu {
-    
   padding: 0;
   margin: 0 0 0 rem(32);
   text-align: center;
@@ -33,8 +32,8 @@
     text-align: center;
     top: rem(12);
     right: 0;
-    margin: 0!important;
-    transition: none!important;
+    margin: 0 !important;
+    transition: none !important;
   }
 
   i + i {
@@ -42,7 +41,6 @@
   }
 
   &[aria-expanded] {
-
     i {
       display: none;
     }
@@ -57,18 +55,17 @@
       display: contents;
 
       display: contents;
-      color: inherit!important;
-      padding: 0!important;
+      color: inherit !important;
+      padding: 0 !important;
       margin: 0;
-      font-weight: normal!important;
+      font-weight: normal !important;
       line-height: inherit;
       font-size: inherit;
-      transition: none!important;
+      transition: none !important;
     }
   }
 
   @include media-breakpoint-up(sm) {
-
     margin: 0 0 0 rem(48);
     width: auto;
     padding-right: rem(24 + 6);
@@ -80,13 +77,12 @@
   }
 
   @include media-breakpoint-up(md) {
-
     width: fit-content;
     height: auto;
     margin: 0 0 0 3rem;
-    padding: 0!important;
+    padding: 0 !important;
     text-indent: 0;
-    padding-right: 0!important;
+    padding-right: 0 !important;
 
     &[aria-expanded] {
       text-indent: 0;
@@ -94,27 +90,26 @@
 
     .btn {
       @include light-mode() {
-    
         @include reset-colours();
       }
 
-      margin: 0!important;
+      margin: 0 !important;
       display: flex;
-      
+
       span {
         order: 2;
       }
 
-      i[class*=fa-] {
+      i[class*='fa-'] {
         position: relative;
         position: static;
         vertical-align: bottom;
         display: inline-block;
         font-size: 1.2rem;
-        margin-right: 1rem!important;
+        margin-right: 1rem !important;
       }
 
-      i[class*=fa-] + i[class*=fa-] {
+      i[class*='fa-'] + i[class*='fa-'] {
         display: none;
       }
     }
@@ -122,12 +117,9 @@
 }
 
 :host(.bg-primary) .btn {
-  
-
-    &:is(:hover,:focus){
-      color: var(--colour-inverted);
-    }
-  
+  &:is(:hover, :focus) {
+    color: var(--colour-inverted);
+  }
 }
 
 // #region mobile and tablet menu
@@ -137,7 +129,6 @@
   }
 
   .menu__outer {
-    
     position: absolute;
     top: rem(96);
     left: 0;
@@ -148,8 +139,7 @@
     transition: background 0.5s;
 
     &:has(.menu.open) {
-
-      background: rgba(0,0,0,0.2);
+      background: rgba(0, 0, 0, 0.2);
       backdrop-filter: blur(2px);
     }
   }
@@ -157,17 +147,16 @@
   .menu::-webkit-scrollbar {
     width: 6px;
   }
-   
+
   .menu::-webkit-scrollbar-track {
-    border: 0!important;
+    border: 0 !important;
   }
-   
+
   .menu::-webkit-scrollbar-thumb {
-    border: 0!important;
+    border: 0 !important;
   }
 
   .menu {
-
     overscroll-behavior: contain;
     width: calc(#{rem(375)} - var(--scrollbar-width));
     background-color: var(--colour-canvas-2);
@@ -194,20 +183,18 @@
 
     // The menu is always white unless in dark mode
     @include light-mode() {
-      
       background-color: var(--colour-white);
       @include reset-colours();
     }
 
     @media (forced-colors: active) {
-      
       outline: 1px solid white;
     }
 
     &:before {
-      content: "";
+      content: '';
       position: absolute;
-      display: block ;
+      display: block;
       top: 0;
       left: 0;
       width: 100%;
@@ -216,17 +203,17 @@
     }
 
     &.open {
-      left: calc(100% - (#{rem(375)} - var(--scrollbar-width)) );
-      -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);
+      left: calc(100% - (#{rem(375)} - var(--scrollbar-width)));
+      -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);
       pointer-events: all;
     }
 
     &.closed * {
-      display: none!important;
+      display: none !important;
     }
   }
-  
+
   .menu__secondary {
     display: none;
   }
@@ -237,12 +224,12 @@
     margin-right: -1.5rem;
     padding-left: 1.5rem;
     padding-right: 1.5rem;
-    padding-bottom: 3rem!important;
+    padding-bottom: 3rem !important;
     flex-grow: 1;
     position: relative;
 
     @include light-mode() {
-      background-color: #EEEEEE;
+      background-color: #eeeeee;
     }
 
     .container {
@@ -250,60 +237,57 @@
     }
   }
 
-  ::slotted(a:not([slot="logo"]):not(.btn-compact):not(.btn-primary)) {
-    display: block!important;
-    line-height: rem(20)!important;
-    padding: rem(24) 0!important;
-    margin: 0!important;
+  ::slotted(a:not([slot='logo']):not(.btn-compact):not(.btn-primary)) {
+    display: block !important;
+    line-height: rem(20) !important;
+    padding: rem(24) 0 !important;
+    margin: 0 !important;
     flex-shrink: 0;
-    font-size: 1rem!important;
-    font-weight: normal!important;
+    font-size: 1rem !important;
+    font-weight: normal !important;
 
     &:after {
-      content: "";
+      content: '';
       display: block;
       height: 2px;
-      width: 100%!important;
-      background-color: var(--colour-border)!important;  
-      top: calc(100% - 2px)!important;
+      width: 100% !important;
+      background-color: var(--colour-border) !important;
+      top: calc(100% - 2px) !important;
     }
   }
 
-  *:is(.has-search, .has-actions) .menu__primary{
-    
+  *:is(.has-search, .has-actions) .menu__primary {
     display: block;
     padding-bottom: rem(48);
   }
 
-  .menu:not(.has-secondary) .menu__primary{
-    
+  .menu:not(.has-secondary) .menu__primary {
     display: block;
     padding-bottom: rem(48);
   }
 
   ::slotted(.btn:not(.btn-compact):not(.btn-primary)) {
-
-    display: block!important;
-    margin: 0 0 rem(24) 0!important;
-    width: 100%!important;
-    max-width: 100%!important;
-    text-align: center!important;
+    display: block !important;
+    margin: 0 0 rem(24) 0 !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    text-align: center !important;
     flex-shrink: 0;
   }
 
-  .has-actions slot[name="actions"]{
+  .has-actions slot[name='actions'] {
     display: block;
     padding-bottom: rem(24);
   }
 
-  slot[name="actions"]::slotted(.btn){
-    margin-top: 0!important;
+  slot[name='actions']::slotted(.btn) {
+    margin-top: 0 !important;
   }
 
   // Search
   .dialog__wrapper {
     width: 100%;
-    margin: 0 0 rem(48) 0!important;
+    margin: 0 0 rem(48) 0 !important;
     flex-shrink: 0;
   }
   .dialog__wrapper > .btn {
@@ -317,49 +301,45 @@
 
 // #region tablet tweaks
 @media screen and (max-width: 62em) and (min-width: 36em) {
-
   .menu {
-    padding-right: rem(40)!important;
+    padding-right: rem(40) !important;
   }
 
   .has-secondary .menu__secondary {
-
-    margin-right: rem(-40)!important;
-    padding-right: rem(40)!important;
+    margin-right: rem(-40) !important;
+    padding-right: rem(40) !important;
 
     &:before {
-      width: calc(100% - 4rem) !important
+      width: calc(100% - 4rem) !important;
     }
   }
   ::slotted(.btn) {
-
-    width: auto!important;
+    width: auto !important;
   }
 }
 // #endregion
 
 // #region desktop
 @include media-breakpoint-up(md) {
-
   :host {
     //max-width: 100%!important;
-    padding-block: 0!important;
+    padding-block: 0 !important;
   }
 
   :host > .container {
-    padding-block: rem(24)!important;
-    padding-inline: 0!important;
+    padding-block: rem(24) !important;
+    padding-inline: 0 !important;
     max-width: 100%;
     display: flex;
     flex-wrap: nowrap;
     align-items: center;
 
     &:has(.has-secondary) {
-      padding-top: rem(24 + 40)!important;
+      padding-top: rem(24 + 40) !important;
     }
 
     > * {
-      margin-bottom: 0!important;
+      margin-bottom: 0 !important;
     }
   }
 
@@ -386,7 +366,6 @@
   }
 
   .has-secondary .menu__secondary {
-          
     background-color: var(--colour-canvas-2);
     display: block;
     position: absolute;
@@ -394,82 +373,72 @@
     left: 0;
     width: 100%;
 
-    @include light-mode(){
-            
-      background-color: #EEEEEE;
+    @include light-mode() {
+      background-color: #eeeeee;
       @include reset-colours();
     }
 
     @include dark-mode() {
-      
       @include invert-colours();
     }
 
-
     .container {
       margin-left: auto;
       margin-right: auto;
-      padding: var(--container-padding)!important;
-      padding-top: rem(8)!important;
-      padding-bottom: rem(8)!important;
+      padding: var(--container-padding) !important;
+      padding-top: rem(8) !important;
+      padding-bottom: rem(8) !important;
       text-align: right;
     }
   }
 
-  ::slotted(a[slot="secondary"]) {
-    font-size: rem(14)!important;
+  ::slotted(a[slot='secondary']) {
+    font-size: rem(14) !important;
 
     &:after {
-      top: calc(100% - 0.25em)!important;
+      top: calc(100% - 0.25em) !important;
     }
   }
 
-  ::slotted(a:not([slot="logo"])),
+  ::slotted(a:not([slot='logo'])),
   ::slotted(.btn) {
-
-    margin-bottom: 0!important;
-    margin-right: 0!important;
+    margin-bottom: 0 !important;
+    margin-right: 0 !important;
   }
 
-  ::slotted(a:not([slot="logo"]):not(.btn-compact):not(.btn-primary)) {
-
-    font-size: rem(16)!important;
-    font-weight: normal!important;
+  ::slotted(a:not([slot='logo']):not(.btn-compact):not(.btn-primary)) {
+    font-size: rem(16) !important;
+    font-weight: normal !important;
 
     &:after {
       display: none;
     }
   }
 
-  ::slotted(a:not([slot="logo"]):not([slot="dual"])) {
-
-    margin-left: rem(32)!important;
+  ::slotted(a:not([slot='logo']):not([slot='dual'])) {
+    margin-left: rem(32) !important;
   }
 
   ::slotted(.btn-primary) {
-
-    margin-left: rem(48)!important;
+    margin-left: rem(48) !important;
   }
 
-  .has-actions slot[name="actions"]{
+  .has-actions slot[name='actions'] {
     display: block;
     padding-left: rem(48);
   }
 
   // Search bar
-  slot[name="actions"]::slotted(.btn) {
-
-    margin-left: rem(12)!important;
+  slot[name='actions']::slotted(.btn) {
+    margin-left: rem(12) !important;
   }
 
-  :host([data-search]) slot[name="actions"] {
-
-    padding-left: 0!important;
+  :host([data-search]) slot[name='actions'] {
+    padding-left: 0 !important;
   }
-  
+
   #search-wrapper {
-    
-    margin-left: rem(24)!important;
+    margin-left: rem(24) !important;
     position: static;
   }
 
@@ -488,19 +457,16 @@
     box-shadow: none;
 
     .container {
-      
-    padding: var(--container-padding);
-    padding-bottom: 0;
+      padding: var(--container-padding);
+      padding-bottom: 0;
     }
   }
 
   :host(.search-open) {
-
-    background: #E6EAEC!important;
+    background: #e6eaec !important;
 
     @include dark-mode() {
-      
-      background: var(--colour-canvas-2)!important;
+      background: var(--colour-canvas-2) !important;
     }
 
     .buttons-holder,
@@ -510,12 +476,11 @@
   }
 
   :host(.search-open.bg-primary) {
-
-    background: var(--colour-primary)!important;
+    background: var(--colour-primary) !important;
 
     .suffix,
     #search {
-      border: 2px solid #B3C1C5;
+      border: 2px solid #b3c1c5;
       color: white;
     }
     #search {
@@ -525,8 +490,7 @@
 
   // backdrop
   .backdrop {
-
-    content: "";
+    content: '';
     display: block;
     position: absolute;
     top: 100%;
@@ -538,9 +502,8 @@
     transition: background 0.5s;
 
     &.show {
-        
       pointer-events: all;
-      background: rgba(0,0,0,0.2);
+      background: rgba(0, 0, 0, 0.2);
       backdrop-filter: blur(2px);
     }
   }
@@ -576,18 +539,16 @@
 
   // The menu is always white unless in dark mode
   @include light-mode() {
-    
     background-color: var(--colour-white);
     @include reset-colours();
   }
 
   @media (forced-colors: active) {
-    
     outline: 1px solid white;
   }
 
   &:before {
-    display: block ;
+    display: block;
     width: calc(100% + 3rem);
     border-top: 2px solid var(--colour-border);
     z-index: 1;
@@ -598,63 +559,56 @@
     font-weight: $headings-font-weight;
     color: $headings-color;
     clear: both;
-    font-size: rem(map-get($heading-sizes,"h3_fs"));
-    line-height: rem(map-get($heading-sizes,"h3_lh"));
+    font-size: rem(map-get($heading-sizes, 'h3_fs'));
+    line-height: rem(map-get($heading-sizes, 'h3_lh'));
     max-width: var(--content-max-width);
-  
+
     @include media-breakpoint-up(sm) {
-  
-      font-size: rem(map-get($heading-sizes,"h3_fs_sm"));
-      line-height: rem(map-get($heading-sizes,"h3_lh_sm"));
+      font-size: rem(map-get($heading-sizes, 'h3_fs_sm'));
+      line-height: rem(map-get($heading-sizes, 'h3_lh_sm'));
       margin-right: -2.5rem;
       padding-right: 2.5rem;
       width: calc(100% + 4rem);
     }
   }
 
-
   @include media-breakpoint-up(sm) {
-
     padding-right: 2.5rem !important;
   }
 
   @include media-breakpoint-up(md) {
-  
     height: calc(100vh - var(--nav-height));
     top: var(--nav-height);
   }
 }
 
-slot[name="menus"]{
-
+slot[name='menus'] {
   position: absolute;
   top: 0;
   right: 0;
-display: block;
+  display: block;
   height: 100vh;
-overflow: hidden;
-pointer-events: none;
+  overflow: hidden;
+  pointer-events: none;
   width: calc(#{rem(375)} - var(--scrollbar-width));
 }
 
-::slotted(.nav--menu[data-open-title]){
-
+::slotted(.nav--menu[data-open-title]) {
   &:before {
     content: attr(data-open-title);
   }
 }
 
 ::slotted(.nav--menu.open) {
-  left: calc(100% - (#{rem(375)} - var(--scrollbar-width)) );
-  -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);
+  left: calc(100% - (#{rem(375)} - var(--scrollbar-width)));
+  -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);
   pointer-events: all;
 }
 
 @media screen and (max-width: 62em) {
   :host(.open) .menu__outer {
-    
-    background: rgba(0,0,0,0.2);
+    background: rgba(0, 0, 0, 0.2);
     backdrop-filter: blur(2px);
   }
 }
@@ -663,10 +617,10 @@ pointer-events: none;
 // #region compressed nav
 @include media-breakpoint-up(md) {
   :host(.nav--md-compressed) .buttons-holder button {
-    margin-left: 1.5rem!important;
+    margin-left: 1.5rem !important;
   }
 
-  :host(.nav--md-compressed) .btn-menu .btn i[class*=fa-] {
+  :host(.nav--md-compressed) .btn-menu .btn i[class*='fa-'] {
     margin-right: 0.5rem !important;
     margin-left: -0.5rem !important;
   }
@@ -675,21 +629,20 @@ pointer-events: none;
     --btn-padding-inline: 2.5rem;
   }
 
-  :host(.nav--md-compressed) ::slotted(a:not([slot=logo]):not([slot=secondary])){
-    margin-left: 1.5rem!important;
+  :host(.nav--md-compressed) ::slotted(a:not([slot='logo']):not([slot='secondary'])) {
+    margin-left: 1.5rem !important;
   }
 }
 // #endregion
 
-
 // #region Compact button
 @media screen and (min-width: 62em) {
   :host(.nav--btn-compact:not(.nav--large)) {
     .btn-menu .btn {
-      padding: 0.5rem!important;
+      padding: 0.5rem !important;
 
       i {
-        margin-right: 0!important;
+        margin-right: 0 !important;
       }
       span {
         display: none;
@@ -701,10 +654,10 @@ pointer-events: none;
 @media screen and (min-width: 62em) and (max-width: 90em) {
   :host(.nav--btn-compact.nav--large) {
     .btn-menu .btn {
-      padding: 0.5rem!important;
+      padding: 0.5rem !important;
 
       i {
-        margin-right: 0!important;
+        margin-right: 0 !important;
       }
       span {
         display: none;
@@ -717,7 +670,7 @@ pointer-events: none;
 // #region Dual with buttons
 @media screen and (max-width: 62em) {
   :host(.nav--dual-buttons) {
-    slot[name="dual"] {
+    slot[name='dual'] {
       padding-block: 1.5rem;
       display: block;
     }
@@ -726,11 +679,11 @@ pointer-events: none;
 
 @include media-breakpoint-up(md) {
   :host(.nav--dual-buttons) {
-    slot[name="dual"] {
+    slot[name='dual'] {
       display: flex;
       margin-left: auto;
       flex-direction: row-reverse;
     }
   }
 }
-// #endregion
+// #endregion