@iamproperty/components 7.6.0 → 7.6.2

package/assets/sass/components/testimonial.scss

@@ -4,7 +4,7 @@
   --testimonial-padding: 1rem;
   --testimonial-spacing: 1rem;
 
-  @include media-breakpoint-up(md, $mobileOnly) {
+  @media screen and (min-width: 62em) {
     --testimonial-padding: 4rem;
     --testimonial-spacing: 2rem;
   }
@@ -32,10 +32,10 @@
     touch-action: pan-x;
     height: rem(230);
 
-    @include media-breakpoint-up(sm, $mobileOnly) {
+    @media screen and (min-width: 36em) {
       height: rem(340);
     }
-    @include media-breakpoint-up(md, $mobileOnly) {
+    @media screen and (min-width: 62em) {
       min-height: 100%;
       scroll-snap-type: y mandatory;
       flex-direction: column;
@@ -61,7 +61,7 @@
     left: 50%;
     transform: translate(-50%, 50%);
 
-    @include media-breakpoint-up(md, $mobileOnly) {
+    @media screen and (min-width: 62em) {
       left: auto;
       bottom: auto;
       right: 0;
@@ -75,10 +75,10 @@
   h2 {
     padding: 2rem var(--testimonial-padding) 0 var(--testimonial-padding);
 
-    @include media-breakpoint-up(sm, $mobileOnly) {
+    @media screen and (min-width: 36em) {
       padding-top: 3rem;
     }
-    @include media-breakpoint-up(md, $mobileOnly) {
+    @media screen and (min-width: 62em) {
       padding-top: 9rem;
     }
   }
@@ -88,7 +88,7 @@
     margin: 0 var(--testimonial-padding) var(--testimonial-spacing) var(--testimonial-padding);
     position: relative;
 
-    @include media-breakpoint-up(md, $mobileOnly) {
+    @media screen and (min-width: 62em) {
       --display-none: block;
 
       blockquote:not(.largest) {

package/assets/sass/components/timeline.scss

@@ -10,7 +10,7 @@
   --img-order: 1;
 
   position: relative;
-  padding-top: rem(4);
+  padding-top: 0.25rem;
   padding-left: var(--pl);
   padding-bottom: 1rem;
   width: 100%;
@@ -23,7 +23,7 @@
   .timeline__container:not(.timeline--simple) & {
     align-items: center;
 
-    @include media-breakpoint-up(md, $mobileOnly) {
+    @media screen and (min-width: 62em) {
       --img-order: 0;
       --circle-pos: 50%;
       --line-length: 50%;

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

@@ -61,7 +61,7 @@
     max-width: #{rem(270)};
     background: var(--colour-primary);
     color: var(--colour-white);
-    padding: rem(24);
+    padding: 1.5rem;
     border: none;
     border-radius: 0.5rem;
     box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.11);
@@ -74,11 +74,11 @@
       color: inherit;
     }
 
-    @include media-breakpoint-up(sm, $mobileOnly) {
+    @media screen and (min-width: 36em) {
       max-width: #{rem(335)};
     }
 
-    @include media-breakpoint-up(md, $mobileOnly) {
+    @media screen and (min-width: 62em) {
       max-width: #{rem(360)};
     }
 

package/assets/sass/core.scss

@@ -1,16 +1,4 @@
 @charset "UTF-8";
 
-$root: ':root' !default;
-$layers: 'true' !default;
-$mobileOnly: 'false' !default;
-$darkMode: 'true' !default;
-$optionalText: 'true' !default;
-
 @use '_fonts';
-@use '_corefiles.scss' with (
-  $root: $root,
-  $layers: $layers,
-  $mobileOnly: $mobileOnly,
-  $darkMode: $darkMode,
-  $optionalText: $optionalText
-);
+@use '_corefiles.scss';

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

@@ -1,22 +1,22 @@
 @use '../_func' as *;
 
-$layers: 'true' !default;
-$mobileOnly: 'false' !default;
-$darkMode: 'true' !default;
 
-@include layer('elements', $layers) {
+
+
+
+@layer elements {
   .admin-panel {
-    --padding-x: #{rem(24)};
-    --padding-top: #{rem(16)};
-    --padding-bottom: #{rem(16)};
+    --padding-x: 1.5rem;
+    --padding-top: 1rem;
+    --padding-bottom: 1rem;
     --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);
     background-color: var(--colour-canvas-2);
-    border-radius: rem(8);
-    margin-bottom: rem(24);
+    border-radius: 0.5rem;
+    margin-bottom: 1.5rem;
     outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
     overflow: hidden;
 
@@ -45,24 +45,24 @@ $darkMode: 'true' !default;
 
       margin: calc(var(--padding-top) * -1) calc(var(--padding-x) * -1) var(--padding-top) calc(var(--padding-x) * -1);
       display: block;
-      border-top-left-radius: rem(8);
-      border-top-right-radius: rem(8);
+      border-top-left-radius: 0.5rem;
+      border-top-right-radius: 0.5rem;
     }
 
     > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):not(.lead):first-child,
     .admin-panel__heading > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):not(.lead) {
-      font-size: rem(18);
-      line-height: rem(24);
+      font-size: 1.125rem; /* 18/16 */
+      line-height: 1.5rem;
       font-weight: bold;
-      padding: rem(16) rem(24);
+      padding: 1rem 1.5rem;
     }
 
     > :is(.admin-panel__heading):first-child {
-      display: flex;
+      display: flex!important;
       flex-wrap: wrap;
       gap: 1rem;
       align-items: center;
-      padding: rem(16) rem(24);
+      padding: 1rem 1.5rem;
 
       > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
         padding: 0;
@@ -92,7 +92,7 @@ $darkMode: 'true' !default;
     }
 
     :is(iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, iam-table-ajax, .iam-table) {
-      margin: 0 0 rem(32) 0;
+      margin: 0 0 2rem 0;
       padding: 0;
       box-shadow: none;
       background: none;
@@ -108,7 +108,7 @@ $darkMode: 'true' !default;
 
     p {
       max-width: 100%;
-      padding-bottom: rem(24);
+      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) {
@@ -164,7 +164,7 @@ $darkMode: 'true' !default;
       grid-template-columns: subgrid !important;
 
       > *:not(:first-child) {
-        grid-column: var(--col-start, col-1-start) / var(--col-end, col-#{$columns}-end);
+        grid-column: var(--col-start, col-1-start) / var(--col-end, col-12-end);
       }
     }
   }
@@ -172,7 +172,7 @@ $darkMode: 'true' !default;
   [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, .mh-fluid)
     ) {
-    min-height: calc(100% - #{rem(24)});
+    min-height: calc(100% - 1.5rem);
   }
 
   // #region Has actionbar
@@ -186,10 +186,6 @@ $darkMode: 'true' !default;
       margin-inline: calc(var(--padding-x) * -1);
       margin-bottom: var(--padding-top);
 
-      @include light-mode($darkMode) {
-        background: #eeeeee;
-      }
-
       &:first-child {
         margin-top: calc(var(--padding-top) * -1);
       }

package/assets/sass/elements/badge-tag.scss

@@ -1,12 +1,12 @@
 @use '../_func' as *;
 
-$layers: 'true' !default;
-$mobileOnly: 'false' !default;
-$darkMode: 'true' !default;
 
-@include layer('elements', $layers) {
+
+
+
+@layer elements {
   :is(.badge, .tag) {
-    font-size: rem(16);
+    font-size: 1rem;
     line-height: rem(26);
     border: none !important;
     //outline: 1px solid var(--colour-canvas);
@@ -30,13 +30,13 @@ $darkMode: 'true' !default;
     }
 
     &:is(.bg-primary, .bg-dark, .bg-danger) {
-      color: #{$colour-inverted} !important;
+      color: #fcfcfc !important;
     }
   }
 
   .badge {
     border-radius: rem(6);
-    padding: 0 rem(8);
+    padding: 0 0.5rem;
 
     &--rounded {
       border-radius: 1rem;
@@ -46,8 +46,8 @@ $darkMode: 'true' !default;
   }
 
   .tag {
-    border-radius: rem(16);
-    padding: 0 rem(16);
+    border-radius: 1rem;
+    padding: 0 1rem;
 
     &:not(:has(i)):after {
       content: '\2715';

package/assets/sass/elements/brand.css

@@ -0,0 +1,80 @@
+@layer elements {
+  :is(.brand, .logo) {
+    --svg-width: 2.923076923076923em; /* 380/130 */
+
+    display: inline-flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: center;
+    padding-right: 1rem;
+    padding-bottom: 1rem;
+    min-width: 100%;
+    min-width: min(100%, var(--svg-width));
+    font-size: 4rem;
+    color: var(--colour-brand);
+
+    /* Restrict the logo colours so that only text-secondary can be defined */
+    &[class*='text-']:not(.text-secondary) {
+      color: inherit !important;
+    }
+
+    svg {
+      fill: currentColor;
+      height: 1em;
+      width: 100%;
+      max-width: var(--svg-width);
+    }
+
+    & span {
+      white-space: nowrap;
+      font-size: 1rem;
+      padding-left: 1rem;
+      line-height: 1;
+      font-weight: bold;
+      display: inline-block;
+      text-decoration: none;
+    }
+  }
+
+  .brand--sold {
+    --svg-width: 1.9em; /* 247/130 */
+  }
+
+  .brand--key {
+    --svg-width: 1.753846153846154em; /* 228/130 */
+  }
+
+  :is(.brand--compliance,.brand--movebutler) {
+    --svg-width: 5.692307692307692em; /* 740/130 */
+  }
+
+  .brand--medwaylaw {
+    --svg-width: 3.576923076923077em; /* 465/130*/
+  }
+
+  .brand--openview {
+    --svg-width: 5.337078651685393em; /* 475/89 */
+  }
+
+  .brand--crm {
+    --svg-width: 2.808988764044944em; /* 250/89 */
+  }
+
+  a.brand:not(:hover, :focus, :active) {
+    color: var(--colour-brand);
+  }
+
+  a:not(:hover, :focus, :active) .brand {
+    color: var(--colour-brand);
+  }
+
+  :is(a.brand:hover, a.brand:focus, a.brand:active) {
+    
+    color: currentColor !important;
+  }
+  
+  :is(a:hover, a:focus, a:active) .brand {
+    color: currentColor !important;
+  }
+}
+

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

@@ -1,16 +1,16 @@
 @use '../_func' as *;
 
-$layers: 'true' !default;
-$mobileOnly: 'false' !default;
-$darkMode: 'true' !default;
 
-@include layer('elements', $layers) {
+
+
+
+@layer elements {
   // #region Action button
   .btn-action {
     --btn-border-width: #{rem(1)};
     --btn-padding-block: #{rem(5)};
     --btn-padding-inline: #{rem(5)};
-    --btn-margin: #{rem(8)};
+    --btn-margin: 0.5rem;
 
     &:not(.btn-primary) {
       color: var(--colour-heading);
@@ -21,10 +21,10 @@ $darkMode: 'true' !default;
       border: var(--btn-border-width) solid var(--colour-muted);
     }
 
-    border-radius: rem(4) !important;
+    border-radius: 0.25rem !important;
     font-weight: 400 !important;
     font-size: 1rem;
-    line-height: rem(20);
+    line-height: 1.25rem;
 
     &.btn[class*='fa-']:before {
       content: var(--fa);
@@ -74,7 +74,7 @@ $darkMode: 'true' !default;
 
     &:after {
       top: 0.2rem;
-      right: rem(8);
+      right: 0.5rem;
     }
   }
   // #endregion

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

@@ -1,19 +1,19 @@
 @use '../_func' as *;
 
-$layers: 'true' !default;
-$mobileOnly: 'false' !default;
-$darkMode: 'true' !default;
 
-@include layer('elements', $layers) {
+
+
+
+@layer elements {
   // #region btn compact
   .btn-compact {
-    --compact-size: #{rem(48)};
+    --compact-size: 3rem;
 
     padding: 0 !important;
-    margin-bottom: rem(8);
+    margin-bottom: 0.5rem;
 
     &:not(:last-child) {
-      margin-right: rem(8);
+      margin-right: 0.5rem;
     }
     text-align: center;
 
@@ -29,7 +29,7 @@ $darkMode: 'true' !default;
     text-indent: -500px;
     overflow: hidden;
     position: relative;
-    font-size: rem(16);
+    font-size: 1rem;
 
     &:before {
       content: var(--fa);
@@ -39,12 +39,12 @@ $darkMode: 'true' !default;
       width: 100%;
       height: 100%;
       text-indent: 0;
-      line-height: calc(var(--compact-size) - #{rem(4)});
+      line-height: calc(var(--compact-size) - 0.25rem);
       font-weight: 900;
     }
 
     &[class*='fa-']:before {
-      line-height: calc(var(--compact-size) - #{rem(4)});
+      line-height: calc(var(--compact-size) - 0.25rem);
 
       @container style(--theme: dark) {
         color: white;
@@ -52,13 +52,13 @@ $darkMode: 'true' !default;
     }
 
     &.btn-sm {
-      --compact-size: #{rem(40)};
+      --compact-size: 2.5rem;
       font-size: 1rem;
       padding: 0 !important;
     }
 
     &.btn-action {
-      --compact-size: #{rem(32)};
+      --compact-size: 2rem;
       font-size: 1rem;
 
       &:before {
@@ -117,21 +117,21 @@ $darkMode: 'true' !default;
     ):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-inverted) !important;
-      border-color: var(--colour-inverted) !important;
-      color: var(--colour-primary-theme);
+      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-inverted) !important;
-      color: var(--colour-inverted);
+      border-color: var(--colour-white) !important;
+      color: var(--colour-white);
     }
 
     .btn-compact.btn-secondary[disabled] {
-      background-color: var(--colour-inverted) !important;
-      border-color: var(--colour-inverted) !important;
-      color: var(--colour-primary-theme) !important;
+      background-color: var(--colour-white) !important;
+      border-color: var(--colour-white) !important;
+      color: var(--colour-heading) !important;
     }
   }
 

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

@@ -1,10 +1,10 @@
 @use '../_func' as *;
 
-$layers: 'true' !default;
-$mobileOnly: 'false' !default;
-$darkMode: 'true' !default;
 
-@include layer('elements', $layers) {
+
+
+
+@layer elements {
   *,
   *::before,
   *::after {
@@ -18,7 +18,7 @@ $darkMode: 'true' !default;
     text-transform: none;
     margin: 0; // 1
     font-family: inherit;
-    @include font-size(inherit);
+    font-size: inherit;
     line-height: inherit;
   }
 
@@ -30,27 +30,25 @@ $darkMode: 'true' !default;
   }
 
   button,
-[type="button"], // 1
-[type="reset"],
-[type="submit"] {
+  [type="button"], // 1
+  [type="reset"],
+  [type="submit"] {
     -webkit-appearance: button; // 2
 
-    @if $enable-button-pointers {
-      &:not(:disabled) {
-        cursor: pointer; // 3
-      }
+    &:not(:disabled) {
+      cursor: pointer; // 3
     }
   }
   // #endregion
 
   // #region button primary
   .btn {
-    --btn-margin: #{rem(16)};
-    --btn-padding-block: #{rem(12)};
-    --btn-padding-inline: #{rem(40)};
+    --btn-margin: 1rem;
+    --btn-padding-block: 0.75rem;
+    --btn-padding-inline: 2.5rem;
     --btn-border-width: #{rem(2)};
-    --btn-font-size: #{rem(18)};
-    --btn-line-height: #{rem(20)};
+    --btn-font-size: 1.125rem; /* 18/16 */
+    --btn-line-height: 1.25rem;
 
     display: inline-block;
     font-weight: bold;
@@ -65,7 +63,7 @@ $darkMode: 'true' !default;
     font-size: var(--btn-font-size);
     line-height: var(--btn-line-height);
     padding: var(--btn-padding-block) var(--btn-padding-inline);
-    border-radius: rem(24);
+    border-radius: 1.5rem;
     margin-bottom: var(--btn-margin);
     background: none;
 
@@ -78,8 +76,8 @@ $darkMode: 'true' !default;
     appearance: none;
     white-space: nowrap;
 
-    @include media-breakpoint-up(sm, $mobileOnly) {
-      --btn-margin: #{rem(24)};
+    @media screen and (min-width: 36em) {
+      --btn-margin: 1.5rem;
     }
 
     &:not(.btn-secondary)[class*='colour-'] {
@@ -88,7 +86,7 @@ $darkMode: 'true' !default;
     }
 
     &:is(.colour-primary, .colour-dark, .colour-danger, .colour-black) {
-      --colour-btn: #{$colour-inverted};
+      --colour-btn: #fcfcfc;
     }
 
     &:not(.border-0) {
@@ -107,7 +105,7 @@ $darkMode: 'true' !default;
 
       background: var(--colour-btn-bg-hover);
       color: var(--colour-btn-hover);
-      border-radius: rem(24);
+      border-radius: 1.5rem;
     }
 
     a:is(:active, .active):not([disabled]) &,
@@ -117,7 +115,7 @@ $darkMode: 'true' !default;
         background 0.1s,
         color 0.1s;
       color: var(--colour-btn);
-      border-radius: rem(24);
+      border-radius: 1.5rem;
     }
 
     a:disabled &,
@@ -141,8 +139,8 @@ $darkMode: 'true' !default;
 
     a:is(:hover, :focus, .hover):not([disabled], :active, .active) &,
     &:is(:hover, :focus, .hover):not([disabled], :active, .active) {
-      padding-left: rem(40);
-      padding-right: rem(40);
+      padding-left: 2.5rem;
+      padding-right: 2.5rem;
 
       &:before {
         content: '\f00c';
@@ -160,10 +158,10 @@ $darkMode: 'true' !default;
 
   // #region button small and tag
   .btn.btn-sm {
-    --btn-padding-block: #{rem(8)};
-    --btn-padding-inline: #{rem(32)};
-    --btn-margin: #{rem(8)};
-    --btn-font-size: #{rem(16)};
+    --btn-padding-block: 0.5rem;
+    --btn-padding-inline: 2rem;
+    --btn-margin: 0.5rem;
+    --btn-font-size: 1rem;
   }
   // #endregion
 
@@ -210,7 +208,7 @@ $darkMode: 'true' !default;
     &:after {
       content: '';
       height: var(--btn-line-height);
-      width: rem(16);
+      width: 1rem;
       display: inline-block;
       background: currentColor;
       mask-image: var(--icon-arrow);
@@ -248,7 +246,7 @@ $darkMode: 'true' !default;
       
       padding-right: calc(var(--btn-padding-inline) + 2rem)!important;
 
-      border-radius: rem(24) !important;
+      border-radius: 1.5rem !important;
       appearance: none !important;
       background: none !important;
       border: none !important;
@@ -274,8 +272,8 @@ $darkMode: 'true' !default;
       right: 1.5rem;
 
       content: '';
-      height: rem(24);
-      width: rem(16);
+      height: 1.5rem;
+      width: 1rem;
       display: inline-block;
       background: currentColor;
       mask-image: var(--icon-arrow);

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

@@ -1,10 +1,10 @@
 @use '../_func' as *;
 
-$layers: 'true' !default;
-$mobileOnly: 'false' !default;
-$darkMode: 'true' !default;
 
-@include layer('elements', $layers) {
+
+
+
+@layer elements {
   // #region secondary button
   .btn-secondary {
     color: var(--colour-btn-secondary);

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

@@ -1,8 +1,8 @@
 @use '../_func' as *;
 
-$layers: 'true' !default;
-$mobileOnly: 'false' !default;
-$darkMode: 'true' !default;
+
+
+
 
 
   // #region btn compact