@iamproperty/components 7.1.0--beta7 → 7.2.0

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

@@ -1,99 +1,105 @@
 @use '../_func' as *;
 
-:is(.badge, .tag) {
-  font-size: rem(16);
-  line-height: rem(26);
-  border: none !important;
-  //outline: 1px solid var(--colour-canvas);
-  //outline-offset: -1px;
-  margin: 0;
-  display: inline-block;
-  text-align: center;
-  white-space: nowrap;
-  max-width: fit-content;
-  color: #262626;
-  position: relative;
-  background: var(--wider-colour, var(--wider-colour-1));
-  margin-bottom: 1rem;
-
-  &:has(+ :is(.badge, .tag)) {
-    margin-right: rem(6);
+$layers: 'true' !default;
+$mobileOnly: 'false' !default;
+$darkMode: 'true' !default;
+
+@include layer('elements', $layers) {
+  :is(.badge, .tag) {
+    font-size: rem(16);
+    line-height: rem(26);
+    border: none !important;
+    //outline: 1px solid var(--colour-canvas);
+    //outline-offset: -1px;
+    margin: 0;
+    display: inline-block;
+    text-align: center;
+    white-space: nowrap;
+    max-width: fit-content;
+    color: #262626;
+    position: relative;
+    background: var(--wider-colour, var(--wider-colour-1));
+    margin-bottom: 1rem;
+
+    &:has(+ :is(.badge, .tag)) {
+      margin-right: rem(6);
+    }
+
+    &:empty {
+      display: none;
+    }
+
+    &:is(.bg-primary, .bg-dark, .bg-danger) {
+      color: #{$colour-inverted} !important;
+    }
   }
 
-  &:empty {
-    display: none;
-  }
+  .badge {
+    border-radius: rem(6);
+    padding: 0 rem(8);
 
-  &:is(.bg-primary, .bg-dark, .bg-danger) {
-    color: #{$colour-inverted} !important;
+    &--rounded {
+      border-radius: 1rem;
+      min-width: 1.625rem;
+      padding: 0;
+    }
   }
-}
-
-.badge {
-  border-radius: rem(6);
-  padding: 0 rem(8);
 
-  &--rounded {
-    border-radius: 1rem;
-    min-width: 1.625rem;
-    padding: 0;
+  .tag {
+    border-radius: rem(16);
+    padding: 0 rem(16);
+
+    &:after {
+      content: '\2715';
+      margin-left: 0.6em;
+      font-weight: bold;
+    }
+
+    &:is(:hover, :focus, .hover, :focus-within, :focus-visible) {
+      background: var(--wider-colour-hover, var(--wider-colour-1-hover));
+    }
+
+    &:is(:active, .active) {
+      background: var(--wider-colour-active, var(--wider-colour-1-active));
+    }
+
+    &:has(input:disabled),
+    &:disabled {
+      background: var(--wider-colour-1) !important;
+      color: #99adb1 !important;
+    }
   }
-}
-
-.tag {
-  border-radius: rem(16);
-  padding: 0 rem(16);
 
-  &:after {
-    content: '\2715';
-    margin-left: 0.6em;
-    font-weight: bold;
+  .tag.tag--not-set,
+  iam-multiselect:not(:defined) .tag,
+  .tag.tag--toggle {
+    background: var(--colour-canvas);
+    outline: 1px solid var(--colour-border);
   }
 
-  &:is(:hover, :focus, .hover, :focus-within, :focus-visible) {
-    background: var(--wider-colour-hover, var(--wider-colour-1-hover));
-  }
+  .tag.tag--toggle {
+    &:after {
+      display: none;
+    }
 
-  &:is(:active, .active) {
-    background: var(--wider-colour-active, var(--wider-colour-1-active));
-  }
+    &:is(:hover, :focus) {
+      background: #eeeeee;
+    }
 
-  &:has(input:disabled),
-  &:disabled {
-    background: var(--wider-colour-1) !important;
-    color: #99adb1 !important;
-  }
-}
+    &:is(:active) {
+      background: #e0e0e0;
+    }
 
-.tag.tag--not-set,
-iam-multiselect:not(:defined) .tag,
-.tag.tag--toggle {
-  background: var(--colour-canvas);
-  outline: 1px solid var(--colour-border);
-}
-
-.tag.tag--toggle {
-  &:after {
-    display: none;
-  }
-
-  &:is(:hover, :focus) {
-    background: #eeeeee;
+    &:has(input:checked),
+    &.selected {
+      background: #e9f9fd;
+      outline: 1px solid #1ebee6;
+    }
   }
 
-  &:is(:active) {
-    background: #e0e0e0;
+  // Quick fix for badges in buttons
+  .btn :is(.badge, .tag) {
+    position: relative;
+    top: -1px;
   }
-
-  &:has(input:checked),
-  &.selected {
-    background: #e9f9fd;
-    outline: 1px solid #1ebee6;
-  }
-}
-
-// Quick fix for badges in buttons
-.btn :is(.badge, .tag) {
-  position: relative;
-  top: -1px;
 }

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
+}