@iamproperty/components 3.4.6 → 3.5.0

package/assets/sass/components/card.scss

@@ -1,296 +1,240 @@
 @use "../_func.scss" as *;
 
-@import "../../../node_modules/bootstrap/scss/_card.scss";
-
-// #region Defaul Card
-// Reset the link
-a.card {
-
-  cursor: pointer;
-  
-  &:before {
-    display: none;
-  }
-}
-
-.card:not(.card--simple) {
-
-  @include reset-colours();
-}
+// #region Default card
 .card {
+  --top-padding: 2rem;
+  --right-padding: #{rem(16+16+24)};
+  --bottom-padding: 2rem;
+  --left-padding: 1rem;
+  --icon-right: 1rem;
 
-  --spread: #{rem(12)};
-  box-shadow: 0 2px var(--spread) 0 rgba(154,154,154,0.25);
+  position: relative;
+  box-shadow: 2px 6px 12px rgba(0,0,0,0.2);
+  border-radius: rem(8);
+  font-weight: bold;
+  font-size: rem(18);
+  line-height: rem(24);
+  color: var(--colour-primary);
   min-height: 100%;
+  width: 100%;
+  text-align: left;
+  display: block;
   overflow: hidden;
-  max-width: rem(925);
+  z-index: 0;
+  background: #ffffff;
 
-  .card-title {
-    margin-bottom: 0;
-    padding-bottom: 0;
+  &.border-0 {
+    box-shadow: none;
+    --left-padding: 0rem;
+    outline-offset: 1px!important;
   }
 
-  &:hover,
-  &:focus {
-    --spread: #{rem(6)};
-
-    .card-body *:not(.badge) {
-      color: var(--colour-hover)!important;
-    }
+  &__body {
+    
+    position: relative;
+    padding: var(--top-padding) var(--right-padding) var(--bottom-padding) var(--left-padding);
+    z-index: -1;
   }
 
-  &:active {
-    --spread: #{rem(3)};
+  &:before,
+  &:after {
+    content: "";
+    position: absolute;
+    right: var(--icon-right);
+    bottom: var(--bottom-padding);
+    height: rem(24);
+    width: rem(24);
+    background: var(--colour-warning);
+    border-radius: 50%;
   }
-}
 
-.card-header__wrapper {
-  padding-bottom: 0;
-  padding-top: 55%;
-  position: relative;
-  overflow: hidden;
-  background: rgba(0,0,0,0.1);
+  &:after {
+    background: var(--colour-primary);
+    mask-image: var(--icon-arrow);
+    mask-size: 50%;
+    mask-repeat: no-repeat;
+    mask-position: 50% 50%;
+    -webkit-mask-image: var(--icon-arrow);
+    -webkit-mask-size: 50%;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: 50% 50%;
+    z-index: 2;
+  }
 
-  > * {
+  &:is(:hover,:focus,.hover) {
+    --icon-right: 0.5rem;
+    outline: 2px solid var(--colour-primary);
+    outline-offset: -2px;
 
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
+    &:before {
+      background: var(--colour-primary);
+    }
+    &:after {
+      background: #ffffff;
+    }
   }
 
-  .card-image {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 101%;
-    height: 101%;
-    object-fit: cover;
-  }
-  
-  .card-header {
-    display: flex;
-    flex-wrap: nowrap;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: space-between;
+  &:is(:active, .active){
+    --icon-right: 0.5rem;
+    outline: none;
+    
+    &:before {
+      background: var(--colour-warning);
+    }
+    &:after {
+      background: var(--colour-primary);
+    }
   }
 
-  .card-logo {
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: auto;
-    height: 3.5rem;
-    width: 8rem;
-    object-fit: contain;
-    object-position: right;
+  &:is(:active){
+    background: #FCFCFC;
   }
-}
-
-.card-banner {
-  padding: 0.5rem;
-
-  &__tag {
-
-    position: absolute;
-    top: 0;
-    left: 0;
-    background-color: var(--colour-secondary);
-    font-size: rem(14);
+  
+  span {
+    display: block;
     font-weight: bold;
-    aspect-ratio: 1;
-    padding: 0.75rem;
-    border-radius: 50%;
-    transform: translate(-0.25rem,-1.25rem) rotate(-25deg);
-    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15)!important;
-
+    padding-top: rem(24);
+    font-size: rem(16);
   }
-}
 
-.card-body {
+  &:has(.card__illustration) .card__body {
 
-  color: var(--colour-body);
+    align-items: center;
+    display: flex;
 
-  *:last-child {
-    padding-bottom: 0;
-    margin-bottom: 0;
+    .card__illustration {
+      height: rem(64);
+      width: rem(64);
+      margin-right: rem(24);
+      margin-top: rem(-20);
+      margin-bottom: rem(-20);
+      position: relative;
+
+      img {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
+    }    
   }
 }
 
-.card-footer {
-  padding-top: 0;
-}
-
-// Add a default margin bottom
-.row:not([class*="g-"]) .card {
 
-  margin-bottom: 1rem;
+::slotted(i){
+  
+  font-size: rem(18)!important;
+  height: rem(18)!important;
+  margin: 0 0 0.5rem 0!important;
+  font-weight: 400!important;
+  display: block!important;
 }
-// #endregion
-
-// #region Simple card variant
-.card--simple {
 
-  box-shadow: none;
-  min-height: 0;
-  background: none;
+::slotted(span){
   
-  .card-header__wrapper {
-
-    @include border-radius($card-border-radius);
-    margin-bottom: 1rem;
-  }
-
-  .card-body {
-    padding-top: 0;
-  }
-  .card-body,
-  .card-footer {
-    padding-left: 0;
-    padding-right: 0;
-  }
+  display: block;
+  font-weight: normal;
+  padding-top: rem(24);
+  font-size: rem(16);
 }
 // #endregion
 
-// #region Quick link card
-.card--quick{
-  
-  .card-header,
-  .card-footer,
-  .card-body > *:not(.card-title) {
-    display: none;
-  }
+//#region Filter card
+.card--filter {
+  --top-padding: #{rem(24)};
+  --right-padding: 1rem;
+  --bottom-padding: #{rem(24)};
+  --left-padding: 1rem;
 
-  .card-title {
-    margin-bottom: 0;
-    padding-bottom: 0;
-    padding-left: 2em;
-    position: relative;
+  border-left: rem(12) solid var(--colour,var(--colour-primary));
 
-    &:before,
-    &:after {
-
-      content: "";
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 1.2em;
-      height: 1.2em;
-    }
-    &:before  {
-
-      left: 0.05em;
-      background: currentColor;
-      mask-image: escape-svg($accordion-button-icon);
-      mask-size: 50%;
-      mask-repeat: no-repeat;
-      mask-position: 50% 50%;
-    
-      -webkit-mask-image: escape-svg($accordion-button-icon);
-      -webkit-mask-size: 50%;
-      -webkit-mask-repeat: no-repeat;
-      -webkit-mask-position: 50% 50%;
-    }
-
-    &:after {
-      border: 2px solid currentColor;
-      border-radius: 50%;
-    }
+  &:has(.card__total) .card__body{
 
+    align-items: center;
+    display: flex;
   }
-}
-// #endregion
-
-// #region Small cards 
-.card--small {
 
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding-inline: 0.5rem;
-
-  .card-header__wrapper,
-  .card-body > *:not(.card-title) {
+  &:before,
+  &:after {
     display: none;
   }
 
-  .card-body,
-  .card-footer {
-    padding: 0.5rem;
-  }
-
-  .card-title {
-    margin: 0;
+  &:is(:hover,:focus,.hover) {
+    outline: none;
+    background: #EEEEEE;
+      
+    .card__body {
+      background: #EEEEEE;
+    }
   }
 
-  .btn {
-    margin-right: 0;
-    white-space: nowrap;
+  &:is(:active, .active){
+    outline: 2px solid var(--colour,var(--colour-primary));
+    outline-offset: -2px;
 
-    &:not(.btn--link) {
-      padding: 0.5em 1em
+    .card__body {
+      background: #ffffff;
     }
   }
 
-  &:not([target="_blank"]) .btn-primary:not(.btn--link):after {
-      
-    content: "";
-    height: 1em;    
-    width: 1em;
-    margin-left: 0.5em;
-    margin-right: -0.5em;
-    display: inline-block;
-    vertical-align: baseline;
-    margin-bottom: -0.15em;
-
-    mask-image: var(--icon-arrow);
-    mask-size: 100% 100%;
-    mask-repeat: no-repeat;
-    mask-position: 0 0;
-  
-    -webkit-mask-image: var(--icon-arrow);
-    -webkit-mask-size: 100% 100%;
-    -webkit-mask-repeat: no-repeat;
-    -webkit-mask-position: 0 0;
-    background-color: currentColor;
+  &.card--has-icon {
+    --bottom-padding: #{rem(16)};
+    border: none;
   }
 
+  .icon {
+    font-size: rem(18)!important;
+    height: rem(18)!important;
+    margin: 0 0 0.5rem 0!important;
+    font-weight: 400!important;
+    display: block!important;
+  }
     
-  @include media-breakpoint-up(md) {
+  .card__total {
+    font-size: rem(48);
+    line-height: rem(48);
+    padding-right: rem(16);
+  }
+}
+// #endregion
 
-    flex-wrap: wrap;
-    .card-footer {
-      min-width: 100%;
-      text-align: right;
+// #region card with an image
+.card:has(.card__head) {
+  .card__head {
+    padding-bottom: 0;
+    padding-top: 55%;
+    position: relative;
+    overflow: hidden;
+    background: rgba(0,0,0,0.1);
+    z-index: -1;
+
+    > img {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 101%;
+      height: 101%;
+      object-fit: cover;
     }
   }
 }
+// #endregion
 
-.card--danger,
-.card--warning,
-.card--success {
-  position: relative;
-  padding-left: 1.5rem;
+//#region card with a footer
+.card:has(.card__footer){
 
   &:after {
+    display: none;
+  }
 
-    content: "";
-    height: 100%;
-    width: 1rem;
-    background: var(--colour-danger);
+  .card__footer {
+    position: relative;
+    background: #ffffff;
+    padding: var(--top-padding) var(--right-padding) var(--bottom-padding) var(--left-padding);
+    z-index: -1;
     display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
   }
 }
-
-.card--warning:after {
-  background: var(--colour-warning);
-}
-.card--success:after {
-  background: var(--colour-success);
-}
-// #endregion
+//#endregion

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
@@ -264,6 +300,8 @@ $chart-colors: map-merge((
         text-overflow: ellipsis;
         font-size: var(--label-size);
         display: none;
+        border: none;
+        min-width: auto;
 
         @include media-breakpoint-up(md) {
           display: block;
@@ -282,10 +320,12 @@ $chart-colors: map-merge((
         height: var(--percent, 0%);
         bottom: var(--bottom,0%);
         width: 50%;
+        min-width: 0;
         max-width: 10rem;
         position: relative;
         background: green;
         padding: 0;
+        border: none;
 
         &[data-label]:before {
           display: none;
@@ -514,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 {
@@ -61,8 +61,13 @@
 
 // #region Circles
 .container {
-  position: relative;
-  z-index: 1;
+
+
+  &:has(.circle){
+      
+    position: relative;
+    z-index: 1;
+  }
 
   > .circle {