@iamproperty/components 7.7.1--beta5 → 7.7.1--beta6

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

@@ -1,250 +1,239 @@
-@layer elements {
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-
-  // #region reset
-  button {
-    
-    border-radius: 0;
-    text-transform: none;
-    margin: 0; // 1
-    font-family: inherit;
-    font-size: inherit;
-    line-height: inherit;
-  }
-
-  [role='button'] {
-    cursor: pointer;
-  }
-  button:focus:not(:focus-visible) {
-    outline: 0;
-  }
-
-  :is(button,[type="button"],[type="reset"],[type="submit"]) {
-    -webkit-appearance: button; // 2
-
-    &:not(:disabled) {
-      cursor: pointer; // 3
-    }
-  }
-  // #endregion
-
-
-  // #region button primary
-  .btn {
-    --btn-margin: 1rem;
-    --btn-padding-block: 0.75rem;
-    --btn-padding-inline: 2.5rem;
-    --btn-border-width: 2px;
-    --btn-font-size: 1.125rem; /* 18/16 */
-    --btn-line-height: 1.25rem;
-
-    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: 1.5rem;
-    margin-bottom: var(--btn-margin);
-    background: none;
-
-    transition:
-      border 0.5s,
-      background 0.5s,
-      color 0.5s;
-    height: auto;
-    max-width: fit-content;
-    appearance: none;
-    white-space: nowrap;
-
-    @media screen and (min-width: 36em) {
-      --btn-margin: 1.5rem;
-    }
-
-    &: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: #fcfcfc;
-    }
-
-    &: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: 1.5rem;
-    }
-
-    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: 1.5rem;
-    }
-
-    a:disabled &,
-    &:disabled,
-    [disabled] &,
-    &[disabled] {
-      opacity: 0.4;
-      cursor: not-allowed;
-    }
-  }
-  // #endregion
-
-  // #region btn with colour success
-  .btn.btn-complete {
-    --colour: var(--colour-success);
-    --colour-btn-bg-hover: var(--colour);
-    --colour-btn-border-hover: var(--colour);
-    --colour-btn-hover: var(--colour-primary-theme);
-    --colour-btn-bg: var(--colour);
-    --colour-btn-border: var(--colour);
-
-    position: relative;
-    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) {
-      padding-left: 2.5rem;
-      padding-right: 2.5rem;
-
-      &:before {
-        content: '\f00c';
-        font-family: 'Font Awesome 7 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: 0.5rem;
-    --btn-padding-inline: 2rem;
-    --btn-margin: 0.5rem;
-    --btn-font-size: 1rem;
-  }
-  // #endregion
-
-  // #region button with icon
-  .btn {
-    &[class*='fa-']:before {
-      content: var(--fa);
-      font-family: 'Font Awesome 7 Pro';
-    }
-
-    &.btn[class*='fa-after'] {
-      padding-right: 4rem;
-    }
-    &.btn[class*='fa-after']:before {
-      margin-right: 0;
-      margin-right: 0.375rem; /* 6 */
-      position: absolute;
-      right: 1.5rem;
-      top: 50%;
-      transform: translate(0, -50%);
-    }
-
-    &:not(.btn-compact):before {
-      margin-right: 1rem;
-    }
-
-    i[class*='fa-'] {
-      --fa-width: 1em;
-      font-family: 'Font Awesome 7 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: 1rem;
-      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 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 7 Pro';
-    }
-  }
-  // #endregion
-}
+@layer elements {
+
+  /* #region reset */
+  button {
+    border-radius: 0;
+    text-transform: none;
+    margin: 0;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+  }
+
+  button:focus:not(:focus-visible) {
+    outline: 0;
+  }
+
+  :is(button,[type="button"],[type="reset"],[type="submit"],[role='button']) {
+    -webkit-appearance: button;
+
+    &:not(:disabled) {
+      cursor: pointer;
+    }
+  }
+  /* #endregion */
+
+
+  /* #region button primary */
+  .btn {
+    --btn-margin: 1rem;
+    --btn-padding-block: 0.75rem;
+    --btn-padding-inline: 2.5rem;
+    --btn-border-width: 2px;
+    --btn-font-size: 1.125rem; /* 18/16 */
+    --btn-line-height: 1.25rem;
+
+    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: 1.5rem;
+    margin-bottom: var(--btn-margin);
+    background: none;
+
+    transition:
+      border 0.5s,
+      background 0.5s,
+      color 0.5s;
+    height: auto;
+    max-width: fit-content;
+    appearance: none;
+    white-space: nowrap;
+
+    @media screen and (min-width: 36em) {
+      --btn-margin: 1.5rem;
+    }
+
+    &: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: #fcfcfc;
+    }
+
+    &: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) .btn,
+  .btn: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: 1.5rem;
+  }
+
+  a:is(:active, .active):not([disabled]) .btn,
+  .btn:is(:active, .active):not([disabled]) {
+    filter: brightness(85%);
+    transition:
+      background 0.1s,
+      color 0.1s;
+    color: var(--colour-btn);
+    border-radius: 1.5rem;
+  }
+
+  a:disabled .btn,
+  .btn:disabled,
+  [disabled] .btn,
+  .btn[disabled] {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+  /* #endregion */
+
+  /* #region btn with colour success */
+  .btn.btn-complete {
+    --colour: var(--colour-success);
+    --colour-btn-bg-hover: var(--colour);
+    --colour-btn-border-hover: var(--colour);
+    --colour-btn-hover: var(--colour-primary-theme);
+    --colour-btn-bg: var(--colour);
+    --colour-btn-border: var(--colour);
+
+    position: relative;
+    padding-left: 3.5rem; /*56 */
+    padding-right: 3.5rem; /*56 */
+  }
+
+  a:is(:hover, :focus, .hover):not([disabled], :active, .active) .btn.btn-complete,
+  .btn.btn-complete:is(:hover, :focus, .hover):not([disabled], :active, .active) {
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
+
+    &:before {
+      content: '\f00c';
+      font-family: 'Font Awesome 7 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: 0.5rem;
+    --btn-padding-inline: 2rem;
+    --btn-margin: 0.5rem;
+    --btn-font-size: 1rem;
+  }
+  /* #endregion */
+
+  /* #region button with icon */
+  .btn {
+    &[class*='fa-']:before {
+      content: var(--fa);
+      font-family: 'Font Awesome 7 Pro';
+    }
+
+    &[class*='fa-after'] {
+      padding-right: 4rem;
+    }
+    &[class*='fa-after']:before {
+      margin-right: 0;
+      margin-right: 0.375rem; /* 6 */
+      position: absolute;
+      right: 1.5rem;
+      top: 50%;
+      transform: translate(0, -50%);
+    }
+
+    &:not(.btn-compact):before {
+      margin-right: 1rem;
+    }
+
+    i[class*='fa-'] {
+      --fa-width: 1em;
+      font-family: 'Font Awesome 7 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: 1rem;
+      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) .btn.btn--prompt,
+  .btn.btn--prompt:is(:hover, :focus, .hover):not([disabled], :active, .active) {
+    &:after {
+      margin-left: 1.5rem;
+      margin-right: -0.5rem;
+    }
+  }
+  /* #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 7 Pro';
+    }
+  }
+  /* #endregion */
+}

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

@@ -1,24 +1,18 @@
-@use '../_func' as *;
-
-
-
-
-
-@layer elements {
-  // #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
-}
+@layer elements {
+  /* #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 */
+}