@iamproperty/components 3.4.6 → 3.4.7

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/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

@@ -61,8 +61,13 @@
 
 // #region Circles
 .container {
-  position: relative;
-  z-index: 1;
+
+
+  &:has(.circle){
+      
+    position: relative;
+    z-index: 1;
+  }
 
   > .circle {
 

package/assets/sass/components/dialog.scss

@@ -0,0 +1,202 @@
+@use "sass:math";
+@use "../_func" as *;
+
+// non-js fallback
+body:not(.js-enabled) dialog:not([open]):target {
+  display: block;
+}
+
+// #region Default styling of both modals and popovers
+dialog[open] {
+
+  --dialog-padding: #{rem(24)};
+
+  width: fit-content;
+  height: fit-content;  
+  border: none;
+  overscroll-behavior: contain;
+  background: white;
+  box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.11);
+  border-radius: rem(28);
+  padding: var(--dialog-padding);
+
+  // Close button
+  > form:first-child {
+
+    position: static;
+  }
+
+  > form:first-child button,
+  > button:first-child {
+    position: absolute;
+    top: var(--dialog-padding);
+    right: var(--dialog-padding);
+    z-index: var(--index-floating);
+
+    text-indent: 300%;
+    overflow: hidden;
+    border: none;
+    height: rem(20);
+    width: rem(20);
+    background: transparent;
+
+    &:after {
+      content: "";
+      top: 0;
+      left: 0;
+      position: absolute;
+      display: block;
+      height: rem(20);
+      width: rem(20);
+      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%;
+    }
+
+    & + * {
+      padding-right: rem(36);
+    }
+  }
+
+  > *:last-child {
+    margin-bottom: 0;
+  }
+  > :is(p):last-child {
+    padding-bottom: 0;
+  }
+}
+// #endregion
+
+// #region modal styling
+*:not(.dialog__wrapper) > dialog[open] {
+  
+  min-width: 100%;
+  max-width: 80vw;
+  max-height: 85vh;
+  margin-top: 12vh;
+
+  @include media-breakpoint-up(sm) {
+    
+    --dialog-padding: #{rem(56)};
+
+    min-width: 80vw;
+    max-height: 80vh;
+    margin-top: auto;
+    border-radius: rem(34);
+  }
+  
+  @include media-breakpoint-up(md) {
+    
+    min-width: rem(1112);
+    width: rem(1112);
+    max-width: rem(1112);
+  }
+
+  &:has(.youtube-embed){
+    padding: 0!important;
+  }
+}
+
+
+
+dialog::backdrop {
+  background: rgba(0, 0, 0, 0.3);
+}
+// #endregion
+
+// #region popover styling
+.dialog__wrapper {
+
+  position: relative;
+  display: inline-block;
+
+  > .btn:first-child {
+    &:after {
+      content: "";
+    
+      display: inline-block;
+      margin-left: 0.5em;
+      margin-bottom: -0.15em;
+      height: 1em;
+      width: 1em;
+      z-index: var(--index-focus);
+      background: currentColor;
+      mask-image: var(--icon-arrow);
+      mask-size: 100%;
+      mask-repeat: no-repeat;
+      mask-position: 50% 50%;
+      -webkit-mask-image: var(--icon-arrow);
+      -webkit-mask-size: 100%;
+      -webkit-mask-repeat: no-repeat;
+      -webkit-mask-position: 50% 50%;
+
+      transform: rotate(90deg);
+    }
+  }
+
+  &:has(dialog[open]) > .btn:first-child:after {
+
+    transform: rotate(270deg);
+  }
+
+  > dialog[open] {
+
+    left: 0;
+    top: 100%;
+    z-index: var(--index-floating);
+    min-width: rem(320);
+    border-radius: rem(16);
+    max-width: rem(600);
+  }
+
+  &.dialog__wrapper--right > dialog[open]{
+
+    right: 0;
+    left: auto;
+  }  
+
+  @include media-breakpoint-up(sm) {
+    
+    &.dialog__wrapper--sm-left > dialog[open]{
+
+      left: 0;
+      right: auto;
+    }  
+    &.dialog__wrapper--sm-right > dialog[open]{
+
+      right: 0;
+      left: auto;
+    }  
+  }
+
+  @include media-breakpoint-up(md) {
+    
+    &.dialog__wrapper--md-left > dialog[open]{
+
+      left: 0;
+      right: auto;
+    }  
+    &.dialog__wrapper--md-right > dialog[open]{
+
+      right: 0;
+      left: auto;
+    }  
+  }
+}
+
+// Show hide the indidual or multiple label
+.dialog__wrapper:has(input:checked) .empty,
+.dialog__wrapper:not(:has(input:checked)) .individual,
+.dialog__wrapper:has(input:checked ~ input:checked) .individual,
+.dialog__wrapper:not(:has(input:checked ~ input:checked)) .multiple {
+
+  display: none;
+}
+// #endregion