@iamproperty/components 3.7.3 → 3.7.5

package/assets/sass/_components.scss

@@ -3,7 +3,7 @@
 @use "components/header.scss";
 @use "components/testimonial.scss";
 @use "components/accordion.scss";
-@use "components/alert";
+@use "components/notification";
 @use "components/carousel.scss";
 @use "components/property-searchbar.scss";
 @use "components/tabs.scss";

package/assets/sass/_corefiles.scss

@@ -21,6 +21,7 @@
 @use "components/dialog.scss";
 
 @use "components/pagination.scss";
+@use "components/accordion.scss";
 
 // Bootstrap elements
 @import "../bootstrap/scss/_transitions.scss";

package/assets/sass/components/card.scss

@@ -58,10 +58,9 @@
   }
 
   &:is(:hover,:focus,.hover) {
-    --icon-right: 0.5rem;
+    --card-icon-right: 0.5rem;
     outline: 2px solid var(--colour, var(--colour-primary));
     outline-offset: -2px;
-
   }
   
   // Update arrow cololur
@@ -76,7 +75,7 @@
   }
 
   &:is(:active, .active){
-    --icon-right: 0.5rem;
+    --card-icon-right: 0.5rem;
     outline: none;
     
     &:before {
@@ -225,12 +224,17 @@
       position: absolute;
       top: 0;
       left: 0;
-      width: 101%;
-      height: 101%;
+      width: 102%;
+      height: 102%;
       object-fit: cover;
     }
   }
 }
+
+.card.card--lg-image:has(.card__head) .card__head{
+  
+  padding-top: 55%;
+}
 // #endregion
 
 //#region card with a footer

package/assets/sass/components/dialog.scss

@@ -37,6 +37,11 @@ dialog[open] {
 // #endregion
 
 // #region modal styling
+
+*:not(.dialog__wrapper) > dialog[open] {
+
+}
+
 *:not(.dialog__wrapper) > dialog[open] {
   overflow-y: hidden;
   width: 90vw;
@@ -135,16 +140,9 @@ dialog[open] {
     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) {
+  @media screen and (max-width: 36em) {
+
+    :is(form, fieldset, .btn--wrapper):has(> .btn:first-child, > .btn:last-child) .btn:not(.dialog__close) {
       width: 100%;
       max-width: 100%;
       margin: 0;
@@ -242,6 +240,7 @@ dialog::backdrop {
 
   &:not(:has(fieldset.active)) fieldset:first-of-type{
     display: flex;
+    flex-direction: column;
   }
 
   form > *:not(fieldset) {
@@ -319,6 +318,11 @@ dialog::backdrop {
     }
   }
 
+  @include media-breakpoint-up(sm) {
+    min-width: rem(452);
+    width: rem(452);
+    max-width: rem(452);
+  }
   @include media-breakpoint-up(md) {
     min-width: rem(924);
     width: rem(924);
@@ -428,9 +432,13 @@ dialog::backdrop {
 
   position: relative;
   display: inline-block;
+  margin-bottom: calc(var(--btn-margin) - 0.25rem);
 
 
   > .btn:first-child {
+
+    margin-bottom: 0.25rem;
+
     &:after {
       content: "";
     
@@ -471,14 +479,32 @@ dialog::backdrop {
     z-index: var(--index-floating);
     min-width: rem(320);
     border-radius: rem(16);
-    max-width: rem(600);
+    width: rem(319);
+    padding: rem(24);
+
+    @include media-breakpoint-up(sm) {
+      width: rem(335);
+    }
+    @include media-breakpoint-up(md) {
+      width: rem(360);
+    }
   }
 
   &.dialog__wrapper--right > dialog[open]{
 
     right: 0;
     left: auto;
-  }  
+  } 
+
+  &.dialog__wrapper--sm > dialog[open] {
+    
+    width: rem(239);
+  }
+
+  &.dialog__wrapper--lg > dialog[open] {
+    
+    width: rem(319);
+  }
 
   @include media-breakpoint-up(sm) {
     
@@ -491,7 +517,13 @@ dialog::backdrop {
 
       right: 0;
       left: auto;
-    }  
+    }
+    &.dialog__wrapper--sm > dialog[open] {
+      width: rem(265);
+    }
+    &.dialog__wrapper--lg > dialog[open] {
+      width: rem(452);
+    }
   }
 
   @include media-breakpoint-up(md) {
@@ -505,7 +537,13 @@ dialog::backdrop {
 
       right: 0;
       left: auto;
-    }  
+    }
+    &.dialog__wrapper--sm > dialog[open] {
+      width: rem(266);
+    }
+    &.dialog__wrapper--lg > dialog[open] {
+      width: rem(454);
+    }
   }
 }
 

package/assets/sass/components/notification.scss

@@ -0,0 +1,195 @@
+@use "../_func" as *;
+
+:host,
+.iam-notification {
+  display: block;
+  padding: rem(22) rem(24) rem(22) rem(24 - 8)!important;
+  border-radius: rem(8);
+  box-shadow: 2px 6px 12px rgba(0,0,0,0.2);
+  margin-bottom: 1rem;
+  font-size: rem(15);
+  border: rem(2) solid var(--colour,var(--colour-info));
+  background: #e9f9fd;
+  outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
+
+  ::slotted(i),
+  i {
+    color: var(--colour,currentColor);
+  }
+}
+
+:host([data-type]),
+.iam-notification[data-type] {
+  
+  border: rem(2) solid transparent;
+}
+
+:host(.colour-warning),
+.iam-notification.colour-warning {
+
+  background: #FFF6E6;
+}
+
+:host(.colour-danger),
+.iam-notification.colour-danger {
+
+  background: #fcebec;
+}
+
+:host(.colour-success),
+.iam-notification.colour-success {
+
+  background: #f8fdf6;
+}
+
+:host(.bg-white),
+.iam-notification.bg-white{
+  
+  border: none;
+  border-left: rem(8) solid var(--colour-info);
+
+  ::slotted(i),
+  i {
+    color: var(--colour-info);
+  }
+}
+
+// Alerts
+:host([data-type="alert"]),
+.iam-notification[data-type="alert"] {
+  border-radius: 0;
+  position: fixed;
+  top: var(--nav-height);
+  left: 0;
+  right: 0;
+  z-index: calc(var(--index-menu) - 1);
+  margin-bottom: 0;
+}
+
+// Toasts
+:host([data-type="toast"]),
+.iam-notification[data-type="toast"] {
+  
+  margin: auto;
+  display: block;
+
+  width: 100%;
+  max-width: rem(360);
+}
+
+:host([data-type="toast"].notification--dismissable) {
+  
+  max-width: rem(454);
+}
+
+.notification {
+
+  container-type: inline-size;
+  max-width: rem(1112);
+  margin-inline: auto;
+  display: flex;
+  flex-wrap: nowrap;
+
+  @media screen and (prefers-color-scheme: light) {
+    color: var(--colour-heading);
+  }
+
+  .notification__icon {
+
+    margin-inline-end: rem(16);
+    flex-grow: 0;
+
+    ::slotted(i) {
+      font-size: rem(18);
+    }
+  }
+
+  .notification__inner {
+    display: flex;
+    flex-wrap: wrap;
+    flex-grow: 1;
+
+    
+    @container (width > 23.4375em) {
+
+      flex-wrap: nowrap;
+    }
+  }
+
+  .notification__text {
+    flex-grow: 1;
+    flex-shrink: 1;
+    width: 100%;
+  }
+
+  .notification__btns {
+    flex-grow: 0;
+    flex-shrink: 0;
+    --colour-underline: currentColor;
+
+
+    ::slotted(a),
+    ::slotted(button),
+    > * {
+      margin: rem(16) rem(16) 0 0!important;
+    }
+    
+    @container (width > 23.4375em) {
+
+      display: flex;
+      align-items: center;
+      border-left: 1px solid currentColor;
+      margin-left: rem(32);
+
+      ::slotted(a),
+      ::slotted(button),
+      > * {
+        margin: 0 0 0 rem(32)!important;
+      }
+    }
+  }
+
+  .notification__dismiss {
+    flex-grow: 0;
+    padding-left: 1rem;
+
+    button {
+      text-indent: 300%;
+      overflow: hidden;
+      border: none;
+      height: rem(18);
+      width: rem(18);
+      background: transparent;
+      display: inline-block;
+      position: relative;
+      color: inherit;
+
+      &:after {
+        content: "";
+        top: 0;
+        left: 0;
+        position: absolute;
+        display: block;
+        height: rem(18);
+        width: rem(18);
+        z-index: var(--index-focus);
+        background: currentColor;
+        mask-image: var(--icon-close);
+        mask-size: 100%;
+        mask-repeat: no-repeat;
+        mask-position: 50% 50%;
+        -webkit-mask-image: var(--icon-close);
+        -webkit-mask-size: 100%;
+        -webkit-mask-repeat: no-repeat;
+        -webkit-mask-position: 50% 50%;
+      }
+    }
+
+    @container (width > 23.4375em) {
+      
+      padding-left: rem(32);
+      display: flex;
+      align-items: center;
+    }
+  }
+}

package/assets/sass/components/table.scss

@@ -151,13 +151,11 @@ table.border-0 {
 // #endregion
 
 // #region Tables are only stacked on mobile
-*:has(> iam-table){
-  container-type: inline-size;
-}
+*:has(> iam-table),
 *:has(> .iam-table){
   container-type: inline-size;
-  
 }
+
 @container (width < 23.4375em) {
 
   .iam-table, iam-table {
@@ -510,12 +508,17 @@ table {
     [data-content="medium"],
     [data-content="high"],
     [data-content="unknown"],
+    [data-content="overdue"],
     [data-content="incomplete"],
     [data-content="requires approval"],
+    [data-content="approval required"],
+    [data-content="warning"],
     [data-content="verified"],
     [data-content="not started"],
+    [data-content="to do"],
     [data-content="completed"],
-    .alert-status:not([data-content="0"])
+    [data-content="complete"],
+    .alert-status:not([data-content="0"]):not([data-content=""]):not(:empty)
     ) {
     
     position: relative;
@@ -566,31 +569,38 @@ table {
     color: var(--colour-muted);
   }
 
-  :is([data-content="not started"],[data-content="incomplete"]):after {
+  :is([data-content="overdue"],[data-content="incomplete"]):after {
 
     content: "\f024";
     font-weight: light;
     color: var(--colour-danger);
   }
 
-  [data-content="requires approval"]:after {
+  :is([data-content="not started"],[data-content="to do"]):after {
+
+    content: "\f024";
+    font-weight: light;
+    color: var(--colour-muted);
+  }
+
+  :is([data-content="requires approval"],[data-content="approval required"],[data-content="warning"]):after {
 
     content: "\f024";
     font-weight: light;
     color: var(--colour-warning);
   }
 
-  :is([data-content="verified"],[data-content="completed"]):after {
+  :is([data-content="verified"],[data-content="completed"],[data-content="complete"]):after {
     
     content: "\f00c";
     font-weight: normal;
     color: var(--colour-complete);
   }
 
-  .alert-status:not([data-content="0"]):not(:empty):after {
+  .alert-status:not([data-content="0"]):not([data-content=""]):not(:empty):after {
 
-    content: "\f06a";
+    content: "\f0f3";
     font-weight: light;
-    color: var(--colour-danger);
+    color: var(--colour-primary);
   }
-}
+}

package/assets/sass/components/tooltips.scss

@@ -1,85 +1,173 @@
 @use "../_func.scss" as *;
 
-:is(abbr[title], .tooltip) {
 
-  text-decoration: underline;
-  text-underline-offset: 0.2em;
-  text-decoration-thickness: 2px;
-  text-decoration-style: dashed;
-  text-decoration-color: var(--colour-underline);
-  position: relative;
-  cursor: help;
+@mixin tooltip(){
 
-  &:is(:hover, :focus, :active){
+  display: block;
+  z-index: var(--index-floating);
+  position: absolute;
+  top: calc(100% + 0.5rem);
+  left: auto;
+  right: 0.85em;
+  width: #{rem(270)};
+  transform: translate(50%,0);
+  background: var(--colour-primary);
+  color: var(--colour-white);
+  padding: rem(24);
+  border-radius: 0.5rem;
+  box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.11); 
+
+  > strong:first-child {
+    display: block;
+    padding-bottom: 1rem;
+  }
 
-    text-decoration: none;
+  @include media-breakpoint-up(sm) {
+
+    width: #{rem(335)}; 
   }
-}
+  
+  @include media-breakpoint-up(md) {
 
-@mixin tooltip(){
+    width: #{rem(360)}; 
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    margin-left: -0.25rem;
+    border-width: 0.5rem;
+    border-style: solid;
+    border-color: transparent transparent var(--colour-primary) transparent;
+    margin-bottom: -1px;
+  }
 
-  display: block;
-  z-index: var(--index-above);
-  position: absolute;
-  top: calc(100% + 0.25rem);
-  left: 50%;
-  min-width: max(120%, #{rem(100)});
-  transform: translate(-50%,0);
-  background: var(--colour-canvas-2);
-  color: inherit;
-  padding: 0.5em;
-  border-radius: 3px;
-  box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.3);
 }
 
-.tooltip {
 
 
+:is(abbr[title], .tooltip) {
+
+  text-decoration: none;
+  position: relative;
+
+  &:is(:hover, :focus, :active){
+
+    text-decoration: none;
+  }
+
   &:after{
 
-    content: "";
+    font-family: "Font Awesome 6 Pro";
+    font-weight: 900;
+    content: "\f059";
     display: inline-block;
-    margin-left: 0.1em;
+    margin-left: 0.2em;
+    margin-right: 0.1em;
     margin-bottom: 0.1em;
-    width: 0.8em;
-    height: 0.9em;
-    vertical-align: text-bottom;
-    background: currentColor;
-    mask-image: var(--icon-question);
-    mask-size: 100%;
-    mask-repeat: no-repeat;
-    mask-position: 50% 50%;
-    -webkit-mask-image: var(--icon-question);
-    -webkit-mask-size: 100%;
-    -webkit-mask-repeat: no-repeat;
-    -webkit-mask-position: 50% 50%;
+    color: var(--colour-primary);
+
   }
 
-  .tooltip__content {
+  > span {
 
     opacity: 0;
     position: absolute;
     
   }
 
-  &:is(:hover, :focus, :active){
+  &:is(:hover, .hover, :focus, :active){
 
-    .tooltip__content {
+    > span {
 
       opacity: 1;
       @include tooltip();
     }
   }
-}
 
-@media (hover: none) {
+  &.tooltip--top span{
+      
+    top: auto;
+    bottom: calc(100% + 0.5rem);
+    left: auto;
+    right: 0.85em;
+
+    &:after {
+        
+      top: 100%;
+      bottom: auto;
+      left: 50%;
+      border-color: var(--colour-primary) transparent transparent transparent;
+      margin-top: -1px;
+    }
+  }
+
+
+  &.shift--left span{
+    transform: translate(calc(0% + 1.5rem), 0);
+
+    &:after {
+      left: calc(100% - 1.5rem);
+    }
+  }
+  &.shift--right span{
+    transform: translate(calc(100% - 1rem), 0);
+
+    &:after {
+      left: 1rem;
+    }
+  }
+
   
-  :is(abbr[title], .tooltip[title]) {
+  @include media-breakpoint-up(sm) {
 
-    &:is(:hover, :focus, :active):before{
+    &:is(.shift--left,.shift--right) span{
+      transform: translate(50%, 0);
+  
+      &:after {
+        left: 50%
+      }
+    }
+
+    &.tooltip--left span{
       
-      content: attr(title);
-      @include tooltip();
+      top: 50%;
+      bottom: auto;
+      left: auto;
+      right: 1.6em;
+  
+      transform: translate(0,-50%);
+  
+      &:after {
+          
+        top: calc(50% - 0.5em);
+        bottom: auto;
+        left: calc(100% + 0.25em - 1px);
+        border-color: transparent transparent transparent var(--colour-primary);
+        margin-bottom: 0;
+      }
+    }
+    &.tooltip--right span{
+        
+      top: 50%;
+      bottom: auto;
+      left: calc(100% + 0.5rem);
+      right: auto;
+  
+      transform: translate(0,-50%);
+  
+      &:after {
+          
+        top: calc(50% - 0.5em);
+        bottom: auto;
+        left: auto;
+        right: calc(100% - 1px);
+        border-color: transparent var(--colour-primary) transparent transparent;
+        margin-bottom: 0;
+      }
     }
+
   }
-}
+}

package/assets/sass/foundations/buttons.scss

@@ -21,7 +21,7 @@
   }
 
   display: inline-block;
-  font-weight: bold;
+  font-weight: bold!important;
   text-align: left;
   text-decoration: none;
   vertical-align: middle;