@iamproperty/components 3.4.6 → 3.5.0

package/assets/sass/components/table.scss

@@ -0,0 +1,423 @@
+@use "../_func.scss" as *;
+
+// #region Default table
+table {
+  --border-width: 2px;
+  --inner-border-width: 2px;
+  --hover-background: #EEEEEE;
+  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);
+  
+  &:last-child {
+    padding-right: 0;
+  }
+}
+
+th {
+  font-weight: bold;
+  @include var(color,--colour-heading);
+}
+
+thead {
+
+  th {
+    font-weight: bold;
+    vertical-align: bottom;
+  }
+}
+
+@container (width >= 60em) {
+  thead {
+
+    th {
+      white-space: nowrap;
+        min-width: #{$td-mw};
+      }
+  }
+}
+
+tbody tr {
+
+
+  &:is(:hover,:focus-within,.hover) {
+
+    th,td {
+      background: var(--hover-background);
+    }
+  }
+
+  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) {
+  --wrapper-padding: #{rem(32)};
+  display: block;
+  padding: var(--wrapper-padding);
+  box-shadow: 0px 6px 12px rgba(0,0,0,0.11);
+  border-radius: rem(8);
+  margin-bottom: rem(32);
+
+  table {
+    margin-bottom: 0;
+  }
+
+  @media (forced-colors: active) {
+    --wrapper-padding: 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

@@ -7,6 +7,8 @@
   > .tabs__links {
     margin-bottom: 1.5rem;
     overflow: hidden;
+    padding-bottom: 2px;
+
 
     .link:not(.text-decoration-none):not(.btn) {
       --is-current: 0;
@@ -18,6 +20,7 @@
       float: left;
       clear: both;
       padding: 0;
+      display: inline-block;
 
       @include media-breakpoint-up(sm) {
         clear: none;
@@ -25,14 +28,23 @@
         margin-right: 2rem;
       }
 
-      &:before {
-        width: 0;
+      &: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:before,
-      &:focus:before,
-      &.focus:before {
+      &:hover:after,
+      &:focus:after,
+      &.focus:after {
         width: 100%;
       }
     }
@@ -49,13 +61,13 @@
 // #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(--body-bg);
+  background-color: var(--colour-canvas);
   border-bottom: 2px solid var(--colour-border-light);
   margin-bottom: var(--panel-gutter);
 
@@ -94,6 +106,7 @@
       border-top: 3px solid var(--panel-tab-border, #fafafa);
     }
   }
+  */
 }
 
 :host(.admin-panel) {

package/assets/sass/components/tooltips.scss

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