@iamproperty/components 5.1.0-beta → 5.1.0-beta10

package/assets/sass/components/header.scss

@@ -3,77 +3,75 @@
 :host{
   padding-top: 0!important;
   margin-bottom: rem(32);
+  background-color: transparent!important;
 }
 
 .header-banner {
-  background: linear-gradient(180deg,var(--colour-secondary) 0, var(--colour-info) 100%);
-
-  position: relative;
-  overflow: hidden;
-  max-width: 100%!important;
-
+  
+  padding-top: rem(44);
 
+  max-width: rem(1920);
+  
+  min-height: rem(400);
+  margin-inline: auto;
+  display: block;
 
   @include media-breakpoint-up(md) {
-    min-height: rem(470);
+    padding-top: rem(84);
   }
 
-  > .container {
-    padding-bottom: 0;
-    position: relative;
-  }
-
-  .breadcrumb {
-    
-    margin-top: rem(24);
-    margin-bottom: -0.5rem;
-
-    @include media-breakpoint-up(md) {
+  position: relative;
+  height: auto;
+
+  > picture {
+  
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    pointer-events: none;
+    overflow: hidden;
+    min-height: rem(400);
+    max-height: rem(400);
+
+    &:after {
+      content: "";
+      display: block;
       position: absolute;
-      top: 0;
-      left: rem(60);
-    }
-  }
-
-  &__inner {
-    
-    @include reset-colours();
-
-    color: var(--colour-body);
-    background: white;
-    padding: rem(32);
-    margin: rem(30) 0;
-    position: relative;
-    z-index: var(--index-above);
-    
-    @include media-breakpoint-up(md) {
-      max-width: rem(600);
-      margin: rem(112) 0 rem(80) 0;
-      padding: rem(56) rem(64);
+      z-index: -1;
+      inset: 0;
+      background: linear-gradient(300deg, rgba(30,190,230,1) 0%, rgba(0,49,60,1) 100%);
+      opacity: 0.85;
     }
 
-    > *:last-child {
-      padding-bottom: 0;
-      margin-bottom: 0;
-    }
-  }
-
-  picture img {
-    display: none;
-    @include media-breakpoint-up(md) {
-      display: block;
-      position: absolute;
-      top: -0.5%;
-      left: 40%;
-      height: 101%;
-      object-fit: cover;
-      width: 60%;
-      pointer-events: none;
+    img {
+        display: block;
+        position: absolute;
+        z-index: -2;
+        inset: 0;
+        object-fit: cover;
+        object-position: 50% 50%;
+        width: 100%;
+        height: 100%;
     }
   }
 
+  
 }
 
+
+
+
+
+
+
+
+
+
+
+
 // Web component CSS
 ::slotted(.breadcrumb){
   margin-top: rem(24)!important;

package/assets/sass/components/marketing.scss

@@ -0,0 +1,64 @@
+@use "../_func.scss" as *;
+
+
+$isComponent: "true"!default;
+
+
+@mixin iamMarketing(){
+  display: flex;
+  position: relative;
+  overflow: hidden;
+  position: relative;
+  overflow: hidden;
+  margin-bottom: 2rem;
+  max-width: 40rem;
+  min-width: 100%;
+  padding: 2rem;
+  border-radius: 0.5rem;
+  text-align: center;
+  align-items: flex-end;
+  padding-top: 33%;
+}
+
+figure {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+
+    &:after {
+    content: "";
+
+      inset: 0;
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    background-image: linear-gradient(15deg, #00313c 0%, #03404f 28.7%, #03404f 31.5%, #044353 60.099999999999994%, #1bb1dc 83.2%, rgba(28, 182, 226, 0.486) 100%);
+    opacity: 0.85;
+    z-index: 1;
+  }
+}
+
+img {
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  max-height: auto;
+  z-index: 2;
+  -webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
+  mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
+  mix-blend-mode: multiply;
+}
+
+:host {
+@include iamMarketing();
+}
+
+@include slotted('*',$isComponent) {
+  position: relative;
+  z-index: 2;
+  text-align: center;
+}
+

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

@@ -28,6 +28,7 @@ nav:has(iam-nav) {
 
   min-height: #{rem(96)};
   display: block;
+  position: relative;
 
   iam-nav {
     position: absolute;
@@ -554,7 +555,7 @@ iam-nav details {
 
     &.search-open {
 
-      > *:not([slot="logo"]):not([slot="secondary"]) {
+      > *:not([slot="logo"]):not([slot="secondary"]):not([slot="search"]) {
         display: none!important;
       }
     }

package/assets/sass/components/nav.scss

@@ -121,7 +121,6 @@
         display: inline-block;
         font-size: 1.2rem;
         margin-right: 1rem!important;
-        line-height: 1em;
       }
 
       i[class*=fa-] + i[class*=fa-] {
@@ -615,6 +614,13 @@
   }
 }
 
+::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);

package/assets/sass/components/pagination.scss

@@ -41,6 +41,10 @@
     padding-left: rem(16);
     font-weight: bold;
   }
+
+  div:has(> select){
+    margin-bottom: 0;
+  }
 }
 
 .page-jump {

package/assets/sass/elements/admin-panel.scss

@@ -4,6 +4,11 @@
   --padding-x: #{rem(32)};
   --padding-top: #{rem(16)};
   --padding-bottom: #{rem(24)};
+  --mh-modifier: #{rem(56 + 16)};
+
+  --mh-padding-inline: var(--padding-x);
+
+
   display: block;
   padding: var(--padding-top) var(--padding-x) var(--padding-bottom) var(--padding-x);
   box-shadow: 0px 6px 12px rgba(0,0,0,0.11);
@@ -65,23 +70,20 @@
     padding-bottom: rem(24);
   }
 
-  > :is(.mh-sm,.mh-md,.mh-lg){
+  > :is(.mh-sm,.mh-md,.mh-lg,.mh-sm-sm,.mh-sm-md,.mh-sm-lg,.mh-md-sm,.mh-md-md,.mh-md-lg){
     overflow: auto;
-    
-    padding: 0 var(--padding-x);
-    margin: 0 calc(var(--padding-x) * -1) rem(24) calc(var(--padding-x) * -1);
 
     &:before {
       top: 100% !important;
     }
   }
 
-  > :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6):first-child + :is(.mh-sm,.mh-md,.mh-lg){
+  > :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6):first-child + :is(.mh-sm,.mh-md,.mh-lg,.mh-sm-sm,.mh-sm-md,.mh-sm-lg,.mh-md-sm,.mh-md-md,.mh-md-lg){
     padding-top: var(--padding-top);
     margin-top: calc(var(--padding-top) * -1);
   }
   
-  > :is(.mh-sm,.mh-md,.mh-lg):last-child{
+  > :is(.mh-sm,.mh-md,.mh-lg,.mh-sm-sm,.mh-sm-md,.mh-sm-lg,.mh-md-sm,.mh-md-md,.mh-md-lg):last-child{
     padding-bottom: var(--padding-bottom);
     margin-bottom: calc(var(--padding-bottom) * -1)!important;
 
@@ -99,7 +101,7 @@
   }
 }
 
-[class*="col"] .admin-panel:first-child:last-child:not(:has(.mh-sm,.mh-md,.mh-lg)) {
+[class*="col"] .admin-panel:first-child:last-child:not(:has(.mh-sm,.mh-md,.mh-lg,.mh-sm-sm,.mh-sm-md,.mh-sm-lg,.mh-md-sm,.mh-md-md,.mh-md-lg)) {
 
   min-height: calc(100% - #{rem(24)});
 }

package/assets/sass/elements/badge.scss

@@ -0,0 +1,29 @@
+@use "../_func" as *;
+
+.badge {
+
+  font-size: rem(12);
+  line-height: rem(26);
+  outline: 1px solid var(--colour-canvas);
+  outline-offset: -1px;
+  padding: 0 rem(10);
+  margin: 0;
+  display: inline-block;
+  text-align: center;
+  white-space: nowrap;
+
+  & + .badge {
+    margin-left: rem(6);
+  }
+  border-radius: 0.25rem;
+  
+  &:empty {
+    display: none;
+  }
+}
+
+// Quick fix for badges in buttons
+.btn .badge {
+  position: relative;
+  top: -1px;
+}

package/assets/sass/elements/dialog.scss

@@ -178,7 +178,7 @@ dialog::backdrop {
 // #endregion
 
 // #region Transactional 
-*:not(.dialog__wrapper) > dialog[open]:not(.dialog--multi):is(:has(button:last-child),:has(form:last-child > button:last-child)) {
+*:not(.dialog__wrapper) > dialog[open]:not(.dialog--multi):is(:has(:is(button,a):last-child),:has(form:last-child > :is(button,a):last-child)) {
 
   text-align: center;
 
@@ -252,14 +252,14 @@ dialog::backdrop {
     }
   }
 
-  button {
+  form > :is(button,a) {
     margin-bottom: 0;
   }
 
   @include media-breakpoint-up(sm) {
 
-    button:has( + button:last-child),
-    button:last-child {
+    :is(button, .btn):has(~ :is(button, .btn):last-child),
+    :is(button, .btn):last-child {
       min-width: calc(50% - 1rem);
       text-align: center;
     }

package/assets/sass/elements/forms.scss

@@ -367,7 +367,7 @@ input[maxlength] + span {
   background-repeat: no-repeat;
   background-position: right var(--input-padding-inline, #{rem(16)}) center;
   background-size: var(--input-lh, #{rem(20)}) var(--input-lh, #{rem(20)});;
-  padding-right: calc(var(--input-lh, #{rem(20)}) + var(--input-padding-inline, #{rem(16)}) + var(--input-padding-inline, #{rem(16)}));
+  padding-right: calc(var(--input-lh, #{rem(20)}) + var(--input-padding-inline, #{rem(16)}) + var(--input-padding-inline, #{rem(16)}))!important;
 }
 
 .was-validated *:not(button):is(:valid, .is-valid):not(.is-invalid) {
@@ -381,7 +381,7 @@ input[maxlength] + span {
   background-repeat: no-repeat;
   background-position: right var(--input-padding-inline, #{rem(16)}) center;
   background-size: var(--input-lh, #{rem(20)}) var(--input-lh, #{rem(20)});;
-  padding-right: calc(var(--input-lh, #{rem(20)}) + var(--input-padding-inline, #{rem(16)}) + var(--input-padding-inline, #{rem(16)}));
+  padding-right: calc(var(--input-lh, #{rem(20)}) + var(--input-padding-inline, #{rem(16)}) + var(--input-padding-inline, #{rem(16)}))!important;
 }
 
 .invalid-feedback {
@@ -741,7 +741,7 @@ select {
   background: escape-svg($form-select-indicator-new) right var(--input-padding-block, 0.75rem) top var(--input-padding-block, 0.75rem)/var(--input-lh, 1.25rem) var(--input-lh, 1.25rem) no-repeat,
               linear-gradient(to left, var(--colour-primary-theme), var(--colour-primary-theme) 100%) right top/calc(var(--input-padding-block, 0.75rem) + var(--input-padding-block, 0.75rem) + var(--input-lh, 1.25rem)) calc(var(--input-padding-block, 0.75rem) + var(--input-padding-block, 0.75rem) + var(--input-lh, 1.25rem)) no-repeat;
   
-  padding-right: calc(var(--input-padding-inline, #{rem(16)}) + var(--input-padding-inline, #{rem(16)}) + var(--input-lh, 1.25rem));
+  padding-right: calc(var(--input-padding-inline, #{rem(16)}) + var(--input-padding-inline, #{rem(16)}) + var(--input-lh, 1.25rem))!important;
   option {font-size: 1.2em;}
 
   
@@ -858,7 +858,7 @@ iam-fileupload {
     width: 100%;
   }
 
-  :is(.suffix,.prefix) {
+  :is(.suffix,.prefix):not(.mt-0) {
     margin: rem(8) 0 0 0!important;
   }
 }

package/assets/sass/elements/links.scss

@@ -80,7 +80,8 @@ a:where(:not(.btn):not(.brand):not(:has(.card)):not(:has(iam-card))),
     text-decoration: underline;
     text-underline-offset: 0.2em;
     text-decoration-thickness: 2px;
-
+    font-size: inherit;
+    
     &:is(:hover, :focus, .hover, :focus-within) {
 
       color: var(--colour-hover);

package/assets/sass/foundations/reboot.scss

@@ -23,24 +23,22 @@ html {
 
   @if $mobileOnly != "true" {
     @media (min-width: #{em(1280)}) {
-        font-size: 100%;
+      font-size: 100%;
+      font-size: vw(1280);
+    }
+
+    @media (min-width: #{em(1440)}) {
+      font-size: 112.5%;
+    }
+
+    @media (min-width: #{em(1680)}) {
+      //font-size: 131.25%;
     }
 
     @media print {
       font-size: 16px;
     }
   }
-  /*
-  @media (min-width: #{em(1440)}) {
-    font-size: vw(1440);
-  }
-  @media (min-width: #{em(1600)}) {
-    font-size: 111.11%;
-  }
-  @media (min-width: #{em(1800)}) {
-    font-size: 125%;
-  }
-  */
 }
 
 body {
@@ -143,7 +141,8 @@ details {
 }
 
 // Main grid setup to avoid having to use continaer divs
-main {
+
+*:not(.row) > main {
   --padding-inline: 1.5rem;
   --container-max-width: #{rem(1280)};
   --full-width-start: 0;

package/assets/sass/foundations/root.scss

@@ -36,7 +36,7 @@ $root: ':root'!default;
   --card-bottom-padding: 2rem;
   --card-left-padding: 1rem;
   --card-border-radius: #{rem(8)};
-  --card-box-shadow: 2px 6px 12px rgba(0,0,0,0.2);
+  --card-box-shadow: #{rem(2)} #{rem(3)} #{rem(6)} rgba(0,0,0,0.2);
   --nav-height: #{rem(96)};
   --code-color: #d63384;
 
@@ -46,6 +46,14 @@ $root: ':root'!default;
   --border-color: var(--colour-border);
 }
 
+.reset-colours {
+
+  @each $color, $value in $theme-colors {
+    --colour-#{$color}: #{$value};
+  }
+  @include reset-colours();
+}
+
 // Dark mode; functional colours get updated
 @include dark-mode() {
   #{$root} {
@@ -60,7 +68,7 @@ $root: ':root'!default;
 @include light-mode() {
 
   // Reset the colours of lighter backgrounds to make sure they aren't over written by dark mode. Some other tweaks to colours are applied
-  [class*="bg-"]:not(.bg-primary):not(.bg-dark):not(.bg-danger):not(.bg-white):not(.bg-canvas):not(.bg-canvas-2):not(.invert-colours) {
+  [class*="bg-"]:not(.bg-primary):not(.bg-dark):not(.bg-danger):not(.bg-white):not(.bg-admin):not(.bg-canvas):not(.bg-canvas-2):not(.invert-colours) {
 
     @each $color, $value in $theme-colors {
       --colour-#{$color}: #{$value};
@@ -71,7 +79,7 @@ $root: ':root'!default;
   }
 
   // Override the colours when on a dark background, similiar to dark mode but on a module level
-  [class*="bg-"]:not(.bg-info):not(.bg-success):not(.bg-light):not(.bg-warning):not(.bg-white):not(.bg-canvas):not(.bg-canvas-2):not(.prevent-invert),
+  [class*="bg-"]:not(.bg-info):not(.bg-success):not(.bg-light):not(.bg-warning):not(.bg-white):not(.bg-admin):not(.bg-canvas):not(.bg-canvas-2):not(.prevent-invert),
   .invert-colours {
     
     @include invert-colours();

package/assets/sass/helpers/max-height.scss

@@ -1,9 +1,10 @@
-:is(.mh-sm,.mh-md,.mh-lg){
-  overflow: auto;
-  overscroll-behavior: contain;
+:is(.mh-sm,.mh-md,.mh-lg,.mh-sm-sm,.mh-sm-md,.mh-sm-lg,.mh-md-sm,.mh-md-md,.mh-md-lg){
+  
+
+  padding-inline: var(--mh-padding-inline,0);
+  margin-inline: calc(var(--mh-padding-inline,0) * -1);
 
   &::before {
-    content: "";
     top: calc(100% - 1.5rem);
     bottom: 0;
     left: 0;
@@ -15,4 +16,77 @@
     z-index: 2;
     margin-bottom: -1.5rem;
   }
+}
+
+:is(.mh-sm,.mh-md,.mh-lg){
+
+  overflow: auto;
+  overscroll-behavior: contain;
+
+  &::before {
+    content: "";
+  }
+}
+
+.mh-sm {
+  max-height: calc(#{rem(200)} - var(--mh-modifier,0));
+}
+
+.mh-md {
+  max-height: calc(#{rem(400)} - var(--mh-modifier,0));
+}
+
+.mh-lg {
+  max-height: calc(#{rem(600)} - var(--mh-modifier,0));
+}
+
+
+@include media-breakpoint-up(sm) {
+
+  :is(.mh-sm-sm,.mh-sm-md,.mh-sm-lg){
+
+    overflow: auto;
+    overscroll-behavior: contain;
+  
+    &::before {
+      content: "";
+    }
+  }
+  
+  .mh-sm-sm {
+    max-height: calc(#{rem(200)} - var(--mh-modifier,0));
+  }
+  
+  .mh-sm-md {
+    max-height: calc(#{rem(400)} - var(--mh-modifier,0));
+  }
+  
+  .mh-sm-lg {
+    max-height: calc(#{rem(600)} - var(--mh-modifier,0));
+  }
+}
+
+@include media-breakpoint-up(md) {
+
+  :is(.mh-md-sm,.mh-md-md,.mh-md-lg){
+
+    overflow: auto;
+    overscroll-behavior: contain;
+  
+    &::before {
+      content: "";
+    }
+  }
+  
+  .mh-md-sm {
+    max-height: calc(#{rem(200)} - var(--mh-modifier,0));
+  }
+  
+  .mh-md-md {
+    max-height: calc(#{rem(400)} - var(--mh-modifier,0));
+  }
+  
+  .mh-md-lg {
+    max-height: calc(#{rem(600)} - var(--mh-modifier,0));
+  }
 }

package/assets/sass/templates/auth.scss

@@ -0,0 +1,112 @@
+@use "../_func" as *;
+
+
+body:has(.template--auth) {
+
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  background-color: var(--colour-canvas-2);
+}
+
+.template--auth {
+  --padding-top: #{rem(24)};
+  --brand-size: #{rem(36)};
+
+  @include media-breakpoint-up(md) {
+    --padding-top: #{rem(40)};
+    --brand-size: #{rem(64)};
+  }
+
+
+  display: flex;
+  flex-wrap: wrap;
+  max-width: rem(1280);
+  margin-inline: auto;
+
+
+  main {
+
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    padding-top: var(--padding-top);
+    padding-bottom: var(--padding-top);
+    padding-inline: var(--container-padding-x);
+
+    @include media-breakpoint-up(md) {
+      flex: 0 0 auto;
+      width: 43.75%;
+      padding-inline-end: calc(var(--container-padding-x) - rem(16));
+    }
+
+    .brand {
+      font-size: var(--brand-size);
+      padding-top: 0;
+    }
+  }
+
+
+  aside {
+
+    display: none;
+
+    @include media-breakpoint-up(md) {
+      display: block;
+      flex: 0 0 auto;
+      width: 56.25%;
+      padding-inline: var(--container-padding-x) !important;
+      padding-block: var(--padding-top);
+      position: relative;
+      overflow: hidden;
+    }
+
+    background-color: var(--colour-primary-theme);
+
+    @include light-mode(){
+    
+      background-color: #e9f9fd;
+    }
+
+
+    > figure {
+      position: relative;
+      display: block;
+      margin-top: calc(var(--padding-top) * -1);
+      margin-inline: calc(var(--container-padding-x-md) * -1);
+      min-width: calc(100% + var(--container-padding-x-md) + var(--container-padding-x-md));
+      margin-bottom: rem(40);
+      max-height: rem(400);
+      clip-path: ellipse(70% 80% at 50% 20%);
+      rotate: -5deg;
+
+      &:after {
+        content: "";
+        position: absolute;
+        display: block;
+        
+        right: -2rem;
+        left: -2rem;
+        bottom: -1rem;
+        height: 50%;
+        
+        rotate: -5deg;
+        background: linear-gradient(0deg, rgba(0,49,60,1) 0%, rgba(28,182,226,0.45) 40%, rgba(28,182,226,0) 100%);
+        opacity: 0.9;
+      }
+    }
+
+    img {
+      
+      margin-inline: rem(-24);
+      min-width: calc(100% + rem(24) + rem(24));
+      margin-top: rem(-12);
+      max-height: rem(424);
+      object-fit: cover;
+      object-position: 50% 50%;
+      rotate: 5deg;
+    }
+  }
+
+}
+