@iamproperty/components 7.1.0--beta6 → 7.2.0

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

@@ -0,0 +1,57 @@
+@use '../_func' as *;
+
+$layers: 'true' !default;
+$mobileOnly: 'false' !default;
+$darkMode: 'true' !default;
+
+@include layer('elements', $layers) {
+  // #region Tertiary Button
+
+  .btn.btn-tertiary {
+    background-color: transparent;
+    border: none;
+    color: var(--colour-link);
+    margin: 0 var(--btn-margin) var(--btn-margin) 0;
+    padding: 0;
+    font-size: rem(18);
+    font-weight: normal;
+    line-height: rem(24);
+    min-height: rem(24);
+    position: relative;
+
+    &:after {
+      position: absolute;
+      content: '';
+      top: 100%;
+      left: 50%;
+      height: 2px;
+      width: 100%;
+      transform: translate(-50%, 0);
+      background: var(--colour-underline);
+      transition: width 0.5s;
+    }
+
+    &.text-decoration-none:after {
+      width: 0%;
+    }
+
+    [class*='fa-'] {
+      margin-left: 0;
+      margin-right: 0.5rem;
+    }
+    [class*='fa-']:not(:first-child) {
+      margin-left: 0.5rem;
+      margin-right: 0;
+    }
+
+    &:is(:hover, :focus, .hover, :focus-within):not([disabled], :disabled, :active, .active) {
+      &:after {
+        width: 60% !important;
+      }
+    }
+    &:is(:active, .active):not([disabled], :disabled) {
+      color: var(--colour-active);
+    }
+  }
+  // #endregion
+}

package/assets/sass/elements/buttons.scss

@@ -1,505 +1,31 @@
 @use '../_func.scss' as *;
 
-// #region rset
-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: 2px;
-
-  @include media-breakpoint-up(sm) {
-    --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};
-  }
-
-  display: inline-block;
-  font-weight: bold;
-  text-align: left;
-  text-decoration: none;
-  vertical-align: middle;
-  cursor: pointer;
-  user-select: none;
-
-  background: var(--colour-btn-bg);
-  border: var(--btn-border-width) solid var(--colour-btn-border);
-  color: var(--colour-btn);
-
-  font-size: rem(18);
-  line-height: rem(24);
-  padding: calc(var(--btn-padding-block) - var(--btn-border-width))
-    calc(var(--btn-padding-inline) - var(--btn-border-width));
-  border-radius: rem(24);
-  margin-bottom: var(--btn-margin);
-
-  &:not(:last-child) {
-    margin-right: var(--btn-margin);
-  }
-  transition:
-    background 0.5s,
-    color 0.5s;
-  height: auto;
-  max-width: fit-content;
-  appearance: none;
-  white-space: nowrap;
-
-  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 {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
-}
-// #endregion
-
-// #region secondary button
-.btn-secondary {
-  background: var(--colour-btn-secondary-bg);
-  border: 2px solid var(--colour-btn-secondary-border);
-  color: var(--colour-btn-secondary);
-}
-
-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
-
-// #region Action button
-.btn-action {
-  --btn-border-width: 1px;
-  --btn-padding-block: #{rem(6)};
-  --btn-padding-inline: #{rem(6)};
-
-  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);
-
-  color: var(--colour-heading);
-
-  &.btn[class*='fa-']:before {
-    content: var(--fa);
-    margin-right: rem(6);
-  }
-
-  a:is(:hover, :focus, .hover, :focus-within):not([disabled], :active, .active) &,
-  &:is(:hover, :focus, .hover, :focus-within):not([disabled], :active, .active) {
-    background: var(--colour-btn-action-hover-bg);
-  }
-
-  a:is(:active, .active):not([disabled]) &,
-  &:is(:active, .active):not([disabled]) {
-    filter: brightness(85%);
-    transition: all 0.1s;
-    color: var(--colour-heading);
-  }
-}
-// #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: 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;
-  }
-
-  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 button small and tag
-.btn.btn-sm {
-  --btn-padding-block: #{rem(8)};
-  --btn-padding-inline: #{rem(32)};
-}
-// #endregion
-
-// #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: calc(var(--compact-size));
-  min-width: calc(var(--compact-size));
-  max-width: calc(var(--compact-size));
-  height: calc(var(--compact-size)) !important;
-  min-height: calc(var(--compact-size)) !important;
-  max-height: calc(var(--compact-size)) !important;
-
-  line-height: calc(var(--compact-size) - var(--btn-border-width) - var(--btn-border-width)) !important;
-
-  text-indent: -500px;
-  overflow: hidden;
-  position: relative;
-  font-size: rem(20);
-
-  &:before {
-    content: var(--fa);
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    text-indent: 0;
-    line-height: calc(var(--compact-size) - var(--btn-border-width) - var(--btn-border-width));
-    font-weight: 900;
-  }
-
-  &[class*='fa-']:before {
-    line-height: calc(var(--compact-size) - var(--btn-border-width) - var(--btn-border-width)) !important;
-  }
-
-  &.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-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: transparent !important;
-
-    &: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;
-  }
-}
-// #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: rem(24);
-      vertical-align: bottom;
-    }
-  }
-}
-// #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;
-
-    padding: calc(rem(12) - 2px) calc(rem(40) - 2px) !important;
-    margin: calc(rem(-12)) calc(rem(-40)) !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: 1.125rem !important;
-    line-height: 1.5rem !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
-
-// #region Tertiary Button
-
-.btn.btn-tertiary {
-  background-color: transparent;
-  border: none;
-  color: var(--colour-link);
-  margin: 0 var(--btn-margin) var(--btn-margin) 0;
-  padding: 0;
-  font-size: rem(18);
-  font-weight: normal;
-  line-height: rem(24);
-  min-height: rem(24);
-  position: relative;
-
-  &:after {
-    position: absolute;
-    content: '';
-    top: 100%;
-    left: 50%;
-    height: 2px;
-    width: 100%;
-    transform: translate(-50%, 0);
-    background: var(--colour-underline);
-    transition: width 0.5s;
-  }
-
-  &.text-decoration-none:after {
-    width: 0%;
-  }
-
-  [class*='fa-'] {
-    margin-left: 0;
-    margin-right: 0.5rem;
-  }
-  [class*='fa-']:not(:first-child) {
-    margin-left: 0.5rem;
-    margin-right: 0;
-  }
-
-  &:is(:hover, :focus, .hover, :focus-within):not([disabled], :active, .active) {
-    &:after {
-      width: 60% !important;
-    }
-  }
-  &:is(:active, .active):not([disabled]) {
-    color: var(--colour-active);
-  }
-}
-// #endregion
+$layers: 'true' !default;
+$mobileOnly: 'false' !default;
+$darkMode: 'true' !default;
+
+@use './buttons--global.scss' with (
+  $layers: $layers,
+  $darkMode: $darkMode,
+  $mobileOnly: $mobileOnly
+);
+@use './buttons--secondary.scss' with (
+  $layers: $layers,
+  $darkMode: $darkMode,
+  $mobileOnly: $mobileOnly
+);
+@use './buttons--tertiary.scss' with (
+  $layers: $layers,
+  $darkMode: $darkMode,
+  $mobileOnly: $mobileOnly
+);
+@use './buttons--action.scss' with (
+  $layers: $layers,
+  $darkMode: $darkMode,
+  $mobileOnly: $mobileOnly
+);
+@use './buttons--compact.scss' with (
+  $layers: $layers,
+  $darkMode: $darkMode,
+  $mobileOnly: $mobileOnly
+);