@iamproperty/components 7.6.0 → 7.6.2

package/assets/sass/elements/links.scss

@@ -1,18 +1,18 @@
 @use '../_func' as *;
 
-$layers: 'true' !default;
-$mobileOnly: 'false' !default;
-$darkMode: 'true' !default;
 
-@include layer('elements', $layers) {
+
+
+
+@layer elements {
   // #region reset
   a {
     color: var(--link-color);
-    text-decoration: $link-decoration;
+    text-decoration: underline;
 
     &:hover {
       color: var(--link-hover-color);
-      text-decoration: $link-hover-decoration;
+      text-decoration: none;
     }
   }
 
@@ -50,11 +50,11 @@ $darkMode: 'true' !default;
     display: inline-block;
     border: none;
     color: var(--colour-link);
-    margin: 0 rem(24) rem(24) 0;
+    margin: 0 1.5rem 1.5rem 0;
     padding: 0;
-    font-size: rem(18);
-    line-height: rem(24);
-    min-height: rem(24);
+    font-size: 1.125rem; /* 18/16 */
+    line-height: 1.5rem;
+    min-height: 1.5rem;
     position: relative;
     font-weight: bold;
 
@@ -99,7 +99,8 @@ $darkMode: 'true' !default;
     }
   }
 
-  @include inline-text() {
+  :where(p, ul, ol, dd, .body),
+  table:not(.table--email) td {
     a:not(.btn):not(.link) {
       min-height: none;
       display: inline;
@@ -151,7 +152,7 @@ $darkMode: 'true' !default;
     }
 
     &:not([class*='col']) {
-      margin: 0 0 rem(24) 0;
+      margin: 0 0 1.5rem 0;
     }
 
     &:not(.d-inline-block):not([class*='col']) {
@@ -216,14 +217,14 @@ $darkMode: 'true' !default;
 // #region Sidebar link styling including parent group styling
 iam-collapsible-side {
   > * {
-    padding-left: rem(24);
+    padding-left: 1.5rem;
 
-    @include media-breakpoint-up(sm) {
-      padding-left: rem(40);
+    @media screen and (min-width: 36em) {
+      padding-left: 2.5rem;
     }
 
-    @include media-breakpoint-up(md) {
-      padding-left: var(--container-padding-x-md);
+    @media screen and (min-width: 62em) {
+      padding-left: var(--container-padding-x);
     }
   }
 
@@ -236,8 +237,8 @@ iam-collapsible-side {
 .vertical-tabs [class*='link'],
 iam-collapsible-side [class*='link'] {
   display: block !important;
-  line-height: rem(20) !important;
-  padding: rem(16) rem(24) rem(16) rem(24) !important;
+  line-height: 1.25rem !important;
+  padding: 1rem 1.5rem 1rem 1.5rem !important;
   margin: 0 !important;
   flex-shrink: 0;
   font-size: 1rem !important;
@@ -254,15 +255,15 @@ iam-collapsible-side [class*='link'] {
 
   i {
     // icon
-    margin-right: rem(8) !important;
+    margin-right: 0.5rem !important;
   }
 
-  @include media-breakpoint-up(sm) {
-    padding-left: rem(24) !important;
+  @media screen and (min-width: 36em) {
+    padding-left: 1.5rem !important;
   }
 
-  @include media-breakpoint-up(md) {
-    padding-left: var(--container-padding-x-md) !important;
+  @media screen and (min-width: 62em) {
+    padding-left: var(--container-padding-x) !important;
   }
 }
 
@@ -294,7 +295,7 @@ iam-collapsible-side {
       cursor: pointer;
 
       a {
-        padding-right: rem(40) !important;
+        padding-right: 2.5rem !important;
 
         &::before {
           position: absolute;
@@ -330,7 +331,7 @@ iam-collapsible-side {
     }
   }
 
-  @include media-breakpoint-up(sm) {
+  @media screen and (min-width: 36em) {
     .parent {
       li:not(:first-of-type) {
         a {

package/assets/sass/elements/lists--breadcrumbs.scss

@@ -0,0 +1,26 @@
+@use '../_func' as *;
+
+
+@layer elements {
+  
+  :is(.breadcrumb, .breadcrumbs) {
+    font-size: 0.875rem; /* 14/16 */
+    padding-left: 0;
+    list-style: none;
+
+    li {
+      display: inline-block;
+
+      &:not(:first-child):before {
+        content: '\00A0/\00A0';
+        font-weight: bold;
+        color: var(--colour-link);
+      }
+
+      a {
+        text-decoration: none;
+        text-transform: uppercase;
+      }
+    }
+  }
+}

package/assets/sass/elements/lists--steps.css

@@ -0,0 +1,171 @@
+@layer elements {
+
+  *:has(> .list--steps) {
+    container-type: inline-size;
+  }
+
+  :is(.list--steps, .list--steps-vertical) {
+    display: flex;
+    justify-content: center;
+    list-style: none;
+    padding: 0 0 0.375rem 0;
+    gap: 0.75rem;
+    counter-reset: pages;
+    color: var(--colour-heading);
+    position: relative;
+    margin-bottom: 0.375rem;
+    text-align: center;
+
+    & li {
+      position: relative;
+      display: block;
+      padding-top: 2rem;
+      width: 1.5rem;
+      flex-grow: 0;
+      flex-shrink: 1;
+      overflow: hidden;
+      text-indent: -300px;
+
+      &:before {
+        counter-increment: pages;
+        content: counter(pages);
+        position: absolute;
+        top: 0;
+        left: 50%;
+        margin-left: -0.75rem;
+        width: 1.5rem;
+        height: 1.5rem;
+        font-size: 1.125rem; /* 18/16 */
+        line-height: 1.5rem;
+        text-align: center;
+        font-weight: bold;
+        border: 1px solid currentColor;
+        border-radius: 1rem;
+        text-indent: 0;
+      }
+    }
+
+    li.step--current:before {
+      background-color: var(--colour-primary-theme);
+      border-color: var(--colour-primary-theme);
+      color: var(--colour-white);
+    }
+    li.step--complete:before {
+      background-color: light-dark(var(--colour-success),var(--colour-complete));
+      border-color: light-dark(var(--colour-success),var(--colour-complete));
+    }
+
+    &::after {
+      content: attr(data-mobile-text);
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      text-align: center;
+      display: block;
+      height: 1.5rem;
+      line-height: 1.5rem;
+      font-weight: bold;
+    }
+  }
+
+  @media screen and (min-width: 36em) {
+    :is(.list--steps, .list--steps-vertical) {
+      padding: 0;
+      margin-bottom: 1.5rem;
+
+      &::after {
+        display: none;
+      }
+
+      li {
+        width: 100%;
+        flex-grow: 1;
+        text-indent: 0;
+        overflow: visible;
+
+        &:not(:last-child):after {
+          content: '';
+          position: absolute;
+          top: 0.75rem;
+          left: calc(50% + 2rem);
+
+          width: calc(100% - 2.5rem);
+          height: 2px;
+          font-size: 1.125rem; /* 18/16 */
+          background-color: var(--colour-heading);
+        }
+      }
+    }
+  }
+  @media screen and (min-width: 62em) {
+    :is(.list--steps, .list--steps-vertical) {
+      li {
+        max-width: 20%;
+      }
+    }
+  }
+
+  .list--steps-vertical {
+
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 0 0 0 2rem;
+    gap: 2.5rem;
+    text-align: left;
+
+    li {
+      padding-top: 0;
+      padding-left: 2rem;
+      width: 100%;
+      text-indent: 0;
+      overflow: visible;
+      margin-bottom: 1.125rem; /* 18/16 */
+      margin-top: 0.5rem;
+      display: flex;
+      align-items: center;
+      min-height: 1.5rem;
+
+      &:before {
+        top: 50%;
+        left: 0;
+        margin-left: 0;
+        margin-top: -0.75rem;
+        flex-shrink: 0;
+      }
+
+      &:not(:last-child):after {
+        left: 0.6875rem; /* 11/16 */
+        top: 2.25rem;/* 36/16 */
+        width: 2px;
+        height: calc(100% + 1rem);
+      }
+    }
+  }
+
+  @media screen and (min-width: 36em) {
+    .list--steps-vertical {
+      padding-left: 2.5rem;
+
+      li {
+        padding-left: 2.25rem; /* 36/16 */
+
+        &:not(:last-child):after {
+          left: 0.75rem;
+          top: 2.25rem;/* 36/16 */
+          width: 2px;
+          height: calc(100% + 1rem);
+        }
+      }
+    }
+  }
+
+  @media screen and (min-width: 62em) {
+    .list--steps-vertical {
+      li {
+        max-width: none;
+        margin-bottom: 1.25rem;
+      }
+    }
+  }
+}

package/assets/sass/elements/lists--tick-list.scss

@@ -0,0 +1,81 @@
+@use '../_func' as *;
+
+
+@layer elements {
+  
+  /* region tick list*/
+  .tick-list {
+    padding-left: 0;
+
+    li {
+      position: relative;
+      list-style: none;
+      padding-bottom: 1rem;
+      padding-left: 2.25rem;
+
+      &:before {
+        content: '\f00c';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1.25em;
+        height: 1.25em;
+        font-size: 1.25em;
+        line-height: 1;
+
+        color: var(--tick-colour, var(--colour-complete));
+        font-family: 'Font Awesome 6 Pro';
+        font-size: 400;
+      }
+    }
+
+    .tick--warning:before {
+      content: '\f071';
+      font-weight: 300;
+      color: var(--colour-warning);
+    }
+
+    .tick--danger:before {
+      content: '\f06a';
+      font-weight: 300;
+      color: var(--colour-danger);
+    }
+
+    .tick--incomplete:before {
+      background: var(--colour-admin);
+      mask-image: none;
+      -webkit-mask-image: none;
+      border-radius: 50%;
+      transform: scale(0.8);
+    }
+
+    li[class*='bg-'] {
+      padding: 1rem;
+      padding-left: 4rem;
+      margin-bottom: 1rem;
+      border-radius: 0.5rem;
+      z-index: 0;
+
+      &:is(:before,:after) {
+        top: 50%;
+        left: 1rem;
+        width: 2rem;
+        height: 2rem;
+        margin-top: -1rem;
+      }
+
+      &:after {
+        content: '';
+        position: absolute;
+        z-index: -1;
+        background-color: white;
+        border-radius: 50%;
+        transform-origin: 50% 50%;
+        transform: scale(0.9);
+      }
+    }
+  }
+
+  /* #endregion */
+
+}