@iamproperty/components 3.4.5 → 3.4.7

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/components/tabs.scss

@@ -1,16 +1,9 @@
 @use "../_func" as *;
 
-.tabs__container {
+.tabs {
 
   position: relative;
 
-  .tab__input {
-    position: absolute;
-    top: 0;
-    left: 0;
-    opacity: 0;
-  }
-
   > .tabs__links {
     margin-bottom: 1.5rem;
     overflow: hidden;
@@ -24,6 +17,7 @@
       margin: 0 0 0.5rem 0;
       float: left;
       clear: both;
+      padding: 0;
 
       @include media-breakpoint-up(sm) {
         clear: none;
@@ -37,51 +31,73 @@
       }
 
       &:hover:before,
-      &:focus:before {
+      &:focus:before,
+      &.focus:before {
         width: 100%;
       }
     }
   }
 
-  .tab {
-    display: none;
-  }
-
-  input:focus-visible ~ .tabs__links {
-    outline: blue outset 1px;
-  }
-
-  @for $i from 1 through 10 {
-    input:checked:nth-child(#{$i}) ~ .tabs__links .link:not(.text-decoration-none):not(.btn):nth-child(#{$i}) {
+  .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)
-    }
-    input:checked:nth-child(#{$i}) ~ .tabs > .tab:nth-child(#{$i}){
-      display: block;
-      display: contents;
-    }
+    --is-current: 1;
+    --panel-tab-colour: white;
+    --panel-tab-border: var(--colour-secondary)
   }
 }
 
 // #region admin panel
-.admin-panel > .tabs__container:first-child {
+.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(--body-bg);
+  border-bottom: 2px solid var(--colour-border-light);
+  margin-bottom: var(--panel-gutter);
+
+  @include media-breakpoint-up(sm) {
+
+    flex-direction: row;
+    border-top: 1px solid var(--colour-border-light);
+  }
 
-  display: contents;
+  .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;
+    }
 
-  > .tabs {
-    display: contents;
-  }
+    @include media-breakpoint-up(sm) {
 
-  > .tabs__links {
+      margin-right: 0!important;
 
-    padding-bottom: 0;
+      &:first-child{
+        border-left: none!important;
+      }
 
-    .link:not(.text-decoration-none):not(.btn) {
+      &:not(:first-child){
 
-      margin-bottom: 0;
+        border-left: 1px solid var(--colour-border-light)!important;
+      }
+
+      border-top: 3px solid var(--panel-tab-border, #fafafa);
     }
   }
 }
+
+:host(.admin-panel) {
+
+  display: block;
+}
 // #endregion

package/assets/sass/components/timeline.scss

@@ -60,12 +60,12 @@
   }
 
   > * {
-    max-width: rem(math.div(1320,2) - 96);
+    max-width: rem(math.div(1112,2) - 96);
     order: 1;
   }
 
   > img {
-    max-width: min(100%, #{rem(math.div(1320,2) - 96)});
+    max-width: min(100%, #{rem(math.div(1112,2) - 96)});
     margin-bottom: 2rem;
   }
 

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

@@ -8,6 +8,8 @@ a,
   margin-bottom: rem(16);
   position: relative;
   text-decoration: none;
+  background: none;
+  border: none;
   
   &:not(.text-decoration-none):not(.btn):before {
     content: '';
@@ -30,8 +32,7 @@ a,
     width: 0%;
   }
 
-  &:hover,
-  &:focus,
+  &:is(:hover, :focus, .focus),
   .card:hover &,
   .card:focus &  {
     @include var (color, --colour-hover);
@@ -95,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));
 }

package/assets/sass/foundations/reboot.scss

@@ -8,9 +8,8 @@ html {
   -webkit-font-smoothing: antialiased; // Fix for Safari/iOS
   height: 100%;
   width: 100%;
-  overflow: hidden;
-  overflow-y: scroll;
   overflow-x: hidden;
+  overflow-y: scroll;
   font-size: vw($device-xs-width);
   scroll-padding-top: rem(100);
   
@@ -22,7 +21,7 @@ html {
   }
 
   @if $mobileOnly != "true" {
-    @media (min-width: #{em(1440)}) {
+    @media (min-width: #{em(1280)}) {
         font-size: 100%;
     }
 
@@ -45,25 +44,32 @@ html {
 
 body {
 
-  font-family: 'qanelasmedium', arial, sans-serif;
+  @include var(font-family,--font-body);
   @include var(color,--colour-body);
   width: 100%;
-  line-height: 1.5;
-  height: 100%;
-  //overflow-y: scroll;
-  //overflow-x: hidden;
+  line-height: 1.2;
+  min-height: 100%;
+
 }
 
-@media (hover: none) {
-  body {
-    height: 100%;
-    overflow-y: scroll;
-    overflow-x: hidden;
-  }
+// #region scrollbars
+div::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+ 
+div::-webkit-scrollbar-track {
+  background-color: #f1f1f1;
+  border-radius: 2px;
 }
+ 
+div::-webkit-scrollbar-thumb {
+  background-color: #c1c1c1;
+  border-radius: 2px;
+}
+//#endregion
 
 #app {
-  min-height: 100%;
 }
 
 body > footer,