@iamproperty/components 3.4.7 → 3.6.0

package/assets/sass/components/admin-panel.scss

@@ -0,0 +1,174 @@
+@use "../_func" as *;
+
+.admin-panel {
+  --padding-x: #{rem(32)};
+  --padding-top: #{rem(16)};
+  --padding-bottom: #{rem(24)};
+  display: block;
+  padding: var(--padding-top) var(--padding-x) var(--padding-bottom) var(--padding-x);
+  box-shadow: 0px 6px 12px rgba(0,0,0,0.11);
+  background-color: var(--colour-canvas-2);
+  border-radius: rem(8);
+  margin-bottom: rem(24);
+  outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
+
+  @media screen and (prefers-color-scheme: dark) {
+    
+    background-color: var(--colour-canvas-2);
+    color: var(--colour-body);
+  }  
+
+  &:empty {
+    display: none;
+  }
+
+  > :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6):first-child {
+    
+    --gradient-direction: -90deg;
+    background-color:var(--colour-success);
+
+    &:not([class*="bg-"]){
+      color: var(--colour-primary-theme);
+      background-image: linear-gradient(var(--gradient-direction),  var(--colour-info) 0, transparent 100%);
+    }
+    
+    font-size: rem(18);
+    line-height: rem(24);
+    padding: rem(16) var(--padding-x);
+    margin: calc(var(--padding-top) * -1) calc(var(--padding-x) * -1) var(--padding-top) calc(var(--padding-x) * -1);
+    display: block;
+    border-top-left-radius: rem(8);
+    border-top-right-radius: rem(8);
+  }
+
+  :is(iam-table, .iam-table) {
+    margin: 0 0 rem(32) 0;
+    padding: 0;
+    box-shadow: none;
+    background: none;
+  }
+
+  > *:last-child{
+    margin-bottom: 0!important;
+  }
+
+  > *:is(p):last-child{
+    padding-bottom: 0!important;
+  }
+
+  p {
+    max-width: 100%;
+    padding-bottom: rem(24);
+  }
+
+  > :is(.mh-sm,.mh-md,.mh-lg){
+    overflow: auto;
+    
+    padding: 0 var(--padding-x);
+    margin: 0 calc(var(--padding-x) * -1) rem(24) calc(var(--padding-x) * -1);
+
+    &:before {
+      content: "";
+      top: 100%;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 1.5rem;
+      position: sticky;
+      display: block;
+      background: linear-gradient(180deg, transparent 0%, var(--colour-canvas-2) 100%);
+      z-index: 2;
+      margin-bottom: -1.5rem;
+    }
+  }
+
+  > :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6):first-child + :is(.mh-sm,.mh-md,.mh-lg){
+    padding-top: var(--padding-top);
+    margin-top: calc(var(--padding-top) * -1);
+  }
+  
+  > :is(.mh-sm,.mh-md,.mh-lg):last-child{
+    padding-bottom: var(--padding-bottom);
+    margin-bottom: calc(var(--padding-bottom) * -1)!important;
+
+    > *:last-child{
+      margin-bottom: 0!important;
+    }
+  
+    > *:is(p):last-child{
+      padding-bottom: 0!important;
+    }
+  }
+}
+
+[class*="col"] .admin-panel:first-child:last-child:not(:has(.mh-sm,.mh-md,.mh-lg)) {
+
+  min-height: calc(100% - #{rem(24)});
+}
+
+// #region panel links 
+.admin-panel :is(.admin-panel__links, .tabs__links) {
+
+  padding: 0;
+  margin: calc(var(--padding-top) * -1) calc(var(--padding-x) * -1) var(--padding-top) calc(var(--padding-x) * -1);
+
+  border-top-left-radius: rem(8);
+  border-top-right-radius: rem(8);
+  display: flex;
+  flex-direction: column;
+  border-bottom: 1px solid var(--colour-border);
+  overflow: hidden;
+  outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
+
+  &:after {
+    display: none;
+  }
+  
+  @include media-breakpoint-up(sm) {
+
+    flex-direction: row;
+  }
+
+  .link:not(.text-decoration-none):not(.btn) {
+    margin: 0;
+    //margin-left: calc(var(--wrapper-padding) * -1);
+    padding: #{rem(16)} var(--padding-x);
+    width: 100%;
+    position: relative;
+    text-align: left;
+    flex-grow: 1;
+    --gradient-direction: -90deg;
+    background-color:var(--colour-success);
+
+    &:not([class*="bg-"]){
+      background-image: linear-gradient(var(--gradient-direction),  var(--colour-info) 0, transparent 100%);
+    }
+
+    &:is(.current, [aria-pressed="true"]){
+      color: var(--colour-primary-theme);
+    }
+
+    &:not(.current, [aria-pressed="true"]){
+      background: var(--colour-canvas-2)!important;
+    }
+
+    &:after {
+      display: none;
+    }
+
+    @include media-breakpoint-up(sm) {
+
+      margin: 0;
+
+      &:not(:first-child){
+          
+        border-left: 1px solid var(--colour-border)!important;
+      }
+    }
+  }
+
+  .link:is(.current,[aria-pressed="true"]) {
+    pointer-events: none;
+  }
+}
+// #endregion

package/assets/sass/components/alert.scss

@@ -31,6 +31,14 @@
     transform: translate(-50%,0);
     bottom: 0;
   }
+
+  @media (forced-colors: active) {
+    
+    .alert__inner {
+      border: 1px solid CanvasText;
+      color: CanvasText;
+    }
+  }
 }
 
 // Dismissible alerts
@@ -53,6 +61,20 @@
     mask-size: 100%;
     mask-repeat: no-repeat;
     mask-position: 50% 50%;
+    -webkit-mask-image: var(--icon-close);
+    -webkit-mask-size: 100%;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: 50% 50%;
+
+    @media (forced-colors: active) {
+
+      &:before {
+        content: "X";
+      }
+      border: 1px solid CanvasText;
+      mask-image: none;
+      -webkit-mask-image: none;
+    }
   }
 }
 

package/assets/sass/components/applied-filters.scss

@@ -17,6 +17,10 @@
   }
 }
 
+::slotted(*:last-child) {
+  margin-bottom: 0;
+}
+
 .applied-filters .filter {
   
   border: 1px solid var(--colour-border);

package/assets/sass/components/card.scss

@@ -21,7 +21,9 @@
   display: block;
   overflow: hidden;
   z-index: 0;
-  background: #ffffff;
+  background: var(--colour-canvas-2);
+  outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
+  outline-offset: -1px;
 
   &.border-0 {
     box-shadow: none;
@@ -30,7 +32,6 @@
   }
 
   &__body {
-    
     position: relative;
     padding: var(--top-padding) var(--right-padding) var(--bottom-padding) var(--left-padding);
     z-index: -1;
@@ -49,7 +50,7 @@
   }
 
   &:after {
-    background: var(--colour-primary);
+    background: var(--colour-primary-theme);
     mask-image: var(--icon-arrow);
     mask-size: 50%;
     mask-repeat: no-repeat;
@@ -124,16 +125,19 @@
 
 
 ::slotted(i){
-  
-  font-size: rem(18)!important;
+  font-size: rem(24);
+  margin: -3px var(--icon-right) 0 0;
+  font-weight: 400;
+  vertical-align: middle;
+}
+
+.card--filter ::slotted(i) {
+  display: block !important;
   height: rem(18)!important;
   margin: 0 0 0.5rem 0!important;
-  font-weight: 400!important;
-  display: block!important;
 }
 
 ::slotted(span){
-  
   display: block;
   font-weight: normal;
   padding-top: rem(24);

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

@@ -15,10 +15,11 @@ dialog[open] {
   height: fit-content;  
   border: none;
   overscroll-behavior: contain;
-  background: white;
+  background: var(--colour-canvas-2);
   box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.11);
   border-radius: rem(28);
   padding: var(--dialog-padding);
+  outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
 
   // Close button
   > form:first-child {
@@ -61,7 +62,8 @@ dialog[open] {
     }
 
     & + * {
-      padding-right: rem(36);
+      padding-right: var(--dialog-padding);
+      margin-right: rem(20);
     }
   }
 
@@ -76,27 +78,21 @@ dialog[open] {
 
 // #region modal styling
 *:not(.dialog__wrapper) > dialog[open] {
-  
-  min-width: 100%;
-  max-width: 80vw;
-  max-height: 85vh;
-  margin-top: 12vh;
+  overflow-y: hidden;
+  width: 90vw;
+  max-width: rem(376); // col-width*4 // 96px*4 = 376px
+  height: fit-content;
 
   @include media-breakpoint-up(sm) {
     
-    --dialog-padding: #{rem(56)};
+    --dialog-padding: #{rem(32)};
 
-    min-width: 80vw;
-    max-height: 80vh;
-    margin-top: auto;
+    max-width: rem(564); // col-width*6 // 96px*6 = 564px
     border-radius: rem(34);
   }
   
   @include media-breakpoint-up(md) {
     
-    min-width: rem(1112);
-    width: rem(1112);
-    max-width: rem(1112);
   }
 
   &:has(.youtube-embed){
@@ -104,10 +100,22 @@ dialog[open] {
   }
 }
 
+.mh-lg {
+  padding-right: rem(20);
+
+  @include media-breakpoint-up(md) {
+    margin-right: var(--dialog-padding);
+  }
+
+  > *:last-child {
+    margin-bottom: 0;
+  }
+}
 
 
 dialog::backdrop {
   background: rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(4px);
 }
 // #endregion
 
@@ -117,12 +125,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 +148,11 @@ dialog::backdrop {
 
       transform: rotate(90deg);
     }
+
+    &.active:after {
+
+      transform: rotate(-90deg);
+    }
   }
 
   &:has(dialog[open]) > .btn:first-child:after {

package/assets/sass/components/forms.scss

@@ -187,12 +187,12 @@ select[multiple]::-webkit-scrollbar-thumb {
 
   color: var(--colour-white);
   background: var(--colour-primary);
-  padding: 0.75em 1em;
+  padding: calc(0.75em + 1px) 1em;
   font-size: 1rem;
   font-weight: normal;
   line-height: 1.5;
   position: absolute;
-  bottom: 2px;
+  bottom: 0px;
 }
 
 .form-control__wrapper .prefix {

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 {
@@ -16,12 +16,16 @@
   text-align: center;
   overflow: hidden;
   border: none!important;
+  text-decoration: none;
+  font-weight: normal;
+  display: block;
 }
 
 .pagination .page-item {
   border: var(--#{$prefix}pagination-border-width) solid var(--#{$prefix}pagination-border-color);
   border-radius: 4px!important;
   @include transition($pagination-transition);
+  overflow: hidden;
 
   &:hover {
     border-color: var(--#{$prefix}pagination-hover-border-color);

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) {