@iamproperty/components 7.2.2--beta3 → 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

@@ -1,17 +1,36 @@
+@use '../_func.scss' as *;
+
 :host {
+  //all: unset;
   inset: auto;
-  top: anchor(top);
-  left: calc(anchor(right) + var(--menu-offset, 0.25rem));
+  top: anchor(bottom);
+  left: anchor(left);
   position: fixed;
   position-try-fallbacks: flip-block, flip-inline;
   width: max-content;
-  min-width: calc(anchor-size(width) + 2rem);
 
-  max-height: var(--menu-max-height, min-contents);
+  height: min-content;
+  max-height: var(--menu-max-height, min(100vh - 6rem));
   background: var(--menu-bg, canvas);
   margin: var(--menu-margin, 0);
-  padding: var(--menu-padding, 0.25rem);
+  padding: var(--menu-padding, 0.5rem);
   border: var(--menu-border, 2px solid grey);
+  overflow: auto;
+
+  border: none !important;
+  border-radius: 0.5rem;
+  box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.1);
+}
+
+:host(.menu--fill) {
+  width: anchor-size(width);
+  min-width: anchor-size(width);
+  max-width: anchor-size(width);
+}
+
+:host(:popover-open),
+:host([popover-open]) {
+  display: block;
 }
 
 :host(:not([popover])) {
@@ -19,61 +38,128 @@
   display: block;
 }
 
-.menu--inner {
-  display: contents;
+:host(.menu--sm) {
+  width: rem(160);
+}
+:host(.menu--md) {
+  width: rem(240);
+}
+:host(.menu--lg) {
+  width: rem(320);
+}
+
+:host(.menu--height-sm) {
+  max-height: rem(200);
+}
+:host(.menu--height-lg) {
+  max-height: rem(400);
 }
 
-::slotted(*:not(iam-menu)) {
+::slotted(*:is(button, a, label, span)) {
   //all: unset !important;
   background: unset !important;
   border: unset !important;
-  color: inherit !important;
+  color: var(--colour-primary) !important;
   font-weight: inherit !important;
   font-family: inherit !important;
   font-size: 1rem !important;
+  line-height: rem(19) !important;
   display: block !important;
   margin: var(--menu-item-margin, 0 0 0.25rem 0) !important;
-  padding: var(--menu-item-padding, 0) !important;
+  padding-block: var(--menu-item-padding, 0.5rem) !important;
   width: var(--menu-item-width, 100%) !important;
+  max-width: var(--menu-item-width, 100%) !important;
   text-align: var(--menu-item-text-align, left) !important;
+}
+
+::slotted(*:is(button, a, label)) {
+  padding-inline: var(--menu-item-padding, 0.5rem);
   cursor: var(--menu-item-cursor, pointer) !important;
 }
 
-::slotted(details) {
-  margin: 0 !important;
-  padding: 0 !important;
+::slotted(*:is(span):first-child) {
+  padding-top: 0 !important;
+  font-weight: 700 !important;
 }
-::slotted(*:not(iam-menu):not([class*='fa-'])):before {
-  display: none !important;
+
+::slotted(*:is(button, a, label, span):last-child) {
+  margin-bottom: 0 !important;
 }
-::slotted(*[class*='fa-']):before {
-  font-family: var(--fa-font-family, 'Font Awesome 6 Pro');
+
+// Radio buttons
+
+::slotted(*:is(label)) {
+  --radio-size: #{rem(20)};
+  --radio-inner-size: #{rem(12)};
+  --radio-inner-top: #{rem(12)};
+  --radio-inner-left: #{rem(12)};
+
+  --checkbox-tick-size: #{rem(12)};
+  --checkbox-inner-size: #{rem(10)};
+  --checkbox-inner-top: #{rem(6)};
+  --checkbox-inner-left: #{rem(8)};
+  padding-left: rem(36) !important;
 }
-::slotted(*:not(iam-menu)):after {
-  display: none !important;
+
+// States
+
+::slotted(*:is(button, a, label):is(.selected)) {
+  background: #e9f8fc !important;
+  border-left: 4px solid var(--colour-info) !important;
+  border-radius: 0.25rem !important;
+
+  padding-left: calc(var(--menu-item-padding, 0.5rem) - 4px) !important;
 }
 
-::slotted(*:not(iam-menu):focus) {
-  color: var(--menuFocusColor, LinkText) !important;
+@media (prefers-color-scheme: dark) {
+  ::slotted(*:is(button, a, label):is(.selected):not(:hover, .hover)) {
+    color: black !important;
+  }
 }
-::slotted(*:not(iam-menu):not(details):hover) {
-  color: var(--menuHoverColor, LinkText) !important;
+
+::slotted(*:is(button, a, label):is(:hover, .hover, :focus, .focus)) {
+  //all: unset !important;
+  background: var(--colour-light) !important;
+  border-radius: 0.25rem !important;
 }
-::slotted(*:not(iam-menu):not(details):active) {
-  color: var(--menuActiveColor, ActiveText) !important;
+
+::slotted(*:is(button, a, label):is(:active, .active)) {
+  background: rgba(224, 224, 224, 1) !important;
+  border-radius: 0.25rem !important;
+}
+
+@media (prefers-color-scheme: dark) {
+  ::slotted(*:is(button, a, label):is(:active, .active)) {
+    color: black !important;
+  }
 }
 
 ::slotted(hr) {
-  height: 2px !important;
+  height: 1px !important;
   background-color: var(--menu-hr-border-color, var(--border-color, grey)) !important;
-  margin-left: calc(var(--menu-padding, 0.25rem) * -1) !important;
-  margin-right: calc(var(--menu-padding, 0.25rem) * -1) !important;
-  width: calc(100% + var(--menu-padding, 0.25rem) * 2) !important;
-  margin-top: var(--menu-hr-margin, 0.75rem) !important;
-  margin-bottom: var(--menu-hr-margin, 1rem) !important;
+  width: 100%;
+  margin: var(--menu-item-margin, 0 0 0.25rem 0) !important;
   padding: 0 !important;
 }
 
+// #region sub menu
+::slotted(iam-menu:not([popover])) {
+  border: none !important;
+  border-radius: 0 !important;
+  box-shadow: none !important;
+  padding: 0;
+  margin: 0;
+  width: auto;
+}
+
+::slotted(iam-menu[popover]) {
+  top: anchor(top);
+  left: calc(anchor(right) + 1rem);
+}
+// #endregion
+
+/*
+
 ::slotted([popovertarget]):before {
   text-align: center;
   display: inline-block !important;
@@ -99,3 +185,4 @@
   -webkit-mask-position: 50% 50%;
   z-index: 2;
 }
+*/

package/assets/sass/components/menu.scss

@@ -5,17 +5,78 @@ $mobileOnly: 'false' !default;
 $darkMode: 'true' !default;
 
 @include layer('components', $layers) {
-  $menuPadding: 1rem !default;
-  $menuBorder: none !default;
-  $menuBorderRadius: 1rem !default;
-  $menuBoxShadow: 0px 2px 9px rgba(0, 0, 0, 0.1) !default;
+  $menuPadding: 0.5rem !default;
 
   iam-menu:defined {
     --menu-padding: #{$menuPadding};
     --border-color: var(--colour-border);
     --menu-item-margin: 0 0 0.5rem 0;
-    border: #{$menuBorder};
-    border-radius: #{$menuBorderRadius};
-    box-shadow: #{$menuBoxShadow};
   }
+
+  iam-menu i {
+    width: 1.25rem;
+  }
+
+  // #region sub menu
+
+  iam-menu > button:has(+ iam-menu) {
+    position: relative;
+
+    &:after {
+      content: '';
+      height: var(--btn-line-height);
+      width: rem(16);
+      height: rem(16);
+      display: inline-block;
+      background: currentColor;
+      mask-image: var(--icon-arrow);
+      mask-size: 100%;
+      mask-repeat: no-repeat;
+      mask-position: 50% 50%;
+      -webkit-mask-image: var(--icon-arrow);
+      -webkit-mask-size: 100%;
+      -webkit-mask-repeat: no-repeat;
+      -webkit-mask-position: 50% 50%;
+      vertical-align: bottom;
+
+      position: absolute;
+      top: calc(50% - 0.5rem);
+      right: 0.5rem;
+    }
+  }
+
+  iam-menu > button:has(+ iam-menu:not([popover])) {
+    &:after {
+      rotate: 90deg;
+    }
+  }
+
+  iam-menu > button.open:has(+ iam-menu:not([popover])) {
+    position: relative;
+
+    &:after {
+      top: calc(50% - 0.5rem);
+      right: 0.5rem;
+      rotate: 270deg;
+    }
+  }
+
+  iam-menu > button:has(+ iam-menu:popover-open) {
+    position: relative;
+
+    &:after {
+      top: calc(50% - 0.5rem);
+      right: 0.5rem;
+      rotate: 180deg;
+    }
+  }
+
+  iam-menu > button:not(.open) + iam-menu:not([popover]) {
+    display: none;
+  }
+
+  iam-menu > button + iam-menu:not([popover]) > *:is(button, a, label) {
+    padding-left: 2rem;
+  }
+  // #endregion
 }