@iamproperty/components 7.7.1--beta5 → 7.7.1--beta6

package/assets/sass/components/multi-step-modal.component.scss

@@ -1,255 +1,255 @@
-@use '../_func' as *;
-@use '../elements/dialog' as *;
-
-@use '../elements/buttons' as *;
-
-
-
-*,
-*:before,
-*:after {
-  box-sizing: border-box;
-}
-
-// #region Multi
-
-dialog[open] {
-  --dialog-padding: 1.5rem;
-  box-sizing: border-box;
-  padding-top: calc(var(--dialog-padding) * 4);
-  //display: block;
-  //position: relative;
-  //margin-right: 0 !important;
-  //min-height: 100%;
-  padding-left: var(--dialog-padding);
-
-  @media screen and (min-width: 62em) {
-    padding-top: var(--dialog-padding);
-    padding-left: calc(var(--dialog-padding) + 17.625rem) !important;
-    //display: flex;
-    flex-direction: column;
-  }
-}
-
-
-::slotted(dialog) {
-  display: contents!important;
-}
-
-::slotted(button) {
-  margin: 0!important;
-}
-
-
-
-// #region Multi step modal
-
-  dialog[open] {
-    padding: 6rem 1.5rem 0 1.5rem;
-
-    @media screen and (min-width: 36em) {
-      min-width: 28.25rem;
-      width: 28.25rem;
-      max-width: 28.25rem;
-    }
-
-    @media screen and (min-width: 62em) {
-      min-width: 57.75rem;
-      width: 57.75rem;
-      max-width: 57.75rem;
-    padding: 0;
-
-      @media (min-height: 31.25rem) {
-        height: 29.875rem;
-        max-height: 29.875rem;
-      }
-    }
-
-    > button:first-child {
-
-      position: absolute;
-      top: 5rem;
-      right: 6px;
-      z-index: var(--index-floating);
-      margin: 0;
-
-      &:not(:hover,:focus,:active){
-        background-color: Canvas;
-      }
-
-      @media screen and (min-width: 62em) {
-
-        top: calc(var(--dialog-padding) - 0.75rem);
-        right: calc(var(--dialog-padding) - 0.75rem);
-      }
-      
-    }
-  
-  }
-
-  // #endregion
-
-  // #region mobile fullwidth view For multi step modal
-  @media screen and (max-width: 36em) {
-    dialog[open] {
-      min-width: 100%;
-      min-height: 100%;
-      border-radius: 0;
-      overflow-y: auto;
-
-      iam-multi-step {
-        padding-inline: 0 !important;
-      }
-
-      form {
-        height: calc(100vh - 6rem);
-        padding-inline: var(--dialog-padding) !important;
-      }
-
-      .btn--wrapper {
-        padding-top: 4rem; /* 64 */
-      }
-    }
-
-    dialog[open] {
-      .mh-lg {
-        max-height: none !important;
-        overflow: visible;
-      }
-
-      &:before,
-      *:first-child {
-        margin-top: auto !important;
-      }
-
-      *:last-child {
-        margin-bottom: auto !important;
-      }
-    }
-  }
-  // #endregion
-
-
-
-
-
-
-
-
-
-
-
-// #region steps
-.steps {
-  width: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  padding: var(--dialog-padding);
-  counter-reset: section;
-  display: flex;
-  justify-content: space-between;
-  background-color: var(--colour-primary);
-
-  &:before {
-    content: '';
-    position: absolute;
-    top: calc(50% - 1px);
-    left: var(--dialog-padding);
-    z-index: 2;
-    width: calc(100% - var(--dialog-padding) - var(--dialog-padding));
-    height: 2px;
-    background: currentColor;
-    z-index: 1;
-    background: linear-gradient(
-      90deg,
-      var(--colour-success) 0%,
-      var(--colour-success) var(--progress, 0%),
-      rgba(255, 255, 255, 0.5) var(--progress, 0%),
-      rgba(255, 255, 255, 0.5) 100%
-    );
-  }
-
-  button {
-    position: relative;
-    background: transparent;
-    border: none;
-    color: rgba($color: #ffffff, $alpha: 0.5);
-    height: 1.5rem;
-    line-height: 1.5rem;
-    width: 1.5rem;
-    text-indent: 300%;
-    overflow: hidden;
-    z-index: 2;
-    background-color: var(--colour-primary);
-    outline: 0.5rem solid var(--colour-primary);
-    cursor: pointer;
-
-    &:before {
-      position: absolute;
-      top: 0;
-      left: 0;
-      counter-increment: section;
-      content: counter(section);
-
-      border: 1px solid currentColor;
-      height: 1.5rem;
-      line-height: 1.5rem;
-      width: 1.5rem;
-      text-align: center;
-      display: inline-block;
-      text-indent: 0;
-      border-radius: 50%;
-    }
-
-    &:not(.active):not(.valid) {
-      pointer-events: none;
-
-      &:before {
-        opacity: 0.5;
-      }
-    }
-
-    &.active {
-      color: var(--colour-white);
-    }
-    &.valid {
-      color: var(--colour-success);
-    }
-  }
-
-  @container style(--theme: dark) {
-    button {
-      color: rgba($color: #000000, $alpha: 0.5);
-
-      &.active {
-        color: black;
-      }
-      &.valid {
-        color: var(--colour-complete);
-      }
-    }
-  }
-
-  @media screen and (min-width: 62em) {
-    width: 17.625rem;
-    height: 100%;
-    flex-direction: column;
-    justify-content: center;
-
-    &:before {
-      display: none;
-    }
-
-    button {
-      margin-block: 0.5rem;
-      width: 100%;
-      text-indent: 0;
-      text-align: left;
-      padding-left: 2rem;
-      font-size: 1.125rem; /* 18/16 */
-      outline-width: 1px;
-    }
-  }
-}
-// #endregion
+@use '../_func' as *;
+@use '../elements/dialog' as *;
+
+@use '../elements/buttons' as *;
+
+
+
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
+/* #region Multi */
+
+dialog[open] {
+  --dialog-padding: 1.5rem;
+  box-sizing: border-box;
+  padding-top: calc(var(--dialog-padding) * 4);
+  /* display: block; */
+  /* position: relative; */
+  /* margin-right: 0 !important; */
+  /* min-height: 100%; */
+  padding-left: var(--dialog-padding);
+
+  @media screen and (min-width: 62em) {
+    padding-top: var(--dialog-padding);
+    padding-left: calc(var(--dialog-padding) + 17.625rem) !important;
+    /* display: flex; */
+    flex-direction: column;
+  }
+}
+
+
+::slotted(dialog) {
+  display: contents!important;
+}
+
+::slotted(button) {
+  margin: 0!important;
+}
+
+
+
+/* #region Multi step modal */
+
+  dialog[open] {
+    padding: 6rem 1.5rem 0 1.5rem;
+
+    @media screen and (min-width: 36em) {
+      min-width: 28.25rem;
+      width: 28.25rem;
+      max-width: 28.25rem;
+    }
+
+    @media screen and (min-width: 62em) {
+      min-width: 57.75rem;
+      width: 57.75rem;
+      max-width: 57.75rem;
+    padding: 0;
+
+      @media (min-height: 31.25rem) {
+        height: 29.875rem;
+        max-height: 29.875rem;
+      }
+    }
+
+    > button:first-child {
+
+      position: absolute;
+      top: 5rem;
+      right: 6px;
+      z-index: var(--index-floating);
+      margin: 0;
+
+      &:not(:hover,:focus,:active){
+        background-color: Canvas;
+      }
+
+      @media screen and (min-width: 62em) {
+
+        top: calc(var(--dialog-padding) - 0.75rem);
+        right: calc(var(--dialog-padding) - 0.75rem);
+      }
+      
+    }
+  
+  }
+
+  /* #endregion */
+
+  /* #region mobile fullwidth view For multi step modal */
+  @media screen and (max-width: 36em) {
+    dialog[open] {
+      min-width: 100%;
+      min-height: 100%;
+      border-radius: 0;
+      overflow-y: auto;
+
+      iam-multi-step {
+        padding-inline: 0 !important;
+      }
+
+      form {
+        height: calc(100vh - 6rem);
+        padding-inline: var(--dialog-padding) !important;
+      }
+
+      .btn--wrapper {
+        padding-top: 4rem; /* 64 */
+      }
+    }
+
+    dialog[open] {
+      .mh-lg {
+        max-height: none !important;
+        overflow: visible;
+      }
+
+      &:before,
+      *:first-child {
+        margin-top: auto !important;
+      }
+
+      *:last-child {
+        margin-bottom: auto !important;
+      }
+    }
+  }
+  /* #endregion */
+
+
+
+
+
+
+
+
+
+
+
+/* #region steps */
+.steps {
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: var(--dialog-padding);
+  counter-reset: section;
+  display: flex;
+  justify-content: space-between;
+  background-color: var(--colour-primary);
+
+  &:before {
+    content: '';
+    position: absolute;
+    top: calc(50% - 1px);
+    left: var(--dialog-padding);
+    z-index: 2;
+    width: calc(100% - var(--dialog-padding) - var(--dialog-padding));
+    height: 2px;
+    background: currentColor;
+    z-index: 1;
+    background: linear-gradient(
+      90deg,
+      var(--colour-success) 0%,
+      var(--colour-success) var(--progress, 0%),
+      rgba(255, 255, 255, 0.5) var(--progress, 0%),
+      rgba(255, 255, 255, 0.5) 100%
+    );
+  }
+
+  button {
+    position: relative;
+    background: transparent;
+    border: none;
+    color: rgba($color: #ffffff, $alpha: 0.5);
+    height: 1.5rem;
+    line-height: 1.5rem;
+    width: 1.5rem;
+    text-indent: 300%;
+    overflow: hidden;
+    z-index: 2;
+    background-color: var(--colour-primary);
+    outline: 0.5rem solid var(--colour-primary);
+    cursor: pointer;
+
+    &:before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      counter-increment: section;
+      content: counter(section);
+
+      border: 1px solid currentColor;
+      height: 1.5rem;
+      line-height: 1.5rem;
+      width: 1.5rem;
+      text-align: center;
+      display: inline-block;
+      text-indent: 0;
+      border-radius: 50%;
+    }
+
+    &:not(.active):not(.valid) {
+      pointer-events: none;
+
+      &:before {
+        opacity: 0.5;
+      }
+    }
+
+    &.active {
+      color: var(--colour-white);
+    }
+    &.valid {
+      color: var(--colour-success);
+    }
+  }
+
+  @container style(--theme: dark) {
+    button {
+      color: rgba($color: #000000, $alpha: 0.5);
+
+      &.active {
+        color: black;
+      }
+      &.valid {
+        color: var(--colour-complete);
+      }
+    }
+  }
+
+  @media screen and (min-width: 62em) {
+    width: 17.625rem;
+    height: 100%;
+    flex-direction: column;
+    justify-content: center;
+
+    &:before {
+      display: none;
+    }
+
+    button {
+      margin-block: 0.5rem;
+      width: 100%;
+      text-indent: 0;
+      text-align: left;
+      padding-left: 2rem;
+      font-size: 1.125rem; /* 18/16 */
+      outline-width: 1px;
+    }
+  }
+}
+/* #endregion */

package/assets/sass/components/multi-step-modal.global.scss

@@ -1,92 +1,92 @@
-@use '../_func.scss' as *;
-
-// #region Multi step modal
-@layer components {
-  iam-multi-step-modal {
-    
-
-    :is(.h1, .h2, .h3, .h4, .h5, .h6) {
-      padding-right: calc(var(--dialog-padding) * 3);
-      padding-bottom: var(--dialog-padding);
-    }
-
-    form {
-      overflow: auto;
-      padding-bottom: var(--dialog-padding);
-        padding-top: var(--dialog-padding);
-      max-height: calc(min(90vh, 47rem) - 6rem);
-    }
-
-    fieldset {
-      > :last-child {
-        margin-bottom: var(--dialog-padding) !important;
-      }
-
-      > p:last-child {
-        padding-bottom: 0 !important;
-        margin-bottom: var(--dialog-padding) !important;
-      }
-    }
-
-    fieldset:not(.active) {
-      display: none;
-    }
-
-    @media screen and (min-width: 36em) {
-
-
-      .btn--wrapper {
-        margin-top: auto;
-        text-align: right;
-      }
-
-      form {
-        height: calc(100vh - 6rem);
-        padding-left: 0 !important;
-        padding-right: var(--dialog-padding) !important;
-      }
-    }
-
-    @media screen and (min-width: 62em) {
-
-      form {
-        display: flex;
-        flex-direction: column;
-      }
-
-      fieldset {
-
-        &.active {
-          
-          display: flex;
-        }
-        flex-direction: column;
-        flex-grow: 1;
-        position: relative;
-
-        overflow: auto;
-        margin-bottom: calc(var(--dialog-padding) * -1);
-        padding-right: calc(var(--dialog-padding) - 10px);
-        margin-right: calc((var(--dialog-padding) * -1) + 10px);
-
-        max-height: 23.125rem; /* 370 */
-
-        &::before {
-          content: '';
-          top: 100%;
-          bottom: 0;
-          left: 0;
-          right: 0;
-          height: var(--dialog-padding);
-          min-height: var(--dialog-padding);
-          position: sticky;
-          display: block;
-          background: linear-gradient(180deg, transparent 0%, var(--colour-canvas-2) 100%);
-          z-index: 2;
-          margin-bottom: calc(var(--dialog-padding) * -1);
-        }
-      }
-    }
-  }
-}
-  // #endregion
+@use '../_func.scss' as *;
+
+/* #region Multi step modal */
+@layer components {
+  iam-multi-step-modal {
+    
+
+    :is(.h1, .h2, .h3, .h4, .h5, .h6) {
+      padding-right: calc(var(--dialog-padding) * 3);
+      padding-bottom: var(--dialog-padding);
+    }
+
+    form {
+      overflow: auto;
+      padding-bottom: var(--dialog-padding);
+        padding-top: var(--dialog-padding);
+      max-height: calc(min(90vh, 47rem) - 6rem);
+    }
+
+    fieldset {
+      > :last-child {
+        margin-bottom: var(--dialog-padding) !important;
+      }
+
+      > p:last-child {
+        padding-bottom: 0 !important;
+        margin-bottom: var(--dialog-padding) !important;
+      }
+    }
+
+    fieldset:not(.active) {
+      display: none;
+    }
+
+    @media screen and (min-width: 36em) {
+
+
+      .btn--wrapper {
+        margin-top: auto;
+        text-align: right;
+      }
+
+      form {
+        height: calc(100vh - 6rem);
+        padding-left: 0 !important;
+        padding-right: var(--dialog-padding) !important;
+      }
+    }
+
+    @media screen and (min-width: 62em) {
+
+      form {
+        display: flex;
+        flex-direction: column;
+      }
+
+      fieldset {
+
+        &.active {
+          
+          display: flex;
+        }
+        flex-direction: column;
+        flex-grow: 1;
+        position: relative;
+
+        overflow: auto;
+        margin-bottom: calc(var(--dialog-padding) * -1);
+        padding-right: calc(var(--dialog-padding) - 10px);
+        margin-right: calc((var(--dialog-padding) * -1) + 10px);
+
+        max-height: 23.125rem; /* 370 */
+
+        &::before {
+          content: '';
+          top: 100%;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          height: var(--dialog-padding);
+          min-height: var(--dialog-padding);
+          position: sticky;
+          display: block;
+          background: linear-gradient(180deg, transparent 0%, var(--colour-canvas-2) 100%);
+          z-index: 2;
+          margin-bottom: calc(var(--dialog-padding) * -1);
+        }
+      }
+    }
+  }
+}
+  /* #endregion */