@iamproperty/components 7.0.0 → 7.1.0--beta2

package/assets/sass/elements/container.scss

@@ -1,22 +1,20 @@
-@use "sass:math";
-@use "../_func.scss" as *;
+@use 'sass:math';
+@use '../_func.scss' as *;
 
 // #region container
 .container {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  padding: var(--container-padding);
 
-  
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-    padding: var(--container-padding);
-  
-    grid-column: container!important;
+  grid-column: container !important;
   width: 100%;
 
   &:not(.container-fluid) {
     max-width: var(--container-max-width);
   }
-  
+
   .container:not(.container-xs-breakout) {
     padding-left: 0;
     padding-right: 0;
@@ -24,27 +22,25 @@
     padding-top: 0;
   }
 
-  &[class*="bg-"] {
+  &[class*='bg-'] {
     padding-top: #{rem(48)};
     padding-bottom: #{rem(32)};
   }
 
-  &[class*="bg-"] + .container:not([class*="bg-"]) {
-
+  &[class*='bg-'] + .container:not([class*='bg-']) {
     padding-top: #{rem(32)};
   }
 
-
   // Fix the clearing for containers
   &:before {
     display: table;
     clear: both;
-    content: "";
+    content: '';
   }
   &:after {
     display: table;
     clear: both;
-    content: "";
+    content: '';
   }
 
   &.container-xs-breakout {
@@ -62,25 +58,22 @@
 
 :host .container {
   display: block;
-    margin-left: auto;
-    margin-right: auto;
-    padding: var(--container-padding);
-    width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  padding: var(--container-padding);
+  width: 100%;
 }
 
-
 // replicate container padding-bottom
 main > .row {
-
   padding-bottom: #{rem(16)};
 
-  &[class*="bg-"] {
+  &[class*='bg-'] {
     padding-top: #{rem(48)};
     padding-bottom: #{rem(32)};
   }
 
-  &[class*="bg-"] + :is(.row, .container):not([class*="bg-"]) {
-
+  &[class*='bg-'] + :is(.row, .container):not([class*='bg-']) {
     padding-top: #{rem(32)};
   }
 }
@@ -88,30 +81,25 @@ main > .row {
 
 // #region Circles
 .container {
-
-
-  &:has(.circle){
-      
+  &:has(.circle) {
     position: relative;
     z-index: 1;
   }
 
   > .circle {
-
     position: absolute;
     z-index: var(--index-below);
     border-width: 3px;
   }
 
   // Default pattern
-  &:not([class*="circle-pattern-"]) > .circle {
+  &:not([class*='circle-pattern-']) > .circle {
     font-size: rem(300);
     top: rem(-75);
     left: rem(-200);
   }
 
-  &:not([class*="circle-pattern-"]) > .circle ~ .circle {
-
+  &:not([class*='circle-pattern-']) > .circle ~ .circle {
     font-size: rem(350);
     top: auto;
     left: auto;
@@ -120,14 +108,13 @@ main > .row {
   }
 
   @include media-breakpoint-up(sm) {
-    &:not([class*="circle-pattern-"]) > .circle {
+    &:not([class*='circle-pattern-']) > .circle {
       font-size: rem(450);
       top: rem(-50);
       left: rem(-175);
     }
-  
-    &:not([class*="circle-pattern-"]) > .circle ~ .circle {
-  
+
+    &:not([class*='circle-pattern-']) > .circle ~ .circle {
       font-size: rem(500);
       right: rem(-150);
       bottom: rem(-150);
@@ -170,99 +157,3 @@ main > .row {
   }
 }
 // #endregion
-
-
-// #region Curve
-$default-curve-width: 576!default;
-@mixin curve($start: 10, $point-1: 20, $point-2: 95, $end: 70, $padding-top:16)
-{
-  // Constant rules
-  position: relative;
-  
-  // Let vars
-  $height: 100;
-  $width: $default-curve-width;
-  $middle-x: math.div($width,2);
-  $edge: 2;
-  $modify: 1;
-
-  // Rules that will change
-  width: #{$width}px;
-  padding-top: calc(#{($height*$modify)}px + #{$padding-top}px)!important;
-  margin-top: -#{($height*$modify)}px;
-  margin-left: calc(-#{math.div($width,2)}px + 50vw);
-  clip-path: path('#{'M0,'+($start*$modify)+' L'+($edge)+','+($start*$modify)+' C'+$middle-x+','+($point-1*$modify)+' '+$middle-x+','+($point-2*$modify)+' '+($width - $edge)+','+($end*$modify)+' L'+($width + $edge)+','+($end * $modify)+' L'+$width+',5000 L0,5000 Z'}');
-
-  padding-inline: calc((#{math.div($width,2)}px - 50vw) + var(--container-padding-x));
-
-  @include media-breakpoint-up(sm) {
-
-    // Tablet vars
-    $width: 992;
-    $middle-x: math.div($width,2);
-    $modify: 1.5;
-
-    // Tablet CSS rules
-    width: #{$width}px;
-    padding-top: calc(#{($height*$modify)}px + #{$padding-top}px)!important;
-    margin-top: -#{($height*$modify)}px;
-    margin-left: calc(-#{math.div($width,2)}px + 50vw);
-    clip-path: path('#{'M0,'+($start*$modify)+' L'+($edge)+','+($start*$modify)+' C'+$middle-x+','+($point-1*$modify)+' '+$middle-x+','+($point-2*$modify)+' '+($width - $edge)+','+($end*$modify)+' L'+($width + $edge)+','+($end*$modify)+' L'+$width+',5000 L0,5000 Z'}');
-  }
-
-  @include media-breakpoint-up(md) {
-
-    // Desktop vars
-    $width: 1440;
-    $middle-x: math.div($width,2);
-    $modify: 2;
-
-    // Desktop CSS rules
-    width: #{$width}px;
-    max-width: #{$width}px!important;
-    padding-top: calc(#{($height*$modify)}px + #{$padding-top}px)!important;
-    margin-top: -#{($height*$modify)}px;
-    margin-left: calc(-#{math.div($width,2)}px + 50vw);
-    clip-path: path('#{'M0,'+($start*$modify)+' L'+($edge)+','+($start*$modify)+' C'+$middle-x+','+($point-1*$modify)+' '+$middle-x+','+($point-2*$modify)+' '+($width - $edge)+','+($end*$modify)+' L'+($width + $edge)+','+($end*$modify)+' L'+$width+',5000 L0,5000 Z'}');
-  }
-}
-
-.container--curve-below {
-
-  padding-bottom: calc(100px + #{rem(16)});
-
-  @include media-breakpoint-up(sm) {
-    padding-bottom: calc(150px + #{rem(16)});
-  }
-  @include media-breakpoint-up(md) {
-    padding-bottom: calc(200px + #{rem(16)});
-  }
-}
-
-.container--curve {
-
-  @include curve();
-}
-.container--curve--right {
-
-  @include curve(70, 95, 20, 10);
-}
-.container--curve--up {
-
-  @include curve(90,0,0,90,-16);
-}
-.container--curve--down {
-
-  @include curve(0,90,90,0,16);
-}
-
-[class*="container--curve"] {
-
-  position: relative;
-
-  @media (min-width: #{em($device-md-width)}) {
-    margin-left: auto;
-    padding-inline: var(--container-padding-x);
-  }
-}
-// #endregion

package/assets/sass/elements/details.scss

@@ -1,15 +1,11 @@
-
 details {
-
   display: block;
 
-  &:not([open]){
-      
+  &:not([open]) {
     padding-bottom: rem(32);
   }
 
   summary {
-
     font-size: rem(18);
     line-height: rem(21);
     font-weight: normal;
@@ -17,74 +13,65 @@ details {
     display: block;
 
     &:after {
-      content: "\f055";
+      content: '\f055';
       display: inline-block;
       margin-left: 0.5em;
       line-height: 1em;
       font-size: 1em;
-      font-family: "Font Awesome 6 Pro";
+      font-family: 'Font Awesome 6 Pro';
     }
   }
 
   &[open] summary {
-    
     margin-bottom: rem(16);
   }
-
 }
 
-
-
 iam-accordion details {
-
   --inline-padding: #{rem(2)};
   --border-radius: #{rem(8)} #{rem(8)} 0 0;
   --icon-top: #{rem(14)};
   --line-height: #{rem(24)};
 
-
-  *:not(iam-tabs) > &:not([open]){
-    
+  *:not(iam-tabs) > &:not([open]) {
     padding-bottom: rem(42);
   }
 
   @include media-breakpoint-up(sm) {
-
     --inline-padding: #{rem(30)};
     --icon-top: #{rem(24)};
     --line-height: #{rem(24)};
   }
 
   summary {
-
-  border-bottom: 1px solid var(--colour-border);
+    border-bottom: 1px solid var(--colour-border);
     padding-left: var(--inline-padding);
     padding-right: calc(var(--inline-padding) + #{rem(24)} + #{rem(24)});
-    padding-block: rem(14)!important;
+    padding-block: rem(14) !important;
     position: relative;
     color: $headings-color;
 
-    &:is(:hover,:focus-visible) {
+    &:is(:hover, :focus-visible) {
       background: var(--colour-light);
       border-radius: var(--border-radius);
     }
 
-
-    h3,.h3 {
-      all: unset!important;
+    h3,
+    .h3 {
+      all: unset !important;
     }
 
     &::after {
       display: none;
     }
 
-    *:is(h1,h2,h4,h5,h6,.h1,.h2,.h4,.h5,.h6,.label){
+    *:is(h1, h2, h4, h5, h6, .h1, .h2, .h4, .h5, .h6, .label) {
       max-width: 100%;
       padding: 0;
       margin: 0;
 
       &:after {
-        content: "\f055";
+        content: '\f055';
         position: absolute;
         font-size: rem(24);
         top: calc((#{var(--line-height)} / 2) - #{rem(12)} + #{rem(14)});
@@ -93,7 +80,7 @@ iam-accordion details {
         height: rem(24);
         line-height: rem(24);
         font-weight: 300;
-        font-family: "Font Awesome 6 Pro";
+        font-family: 'Font Awesome 6 Pro';
       }
     }
   }
@@ -102,34 +89,34 @@ iam-accordion details {
     margin-bottom: 2rem;
   }
 
-  &[open] summary :is(h1,h2,h4,h5,h6,.h1,.h2,.h4,.h5,.h6, .label) {
-
+  &[open] summary :is(h1, h2, h4, h5, h6, .h1, .h2, .h4, .h5, .h6, .label) {
     &:after {
-      content: "\f056";
+      content: '\f056';
       font-weight: 900;
     }
   }
 
-  summary:not(:has(h1,h2,h4,h5,h6,.h1,.h2,.h4,.h5,.h6,.label)) { // h3 purposelessly missed out
+  summary:not(:has(h1, h2, h4, h5, h6, .h1, .h2, .h4, .h5, .h6, .label)) {
+    // h3 purposelessly missed out
 
     font-family: $headings-font-family;
     font-style: $headings-font-style;
     color: $headings-color;
     clear: both;
     display: block;
-      
-    [class*="fa-"] {
+
+    [class*='fa-'] {
       margin-right: 0.5rem;
     }
 
     font-size: rem(18);
     line-height: var(--line-height);
-    padding-bottom: rem(map-get($heading-sizes,"h3_pb"));
+    padding-bottom: rem(map-get($heading-sizes, 'h3_pb'));
     font-weight: 700;
     max-width: 100%;
 
     &:after {
-      content: "\f055";
+      content: '\f055';
       display: block;
       position: absolute;
       font-size: rem(24);
@@ -140,36 +127,31 @@ iam-accordion details {
       margin: 0;
       line-height: rem(24);
       font-weight: 300;
-      font-family: "Font Awesome 6 Pro";
+      font-family: 'Font Awesome 6 Pro';
     }
 
     @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'));
       font-weight: 900;
     }
   }
 
-  &[open] summary:not(:has(h1,h2,h4,h5,h6,.h1,.h2,.h4,.h5,.h6)) {
-
+  &[open] summary:not(:has(h1, h2, h4, h5, h6, .h1, .h2, .h4, .h5, .h6)) {
     &:after {
-      content: "\f056";
+      content: '\f056';
       font-weight: 900;
     }
   }
 }
 
-
 dialog iam-accordion details {
-
   --inline-padding: var(--dialog-padding);
 
   margin-inline: calc(var(--dialog-padding) * -1);
   width: calc(100% + var(--dialog-padding) + var(--dialog-padding));
 
-
   &:has(summary:is(:hover, :focus-visible)),
   &[open] {
     background: var(--colour-light);
@@ -192,10 +174,9 @@ dialog iam-accordion details {
   }
 
   &[open] summary {
-
     margin-bottom: 1rem;
   }
- 
+
   summary {
     --inline-padding: 0;
   }
@@ -203,7 +184,6 @@ dialog iam-accordion details {
   padding-inline: var(--dialog-padding);
 
   &::before {
-    content: "";
-
+    content: '';
   }
-}
+}

package/assets/sass/elements/dialog.scss

@@ -1,5 +1,5 @@
-@use "sass:math";
-@use "../_func" as *;
+@use 'sass:math';
+@use '../_func' as *;
 
 // non-js fallback
 body:not(.js-enabled) dialog:not([open]):target {
@@ -14,7 +14,7 @@ dialog {
   --mh-padding-inline: var(--dialog-padding);
   color: inherit;
   width: fit-content;
-  height: fit-content;  
+  height: fit-content;
   border: none;
   overscroll-behavior: contain;
   background: var(--colour-canvas-2);
@@ -26,15 +26,13 @@ dialog {
 
 [popover]:popover-open,
 dialog[open] {
-
-  
   display: flex;
   flex-direction: column;
 
   > *:last-child {
     margin-bottom: 0;
   }
-  
+
   > :is(p):last-child {
     padding-bottom: 0;
   }