@iamproperty/components 3.4.5 → 3.4.7

package/assets/sass/_tests/typography.spec.scss

@@ -9,7 +9,7 @@
         font-family: map-get($vars, --font-body);
       }
       @include expect {
-        font-family: qanelasmedium, arial, sans-serif;
+        font-family: Qanelas, arial, sans-serif;
       }
     }
   }
@@ -19,7 +19,7 @@
         font-family: map-get($vars, --font-heading);
       }
       @include expect {
-        font-family: qanelas_softextrabold, arial, sans-serif;
+        font-family: Qanelas, arial, sans-serif;
       }
     }
   }

package/assets/sass/components/accordion.scss

@@ -1,7 +1,7 @@
 @use "../_func.scss" as *;
 
 // Accordion
-.accordion {
+:is(.accordion, iam-accordion) {
   --accordion-indent: 0.75rem;
   --accordion-right-padding: 3rem;
   --accordion-y-padding: 1rem;
@@ -17,7 +17,7 @@
   }
 }
 
-.accordion-button {
+.accordion-header {
 
   padding: $accordion-button-padding-y var(--accordion-right-padding) $accordion-button-padding-y $accordion-button-padding-x;
   color: var(--colour-heading);
@@ -29,6 +29,7 @@
   --marker-bg: var(--colour-secondary);
   cursor: pointer;
   position: relative;
+  max-width: 100%;
 
   .badge {
     vertical-align: bottom;
@@ -105,7 +106,7 @@
 }
 
 // #region Coloured summary
-summary[class*="bg-"] {
+.accordion-header[class*="bg-"] {
 
   .accordion-button {
 
@@ -148,7 +149,7 @@ summary[class*="bg-"] {
   }
 }
 
-.accordion-body {
+.accordion-item summary ~ * {
   text-align: left;
   padding: 0 $accordion-body-padding-x;
 }
@@ -156,11 +157,11 @@ summary[class*="bg-"] {
 // #region Straight edge
 .accordion--straight {
   > details > summary:not([class*="bg-"]) > .accordion-button,
-  > details > .accordion-body {
+  > details > .accordion-item summary ~ * {
     padding-left: 0!important;
   }
 
-  > details > .accordion-body {
+  .accordion-item summary ~ * {
     padding-right: 0!important;
   }
 }
@@ -195,3 +196,5 @@ summary[class*="bg-"] {
   }
 }
 // #endregion
+
+

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

@@ -0,0 +1,65 @@
+@use "../_func.scss" as *;
+
+.applied-filters {
+
+  &:not(.applied-filters--compact):not(:empty):before {
+    content: "Applied filters";
+    font-weight: bold;
+    font-size: rem(18);
+    line-height: rem(22);
+    color: var(--colour-header);
+    margin-bottom: rem(16);
+    display: block;
+  }
+
+  &:not(:empty) {
+    margin-bottom: 1rem;
+  }
+}
+
+.applied-filters .filter {
+  
+  border: 1px solid var(--colour-border);
+  padding: 1rem rem(24) 1rem rem(24);
+  background: transparent;
+  margin-right: 0.5rem!important;
+  margin-bottom: 0.5rem!important;
+  line-height: rem(24);
+  white-space: nowrap;
+
+  &:after {
+    content: "";
+    display: inline-block;
+    height: rem(20);
+    width: rem(20);
+    padding:0;
+    margin-left: rem(24);
+    margin-bottom: -0.25rem;
+    border: none;
+    z-index: var(--index-focus);
+    background: currentColor;
+    mask-image: var(--icon-close);
+    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%;
+  }
+}
+
+.applied-filters--compact .filter {
+  background-color: var(--colour-light);
+  border: none;
+  padding: rem(10);
+  line-height: rem(16);
+    border-radius: rem(5);
+
+  &:after {
+    margin-left: rem(10);
+    height: rem(16);
+    width: rem(16);
+    margin-bottom: -0.1rem;
+  }
+}

package/assets/sass/components/card.scss

@@ -1,289 +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;
 
-  &:hover,
-  &:focus {
-    --spread: #{rem(6)};
-
-    .card-body *:not(.badge) {
-      color: var(--colour-hover)!important;
-    }
+  &.border-0 {
+    box-shadow: none;
+    --left-padding: 0rem;
+    outline-offset: 1px!important;
   }
 
-  &:active {
-    --spread: #{rem(3)};
+  &__body {
+    
+    position: relative;
+    padding: var(--top-padding) var(--right-padding) var(--bottom-padding) var(--left-padding);
+    z-index: -1;
   }
-}
-
-.card-header__wrapper {
-  padding-bottom: 0;
-  padding-top: 55%;
-  position: relative;
-  overflow: hidden;
-  background: rgba(0,0,0,0.1);
-
-  > * {
 
+  &:before,
+  &:after {
+    content: "";
     position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
+    right: var(--icon-right);
+    bottom: var(--bottom-padding);
+    height: rem(24);
+    width: rem(24);
+    background: var(--colour-warning);
+    border-radius: 50%;
   }
 
-  .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;
+  &: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;
   }
 
-  .card-logo {
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: auto;
-    height: 3.5rem;
-    width: 8rem;
-    object-fit: contain;
-    object-position: right;
-  }
-}
+  &:is(:hover,:focus,.hover) {
+    --icon-right: 0.5rem;
+    outline: 2px solid var(--colour-primary);
+    outline-offset: -2px;
 
-.card-banner {
-  padding: 0.5rem;
+    &:before {
+      background: var(--colour-primary);
+    }
+    &:after {
+      background: #ffffff;
+    }
+  }
 
-  &__tag {
+  &:is(:active, .active){
+    --icon-right: 0.5rem;
+    outline: none;
+    
+    &:before {
+      background: var(--colour-warning);
+    }
+    &:after {
+      background: var(--colour-primary);
+    }
+  }
 
-    position: absolute;
-    top: 0;
-    left: 0;
-    background-color: var(--colour-secondary);
-    font-size: rem(14);
+  &:is(:active){
+    background: #FCFCFC;
+  }
+  
+  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 {
-    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;
-  }
-
-  .card-title {
-    margin-bottom: 0;
-    padding-left: 2em;
-    position: relative;
-
-    &:before,
-    &:after {
+//#region Filter card
+.card--filter {
+  --top-padding: #{rem(24)};
+  --right-padding: 1rem;
+  --bottom-padding: #{rem(24)};
+  --left-padding: 1rem;
 
-      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%;
-    }
+  border-left: rem(12) solid var(--colour,var(--colour-primary));
 
-    &: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
+
+// #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;
 
-    flex-wrap: wrap;
-    .card-footer {
-      min-width: 100%;
-      text-align: right;
+    > 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/charts.scss

@@ -264,6 +264,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 +284,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;

package/assets/sass/components/container.scss

@@ -5,14 +5,14 @@
 
 // #region container
 .container {
-
+  display: block;
   margin-left: auto;
   margin-right: auto;
-  padding: var(--container-padding-top) var(--container-padding-x) var(--container-padding-bottom) var(--container-padding-x);
+  padding: var(--container-padding);
   width: 100%;
 
   &:not(.container-fluid) {
-    max-width: rem(1440);
+    max-width: rem(1280);
   }
   
   .container:not(.container-xs-breakout) {
@@ -23,13 +23,13 @@
   }
 
   &[class*="bg-"] {
-    --container-padding-top: #{rem(48)};
-    --container-padding-bottom: #{rem(32)};
+    padding-top: #{rem(48)};
+    padding-bottom: #{rem(32)};
   }
 
   &[class*="bg-"] + .container:not([class*="bg-"]) {
 
-    --container-padding-top: #{rem(32)};
+    padding-top: #{rem(32)};
   }
 
 
@@ -61,8 +61,13 @@
 
 // #region Circles
 .container {
-  position: relative;
-  z-index: 1;
+
+
+  &:has(.circle){
+      
+    position: relative;
+    z-index: 1;
+  }
 
   > .circle {