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

package/assets/sass/elements/modal.scss

@@ -1,415 +1,411 @@
-@use 'sass:math';
-@use '../_func' as *;
-
-
-
-
-
-@layer elements {
-  // #region modal styling
-
-  *:not(.dialog__wrapper) > dialog[open] { // change this selector to be a dialog without a popover attribute
-    
-
-    &:has(.mh-lg){
-      overflow-y: hidden!important;
-    }
-    width: 90vw;
-    max-width: 20.25rem; /* 324 */  // col-width*4
-
-    //height: 90vh;
-    max-height: min(90vh, 47rem);
-    overscroll-behavior: contain;
-
-    @media screen and (min-width: 36em) {
-      --dialog-padding: 2rem;
-      min-width: 20.9375rem; /* 335 */ 
-      width: fit-content;
-      max-width: 42.875rem; /* 686 */ 
-    }
-
-    @media screen and (min-width: 62em) {
-      min-width: 28.375rem; /* 454 */ 
-      width: fit-content;
-      max-width: 46rem; /* 736 */ 
-    }
-
-    // Close button
-    > form:first-child {
-      position: static;
-    }
-
-    > form:first-child button,
-    > button:first-child {
-      position: absolute;
-      top: var(--dialog-padding);
-      right: var(--dialog-padding);
-      z-index: var(--index-floating);
-
-      text-indent: 300%;
-      overflow: hidden;
-      border: none;
-      height: 1.25rem;
-      width: 1.25rem;
-      background: transparent;
-
-      &:after {
-        content: '';
-        top: 0;
-        left: 0;
-        position: absolute;
-        display: block;
-        height: 1.25rem;
-        width: 1.25rem;
-        z-index: var(--index-focus);
-        background: currentColor;
-        mask-image: var(--icon-close);
-        mask-size: 100%;
-        mask-repeat: no-repeat;
-        mask-position: 50% 50%;
-        -webkit-mask-image: var(--icon-close);
-        -webkit-mask-size: 100%;
-        -webkit-mask-repeat: no-repeat;
-        -webkit-mask-position: 50% 50%;
-      }
-
-      & + * {
-        padding-right: var(--dialog-padding);
-        margin-right: 1.25rem;
-        display: block;
-      }
-
-      & + span:not(.h1, .h2, .h3, .h4, .h5, .h6) {
-        padding-bottom: 0.5rem;
-        line-height: 1.1875rem; /* 19 */ 
-      }
-
-      & + span:not(.h1, .h2, .h3, .h4, .h5, .h6) + * {
-        padding-right: var(--dialog-padding);
-        margin-right: 1.25rem;
-        display: block;
-      }
-
-      @media (forced-colors: active) {
-        text-indent: 0;
-        width: fit-content;
-
-        &:after {
-          display: none;
-        }
-      }
-    }
-
-    &:has(.youtube-embed) {
-      padding: 0 !important;
-    }
-
-    &.dialog--fullwidth {
-      max-width: 69.5rem; /* 1112*/ 
-    }
-
-    @media screen and (max-width: 36em) {
-      :is(form, fieldset, .btn--wrapper):has(> .btn:first-child, > .btn:last-child) .btn:not(.dialog__close) {
-        width: 100%;
-        max-width: 100%;
-        margin: 0;
-        display: block;
-        text-align: center;
-
-        &:not(:last-child) {
-          margin-bottom: 1rem !important;
-        }
-      }
-    }
-
-    .mh-lg {
-      padding-left: 1rem;
-      margin-left: -1rem;
-      padding-right: calc(var(--dialog-padding) - 10px);
-      margin-right: calc((var(--dialog-padding) * -1) + 10px);
-      margin-bottom: calc(var(--dialog-padding) * -1);
-
-      > *:last-child {
-        margin-bottom: 2rem !important;
-      }
-
-      > p:last-child {
-        padding-bottom: 0 !important;
-      }
-    }
-  }
-  // #endregion
-
-  // #region Transactional
-  *:not(.dialog__wrapper) > dialog[open]:is(.dialog--transactional, .dialog--acknowledgement) {
-    text-align: center;
-
-    &:not(.hide-icon):before {
-      content: '\f05a';
-      font-weight: 300;
-      -moz-osx-font-smoothing: grayscale;
-      -webkit-font-smoothing: antialiased;
-      display: var(--fa-display, inline-block);
-      font-style: normal;
-      font-variant: normal;
-      line-height: 1;
-      text-rendering: auto;
-      font-family: 'Font Awesome 7 Pro';
-      font-size: 3rem;
-      margin-top: 0;
-      margin-bottom: 1.5rem;
-      line-height: 1;
-      color: var(--colour-heading);
-      clear: both;
-
-      @media screen and (min-width: 62em) {
-        font-size: 4rem;
-      }
-    }
-
-    &:has(> i):before {
-      display: none;
-    }
-
-    &:has(> i) > i {
-      display: var(--fa-display, inline-block);
-      line-height: 1;
-      font-size: 3rem;
-      margin-top: 0;
-      margin-bottom: 1.5rem;
-      line-height: 1;
-      color: var(--colour-heading);
-      clear: both;
-
-      @media screen and (min-width: 62em) {
-        font-size: 4rem;
-      }
-
-      &:has(> i) {
-        position: relative;
-      }
-
-      > i:before {
-        position: absolute;
-        top: 0;
-        left: 50%;
-        transform: scale(0.5) translate(-100%, 0);
-      }
-    }
-
-    > form:first-child button,
-    > button:first-child {
-      display: none;
-
-      & + * {
-        padding-right: 0;
-        margin-right: 0;
-      }
-
-      & + span:not(.h1, .h2, .h3, .h4, .h5, .h6) + * {
-        padding-right: 0;
-        margin-right: 0;
-      }
-    }
-
-    @media screen and (min-width: 36em) {
-      :is(button, .btn):has(~ :is(button, .btn):last-child),
-      :is(button, .btn):last-child {
-        min-width: calc(50% - 1rem);
-        text-align: center;
-      }
-    }
-  }
-  // #endregion
-
-  // #region youTube video
-  *:not(.dialog__wrapper) > dialog[open]:has(.youtube-embed) {
-    display: block;
-
-    .mh-lg,
-    .mh-lg:before {
-      display: contents;
-    }
-
-    @media screen and (min-width: 36em) {
-      min-width: 42.875rem; /* 686 */ 
-      max-width: 42.875rem; /* 686 */ 
-    }
-
-    @media screen and (min-width: 62em) {
-      min-width: 46rem; /* 736 */ 
-      max-width: 46rem; /* 736 */ 
-    }
-  }
-  // #endregion
-
-  // #region admin panel dialog
-  dialog:has(> .admin-panel) {
-    .dialog__close {
-      margin-top: -0.8rem;
-    }
-  }
-  dialog > .admin-panel {
-    margin: -1rem calc(var(--dialog-padding) * -1) calc(var(--dialog-padding) * -1) calc(var(--dialog-padding) * -1) !important;
-    padding-top: 0;
-
-    &:last-child {
-      margin-bottom: calc(var(--dialog-padding) * -1);
-    }
-  }
-
-  // #endregion
-
-  // #region Multi step modal
-
-  *:not(.dialog__wrapper) > dialog:has(iam-multi-step)[open] {
-    padding: 0;
-
-    & > button:first-child {
-      top: calc(var(--dialog-padding) * 4) !important;
-    }
-
-    :is(.h1, .h2, .h3, .h4, .h5, .h6) {
-      padding-right: calc(var(--dialog-padding) * 3);
-      padding-bottom: var(--dialog-padding);
-    }
-
-    iam-multi-step {
-      padding-inline: 0 !important;
-    }
-
-    form {
-      overflow: auto;
-      padding-bottom: 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) {
-      min-width: 28.25rem; /* 452 */ 
-      width: 28.25rem; /* 452 */ 
-      max-width: 28.25rem; /* 452 */ 
-
-      & > button:first-child {
-        top: calc(var(--dialog-padding) * 3.25) !important;
-      }
-
-      .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) {
-      min-width: 57.75rem; /* 924 */ 
-      width: 57.75rem; /* 924 */ 
-      max-width: 57.75rem; /* 924 */ 
-
-      & > button:first-child {
-        top: calc(var(--dialog-padding) * 1) !important;
-      }
-
-      @media (min-height: 31.25rem) {
-        height: 29.875rem; /* 478 */ 
-        max-height: 29.875rem; /* 478 */ 
-      }
-
-      form {
-        display: flex;
-        flex-direction: column;
-      }
-
-      fieldset {
-        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
-
-  // #region mobile fullwidth view For multi step modal
-  @media screen and (max-width: 36em) {
-    dialog[open]:has(iam-multi-step) {
-      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]:has(iam-multi-step) {
-      .mh-lg {
-        max-height: none !important;
-        overflow: visible;
-      }
-
-      &:before,
-      *:first-child {
-        margin-top: auto !important;
-      }
-
-      *:last-child {
-        margin-bottom: auto !important;
-      }
-    }
-  }
-  // #endregion
-}
+@use 'sass:math';
+@use '../_func' as *;
+
+@layer elements {
+  /* #region modal styling */
+
+  *:not(.dialog__wrapper) > dialog[open] { /*  change this selector to be a dialog without a popover attribute */
+    
+
+    &:has(.mh-lg){
+      overflow-y: hidden!important;
+    }
+    width: 90vw;
+    max-width: 20.25rem; /* 324 */  /*  col-width*4 */
+
+    /* height: 90vh; */
+    max-height: min(90vh, 47rem);
+    overscroll-behavior: contain;
+
+    @media screen and (min-width: 36em) {
+      --dialog-padding: 2rem;
+      min-width: 20.9375rem; /* 335 */ 
+      width: fit-content;
+      max-width: 42.875rem; /* 686 */ 
+    }
+
+    @media screen and (min-width: 62em) {
+      min-width: 28.375rem; /* 454 */ 
+      width: fit-content;
+      max-width: 46rem; /* 736 */ 
+    }
+
+    /*  Close button */
+    > form:first-child {
+      position: static;
+    }
+
+    > form:first-child button,
+    > button:first-child {
+      position: absolute;
+      top: var(--dialog-padding);
+      right: var(--dialog-padding);
+      z-index: var(--index-floating);
+
+      text-indent: 300%;
+      overflow: hidden;
+      border: none;
+      height: 1.25rem;
+      width: 1.25rem;
+      background: transparent;
+
+      &:after {
+        content: '';
+        top: 0;
+        left: 0;
+        position: absolute;
+        display: block;
+        height: 1.25rem;
+        width: 1.25rem;
+        z-index: var(--index-focus);
+        background: currentColor;
+        mask-image: var(--icon-close);
+        mask-size: 100%;
+        mask-repeat: no-repeat;
+        mask-position: 50% 50%;
+        -webkit-mask-image: var(--icon-close);
+        -webkit-mask-size: 100%;
+        -webkit-mask-repeat: no-repeat;
+        -webkit-mask-position: 50% 50%;
+      }
+
+      & + * {
+        padding-right: var(--dialog-padding);
+        margin-right: 1.25rem;
+        display: block;
+      }
+
+      & + span:not(.h1, .h2, .h3, .h4, .h5, .h6) {
+        padding-bottom: 0.5rem;
+        line-height: 1.1875rem; /* 19 */ 
+      }
+
+      & + span:not(.h1, .h2, .h3, .h4, .h5, .h6) + * {
+        padding-right: var(--dialog-padding);
+        margin-right: 1.25rem;
+        display: block;
+      }
+
+      @media (forced-colors: active) {
+        text-indent: 0;
+        width: fit-content;
+
+        &:after {
+          display: none;
+        }
+      }
+    }
+
+    &:has(.youtube-embed) {
+      padding: 0 !important;
+    }
+
+    &.dialog--fullwidth {
+      max-width: 69.5rem; /* 1112*/ 
+    }
+
+    @media screen and (max-width: 36em) {
+      :is(form, fieldset, .btn--wrapper):has(> .btn:first-child, > .btn:last-child) .btn:not(.dialog__close) {
+        width: 100%;
+        max-width: 100%;
+        margin: 0;
+        display: block;
+        text-align: center;
+
+        &:not(:last-child) {
+          margin-bottom: 1rem !important;
+        }
+      }
+    }
+
+    .mh-lg {
+      padding-left: 1rem;
+      margin-left: -1rem;
+      padding-right: calc(var(--dialog-padding) - 10px);
+      margin-right: calc((var(--dialog-padding) * -1) + 10px);
+      margin-bottom: calc(var(--dialog-padding) * -1);
+
+      > *:last-child {
+        margin-bottom: 2rem !important;
+      }
+
+      > p:last-child {
+        padding-bottom: 0 !important;
+      }
+    }
+  }
+  /* #endregion */
+
+  /* #region Transactional */
+  *:not(.dialog__wrapper) > dialog[open]:is(.dialog--transactional, .dialog--acknowledgement) {
+    text-align: center;
+
+    &:not(.hide-icon):before {
+      content: '\f05a';
+      font-weight: 300;
+      -moz-osx-font-smoothing: grayscale;
+      -webkit-font-smoothing: antialiased;
+      display: var(--fa-display, inline-block);
+      font-style: normal;
+      font-variant: normal;
+      line-height: 1;
+      text-rendering: auto;
+      font-family: 'Font Awesome 7 Pro';
+      font-size: 3rem;
+      margin-top: 0;
+      margin-bottom: 1.5rem;
+      line-height: 1;
+      color: var(--colour-heading);
+      clear: both;
+
+      @media screen and (min-width: 62em) {
+        font-size: 4rem;
+      }
+    }
+
+    &:has(> i):before {
+      display: none;
+    }
+
+    &:has(> i) > i {
+      display: var(--fa-display, inline-block);
+      line-height: 1;
+      font-size: 3rem;
+      margin-top: 0;
+      margin-bottom: 1.5rem;
+      line-height: 1;
+      color: var(--colour-heading);
+      clear: both;
+
+      @media screen and (min-width: 62em) {
+        font-size: 4rem;
+      }
+
+      &:has(> i) {
+        position: relative;
+      }
+
+      > i:before {
+        position: absolute;
+        top: 0;
+        left: 50%;
+        transform: scale(0.5) translate(-100%, 0);
+      }
+    }
+
+    > form:first-child button,
+    > button:first-child {
+      display: none;
+
+      & + * {
+        padding-right: 0;
+        margin-right: 0;
+      }
+
+      & + span:not(.h1, .h2, .h3, .h4, .h5, .h6) + * {
+        padding-right: 0;
+        margin-right: 0;
+      }
+    }
+
+    @media screen and (min-width: 36em) {
+      :is(button, .btn):has(~ :is(button, .btn):last-child),
+      :is(button, .btn):last-child {
+        min-width: calc(50% - 1rem);
+        text-align: center;
+      }
+    }
+  }
+  /* #endregion */
+
+  /* #region youTube video */
+  *:not(.dialog__wrapper) > dialog[open]:has(.youtube-embed) {
+    display: block;
+
+    .mh-lg,
+    .mh-lg:before {
+      display: contents;
+    }
+
+    @media screen and (min-width: 36em) {
+      min-width: 42.875rem; /* 686 */ 
+      max-width: 42.875rem; /* 686 */ 
+    }
+
+    @media screen and (min-width: 62em) {
+      min-width: 46rem; /* 736 */ 
+      max-width: 46rem; /* 736 */ 
+    }
+  }
+  /* #endregion */
+
+  /* #region admin panel dialog */
+  dialog:has(> .admin-panel) {
+    .dialog__close {
+      margin-top: -0.8rem;
+    }
+  }
+  dialog > .admin-panel {
+    margin: -1rem calc(var(--dialog-padding) * -1) calc(var(--dialog-padding) * -1) calc(var(--dialog-padding) * -1) !important;
+    padding-top: 0;
+
+    &:last-child {
+      margin-bottom: calc(var(--dialog-padding) * -1);
+    }
+  }
+
+  /* #endregion */
+
+  /* #region Multi step modal */
+
+  *:not(.dialog__wrapper) > dialog:has(iam-multi-step)[open] {
+    padding: 0;
+
+    & > button:first-child {
+      top: calc(var(--dialog-padding) * 4) !important;
+    }
+
+    :is(.h1, .h2, .h3, .h4, .h5, .h6) {
+      padding-right: calc(var(--dialog-padding) * 3);
+      padding-bottom: var(--dialog-padding);
+    }
+
+    iam-multi-step {
+      padding-inline: 0 !important;
+    }
+
+    form {
+      overflow: auto;
+      padding-bottom: 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) {
+      min-width: 28.25rem; /* 452 */ 
+      width: 28.25rem; /* 452 */ 
+      max-width: 28.25rem; /* 452 */ 
+
+      & > button:first-child {
+        top: calc(var(--dialog-padding) * 3.25) !important;
+      }
+
+      .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) {
+      min-width: 57.75rem; /* 924 */ 
+      width: 57.75rem; /* 924 */ 
+      max-width: 57.75rem; /* 924 */ 
+
+      & > button:first-child {
+        top: calc(var(--dialog-padding) * 1) !important;
+      }
+
+      @media (min-height: 31.25rem) {
+        height: 29.875rem; /* 478 */ 
+        max-height: 29.875rem; /* 478 */ 
+      }
+
+      form {
+        display: flex;
+        flex-direction: column;
+      }
+
+      fieldset {
+        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 */
+
+  /* #region mobile fullwidth view For multi step modal */
+  @media screen and (max-width: 36em) {
+    dialog[open]:has(iam-multi-step) {
+      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]:has(iam-multi-step) {
+      .mh-lg {
+        max-height: none !important;
+        overflow: visible;
+      }
+
+      &:before,
+      *:first-child {
+        margin-top: auto !important;
+      }
+
+      *:last-child {
+        margin-bottom: auto !important;
+      }
+    }
+  }
+  /* #endregion */
+}