@iamproperty/components 7.7.1--beta14 → 7.7.1--beta16

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

@@ -0,0 +1,228 @@
+@use '../_func' as *;
+
+
+@use '../elements/type';
+@use '../elements/links';
+@use '../elements/buttons';
+@use '../elements/details';
+@use '../elements/dropdown';
+
+@use '../elements/container';
+
+@use '../components/nav.global';
+
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+:host {
+  grid-column: full-width !important;
+  display: block;
+  width: 100%;
+  z-index: 999999;
+  position: relative;
+}
+
+.wrapper {
+  display: contents;
+
+  &:has(.container){
+
+    display: block;
+    background: var(--colour-light);
+  }
+}
+
+.container {
+  //display: contents;
+  position: relative;
+
+  z-index: 9999;
+      z-index: 999999;
+
+    padding-bottom: 0;
+
+  > details {
+
+    padding-bottom: 0;
+
+    > summary {
+      text-align: end;
+      line-height: 2rem;
+    }
+  }
+}
+
+@media screen and (max-width: 62em) {
+  .iam-nav {
+    background-color: transparent;
+    padding: 0;
+  }
+  
+  .iam-nav a {
+      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;
+  }
+
+  .iam-nav a:after {
+    content: "";
+    display: block;
+    height: 2px;
+    width: 100% !important;
+    background-color: var(--colour-border) !important;
+    top: calc(100% - 2px) !important;
+  }
+}
+
+@media screen and (min-width: 62em) {
+
+  .container {
+    background: var(--colour-light);
+
+    > details {
+
+      display: block;
+
+      &::details-content {
+        
+        display: block;
+        content-visibility: visible;
+      }
+
+      summary {
+        display: none;
+      }
+    }
+  }
+
+  .iam-nav {
+    padding: 0;
+    text-align: right;
+    background: var(--colour-light);
+    padding-top: .5rem !important;
+    padding-bottom: .5rem !important;
+  }
+  .iam-nav > details{
+    display: inline-block;
+    position: relative;
+    width: auto;
+
+    summary {
+      display: inline-block;
+      margin-left: 1.5rem;
+      margin-bottom: 0!important;
+
+      &:after {
+        display: none;
+      }
+    }
+
+    div {
+      text-align: left;
+
+      a {
+        white-space: nowrap;
+        text-decoration: none;
+
+        font-size: 1rem !important;
+        line-height: 1.5rem !important;
+        margin: 0;
+        padding: var(--option-padding) !important;
+
+      }
+
+      .lead {
+        --colour-heading: var(--colour-body);
+        font-size: 0.87rem !important;
+        line-height: 1.5rem !important;
+        margin: 0;
+        padding: var(--option-padding) !important;
+      }
+      a:after {
+        width: 0;
+      }
+
+      .section + .section {
+        border-top: 1px solid var(--colour-border);
+        display: block;
+        padding-top: 0.5rem;
+        margin-top: 0.5rem;
+      }
+    }
+    
+  }
+
+  .iam-nav > details::details-content {
+    display: none;
+  }
+
+  .iam-nav > details[open]::details-content {
+    display: block;
+    background: var(--dropdown-bg);
+    margin-block: var(--dropdown-margin-block);
+    padding: var(--dropdown-padding);
+    border-radius: var(--dropdown-border-radius);
+    box-shadow: var(--dropdown-box-shadow);
+
+    position: absolute;
+    top: calc(100% + 0.5rem);
+    left: 1.5rem;
+  }
+
+  .iam-nav > a {
+    font-size: 0.875rem !important;
+    margin-bottom: 0;
+
+    &:after {
+      top: calc(100% - 0.25em) !important;
+    }
+  }
+
+
+  .iam-nav > a {
+    font-size: 1rem !important;
+    font-weight: normal !important;
+
+    &:after {
+      display: none;
+    }
+  }
+
+  .iam-nav > a {
+    margin-left: 2rem !important;
+    margin-right: 0rem !important;
+  }
+
+}
+
+
+@media screen and (min-width: 62em) {
+    .backdrop {
+        content: "";
+        display: block;
+        position: absolute;
+        top: 100%;
+        left: 0;
+        height: calc(100vh - var(--nav-height));
+        width: 100%;
+        z-index: -1;
+        pointer-events: none;
+        transition: background .5s;
+    }
+}
+
+@media screen and (min-width: 62em) {
+  .wrapper:has([name="megamenu"][open]) + .backdrop {
+      pointer-events: all;
+      background: rgba(0, 0, 0, .2);
+      backdrop-filter: blur(2px);
+  }
+}

package/assets/sass/components/table-basic.global.scss

@@ -91,7 +91,7 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, i
 
         &:before {
           --fa: '\f055'!important;
-          font-family: 'Font Awesome 7 Pro';
+          font-family: var(--fa-family-classic);
           display: block!important;
 
           font-weight: 300 !important;
@@ -284,7 +284,7 @@ table {
     }
 
     &:after {
-      font-family: 'Font Awesome 7 Pro';
+      font-family: var(--fa-family-classic);
       position: absolute;
       top: var(--status-pt, 1rem);
       left: 0;
@@ -617,7 +617,7 @@ table {
     }
     tr[data-highlight]:before {
 
-      font-family: 'Font Awesome 7 Pro';
+      font-family: var(--fa-family-classic);
       content: '\f005';
       font-weight: bold;
       position: absolute;

package/assets/sass/components/table.global.scss

@@ -200,7 +200,7 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, i
       }
 
       &:before {
-        font-family: 'Font Awesome 7 Pro';
+        font-family: var(--fa-family-classic);
         content: '\f078';
         font-weight: 500;
       }

package/assets/sass/components/tabs.config.scss

@@ -166,7 +166,7 @@ iam-tabs.tabs--guided::part(next-button):not(:hover) {
 
     &:is([aria-pressed='true'], .current) {
       pointer-events: none;
-      outline: var(--contrast-outline-width, 0px) solid var(--colour-primary-theme) !important;
+      //outline: var(--contrast-outline-width, 0px) solid var(--colour-primary-theme) !important;
     }
   }
 }
@@ -194,7 +194,7 @@ iam-tabs.tabs--guided::part(next-button):not(:hover) {
   flex-direction: column;
   border-bottom: 1px solid var(--colour-border);
   overflow: hidden;
-  outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
+  //outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
 
   &:after {
     display: none;

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

@@ -15,7 +15,7 @@
     cursor: pointer;
 
     &:before {
-      font-family: 'Font Awesome 7 Pro';
+      font-family: var(--fa-family-classic);
       content: '\f3f4';
       position: absolute;
       font-weight: 900;

package/assets/sass/elements/badge-tag.css

@@ -82,14 +82,18 @@
       background: #eeeeee;
     }
 
+    &:has(:hover, :focus) {
+      background: #eeeeee!important;
+    }
+
     &:is(:active) {
       background: #e0e0e0;
     }
 
     &:has(input:checked),
     &.selected {
-      background: #e9f9fd;
-      outline: 1px solid #1ebee6;
+      background: #e9f9fd!important;
+      outline: 1px solid #1ebee6!important;
     }
   }
 

package/assets/sass/elements/buttons--global.css

@@ -132,7 +132,7 @@
 
     &:before {
       content: '\f00c';
-      font-family: 'Font Awesome 7 Pro';
+      font-family: var(--fa-family-classic);
       margin-right: 1rem;
       font-style: inherit;
       width: 1rem;
@@ -156,7 +156,7 @@
   .btn {
     &[class*='fa-']:before {
       content: var(--fa);
-      font-family: 'Font Awesome 7 Pro';
+      font-family: var(--fa-family-classic);
     }
 
     &[class*='fa-after'] {
@@ -177,7 +177,7 @@
 
     i[class*='fa-'] {
       --fa-width: 1em;
-      font-family: 'Font Awesome 7 Pro';
+      font-family: var(--fa-family-classic);
       margin-right: 1rem;
       line-height: 1em;
       font-style: inherit;
@@ -232,7 +232,7 @@
       z-index: var(--index-focus);
       color: currentColor;
       font-weight: 300;
-      font-family: 'Font Awesome 7 Pro';
+      font-family: var(--fa-family-classic);
     }
   }
   /* #endregion */

package/assets/sass/elements/buttons--special.css

@@ -9,7 +9,7 @@
       display: none;
     }
 
-    &:not(:has(i)):after {
+    &:not(:has(i)):not(.no-icon):after {
       content: '';
 
       display: inline-block;
@@ -48,6 +48,7 @@
     width: fit-content;
 
     select {
+      
       all: unset !important;
       padding: var(--btn-padding-block) var(--btn-padding-inline) !important;
       padding-right: calc(var(--btn-padding-inline) + 2rem)!important;
@@ -64,60 +65,8 @@
       field-sizing: content!important;
 
       appearance: base-select!important;
-
-      option {
-        font-size: 1rem;
-        text-align: left;
-        color: var(--colour-primary);
-        padding-inline: var(--menu-item-padding, 0.5rem);
-        padding-block: var(--menu-item-padding, 0.5rem) !important;
-
-        border-radius: .25rem !important;
-        &:not(:last-child){
-          margin: var(--menu-item-margin, 0 0 0.25rem 0) !important;
-        }
-        
-        &:hover {
-          background: var(--colour-light) !important;
-        }
-
-        &:after {
-          content: attr(data-email);
-        }
-      }
-    }
-
-    select::picker-icon {
-      display: none;
-    }
-
-    select::picker(select) {
-      appearance: base-select;
-      background: var(--menu-bg, canvas);
-      margin-block: var(--menu-margin, 0.25rem);
-      padding: var(--menu-padding, 0.5rem)!important;
-      border: none !important;
-      border-radius: 0.5rem;
-      box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.1);
-      font-size: 1rem;
-    }
-
-    hr {
-      height: 1px !important;
-      background-color: var(--menu-hr-border-color, var(--border-color, grey)) !important;
-      width: 100%;
-      margin: var(--menu-item-margin, 0 0 0.25rem 0) !important;
-      padding: 0 !important;
-    }
-
-    select option::checkmark {
-      display: none;
     }
     
-    select selectedcontent span {
-      display: none;
-    }
-
     &:after {
       position: absolute;
       top: 0.625rem; /* 10 */

package/assets/sass/elements/container.scss

@@ -28,7 +28,7 @@
         col-9-start] 1fr [col-9-end
         col-10-start] 1fr [col-10-end
         col-11-start] 1fr [col-11-end
-        col-12-start] 1fr [col-12-end content-end];
+        col-12-start] 1fr [col-12-end content-end]!important;
       column-gap: 1rem;
     }
 

package/assets/sass/elements/details.css

@@ -19,7 +19,7 @@
         margin-left: 0.5em;
         line-height: 1em;
         font-size: 1em;
-        font-family: 'Font Awesome 7 Pro';
+        font-family: var(--fa-family-classic);
       }
     }
 
@@ -76,7 +76,7 @@
           height: 1.5rem;
           line-height: 1.5rem;
           font-weight: 300;
-          font-family: 'Font Awesome 7 Pro';
+          font-family: var(--fa-family-classic);
         }
       }
 
@@ -131,7 +131,7 @@
         margin: 0;
         line-height: 1.5rem;
         font-weight: 300;
-        font-family: 'Font Awesome 7 Pro';
+        font-family: var(--fa-family-classic);
       }
 
 

package/assets/sass/elements/dialog.scss

@@ -7,7 +7,7 @@
   /* #region Default styling of both modals */
   dialog,
   [popover] {
-    --dialog-padding: 1.5rem;
+    --dialog-padding: 0.5rem;
 
     --mh-padding-inline: var(--dialog-padding);
     color: inherit;
@@ -15,12 +15,16 @@
     height: fit-content;
     border: none;
     overscroll-behavior: contain;
-    background: var(--colour-canvas-2);
-    box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.11);
-    border-radius: 0.625rem; /* 10 */
-    padding: var(--dialog-padding);
     outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
 
+    font-size: 1rem;
+    background: var(--dropdown-bg);
+    margin-block: var(--dropdown-margin-block);
+    padding: var(--dialog-padding);
+    border-radius: var(--dropdown-border-radius);
+    box-shadow: var(--dropdown-box-shadow);
+
+
     > *:last-child {
       margin-bottom: 0;
     }