@iamproperty/components 7.0.0 → 7.1.0--beta2

package/assets/sass/elements/progress.scss

@@ -1,6 +1,6 @@
-@use "../_func" as *;
+@use '../_func' as *;
 
-:is(label,.label):has(progress){
+:is(label, .label):has(progress) {
   position: relative;
   max-width: $input-max-width;
   margin-bottom: 2rem;
@@ -19,20 +19,20 @@ progress {
 }
 
 label[data-percent]:has(progress):before {
-  content: attr(data-percent)'%';
+  content: attr(data-percent) '%';
   vertical-align: 0;
   line-height: 1;
-  position:absolute;
+  position: absolute;
   top: auto;
-  left:auto;
-  right:0;
+  left: auto;
+  right: 0;
   bottom: rem(16);
   color: var(--colour-heading);
   font-weight: bold;
 }
 
 progress[data-progress]:before {
-  content: attr(data-progress)'%';
+  content: attr(data-progress) '%';
 }
 
 progress::-webkit-progress-bar {
@@ -45,27 +45,23 @@ progress::-webkit-progress-value {
 }
 
 // #region inline progress
-:is(label, .label):has(.progress--inline){ 
-
+:is(label, .label):has(.progress--inline) {
   font-size: 1rem;
   color: var(--colour-body);
-  
+
   &:before {
     bottom: -0.25em;
   }
 
   progress.progress--inline {
-
     width: 100%;
-
   }
 }
 
 // #endregion
 
 // #region Circular
-label:has(.progress--circular){
-
+label:has(.progress--circular) {
   --max-width: #{rem(200)};
   --pt: #{rem(90)};
   --pt-percent: 45%;
@@ -92,7 +88,7 @@ label:has(.progress--circular){
   line-height: 1;
 }
 
-label:has(.progress--circular.progress--md){
+label:has(.progress--circular.progress--md) {
   --max-width: #{rem(170)};
   --pt: #{rem(76.5)};
   --pt-percent: 45%;
@@ -100,7 +96,7 @@ label:has(.progress--circular.progress--md){
   --value-pb: #{rem(24)};
 }
 
-label:has(.progress--circular.progress--sm){
+label:has(.progress--circular.progress--sm) {
   --max-width: #{rem(120)};
   --pt: #{rem(54)};
   --pt-percent: 45%;
@@ -112,14 +108,12 @@ label:has(.progress--circular.progress--sm){
 }
 
 // Responsive-ish settings
-*:has(> label > .progress--circular){
-  
+*:has(> label > .progress--circular) {
   container-type: inline-size;
 }
 
 @container (width <= 10.625rem) {
-
-  label:has(.progress--circular:not(.progress--sm):not(.progress--md)){
+  label:has(.progress--circular:not(.progress--sm):not(.progress--md)) {
     --max-width: #{rem(170)};
     --pt: #{rem(76.5)};
     --pt-percent: 45%;
@@ -129,22 +123,18 @@ label:has(.progress--circular.progress--sm){
 }
 
 @container (width <= 7.5rem) {
+  label:has(.progress--circular:not(.progress--sm):not(.progress--md)) {
+    --max-width: #{rem(120)};
+    --pt: #{rem(54)};
+    --pt-percent: 45%;
+    --bar-width: #{rem(16)};
+    --value-fs: #{rem(24)};
 
-  label:has(.progress--circular:not(.progress--sm):not(.progress--md)){
-  --max-width: #{rem(120)};
-  --pt: #{rem(54)};
-  --pt-percent: 45%;
-  --bar-width: #{rem(16)};
-  --value-fs: #{rem(24)};
-
-  --value-pb: #{rem(16)};
-  --label-fs: #{rem(12)};
+    --value-pb: #{rem(16)};
+    --label-fs: #{rem(12)};
   }
 }
 
-
-
-
 label:has(.progress--circular) + label:has(.progress--circular) {
   margin-left: 2rem;
 }
@@ -157,7 +147,6 @@ label:has(.progress--circular) + label:has(.progress--circular) {
 }
 
 .progress--circular {
-
   --progress-shown: var(--progress, 0%);
   position: absolute;
   z-index: -2;
@@ -165,7 +154,10 @@ label:has(.progress--circular) + label:has(.progress--circular) {
   left: 0;
   margin: 0;
   background: red;
-  background: conic-gradient(var(--colour, var(--colour-info)) var(--progress-shown), var(--colour-light) var(--progress-shown) calc(100% - var(--progress-shown)));
+  background: conic-gradient(
+    var(--colour, var(--colour-info)) var(--progress-shown),
+    var(--colour-light) var(--progress-shown) calc(100% - var(--progress-shown))
+  );
   height: 100%;
   width: 100%;
   border-radius: 50%;
@@ -178,19 +170,17 @@ label:has(.progress--circular) + label:has(.progress--circular) {
   opacity: 0;
 }
 
-
 .progress--circular::-moz-progress-bar {
   opacity: 0;
 }
 
 label[data-percent]:has(.progress--circular):before {
-
   top: var(--pt-percent);
-  left:50%;
-  right:auto;
+  left: 50%;
+  right: auto;
   bottom: auto;
   color: var(--colour-heading);
-  transform: translate(-50%,-50%);
+  transform: translate(-50%, -50%);
   font-size: var(--value-fs);
   line-height: 1;
   z-index: 2;
@@ -198,7 +188,7 @@ label[data-percent]:has(.progress--circular):before {
 }
 
 label:has(.progress--circular):after {
-  content: "";
+  content: '';
   position: absolute;
   z-index: -1;
   top: 50%;

package/assets/sass/elements/table.element.scss

@@ -1,4 +1,4 @@
-@use "../_func.scss" as *;
+@use '../_func.scss' as *;
 
 // #region reset
 table {
@@ -46,9 +46,9 @@ table {
   overflow: auto;
 }
 
-:is(td,th) {
+:is(td, th) {
   padding: rem(12) rem(32) rem(12) 0;
-  
+
   font-weight: normal;
   text-align: left;
   vertical-align: top;
@@ -60,14 +60,14 @@ table {
   &:last-child {
     padding-right: 0;
   }
-  
+
   p {
     font-size: inherit;
     padding: 0;
-      @container (width > 23.4375em) {
+    @container (width > 23.4375em) {
       display: -webkit-box;
       -webkit-line-clamp: 4;
-      -webkit-box-orient: vertical;  
+      -webkit-box-orient: vertical;
       overflow: hidden;
       min-width: rem(300);
     }
@@ -76,14 +76,13 @@ table {
 
 th {
   font-weight: bold;
-  @include var(color,--colour-heading);
+  @include var(color, --colour-heading);
 }
 
 thead {
   tr {
-    
     border-bottom: var(--border-width) solid currentColor;
-    @include var(border-color,--colour-primary);
+    @include var(border-color, --colour-primary);
   }
   th {
     padding-top: 0;
@@ -92,8 +91,7 @@ thead {
 }
 
 // Error messages
-tr td[colspan="100%"]:first-child:last-child span {
-
+tr td[colspan='100%']:first-child:last-child span {
   max-width: rem(624);
   font-weight: bold;
   padding: 3rem;
@@ -108,7 +106,6 @@ tr td[colspan="100%"]:first-child:last-child span {
 
 @container (width >= 60em) {
   thead {
-
     th:not(:empty) {
       white-space: nowrap;
       min-width: #{$td-mw};
@@ -123,14 +120,12 @@ tr td[colspan="100%"]:first-child:last-child span {
 }
 
 tbody tr {
-
   border-bottom: var(--border-width) solid currentColor;
-  @include var(border-color,--colour-border);
+  @include var(border-color, --colour-border);
 }
 
 .border-0 > table,
 table.border-0 {
-
   --border-width: 0px;
   --inner-border-width: 0px;
 }

package/assets/sass/elements/tooltips.scss

@@ -1,8 +1,6 @@
-@use "../_func.scss" as *;
-
-
-@mixin tooltip(){
+@use '../_func.scss' as *;
 
+@mixin tooltip() {
   display: block;
   z-index: var(--index-floating);
   position: absolute;
@@ -10,12 +8,12 @@
   left: auto;
   right: 0.85em;
   width: #{rem(270)};
-  transform: translate(50%,0);
+  transform: translate(50%, 0);
   background: var(--colour-primary);
   color: var(--colour-white);
   padding: rem(24);
   border-radius: 0.5rem;
-  box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.11); 
+  box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.11);
 
   > strong:first-child {
     display: block;
@@ -23,17 +21,15 @@
   }
 
   @include media-breakpoint-up(sm) {
-
-    width: #{rem(335)}; 
+    width: #{rem(335)};
   }
-  
-  @include media-breakpoint-up(md) {
 
-    width: #{rem(360)}; 
+  @include media-breakpoint-up(md) {
+    width: #{rem(360)};
   }
 
   &::after {
-    content: "";
+    content: '';
     position: absolute;
     bottom: 100%;
     left: 50%;
@@ -43,7 +39,6 @@
     border-color: transparent transparent var(--colour-primary) transparent;
     margin-bottom: -1px;
   }
-
 }
 
 abbr[title] {
@@ -54,49 +49,40 @@ abbr[title] {
   text-decoration: none;
   position: relative;
 
-  &:is(:hover, :focus, :active){
-
+  &:is(:hover, :focus, :active) {
     text-decoration: none;
   }
 
-  &:after{
-
-    font-family: "Font Awesome 6 Pro";
+  &:after {
+    font-family: 'Font Awesome 6 Pro';
     font-weight: 900;
-    content: "\f059";
+    content: '\f059';
     display: inline-block;
     margin-left: 0.2em;
     margin-right: 0.1em;
     margin-bottom: 0.1em;
     color: var(--colour-primary);
-
   }
 
   > span {
-
     opacity: 0;
     position: absolute;
-    
   }
 
-  &:is(:hover, .hover, :focus, :active){
-
+  &:is(:hover, .hover, :focus, :active) {
     > span {
-
       opacity: 1;
       @include tooltip();
     }
   }
 
-  &.tooltip--top span{
-      
+  &.tooltip--top span {
     top: auto;
     bottom: calc(100% + 0.5rem);
     left: auto;
     right: 0.85em;
 
     &:after {
-        
       top: 100%;
       bottom: auto;
       left: 50%;
@@ -105,15 +91,14 @@ abbr[title] {
     }
   }
 
-
-  &.shift--left span{
+  &.shift--left span {
     transform: translate(calc(0% + 1.5rem), 0);
 
     &:after {
       left: calc(100% - 1.5rem);
     }
   }
-  &.shift--right span{
+  &.shift--right span {
     transform: translate(calc(100% - 1rem), 0);
 
     &:after {
@@ -121,28 +106,24 @@ abbr[title] {
     }
   }
 
-  
   @include media-breakpoint-up(sm) {
-
-    &:is(.shift--left,.shift--right) span{
+    &:is(.shift--left, .shift--right) span {
       transform: translate(50%, 0);
-  
+
       &:after {
-        left: 50%
+        left: 50%;
       }
     }
 
-    &.tooltip--left span{
-      
+    &.tooltip--left span {
       top: 50%;
       bottom: auto;
       left: auto;
       right: 1.6em;
-  
-      transform: translate(0,-50%);
-  
+
+      transform: translate(0, -50%);
+
       &:after {
-          
         top: calc(50% - 0.5em);
         bottom: auto;
         left: calc(100% + 0.25em - 1px);
@@ -150,17 +131,15 @@ abbr[title] {
         margin-bottom: 0;
       }
     }
-    &.tooltip--right span{
-        
+    &.tooltip--right span {
       top: 50%;
       bottom: auto;
       left: calc(100% + 0.5rem);
       right: auto;
-  
-      transform: translate(0,-50%);
-  
+
+      transform: translate(0, -50%);
+
       &:after {
-          
         top: calc(50% - 0.5em);
         bottom: auto;
         left: auto;
@@ -169,6 +148,5 @@ abbr[title] {
         margin-bottom: 0;
       }
     }
-
   }
 }

package/assets/sass/elements/type.scss

@@ -1,5 +1,5 @@
-@use "sass:map";
-@use "../_func.scss" as *;
+@use 'sass:map';
+@use '../_func.scss' as *;
 
 /* Duplicated from bootstrap reboot so that the type file will compile */
 mark {
@@ -11,7 +11,6 @@ mark {
 
 // #region headings
 
-
 %heading {
   --line-height: #{$headings-line-height};
   // From bootstrap reboot
@@ -26,65 +25,61 @@ mark {
   clear: both;
   display: block;
   padding-bottom: 2rem;
-    
-  [class*="fa-"] {
+
+  [class*='fa-'] {
     margin-right: 0.5rem;
   }
 }
 
-@include is('h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6,.display-1,.display-2, .display-3, .display-4'){
-  
+@include is('h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6,.display-1,.display-2, .display-3, .display-4') {
   @extend %heading;
 }
 
 :is(.h1, h1) {
-  --line-height: #{rem(map-get($heading-sizes,"h1_lh"))};
+  --line-height: #{rem(map-get($heading-sizes, 'h1_lh'))};
 
-  font-size: rem(map-get($heading-sizes,"h1_fs"));
-  padding-bottom: rem(map-get($heading-sizes,"h1_pb"));
+  font-size: rem(map-get($heading-sizes, 'h1_fs'));
+  padding-bottom: rem(map-get($heading-sizes, 'h1_pb'));
   font-weight: 900;
 
   @include media-breakpoint-up(sm) {
-
-    font-size: rem(map-get($heading-sizes,"h1_fs_sm"));
-    --line-height: #{rem(map-get($heading-sizes,"h1_lh_sm"))};
-    padding-bottom: rem(map-get($heading-sizes,"h1_pb_sm"));
+    font-size: rem(map-get($heading-sizes, 'h1_fs_sm'));
+    --line-height: #{rem(map-get($heading-sizes, 'h1_lh_sm'))};
+    padding-bottom: rem(map-get($heading-sizes, 'h1_pb_sm'));
   }
 }
 
 :is(h2, .h2) {
-  font-size: rem(map-get($heading-sizes,"h2_fs"));
-  --line-height: #{rem(map-get($heading-sizes,"h2_lh"))};
-  padding-bottom: rem(map-get($heading-sizes,"h1_pb"));
+  font-size: rem(map-get($heading-sizes, 'h2_fs'));
+  --line-height: #{rem(map-get($heading-sizes, 'h2_lh'))};
+  padding-bottom: rem(map-get($heading-sizes, 'h1_pb'));
   font-weight: 900;
 
   @include media-breakpoint-up(sm) {
-
-    font-size: rem(map-get($heading-sizes,"h2_fs_sm"));
-    --line-height: #{rem(map-get($heading-sizes,"h2_lh_sm"))};
-    padding-bottom: rem(map-get($heading-sizes,"h2_pb_sm"));
+    font-size: rem(map-get($heading-sizes, 'h2_fs_sm'));
+    --line-height: #{rem(map-get($heading-sizes, 'h2_lh_sm'))};
+    padding-bottom: rem(map-get($heading-sizes, 'h2_pb_sm'));
   }
 }
 
 :is(h3, .h3) {
-  font-size: rem(map-get($heading-sizes,"h3_fs"));
-  --line-height: #{rem(map-get($heading-sizes,"h3_lh"))};
-  padding-bottom: rem(map-get($heading-sizes,"h3_pb"));
+  font-size: rem(map-get($heading-sizes, 'h3_fs'));
+  --line-height: #{rem(map-get($heading-sizes, 'h3_lh'))};
+  padding-bottom: rem(map-get($heading-sizes, 'h3_pb'));
   max-width: var(--content-max-width);
   font-weight: 900;
 
   @include media-breakpoint-up(sm) {
-
-    font-size: rem(map-get($heading-sizes,"h3_fs_sm"));
-    --line-height: #{rem(map-get($heading-sizes,"h3_lh_sm"))};
-    padding-bottom: rem(map-get($heading-sizes,"h3_pb_sm"));
+    font-size: rem(map-get($heading-sizes, 'h3_fs_sm'));
+    --line-height: #{rem(map-get($heading-sizes, 'h3_lh_sm'))};
+    padding-bottom: rem(map-get($heading-sizes, 'h3_pb_sm'));
   }
 }
 
-:is(.h4, h4, .h5, h5, .h6, h6)  {
-  font-size: rem(map-get($heading-sizes,"h4_fs"));
-  --line-height: #{rem(map-get($heading-sizes,"h4_lh"))};
-  padding-bottom: rem(map-get($heading-sizes,"h4_pb"));
+:is(.h4, h4, .h5, h5, .h6, h6) {
+  font-size: rem(map-get($heading-sizes, 'h4_fs'));
+  --line-height: #{rem(map-get($heading-sizes, 'h4_lh'))};
+  padding-bottom: rem(map-get($heading-sizes, 'h4_pb'));
   max-width: var(--content-max-width);
 
   /* The values for mobile and tablet are exactly the same, but if that changes this block needs to be re-instated 
@@ -100,47 +95,49 @@ mark {
 
 p {
   margin-top: 0;
-  font-size: rem(map-get($heading-sizes,"body_fs"));
-  line-height: rem(map-get($heading-sizes,"body_lh"));
-  padding-bottom: rem(map-get($heading-sizes,"body_end_pb"));
+  font-size: rem(map-get($heading-sizes, 'body_fs'));
+  line-height: rem(map-get($heading-sizes, 'body_lh'));
+  padding-bottom: rem(map-get($heading-sizes, 'body_end_pb'));
   max-width: var(--content-max-width);
   margin-bottom: 0;
 }
 
 p:has(+ p) {
-  padding-bottom: rem(map-get($heading-sizes,"body_pb"));
+  padding-bottom: rem(map-get($heading-sizes, 'body_pb'));
 }
 
-:is(.lead, .strapline){
-  font-size: rem(map-get($heading-sizes,"lead_fs"));
-  line-height: rem(map-get($heading-sizes,"lead_lh"));
-  padding-bottom: rem(map-get($heading-sizes,"lead_pb"));
+:is(.lead, .strapline) {
+  font-size: rem(map-get($heading-sizes, 'lead_fs'));
+  line-height: rem(map-get($heading-sizes, 'lead_lh'));
+  padding-bottom: rem(map-get($heading-sizes, 'lead_pb'));
   max-width: var(--content-max-width);
   font-weight: 700;
 }
 
 small,
 .small {
-  font-size: rem(map-get($heading-sizes,"small_fs"));
-  line-height: rem(map-get($heading-sizes,"small_lh"));
-  padding-bottom: rem(map-get($heading-sizes,"small_pb"));
+  font-size: rem(map-get($heading-sizes, 'small_fs'));
+  line-height: rem(map-get($heading-sizes, 'small_lh'));
+  padding-bottom: rem(map-get($heading-sizes, 'small_pb'));
   max-width: var(--content-max-width);
   font-family: arial, sans-serif;
   font-weight: normal;
 }
 
-
 sub,
 sup {
   position: relative;
-  font-size: .75em;
+  font-size: 0.75em;
   line-height: 0;
   vertical-align: baseline;
 }
 
-sub { bottom: -.25em; }
-sup { top: -.5em; }
-
+sub {
+  bottom: -0.25em;
+}
+sup {
+  top: -0.5em;
+}
 
 abbr[title] {
   text-decoration: underline dotted; // 1
@@ -148,7 +145,6 @@ abbr[title] {
   text-decoration-skip-ink: none; // 3
 }
 
-
 // Address
 
 address {
@@ -157,14 +153,12 @@ address {
   line-height: inherit;
 }
 
-
 blockquote {
 }
 
 blockquote {
-
   margin: 0;
-  quotes: "“" "”" "‘" "’";
+  quotes: '“' '”' '‘' '’';
   padding-bottom: rem(48);
   overflow: hidden;
 
@@ -202,4 +196,4 @@ blockquote {
   text-decoration-color: var(--colour-secondary);
   text-decoration-thickness: rem(4);
   margin-bottom: rem(64);
-}
+}

package/assets/sass/email.scss

@@ -2,14 +2,14 @@
 
 // Set mobile only variable so that the media query mixin doesn't print out non mobile rules
 
-@use "_func" as *;
+@use '_func' as *;
 
-$mobileOnly: "true";
-$compatible: "true";
+$mobileOnly: 'true';
+$compatible: 'true';
 
 // Update the breakpoints to just one to remove some utility classes
 $grid-breakpoints: (
-  xs: 0
+  xs: 0,
 );
 
 // Simplify the grid
@@ -20,15 +20,13 @@ $device-md-width: 600;
 $container-padding-x: 32;
 $default-curve-width: 600;
 
-@import "_corefiles";
+@import '_corefiles';
 
 :root {
-
   --container-padding-x: #{rem(66)};
 }
 
 html {
-
   @media (min-width: #{em(600)}) {
     font-size: 100%;
   }
@@ -62,5 +60,5 @@ html {
 }
 /* utilities */
 .text-white {
-  color: white;;
-}
+  color: white;
+}