@iamproperty/components 3.4.7 → 3.5.0

package/assets/sass/components/carousel.scss

@@ -51,6 +51,78 @@ body.js-enabled .carousel__inner::-webkit-scrollbar {
 }
 // #endregion
 
+
+
+// #region Direction button
+.btn-next, 
+.btn-prev {
+  --marker-bg: var(--colour-secondary);
+  text-indent: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  background: var(--marker-bg);
+  border-radius: 100%;
+  width: rem(36);
+  height: rem(36);
+
+  @include media-breakpoint-up(md) {
+
+    width: rem(48);
+    height: rem(48);
+  }
+  text-indent: -300rem;
+  overflow: hidden;
+  border: none;
+  position: relative;
+  margin: 0 rem(8);
+  padding: 0;
+
+  &:disabled {
+    opacity: 0.8;
+    pointer-events: none;
+  }
+
+  &:after {
+    content: "";
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: 100%;
+    width: 100%;
+    background: currentColor;
+    mask-image: escape-svg($accordion-button-icon);
+    mask-size: 50%;
+    mask-repeat: no-repeat;
+    mask-position: 50% 60%;
+    -webkit-mask-image: escape-svg($accordion-button-icon);
+    -webkit-mask-size: 50%;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: 55% 50%;
+    transform: rotate(0deg);
+  }
+
+  &:hover,
+  &:focus {
+
+    background: var(--colour-warning);
+    color: var(--colour-hover);
+    border-radius: 100%;
+  }
+
+  &:active {
+    border-radius: 100%;
+  }
+}
+
+.btn-prev {
+  &:after {
+
+    transform: rotate(180deg);
+  }
+}
+// #endregion
+
+
 // #region carousel controls/pips
 .carousel:not(.hide-controls) {
   padding-bottom: 4.5rem!important;

package/assets/sass/components/charts.scss

@@ -23,6 +23,7 @@ $chart-colors: map-merge((
 }
 
 @media screen and (prefers-color-scheme: dark) {
+
   :root {
     --colour-chart-1: var(--colour-dark);
     --colour-chart-5: var(--colour-light);
@@ -30,6 +31,28 @@ $chart-colors: map-merge((
     --colour-chart-7: var(--colour-secondary);
   }
 }
+
+//@media (forced-colors: active) {
+  .chart__wrapper:has(.chart:not(.chart--line)) {
+
+    --colour-chart-1: repeating-linear-gradient(
+      45deg,
+      CanvasText 0px,
+      CanvasText 5px,
+      Canvas 5px,
+      Canvas 10px
+    );
+    --colour-chart-2: transparent radial-gradient(circle, CanvasText 3px, transparent 3px) 6px 6px/12px 12px repeat;
+    --colour-chart-3: repeating-linear-gradient(
+      90deg,
+      CanvasText 0px,
+      CanvasText 5px,
+      Canvas 5px,
+      Canvas 10px
+    );
+    // TODO: Add more patterns
+  }
+//}
 // #endregion
 
 // #region Apply colours
@@ -38,13 +61,26 @@ $chart-colors: map-merge((
   .chart__key .key:not(:first-child):nth-child(#{$i+1}):before,
   .chart:not(.chart--none):not(.chart--pie) table tbody tr td:not(:first-child):nth-child(#{$i+1}) {
     background: var(#{'--colour-chart-'+$i});
+
+    @media (forced-colors: active) {
+      forced-color-adjust: none;
+      border: 1px solid CanvasText;
+    }
   }
   .chart.chart--line:not(.chart--none):not(.chart--pie) .line:nth-child(#{$i}) {
     stroke: var(#{'--colour-chart-'+$i});
     z-index: #{10 - $i};
+
+    @media (forced-colors: active) {
+      forced-color-adjust: none;
+    }
   }
   .chart.chart--pie .pie path:nth-child(#{$i}) {
     fill: var(#{'--colour-chart-'+$i});
+
+    @media (forced-colors: active) {
+      forced-color-adjust: none;
+    }
   }
 }
 // #endregion
@@ -518,7 +554,7 @@ $chart-colors: map-merge((
   }
 
   .pie foreignObject {
-    background: var(--body-bg);
+    background: var(--colour-canvas);
     border-radius: 50%;
     z-index: var(--index-focus);
     pointer-events: none;

package/assets/sass/components/container.scss

@@ -1,7 +1,7 @@
 @use "sass:math";
 @use "../_func.scss" as *;
 
-@import "../../../node_modules/bootstrap/scss/_grid.scss";
+@import "../../bootstrap/scss/_grid.scss";
 
 // #region container
 .container {

package/assets/sass/components/dialog.scss

@@ -117,12 +117,13 @@ dialog::backdrop {
   position: relative;
   display: inline-block;
 
+
   > .btn:first-child {
     &:after {
       content: "";
     
       display: inline-block;
-      margin-left: 0.5em;
+      margin-left: 1em;
       margin-bottom: -0.15em;
       height: 1em;
       width: 1em;
@@ -139,6 +140,11 @@ dialog::backdrop {
 
       transform: rotate(90deg);
     }
+
+    &.active:after {
+
+      transform: rotate(-90deg);
+    }
   }
 
   &:has(dialog[open]) > .btn:first-child:after {

package/assets/sass/components/lists.scss

@@ -32,6 +32,10 @@
       -webkit-mask-size: 100%;
       -webkit-mask-repeat: no-repeat;
       -webkit-mask-position: 50% 50%;
+      @media (forced-colors: active) {
+        content: "\2713";
+        -webkit-mask-image: none;
+      }
     }
 
     &.tick--warning:before {
@@ -39,6 +43,11 @@
       background: var(--colour-warning);
       mask-image: var(--icon-warning);
       -webkit-mask-image: var(--icon-warning);
+      @media (forced-colors: active) {
+        content: "!";
+        mask-image: none;
+        -webkit-mask-image: none;
+      }
     }
 
     &.tick--danger:before {
@@ -46,6 +55,11 @@
       background: var(--colour-danger);
       mask-image: var(--icon-warning);
       -webkit-mask-image: var(--icon-warning);
+      @media (forced-colors: active) {
+        content: "!";
+        mask-image: none;
+        -webkit-mask-image: none;
+      }
     }
 
     &.tick--incomplete:before {

package/assets/sass/components/nav.scss

@@ -400,7 +400,7 @@ nav + main > *:first-child {
   position: absolute;
   top: 0;
   left: 100%;
-  background: var(--body-bg);
+  background: var(--colour-canvas);
   z-index: 2;
   width: 100%;
   overscroll-behavior: contain;

package/assets/sass/components/pagination.scss

@@ -1,6 +1,6 @@
 @use "../_func" as *;
 
-@import "../../../node_modules/bootstrap/scss/_pagination.scss";
+@import "../../bootstrap/scss/_pagination.scss";
 
 // #region Basic fixes
 .pagination {

package/assets/sass/components/stepper.scss

@@ -5,7 +5,7 @@
   display: flex;
   flex-wrap: wrap;
   margin-bottom: 2rem;
-  border: 1px solid var(--body-bg);
+  border: 1px solid var(--colour-canvas);
   overflow: hidden;
 
   @include media-breakpoint-up(md) {
@@ -17,7 +17,7 @@
   ol {
     margin: 0;
     z-index: 1;
-    background: var(--body-bg);
+    background: var(--colour-canvas);
     counter-reset: section;
     width: 100%;
     overflow: auto;
@@ -40,7 +40,7 @@
     li {
       width: 100%;
       max-width: 100%;
-      background: var(--body-bg);
+      background: var(--colour-canvas);
       padding: 1px;
 
       @include media-breakpoint-up(sm) {

package/assets/sass/components/table.scss

@@ -4,6 +4,7 @@
 table {
   --border-width: 2px;
   --inner-border-width: 2px;
+  --hover-background: #EEEEEE;
   width: 100%;
   font-size: rem(16);
   border: none;
@@ -21,11 +22,7 @@ td,th {
   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;
   }
@@ -41,23 +38,26 @@ thead {
   th {
     font-weight: bold;
     vertical-align: bottom;
+  }
+}
 
-    @include media-breakpoint-up(sm) {
+@container (width >= 60em) {
+  thead {
+
+    th {
       white-space: nowrap;
-      min-width: #{$td-mw};
-    }    
+        min-width: #{$td-mw};
+      }
   }
 }
 
-
 tbody tr {
 
 
-  &:is(:hover,:focus,.hover) {
+  &:is(:hover,:focus-within,.hover) {
 
-    td {
-      --bg-colour-rgb: 238,238,238;
-      background: #EEEEEE;
+    th,td {
+      background: var(--hover-background);
     }
   }
 
@@ -88,9 +88,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)};
   display: block;
-  padding: rem(32);
+  padding: var(--wrapper-padding);
   box-shadow: 0px 6px 12px rgba(0,0,0,0.11);
   border-radius: rem(8);
   margin-bottom: rem(32);
@@ -98,6 +98,10 @@ table.border-0 {
   table {
     margin-bottom: 0;
   }
+
+  @media (forced-colors: active) {
+    --wrapper-padding: 0;
+  }
 }
 
 .table__wrapper {

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;