@iamproperty/components 2.7.0 → 2.7.1

package/assets/sass/elements/panel.scss

@@ -0,0 +1,162 @@
+@use "../_func" as *;
+
+.admin-panel {
+  --panel-gutter: 1rem;
+  --panel-tab-colour: #fafafa;
+  background: var(--bs-body-bg);
+
+  &.bg-secondary{
+
+    background-color: rgba(#b4e6a5,0.3) !important;
+  }
+
+  @media screen and (prefers-color-scheme: dark) {
+
+    --panel-tab-colour: transparent;
+  }
+
+  @include media-breakpoint-up(md) {
+
+    --panel-gutter: 1.5rem;
+  }
+
+  padding: 0 var(--panel-gutter) 0 var(--panel-gutter);
+  border: 1px solid var(--colour-border-light);
+  border-top: 3px solid var(--colour-secondary);
+  margin-bottom: 2rem;
+
+  &:empty {
+    display: none;
+  }
+
+  > *:not(.note-feed):first-child {
+    margin-top: var(--panel-gutter);
+  }
+
+  > *:last-child {
+    margin-bottom: var(--panel-gutter);
+  }
+
+  > :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6):first-child {
+    border-bottom: 2px solid var(--colour-border-light);
+    font-size: var(--fs-4);
+    line-height: 1;
+    letter-spacing: 1;
+    padding: var(--panel-gutter) var(--panel-gutter) var(--panel-gutter) var(--panel-gutter);
+    margin: 0 calc(var(--panel-gutter) * -1) var(--panel-gutter) calc(var(--panel-gutter) * -1);
+    display: block;
+  }
+
+  > .table__wrapper,
+  > .note-feed > .table__wrapper,
+  > .tabs__container:first-child > .tabs > .tab > .table__wrapper {
+
+    margin: 0 calc(var(--panel-gutter) * -1) var(--panel-gutter) calc(var(--panel-gutter) * -1);
+    padding: 0 var(--panel-gutter) 0 var(--panel-gutter);
+    min-width: calc(100% + var(--panel-gutter) + var(--panel-gutter));
+    
+    table {
+
+      margin: 0 calc(var(--panel-gutter) * -1) var(--panel-gutter) calc(var(--panel-gutter) * -1);
+      min-width: calc(100% + var(--panel-gutter) + var(--panel-gutter));
+      padding-right: 0;
+
+    }
+
+    tr {
+      :is(th, td) {
+        padding-left: var(--panel-gutter);
+        padding-right: var(--panel-gutter);
+      }
+    }
+
+    &:first-child {
+      margin-top: 0;
+
+      thead tr:first-child {
+
+        border-top: none;
+      }
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+
+      tbody tr:last-child {
+
+        border-bottom: none;
+      }
+    }
+  }
+
+  // Table margin top override
+  :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6, .admin-panel__links, .tabs__links) + :is(.table__wrapper, table, .note-feed) {
+    margin-top: calc(var(--panel-gutter) * -1);
+
+    tr:first-child {
+
+      border-top: none;
+    }
+  }
+}
+
+[class*="col"] .admin-panel:first-child:last-child {
+
+  min-height: calc(100% - 2rem);
+}
+
+.admin-panel .admin-panel__links, 
+.admin-panel > .tabs__container:first-child .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(--bs-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);
+  }
+
+  :is(a, label) {
+    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);
+
+    &:before {
+      display: none;
+    }
+
+    @include media-breakpoint-up(sm) {
+
+      margin-right: 0!important;
+
+      &:first-child{
+        border-left: none!important;
+      }
+
+      &:not(:first-child){
+
+        border-left: 1px solid var(--colour-border-light)!important;
+      }
+
+      border-top: 3px solid var(--panel-tab-border, #fafafa);
+    }
+  }
+
+  .current {
+    
+    --is-current: 1;
+    --panel-tab-colour: var(--bs-body-bg);;
+    --panel-tab-border: var(--colour-secondary);
+    pointer-events: none;
+  }
+}

package/assets/sass/elements/tables.scss

@@ -100,6 +100,9 @@ table.border-0 {
 // #region Tables are only stacked on mobile
 @media screen and (max-width: 36em) {
   .table__wrapper:not(.table-fullwidth) {
+
+    overflow: hidden;
+
     thead {
       display: none;
     }
@@ -213,6 +216,12 @@ table.border-0 {
 .table__pagination select {
   max-width: rem(240);
 }
+.table__pagination .showing-input-field {
+  min-width: 4.5rem;
+}
+.table__pagination .page-number {
+  min-width: 7rem;
+}
 // #endregion
 
 // #region Reorderable
@@ -258,3 +267,25 @@ table.border-0 {
 }
 
 // #endregion
+
+
+.note-feed {
+
+  td:last-child {
+    min-width: 20rem;
+
+    /*
+    display: -webkit-box;
+    -webkit-line-clamp: 5;
+    -webkit-box-orient: vertical;  
+    overflow: hidden;
+    padding-bottom: 0;
+    margin-bottom: 1rem;
+
+    &:hover {
+
+    -webkit-line-clamp: inherit;
+    }
+    */
+  }
+}

package/assets/sass/elements/tooltips.scss

@@ -1,7 +1,6 @@
 @use "../_func.scss" as *;
 
-abbr[title],
-.tooltip {
+:is(abbr[title], .tooltip) {
 
   text-decoration: underline;
   text-underline-offset: 0.2em;
@@ -11,9 +10,7 @@ abbr[title],
   position: relative;
   cursor: help;
 
-  &:hover,
-  &:focus,
-  &:active{
+  &:is(:hover, :focus, :active){
 
     text-decoration: none;
   }
@@ -22,7 +19,7 @@ abbr[title],
 @mixin tooltip(){
 
   display: block;
-  z-index: 2;
+  z-index: var(--index-above);
   position: absolute;
   top: calc(100% + 0.25rem);
   left: 50%;
@@ -37,6 +34,27 @@ abbr[title],
 
 .tooltip {
 
+
+  &:after{
+
+    content: "";
+    display: inline-block;
+    margin-left: 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%;
+  }
+
   .tooltip__content {
 
     opacity: 0;
@@ -44,9 +62,7 @@ abbr[title],
     
   }
 
-  &:hover,
-  &:focus,
-  &:active{
+  &:is(:hover, :focus, :active){
 
     .tooltip__content {
 
@@ -58,17 +74,12 @@ abbr[title],
 
 @media (hover: none) {
   
-  abbr[title],
-  .tooltip[title] {
+  :is(abbr[title], .tooltip[title]) {
 
-    &:hover,
-    &:focus,
-    &:active{
+    &:is(:hover, :focus, :active):before{
       
-      &::after {
-        content: attr(title);
-        @include tooltip();
-      }
+      content: attr(title);
+      @include tooltip();
     }
   }
 }

package/assets/sass/foundations/media.scss

@@ -26,7 +26,7 @@ img {
 
   a:before,
   a:after {
-    display: none;
+    display: none!important;
   }
 
   img {
@@ -37,7 +37,7 @@ img {
     height: 100%;
     transform: translate(-50%,-50%);
     object-fit: cover;
-    z-index: 1;
+    z-index: var(--index-base);
   }
 
   .btn-secondary {
@@ -45,7 +45,7 @@ img {
     top: 50%;
     left: 50%;
     transform: translate(-50%,-50%);
-    z-index: 2;
+    z-index: var(--index-focus);
   }
 }
 // #endregion

package/assets/sass/foundations/root.scss

@@ -36,18 +36,23 @@
 @media screen and (prefers-color-scheme: dark) {
   :root {
     --bs-body-bg: var(--colour-primary);
+    --colour-admin: var(--colour-primary);
     @include invert-colours();
   }
 
   body .text-primary {
     color: white!important;
   }
+
+  body .bg-white {
+    background-color: transparent!important;
+  }
 }
 
 @media screen {
 
   // Reset the colours of lighter backgrounds to make sure they aren't over written by dark mode. Some other tweaks to colours are applied
-  [class*="bg-"]:not(.bg-primary):not(.bg-dark):not(.bg-danger):not(.bg-black):not(.invert-colours) {
+  [class*="bg-"]:not(.bg-primary):not(.bg-dark):not(.bg-danger):not(.bg-black):not(.invert-colours):not(.bg-white):not(.bg-admin) {
 
     @include reset-colours();
 
@@ -56,14 +61,18 @@
     color: var(--colour-body);
 
     --btn-bg: var(--colour-primary);
-    --btn-text: white;
+    --btn-text: var(--colour-white);
+    --colour-underline: var(--colour-primary);
 
     .btn-secondary {
 
       --btn-text: var(--colour-primary);
     }
+    
   }
 
+  
+
   // Slight colour adjustments on the light background to match brand guidelines
   .bg-light[class*="bg-"]:not(.bg-primary):not(.bg-dark):not(.bg-danger):not(.prevent-invert) {
     --bs-body-bg: var(--colour-light);