@iamproperty/components 7.1.0--beta6 → 7.2.0

package/assets/sass/elements/brand.scss

@@ -1,77 +1,83 @@
 @use '../_func' as *;
 
-.brand {
-  --svg-width: #{em(380, 130)};
+$layers: 'true' !default;
+$mobileOnly: 'false' !default;
+$darkMode: 'true' !default;
 
-  &--sold {
-    --svg-width: #{em(247, 130)};
-  }
+@include layer('elements', $layers) {
+  .brand {
+    --svg-width: #{em(380, 130)};
 
-  &--key {
-    --svg-width: #{em(228, 130)};
-  }
+    display: inline-flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: center;
+    padding-right: rem(16);
+    padding-bottom: rem(16);
+    min-width: 100%;
+    min-width: Min(100%, var(--svg-width));
+    font-size: rem(64);
+    @include var(color, --colour-brand);
 
-  &--compliance,
-  &--movebutler {
-    --svg-width: #{em(740, 130)};
-  }
+    &--sold {
+      --svg-width: #{em(247, 130)};
+    }
 
-  &--medwaylaw {
-    --svg-width: #{em(465, 130)};
-  }
+    &--key {
+      --svg-width: #{em(228, 130)};
+    }
 
-  &--openview {
-    --svg-width: #{em(475, 89)};
-  }
+    &--compliance,
+    &--movebutler {
+      --svg-width: #{em(740, 130)};
+    }
 
-  &--crm {
-    --svg-width: #{em(250, 89)};
-  }
+    &--medwaylaw {
+      --svg-width: #{em(465, 130)};
+    }
 
-  display: inline-flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  align-items: center;
-  padding-right: rem(16);
-  padding-bottom: rem(16);
-  min-width: 100%;
-  min-width: Min(100%, var(--svg-width));
-  font-size: rem(64);
-  @include var(color, --colour-brand);
+    &--openview {
+      --svg-width: #{em(475, 89)};
+    }
 
-  /* Restrict the logo colours so that only text-secondary can be defined */
-  &[class*='text-']:not(.text-secondary) {
-    color: inherit !important;
-  }
+    &--crm {
+      --svg-width: #{em(250, 89)};
+    }
 
-  svg {
-    fill: currentColor;
-    height: 1em;
-    width: 100%;
-    max-width: var(--svg-width);
-  }
+    /* 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: rem(16);
-    line-height: 1;
-    font-weight: bold;
-    display: inline-block;
-    text-decoration: none;
+    span {
+      white-space: nowrap;
+      font-size: 1rem;
+      padding-left: rem(16);
+      line-height: 1;
+      font-weight: bold;
+      display: inline-block;
+      text-decoration: none;
+    }
   }
-}
 
-a.brand:not(:hover):not(:focus):not(:active),
-a:not(:hover):not(:focus):not(:active) .brand {
-  @include var(color, --colour-brand);
-}
+  a.brand:not(:hover):not(:focus):not(:active),
+  a:not(:hover):not(:focus):not(:active) .brand {
+    @include var(color, --colour-brand);
+  }
 
-a.brand:hover,
-a.brand:focus,
-a.brand:active,
-a:hover .brand,
-a:focus .brand,
-a:active .brand {
-  color: currentColor !important;
+  a.brand:hover,
+  a.brand:focus,
+  a.brand:active,
+  a:hover .brand,
+  a:focus .brand,
+  a:active .brand {
+    color: currentColor !important;
+  }
 }

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

@@ -0,0 +1,55 @@
+@use '../_func' as *;
+
+$layers: 'true' !default;
+$mobileOnly: 'false' !default;
+$darkMode: 'true' !default;
+
+@include layer('elements', $layers) {
+  // #region Action button
+  .btn-action {
+    --btn-border-width: #{rem(1)};
+    --btn-padding-block: #{rem(5)};
+    --btn-padding-inline: #{rem(5)};
+    --btn-margin: #{rem(8)};
+
+    &:not(.btn-primary) {
+      color: var(--colour-heading);
+    }
+
+    &:not(.btn-primary):not(.border-0) {
+      background-color: var(--colour-canvas-2);
+      border: var(--btn-border-width) solid var(--colour-muted);
+    }
+
+    border-radius: rem(4) !important;
+    font-weight: 400 !important;
+    font-size: 1rem;
+    line-height: rem(20);
+
+    &.btn[class*='fa-']:before {
+      content: var(--fa);
+      margin-right: rem(6);
+    }
+
+    a:not(.btn-primary):is(:hover, :focus, .hover, :focus-within):not([disabled], :active, .active) &,
+    &:not(.btn-primary):is(:hover, :focus, .hover, :focus-within):not([disabled], :active, .active) {
+      background: var(--colour-btn-action-hover-bg);
+    }
+
+    .btn-primary:is(:hover, :focus, .hover, :focus-within):not([disabled], :active, .active) &,
+    &.btn-primary:is(:hover, :focus, .hover, :focus-within):not([disabled], :active, .active) {
+      filter: brightness(90%);
+      background: var(--colour-btn-bg);
+      border: var(--btn-border-width) solid var(--colour-btn-border);
+      color: var(--colour-btn);
+    }
+
+    a:is(:active, .active):not([disabled]):not(.btn-primary) &,
+    &:is(:active, .active):not([disabled]):not(.btn-primary) {
+      filter: brightness(85%);
+      transition: all 0.1s;
+      color: var(--colour-heading);
+    }
+  }
+  // #endregion
+}

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

@@ -0,0 +1,135 @@
+@use '../_func' as *;
+
+$layers: 'true' !default;
+$mobileOnly: 'false' !default;
+$darkMode: 'true' !default;
+
+@include layer('elements', $layers) {
+  // #region btn compact
+  .btn-compact {
+    --compact-size: #{rem(48)};
+
+    padding: 0 !important;
+    margin-bottom: rem(8);
+
+    &:not(:last-child) {
+      margin-right: rem(8);
+    }
+    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;
+
+    line-height: var(--compact-size) !important;
+
+    text-indent: -500px;
+    overflow: hidden;
+    position: relative;
+    font-size: rem(16);
+
+    &:before {
+      content: var(--fa);
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      text-indent: 0;
+      line-height: calc(var(--compact-size) - #{rem(4)});
+      font-weight: 900;
+    }
+
+    &[class*='fa-']:before {
+      line-height: calc(var(--compact-size) - #{rem(4)});
+    }
+
+    &.btn-sm {
+      --compact-size: #{rem(40)};
+      font-size: 1rem;
+      padding: 0 !important;
+    }
+
+    &.btn-action {
+      --compact-size: #{rem(32)};
+      font-size: 1rem;
+
+      &:before {
+        font-size: 1em;
+        font-weight: 400;
+      }
+    }
+
+    &.btn-secondary {
+      --colour-btn-bg: transparent;
+      --colour-btn-border: transparent;
+      border-color: transparent;
+
+      &:not([class*='colour-']) {
+        --colour: var(--colour-light);
+      }
+    }
+
+    &.btn-secondary:is(:hover, :focus, .hover, :active, .active, [aria-expanded], :focus-within):not([disabled]):not(
+        .btn-collapse
+      ) {
+      background-color: var(--colour);
+      color: var(--colour-primary-theme);
+      border-color: var(--colour);
+
+      &:is(.colour-primary, .colour-dark, .colour-danger, .colour-black) {
+        color: var(--colour-inverted);
+      }
+    }
+
+    &[data-number] {
+      position: relative;
+    }
+    &[data-number]:after {
+      content: attr(data-number);
+      position: absolute;
+      top: 0.5em;
+      z-index: 99;
+      background: var(--colour-danger);
+      height: 1.5em;
+      width: 1.5em;
+      border-radius: 50%;
+      text-indent: 0;
+      left: 50%;
+      font-size: 0.5em;
+      line-height: 1.5em;
+      text-align: center;
+      color: white;
+      letter-spacing: -0.1em;
+      font-family: arial, sans-serif;
+    }
+  }
+
+  [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-inverted) !important;
+      border-color: var(--colour-inverted) !important;
+      color: var(--colour-primary-theme);
+    }
+
+    .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);
+    }
+
+    .btn-compact.btn-secondary[disabled] {
+      background-color: var(--colour-inverted) !important;
+      border-color: var(--colour-inverted) !important;
+      color: var(--colour-primary-theme) !important;
+    }
+  }
+
+  // #endregion
+}

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

@@ -0,0 +1,322 @@
+@use '../_func' as *;
+
+$layers: 'true' !default;
+$mobileOnly: 'false' !default;
+$darkMode: 'true' !default;
+
+@include layer('elements', $layers) {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  // #region reset
+  button {
+    // stylelint-disable-next-line property-disallowed-list
+    border-radius: 0;
+    text-transform: none;
+    margin: 0; // 1
+    font-family: inherit;
+    @include font-size(inherit);
+    line-height: inherit;
+  }
+
+  [role='button'] {
+    cursor: pointer;
+  }
+  button:focus:not(:focus-visible) {
+    outline: 0;
+  }
+
+  button,
+[type="button"], // 1
+[type="reset"],
+[type="submit"] {
+    -webkit-appearance: button; // 2
+
+    @if $enable-button-pointers {
+      &: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-border-width: #{rem(2)};
+    --btn-font-size: #{rem(18)};
+    --btn-line-height: #{rem(20)};
+
+    display: inline-block;
+    font-weight: bold;
+    text-align: left;
+    text-decoration: none;
+    vertical-align: middle;
+    cursor: pointer;
+    user-select: none;
+
+    color: var(--colour-btn);
+
+    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);
+    margin-bottom: var(--btn-margin);
+
+    transition:
+      background 0.5s,
+      color 0.5s;
+    height: auto;
+    max-width: fit-content;
+    appearance: none;
+    white-space: nowrap;
+
+    @include media-breakpoint-up(sm, $mobileOnly) {
+      --btn-margin: #{rem(24)};
+    }
+
+    &:not(.btn-secondary)[class*='colour-'] {
+      --colour-btn-bg: var(--colour);
+      --colour-btn-border: var(--colour);
+    }
+
+    &:is(.colour-primary, .colour-dark, .colour-danger, .colour-black) {
+      --colour-btn: #{$colour-inverted};
+    }
+
+    &:not(.border-0) {
+      background: var(--colour-btn-bg);
+      border: var(--btn-border-width) solid var(--colour-btn-border);
+    }
+
+    &:not(:last-child) {
+      margin-right: var(--btn-margin);
+    }
+
+    a:is(:hover, :focus, .hover, :focus-within):not([disabled], :active, .active) &,
+    &:is(:hover, :focus, .hover, :focus-within):not([disabled], :active, .active) {
+      outline: 0;
+      text-decoration: none;
+
+      background: var(--colour-btn-bg-hover);
+      color: var(--colour-btn-hover);
+      border-radius: rem(24);
+    }
+
+    a:is(:active, .active):not([disabled]) &,
+    &:is(:active, .active):not([disabled]) {
+      filter: brightness(85%);
+      transition:
+        background 0.1s,
+        color 0.1s;
+      color: var(--colour-btn);
+      border-radius: rem(24);
+    }
+
+    a:disabled &,
+    &:disabled,
+    [disabled] &,
+    &[disabled] {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+  }
+  // #endregion
+
+  // #region btn with colour success
+  .btn.colour-success {
+    --colour-btn-bg-hover: var(--colour);
+    --colour-btn-border-hover: var(--colour);
+    --colour-btn-hover: var(--colour-primary-theme);
+    position: relative;
+    padding-left: rem(56);
+    padding-right: rem(56);
+
+    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);
+
+      &:before {
+        content: '\f00c';
+        font-family: 'Font Awesome 6 Pro';
+        margin-right: 1rem;
+        font-style: inherit;
+        width: 1rem;
+        display: inline-block;
+        height: var(--btn-line-height);
+        vertical-align: bottom;
+      }
+    }
+  }
+  // #endregion
+
+  // #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)};
+  }
+  // #endregion
+
+  // #region button with icon
+  .btn {
+    &[class*='fa-']:before {
+      content: var(--fa);
+      font-family: 'Font Awesome 6 Pro';
+      line-height: 1em;
+    }
+
+    &.btn[class*='fa-after'] {
+      padding-right: 4rem;
+    }
+    &.btn[class*='fa-after']:before {
+      margin-right: 0;
+      margin-right: rem(6);
+      position: absolute;
+      right: 1.5rem;
+      top: 50%;
+      transform: translate(0, -50%);
+    }
+
+    &:not(.btn-compact):before {
+      margin-right: 1rem;
+    }
+
+    i[class*='fa-'] {
+      font-family: 'Font Awesome 6 Pro';
+      margin-right: 1rem;
+      line-height: 1em;
+      font-style: inherit;
+
+      &:not(:first-child) {
+        margin-left: 1rem;
+        margin-right: 0;
+      }
+    }
+  }
+  // #endregion
+
+  // #region button with prompt
+  .btn.btn--prompt {
+    &:after {
+      content: '';
+      height: var(--btn-line-height);
+      width: 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;
+      margin-left: 1rem;
+    }
+
+    a:is(:hover, :focus, .hover):not([disabled], :active, .active) &,
+    &:is(:hover, :focus, .hover):not([disabled], :active, .active) {
+      &:after {
+        margin-left: 1.5rem;
+        margin-right: -0.5rem;
+      }
+    }
+  }
+  // #endregion
+
+  // #region Select as button
+
+  .btn:has(select) {
+    position: relative;
+    padding-right: rem(56);
+
+    &:not(.mw-100) {
+      max-width: rem(112 + 40 + 56);
+    }
+
+    select {
+      all: unset !important;
+      margin: calc(rem(-12)) calc(rem(-40)) !important;
+      padding: var(--btn-padding-block) var(--btn-padding-inline) !important;
+      padding-right: rem(56) !important;
+      margin-right: rem(-56) !important;
+      border-radius: rem(24) !important;
+      appearance: none !important;
+      background: none !important;
+      border: none !important;
+      color: currentColor !important;
+      display: block;
+      max-width: 100% !important;
+      outline: none;
+      font-weight: bold;
+      font-size: var(--btn-font-size) !important;
+      line-height: var(--btn-line-height) !important;
+
+      option {
+        padding: 0;
+        text-align: left;
+        color: var(--colour-primary);
+      }
+    }
+
+    &:after {
+      position: absolute;
+      top: rem(10);
+      right: rem(32);
+
+      content: '';
+      height: rem(24);
+      width: 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;
+      margin-left: 1rem;
+      transform: rotate(90deg);
+      pointer-events: none;
+    }
+
+    &.active:after {
+      transform: rotate(-90deg);
+    }
+  }
+
+  .btn:has(select:focus):after {
+    transform: rotate(-90deg);
+  }
+
+  // #endregion
+
+  // #region button that opens up a filter dialog
+  .btn-filter {
+    &:after {
+      content: '\f1de';
+      display: inline-block;
+      margin-left: 1em;
+      margin-bottom: -0.15em;
+      height: 1em;
+      width: 1em;
+      z-index: var(--index-focus);
+      color: currentColor;
+      font-weight: 300;
+      font-family: 'Font Awesome 6 Pro';
+    }
+  }
+  // #endregion
+}

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

@@ -0,0 +1,24 @@
+@use '../_func' as *;
+
+$layers: 'true' !default;
+$mobileOnly: 'false' !default;
+$darkMode: 'true' !default;
+
+@include layer('elements', $layers) {
+  // #region secondary button
+  .btn-secondary {
+    color: var(--colour-btn-secondary);
+
+    &:not(.border-0) {
+      background: var(--colour-btn-secondary-bg);
+      border: 2px solid var(--colour-btn-secondary-border);
+    }
+  }
+
+  a:is(:hover, :focus, .hover, :active, .active):not([disabled]) .btn-secondary,
+  .btn-secondary:is(:hover, :focus, .hover, :focus-within, :active, .active):not([disabled]) {
+    background: var(--colour-btn-secondary-bg-hover);
+    color: var(--colour-btn-secondary-hover);
+  }
+  // #endregion
+}