@iamproperty/components 3.5.0 → 3.7.0

package/assets/sass/components/card.scss

@@ -2,15 +2,10 @@
 
 // #region Default card
 .card {
-  --top-padding: 2rem;
-  --right-padding: #{rem(16+16+24)};
-  --bottom-padding: 2rem;
-  --left-padding: 1rem;
-  --icon-right: 1rem;
-
+  --card-icon-right: 1rem;
+  box-shadow: var(--card-box-shadow);
+  border-radius: var(--card-border-radius);
   position: relative;
-  box-shadow: 2px 6px 12px rgba(0,0,0,0.2);
-  border-radius: rem(8);
   font-weight: bold;
   font-size: rem(18);
   line-height: rem(24);
@@ -21,18 +16,19 @@
   display: block;
   overflow: hidden;
   z-index: 0;
-  background: #ffffff;
+  background: var(--colour-canvas-2);
+  outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
+  outline-offset: -1px;
 
   &.border-0 {
     box-shadow: none;
-    --left-padding: 0rem;
+    --card-left-padding: 0rem;
     outline-offset: 1px!important;
   }
 
   &__body {
-    
     position: relative;
-    padding: var(--top-padding) var(--right-padding) var(--bottom-padding) var(--left-padding);
+    padding: var(--card-top-padding) var(--card-right-padding) var(--card-bottom-padding) var(--card-left-padding);
     z-index: -1;
   }
 
@@ -40,8 +36,8 @@
   &:after {
     content: "";
     position: absolute;
-    right: var(--icon-right);
-    bottom: var(--bottom-padding);
+    right: var(--card-icon-right);
+    bottom: var(--card-bottom-padding);
     height: rem(24);
     width: rem(24);
     background: var(--colour-warning);
@@ -49,7 +45,7 @@
   }
 
   &:after {
-    background: var(--colour-primary);
+    background: var(--colour-primary-theme);
     mask-image: var(--icon-arrow);
     mask-size: 50%;
     mask-repeat: no-repeat;
@@ -63,11 +59,16 @@
 
   &:is(:hover,:focus,.hover) {
     --icon-right: 0.5rem;
-    outline: 2px solid var(--colour-primary);
+    outline: 2px solid var(--colour, var(--colour-primary));
     outline-offset: -2px;
 
+  }
+  
+  // Update arrow cololur
+  &:not([class*="colour-"]):is(:hover,:focus,.hover) {
+
     &:before {
-      background: var(--colour-primary);
+      background: var(--colour-primary-theme);
     }
     &:after {
       background: #ffffff;
@@ -122,18 +123,14 @@
   }
 }
 
-
 ::slotted(i){
-  
-  font-size: rem(18)!important;
-  height: rem(18)!important;
-  margin: 0 0 0.5rem 0!important;
-  font-weight: 400!important;
-  display: block!important;
+  font-size: rem(24);
+  margin: -3px var(--card-icon-right) 0 0;
+  font-weight: 400;
+  vertical-align: middle;
 }
 
 ::slotted(span){
-  
   display: block;
   font-weight: normal;
   padding-top: rem(24);
@@ -141,6 +138,14 @@
 }
 // #endregion
 
+// #region border left
+.card[class*="colour-"],
+.card--filter {
+  
+  border-left: rem(12) solid var(--colour,var(--colour-primary));
+}
+// #endregion
+
 //#region Filter card
 .card--filter {
   --top-padding: #{rem(24)};
@@ -148,7 +153,7 @@
   --bottom-padding: #{rem(24)};
   --left-padding: 1rem;
 
-  border-left: rem(12) solid var(--colour,var(--colour-primary));
+  //border-left: rem(12) solid var(--colour,var(--colour-primary));
 
   &:has(.card__total) .card__body{
 
@@ -198,13 +203,19 @@
     padding-right: rem(16);
   }
 }
+
+.card--filter ::slotted(i) {
+  display: block !important;
+  font-size: rem(18)!important;
+  margin: 0 0 0.5rem 0!important;
+}
 // #endregion
 
 // #region card with an image
 .card:has(.card__head) {
   .card__head {
     padding-bottom: 0;
-    padding-top: 55%;
+    padding-top: 27%;
     position: relative;
     overflow: hidden;
     background: rgba(0,0,0,0.1);
@@ -232,7 +243,7 @@
   .card__footer {
     position: relative;
     background: #ffffff;
-    padding: var(--top-padding) var(--right-padding) var(--bottom-padding) var(--left-padding);
+    padding: var(--card-top-padding) var(--card-right-padding) var(--card-bottom-padding) var(--card-left-padding);
     z-index: -1;
     display: block;
   }

package/assets/sass/components/charts.scss

@@ -32,7 +32,7 @@ $chart-colors: map-merge((
   }
 }
 
-//@media (forced-colors: active) {
+@media (forced-colors: active) {
   .chart__wrapper:has(.chart:not(.chart--line)) {
 
     --colour-chart-1: repeating-linear-gradient(
@@ -52,7 +52,7 @@ $chart-colors: map-merge((
     );
     // TODO: Add more patterns
   }
-//}
+}
 // #endregion
 
 // #region Apply colours

package/assets/sass/components/dialog.scss

@@ -15,14 +15,39 @@ dialog[open] {
   height: fit-content;  
   border: none;
   overscroll-behavior: contain;
-  background: white;
+  background: var(--colour-canvas-2);
   box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.11);
-  border-radius: rem(28);
+  border-radius: rem(10);
   padding: var(--dialog-padding);
+  outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
+
+  display: flex;
+  flex-direction: column;
+
+  > *:last-child,
+  > .mh-lg > *:last-child{
+    margin-bottom: 0;
+  }
+  
+  > :is(p):last-child,
+  > .mh-lg > :is(p):last-child {
+    padding-bottom: 0;
+  }
+}
+// #endregion
+
+// #region modal styling
+*:not(.dialog__wrapper) > dialog[open] {
+  overflow-y: hidden;
+  width: 90vw;
+  max-width: rem(324); // col-width*4
+
+  //height: 90vh;
+  max-height: min(90vh, #{rem(752)});
+  overscroll-behavior: contain;
 
   // Close button
   > form:first-child {
-
     position: static;
   }
 
@@ -61,53 +86,340 @@ dialog[open] {
     }
 
     & + * {
-      padding-right: rem(36);
+      padding-right: var(--dialog-padding);
+      margin-right: rem(20);
+      display: block;
     }
-  }
 
-  > *:last-child {
-    margin-bottom: 0;
-  }
-  > :is(p):last-child {
-    padding-bottom: 0;
-  }
-}
-// #endregion
+    & + span:not(.h1,.h2,.h3,.h4,.h5,.h6) {
+      padding-bottom: rem(8);
+      line-height: rem(19);
+    }
 
-// #region modal styling
-*:not(.dialog__wrapper) > dialog[open] {
-  
-  min-width: 100%;
-  max-width: 80vw;
-  max-height: 85vh;
-  margin-top: 12vh;
+    & + span:not(.h1,.h2,.h3,.h4,.h5,.h6) + * {
+      padding-right: var(--dialog-padding);
+      margin-right: rem(20);
+      display: block;
+    }
+
+    @media (forced-colors: active) {
+      text-indent: 0;
+      width: fit-content;
+
+      &:after {
+        display: none;
+      }
+    }
+  }
 
   @include media-breakpoint-up(sm) {
     
-    --dialog-padding: #{rem(56)};
-
-    min-width: 80vw;
-    max-height: 80vh;
-    margin-top: auto;
-    border-radius: rem(34);
+    --dialog-padding: #{rem(32)};
+    min-width: rem(335);
+    width: fit-content;
+    max-width: rem(686);
   }
   
   @include media-breakpoint-up(md) {
     
-    min-width: rem(1112);
-    width: rem(1112);
-    max-width: rem(1112);
+    min-width: rem(454);
+    width: fit-content;
+    max-width: rem(736);
   }
 
   &:has(.youtube-embed){
     padding: 0!important;
   }
-}
 
+  &.dialog--fullwidth {
+    max-width: rem(1112);
+  }
 
+  container-type: inline-size;
+    
+  @container (width < 23.4375em) {
+
+    > .btn:not(.dialog__close),
+    > form > .btn:not(.dialog__close),
+    > .mh-lg > :is(form,div) > .btn:not(.dialog__close),
+    > .mh-lg > .btn:not(.dialog__close),
+    > form > fieldset > .btn:not(.dialog__close),
+    .btn--wrapper > .btn:not(.dialog__close) {
+      width: 100%;
+      max-width: 100%;
+      margin: 0;
+      display: block;
+      text-align: center;
+
+      &:not(:last-child) {
+        margin-bottom: 1rem!important;
+      }
+    }
+  }
+
+  .mh-lg {
+    padding-right: calc(var(--dialog-padding) - 10px);
+    margin-right: calc((var(--dialog-padding) * -1) + 10px);
+    margin-bottom: calc(var(--dialog-padding) * -1);
+    padding-bottom: var(--dialog-padding);
+    //max-height: none!important;
+
+    &:before {
+      top: 100%;
+      height: var(--dialog-padding);
+    }
+  }
+}
 
 dialog::backdrop {
   background: rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(4px);
+  overscroll-behavior: contain;
+}
+// #endregion
+
+// #region Transactional 
+*:not(.dialog__wrapper) > dialog[open]:not(.dialog--multi):is(:has(button:last-child),:has(form:last-child > button:last-child)) {
+
+  text-align: center;
+
+  &:before {
+    content: "\f05a";
+    font-weight: 300;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    display: var(--fa-display,inline-block);
+    font-style: normal;
+    font-variant: normal;
+    line-height: 1;
+    text-rendering: auto;
+    font-family: "Font Awesome 6 Pro";
+    font-size: 3rem;
+    @include media-breakpoint-up(md) {
+      font-size: 4rem;
+    }
+    margin-top: 0;
+    margin-bottom: rem(24);
+    line-height: 1;
+    color: var(--colour-heading);
+    clear: both;
+  }
+
+  > form:first-child button,
+  > button:first-child {
+    display: none;
+
+    & + * {
+      padding-right: 0;
+      margin-right: 0;
+    }
+
+    & + span:not(.h1,.h2,.h3,.h4,.h5,.h6) + * {
+      padding-right: 0;
+      margin-right: 0;
+    }
+  }
+
+  button {
+    margin-bottom: 0;
+  }
+}
+// #endregion
+
+// #region Multi 
+.js-enabled *:not(.dialog__wrapper) > dialog[open].dialog--multi {
+
+
+  padding-top: calc(var(--dialog-padding) * 4);
+
+  & > form:first-child button, & > button:first-child {
+    top: calc(var(--dialog-padding) * 4);
+  }
+
+  fieldset:not(.active) {
+    display: none;
+  }
+
+  &:not(:has(fieldset.active)) fieldset:first-of-type{
+    display: flex;
+  }
+
+  form > *:not(fieldset) {
+    display: none!important;
+  }
+
+  form {
+    max-height: rem(370);
+  }
+
+  :is(.h1,.h2,.h3,.h4,.h5,.h6){
+    padding-right: calc(var(--dialog-padding) * 3);
+    padding-bottom: var(--dialog-padding);
+  }
+
+  .steps {
+    width: 100%;
+    position: absolute;
+    top:0;
+    left: 0;
+    padding: var(--dialog-padding);
+    counter-reset: section;
+    display: flex;
+    justify-content: space-between;
+
+    &:before {   
+ 
+      content: "";
+      position: absolute;
+      top: calc(50% - 1px);
+      left: var(--dialog-padding);
+      z-index: 2;
+      width: calc(100% - var(--dialog-padding) - var(--dialog-padding));
+      height: 2px;
+      background: currentColor;
+      z-index: 1;
+      opacity: 0.5;
+    }
+
+    button {
+
+      position: relative;
+      background: transparent;
+      border: none;
+      color: inherit;
+      height: rem(24);
+      line-height: rem(24);
+      width: rem(24);
+      text-indent: 300%;
+      overflow: hidden;
+      z-index: 2;
+      background-color: var(--colour-primary);
+      outline: 0.5rem solid var(--colour-primary);
+
+      &:before {
+        position: absolute;
+        top: 0;
+        left: 0;
+        counter-increment: section;
+        content: counter(section);
+
+        border: 1px solid currentColor;
+        height: rem(24);
+        line-height: rem(24);
+        width: rem(24);
+        text-align: center;
+        display: inline-block;
+        text-indent: 0;
+        border-radius: 50%;
+      }
+
+      &:not(.active):before {
+        opacity: 0.5;
+      }
+    }
+  }
+
+  @include media-breakpoint-up(md) {
+    min-width: rem(924);
+    width: rem(924);
+    max-width: rem(924);
+    padding-top: var(--dialog-padding);
+    padding-left: calc(var(--dialog-padding) + #{rem(282)});
+    display: flex; 
+    flex-direction: column;
+    //height: rem(478);
+
+    @media (min-height: #{rem(500)}) {
+      height: rem(478);
+      max-height: rem(478);
+    }
+
+
+    & > form:first-child button, & > button:first-child {
+      top: var(--dialog-padding);
+    }
+
+    .steps {
+      width: rem(282);
+      height: 100%;
+      flex-direction: column;
+      justify-content: center;
+
+      &:before {
+        display: none;
+      }
+
+      button {
+        margin-block: 0.5rem;
+        width: 100%;
+        text-indent: 0;
+        text-align: left;
+        padding-left: 2rem;
+        font-size: rem(18);
+        outline-width: 1px;
+      }
+    }
+
+    .btn--wrapper {
+      margin-top: auto;
+      text-align: right;
+    }
+    > form {
+      display: contents
+    }
+    fieldset {    
+      display: flex; 
+      flex-direction: column;
+      flex-grow: 1;
+      position: relative;
+
+      overflow: auto;
+      margin-bottom: calc(var(--dialog-padding) * -1);
+      padding-bottom: var(--dialog-padding);
+
+        
+      padding-right: calc(var(--dialog-padding) - 10px);
+      margin-right: calc((var(--dialog-padding) * -1) + 10px);
+
+      &::before {
+        content: "";
+        top: 100%;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: var(--dialog-padding);
+        min-height: var(--dialog-padding);
+        position: sticky;
+        display: block;
+        background: linear-gradient(180deg, transparent 0%, var(--colour-canvas-2) 100%);
+        z-index: 2;
+        margin-bottom: calc(var(--dialog-padding) * -1);;
+      }
+    }
+  }
+}
+// #endregion
+
+// #region youTube video
+*:not(.dialog__wrapper) > dialog[open]:has(.youtube-embed){
+
+  display: block;
+
+  .mh-lg, .mh-lg:before {
+    display: contents;
+  }
+
+  @include media-breakpoint-up(sm) {
+    
+    min-width: rem(686);
+    max-width: rem(686);
+  }
+  
+  @include media-breakpoint-up(md) {
+    
+    min-width: rem(736);
+    max-width: rem(736);
+  }
 }
 // #endregion
 

package/assets/sass/components/forms.scss

@@ -187,12 +187,12 @@ select[multiple]::-webkit-scrollbar-thumb {
 
   color: var(--colour-white);
   background: var(--colour-primary);
-  padding: 0.75em 1em;
+  padding: calc(0.75em + 1px) 1em;
   font-size: 1rem;
   font-weight: normal;
   line-height: 1.5;
   position: absolute;
-  bottom: 2px;
+  bottom: 0px;
 }
 
 .form-control__wrapper .prefix {

package/assets/sass/components/lists.scss

@@ -12,54 +12,37 @@
     position: relative;
     list-style: none;
     padding-bottom: 1rem;
-    padding-left: 2.5rem;
+    padding-left: 2.25rem;
     
     &:before {
       
-      content: "";
+      content: "\f00c";
       position: absolute;
       top: 0;
       left: 0;
-      width: 1.5em;
-      height: 1.5em;
+      width: 1.25em;
+      height: 1.25em;
+      font-size: 1.25em;
+      line-height: 1;
+      
+      color: var(--colour-complete);
+      font-family: "Font Awesome 6 Pro";
+      font-size: 400;
       
-      background: var(--colour-secondary);
-      mask-image: var(--icon-tick);
-      mask-size: 100%;
-      mask-repeat: no-repeat;
-      mask-position: 50% 50%;
-      -webkit-mask-image: var(--icon-tick);
-      -webkit-mask-size: 100%;
-      -webkit-mask-repeat: no-repeat;
-      -webkit-mask-position: 50% 50%;
-      @media (forced-colors: active) {
-        content: "\2713";
-        -webkit-mask-image: none;
-      }
     }
 
     &.tick--warning:before {
 
-      background: var(--colour-warning);
-      mask-image: var(--icon-warning);
-      -webkit-mask-image: var(--icon-warning);
-      @media (forced-colors: active) {
-        content: "!";
-        mask-image: none;
-        -webkit-mask-image: none;
-      }
+      content: "\f071";
+      font-weight: 300;
+      color: var(--colour-warning);
     }
 
     &.tick--danger:before {
 
-      background: var(--colour-danger);
-      mask-image: var(--icon-warning);
-      -webkit-mask-image: var(--icon-warning);
-      @media (forced-colors: active) {
-        content: "!";
-        mask-image: none;
-        -webkit-mask-image: none;
-      }
+      content: "\f06a";
+      font-weight: 300;
+      color: var(--colour-danger);
     }
 
     &.tick--incomplete:before {

package/assets/sass/components/pagination.scss

@@ -16,12 +16,16 @@
   text-align: center;
   overflow: hidden;
   border: none!important;
+  text-decoration: none;
+  font-weight: normal;
+  display: block;
 }
 
 .pagination .page-item {
   border: var(--#{$prefix}pagination-border-width) solid var(--#{$prefix}pagination-border-color);
   border-radius: 4px!important;
   @include transition($pagination-transition);
+  overflow: hidden;
 
   &:hover {
     border-color: var(--#{$prefix}pagination-hover-border-color);