@iamproperty/components 7.6.4--beta7 → 7.7.0

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

@@ -50,7 +50,7 @@ iam-tabs::part(next-button) {
 iam-tabs.tabs--guided::part(next-button) {
   @container (width > 62em) {
     position: absolute;
-    top: rem(150);
+    top: 9.375rem; /* 150*/ 
     right: 0;
     display: block;
   }

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

@@ -1,7 +1,7 @@
 @use '../_func' as *;
 @use '../elements/forms';
-@use '../elements/admin-panel.scss' as *;
-@use '../elements/dropdown.scss' as *;
+@use '../elements/admin-panel' as *;
+@use '../elements/dropdown' as *;
 @use '../utilities/visually-hidden' as *;
 @use '../utilities/display' as *;
 

package/assets/sass/components/testimonial.scss

@@ -30,10 +30,10 @@
     display: flex;
     user-select: none;
     touch-action: pan-x;
-    height: rem(230);
+    height: 14.375rem; /* 230 */ 
 
     @media screen and (min-width: 36em) {
-      height: rem(340);
+      height: 21.25rem; /* 340 */ 
     }
     @media screen and (min-width: 62em) {
       min-height: 100%;

package/assets/sass/components/timeline.scss

@@ -2,7 +2,7 @@
 @use '../_func' as *;
 
 .timeline {
-  --breakpoint: (100% - #{rem(992)});
+  --breakpoint: (100% - 62rem);
   --pl: clamp(0rem, var(--breakpoint) * -1000, 4rem);
   --line-pos: clamp(1rem, var(--breakpoint) * 1000, 50%);
   --circle-pos: 1rem;
@@ -57,12 +57,12 @@
   }
 
   > * {
-    max-width: rem(math.div(1112, 2) - 96);
+    max-width: 28.75rem; /* (1112/2) - 96 */
     order: 1;
   }
 
   > img {
-    max-width: min(100%, #{rem(math.div(1112, 2) - 96)});
+    max-width: min(100%, 28.75rem);
     margin-bottom: 2rem;
   }
 

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

@@ -1,4 +1,4 @@
-@use '../_func.scss' as *;
+@use '../_func' as *;
 
 *,
 *::before,
@@ -40,20 +40,20 @@
 
     height: 1rem;
     width: 1rem;
-    background-color: var(--colour, var(--colour-info));
+    background-color: var(--icon-colour, var(--colour-info));
     border-radius: 50%;
     margin-bottom: calc(calc(1lh - 1rem) / 2);
     vertical-align: bottom;
   }
   
   .tooltip__anchor:after {
-    font-family: "Font Awesome 6 Pro";
+    font-family: "Font Awesome 7 Pro";
     font-weight: 900;
     content: "\?";
     display: block;
     margin: 0;
     line-height: 1;
-    color: var(--colour-primary);
+    color: var(--colour-white);
     position: absolute;
     top: 50%;
     left: 50%;
@@ -62,10 +62,15 @@
     font-weight: bold;
   }
 
+  :host([data-type="info"]) .tooltip__anchor:after {
+
+    content: "\f129";
+  }
+
   ::slotted(i:first-child:last-child){
     height: 1rem;
     width: 1rem;
-    background-color: var(--colour, var(--colour-info));
+    background-color: var(--icon-colour, var(--colour-info));
     color: var(--colour-primary);
     font-size: 0.6em;
     line-height: 1rem!important;
@@ -81,7 +86,7 @@
     position-try-fallbacks:  bottom span-all, top span-all, start;
 
     container-type: anchored;
-    max-width: #{rem(270)};
+    max-width: 16.875rem; /* 270 */ 
     background: var(--colour-primary);
     color: var(--colour-white);
     padding: 1.5rem;
@@ -98,11 +103,11 @@
     }
 
     @media screen and (min-width: 36em) {
-      max-width: #{rem(335)};
+      max-width: 20.9375rem; /* 335 */ 
     }
 
     @media screen and (min-width: 62em) {
-      max-width: #{rem(360)};
+      max-width: 22.5rem; /* 360 */ 
     }
 
     &::after {

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

@@ -1,5 +1,5 @@
-@use '../_func.scss' as *;
-@use 'card.module.scss' as *;
+@use '../_func' as *;
+@use 'card.module' as *;
 
 :host {
   --card-right-padding: 1rem;

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

@@ -1,4 +1,4 @@
-@use './modal.component.scss';
+@use './modal.component';
 
 @layer components {
   

package/assets/sass/components/word-count.component.scss

@@ -1,4 +1,4 @@
-@use '../_func.scss' as *;
+@use '../_func' as *;
 
 // #region word counter
 :host {

package/assets/sass/core.scss

@@ -1,4 +1,4 @@
 @charset "UTF-8";
 
 @use '_fonts';
-@use '_corefiles.scss';
+@use '_corefiles';

package/assets/sass/elements/{admin-panel.scss → admin-panel.css}

@@ -1,12 +1,9 @@
-@use '../_func' as *;
-
-
 @layer elements {
   .admin-panel {
     --padding-x: 1.5rem;
     --padding-top: 1rem;
     --padding-bottom: 1rem;
-    --mh-modifier: #{rem(56 + 16)};
+    --mh-modifier: 4.5rem; /* 56px + 16px */
     --mh-padding-inline: var(--padding-x);
     display: block;
     padding: var(--padding-top) var(--padding-x) var(--padding-bottom) var(--padding-x);
@@ -106,20 +103,20 @@
       background: none;
     }
 
-    > *:not([class*="mb-"]):last-child {
+    & > *:not([class*="mb-"]):not(.btn__group):last-child {
       margin-bottom: 0 !important;
     }
 
-    > *:is(p):last-child {
+    & > *:is(p):last-child {
       padding-bottom: 0 !important;
     }
 
-    p {
+    & p {
       max-width: 100%;
       padding-bottom: 1.5rem;
     }
 
-    > :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, .mh-fluid) {
+    & > :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, .mh-fluid) {
       overflow: auto;
 
       &:before {
@@ -127,13 +124,13 @@
       }
     }
 
-    > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):not(.lead):first-child
+    & > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):not(.lead):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, .mh-fluid) {
       padding-top: var(--padding-top);
       margin-top: calc(var(--padding-top) * -1);
     }
 
-    > :is(
+    & > :is(
         .mh-sm,
         .mh-md,
         .mh-lg,
@@ -148,16 +145,16 @@
       padding-bottom: var(--padding-bottom);
       margin-bottom: calc(var(--padding-bottom) * -1) !important;
 
-      > *:not([class*="mb-"]):last-child {
+      & > *:not([class*="mb-"]):last-child {
         margin-bottom: 0 !important;
       }
 
-      > *:is(p):last-child {
+      & > *:is(p):last-child {
         padding-bottom: 0 !important;
       }
     }
 
-    > iam-pagination {
+    & > iam-pagination {
       margin-top: -1rem;
     }
 
@@ -183,9 +180,9 @@
     min-height: calc(100% - 1.5rem);
   }
 
-  // #region Has actionbar
+  /* #region Has actionbar */
   .admin-panel:has(iam-actionbar) {
-    > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):not(.lead):first-child {
+    & > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):not(.lead):first-child {
       margin-bottom: 0;
     }
 
@@ -202,7 +199,7 @@
       }
     }
 
-    > :is(iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, iam-table-ajax) {
+    & > :is(iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, iam-table-ajax) {
       overflow: visible;
 
       &:first-child {
@@ -216,9 +213,9 @@
       }
     }
   }
-  // #endregion
+  /* #endregion */
 
-  // #region Admin panel as details
+  /* #region Admin panel as details */
   details.admin-panel {
     summary:after {
       content: '\f077';
@@ -252,11 +249,8 @@
       content: '\f078';
     }
   }
-  // #endregion
-  .admin-panel:has(.admin-panel__footer){
-
-    //container-type: inline-size;
-  }
+  /* #endregion */
+  
   .admin-panel__footer:last-child {
     background-color: var(--wider-colour);
     padding-top: var(--padding-top);
@@ -276,5 +270,4 @@
 
     margin-bottom: calc(var(--padding-bottom) * -1)!important;
   }
-
 }

package/assets/sass/elements/{badge-tag.scss → badge-tag.css}

@@ -1,16 +1,8 @@
-@use '../_func' as *;
-
-
-
-
-
 @layer elements {
   :is(.badge, .tag) {
     font-size: 1rem;
-    line-height: rem(26);
+    line-height: 1.625rem; /* 26 */
     border: none !important;
-    //outline: 1px solid var(--colour-canvas);
-    //outline-offset: -1px;
     margin: 0;
     display: inline-block;
     text-align: center;
@@ -22,7 +14,7 @@
     margin-bottom: 1rem;
 
     &:has(+ :is(.badge, .tag)) {
-      margin-right: rem(6);
+      margin-right: 0.375rem; /* 6 */
     }
 
     &:empty {
@@ -35,14 +27,14 @@
   }
 
   .badge {
-    border-radius: rem(6);
+    border-radius: 0.375rem; /* 6 */
     padding: 0 0.5rem;
+  }
 
-    &--rounded {
-      border-radius: 1rem;
-      min-width: 1.625rem;
-      padding: 0;
-    }
+  .badge--rounded {
+    border-radius: 1rem;
+    min-width: 1.625rem;
+    padding: 0;
   }
 
   .tag {
@@ -54,11 +46,11 @@
     }
 
     &:is(:hover, :focus, .hover, :focus-within, :focus-visible) {
-      background: var(--wider-colour-hover, var(--wider-colour-1-hover));
+      background: color-mix(in oklab, var(--colour), #000000 5%);
     }
 
     &:is(:active, .active) {
-      background: var(--wider-colour-active, var(--wider-colour-1-active));
+      background: color-mix(in oklab, var(--colour), #000000 10%);
     }
 
     &:has(input:disabled),
@@ -101,7 +93,7 @@
     }
   }
 
-  // Quick fix for badges in buttons
+  /* Quick fix for badges in buttons */
   .btn :is(.badge, .tag) {
     position: relative;
     top: -1px;

package/assets/sass/elements/button__group.css

@@ -34,7 +34,8 @@
 
     .btn-tertiary {
       max-width: fit-content;
-      margin-inline: auto;
+      margin-block: 0!important;
+      margin-inline: auto!important;
       order: 3;
       reading-order: 3;
     }
@@ -66,7 +67,7 @@
 
       .btn-tertiary {
         max-width: fit-content;
-        margin-inline: 0;
+        margin-inline: 0!important;
         margin-block: auto;
         order: 1;
       }

package/assets/sass/elements/{buttons--action.scss → buttons--action.css}

@@ -1,17 +1,16 @@
-@use '../_func' as *;
-
-
-
-
-
 @layer elements {
-  // #region Action button
+  /* #region Action button */
   .btn-action {
-    --btn-border-width: #{rem(1)};
-    --btn-padding-block: #{rem(5)};
-    --btn-padding-inline: #{rem(5)};
+    --btn-border-width: 1px;
+    --btn-padding-block: 0.3125rem /* 5px */;
+    --btn-padding-inline: 0.3125rem /* 5px */;
     --btn-margin: 0.5rem;
 
+    border-radius: 0.25rem !important;
+    font-weight: 400 !important;
+    font-size: 1rem;
+    line-height: 1.25rem;
+
     &:not(.btn-primary) {
       color: var(--colour-heading);
     }
@@ -21,14 +20,9 @@
       border: var(--btn-border-width) solid var(--colour-muted);
     }
 
-    border-radius: 0.25rem !important;
-    font-weight: 400 !important;
-    font-size: 1rem;
-    line-height: 1.25rem;
-
     &.btn[class*='fa-']:before {
       content: var(--fa);
-      margin-right: rem(6);
+      margin-right: 0.375rem; /* 6 */
     }
 
     a:not(.btn-primary):is(:hover, :focus, .hover, :focus-within):not([disabled], :active, .active) &,
@@ -51,12 +45,10 @@
       color: var(--colour-heading);
     }
   }
-  // #endregion
+  /* #endregion */
 
   .btn-action:not(.btn-compact).fa-compact-only:before {
 
     display: none!important;
   }
-
-
 }

package/assets/sass/elements/{buttons--compact.scss → buttons--compact.css}

@@ -1,34 +1,27 @@
-@use '../_func' as *;
-
-
 @layer elements {
 
   .btn-compact {
     --compact-size: 3rem;
-
     padding: 0 !important;
     margin-bottom: 0.5rem;
-
-    &:not(:last-child) {
-      margin-right: 0.5rem;
-    }
     text-align: center;
-
     width: var(--compact-size);
     min-width: var(--compact-size);
     max-width: var(--compact-size);
     height: var(--compact-size) !important;
     min-height: var(--compact-size) !important;
     max-height: var(--compact-size) !important;
-
     align-content: center;
     line-height: 1 !important;
-
     text-indent: -500px;
     overflow: hidden;
     position: relative;
     font-size: 1rem;
 
+    &:not(:last-child) {
+      margin-right: 0.5rem;
+    }
+
     &:before {
       content: var(--fa);
       position: absolute;
@@ -111,29 +104,6 @@
     }
   }
 
-  [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 {
-    .btn-compact.btn-secondary:not(:hover, :focus, .hover, :focus-within):not(.btn-collapse) {
-      background-color: var(--colour-white) !important;
-      border-color: var(--colour-white) !important;
-      color: var(--colour-heading);
-    }
-
-    .btn-compact.btn-secondary:is(:hover, :focus, .hover, :focus-within):not([disabled]):not(.btn-collapse) {
-      background-color: transparent;
-      border-color: var(--colour-white) !important;
-      color: var(--colour-white);
-    }
-
-    .btn-compact.btn-secondary[disabled] {
-      background-color: var(--colour-white) !important;
-      border-color: var(--colour-white) !important;
-      color: var(--colour-heading) !important;
-    }
-  }
-
   /* #region Detect font awesome has been loaded and if not show the inner text */
   .btn-compact {
     
@@ -148,7 +118,9 @@
       .fa-chevron-down,
       .fa-plus,
       .fa-bars,
-      .fa-edit
+      .fa-edit,
+      .fa-envelope,
+      .fa-calendar
     ) {
       --iso-display: block;
       --iso-font-size: 1.5rem;
@@ -185,7 +157,7 @@
       
 
       &:before {
-        font-family: "Font Awesome 6 Pro"!important;
+        font-family: "Font Awesome 7 Pro"!important;
         content: var(--fa)!important;
         display: block;
       }

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

@@ -1,9 +1,3 @@
-@use '../_func' as *;
-
-
-
-
-
 @layer elements {
   *,
   *::before,
@@ -29,10 +23,7 @@
     outline: 0;
   }
 
-  button,
-  [type="button"], // 1
-  [type="reset"],
-  [type="submit"] {
+  :is(button,[type="button"],[type="reset"],[type="submit"]) {
     -webkit-appearance: button; // 2
 
     &:not(:disabled) {
@@ -41,12 +32,13 @@
   }
   // #endregion
 
+
   // #region button primary
   .btn {
     --btn-margin: 1rem;
     --btn-padding-block: 0.75rem;
     --btn-padding-inline: 2.5rem;
-    --btn-border-width: #{rem(2)};
+    --btn-border-width: 2px;
     --btn-font-size: 1.125rem; /* 18/16 */
     --btn-line-height: 1.25rem;
 
@@ -134,8 +126,8 @@
     --colour-btn-border-hover: var(--colour);
     --colour-btn-hover: var(--colour-primary-theme);
     position: relative;
-    padding-left: rem(56);
-    padding-right: rem(56);
+    padding-left: 3.5rem; /*56 */
+    padding-right: 3.5rem; /*56 */
 
     a:is(:hover, :focus, .hover):not([disabled], :active, .active) &,
     &:is(:hover, :focus, .hover):not([disabled], :active, .active) {
@@ -144,7 +136,7 @@
 
       &:before {
         content: '\f00c';
-        font-family: 'Font Awesome 6 Pro';
+        font-family: 'Font Awesome 7 Pro';
         margin-right: 1rem;
         font-style: inherit;
         width: 1rem;
@@ -169,7 +161,7 @@
   .btn {
     &[class*='fa-']:before {
       content: var(--fa);
-      font-family: 'Font Awesome 6 Pro';
+      font-family: 'Font Awesome 7 Pro';
       line-height: 1em;
     }
 
@@ -178,7 +170,7 @@
     }
     &.btn[class*='fa-after']:before {
       margin-right: 0;
-      margin-right: rem(6);
+      margin-right: 0.375rem; /* 6 */
       position: absolute;
       right: 1.5rem;
       top: 50%;
@@ -190,7 +182,8 @@
     }
 
     i[class*='fa-'] {
-      font-family: 'Font Awesome 6 Pro';
+      --fa-width: 1em;
+      font-family: 'Font Awesome 7 Pro';
       margin-right: 1rem;
       line-height: 1em;
       font-style: inherit;
@@ -203,6 +196,7 @@
   }
   // #endregion
 
+
   // #region button with prompt
   .btn.btn--prompt {
     &:after {
@@ -246,7 +240,7 @@
       z-index: var(--index-focus);
       color: currentColor;
       font-weight: 300;
-      font-family: 'Font Awesome 6 Pro';
+      font-family: 'Font Awesome 7 Pro';
     }
   }
   // #endregion

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

@@ -127,7 +127,7 @@
 
     &:after {
       position: absolute;
-      top: rem(10);
+      top: 0.625rem; /* 10 */
       right: 1.5rem;
       content: '';
       height: 1.5rem;

package/assets/sass/elements/buttons.scss

@@ -1,14 +1,14 @@
-@use '../_func.scss' as *;
+@use '../_func' as *;
 
 
 
 
 
-@use './buttons--global.scss';
-@use './buttons--secondary.scss';
-@use './buttons--tertiary.scss';
-@use './buttons--action.scss';
+@use './buttons--global';
+@use './buttons--secondary';
+@use './buttons--tertiary';
+@use './buttons--action';
 @use './buttons--compact';
 
-@use './buttons--special.scss';
+@use './buttons--special';
 @use './button__group.css';

package/assets/sass/elements/container.scss

@@ -138,17 +138,17 @@
 
     // Default pattern
     &:not([class*='circle-pattern-']) > .circle {
-      font-size: rem(300);
-      top: rem(-75);
-      left: rem(-200);
+      font-size: 18.75rem; /* (300) */
+      top: -4.6875rem;
+      left: -12.5rem; /* -200 */
     }
 
     &:not([class*='circle-pattern-']) > .circle ~ .circle {
-      font-size: rem(350);
+      font-size: 21.875rem;
       top: auto;
       left: auto;
-      right: rem(-100);
-      bottom: rem(-200);
+      right: -6.25rem;
+      bottom: -12.5rem; /* -200 */
     }
   }
   // #endregion