@iamproperty/components 7.0.0 → 7.1.0--beta2

package/assets/sass/components/slider.scss

@@ -1,11 +1,10 @@
-@use "../_func" as *;
+@use '../_func' as *;
 
 .row {
   align-items: center;
 }
 
 :is(.min, .max) {
-
   max-width: fit-content;
   line-height: 2rem;
 }
@@ -21,71 +20,76 @@
 }
 
 // Track
-input[type="range"]::-webkit-slider-runnable-track {
-
-  background: linear-gradient(to right, var(--track-colour), var(--track-colour) var(--start-percent, 0%), var(--thumb-colour) var(--start-percent, 0%), var(--thumb-colour) var(--percent, 0%), var(--track-colour) var(--percent, 0%));
+input[type='range']::-webkit-slider-runnable-track {
+  background: linear-gradient(
+    to right,
+    var(--track-colour),
+    var(--track-colour) var(--start-percent, 0%),
+    var(--thumb-colour) var(--start-percent, 0%),
+    var(--thumb-colour) var(--percent, 0%),
+    var(--track-colour) var(--percent, 0%)
+  );
 }
 
-input[type="range"]::-moz-range-track {
-  
-  background: linear-gradient(to right, var(--track-colour), var(--track-colour) var(--start-percent, 0%), var(--thumb-colour) var(--start-percent, 0%), var(--thumb-colour) var(--percent, 0%), var(--track-colour) var(--percent, 0%));
+input[type='range']::-moz-range-track {
+  background: linear-gradient(
+    to right,
+    var(--track-colour),
+    var(--track-colour) var(--start-percent, 0%),
+    var(--thumb-colour) var(--start-percent, 0%),
+    var(--thumb-colour) var(--percent, 0%),
+    var(--track-colour) var(--percent, 0%)
+  );
 }
 
-
 // Two input fields
-input[type="range"] + input[type="range"] {
+input[type='range'] + input[type='range'] {
   position: absolute;
   top: 0;
   left: 50%;
   width: 50%;
 }
 
-input[type="range"] + input[type="range"]::-webkit-slider-runnable-track {
-  
+input[type='range'] + input[type='range']::-webkit-slider-runnable-track {
   background: transparent;
   pointer-events: none;
   width: 200%;
   margin-left: -100%;
 }
 
-@supports (-moz-appearance:none) {
-  input[type="range"] + input[type="range"] {
+@supports (-moz-appearance: none) {
+  input[type='range'] + input[type='range'] {
     left: 0;
     width: 100%;
 
-  
-  pointer-events: none;
+    pointer-events: none;
+  }
 }
 
-} 
-
-input[type="range"] + input[type="range"]::-moz-range-track {
+input[type='range'] + input[type='range']::-moz-range-track {
   background: transparent;
   pointer-events: none;
 }
 
-
 .input__wrapper {
   display: flex;
-  
+
   justify-content: flex-end;
   --max-width: #{rem(100)};
   --padding-top: 0.75rem;
 
-
   > span {
     display: none;
   }
 
-  &[data-elements="2"]{
-
+  &[data-elements='2'] {
     justify-content: space-between;
     --max-width: calc(50% - #{rem(48)});
     --padding-top: 2rem;
     position: relative;
 
     &:before {
-      content: "";
+      content: '';
       position: absolute;
       width: rem(64);
       height: 2px;
@@ -99,23 +103,22 @@ input[type="range"] + input[type="range"]::-moz-range-track {
       position: absolute;
       top: 0.5rem;
       left: 1rem;
-      color: #9D9D9D;
+      color: #9d9d9d;
       font-size: 1rem;
     }
 
     span + span {
       left: calc(50% + #{rem(64)});
     }
-  
   }
 }
 
-::slotted(input){
-  margin-top: 0!important;
-  padding-top: var(--padding-top)!important;
-  max-width: var(--max-width)!important;
-  -webkit-appearance: none!important;
-  appearance: none!important;
-  min-height: auto!important;
-  max-height: none!important;
+::slotted(input) {
+  margin-top: 0 !important;
+  padding-top: var(--padding-top) !important;
+  max-width: var(--max-width) !important;
+  -webkit-appearance: none !important;
+  appearance: none !important;
+  min-height: auto !important;
+  max-height: none !important;
 }

package/assets/sass/components/snapshot.scss

@@ -1,15 +1,11 @@
-@use "../_func" as *;
+@use '../_func' as *;
 
 .snapshot {
-
   > .row {
-
     padding-bottom: 1rem;
-
   }
 
   > .row > .col {
-
     margin-bottom: 1rem;
     min-width: rem(150);
     position: relative;
@@ -28,7 +24,6 @@
   }
 
   &__item {
-
     position: relative;
     display: flex;
     flex-direction: column;
@@ -36,12 +31,11 @@
     height: 100%;
     padding: 1rem;
 
-    &:not([class*="bg-"]){
+    &:not([class*='bg-']) {
       border: 1px solid var(--colour-border);
     }
   }
 
-
   a {
     position: absolute;
     top: 0;
@@ -60,7 +54,7 @@
     padding-bottom: 1rem;
 
     &:after {
-      content: ":";
+      content: ':';
     }
   }
 
@@ -68,4 +62,4 @@
     text-decoration: none;
     margin-bottom: 0;
   }
-}
+}

package/assets/sass/components/stepper.scss

@@ -1,4 +1,4 @@
-@use "../_func" as *;
+@use '../_func' as *;
 
 .stepper {
   background: #f0f0f0;
@@ -9,7 +9,6 @@
   overflow: hidden;
 
   @include media-breakpoint-up(md) {
-      
     flex-wrap: nowrap;
     overflow-x: auto;
   }
@@ -23,7 +22,6 @@
     overflow: auto;
 
     @include media-breakpoint-up(sm) {
-
       display: flex;
       flex-grow: 1;
       padding-right: calc(2rem + 1px);
@@ -44,18 +42,18 @@
       padding: 1px;
 
       @include media-breakpoint-up(sm) {
-        &:first-child a{
+        &:first-child a {
           padding-left: 1rem;
           clip-path: polygon(0 0, calc(100% - 2rem) 0, 100% 50%, calc(100% - 2rem) 100%, 0 100%);
         }
       }
 
       @include media-breakpoint-up(md) {
-        &:first-child a{
+        &:first-child a {
           padding-left: 2rem;
         }
       }
-      
+
       a {
         display: block;
         padding: 1rem;
@@ -67,7 +65,6 @@
         color: var(--colour-primary);
 
         @include media-breakpoint-up(sm) {
-
           margin-right: -2rem;
           padding: 2rem 3rem 2rem 3rem;
           clip-path: polygon(0 0, calc(100% - 2rem) 0, 100% 50%, calc(100% - 2rem) 100%, 0 100%, 2rem 50%);
@@ -77,20 +74,20 @@
           justify-content: center;
           align-items: center;
         }
-        
+
         span {
           position: relative;
           display: inline;
           padding-left: 2.25rem;
 
           &:before {
-            counter-increment: section; 
+            counter-increment: section;
             content: counter(section);
             display: block;
             position: absolute;
             top: 50%;
             left: 0;
-            transform: translate(0,-50%);
+            transform: translate(0, -50%);
             margin-right: 0.5rem;
             font-size: 0.75em;
             border-radius: 50%;
@@ -105,21 +102,21 @@
 
         &.bg-warning span:before,
         &.bg-danger span:before {
-          content: "!";
+          content: '!';
         }
 
         &.bg-success span:before {
-          content: "\2713";
+          content: '\2713';
           text-indent: -0.1em;
         }
 
-        &[aria-current="step"] {
+        &[aria-current='step'] {
           background: var(--colour-primary);
           color: white;
           pointer-events: none;
         }
 
-        &:not([href]){
+        &:not([href]) {
           pointer-events: none;
         }
 
@@ -127,17 +124,13 @@
           opacity: 0.6;
         }
         &[href]:active {
-
           opacity: 0.8;
         }
-
       }
     }
   }
 
-
   > span {
-
     width: 100%;
     display: flex;
     padding: 1rem;
@@ -150,16 +143,15 @@
     &.stepper__end {
       display: none;
     }
-      
+
     @include media-breakpoint-up(md) {
-        
       width: max-content;
       padding: 2rem 2rem;
-      
+
       &.stepper__end {
         padding-left: 3.5rem;
         display: flex;
       }
     }
   }
-}
+}