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

package/assets/sass/elements/links--collapsible-side.scss

@@ -0,0 +1,130 @@
+@layer elements {
+  /* #region Sidebar link styling including parent group styling */
+  iam-collapsible-side {
+    > * {
+      padding-left: 1.5rem;
+
+      @media screen and (min-width: 36em) {
+        padding-left: 2.5rem;
+      }
+
+      @media screen and (min-width: 62em) {
+        padding-left: var(--container-padding-x);
+      }
+    }
+
+    hr {
+      border-bottom: 2px solid var(--colour-border) !important;
+      margin-right: -2.5rem !important;
+    }
+  }
+
+  .vertical-tabs [class*='link'],
+  iam-collapsible-side [class*='link'] {
+    display: block !important;
+    line-height: 1.25rem !important;
+    padding: 1rem 1.5rem 1rem 1.5rem !important;
+    margin: 0 !important;
+    flex-shrink: 0;
+    font-size: 1rem !important;
+    font-weight: normal !important;
+    text-decoration: none !important;
+    border-bottom: 2px solid var(--colour-border) !important;
+    border-right: 2px solid var(--colour-border) !important;
+    margin-right: -2.5rem !important;
+    z-index: 2;
+
+    &::after {
+      display: none !important;
+    }
+
+    i {
+      /*  icon */
+      margin-right: 0.5rem !important;
+    }
+
+    @media screen and (min-width: 36em) {
+      padding-left: 1.5rem !important;
+    }
+
+    @media screen and (min-width: 62em) {
+      padding-left: var(--container-padding-x) !important;
+    }
+  }
+
+  .vertical-tabs a,
+  iam-collapsible-side a {
+    &:hover,
+    &:focus,
+    &[aria-expanded] {
+      background-color: var(--colour-activeLink) !important;
+    }
+  }
+
+  .vertical-tabs [class*='active'],
+  iam-collapsible-side [class*='active'] {
+    background-color: var(--colour-activeLink) !important;
+    border-right-color: var(--colour-activeLinkBorder) !important;
+    border-right-width: 3px !important;
+  }
+
+  /*  Parent links */
+  .vertical-tabs,
+  iam-collapsible-side {
+    .parent {
+      margin: 0 !important;
+      padding: 0 !important;
+      list-style: none;
+
+      li:first-of-type {
+        cursor: pointer;
+
+        a {
+          padding-right: 2.5rem !important;
+
+          &::before {
+            position: absolute;
+            display: block;
+            content: '\f055';
+            font-family: 'Font Awesome 7 Pro';
+            right: 20px;
+            font-weight: 300;
+          }
+        }
+      }
+
+      li:not(:first-of-type) {
+        display: none;
+
+        a {
+          background-color: var(--colour-light) !important;
+          padding-left: 5.625rem !important;
+        }
+      }
+
+      &.reveal {
+        li:first-of-type {
+          a::before {
+            content: '\f056';
+            font-weight: bold;
+          }
+        }
+
+        li:not(:first-of-type) {
+          display: block;
+        }
+      }
+    }
+
+    @media screen and (min-width: 36em) {
+      .parent {
+        li:not(:first-of-type) {
+          a {
+            padding-left: 5.625rem !important;
+          }
+        }
+      }
+    }
+  }
+  /* #endregion */
+}

package/assets/sass/elements/links--global.scss

@@ -0,0 +1,155 @@
+
+@layer elements {
+  /* #region global */
+  a {
+    color: var(--colour-link);
+    text-decoration: underline;
+
+    &:hover {
+      color: var(--link-hover-color);
+      text-decoration: none;
+    }
+    &:is(:hover, :focus, .hover, :focus-within) {
+      color: var(--colour-hover);
+    }
+
+    &:is(:active, .active) {
+      color: var(--colour-active);
+    }
+  }
+
+  a:not([href]):not([class]),
+  a:not([href]):not([class]):hover {
+    color: inherit;
+    text-decoration: none;
+  }
+  /* #endregion */
+
+  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 1.5rem 1.5rem 0;
+    padding: 0;
+    font-size: 1.125rem; /* 18/16 */
+    line-height: 1.5rem;
+    min-height: 1.5rem;
+    position: relative;
+    font-weight: bold;
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+    &: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;
+      }
+    }
+
+    &:not(.text-decoration-none).text-underline-plain {
+      &:after {
+        background: currentColor;
+      }
+    }
+
+    &[class*='fa-'] {
+      margin-left: 0;
+      margin-right: 0.5rem;
+    }
+    
+    &[class*='fa-']:not(:first-child) {
+      margin-left: 0.5rem;
+      margin-right: 0;
+    }
+
+    &:not([disabled]):is(:hover, :focus, .hover, :active, .active, :focus-within) {
+      &:after {
+        width: 60%;
+      }
+    }
+
+    &[disabled] {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+  }
+
+  :where(p, ul, ol, dd, .body),
+  table:not(.table--email) td {
+    a:not(.btn):not(.link) {
+      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%);
+      }
+    }
+  }
+
+  /* #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;
+
+    &:before {
+      display: none;
+    }
+
+    &:not([class*='col']) {
+      margin: 0 0 1.5rem 0;
+    }
+
+    &:not(.d-inline-block):not([class*='col']) {
+      width: 100%;
+    }
+
+    iam-card {
+      width: 100%;
+    }
+  }
+
+  /* #endregion */
+}

package/assets/sass/elements/links--video.scss

@@ -0,0 +1,73 @@
+@use '../_func' as *;
+
+@layer elements {
+  
+  :is(.video-link, .youtube-link, .vimeo-link) {
+    --compact-size: 3rem;
+    position: relative;
+    
+    &:before, 
+    &:after {
+      content: "\f04b";
+      font-family: "Font Awesome 7 Pro" !important;
+      display: block;
+      position: absolute;
+
+      text-indent: 0;
+      line-height: calc(var(--compact-size) - .25rem);
+      font-weight: 900;
+      font-size: 1rem !important;
+      text-align: center;
+
+
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      z-index: 4;
+      transform: translate(-50%, -50%);
+
+
+      --compact-size: 3rem;
+      padding: 0 !important;
+      margin-bottom: .5rem;
+      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;
+      align-content: center;
+      line-height: 1 !important;
+      overflow: hidden;
+    }
+
+    &:after {
+
+      border-radius: 50% !important;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      z-index: 3;
+      background-color: var(--colour-success);
+      border: 1px solid var(--colour-success);
+    }
+
+
+    
+    &:is(:hover, :focus):not(:active) {
+      &:after {
+
+        background-color: var(--colour-white);
+        border-color: var(--colour-white);
+      }
+    }
+    &:is(:active) {
+      
+      &:after {
+
+        filter: brightness(85%);
+      }
+    }
+  }
+}

package/assets/sass/elements/links.scss

@@ -1,370 +1,5 @@
 @use '../_func' as *;
 
-
-
-
-
-@layer elements {
-  // #region reset
-  a {
-    color: var(--link-color);
-    text-decoration: underline;
-
-    &:hover {
-      color: var(--link-hover-color);
-      text-decoration: none;
-    }
-  }
-
-  // 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;
-    }
-  }
-  // #endregion
-
-  // global
-  a {
-    color: var(--colour-link);
-
-    &:is(:hover, :focus, .hover, :focus-within) {
-      color: var(--colour-hover);
-    }
-
-    &:is(:active, .active) {
-      color: var(--colour-active);
-    }
-  }
-
-  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 1.5rem 1.5rem 0;
-    padding: 0;
-    font-size: 1.125rem; /* 18/16 */
-    line-height: 1.5rem;
-    min-height: 1.5rem;
-    position: relative;
-    font-weight: bold;
-
-    &:last-child {
-      margin-right: 0;
-    }
-
-    &: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;
-      }
-    }
-
-    &:not(.text-decoration-none).text-underline-plain {
-      &:after {
-        background: currentColor;
-      }
-    }
-
-    [class*='fa-'] {
-      margin-left: 0;
-      margin-right: 0.5rem;
-    }
-    [class*='fa-']:not(:first-child) {
-      margin-left: 0.5rem;
-      margin-right: 0;
-    }
-
-    &:not([disabled]):is(:hover, :focus, .hover, :active, .active, :focus-within) {
-      &:after {
-        width: 60%;
-      }
-    }
-
-    &[disabled] {
-      opacity: 0.4;
-      cursor: not-allowed;
-    }
-  }
-
-  :where(p, ul, ol, dd, .body),
-  table:not(.table--email) td {
-    a:not(.btn):not(.link) {
-      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%);
-      }
-    }
-  }
-
-  // #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;
-
-    &:before {
-      display: none;
-    }
-
-    &:not([class*='col']) {
-      margin: 0 0 1.5rem 0;
-    }
-
-    &:not(.d-inline-block):not([class*='col']) {
-      width: 100%;
-    }
-
-    iam-card {
-      width: 100%;
-    }
-  }
-
-  // #endregion
-}
-
-:is(.video-link, .youtube-link, .vimeo-link) {
-  position: relative;
---compact-size: 3rem;
-
-  &:before, 
-  &:after {
-    content: "\f04b";
-    font-family: "Font Awesome 7 Pro" !important;
-    display: block;
-    position: absolute;
-
-    text-indent: 0;
-    line-height: calc(var(--compact-size) - .25rem);
-    font-weight: 900;
-    font-size: 1rem !important;
-    text-align: center;
-
-
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    z-index: 4;
-    transform: translate(-50%, -50%);
-
-
-    --compact-size: 3rem;
-    padding: 0 !important;
-    margin-bottom: .5rem;
-    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;
-    align-content: center;
-    line-height: 1 !important;
-    overflow: hidden;
-  }
-
-  &:after {
-
-    border-radius: 50% !important;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    z-index: 3;
-    background-color: var(--colour-success);
-    border: 1px solid var(--colour-success);
-  }
-
-
-  
-  &:is(:hover, :focus):not(:active) {
-    &:after {
-
-      background-color: var(--colour-white);
-      border-color: var(--colour-white);
-    }
-  }
-  &:is(:active) {
-    
-    &:after {
-
-      filter: brightness(85%);
-    }
-  }
-}
-
-// #region Sidebar link styling including parent group styling
-iam-collapsible-side {
-  > * {
-    padding-left: 1.5rem;
-
-    @media screen and (min-width: 36em) {
-      padding-left: 2.5rem;
-    }
-
-    @media screen and (min-width: 62em) {
-      padding-left: var(--container-padding-x);
-    }
-  }
-
-  hr {
-    border-bottom: 2px solid var(--colour-border) !important;
-    margin-right: -2.5rem !important;
-  }
-}
-
-.vertical-tabs [class*='link'],
-iam-collapsible-side [class*='link'] {
-  display: block !important;
-  line-height: 1.25rem !important;
-  padding: 1rem 1.5rem 1rem 1.5rem !important;
-  margin: 0 !important;
-  flex-shrink: 0;
-  font-size: 1rem !important;
-  font-weight: normal !important;
-  text-decoration: none !important;
-  border-bottom: 2px solid var(--colour-border) !important;
-  border-right: 2px solid var(--colour-border) !important;
-  margin-right: -2.5rem !important;
-  z-index: 2;
-
-  &::after {
-    display: none !important;
-  }
-
-  i {
-    // icon
-    margin-right: 0.5rem !important;
-  }
-
-  @media screen and (min-width: 36em) {
-    padding-left: 1.5rem !important;
-  }
-
-  @media screen and (min-width: 62em) {
-    padding-left: var(--container-padding-x) !important;
-  }
-}
-
-.vertical-tabs a,
-iam-collapsible-side a {
-  &:hover,
-  &:focus,
-  &[aria-expanded] {
-    background-color: var(--colour-activeLink) !important;
-  }
-}
-
-.vertical-tabs [class*='active'],
-iam-collapsible-side [class*='active'] {
-  background-color: var(--colour-activeLink) !important;
-  border-right-color: var(--colour-activeLinkBorder) !important;
-  border-right-width: 3px !important;
-}
-
-// Parent links
-.vertical-tabs,
-iam-collapsible-side {
-  .parent {
-    margin: 0 !important;
-    padding: 0 !important;
-    list-style: none;
-
-    li:first-of-type {
-      cursor: pointer;
-
-      a {
-        padding-right: 2.5rem !important;
-
-        &::before {
-          position: absolute;
-          display: block;
-          content: '\f055';
-          font-family: 'Font Awesome 7 Pro';
-          right: 20px;
-          font-weight: 300;
-        }
-      }
-    }
-
-    li:not(:first-of-type) {
-      display: none;
-
-      a {
-        background-color: var(--colour-light) !important;
-        padding-left: 5.625rem !important;
-      }
-    }
-
-    &.reveal {
-      li:first-of-type {
-        a::before {
-          content: '\f056';
-          font-weight: bold;
-        }
-      }
-
-      li:not(:first-of-type) {
-        display: block;
-      }
-    }
-  }
-
-  @media screen and (min-width: 36em) {
-    .parent {
-      li:not(:first-of-type) {
-        a {
-          padding-left: 5.625rem !important;
-        }
-      }
-    }
-  }
-}
-// #endregion
+@use './links--global';
+@use './links--video';
+@use './links--collapsible-side';