@iamproperty/components 7.6.1 → 7.6.3--beta1

package/assets/sass/elements/lists.scss

@@ -1,156 +1,50 @@
 @use '../_func' as *;
 
-$layers: 'true' !default;
-$mobileOnly: 'false' !default;
-$darkMode: 'true' !default;
 
-@include layer('elements', $layers) {
-  ol,
-  ul {
+@layer elements {
+  :is(ol, ul) {
     padding-left: 2rem;
   }
 
-  ol,
-  ul,
-  dl {
+  :is(ol, ul, dl) {
     margin-top: 0;
     margin-bottom: 1rem;
   }
 
-  ol ol,
-  ul ul,
-  ol ul,
-  ul ol {
+  :is(ol, ul) :is(ol, ul) {
     margin-bottom: 0;
   }
 
+  li {
+    max-width: var(--content-max-width);
+  }
+
   dt {
-    font-weight: $dt-font-weight;
+    font-weight: bold;
   }
 
   dd {
     margin-bottom: 0.5rem;
-    margin-left: 0; // 1
+    margin-left: 0; 
   }
 
+  /* #region basic list modifiers */
   .list-unstyled {
-    @include list-unstyled();
+    padding-left: 0;
+    list-style: none;
   }
-
-  // Inline turns list items into inline-block
   .list-inline {
-    @include list-unstyled();
+    padding-left: 0;
+    list-style: none;
   }
   .list-inline-item {
     display: inline-block;
 
     &:not(:last-child) {
-      margin-right: $list-inline-padding;
-    }
-  }
-
-  @include is('ol, ul', '', 'li') {
-    max-width: $content-max-width;
-  }
-
-  .tick-list--white {
-    --tick-colour: white;
-  }
-
-  .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);
-      }
-
-      &[class*='bg-'] {
-        padding: 1rem;
-        padding-left: 4rem;
-        margin-bottom: 1rem;
-        border-radius: 0.5rem;
-        z-index: 0;
-
-        &: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);
-        }
-      }
+      margin-right: 0.5rem;
     }
   }
-
-  .breadcrumb {
-    font-size: rem(14);
-    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;
-      }
-    }
-  }
-
+  
   .orderable-list {
     margin-left: 3.5rem;
     counter-reset: countItem;
@@ -191,7 +85,7 @@ $darkMode: 'true' !default;
       height: 2rem;
       width: 2.5rem;
       line-height: 2rem;
-      font-size: rem(20);
+      font-size: 1.25rem;
       font-weight: bold;
       display: inline-block;
       position: absolute;
@@ -200,191 +94,6 @@ $darkMode: 'true' !default;
       text-align: center;
     }
   }
+  /* #endregion */
 
-  // list wrapper to apply a min height
-  .list__wrapper {
-    overflow-x: hidden;
-    overflow-y: auto;
-  }
-  .list__wrapper--small {
-    max-height: 12.5rem;
-  }
-  .list__wrapper--medium {
-    max-height: 25rem;
-  }
-  .list__wrapper--large {
-    max-height: 37.5rem;
-  }
-
-  // #region Step list
-  *:has(> .list--steps) {
-    container-type: inline-size;
-  }
-
-  .list--steps {
-    display: flex;
-    justify-content: center;
-    list-style: none;
-    padding: 0 0 rem(6) 0;
-    gap: rem(12);
-    counter-reset: pages;
-    color: var(--colour-heading);
-    position: relative;
-    margin-bottom: rem(6);
-    text-align: center;
-
-    li {
-      position: relative;
-      display: block;
-      padding-top: 2rem;
-      width: rem(24);
-      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: rem(-12);
-        width: rem(24);
-        height: rem(24);
-        font-size: rem(18);
-        line-height: rem(24);
-        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: var(--colour-success);
-      border-color: var(--colour-success);
-
-      @container style(--theme: dark) {
-        background-color: var(--colour-complete);
-        border-color: var(--colour-complete);
-      }
-      //color: var(--colour-white);
-    }
-
-    &::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;
-    }
-
-    @include container-up(sm) {
-      padding: 0;
-
-      margin-bottom: rem(24);
-
-      &::after {
-        display: none;
-      }
-
-      li {
-        width: 100%;
-        flex-grow: 1;
-        text-indent: 0;
-        overflow: visible;
-
-        &:not(:last-child):after {
-          content: '';
-          position: absolute;
-          top: rem(12);
-          left: calc(50% + 2rem);
-
-          width: calc(100% - 2.5rem);
-          height: 2px;
-          font-size: rem(18);
-          background-color: var(--colour-heading);
-        }
-      }
-    }
-
-    @include container-up(md) {
-      li {
-        max-width: 20%;
-      }
-    }
-  }
-
-  .list--steps-vertical {
-    @extend .list--steps;
-
-    flex-direction: column;
-    align-items: flex-start;
-    padding: 0 0 0 rem(32);
-    gap: rem(40);
-    text-align: left;
-
-    li {
-      padding-top: 0;
-      padding-left: rem(32);
-      width: 100%;
-      text-indent: 0;
-      overflow: visible;
-      margin-bottom: rem(18);
-      margin-top: rem(8);
-      display: flex;
-      align-items: center;
-      min-height: rem(24);
-
-      &:before {
-        top: 50%;
-        left: 0;
-        margin-left: 0;
-        margin-top: rem(-12);
-        flex-shrink: 0;
-      }
-
-      &:not(:last-child):after {
-        left: rem(11);
-        top: rem(36);
-        width: 2px;
-        height: calc(100% + rem(16));
-      }
-    }
-
-    @include container-up(sm) {
-      padding-left: rem(40);
-
-      li {
-        padding-left: rem(36);
-
-        &:not(:last-child):after {
-          left: rem(12);
-          top: rem(36);
-          width: 2px;
-          height: calc(100% + rem(16));
-        }
-      }
-    }
-
-    @include container-up(md) {
-      li {
-        max-width: none;
-        margin-bottom: rem(20);
-      }
-    }
-  }
-  // #endregion
 }

package/assets/sass/elements/media.css

@@ -0,0 +1,20 @@
+@layer elements {
+  figure {
+    margin: 0 0 1rem;
+  }
+
+  img,
+  svg {
+    vertical-align: middle;
+  }
+
+  img {
+    max-width: 100%;
+  }
+
+  .ratio {
+    & > img:first-child:last-child {
+      object-fit: cover;
+    }
+  }
+}

package/assets/sass/elements/modal.scss

@@ -1,11 +1,11 @@
 @use 'sass:math';
 @use '../_func' as *;
 
-$layers: 'true' !default;
-$mobileOnly: 'false' !default;
-$darkMode: 'true' !default;
 
-@include layer('elements', $layers) {
+
+
+
+@layer elements {
   // #region modal styling
 
   *:not(.dialog__wrapper) > dialog[open] { // change this selector to be a dialog without a popover attribute
@@ -21,14 +21,14 @@ $darkMode: 'true' !default;
     max-height: min(90vh, #{rem(752)});
     overscroll-behavior: contain;
 
-    @include media-breakpoint-up(sm, $mobileOnly) {
-      --dialog-padding: #{rem(32)};
+    @media screen and (min-width: 36em) {
+      --dialog-padding: 2rem;
       min-width: rem(335);
       width: fit-content;
       max-width: rem(686);
     }
 
-    @include media-breakpoint-up(md, $mobileOnly) {
+    @media screen and (min-width: 62em) {
       min-width: rem(454);
       width: fit-content;
       max-width: rem(736);
@@ -49,8 +49,8 @@ $darkMode: 'true' !default;
       text-indent: 300%;
       overflow: hidden;
       border: none;
-      height: rem(20);
-      width: rem(20);
+      height: 1.25rem;
+      width: 1.25rem;
       background: transparent;
 
       &:after {
@@ -59,8 +59,8 @@ $darkMode: 'true' !default;
         left: 0;
         position: absolute;
         display: block;
-        height: rem(20);
-        width: rem(20);
+        height: 1.25rem;
+        width: 1.25rem;
         z-index: var(--index-focus);
         background: currentColor;
         mask-image: var(--icon-close);
@@ -75,18 +75,18 @@ $darkMode: 'true' !default;
 
       & + * {
         padding-right: var(--dialog-padding);
-        margin-right: rem(20);
+        margin-right: 1.25rem;
         display: block;
       }
 
       & + span:not(.h1, .h2, .h3, .h4, .h5, .h6) {
-        padding-bottom: rem(8);
+        padding-bottom: 0.5rem;
         line-height: rem(19);
       }
 
       & + span:not(.h1, .h2, .h3, .h4, .h5, .h6) + * {
         padding-right: var(--dialog-padding);
-        margin-right: rem(20);
+        margin-right: 1.25rem;
         display: block;
       }
 
@@ -157,12 +157,12 @@ $darkMode: 'true' !default;
       font-family: 'Font Awesome 6 Pro';
       font-size: 3rem;
       margin-top: 0;
-      margin-bottom: rem(24);
+      margin-bottom: 1.5rem;
       line-height: 1;
       color: var(--colour-heading);
       clear: both;
 
-      @include media-breakpoint-up(md, $mobileOnly) {
+      @media screen and (min-width: 62em) {
         font-size: 4rem;
       }
     }
@@ -176,12 +176,12 @@ $darkMode: 'true' !default;
       line-height: 1;
       font-size: 3rem;
       margin-top: 0;
-      margin-bottom: rem(24);
+      margin-bottom: 1.5rem;
       line-height: 1;
       color: var(--colour-heading);
       clear: both;
 
-      @include media-breakpoint-up(md, $mobileOnly) {
+      @media screen and (min-width: 62em) {
         font-size: 4rem;
       }
 
@@ -212,7 +212,7 @@ $darkMode: 'true' !default;
       }
     }
 
-    @include media-breakpoint-up(sm, $mobileOnly) {
+    @media screen and (min-width: 36em) {
       :is(button, .btn):has(~ :is(button, .btn):last-child),
       :is(button, .btn):last-child {
         min-width: calc(50% - 1rem);
@@ -231,12 +231,12 @@ $darkMode: 'true' !default;
       display: contents;
     }
 
-    @include media-breakpoint-up(sm, $mobileOnly) {
+    @media screen and (min-width: 36em) {
       min-width: rem(686);
       max-width: rem(686);
     }
 
-    @include media-breakpoint-up(md, $mobileOnly) {
+    @media screen and (min-width: 62em) {
       min-width: rem(736);
       max-width: rem(736);
     }
@@ -312,7 +312,7 @@ $darkMode: 'true' !default;
       display: none;
     }
 
-    @include media-breakpoint-up(sm, $mobileOnly) {
+    @media screen and (min-width: 36em) {
       min-width: rem(452);
       width: rem(452);
       max-width: rem(452);
@@ -333,7 +333,7 @@ $darkMode: 'true' !default;
       }
     }
 
-    @include media-breakpoint-up(md, $mobileOnly) {
+    @media screen and (min-width: 62em) {
       min-width: rem(924);
       width: rem(924);
       max-width: rem(924);

package/assets/sass/elements/popover.scss

@@ -1,11 +1,11 @@
 @use 'sass:math';
 @use '../_func' as *;
 
-$layers: 'true' !default;
-$mobileOnly: 'false' !default;
-$darkMode: 'true' !default;
 
-@include layer('elements', $layers) {
+
+
+
+@layer elements {
   // #region popover styling
   .dialog__wrapper {
     position: relative;
@@ -70,9 +70,9 @@ $darkMode: 'true' !default;
       position-try-fallbacks: flip-block, flip-inline !important;
 
       //right: auto;
-      margin: 0 0 0 #{rem(4)};
-      //padding: rem(16);
-      padding: rem(24);
+      margin: 0 0 0 0.25rem;
+      //padding: 1rem;
+      padding: 1.5rem;
 
       &::backdrop {
         display: none;
@@ -93,13 +93,13 @@ $darkMode: 'true' !default;
       top: 100%;
       z-index: var(--index-floating);
       min-width: rem(320);
-      border-radius: rem(16);
+      border-radius: 1rem;
       width: rem(320);
 
-      @include media-breakpoint-up(sm, $mobileOnly) {
+      @media screen and (min-width: 36em) {
         width: rem(335);
       }
-      @include media-breakpoint-up(md, $mobileOnly) {
+      @media screen and (min-width: 62em) {
         width: rem(360);
       }
 
@@ -116,7 +116,7 @@ $darkMode: 'true' !default;
         border-radius: 0.5rem;
         box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.1);
 
-        @include media-breakpoint-up(sm, $mobileOnly) {
+        @media screen and (min-width: 36em) {
           width: max-content !important;
         }
 
@@ -202,7 +202,7 @@ $darkMode: 'true' !default;
       width: rem(319);
     }
 
-    @include media-breakpoint-up(sm, $mobileOnly) {
+    @media screen and (min-width: 36em) {
       &.dialog__wrapper--sm-left > dialog[open] {
         left: 0;
         right: auto;
@@ -219,7 +219,7 @@ $darkMode: 'true' !default;
       }
     }
 
-    @include media-breakpoint-up(md, $mobileOnly) {
+    @media screen and (min-width: 62em) {
       &.dialog__wrapper--md-left > dialog[open] {
         left: 0;
         right: auto;

package/assets/sass/elements/prefix.scss

@@ -17,17 +17,17 @@
     justify-content: center;
     align-items: center;
     width: auto;
-    padding: 0 rem(12);
-    font-size: var(--input-fs, #{rem(16)});
-    line-height: var(--input-lh, #{rem(20)});
+    padding: 0 0.75rem;
+    font-size: var(--input-fs, 1rem);
+    line-height: var(--input-lh, 1.25rem);
     color: var(--colour-body);
     background-color: var(--colour-primary-theme);
     border: 2px solid var(--colour-primary);
     color: var(--colour-white);
     margin: 0 !important;
     //margin-bottom: 1rem;
-    border-end-start-radius: rem(8);
-    border-start-start-radius: rem(8);
+    border-end-start-radius: 0.5rem;
+    border-start-start-radius: 0.5rem;
     min-width: calc(#{rem(20 + 12 + 12)} + 4px);
     overflow: hidden;
     white-space: nowrap;
@@ -37,7 +37,7 @@
 
 
     height: calc(
-      var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) + var(--input-lh, #{rem(20)}) +
+      var(--input-padding-block, 0.75rem) + var(--input-padding-block, 0.75rem) + var(--input-lh, 1.25rem) +
         4px
     );
 
@@ -51,7 +51,7 @@
 
     &:after {
       display: inline-block;
-      max-width: rem(20);
+      max-width: 1.25rem;
     }
 
     &[class*='fa-'] {
@@ -104,8 +104,8 @@
       border-left: none;
       border-end-start-radius: 0;
       border-start-start-radius: 0;
-      border-start-end-radius: rem(8) !important;
-      border-end-end-radius: rem(8) !important;
+      border-start-end-radius: 0.5rem !important;
+      border-end-end-radius: 0.5rem !important;
       order: 2;
     }