@iamproperty/components 3.4.6 → 3.4.7

package/assets/sass/components/forms.scss

@@ -74,9 +74,41 @@
   }
 }
 
+
+.form-control__wrapper.form-control--inline-text {
+
+  display: inline;
+
+  label {
+    display: inline;
+    font-size: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+    color: inherit;
+  }
+
+  select {  
+    display: inline;
+    font-size: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+    color: inherit;
+    background-color: transparent;
+    border: none;
+    padding: 0 5px;
+    margin: 0 -5px;
+    display: inline-block;
+    width: auto;
+    padding-right: $form-select-padding-x;
+    background-position: right 0.2rem center;
+  }
+}
+
 // #region checkbox
 .form-check {
 
+  overflow: hidden;
+
   input,
   label {
     cursor: pointer;
@@ -153,21 +185,21 @@ select[multiple]::-webkit-scrollbar-thumb {
 
 .form-control__wrapper :is(.prefix,.suffix) {
 
-  color: #212529;
-  background: #e9ecef;
+  color: var(--colour-white);
+  background: var(--colour-primary);
   padding: 0.75em 1em;
   font-size: 1rem;
   font-weight: normal;
   line-height: 1.5;
   position: absolute;
-  bottom: 1px;
+  bottom: 2px;
 }
 
 .form-control__wrapper .prefix {
 
   border-top-left-radius: 0.625rem;
   border-bottom-left-radius: 0.625rem;
-  left: 1px;
+  left: 0;
 }
 
 .form-control__wrapper :is(.prefix-sm,.suffix-sm) {
@@ -188,7 +220,7 @@ select[multiple]::-webkit-scrollbar-thumb {
 
 .form-control__wrapper .suffix {
   left: auto;
-  right: 1px;
+  right: 0;
   border-top-right-radius: 0.625rem;
   border-bottom-right-radius: 0.625rem;
 }

package/assets/sass/components/lists.scss

@@ -157,4 +157,19 @@
     right: calc(100% + 1rem);
     text-align: center;
   }
+}
+
+// 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;
 }

package/assets/sass/components/nav.scss

@@ -32,8 +32,8 @@
 
 // #region General styles
 .nav {
-
   
+  overflow-x: hidden;
   font-weight: bold;
 
   &__inner, 
@@ -416,6 +416,10 @@ nav + main > *:first-child {
   height: 100vh;
 }
 
+.nav:has(#showMenu:checked){
+  min-height: 100vh;
+}
+
 #showMenu:checked ~ .nav__inner,
 #showAccount:checked ~ .nav__menu--account {
 

package/assets/sass/components/pagination.scss

@@ -0,0 +1,140 @@
+@use "../_func" as *;
+
+@import "../../../node_modules/bootstrap/scss/_pagination.scss";
+
+// #region Basic fixes
+.pagination {
+  gap: rem(4);
+  padding-top: rem(24);
+}
+
+.pagination .page-link {
+  font-size: rem(14);
+  width: rem(28);
+  line-height: rem(28);
+  padding: 0;
+  text-align: center;
+  overflow: hidden;
+  border: none!important;
+}
+
+.pagination .page-item {
+  border: var(--#{$prefix}pagination-border-width) solid var(--#{$prefix}pagination-border-color);
+  border-radius: 4px!important;
+  @include transition($pagination-transition);
+
+  &:hover {
+    border-color: var(--#{$prefix}pagination-hover-border-color);
+  }
+
+  &:focus {
+    box-shadow: var(--#{$prefix}pagination-focus-box-shadow);
+  }
+
+  &.active {
+    border-color: var(--#{$prefix}pagination-active-border-color);
+  }
+
+  &.disabled {
+    border-color: var(--#{$prefix}pagination-disabled-border-color);
+  }
+}
+// #endregion
+
+// #region First and last buttons
+.pagination .page-item {
+
+  &:first-child .page-link,
+  &:last-child .page-link {
+
+    overflow: hidden;
+    text-indent: -300%;
+    background: currentColor;
+    mask-image: var(--icon-arrow);
+    mask-size: 50%;
+    mask-repeat: no-repeat;
+    mask-position: 50% 50%;
+    -webkit-mask-image: var(--icon-arrow);
+    -webkit-mask-size: 50%;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: 50% 50%;
+  }
+
+  &:first-child .page-link,
+  {
+    transform: rotate(180deg);
+  }
+}
+// #endregion
+
+// #region Minimise the amount of buttons on display 
+.pagination:has(.page-item:nth-child(8)) {
+
+  .page-item {
+    display: none;
+  }
+
+  .page-item:is(:first-child, :last-child, :nth-child(2), :nth-last-child(2)) {
+    display: block;
+  }
+
+  .page-item.active {
+    display: block;
+  }
+  
+  .page-item:has(+ .active),
+  .page-item.active + .page-item,
+  .page-item:nth-child(2).active + .page-item + .page-item,
+  .page-item:has(+ .page-item + .page-item:nth-last-child(2).active) {
+    display: block;
+  }
+
+  .page-item:nth-child(2),
+  .page-item:nth-last-child(2) {
+
+    margin-right: rem(4 + 28);
+    position: relative;
+
+    &:after {
+      content: "...";
+      display: block;
+      width: rem(28);
+      line-height: rem(28);
+      position: absolute;
+      left: calc(100% + #{rem(4)} + 2px);
+      top: -1px;
+      pointer-events: none;
+      border: var(--#{$prefix}pagination-border-width) solid var(--#{$prefix}pagination-border-color);
+
+      border-radius: 4px;
+      text-align: center;
+    }
+  }
+
+  .page-item:nth-last-child(2) {
+
+    margin-left: rem(4 + 28);
+    margin-right: 0;
+
+    &:after {
+      left: auto;
+      right: calc(100% + #{rem(4)} + 2px);
+    }
+  }
+
+  .page-item:nth-child(2).active,
+  .page-item:nth-child(2):has(+ .active),
+  .page-item:nth-child(2):has(+ .page-item + .active),
+  .page-item:nth-last-child(4).active + .page-item + .page-item,
+  .page-item:nth-last-child(3).active + .page-item,
+  .page-item:nth-last-child(2).active {
+  
+    margin-left: 0;
+    margin-right: 0;
+
+    &:after {
+      display: none;
+    }
+  }
+}
+// #endregion

package/assets/sass/components/table.scss

@@ -0,0 +1,419 @@
+@use "../_func.scss" as *;
+
+// #region Default table
+table {
+  --border-width: 2px;
+  --inner-border-width: 2px;
+  width: 100%;
+  font-size: rem(16);
+  border: none;
+  margin-bottom: rem(32);
+  overflow: auto;
+}
+
+td,th {
+  padding: rem(12) rem(32) rem(12) 0;
+  
+  font-weight: normal;
+  text-align: left;
+  vertical-align: top;
+  border: none;
+  font-size: rem(16);
+  line-height: rem(24);
+  color: var(--colour-body);
+
+  @include media-breakpoint-up(sm) {
+    min-width: #{$td-mw};
+  }
+
+  &:last-child {
+    padding-right: 0;
+  }
+}
+
+th {
+  font-weight: bold;
+  @include var(color,--colour-heading);
+}
+
+thead {
+
+  th {
+    font-weight: bold;
+    vertical-align: bottom;
+
+    @include media-breakpoint-up(sm) {
+      white-space: nowrap;
+      min-width: #{$td-mw};
+    }    
+  }
+}
+
+
+tbody tr {
+
+
+  &:is(:hover,:focus,.hover) {
+
+    td {
+      --bg-colour-rgb: 238,238,238;
+      background: #EEEEEE;
+    }
+  }
+
+  td {
+      
+    border-top: var(--border-width) solid currentColor;
+    @include var(border-color,--colour-border);
+  }
+
+  &:first-child td{
+    border-top: var(--border-width) solid currentColor;
+    @include var(border-color,--colour-primary);
+  }
+
+  &:last-child td{
+    border-bottom: var(--border-width) solid currentColor;
+    @include var(border-color,--colour-border);
+  }
+}
+
+.border-0 > table,
+table.border-0 {
+
+  --border-width: 0px;
+  --inner-border-width: 0px;
+}
+// #endregion
+
+// #region Table wrapper - Add via JS if needed, provides a safe space to scroll
+:is(iam-table, .iam-table) {
+
+  display: block;
+  padding: rem(32);
+  box-shadow: 0px 6px 12px rgba(0,0,0,0.11);
+  border-radius: rem(8);
+  margin-bottom: rem(32);
+
+  table {
+    margin-bottom: 0;
+  }
+}
+
+.table__wrapper {
+  display: block;
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
+}
+// #endregion
+
+// #region Tables are only stacked on mobile
+*:has(> iam-table){
+  container-type: inline-size;
+}
+*:has(> .iam-table){
+  container-type: inline-size;
+}
+@container (width < 23.4375em) {
+
+  .table__wrapper:not(.table--fullwidth) {
+
+    overflow: hidden;
+    max-height: none!important;
+
+  }
+  :is(iam-table, .iam-table):not(.table--fullwidth) {
+    
+    table {
+
+      thead {
+        display: none;
+      }
+
+      tbody {
+        display: block;
+
+        tr td:first-child {
+          padding-top:0;
+        }
+      }
+
+      tr {
+        display: block;
+        position: relative;
+        border: none;
+
+        & + tr {
+          margin-top: rem(32);
+        }
+        
+        &:is(:hover,:focus,.hover) {
+
+          td {
+            background: transparent;
+          }
+        }
+
+        &:last-child td:not(:last-child) {
+          border-bottom:none;
+        }
+
+        &:first-child td:first-child {
+          border-top: none;
+          border-color: var(--colour-border);
+        }
+        &:first-child td {
+          border-color: var(--colour-border);
+        }
+      }
+
+      td,
+      th {
+        display: block;
+        @include var(border-color,--colour-border);
+
+        &:nth-child(1){
+          
+          border-top: none;
+        }
+
+        &[data-label]:before {
+          content: attr(data-label);
+          color: var(--colour-heading);
+          padding: 0;
+          margin-bottom: 0;
+          display: block;
+          font-weight: bold;
+          margin: 0;
+        }
+      }
+
+      tbody tr:first-child td:not(:first-child) {
+        border-top: var(--border-width) solid currentColor!important;
+        border-color: var(--colour-border)!important;
+      }
+      
+      tbody tr:has(td:nth-child(4)) td:first-child {
+        
+        position: relative;
+
+        button {
+          display: block!important;
+          top: 0;
+          left: 0;
+          height: 100%;
+          width: 100%;
+          background: transparent;
+          border: none;
+          position: absolute;
+          overflow: hidden;
+          text-indent: -300%;
+
+          &:after {
+            font-family: "Font Awesome 6 Pro";
+            content: "\f055";
+            position: absolute;
+            top: 1px;
+            right: 1px;
+            font-size: rem(28);
+            line-height: rem(28);
+            font-weight: 300;
+            color: var(--colour-primary);
+            text-indent: 0;
+          }
+        }
+      }
+
+      tbody tr:has(td:nth-child(4))[data-view="full"] td:first-child {
+        button:after {
+          content: "\f056";
+          font-weight: 900;
+        }
+      }
+    }
+  }
+  body:not(.js-enabled) :is(iam-table, .iam-table):not(.table--fullwidth) tbody tr:not(:hover):not(:focus-within),
+  :is(iam-table, .iam-table):not(.table--fullwidth) tbody tr:not([data-view="full"]) {
+
+    td:not(:first-child):not(:nth-child(2)):not(:nth-child(3)){
+      display: none;
+    }
+    td:first-child {
+      
+      button:after {
+        content: "\f055";
+      }
+    }
+  }
+
+  .table--cta:not(.table--fullwidth) tr td:last-child {
+    display: block!important;
+  }
+
+}
+// #endregion
+
+// #region CTA column
+@include media-breakpoint-up(sm) {
+
+  :is(iam-table) {
+    
+    --cta-width: 8rem;
+  }
+
+  :not(iam-table).table--cta {
+    
+    position: relative;
+    margin-right: calc(var(--cta-width) - 1.5rem);
+
+    &::after {
+      content: "";
+      display: block;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: calc(100% + calc(var(--cta-width) - 1.5rem));
+      border-bottom: 2px solid currentColor;
+      @include var(border-color,--colour-border);
+      z-index: 99;
+    }
+  }
+
+  .table--cta .table__wrapper {
+    overflow-y: hidden;
+    margin-bottom: 0;
+  }
+    
+  .table--cta {
+
+    tr > *:last-child {
+
+      position: absolute;
+      left: 100%;
+      top: auto;
+      z-index: 3;
+      background: transparent;
+      width: var(--cta-width);
+      padding-left: rem(40);
+      margin-left: rem(-40);
+      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);
+
+      a {
+        white-space: nowrap;
+      }
+    }
+
+    tbody tr > *:last-child {
+      margin-top: -1px;
+    }
+    tbody tr {
+
+      &:last-child td{
+        border-bottom: none;
+      }
+    }
+  }
+}
+// #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;
+  position: relative;
+
+  &::before {
+    content: "";
+    top: calc(100% - 1.2rem);
+    bottom: 2px;
+    left: 0;
+    right: 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%);
+    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) {
+  max-height: none;
+  position: static;
+
+  &::before {
+    display: none;
+  }
+}
+
+iam-table:is(.table--mh-small,.table--mh-medium,.table--mh-large):not(.table--cta) {
+
+  position: relative;
+
+  thead {
+    position: sticky;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    background-color: var(--colour-white);;
+
+    &:before {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 2px;
+      background: var(--colour-primary);
+    }
+  }
+  tbody {
+    position: relative;
+
+    tr:first-child td {
+      border-top: 0;
+    }
+    tr:last-child td {
+      border-bottom: 0;
+    }
+
+  }
+}
+//#endregion
+
+// filters 
+.table--filtered tbody tr:not(.filtered--show) {
+  display: none!important;
+}
+
+table:not(.table--filtered) tbody tr:nth-child(15) ~ tr {
+  display: none;
+}
+
+// Statuses 
+/* Will be used in the future
+[data-content="Incomplete"] {
+  background-color: red;
+}
+[data-content="Verified"] {
+  background-color: green;
+}
+*/

package/assets/sass/foundations/icons.scss

@@ -4,7 +4,7 @@
   fill: currentColor;
   stroke: currentColor;
   stroke-width: 0;
-  @include var(color,--colour-brand);
+  @include var(color,--colour-primary);
   width: rem(64);
   height: rem(64);
   display: inline-block;

package/assets/sass/{components → foundations}/links.scss

@@ -96,4 +96,30 @@ a,
       margin-right: 0.2em;
     }
   }
+}
+
+// Support card component
+:is(a,button,label):has(.card, iam-card){
+  &:before {
+    display: none;
+  }
+  border: none;
+  background: none;
+  padding:0;
+  display: flex;
+  margin: 0 0 rem(24) 0;
+  outline: none!important;
+
+  &:not(.d-inline-block){
+      
+    width: 100%;
+  }
+
+  iam-card {
+    width: 100%;
+  }
+}
+
+.col > :is(a,button):has(.card, iam-card):first-child:last-child{
+  min-height: calc(100% - rem(24));
 }