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

package/assets/sass/elements/input.scss

@@ -1,213 +1,213 @@
-@use 'sass:map';
-@use 'sass:math';
-
-@use '../_func' as *;
-
-
-@layer elements {
-
-  input {
-    margin: 0; // 1
-    font-family: inherit;
-    font-size: inherit;
-    line-height: inherit;
-  }
-
-  // Remove the dropdown arrow only from text type inputs built with datalists in Chrome.
-  // See https://stackoverflow.com/a/54997118
-
-  [list]:not([type='date']):not([type='datetime-local']):not([type='month']):not([type='week']):not(
-      [type='time']
-    )::-webkit-calendar-picker-indicator {
-    display: none !important;
-  }
-
-  // 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
-  //    controls in Android 4.
-  // 2. Correct the inability to style clickable types in iOS and Safari.
-  // 3. Opinionated: add "hand" cursor to non-disabled button elements.
-
-  // Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
-
-  ::-moz-focus-inner {
-    padding: 0;
-    border-style: none;
-  }
-
-  // 1. By using `float: left`, the legend will behave like a block element.
-  //    This way the border of a fieldset wraps around the legend if present.
-  // 2. Fix wrapping bug.
-  //    See https://github.com/twbs/bootstrap/issues/29712
-
-  legend {
-    float: left; // 1
-    width: 100%;
-    padding: 0;
-    margin-bottom: 0.5rem;
-    font-size: 1.5rem;
-    font-weight: normal;
-    line-height: inherit;
-
-    + * {
-      clear: left; // 2
-    }
-  }
-
-  // Fix height of inputs with a type of datetime-local, date, month, week, or time
-  // See https://github.com/twbs/bootstrap/issues/18842
-
-  ::-webkit-datetime-edit-fields-wrapper,
-  ::-webkit-datetime-edit-text,
-  ::-webkit-datetime-edit-minute,
-  ::-webkit-datetime-edit-hour-field,
-  ::-webkit-datetime-edit-day-field,
-  ::-webkit-datetime-edit-month-field,
-  ::-webkit-datetime-edit-year-field {
-    padding: 0;
-  }
-
-  ::-webkit-inner-spin-button {
-    height: auto;
-  }
-
-  // 1. Correct the outline style in Safari.
-  // 2. This overrides the extra rounded corners on search inputs in iOS so that our
-  //    `.form-control` class can properly style them. Note that this cannot simply
-  //    be added to `.form-control` as it's not specific enough. For details, see
-  //    https://github.com/twbs/bootstrap/issues/11586.
-
-  [type='search'] {
-    outline-offset: -2px; // 1
-    -webkit-appearance: textfield; // 2
-  }
-
-  // 1. A few input types should stay LTR
-  // See https://rtlstyling.com/posts/rtl-styling#form-inputs
-  // 2. RTL only output
-  // See https://rtlcss.com/learn/usage-guide/control-directives/#raw
-
-  /* rtl:raw:
-[type="tel"],
-[type="url"],
-[type="email"],
-[type="number"] {
-  direction: ltr;
-}
-*/
-
-  // Remove the inner padding in Chrome and Safari on macOS.
-
-  ::-webkit-search-decoration {
-    -webkit-appearance: none;
-  }
-
-  // Remove padding around color pickers in webkit browsers
-
-  ::-webkit-color-swatch-wrapper {
-    padding: 0;
-  }
-
-  ::-moz-color-swatch {
-    border-radius: 0;
-    border: none;
-  }
-
-  ::-webkit-color-swatch {
-    border-radius: 0;
-    border: none;
-  }
-
-  // 1. Inherit font family and line height for file input buttons
-  // 2. Correct the inability to style clickable types in iOS and Safari.
-
-  ::file-selector-button {
-    font: inherit; // 1
-    -webkit-appearance: button; // 2
-  }
-
-
-  
-
-  // #region input field
-  :is(
-    input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']),
-    output
-  ) {
-    display: block;
-    width: 100%;
-    display: block;
-    width: 100%;
-    padding: var(--input-padding-block, 0.75rem) var(--input-padding-inline, 1rem);
-    font-size: var(--input-fs, 1rem);
-    line-height: var(--input-lh, 1.25rem);
-    color: var(--colour-heading);
-    background-color: var(--colour-canvas-2);
-    background-clip: padding-box;
-    border: 2px solid var(--colour-primary);
-    appearance: none; // Fix appearance for date inputs in Safari
-    border-radius: 0.5rem;
-    margin-bottom: 1.5rem;
-    min-height: calc(
-      var(--input-padding-block, 0.75rem) + var(--input-padding-block, 0.75rem) + var(--input-lh, 1.25rem) +
-        4px
-    );
-    max-height: calc(
-      var(--input-padding-block, 0.75rem) + var(--input-padding-block, 0.75rem) + var(--input-lh, 1.25rem) +
-        4px
-    );
-
-    // Customize the `:focus` state to imitate native WebKit styles.
-    &:is(:focus, .focus):not(:disabled) {
-      border-color: var(--colour-info);
-      outline: 0;
-    }
-
-    &:is(:focus, .focus):not(:disabled):not(:invalid) {
-      box-shadow: 0 0 0 0.1rem rgba(30, 190, 230, 0.25);
-    }
-    // Add some height to date inputs on iOS
-    // https://github.com/twbs/bootstrap/issues/23307
-    // TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
-    &::-webkit-date-and-time-value {
-      // Multiply line-height by 1em if it has no unit
-      height: if(math.unit(1.5) == '', 1.5 * 1em, 1.5);
-    }
-
-    // Disabled inputs
-    &:disabled {
-      background-color: #ccd6d8;
-      opacity: 0.4;
-      cursor: not-allowed;
-    }
-  }
-
-  input[type='color'] {
-
-    padding: 0!important;
-    max-width: 3rem!important;
-  }
-  
-  [disabled] :is(
-    input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']),
-    output,
-    select:not(.select--minimal, .btn)
-  ) {
-      background-color: #ccd6d8;
-      opacity: 0.4;
-      cursor: not-allowed;
-      pointer-events: none;
-  }
-
-  [disabled] label {
-
-      cursor: not-allowed;
-      pointer-events: none;
-  }
-
-  :is(input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range'])) {
-    max-width: var(--input-max-width);
-  }
-
-  // #endregion
-
+@use 'sass:map';
+@use 'sass:math';
+
+@use '../_func' as *;
+
+
+@layer elements {
+
+  input {
+    margin: 0; /*  1 */
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+  }
+
+  /*  Remove the dropdown arrow only from text type inputs built with datalists in Chrome. */
+  /*  See https://stackoverflow.com/a/54997118 */
+
+  [list]:not([type='date']):not([type='datetime-local']):not([type='month']):not([type='week']):not(
+      [type='time']
+    )::-webkit-calendar-picker-indicator {
+    display: none !important;
+  }
+
+  /*  1. Prevent a WebKit bug where (2) destroys native `audio` and `video` */
+  /*     controls in Android 4. */
+  /*  2. Correct the inability to style clickable types in iOS and Safari. */
+  /*  3. Opinionated: add "hand" cursor to non-disabled button elements. */
+
+  /*  Remove inner border and padding from Firefox, but don't restore the outline like Normalize. */
+
+  ::-moz-focus-inner {
+    padding: 0;
+    border-style: none;
+  }
+
+  /*  1. By using `float: left`, the legend will behave like a block element. */
+  /*     This way the border of a fieldset wraps around the legend if present. */
+  /*  2. Fix wrapping bug. */
+  /*     See https://github.com/twbs/bootstrap/issues/29712 */
+
+  legend {
+    float: left; /*  1 */
+    width: 100%;
+    padding: 0;
+    margin-bottom: 0.5rem;
+    font-size: 1.5rem;
+    font-weight: normal;
+    line-height: inherit;
+
+    + * {
+      clear: left; /*  2 */
+    }
+  }
+
+  /*  Fix height of inputs with a type of datetime-local, date, month, week, or time */
+  /*  See https://github.com/twbs/bootstrap/issues/18842 */
+
+  ::-webkit-datetime-edit-fields-wrapper,
+  ::-webkit-datetime-edit-text,
+  ::-webkit-datetime-edit-minute,
+  ::-webkit-datetime-edit-hour-field,
+  ::-webkit-datetime-edit-day-field,
+  ::-webkit-datetime-edit-month-field,
+  ::-webkit-datetime-edit-year-field {
+    padding: 0;
+  }
+
+  ::-webkit-inner-spin-button {
+    height: auto;
+  }
+
+  /*  1. Correct the outline style in Safari. */
+  /*  2. This overrides the extra rounded corners on search inputs in iOS so that our */
+  /*     `.form-control` class can properly style them. Note that this cannot simply */
+  /*     be added to `.form-control` as it's not specific enough. For details, see */
+  /*     https://github.com/twbs/bootstrap/issues/11586. */
+
+  [type='search'] {
+    outline-offset: -2px; /*  1 */
+    -webkit-appearance: textfield; /*  2 */
+  }
+
+  /*  1. A few input types should stay LTR */
+  /*  See https://rtlstyling.com/posts/rtl-styling#form-inputs */
+  /*  2. RTL only output */
+  /*  See https://rtlcss.com/learn/usage-guide/control-directives/#raw */
+
+  /* rtl:raw:
+[type="tel"],
+[type="url"],
+[type="email"],
+[type="number"] {
+  direction: ltr;
+}
+*/
+
+  /*  Remove the inner padding in Chrome and Safari on macOS. */
+
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+
+  /*  Remove padding around color pickers in webkit browsers */
+
+  ::-webkit-color-swatch-wrapper {
+    padding: 0;
+  }
+
+  ::-moz-color-swatch {
+    border-radius: 0;
+    border: none;
+  }
+
+  ::-webkit-color-swatch {
+    border-radius: 0;
+    border: none;
+  }
+
+  /*  1. Inherit font family and line height for file input buttons */
+  /*  2. Correct the inability to style clickable types in iOS and Safari. */
+
+  ::file-selector-button {
+    font: inherit; /*  1 */
+    -webkit-appearance: button; /*  2 */
+  }
+
+
+  
+
+  /* #region input field */
+  :is(
+    input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']),
+    output
+  ) {
+    display: block;
+    width: 100%;
+    display: block;
+    width: 100%;
+    padding: var(--input-padding-block, 0.75rem) var(--input-padding-inline, 1rem);
+    font-size: var(--input-fs, 1rem);
+    line-height: var(--input-lh, 1.25rem);
+    color: var(--colour-heading);
+    background-color: var(--colour-canvas-2);
+    background-clip: padding-box;
+    border: 2px solid var(--colour-primary);
+    appearance: none; /*  Fix appearance for date inputs in Safari */
+    border-radius: 0.5rem;
+    margin-bottom: 1.5rem;
+    min-height: calc(
+      var(--input-padding-block, 0.75rem) + var(--input-padding-block, 0.75rem) + var(--input-lh, 1.25rem) +
+        4px
+    );
+    max-height: calc(
+      var(--input-padding-block, 0.75rem) + var(--input-padding-block, 0.75rem) + var(--input-lh, 1.25rem) +
+        4px
+    );
+
+    /*  Customize the `:focus` state to imitate native WebKit styles. */
+    &:is(:focus, .focus):not(:disabled) {
+      border-color: var(--colour-info);
+      outline: 0;
+    }
+
+    &:is(:focus, .focus):not(:disabled):not(:invalid) {
+      box-shadow: 0 0 0 0.1rem rgba(30, 190, 230, 0.25);
+    }
+    /*  Add some height to date inputs on iOS */
+    /*  https://github.com/twbs/bootstrap/issues/23307 */
+    /*  TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved */
+    &::-webkit-date-and-time-value {
+      /*  Multiply line-height by 1em if it has no unit */
+      height: if(math.unit(1.5) == '', 1.5 * 1em, 1.5);
+    }
+
+    /*  Disabled inputs */
+    &:disabled {
+      background-color: #ccd6d8;
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+  }
+
+  input[type='color'] {
+
+    padding: 0!important;
+    max-width: 3rem!important;
+  }
+  
+  [disabled] :is(
+    input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']),
+    output,
+    select:not(.select--minimal, .btn)
+  ) {
+      background-color: #ccd6d8;
+      opacity: 0.4;
+      cursor: not-allowed;
+      pointer-events: none;
+  }
+
+  [disabled] label {
+
+      cursor: not-allowed;
+      pointer-events: none;
+  }
+
+  :is(input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range'])) {
+    max-width: var(--input-max-width);
+  }
+
+  /* #endregion */
+
 }

package/assets/sass/elements/{label.scss → label.css}

@@ -1,21 +1,21 @@
-@layer elements {
-
-  :is(label:not(.tag), .label) {
-    
-    font-size: 1.125rem; /* 18/16 */
-    line-height: 1.3125rem; /* 21/16 */
-    margin-bottom: 0.5rem;
-    font-weight: normal;
-    color: var(--colour-heading);
-    display: block;
-
-    > iam-rating {
-      
-      margin-top: 0.25rem!important;
-    }
-
-    &.label--sm {
-      --input-max-width: 15rem;
-    }
-  }
+@layer elements {
+
+  :is(label:not(.tag), .label) {
+    
+    font-size: 1.125rem; /* 18/16 */
+    line-height: 1.3125rem; /* 21/16 */
+    margin-bottom: 0.5rem;
+    font-weight: normal;
+    color: var(--colour-heading);
+    display: block;
+
+    & > iam-rating {
+      
+      margin-top: 0.25rem!important;
+    }
+
+    &.label--sm {
+      --input-max-width: 15rem;
+    }
+  }
 }

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 */
+}