@iamproperty/components 7.1.0--beta7 → 7.2.0

package/assets/sass/elements/modal.scss

@@ -1,427 +1,433 @@
 @use 'sass:math';
 @use '../_func' as *;
 
-// #region modal styling
-*:not(.dialog__wrapper) > dialog[open] {
-}
-
-*:not(.dialog__wrapper) > dialog[open] {
-  overflow-y: hidden;
-  width: 90vw;
-  max-width: rem(324); // col-width*4
+$layers: 'true' !default;
+$mobileOnly: 'false' !default;
+$darkMode: 'true' !default;
 
-  //height: 90vh;
-  max-height: min(90vh, #{rem(752)});
-  overscroll-behavior: contain;
+@include layer('elements', $layers) {
+  // #region modal styling
 
-  // Close button
-  > form:first-child {
-    position: static;
-  }
+  *:not(.dialog__wrapper) > dialog[open] {
+    overflow-y: hidden;
+    width: 90vw;
+    max-width: rem(324); // col-width*4
 
-  > 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: rem(20);
-    width: rem(20);
-    background: transparent;
-
-    &:after {
-      content: '';
-      top: 0;
-      left: 0;
-      position: absolute;
-      display: block;
-      height: rem(20);
-      width: rem(20);
-      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: rem(20);
-      display: block;
-    }
+    //height: 90vh;
+    max-height: min(90vh, #{rem(752)});
+    overscroll-behavior: contain;
 
-    & + span:not(.h1, .h2, .h3, .h4, .h5, .h6) {
-      padding-bottom: rem(8);
-      line-height: rem(19);
+    // Close button
+    > form:first-child {
+      position: static;
     }
 
-    & + span:not(.h1, .h2, .h3, .h4, .h5, .h6) + * {
-      padding-right: var(--dialog-padding);
-      margin-right: rem(20);
-      display: block;
-    }
+    > form:first-child button,
+    > button:first-child {
+      position: absolute;
+      top: var(--dialog-padding);
+      right: var(--dialog-padding);
+      z-index: var(--index-floating);
 
-    @media (forced-colors: active) {
-      text-indent: 0;
-      width: fit-content;
+      text-indent: 300%;
+      overflow: hidden;
+      border: none;
+      height: rem(20);
+      width: rem(20);
+      background: transparent;
 
       &:after {
-        display: none;
+        content: '';
+        top: 0;
+        left: 0;
+        position: absolute;
+        display: block;
+        height: rem(20);
+        width: rem(20);
+        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%;
       }
-    }
-  }
-
-  @include media-breakpoint-up(sm) {
-    --dialog-padding: #{rem(32)};
-    min-width: rem(335);
-    width: fit-content;
-    max-width: rem(686);
-  }
 
-  @include media-breakpoint-up(md) {
-    min-width: rem(454);
-    width: fit-content;
-    max-width: rem(736);
-  }
+      & + * {
+        padding-right: var(--dialog-padding);
+        margin-right: rem(20);
+        display: block;
+      }
 
-  &:has(.youtube-embed) {
-    padding: 0 !important;
-  }
+      & + span:not(.h1, .h2, .h3, .h4, .h5, .h6) {
+        padding-bottom: rem(8);
+        line-height: rem(19);
+      }
 
-  &.dialog--fullwidth {
-    max-width: rem(1112);
-  }
+      & + span:not(.h1, .h2, .h3, .h4, .h5, .h6) + * {
+        padding-right: var(--dialog-padding);
+        margin-right: rem(20);
+        display: block;
+      }
 
-  @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;
+      @media (forced-colors: active) {
+        text-indent: 0;
+        width: fit-content;
 
-      &:not(:last-child) {
-        margin-bottom: 1rem !important;
+        &:after {
+          display: none;
+        }
       }
     }
-  }
 
-  .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;
+    @include media-breakpoint-up(sm, $mobileOnly) {
+      --dialog-padding: #{rem(32)};
+      min-width: rem(335);
+      width: fit-content;
+      max-width: rem(686);
     }
 
-    > p:last-child {
-      padding-bottom: 0 !important;
+    @include media-breakpoint-up(md, $mobileOnly) {
+      min-width: rem(454);
+      width: fit-content;
+      max-width: rem(736);
     }
-  }
-}
 
-dialog::backdrop {
-  background: rgba(0, 0, 0, 0.3);
-  backdrop-filter: blur(4px);
-  overscroll-behavior: contain;
-}
-// #endregion
-
-// #region Transactional
-*:not(.dialog__wrapper) > dialog[open]:is(.dialog--transactional, .dialog--acknowledgement) {
-  text-align: center;
-
-  &: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 6 Pro';
-    font-size: 3rem;
-    @include media-breakpoint-up(md) {
-      font-size: 4rem;
+    &:has(.youtube-embed) {
+      padding: 0 !important;
     }
-    margin-top: 0;
-    margin-bottom: rem(24);
-    line-height: 1;
-    color: var(--colour-heading);
-    clear: both;
-  }
-
-  &:has(> i):before {
-    display: none;
-  }
 
-  &:has(> i) > i {
-    display: var(--fa-display, inline-block);
-    line-height: 1;
-    font-size: 3rem;
-    @include media-breakpoint-up(md) {
-      font-size: 4rem;
-    }
-    margin-top: 0;
-    margin-bottom: rem(24);
-    line-height: 1;
-    color: var(--colour-heading);
-    clear: both;
-
-    &:has(> i) {
-      position: relative;
+    &.dialog--fullwidth {
+      max-width: rem(1112);
     }
 
-    > i:before {
-      position: absolute;
-      top: 0;
-      left: 50%;
-      transform: scale(0.5) translate(-100%, 0);
+    @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;
+        }
+      }
     }
-  }
 
-  > form:first-child button,
-  > button:first-child {
-    display: none;
+    .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);
 
-    & + * {
-      padding-right: 0;
-      margin-right: 0;
-    }
+      > *:last-child {
+        margin-bottom: 2rem !important;
+      }
 
-    & + span:not(.h1, .h2, .h3, .h4, .h5, .h6) + * {
-      padding-right: 0;
-      margin-right: 0;
+      > p:last-child {
+        padding-bottom: 0 !important;
+      }
     }
   }
 
-  form > :is(button, a) {
-    margin-bottom: 0;
+  dialog::backdrop {
+    background: rgba(0, 0, 0, 0.3);
+    backdrop-filter: blur(4px);
+    overscroll-behavior: contain;
   }
-
-  @include media-breakpoint-up(sm) {
-    :is(button, .btn):has(~ :is(button, .btn):last-child),
-    :is(button, .btn):last-child {
-      min-width: calc(50% - 1rem);
-      text-align: center;
+  // #endregion
+
+  // #region Transactional
+  *:not(.dialog__wrapper) > dialog[open]:is(.dialog--transactional, .dialog--acknowledgement) {
+    text-align: center;
+
+    &: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 6 Pro';
+      font-size: 3rem;
+      margin-top: 0;
+      margin-bottom: rem(24);
+      line-height: 1;
+      color: var(--colour-heading);
+      clear: both;
+
+      @include media-breakpoint-up(md, $mobileOnly) {
+        font-size: 4rem;
+      }
     }
-  }
-}
-// #endregion
 
-// #region youTube video
-*:not(.dialog__wrapper) > dialog[open]:has(.youtube-embed) {
-  display: block;
+    &:has(> i):before {
+      display: none;
+    }
 
-  .mh-lg,
-  .mh-lg:before {
-    display: contents;
-  }
+    &:has(> i) > i {
+      display: var(--fa-display, inline-block);
+      line-height: 1;
+      font-size: 3rem;
+      margin-top: 0;
+      margin-bottom: rem(24);
+      line-height: 1;
+      color: var(--colour-heading);
+      clear: both;
+
+      @include media-breakpoint-up(md, $mobileOnly) {
+        font-size: 4rem;
+      }
 
-  @include media-breakpoint-up(sm) {
-    min-width: rem(686);
-    max-width: rem(686);
-  }
+      &:has(> i) {
+        position: relative;
+      }
 
-  @include media-breakpoint-up(md) {
-    min-width: rem(736);
-    max-width: rem(736);
-  }
-}
-// #endregion
+      > i:before {
+        position: absolute;
+        top: 0;
+        left: 50%;
+        transform: scale(0.5) translate(-100%, 0);
+      }
+    }
 
-// #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;
+    > form:first-child button,
+    > button:first-child {
+      display: none;
 
-  &:last-child {
-    margin-bottom: calc(var(--dialog-padding) * -1);
-  }
-}
+      & + * {
+        padding-right: 0;
+        margin-right: 0;
+      }
 
-// #endregion
+      & + span:not(.h1, .h2, .h3, .h4, .h5, .h6) + * {
+        padding-right: 0;
+        margin-right: 0;
+      }
+    }
 
-dialog:has(.embed) {
-  width: calc(100% - 6rem) !important;
-  max-width: 50rem !important;
-  padding: 0;
-  aspect-ratio: 16 / 9;
+    form > :is(button, a) {
+      margin-bottom: 0;
+    }
 
-  .embed {
-    aspect-ratio: 16 / 9;
-    width: 100%;
+    @include media-breakpoint-up(sm, $mobileOnly) {
+      :is(button, .btn):has(~ :is(button, .btn):last-child),
+      :is(button, .btn):last-child {
+        min-width: calc(50% - 1rem);
+        text-align: center;
+      }
+    }
   }
-}
+  // #endregion
 
-// #region Multi step modal
+  // #region youTube video
+  *:not(.dialog__wrapper) > dialog[open]:has(.youtube-embed) {
+    display: block;
 
-*:not(.dialog__wrapper) > dialog:has(iam-multi-step)[open] {
-  padding: 0;
+    .mh-lg,
+    .mh-lg:before {
+      display: contents;
+    }
 
-  & > button:first-child {
-    top: calc(var(--dialog-padding) * 4) !important;
-  }
+    @include media-breakpoint-up(sm, $mobileOnly) {
+      min-width: rem(686);
+      max-width: rem(686);
+    }
 
-  :is(.h1, .h2, .h3, .h4, .h5, .h6) {
-    padding-right: calc(var(--dialog-padding) * 3);
-    padding-bottom: var(--dialog-padding);
+    @include media-breakpoint-up(md, $mobileOnly) {
+      min-width: rem(736);
+      max-width: rem(736);
+    }
   }
+  // #endregion
 
-  iam-multi-step {
-    padding-inline: 0 !important;
+  // #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;
 
-  form {
-    overflow: auto;
-    padding-bottom: var(--dialog-padding);
-
-    max-height: calc(min(90vh, 47rem) - 6rem);
+    &:last-child {
+      margin-bottom: calc(var(--dialog-padding) * -1);
+    }
   }
 
-  fieldset {
-    > :last-child {
-      margin-bottom: var(--dialog-padding) !important;
-    }
+  // #endregion
 
-    > p:last-child {
-      padding-bottom: 0 !important;
-      margin-bottom: var(--dialog-padding) !important;
+  dialog:has(.embed) {
+    width: calc(100% - 6rem) !important;
+    max-width: 50rem !important;
+    padding: 0;
+    aspect-ratio: 16 / 9;
+
+    .embed {
+      aspect-ratio: 16 / 9;
+      width: 100%;
     }
   }
 
-  fieldset:not(.active) {
-    display: none;
-  }
+  // #region Multi step modal
 
-  @include media-breakpoint-up(sm) {
-    min-width: rem(452);
-    width: rem(452);
-    max-width: rem(452);
+  *:not(.dialog__wrapper) > dialog:has(iam-multi-step)[open] {
+    padding: 0;
 
     & > button:first-child {
-      top: calc(var(--dialog-padding) * 3.25) !important;
+      top: calc(var(--dialog-padding) * 4) !important;
     }
 
-    .btn--wrapper {
-      margin-top: auto;
-      text-align: right;
+    :is(.h1, .h2, .h3, .h4, .h5, .h6) {
+      padding-right: calc(var(--dialog-padding) * 3);
+      padding-bottom: var(--dialog-padding);
     }
 
-    form {
-      height: calc(100vh - 6rem);
-      padding-left: 0 !important;
-      padding-right: var(--dialog-padding) !important;
+    iam-multi-step {
+      padding-inline: 0 !important;
     }
-  }
 
-  @include media-breakpoint-up(md) {
-    min-width: rem(924);
-    width: rem(924);
-    max-width: rem(924);
+    form {
+      overflow: auto;
+      padding-bottom: var(--dialog-padding);
 
-    & > button:first-child {
-      top: calc(var(--dialog-padding) * 1) !important;
+      max-height: calc(min(90vh, 47rem) - 6rem);
     }
 
-    @media (min-height: #{rem(500)}) {
-      height: rem(478);
-      max-height: rem(478);
+    fieldset {
+      > :last-child {
+        margin-bottom: var(--dialog-padding) !important;
+      }
+
+      > p:last-child {
+        padding-bottom: 0 !important;
+        margin-bottom: var(--dialog-padding) !important;
+      }
     }
 
-    form {
-      display: flex;
-      flex-direction: column;
+    fieldset:not(.active) {
+      display: none;
     }
 
-    fieldset {
-      display: flex;
-      flex-direction: column;
-      flex-grow: 1;
-      position: relative;
+    @include media-breakpoint-up(sm, $mobileOnly) {
+      min-width: rem(452);
+      width: rem(452);
+      max-width: rem(452);
 
-      overflow: auto;
-      margin-bottom: calc(var(--dialog-padding) * -1);
-      padding-right: calc(var(--dialog-padding) - 10px);
-      margin-right: calc((var(--dialog-padding) * -1) + 10px);
+      & > button:first-child {
+        top: calc(var(--dialog-padding) * 3.25) !important;
+      }
 
-      max-height: rem(370);
+      .btn--wrapper {
+        margin-top: auto;
+        text-align: right;
+      }
 
-      &::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);
+      form {
+        height: calc(100vh - 6rem);
+        padding-left: 0 !important;
+        padding-right: var(--dialog-padding) !important;
       }
     }
-  }
-}
 
-// #endregion
+    @include media-breakpoint-up(md, $mobileOnly) {
+      min-width: rem(924);
+      width: rem(924);
+      max-width: rem(924);
 
-// #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;
+      & > button:first-child {
+        top: calc(var(--dialog-padding) * 1) !important;
+      }
 
-    iam-multi-step {
-      padding-inline: 0 !important;
-    }
+      @media (min-height: #{rem(500)}) {
+        height: rem(478);
+        max-height: rem(478);
+      }
 
-    form {
-      height: calc(100vh - 6rem);
-      padding-inline: var(--dialog-padding) !important;
-    }
+      form {
+        display: flex;
+        flex-direction: column;
+      }
+
+      fieldset {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        position: relative;
 
-    .btn--wrapper {
-      padding-top: rem(64);
+        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: rem(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);
+        }
+      }
     }
   }
 
-  dialog[open]:has(iam-multi-step) {
-    .mh-lg {
-      max-height: none !important;
-      overflow: visible;
-    }
+  // #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;
+      }
 
-    &:before,
-    *:first-child {
-      margin-top: auto !important;
+      form {
+        height: calc(100vh - 6rem);
+        padding-inline: var(--dialog-padding) !important;
+      }
+
+      .btn--wrapper {
+        padding-top: rem(64);
+      }
     }
 
-    *:last-child {
-      margin-bottom: auto !important;
+    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
 }
-// #endregion