@iamproperty/components 7.3.0 → 7.4.0

package/assets/sass/components/collapsible-side.scss

@@ -36,32 +36,41 @@ $darkMode: 'true' !default;
   @include media-breakpoint-up(md, $mobileOnly) {
     padding-left: 5.25rem !important;
   }
+
+  &.inline {
+    .side-menu {
+      position: absolute;
+      top: 0;
+    }
+  }
 }
 
 // #region Side menu
 .side-menu {
   position: absolute;
+  z-index: 20;
   top: 0;
   left: 0;
   height: 100%;
   min-height: calc(100vh - var(--nav-height));
-  width: rem(30);
+  width: rem(70);
   height: calc(100% - var(--nav-height));
-  background-color: var(--colour-canvas);
+  padding: 0 rem(40) 0 0;
   transition: width 1s;
 
   &:before {
     content: '';
     position: absolute;
+    z-index: 1;
     top: 0;
-    right: 0;
+    right: rem(40);
     height: 100%;
     border-right: 2px solid var(--colour-border);
   }
 
   @include media-breakpoint-up(sm, $mobileOnly) {
     left: 0;
-    width: rem(40);
+    width: rem(80);
   }
 
   @include media-breakpoint-up(md, $mobileOnly) {
@@ -71,10 +80,11 @@ $darkMode: 'true' !default;
     top: var(--nav-height);
 
     &:not(.open).hover {
-      width: rem(304);
+      width: rem(344);
 
       .btn[class*='fa-']:before {
         content: '\f023' !important;
+        transform: rotate(0);
       }
     }
   }
@@ -83,13 +93,14 @@ $darkMode: 'true' !default;
     display: var(--btn-display, block);
     position: absolute;
     top: rem(32);
-    right: 0;
+    right: rem(40);
     margin-bottom: 0;
     margin-right: rem(-20);
     background-color: var(--colour-canvas-2);
     border: 2px solid var(--colour-border);
     z-index: 99;
     color: var(--colour-primary-theme);
+    transition: opacity 0.2s;
 
     &[aria-expanded] {
       // Change icon
@@ -105,7 +116,7 @@ $darkMode: 'true' !default;
 
   &:is(:hover, :focus-within, :active) .btn {
     border: 2px solid var(--colour-border);
-    color: var(--colour-primary-theme);
+    color: var(--colour-primary);
 
     @include media-breakpoint-up(md, $mobileOnly) {
       opacity: 1;
@@ -113,29 +124,30 @@ $darkMode: 'true' !default;
   }
 
   &:is(.open) {
-    width: calc(100% - var(--container-padding-x));
+    width: calc(100% - var(--container-padding-x) + rem(40));
 
-    @include media-breakpoint-up(sm, $mobileOnly) {
-      width: rem(382);
+    @include media-breakpoint-up(sm) {
+      width: rem(422);
     }
-    @include media-breakpoint-up(md, $mobileOnly) {
-      width: rem(304);
+    @include media-breakpoint-up(md) {
+      width: rem(344);
     }
   }
 
   // Content
-
   .side-menu-content {
     position: absolute;
     top: 0;
-    right: 0;
-    padding: rem(32) rem(40) 0 0;
+    right: rem(40);
+    padding: rem(32) rem(40) rem(40) 0;
     width: rem(351);
+    background-color: var(--colour-canvas);
     opacity: 0;
     transition: opacity 1s;
     min-height: 100%;
     overflow: auto;
     max-height: 100%;
+    scrollbar-width: thin;
 
     .h3 {
       padding-left: rem(24);
@@ -172,90 +184,13 @@ $darkMode: 'true' !default;
   }
 }
 
-// Links
-::slotted(*[slot='menu']) {
-  padding-left: rem(24);
-
-  @include media-breakpoint-up(sm, $mobileOnly) {
-    padding-left: rem(40);
-  }
-
-  @include media-breakpoint-up(md, $mobileOnly) {
-    padding-left: var(--container-padding-x-md);
-  }
-}
-
-::slotted(hr) {
-  border-bottom: 2px solid var(--colour-border) !important;
-  margin-right: rem(-40) !important;
-}
-
-::slotted(a[slot='menu']) {
-  display: block;
-
-  display: block !important;
-  line-height: rem(20) !important;
-  padding: rem(16) rem(40) rem(16) rem(24) !important;
-  margin: 0 !important;
-  flex-shrink: 0;
-  font-size: 1rem !important;
-  font-weight: normal !important;
-  text-decoration: none;
-
-  border-right: 2px solid var(--colour-border) !important;
-  border-bottom: 2px solid var(--colour-border) !important;
-
-  margin-right: rem(-40) !important;
-
-  @include media-breakpoint-up(sm, $mobileOnly) {
-    padding-left: rem(40) !important;
-  }
-
-  @include media-breakpoint-up(md, $mobileOnly) {
-    padding-left: var(--container-padding-x-md) !important;
-  }
-  &:after {
-    display: none;
-  }
-}
-
-::slotted(a[slot='menu']:where(:hover, :focus, [aria-expanded])) {
-  background-color: var(--side-link-hover) !important;
-}
-
-::slotted(a[slot='menu']:active) {
-  background-color: var(--side-link-hover) !important;
-  font-weight: bold !important;
-}
-
-::slotted(a[slot='menu'][aria-expanded]) {
-  background-color: var(--side-link-hover) !important;
-  font-weight: bold !important;
-  margin-right: #{rem(-40)} !important;
-  position: relative;
-
-  border-right: 2px solid var(--colour-info) !important;
-
-  &:before {
-    content: '';
-    position: absolute;
-    top: 0;
-    right: 0;
-    height: calc(100% + 4px);
-    margin-top: -2px;
-    width: 2px;
-    border-right: 2px solid var(--colour-info);
-    margin-right: -2px;
-
-    @media (forced-colors: active) {
-      border-right: 10px solid var(--colour-info);
-    }
-  }
-}
+// links moved to links.scss
 // #endregion
 
 // #region main content
 .main-content {
+  position: relative;
+  z-index: 10;
   padding-top: rem(24);
   padding-left: rem(60);
 
@@ -311,3 +246,64 @@ $darkMode: 'true' !default;
     --btn-display: none;
   }
 }
+
+:host([inline]) {
+  width: 100%;
+  max-width: 100%;
+
+  @include media-breakpoint-up(md, $mobileOnly) {
+    max-width: min(var(--container-max-width), 100% - 19rem);
+  }
+}
+
+:host([menu-right]) {
+  .container {
+    padding-right: 0 !important;
+
+    @include media-breakpoint-up(md, $mobileOnly) {
+      padding-right: 5.25rem !important;
+    }
+  }
+
+  @include media-breakpoint-up(md, $mobileOnly) {
+    .container:has(.side-menu.open) {
+      margin-right: max(19rem, calc(50% - calc(var(--container-max-width) / 2)));
+      margin-left: 0;
+    }
+  }
+
+  .side-menu {
+    left: auto;
+    right: -2.5rem;
+    padding: 0 0 0 rem(40);
+
+    @include media-breakpoint-up(md, $mobileOnly) {
+      right: 0;
+    }
+
+    &::before {
+      right: 100%;
+    }
+
+    .btn {
+      right: 100%;
+
+      &:before {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  .main-content {
+    padding-left: var(--container-padding-x);
+    padding-right: rem(60);
+
+    @include media-breakpoint-up(sm, $mobileOnly) {
+      padding-right: rem(80);
+    }
+
+    @include media-breakpoint-up(md, $mobileOnly) {
+      padding-right: 0;
+    }
+  }
+}

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

@@ -0,0 +1,18 @@
+@use '../_func' as *;
+@use '../elements/buttons.scss' as *;
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+:host {
+  display: contents;
+}
+
+::slotted(iam-marketing:first-child:last-child) {
+  margin-bottom: 0;
+  min-height: 100%;
+  min-width: 100%;
+}

package/assets/sass/components/inline-edit.scss

@@ -1,5 +1,7 @@
 @use '../_func' as *;
 
+@include display();
+
 :host {
   max-width: var(--input-max-width, 50rem);
   display: block;

package/assets/sass/components/{marketing.scss → marketing.component.scss}

@@ -2,14 +2,13 @@
 
 $isComponent: 'true' !default;
 
-@mixin iamMarketing() {
+:host {
   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;
@@ -24,6 +23,7 @@ figure {
   width: 100%;
   top: 0;
   left: 0;
+  margin: 0;
 
   &:after {
     content: '';
@@ -58,10 +58,6 @@ img {
   mix-blend-mode: multiply;
 }
 
-:host {
-  @include iamMarketing();
-}
-
 @include slotted('*', $isComponent) {
   position: relative;
   z-index: 2;

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

@@ -108,15 +108,12 @@
   border-left: 4px solid var(--colour-info) !important;
   border-radius: 0.25rem !important;
 
-  
-  padding-left: calc(var(--menu-item-padding, 0.5rem) - 4px)!important;
+  padding-left: calc(var(--menu-item-padding, 0.5rem) - 4px) !important;
 }
 
 @media (prefers-color-scheme: dark) {
-
   ::slotted(*:is(button, a, label):is(.selected):not(:hover, .hover)) {
-  
-    color: black!important;
+    color: black !important;
   }
 }
 
@@ -132,10 +129,8 @@
 }
 
 @media (prefers-color-scheme: dark) {
-
   ::slotted(*:is(button, a, label):is(:active, .active)) {
-  
-    color: black!important;
+    color: black !important;
   }
 }
 

package/assets/sass/components/milestone.scss

@@ -0,0 +1,207 @@
+iam-milestone {
+  --milestone-divider-colour: var(--colour-muted);
+  --milestone-panel-border: var(--wider-colour-1-active);
+  --milestone-default-background: #FFFFFF;
+  --milestone-future-background: #F5F5F5;
+}
+
+iam-milestone-group {
+  display: flex;
+  flex-wrap: wrap;
+  max-width: 43rem;
+  gap: 2.75rem;
+  
+  &.reverse-items {
+      flex-direction: column-reverse;
+
+      .milestone + .milestone {
+        &:before {
+          top: auto;
+          bottom: 0;
+          transform: translate(-1px, 2.2rem);
+        }
+      }
+  }
+
+  &[data-show-all-toggle] {
+     .milestone.current ~ .milestone {
+      display: none;
+    }
+
+    &.show-all {
+      .milestone.current ~ .milestone {
+        display: block;
+      }
+
+       .show-all-toggle {
+          &:before {
+            content: "\f070"
+          }
+       }
+    }
+  }
+
+  .show-all-toggle {
+    margin: 0 auto;
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    padding-right: 1.7rem;
+    position: relative;
+
+    &:before {
+      content: "\f06e";
+      font-family: 'Font Awesome 6 Pro';
+      position: absolute;
+      left: auto;
+      right: 0;
+      top: 0;
+      margin-right: 0;
+    }
+  }
+
+  iam-milestone {
+
+    + .milestone {
+      position: relative;
+
+      &:before {
+        content: "";
+        height: 1.5rem;
+        width: 2px;
+        background: var(--milestone-divider-colour);
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 50%;
+        transform: translate(-1px, -2.2rem);
+      }
+    }
+  }
+}
+
+iam-milestone::part(status) {
+    text-transform: uppercase;
+    text-align: center;
+    display: block;
+    margin-bottom: 0.5rem;
+}
+
+iam-milestone { 
+  border: 2px solid var(--milestone-panel-border);
+  border-radius: 8px;
+  display: block;
+  width: 100%;
+  max-width: 43rem;
+  background: var(--milestone-default-background);
+  padding-top: 1rem;
+
+  &.current ~ .milestone {
+     background: var(--milestone-future-background);
+  }
+
+  h2 {
+    text-align: center;
+  }
+
+  ul {
+    padding-left: 0;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+
+    li {
+      width: 100%;
+    }
+  }
+
+  p {
+    padding: 0 1rem 2rem;
+
+    + ul {
+      margin-top: 2rem;
+    }
+  }
+
+  .task-details {
+    padding: 1rem 1.5rem;
+
+    p {
+      padding: 0;
+
+      + ul {
+        margin-top: 2rem;
+      }
+    }
+  }
+
+  summary,
+  li {
+    gap: 1rem;
+
+    &:before {
+      content:'';
+      display: block;
+      width: 1rem;
+      height: 1rem;
+      border: 2px solid var(--colour-primary);
+      border-radius: 50%;
+      font-family: "Font Awesome 6 Pro";
+      color: #fff;
+      font-size: 0.7rem;
+    }
+
+    &.complete {
+      &:before {
+        content: "\f00c";
+        border-color: var(--colour-success);
+        background: var(--colour-success);
+        text-align: center;
+      }
+    }
+  }
+
+  summary {
+      border-top: 1px solid #D6D6D6;
+      padding: 1rem 1.5rem;
+      margin-bottom: 0;
+      display: grid;
+      grid-template-columns: auto 1fr auto;
+      font-weight: 600;
+
+      &:before {
+        width: 1.25rem;
+        height: 1.25rem;
+        font-size: 0.9rem;
+        line-height: 1.2;
+      }
+
+      &:after {
+        content: "\f078"
+      }
+
+      + p {
+        padding-bottom: 0;
+      }
+    }
+
+    details {
+      padding-bottom: 0;
+
+      &[open] {
+        summary:after {
+          content: "\f077"
+        }
+      }
+    }
+
+    li {
+      display: grid;
+      grid-template-columns: auto 1fr auto;
+      align-items: center;
+
+      .action-date {
+        font-size: 0.75rem;
+      }
+    }
+}

package/assets/sass/components/multiselect.scss

@@ -1,5 +1,8 @@
 @use '../_func' as *;
 
+
+  @include visually-hidden();
+
 .outer {
   position: relative;
   max-width: var(--input-max-width, 50rem);

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

@@ -6,6 +6,7 @@
 
 @include margins();
 @include sizes();
+@include display();
 
 $layers: 'true' !default;
 $mobileOnly: 'false' !default;

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

@@ -43,8 +43,16 @@ nav:has(iam-nav) {
 }
 
 nav:has(iam-nav.nav--sticky) {
+  position: sticky;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 9999;
+  transition: transform 1s;
+
   iam-nav {
     position: fixed;
+    outline: 2px solid #EEEEEE;
   }
 }
 
@@ -55,10 +63,23 @@ nav:has(iam-nav.nav--sticky) {
   }
 
   nav:has(iam-nav.nav--xs-sticky) {
+
+    position: sticky;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 9999;
+    transition: transform 1s;
+
     iam-nav {
       position: fixed;
     }
   }
+  
+  body[data-direction="down"].past100 nav:has(.nav--xs-sticky){
+
+    transform: translate(0,-110%);
+  }
 }
 
 @include media-breakpoint-up(sm, $mobileOnly) {
@@ -67,6 +88,13 @@ nav:has(iam-nav.nav--sticky) {
     overflow: hidden;
   }
 }
+
+
+body[data-direction="down"].past100 nav:has(.nav--sticky){
+
+  transform: translate(0,-110%);
+}
+
 // #endregion
 
 // #region General styles
@@ -121,6 +149,8 @@ iam-nav {
     &:active {
       text-decoration-color: #a2d393 !important;
     }
+
+    &.active,
     &.selected,
     &[aria-current='page'] {
       text-decoration-color: var(--colour-info) !important;