@iamproperty/components 7.0.0 → 7.1.0--beta2

package/assets/sass/elements/icons.scss

@@ -1,5 +1,4 @@
-@use "../_func" as *;
-
+@use '../_func' as *;
 
 .icon--xs {
   font-size: rem(16);
@@ -21,6 +20,6 @@
   font-size: rem(40);
 }
 
-[class*="fa-"]:not(.fa-regular,.fa-light, .fa-solid, .btn) {
+[class*='fa-']:not(.fa-regular, .fa-light, .fa-solid, .btn) {
   font-weight: 400;
-}
+}

package/assets/sass/elements/links.scss

@@ -1,5 +1,4 @@
-@use "../_func.scss" as *;
-
+@use '../_func.scss' as *;
 
 // #region reset
 a {
@@ -31,12 +30,10 @@ a {
   color: var(--colour-link);
 
   &:is(:hover, :focus, .hover, :focus-within) {
-
     color: var(--colour-hover);
-  }   
+  }
 
   &:is(:active, .active) {
-
     color: var(--colour-active);
   }
 }
@@ -56,38 +53,37 @@ a:where(:not(.btn):not(.brand):not(:has(.card)):not(:has(iam-card))),
   position: relative;
   font-weight: bold;
 
-  &:not(.text-decoration-none){
+  &:not(.text-decoration-none) {
     &:after {
       position: absolute;
-      content: "";
+      content: '';
       top: 100%;
       left: 50%;
       height: 2px;
       width: 100%;
-      transform: translate(-50%,0);
+      transform: translate(-50%, 0);
       background: var(--colour-underline);
       transition: width 0.5s;
     }
   }
 
-  [class*=fa-] {
+  [class*='fa-'] {
     margin-left: 0;
     margin-right: 0.5rem;
   }
-  [class*=fa-]:not(:first-child) {
+  [class*='fa-']:not(:first-child) {
     margin-left: 0.5rem;
     margin-right: 0;
   }
 
   &:is(:hover, :focus, .hover, :active, .active, :focus-within) {
-
     &:after {
       width: 60%;
     }
-  }     
+  }
 }
 
-@include inline-text(){
+@include inline-text() {
   a:not(.btn) {
     min-height: none;
     display: inline;
@@ -98,7 +94,7 @@ a:where(:not(.btn):not(.brand):not(:has(.card)):not(:has(iam-card))),
       display: none;
     }
 
-    [class*="fa-"]{
+    [class*='fa-'] {
       margin: 0;
       display: inline;
     }
@@ -107,15 +103,13 @@ a:where(:not(.btn):not(.brand):not(:has(.card)):not(:has(iam-card))),
     text-underline-offset: 0.2em;
     text-decoration-thickness: 2px;
     font-size: inherit;
-    
-    &:is(:hover, :focus, .hover, :focus-within) {
 
+    &:is(:hover, :focus, .hover, :focus-within) {
       color: var(--colour-hover);
       text-decoration: none;
-    }   
+    }
 
     &:is(:active, .active) {
-
       color: var(--colour-active);
       text-decoration: none;
     }
@@ -123,26 +117,24 @@ a:where(:not(.btn):not(.brand):not(:has(.card)):not(:has(iam-card))),
 }
 
 // #region Support card component
-:is(a,button,label):has(.card, iam-card){
-
+:is(a, button, label):has(.card, iam-card) {
   &:before {
     display: none;
   }
   border: none;
   background: none;
-  padding:0;
+  padding: 0;
   display: flex;
   margin-bottom: 1.5rem;
 
-  &:not([class*="col"]){
+  &:not([class*='col']) {
     margin: 0 0 rem(24) 0;
   }
 
-  outline: none!important;
+  outline: none !important;
   text-decoration: none;
 
-  &:not(.d-inline-block):not([class*="col"]){
-      
+  &:not(.d-inline-block):not([class*='col']) {
     width: 100%;
   }
 

package/assets/sass/elements/lists.scss

@@ -1,4 +1,4 @@
-@use "../_func.scss" as *;
+@use '../_func.scss' as *;
 
 ol,
 ul {
@@ -24,12 +24,10 @@ dt {
 }
 
 dd {
-  margin-bottom: .5rem;
+  margin-bottom: 0.5rem;
   margin-left: 0; // 1
 }
 
-
-
 .list-unstyled {
   @include list-unstyled();
 }
@@ -46,12 +44,11 @@ dd {
   }
 }
 
-@include is('ol, ul','','li'){
+@include is('ol, ul', '', 'li') {
   max-width: $content-max-width;
 }
 
 .tick-list {
-
   padding-left: 0;
 
   li {
@@ -59,10 +56,9 @@ dd {
     list-style: none;
     padding-bottom: 1rem;
     padding-left: 2.25rem;
-    
+
     &:before {
-      
-      content: "\f00c";
+      content: '\f00c';
       position: absolute;
       top: 0;
       left: 0;
@@ -70,29 +66,25 @@ dd {
       height: 1.25em;
       font-size: 1.25em;
       line-height: 1;
-      
+
       color: var(--colour-complete);
-      font-family: "Font Awesome 6 Pro";
+      font-family: 'Font Awesome 6 Pro';
       font-size: 400;
-      
     }
 
     &.tick--warning:before {
-
-      content: "\f071";
+      content: '\f071';
       font-weight: 300;
       color: var(--colour-warning);
     }
 
     &.tick--danger:before {
-
-      content: "\f06a";
+      content: '\f06a';
       font-weight: 300;
       color: var(--colour-danger);
     }
 
     &.tick--incomplete:before {
-
       background: var(--colour-admin);
       mask-image: none;
       -webkit-mask-image: none;
@@ -100,7 +92,7 @@ dd {
       transform: scale(0.8);
     }
 
-    &[class*="bg-"] {
+    &[class*='bg-'] {
       padding: 1rem;
       padding-left: 4rem;
       margin-bottom: 1rem;
@@ -109,7 +101,6 @@ dd {
 
       &:before,
       &:after {
-      
         top: 50%;
         left: 1rem;
         width: 2rem;
@@ -118,8 +109,7 @@ dd {
       }
 
       &:after {
-      
-        content: "";
+        content: '';
         position: absolute;
         z-index: -1;
         background-color: white;
@@ -127,14 +117,11 @@ dd {
         transform-origin: 50% 50%;
         transform: scale(0.9);
       }
-
     }
   }
 }
 
-
 .breadcrumb {
-
   font-size: rem(14);
   padding-left: 0;
   list-style: none;
@@ -143,7 +130,7 @@ dd {
     display: inline-block;
 
     &:not(:first-child):before {
-      content: "\00A0/\00A0";
+      content: '\00A0/\00A0';
       font-weight: bold;
       color: var(--colour-link);
     }
@@ -156,9 +143,8 @@ dd {
 }
 
 .orderable-list {
-
   margin-left: 3.5rem;
-  counter-reset: countItem; 
+  counter-reset: countItem;
   padding-left: 0;
 
   li {
@@ -173,10 +159,14 @@ dd {
   }
 
   li:before {
-    content: "";
+    content: '';
     --gradient-direction: 180deg;
     background-color: var(--colour-info);
-    background-image: linear-gradient(var(--gradient-direction), var(--colour-secondary) 0, transparent 100%) !important;
+    background-image: linear-gradient(
+      var(--gradient-direction),
+      var(--colour-secondary) 0,
+      transparent 100%
+    ) !important;
     height: 100%;
     width: 2.5rem;
     display: inline-block;
@@ -218,12 +208,11 @@ dd {
 }
 
 // #region Step list
-*:has(> .list--steps){
+*:has(> .list--steps) {
   container-type: inline-size;
 }
 
 .list--steps {
-
   display: flex;
   justify-content: center;
   list-style: none;
@@ -244,7 +233,6 @@ dd {
     overflow: hidden;
     text-indent: -300px;
 
-
     &:before {
       counter-increment: pages;
       content: counter(pages);
@@ -257,12 +245,11 @@ dd {
       font-size: rem(18);
       line-height: rem(24);
       text-align: center;
-      font-weight: bold;;
+      font-weight: bold;
       border: 1px solid currentColor;
       border-radius: 1rem;
       text-indent: 0;
     }
-
   }
 
   li.step--current:before {
@@ -275,13 +262,12 @@ dd {
     border-color: var(--colour-success);
 
     @include dark-mode {
-      
-    background-color: var(--colour-complete);
-    border-color: var(--colour-complete);
+      background-color: var(--colour-complete);
+      border-color: var(--colour-complete);
     }
     //color: var(--colour-white);
-  } 
-  
+  }
+
   &::after {
     content: attr(data-mobile-text);
     position: absolute;
@@ -295,8 +281,7 @@ dd {
     font-weight: bold;
   }
 
-  @include container-up(sm){
-
+  @include container-up(sm) {
     padding: 0;
 
     margin-bottom: rem(24);
@@ -312,11 +297,11 @@ dd {
       overflow: visible;
 
       &:not(:last-child):after {
-        content: "";
+        content: '';
         position: absolute;
         top: rem(12);
         left: calc(50% + 2rem);
-        
+
         width: calc(100% - 2.5rem);
         height: 2px;
         font-size: rem(18);
@@ -325,12 +310,10 @@ dd {
     }
   }
 
-  
-  @include container-up(md){
-
+  @include container-up(md) {
     li {
       max-width: 20%;
     }
   }
 }
-// #endregion
+// #endregion

package/assets/sass/elements/media.scss

@@ -1,5 +1,4 @@
-@use "../_func" as *;
-
+@use '../_func' as *;
 
 figure {
   margin: 0 0 1rem;
@@ -10,8 +9,6 @@ svg {
   vertical-align: middle;
 }
 
-
-
 img {
   max-width: 100%;
 }