@iamproperty/components 3.5.0 → 3.6.0

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,10 +15,11 @@ 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);
   padding: var(--dialog-padding);
+  outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
 
   // Close button
   > form:first-child {
@@ -61,7 +62,8 @@ dialog[open] {
     }
 
     & + * {
-      padding-right: rem(36);
+      padding-right: var(--dialog-padding);
+      margin-right: rem(20);
     }
   }
 
@@ -76,27 +78,21 @@ dialog[open] {
 
 // #region modal styling
 *:not(.dialog__wrapper) > dialog[open] {
-  
-  min-width: 100%;
-  max-width: 80vw;
-  max-height: 85vh;
-  margin-top: 12vh;
+  overflow-y: hidden;
+  width: 90vw;
+  max-width: rem(376); // col-width*4 // 96px*4 = 376px
+  height: fit-content;
 
   @include media-breakpoint-up(sm) {
     
-    --dialog-padding: #{rem(56)};
+    --dialog-padding: #{rem(32)};
 
-    min-width: 80vw;
-    max-height: 80vh;
-    margin-top: auto;
+    max-width: rem(564); // col-width*6 // 96px*6 = 564px
     border-radius: rem(34);
   }
   
   @include media-breakpoint-up(md) {
     
-    min-width: rem(1112);
-    width: rem(1112);
-    max-width: rem(1112);
   }
 
   &:has(.youtube-embed){
@@ -104,10 +100,22 @@ dialog[open] {
   }
 }
 
+.mh-lg {
+  padding-right: rem(20);
+
+  @include media-breakpoint-up(md) {
+    margin-right: var(--dialog-padding);
+  }
+
+  > *:last-child {
+    margin-bottom: 0;
+  }
+}
 
 
 dialog::backdrop {
   background: rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(4px);
 }
 // #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/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);

package/assets/sass/components/table.scss

@@ -4,7 +4,7 @@
 table {
   --border-width: 2px;
   --inner-border-width: 2px;
-  --hover-background: #EEEEEE;
+  --hover-background: var(--colour-light);
   width: 100%;
   font-size: rem(16);
   border: none;
@@ -24,7 +24,10 @@ td,th {
   color: var(--colour-body);
   
   &:last-child {
-    padding-right: 0;
+    padding-right: rem(2);
+  }
+  &:first-child {
+    padding-left: rem(2);
   }
 }
 
@@ -56,8 +59,13 @@ tbody tr {
 
   &:is(:hover,:focus-within,.hover) {
 
+    --bg-colour-rgb: 238,238,238;
+
     th,td {
       background: var(--hover-background);
+      color: var(--colour-primary-theme);
+      --colour-link: var(--colour-primary-theme);
+      --colour-hover: var(--colour-primary-theme);
     }
   }
 
@@ -89,7 +97,9 @@ table.border-0 {
 // #region Table wrapper - Add via JS if needed, provides a safe space to scroll
 :is(iam-table, .iam-table) {
   --wrapper-padding: #{rem(32)};
+  --bg-colour: #ffffff;
   display: block;
+  background: var(--colour-canvas-2);
   padding: var(--wrapper-padding);
   box-shadow: 0px 6px 12px rgba(0,0,0,0.11);
   border-radius: rem(8);
@@ -119,25 +129,43 @@ table.border-0 {
 }
 *:has(> .iam-table){
   container-type: inline-size;
+  
 }
 @container (width < 23.4375em) {
 
+  .iam-table, iam-table {
+    margin-left: -1.5rem;
+    margin-right: -1.5rem;
+    margin-bottom: 0;
+  }
+  
+
   .table__wrapper:not(.table--fullwidth) {
 
     overflow: hidden;
     max-height: none!important;
-
   }
   :is(iam-table, .iam-table):not(.table--fullwidth) {
     
+    background: none;
+    padding: 0;
+    box-shadow: none;
+    overflow: visible;
+
     table {
 
+      overflow: visible;
+      margin-inline: 1.5rem;
+      margin-bottom: 1.5rem;
+      width: calc(100% - 3rem);
+
       thead {
         display: none;
       }
 
       tbody {
         display: block;
+        overflow: visible;
 
         tr td:first-child {
           padding-top:0;
@@ -148,6 +176,10 @@ table.border-0 {
         display: block;
         position: relative;
         border: none;
+        background: var(--colour-canvas-2);
+        padding: var(--wrapper-padding);
+        box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
+        border-radius: rem(8);
 
         & + tr {
           margin-top: rem(32);
@@ -194,6 +226,14 @@ table.border-0 {
         }
       }
 
+      td:first-child::after {
+        top: 1.75rem;
+      }
+
+      td::after {
+        top: 2.5rem;
+      }
+
       tbody tr:first-child td:not(:first-child) {
         border-top: var(--border-width) solid currentColor!important;
         border-color: var(--colour-border)!important;
@@ -305,14 +345,18 @@ table.border-0 {
       min-width: fit-content;
       min-height: var(--row-height);
       text-align: right;
-      background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 1.25rem);
-      background: linear-gradient(90deg, rgba(var(--bg-colour-rgb,255,255,255),0) 0%, rgba(var(--bg-colour-rgb,255,255,255),1) 1.25rem);
+      background: linear-gradient(90deg, transparent 0%, var(--colour-canvas-2) 1.25rem);
 
       a {
         white-space: nowrap;
       }
     }
 
+    tr:hover > *:last-child {
+
+      background: linear-gradient(90deg, transparent 0%, var(--hover-background) 1.25rem);
+    }
+
     tbody tr > *:last-child {
       margin-top: -1px;
     }
@@ -327,9 +371,8 @@ table.border-0 {
 // #endregion
 
 // #region Max height tables
-.table__wrapper:is(.table--mh-small,.table--mh-medium,.table--mh-large) {
-  max-height: var(--table-mh,#{rem(200)});
-  overflow: auto;
+.table__wrapper:is(.mh-sm,.mh-md,.mh-lg) {
+  
   position: relative;
 
   &::before {
@@ -341,25 +384,15 @@ table.border-0 {
     height: 1.2rem;
     position: sticky;
     display: block;
-    background: linear-gradient(180deg, rgba(var(--bg-colour-rgb, 255, 255, 255), 0) 0%, rgba(var(--bg-colour-rgb, 255, 255, 255), 1) 100%);
+    background: linear-gradient(180deg, transparent 0%, var(--colour-canvas-2) 100%);
     border-bottom: 2px solid var(--colour-border);
     z-index: 2;
     margin-bottom: -1.2rem;
   }
 }
 
-.table__wrapper.table--mh-small {
-  --table-mh: #{$table-mh-sm};
-}
-.table__wrapper.table--mh-medium {
-  --table-mh: #{$table-mh-md};
-}
-.table__wrapper.table--mh-large {
-  --table-mh: #{$table-mh-lg};
-}
-
 // If table CTA class is set then undo max-height
-.table--cta > .table__wrapper:is(.table--mh-small,.table--mh-medium,.table--mh-large) {
+.table--cta > .table__wrapper:is(.mh-sm,.mh-md,.mh-lg) {
   max-height: none;
   position: static;
 
@@ -368,7 +401,7 @@ table.border-0 {
   }
 }
 
-iam-table:is(.table--mh-small,.table--mh-medium,.table--mh-large):not(.table--cta) {
+iam-table:is(.mh-sm,.mh-md,.mh-lg):not(.table--cta) {
 
   position: relative;
 
@@ -377,7 +410,7 @@ iam-table:is(.table--mh-small,.table--mh-medium,.table--mh-large):not(.table--ct
     top: 0;
     left: 0;
     z-index: 1;
-    background-color: var(--colour-white);;
+    background-color: var(--colour-canvas-2);
 
     &:before {
       content: "";
@@ -413,11 +446,93 @@ table:not(.table--filtered) tbody tr:nth-child(15) ~ tr {
 }
 
 // Statuses 
-/* Will be used in the future
-[data-content="Incomplete"] {
-  background-color: red;
-}
-[data-content="Verified"] {
-  background-color: green;
-}
-*/
+
+table {
+    
+  :is([data-content="Low"],
+    [data-content="Medium"],
+    [data-content="High"],
+    [data-content="Incomplete"],
+    [data-content="Requires approval"],
+    [data-content="Verified"],
+    [data-content="Not started"],
+    [data-content="Completed"],
+    .alert-status
+    ) {
+    
+    position: relative;
+    padding-left: 1.5rem;
+
+    &::before {
+      margin-left: -1.5rem!important;
+    }
+
+    &:after {
+
+      position: absolute;
+      top: 1rem;
+      left: 0;
+
+      content: "";
+      height: rem(16);
+      width: rem(16);
+      display: inline-block;
+      mask-size: 100%;
+      mask-repeat: no-repeat;
+      mask-position: 50% 50%;
+      -webkit-mask-size: 100%;
+      -webkit-mask-repeat: no-repeat;
+      -webkit-mask-position: 50% 50%;
+    }
+  }
+
+  [data-content="High"]:after {
+
+    background: var(--colour-danger);
+    mask-image: var(--icon-high);
+    -webkit-mask-image: var(--icon-high);
+  }
+
+  [data-content="Medium"]:after {
+
+    background: var(--colour-warning);
+    mask-image: var(--icon-medium);
+    -webkit-mask-image: var(--icon-medium);
+  }
+
+  [data-content="Low"]:after {
+
+    background: var(--colour-success);
+    mask-image: var(--icon-low);
+    -webkit-mask-image: var(--icon-low); 
+  }
+
+  :is([data-content="Not started"],[data-content="Incomplete"]):after {
+
+    background: var(--colour-danger);
+    mask-image: var(--icon-flag);
+    -webkit-mask-image: var(--icon-flag); 
+  }
+
+  [data-content="Requires approval"]:after {
+
+    background: var(--colour-warning);
+    mask-image: var(--icon-flag);
+    -webkit-mask-image: var(--icon-flag); 
+  }
+
+  :is([data-content="Verified"],[data-content="Completed"]):after {
+
+    background: var(--colour-success);
+    mask-image: var(--icon-tick);
+    -webkit-mask-image: var(--icon-tick); 
+  }
+
+
+  .alert-status:not(:empty):after {
+
+    background: var(--colour-danger);
+    mask-image: var(--icon-warning);
+    -webkit-mask-image: var(--icon-warning); 
+  }
+}

package/assets/sass/components/tabs.scss

@@ -1,116 +1,72 @@
 @use "../_func" as *;
 
-.tabs {
+.tabs:not(.admin-panel) {
 
   position: relative;
-
-  > .tabs__links {
-    margin-bottom: 1.5rem;
-    overflow: hidden;
-    padding-bottom: 2px;
-
-
-    .link:not(.text-decoration-none):not(.btn) {
-      --is-current: 0;
-      font-weight: bold;
-      font-family: var(--font-heading);
-      font-size: rem(18);
-      cursor: pointer;
-      margin: 0 0 0.5rem 0;
-      float: left;
-      clear: both;
-      padding: 0;
-      display: inline-block;
-
-      @include media-breakpoint-up(sm) {
-        clear: none;
-        margin-bottom: 0;
-        margin-right: 2rem;
-      }
-
-      &:after {
-        position: absolute;
-        content: "";
-        top: 100%;
-        left: 50%;
-        height: 2px;
-        //width: 100%;
-        transform: translate(-50%,0);
-        background: var(--colour-underline);
-        transition: width 0.5s;
-        
-        width: calc(var(--is-current) * 100%);
-      }
-
-      &:hover:after,
-      &:focus:after,
-      &.focus:after {
-        width: 100%;
-      }
-    }
-  }
-
-  .tabs__links .link:not(.text-decoration-none):not(.btn)[aria-pressed="true"] {
-      
-    --is-current: 1;
-    --panel-tab-colour: white;
-    --panel-tab-border: var(--colour-secondary)
-  }
 }
 
-// #region admin panel
-.admin-panel .tabs__links,
-:host(.admin-panel) .tabs__links {
-/*
-  margin-top: -3px!important;
-  margin-left: calc(var(--panel-gutter) * -1);
-  margin-right: calc(var(--panel-gutter) * -1);
-  display: flex;
-  flex-direction: column;
-  background-color: var(--colour-canvas);
-  border-bottom: 2px solid var(--colour-border-light);
-  margin-bottom: var(--panel-gutter);
-
-  @include media-breakpoint-up(sm) {
+.tabs__links {
+  margin-bottom: 1.5rem;
+  overflow: visible;
+  padding-bottom: 2px;
+  position: relative;
+  display: block;
 
-    flex-direction: row;
-    border-top: 1px solid var(--colour-border-light);
+  &:after {
+    content: "";
+    left: 50%;
+    position: relative;
+    height: 3px;
+    width: 100vw;
+    border-bottom: 1px solid var(--colour-border);
+    transform: translate(-50%,0);
+    display: block;
+    clear: both;
   }
 
   .link:not(.text-decoration-none):not(.btn) {
-    padding: var(--panel-gutter);
-    margin: 0;
-    width: 100%;
-    background: var(--panel-tab-colour);
-    border-top: 1px solid var(--colour-border-light);
-    border-left: 3px solid var(--panel-tab-border, #fafafa);
-    text-align: left;
-
-    &:before {
-      display: none;
+    --is-current: 0;
+    font-weight: bold;
+    font-family: var(--font-heading);
+    font-size: rem(18);
+    cursor: pointer;
+    margin: 0.5rem 1.5rem 0 0;
+    padding: 0;
+    display: inline-block;
+
+    &:last-child {
+      margin-inline-end: 0;
     }
 
-    @include media-breakpoint-up(sm) {
-
-      margin-right: 0!important;
-
-      &:first-child{
-        border-left: none!important;
-      }
+    &:after {
+      position: absolute;
+      content: "";
+      top: 100%;
+      left: 50%;
+      height: 2px;
+      transform: translate(-50%,0);
+      background: var(--colour-info);
+      transition: width 0.5s;
+      width: 0%;
+    }
 
-      &:not(:first-child){
+    &:hover:after,
+    &:focus:after,
+    &.focus:after {
 
-        border-left: 1px solid var(--colour-border-light)!important;
-      }
+      width: 60%;
+    }
+    
+    &[aria-pressed="true"]:after,
+    &:active:after,
+    &.active:after {
+      width: 100%;
+    }
 
-      border-top: 3px solid var(--panel-tab-border, #fafafa);
+    &[aria-pressed="true"],
+    &.active {
+      pointer-events: none;
+      outline: var(--contrast-outline-width, 0px) solid var(--colour-primary-theme)!important;
     }
   }
-  */
-}
-
-:host(.admin-panel) {
-
-  display: block;
 }
-// #endregion

package/assets/sass/components/tooltips.scss

@@ -25,7 +25,7 @@
   left: 50%;
   min-width: max(120%, #{rem(100)});
   transform: translate(-50%,0);
-  background: var(--colour-canvas);
+  background: var(--colour-canvas-2);
   color: inherit;
   padding: 0.5em;
   border-radius: 3px;