@iamproperty/components 7.1.0--beta7 → 7.2.0

package/assets/sass/elements/icons.scss

@@ -1,25 +1,31 @@
 @use '../_func' as *;
 
-.icon--xs {
-  font-size: rem(16);
-}
+$layers: 'true' !default;
+$mobileOnly: 'false' !default;
+$darkMode: 'true' !default;
 
-.icon--sm {
-  font-size: rem(18);
-}
+@include layer('elements', $layers) {
+  .icon--xs {
+    font-size: rem(16);
+  }
 
-.icon--compact {
-  font-size: rem(20);
-}
+  .icon--sm {
+    font-size: rem(18);
+  }
 
-.icon--md {
-  font-size: rem(28);
-}
+  .icon--compact {
+    font-size: rem(20);
+  }
 
-.icon--lg {
-  font-size: rem(40);
-}
+  .icon--md {
+    font-size: rem(28);
+  }
+
+  .icon--lg {
+    font-size: rem(40);
+  }
 
-[class*='fa-']:not(.fa-regular, .fa-light, .fa-solid, .btn) {
-  font-weight: 400;
+  [class*='fa-']:not(.fa-regular, .fa-light, .fa-solid, .btn) {
+    font-weight: 400;
+  }
 }

package/assets/sass/elements/links.scss

@@ -1,146 +1,161 @@
-@use '../_func.scss' as *;
+@use '../_func' as *;
 
-// #region reset
-a {
-  color: var(--#{$prefix}link-color);
-  text-decoration: $link-decoration;
+$layers: 'true' !default;
+$mobileOnly: 'false' !default;
+$darkMode: 'true' !default;
 
-  &:hover {
-    color: var(--#{$prefix}link-hover-color);
-    text-decoration: $link-hover-decoration;
-  }
-}
+@include layer('elements', $layers) {
+  // #region reset
+  a {
+    color: var(--link-color);
+    text-decoration: $link-decoration;
 
-// And undo these styles for placeholder links/named anchors (without href).
-// It would be more straightforward to just use a[href] in previous block, but that
-// causes specificity issues in many other styles that are too complex to fix.
-// See https://github.com/twbs/bootstrap/issues/19402
-
-a:not([href]):not([class]) {
-  &,
-  &:hover {
-    color: inherit;
-    text-decoration: none;
+    &:hover {
+      color: var(--link-hover-color);
+      text-decoration: $link-hover-decoration;
+    }
   }
-}
-// #endregion
 
-// global
-a {
-  color: var(--colour-link);
+  // And undo these styles for placeholder links/named anchors (without href).
+  // It would be more straightforward to just use a[href] in previous block, but that
+  // causes specificity issues in many other styles that are too complex to fix.
+  // See https://github.com/twbs/bootstrap/issues/19402
 
-  &:is(:hover, :focus, .hover, :focus-within) {
-    color: var(--colour-hover);
+  a:not([href]):not([class]) {
+    &,
+    &:hover {
+      color: inherit;
+      text-decoration: none;
+    }
   }
+  // #endregion
 
-  &:is(:active, .active) {
-    color: var(--colour-active);
-  }
-}
+  // global
+  a {
+    color: var(--colour-link);
 
-a:where(:not(.btn):not(.brand):not(:has(.card)):not(:has(iam-card))),
-.link {
-  background-color: transparent;
-  text-decoration: none;
-  display: inline-block;
-  border: none;
-  color: var(--colour-link);
-  margin: 0 rem(24) rem(24) 0;
-  padding: 0;
-  font-size: rem(18);
-  line-height: rem(24);
-  min-height: rem(24);
-  position: relative;
-  font-weight: bold;
-
-  &:not(.text-decoration-none) {
-    &:after {
-      position: absolute;
-      content: '';
-      top: 100%;
-      left: 50%;
-      height: 2px;
-      width: 100%;
-      transform: translate(-50%, 0);
-      background: var(--colour-underline);
-      transition: width 0.5s;
+    &:is(:hover, :focus, .hover, :focus-within) {
+      color: var(--colour-hover);
     }
-  }
-
-  [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, :active, .active, :focus-within) {
-    &:after {
-      width: 60%;
+    &:is(:active, .active) {
+      color: var(--colour-active);
     }
   }
-}
 
-@include inline-text() {
-  a:not(.btn) {
-    min-height: none;
-    display: inline;
-    margin: 0;
-    text-decoration: underline;
-
-    &:after {
-      display: none;
+  a:where(:not(.btn):not(.brand):not(:has(.card)):not(:has(iam-card))),
+  .link {
+    background-color: transparent;
+    text-decoration: none;
+    display: inline-block;
+    border: none;
+    color: var(--colour-link);
+    margin: 0 rem(24) rem(24) 0;
+    padding: 0;
+    font-size: rem(18);
+    line-height: rem(24);
+    min-height: rem(24);
+    position: relative;
+    font-weight: bold;
+
+    &:not(.text-decoration-none) {
+      &:after {
+        position: absolute;
+        content: '';
+        top: 100%;
+        left: 50%;
+        height: 2px;
+        width: 100%;
+        transform: translate(-50%, 0);
+        background: var(--colour-underline);
+        transition: width 0.5s;
+      }
     }
 
     [class*='fa-'] {
-      margin: 0;
-      display: inline;
+      margin-left: 0;
+      margin-right: 0.5rem;
+    }
+    [class*='fa-']:not(:first-child) {
+      margin-left: 0.5rem;
+      margin-right: 0;
     }
 
-    text-decoration: underline;
-    text-underline-offset: 0.2em;
-    text-decoration-thickness: 2px;
-    font-size: inherit;
-
-    &:is(:hover, :focus, .hover, :focus-within) {
-      color: var(--colour-hover);
-      text-decoration: none;
+    &:not([disabled]):is(:hover, :focus, .hover, :active, .active, :focus-within) {
+      &:after {
+        width: 60%;
+      }
     }
 
-    &:is(:active, .active) {
-      color: var(--colour-active);
-      text-decoration: none;
+    &[disabled] {
+      opacity: 0.4;
+      cursor: not-allowed;
     }
   }
-}
 
-// #region Support card component
-:is(a, button, label):has(.card, iam-card) {
-  &:before {
-    display: none;
-  }
-  border: none;
-  background: none;
-  padding: 0;
-  display: flex;
-  margin-bottom: 1.5rem;
-
-  &:not([class*='col']) {
-    margin: 0 0 rem(24) 0;
+  @include inline-text() {
+    a:not(.btn) {
+      min-height: none;
+      display: inline;
+      margin: 0;
+      text-decoration: underline;
+      text-underline-offset: 0.25rem;
+      text-decoration-thickness: 0.125rem;
+      font-size: inherit;
+
+      &:after {
+        display: none;
+      }
+
+      [class*='fa-'] {
+        margin: 0;
+        display: inline;
+        --fa-display: inline;
+
+        &:after {
+          content: '\a0';
+        }
+      }
+
+      &:not([disabled]):is(:hover, :focus, .hover, :focus-within) {
+        color: var(--colour-hover);
+        text-decoration: none;
+      }
+
+      &:not([disabled]):is(:active, .active) {
+        color: var(--colour-active);
+        text-decoration: none;
+        filter: brightness(85%);
+      }
+    }
   }
 
-  outline: none !important;
-  text-decoration: none;
+  // #region Support card component
+  :is(a, button, label):has(.card, iam-card) {
+    border: none;
+    background: none;
+    padding: 0;
+    display: flex;
+    margin-bottom: 1.5rem;
+    outline: none !important;
+    text-decoration: none;
 
-  &:not(.d-inline-block):not([class*='col']) {
-    width: 100%;
-  }
+    &:before {
+      display: none;
+    }
+
+    &:not([class*='col']) {
+      margin: 0 0 rem(24) 0;
+    }
+
+    &:not(.d-inline-block):not([class*='col']) {
+      width: 100%;
+    }
 
-  iam-card {
-    width: 100%;
+    iam-card {
+      width: 100%;
+    }
   }
-}
 
-// #endregion
+  // #endregion
+}