@iamproperty/components 3.9.0-beta-1 → 4.0.1

package/assets/sass/components/dialog.scss

@@ -24,13 +24,11 @@ dialog[open] {
   display: flex;
   flex-direction: column;
 
-  > *:last-child,
-  > .mh-lg > *:last-child{
+  > *:last-child {
     margin-bottom: 0;
   }
   
-  > :is(p):last-child,
-  > .mh-lg > :is(p):last-child {
+  > :is(p):last-child {
     padding-bottom: 0;
   }
 }
@@ -161,13 +159,13 @@ dialog[open] {
     padding-right: calc(var(--dialog-padding) - 10px);
     margin-right: calc((var(--dialog-padding) * -1) + 10px);
     margin-bottom: calc(var(--dialog-padding) * -1);
-    padding-bottom: var(--dialog-padding);
-    //max-height: none!important;
 
-    &:before {
-      top: 100%;
-      height: var(--dialog-padding);
-      margin-bottom: -2rem;
+    > *:last-child {
+      margin-bottom: 2rem!important;
+    }
+
+    > p:last-child {
+      padding-bottom: 0!important;
     }
   }
 }
@@ -279,10 +277,11 @@ dialog::backdrop {
     top: calc(var(--dialog-padding) * 4);
   }
 
+  @supports selector(:has(*)) {
   fieldset:not(.active) {
     display: none;
   }
-
+  }
   &:not(:has(fieldset.active)) fieldset:first-of-type{
     display: flex;
     flex-direction: column;
@@ -374,7 +373,7 @@ dialog::backdrop {
       }
     }
 
-    @media screen and (prefers-color-scheme: dark) {
+    @include dark-mode() {
 
       button {
         
@@ -440,36 +439,55 @@ dialog::backdrop {
       margin-top: auto;
       text-align: right;
     }
-    > form {
-      display: contents
-    }
-    fieldset {    
-      display: flex; 
-      flex-direction: column;
-      flex-grow: 1;
-      position: relative;
+    
+    
+    @supports not selector(:has(*)) {
+      > form {
+        overflow: auto;
 
-      overflow: auto;
-      margin-bottom: calc(var(--dialog-padding) * -1);
-      padding-bottom: var(--dialog-padding);
+        button:not([type="submit"]){
+          display: none;
+        }
+      }
+    }
+    @supports selector(:has(*)) {
+      > form {
+        display: contents
+      }
+      fieldset {    
+        display: flex; 
+        flex-direction: column;
+        flex-grow: 1;
+        position: relative;
+
+        overflow: auto;
+        margin-bottom: calc(var(--dialog-padding) * -1);
+        padding-right: calc(var(--dialog-padding) - 10px);
+        margin-right: calc((var(--dialog-padding) * -1) + 10px);
+
+        > :last-child {
+          margin-bottom: var(--dialog-padding)!important;
+        }
 
-        
-      padding-right: calc(var(--dialog-padding) - 10px);
-      margin-right: calc((var(--dialog-padding) * -1) + 10px);
+        > p:last-child {
+          padding-bottom: 0!important;
+          margin-bottom: var(--dialog-padding)!important;
+        }
 
-      &::before {
-        content: "";
-        top: 100%;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        height: var(--dialog-padding);
-        min-height: var(--dialog-padding);
-        position: sticky;
-        display: block;
-        background: linear-gradient(180deg, transparent 0%, var(--colour-canvas-2) 100%);
-        z-index: 2;
-        margin-bottom: calc(var(--dialog-padding) * -1);;
+        &::before {
+          content: "";
+          top: 100%;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          height: var(--dialog-padding);
+          min-height: var(--dialog-padding);
+          position: sticky;
+          display: block;
+          background: linear-gradient(180deg, transparent 0%, var(--colour-canvas-2) 100%);
+          z-index: 2;
+          margin-bottom: calc(var(--dialog-padding) * -1);;
+        }
       }
     }
   }
@@ -561,36 +579,19 @@ dialog::backdrop {
       width: rem(360);
     }
 
-
     &.dialog--list {
       
       width: fit-content!important;
+
+      @include media-breakpoint-up(sm) {
+        width: max-content!important;
+      }
+
       min-width: rem(140)!important;
       max-width: rem(280)!important;
       padding: rem(16);
       margin: 0;
 
-      .btn-action {
-        border: none;
-        padding: 0;
-        margin: 0;
-        padding-block: rem(6);
-        line-height: rem(20);
-        background: none;
-        white-space: inherit;
-        max-width: 100%;
-        min-width: 100%;
-
-        &:before {
-          min-width: rem(20);
-          display: inline-block;
-        }
-
-        &::after {
-          float: right;
-        }
-      }
-
       hr {
         height: 2px;
         background: var(--colour-border);

package/assets/sass/components/fileupload.scss

@@ -53,7 +53,7 @@
 
 
     
-    @media screen and (prefers-color-scheme: dark) {
+    @include dark-mode() {
 
       background: var(--colour-canvas-2);
       border-color: var(--colour-canvas-2);

package/assets/sass/components/forms.scss

@@ -16,7 +16,7 @@ label {
 // #endregion
 
 // #region input field
-:is(input,textarea,output,select) {
+:is(input:not([type="checkbox"]):not([type="radio"]),textarea,output,select) {
   display: block;
   width: 100%;
   max-width: $content-max-width;
@@ -108,7 +108,7 @@ div:has(> label:first-child):has(> input) {
     text-align: center;
   }
 
-  input, output, .prefix, .suffix {
+  input:not([type="checkbox"]):not([type="radio"]), output, .prefix, .suffix {
     margin-bottom: 0;
   }
 
@@ -116,12 +116,12 @@ div:has(> label:first-child):has(> input) {
   flex-wrap: wrap;
   align-items: center;
 
-  > *:not(input):not(output):not(.prefix):not(.suffix) {
+  > *:not(input:not([type="checkbox"]):not([type="radio"])):not(output):not(.prefix):not(.suffix) {
     flex-shrink: 0;
     width: 100%;
   }
 
-  :is(input,textarea,output) {
+  :is(input:not([type="checkbox"]):not([type="radio"]),textarea,output) {
     flex-shrink: 1;
     flex-grow: 1;
     width: 0;
@@ -133,9 +133,9 @@ div:has(> label:first-child):has(> input) {
   }
 
   input[type="color"]{
-    width: 3rem;
-    flex-shrink: 0;
-    flex-grow: 0;
+    width: 3rem!important;
+    flex-shrink: 0!important;
+    flex-grow: 0!important;
     border-start-end-radius: 0;
     border-end-end-radius: 0;
     padding: 0;
@@ -156,9 +156,10 @@ div:has(> label:first-child):has(> input) {
   }
 
   output {
-    border-left: none;
-    border-end-start-radius: 0;
-    border-start-start-radius: 0;
+    border-left: none!important;
+    border-end-start-radius: 0!important;
+    border-start-start-radius: 0!important;
+    margin: 0!important;
   }
 }
 
@@ -192,111 +193,117 @@ div:has(> label:first-child):has(> input):has(> :is(.form-control-inline,.input-
 
 // #region prefix
 :is(.prefix, .suffix) {
-  display: inline-block;
-  width: auto;
-  padding: var(--input-padding-block, #{rem(12)}) var(--input-padding-block, #{rem(16)});
-  font-size: var(--input-fs, #{rem(16)});
-  line-height: var(--input-lh, #{rem(20)});
-  color: var(--colour-body);
-  background-color: var(--colour-primary-theme);
-  border: 2px solid var(--colour-primary);
-  color: var(--colour-white);
-  margin-bottom: 1rem;
-  border-end-start-radius: rem(8);
-  border-start-start-radius: rem(8);
-  min-width: calc(#{rem(20 + 12 + 12)} + 4px);
-  overflow: hidden;
-  white-space: nowrap;
-  text-align: center;
-  text-overflow: ellipsis;
-  position: relative;
-  
-  min-height: calc(var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) + var(--input-lh, #{rem(20)}) + 4px);
-  max-height: calc(var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) + var(--input-lh, #{rem(20)}) + 4px);
-
+  display: none;
+}
+@supports selector(:has(*)) {
 
-  &:after {
+  :is(.prefix, .suffix) {
     display: inline-block;
-    max-width: rem(20);
-  }
+    width: auto;
+    padding: var(--input-padding-block, #{rem(12)}) var(--input-padding-block, #{rem(16)});
+    font-size: var(--input-fs, #{rem(16)});
+    line-height: var(--input-lh, #{rem(20)});
+    color: var(--colour-body);
+    background-color: var(--colour-primary-theme);
+    border: 2px solid var(--colour-primary);
+    color: var(--colour-white);
+    margin-bottom: 1rem;
+    border-end-start-radius: rem(8);
+    border-start-start-radius: rem(8);
+    min-width: calc(#{rem(20 + 12 + 12)} + 4px);
+    overflow: hidden;
+    white-space: nowrap;
+    text-align: center;
+    text-overflow: ellipsis;
+    position: relative;
+    
+    min-height: calc(var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) + var(--input-lh, #{rem(20)}) + 4px);
+    max-height: calc(var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) + var(--input-lh, #{rem(20)}) + 4px);
 
-  &[class*="fa-"] {
-    width: calc(#{rem(20 + 12 + 12)} + 4px);
-    padding-inline: 0;
-  }
 
-  select {
-    position: absolute;
-    inset: 0;
-    opacity: 0;
-    cursor: pointer;
-  }
+    &:after {
+      display: inline-block;
+      max-width: rem(20);
+    }
 
-  span {
-    display: none;
-  }
+    &[class*="fa-"] {
+      width: calc(#{rem(20 + 12 + 12)} + 4px);
+      padding-inline: 0;
+    }
 
-  select:has(option:nth-child(1):checked) ~ span:nth-of-type(1),
-  select:has(option:nth-child(2):checked) ~ span:nth-of-type(2),
-  select:has(option:nth-child(3):checked) ~ span:nth-of-type(3),
-  select:has(option:nth-child(4):checked) ~ span:nth-of-type(4),
-  select:has(option:nth-child(5):checked) ~ span:nth-of-type(5),
-  select:has(option:nth-child(6):checked) ~ span:nth-of-type(6),
-  select:has(option:nth-child(7):checked) ~ span:nth-of-type(7),
-  select:has(option:nth-child(8):checked) ~ span:nth-of-type(8),
-  select:has(option:nth-child(9):checked) ~ span:nth-of-type(9),
-  select:has(option:nth-child(10):checked) ~ span:nth-of-type(10) {
+    select {
+      position: absolute;
+      inset: 0;
+      opacity: 0;
+      cursor: pointer;
+    }
 
-    display: block;
-  }
+    span {
+      display: none;
+    }
 
-  select ~ span:after {
-    content: " \f078";
-    font-family: "Font Awesome 6 Pro";
-    font-size: 0.8em;
-    display: inline-block;
-    padding-left: 1em;
-  }
+    select:has(option:nth-child(1):checked) ~ span:nth-of-type(1),
+    select:has(option:nth-child(2):checked) ~ span:nth-of-type(2),
+    select:has(option:nth-child(3):checked) ~ span:nth-of-type(3),
+    select:has(option:nth-child(4):checked) ~ span:nth-of-type(4),
+    select:has(option:nth-child(5):checked) ~ span:nth-of-type(5),
+    select:has(option:nth-child(6):checked) ~ span:nth-of-type(6),
+    select:has(option:nth-child(7):checked) ~ span:nth-of-type(7),
+    select:has(option:nth-child(8):checked) ~ span:nth-of-type(8),
+    select:has(option:nth-child(9):checked) ~ span:nth-of-type(9),
+    select:has(option:nth-child(10):checked) ~ span:nth-of-type(10) {
+
+      display: block;
+    }
+
+    select ~ span:after {
+      content: " \f078";
+      font-family: "Font Awesome 6 Pro";
+      font-size: 0.8em;
+      display: inline-block;
+      padding-left: 1em;
+    }
 
-  select:focus-visible ~ span:after {
-    content: "\f077";
+    select:focus-visible ~ span:after {
+      content: "\f077";
+    }
   }
-}
 
-.prefix {
-  
-  border-right: none;
-}
+  .prefix {
+    
+    border-right: none;
+  }
 
-.suffix {
-  
-  border-left: none;
-  border-end-start-radius: 0;
-  border-start-start-radius: 0;
-  border-start-end-radius: rem(8)!important;
-  border-end-end-radius: rem(8)!important;
-  order: 2;
-}
+  .suffix {
+    
+    border-left: none;
+    border-end-start-radius: 0;
+    border-start-start-radius: 0;
+    border-start-end-radius: rem(8)!important;
+    border-end-end-radius: rem(8)!important;
+    order: 2;
+  }
 
-.prefix span {
-  display: none;
+  .prefix span {
+    display: none;
 
-  small {
-    font-size: 0.8em;
+    small {
+      font-size: 0.8em;
+    }
   }
-}
 
-.prefix ~ :is(input,textarea,output) {
-  
-  border-end-start-radius: 0;
-  border-start-start-radius: 0;
-}
+  .prefix ~ :is(input:not([type="checkbox"]):not([type="radio"]),textarea,output) {
+    
+    border-end-start-radius: 0!important;
+    border-start-start-radius: 0!important;
+  }
 
-.suffix ~ :is(input,textarea,output) {
-  order: 1;
-  
-  border-start-end-radius: 0;
-  border-end-end-radius: 0;
+  .suffix ~ :is(input:not([type="checkbox"]):not([type="radio"]),textarea,output) {
+    order: 1;
+    
+    border-start-end-radius: 0!important;
+    border-end-end-radius: 0!important;
+  }
 }
 // #endregion
 
@@ -379,6 +386,8 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
 // #endregion
 
 // #region radio/checkbox field 
+@supports selector(:has(*)) {
+
 input:is([type="radio"],[type="checkbox"]) {
   position: absolute;
   top: 0;
@@ -392,8 +401,7 @@ input:is([type="radio"],[type="checkbox"]) {
 
 :is(div,fieldset):has(> input:is([type="radio"],[type="checkbox"])) {
   position: relative;
-
-  padding-bottom: rem(24);
+  margin-bottom: rem(24);
 }
 
 :is(div,fieldset):has( > input[type="radio"]){
@@ -433,7 +441,7 @@ input:is([type="radio"],[type="checkbox"]) + label:not(:has(> iam-card)) {
   
   &:last-child {
     
-    margin-bottom: rem(24);
+    margin-bottom: 0;
   }
 
   &:before {
@@ -497,7 +505,7 @@ input[type="radio"] + label:not(:has(> iam-card)) {
 }
 
 div:has(> :is(input[type="radio"],input[type="checkbox"]):nth-of-type(2)) {
-  label:not(:has(> iam-card)):not(:last-of-type) {
+  label:not(:has(> iam-card)) {
     margin-bottom: 0rem;
   }
 }
@@ -629,6 +637,8 @@ input[type="checkbox"][disabled]:checked + label {
     border-color: #E0E0E0!important;
   }
 }
+
+}
 // #endregion
 
 // #region Conditional reveal

package/assets/sass/components/nav-global.scss

@@ -4,6 +4,23 @@
 body:has(iam-nav.open:not(.nav--sticky):not(.nav--xs-sticky)) {
   max-height: 100vh;
   overflow: hidden;
+
+}
+
+body {
+  
+  --nav-height: #{rem(96)};
+  --sticky-padding: 0px;
+
+  &:has(iam-nav a[slot="secondary"]){
+    
+    --nav-height: #{rem(96 + 40)};
+  }
+
+  &:has(iam-nav.nav--sticky) {
+    
+    --sticky-padding: var(--nav-height);
+  }
 }
 
 // #region Create the correct padding top of the page
@@ -99,7 +116,7 @@ iam-nav {
     text-decoration: none;
   }
 
-  a:not([slot="logo"]):not(:has(iam-card)) {
+  a:not([slot="logo"]):not(.btn):not(:has(iam-card)) {
     
     text-decoration: none;
 
@@ -154,7 +171,7 @@ iam-nav details {
 
     background-color: var(--colour-canvas);
     
-    @media screen and (prefers-color-scheme: light) {
+    @include light-mode() {
       background-color: #EEEEEE;
     }
 
@@ -169,9 +186,9 @@ iam-nav details {
       background-color: var(--colour-white);
 
             
-      @media screen and (prefers-color-scheme: dark) {
+      @include dark-mode() {
         
-      background-color: var(--colour-canvas-2);
+        background-color: var(--colour-canvas-2);
       }
       display:block;
       border: none;
@@ -367,11 +384,11 @@ iam-nav details {
       box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
 
       
-      @media screen and (prefers-color-scheme: light) {
+      @include light-mode() {
         background: var(--colour-white);
         @include reset-colours();
       }
-      @media screen and (prefers-color-scheme: dark) {
+      @include dark-mode() {
 
         @include invert-colours();
       }
@@ -382,7 +399,7 @@ iam-nav details {
       
       background: var(--colour-canvas-2);
       
-      @media screen and (prefers-color-scheme: light) {
+      @include light-mode() {
         background: #EEEEEE;
       }
       a {
@@ -415,7 +432,7 @@ iam-nav details {
     &[open] > div:not(:has(details)) {
       background: var(--colour-canvas);
 
-      @media screen and (prefers-color-scheme: light) {
+      @include light-mode() {
         background: var(--colour-white);
         --colour-canvas-2: white;
       }
@@ -478,7 +495,7 @@ iam-nav details {
       }
     }
 
-    a:not([slot="logo"]):not(:has(iam-card)) {
+    a:not([slot="logo"]):not(.btn):not(:has(iam-card)) {
 
       font-size: 1rem;
       line-height: rem(24);

package/assets/sass/components/nav.scss

@@ -98,7 +98,7 @@
     }
 
     .btn {
-      @media screen and (prefers-color-scheme: light) {
+      @include light-mode() {
     
         @include reset-colours();
 
@@ -188,13 +188,13 @@
       flex-shrink: 0;
     }
 
-    @media screen and (prefers-color-scheme: dark) {
+    @include dark-mode() {
       --colour-link: var(--colour-white);
       @include invert-colours();
     }
 
     // The menu is always white unless in dark mode
-    @media screen and (prefers-color-scheme: light) {
+    @include light-mode() {
       
       background-color: var(--colour-white);
       @include reset-colours();
@@ -242,7 +242,7 @@
     flex-grow: 1;
     position: relative;
 
-    @media screen and (prefers-color-scheme: light) {
+    @include light-mode() {
       background-color: #EEEEEE;
     }
 
@@ -393,14 +393,13 @@
     left: 0;
     width: 100%;
 
-    @media screen and (prefers-color-scheme: light) {
+    @include light-mode(){
             
       background-color: #EEEEEE;
       @include reset-colours();
     }
 
-    @media screen and (prefers-color-scheme: dark) {
-            
+    @include dark-mode() {
       
       @include invert-colours();
     }
@@ -494,7 +493,7 @@
 
     background: #E6EAEC!important;
 
-    @media screen and (prefers-color-scheme: dark) {
+    @include dark-mode() {
       
       background: var(--colour-canvas-2)!important;
     }
@@ -564,13 +563,13 @@
     flex-shrink: 0;
   }
 
-  @media screen and (prefers-color-scheme: dark) {
+  @include dark-mode() {
     --colour-link: var(--colour-white);
     @include invert-colours();
   }
 
   // The menu is always white unless in dark mode
-  @media screen and (prefers-color-scheme: light) {
+  @include light-mode() {
     
     background-color: var(--colour-white);
     @include reset-colours();

package/assets/sass/components/notification.scss

@@ -90,7 +90,7 @@
   display: flex;
   flex-wrap: nowrap;
 
-  @media screen and (prefers-color-scheme: light) {
+  @include light-mode() {
     color: var(--colour-heading);
   }