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

package/assets/sass/components/modal.component.scss

@@ -1,253 +1,253 @@
-@use '../_func' as *;
-@use '../elements/dialog' as *;
-@use '../elements/buttons' as *;
-
-:host{
-  
-  overscroll-behavior: contain;
-
-  display: block;
-  container-type: inline-size;
-
-}
-
-::slotted(dialog) {
-  display: contents!important;
-}
-
-::slotted(button) {
-  margin: 0!important;
-}
-
-@layer components {
-  dialog[open] {
-    /* overflow-y: hidden; */
-    width: 90vw;
-    max-width: 20.25rem; /* col-width*4 324px */
-
-    /* height: 90vh; */
-    max-height: min(90vh, 47rem);
-    overscroll-behavior: contain;
-    overflow-y: hidden;
-
-    @media screen and (min-width: 36em) {
-      --dialog-padding: 2rem;
-      min-width: 20.9375rem;
-      width: fit-content;
-      max-width: 42.875rem;
-    }
-
-    @media screen and (min-width: 62em) {
-      min-width: 28.375rem;
-      width: fit-content;
-      max-width: 46rem;
-    }
-
-    &::before {
-      content: "";
-      top: 0.75rem;
-      bottom: auto;
-      left: 0;
-      right: 0.5rem;
-      height: calc(var(--dialog-padding) - 0.75rem);
-      position: absolute;
-      display: block;
-      background: linear-gradient(0deg, transparent 0%, var(--colour-canvas-2) 100%);
-      z-index: 2;
-    }
-    
-    &::after {
-      content: "";
-      top: auto;
-      bottom: 0.75rem;
-      left: 0;
-      right: 6px;
-      height: calc(var(--dialog-padding) - 0.75rem);
-      position: absolute;
-      display: block;
-      background: linear-gradient(180deg, transparent 0%, var(--colour-canvas-2) 100%);
-      z-index: 2;
-    }
-
-    .scroll {
-      margin-inline: calc(var(--dialog-padding) * -1);
-      margin-block: calc(calc(var(--dialog-padding) - 0.75rem) * -1);
-      padding-inline: var(--dialog-padding);
-      padding-block: calc(var(--dialog-padding) - 0.75rem);
-      height: 100%;
-      max-height: 100%;
-      overflow: auto;
-      overscroll-behavior: contain;
-      position: relative;
-      z-index: 1;
-
-      .fa-circle {
-        display: none;
-      }
-    }
-
-
-    /*  Close button */
-    > button:first-child {
-
-      position: absolute;
-      top: 0.5rem;
-      right: 0.5rem;
-      z-index: var(--index-floating);
-      margin: 0;
-
-      &:not(:hover,:focus,:active){
-        background-color: var(--colour-canvas);
-      }
-
-      @container (min-width: 36em) {
-        top: calc(var(--dialog-padding) - 0.75rem);
-        right: calc(var(--dialog-padding) - 0.75rem);
-      }
-      
-    }
-    
-
-    &:has(.youtube-embed) {
-      padding: 0 !important;
-    }
-
-    &.dialog--fullwidth {
-      max-width: 69.5rem;
-    }
-
-    .btn__group {
-      display: none;
-    }
-  }
-  /*  Size variants */
-  /*  small */
-  @media screen and (min-width: 36em) {
-
-    :host(.modal--sm) dialog[open] {
-      
-        min-width: 20.9375rem;
-        width: 20.9375rem;
-        max-width: 20.9375rem;
-    }
-  }
-
-  @media screen and (min-width: 62em) {
-
-    :host(.modal--sm) dialog[open] {
-        min-width: 28.375rem;
-        width: 28.375rem;
-        max-width: 28.375rem;
-    }
-  }
-
-  /*  large */
-  @media screen and (min-width: 36em) {
-
-    :host(.modal--lg) dialog[open] {
-        min-width: 42.875rem;
-        width: 42.875rem;
-        max-width: 42.875rem;
-    }
-  }
-
-  @media screen and (min-width: 62em) {
-
-    :host(.modal--lg) dialog[open] {
-        min-width: 46rem;
-        width: 46rem;
-        max-width: 46rem;
-    }
-  }
-
-
-
-
-  dialog::backdrop {
-    background: rgba(0, 0, 0, 0.3);
-    backdrop-filter: blur(4px);
-    overscroll-behavior: contain;
-  }
-
-  ::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
-  }
-
-  ::-webkit-scrollbar-track {
-    background-color: transparent;
-    border-top: 4px solid transparent;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background-color: #c1c1c1;
-    width: 6px;
-    border-radius: 3px;
-  }
-
-  ::slotted(p:last-child){
-    padding-bottom: 0!important;
-  }
-  ::slotted(p:last-child){
-    padding-bottom: 0!important;
-  }
-  ::slotted(:last-child){
-    margin-bottom: 0!important;
-  }
-
-  /* #region transactional */
-  :host(:is([data-type="transactional"],[data-type="acknowledgement"])) dialog[open] {
-    text-align: center;
-
-    .scroll > .fa-circle {
-      display: var(--fa-display, block);
-      line-height: 1;
-      font-size: 3rem;
-      height: 3rem;
-      width: 3rem;
-      margin-top: 0;
-      margin-bottom: 0;
-      line-height: 1;
-      color: var(--colour-heading);
-      margin-inline: auto;
-
-      @media screen and (min-width: 62em) {
-        font-size: 4rem;
-        height: 4rem;
-        width: 4rem;
-      }
-
-      &:has(> i) {
-        position: relative;
-      }
-
-      > i:before {
-        position: absolute;
-        top: 0;
-        left: 50%;
-        transform: scale(0.5) translate(-100%, 0);
-      }
-    }
-
-    > button:first-child {
-
-      display: none;
-    }
-    
-    .btn__group {
-      display: flex;
-      justify-content: center;
-      padding-top: 2rem;
-      margin-bottom: 0;
-    }
-  }
-
-  :host([data-type="acknowledgement"]) dialog[open] {
-
-    .btn__group [data-cancel] {
-      display: none;
-    }
-  }
-  /* #endregion */
-
+@use '../_func' as *;
+@use '../elements/dialog' as *;
+@use '../elements/buttons' as *;
+
+:host{
+  
+  overscroll-behavior: contain;
+
+  display: block;
+  container-type: inline-size;
+
+}
+
+::slotted(dialog) {
+  display: contents!important;
+}
+
+::slotted(button) {
+  margin: 0!important;
+}
+
+@layer components {
+  dialog[open] {
+    /* overflow-y: hidden; */
+    width: 90vw;
+    max-width: 20.25rem; /* col-width*4 324px */
+
+    /* height: 90vh; */
+    max-height: min(90vh, 47rem);
+    overscroll-behavior: contain;
+    overflow-y: hidden;
+
+    @media screen and (min-width: 36em) {
+      --dialog-padding: 2rem;
+      min-width: 20.9375rem;
+      width: fit-content;
+      max-width: 42.875rem;
+    }
+
+    @media screen and (min-width: 62em) {
+      min-width: 28.375rem;
+      width: fit-content;
+      max-width: 46rem;
+    }
+
+    &::before {
+      content: "";
+      top: 0.75rem;
+      bottom: auto;
+      left: 0;
+      right: 0.5rem;
+      height: calc(var(--dialog-padding) - 0.75rem);
+      position: absolute;
+      display: block;
+      background: linear-gradient(0deg, transparent 0%, var(--colour-canvas-2) 100%);
+      z-index: 2;
+    }
+    
+    &::after {
+      content: "";
+      top: auto;
+      bottom: 0.75rem;
+      left: 0;
+      right: 6px;
+      height: calc(var(--dialog-padding) - 0.75rem);
+      position: absolute;
+      display: block;
+      background: linear-gradient(180deg, transparent 0%, var(--colour-canvas-2) 100%);
+      z-index: 2;
+    }
+
+    .scroll {
+      margin-inline: calc(var(--dialog-padding) * -1);
+      margin-block: calc(calc(var(--dialog-padding) - 0.75rem) * -1);
+      padding-inline: var(--dialog-padding);
+      padding-block: calc(var(--dialog-padding) - 0.75rem);
+      height: 100%;
+      max-height: 100%;
+      overflow: auto;
+      overscroll-behavior: contain;
+      position: relative;
+      z-index: 1;
+
+      .fa-circle {
+        display: none;
+      }
+    }
+
+
+    /*  Close button */
+    > button:first-child {
+
+      position: absolute;
+      top: 0.5rem;
+      right: 0.5rem;
+      z-index: var(--index-floating);
+      margin: 0;
+
+      &:not(:hover,:focus,:active){
+        background-color: var(--colour-canvas);
+      }
+
+      @container (min-width: 36em) {
+        top: calc(var(--dialog-padding) - 0.75rem);
+        right: calc(var(--dialog-padding) - 0.75rem);
+      }
+      
+    }
+    
+
+    &:has(.youtube-embed) {
+      padding: 0 !important;
+    }
+
+    &.dialog--fullwidth {
+      max-width: 69.5rem;
+    }
+
+    .btn__group {
+      display: none;
+    }
+  }
+  /*  Size variants */
+  /*  small */
+  @media screen and (min-width: 36em) {
+
+    :host(.modal--sm) dialog[open] {
+      
+        min-width: 20.9375rem;
+        width: 20.9375rem;
+        max-width: 20.9375rem;
+    }
+  }
+
+  @media screen and (min-width: 62em) {
+
+    :host(.modal--sm) dialog[open] {
+        min-width: 28.375rem;
+        width: 28.375rem;
+        max-width: 28.375rem;
+    }
+  }
+
+  /*  large */
+  @media screen and (min-width: 36em) {
+
+    :host(.modal--lg) dialog[open] {
+        min-width: 42.875rem;
+        width: 42.875rem;
+        max-width: 42.875rem;
+    }
+  }
+
+  @media screen and (min-width: 62em) {
+
+    :host(.modal--lg) dialog[open] {
+        min-width: 46rem;
+        width: 46rem;
+        max-width: 46rem;
+    }
+  }
+
+
+
+
+  dialog::backdrop {
+    background: rgba(0, 0, 0, 0.3);
+    backdrop-filter: blur(4px);
+    overscroll-behavior: contain;
+  }
+
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background-color: transparent;
+    border-top: 4px solid transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: #c1c1c1;
+    width: 6px;
+    border-radius: 3px;
+  }
+
+  ::slotted(p:last-child){
+    padding-bottom: 0!important;
+  }
+  ::slotted(p:last-child){
+    padding-bottom: 0!important;
+  }
+  ::slotted(:last-child){
+    margin-bottom: 0!important;
+  }
+
+  /* #region transactional */
+  :host(:is([data-type="transactional"],[data-type="acknowledgement"])) dialog[open] {
+    text-align: center;
+
+    .scroll > .fa-circle {
+      display: var(--fa-display, block);
+      line-height: 1;
+      font-size: 3rem;
+      height: 3rem;
+      width: 3rem;
+      margin-top: 0;
+      margin-bottom: 0;
+      line-height: 1;
+      color: var(--colour-heading);
+      margin-inline: auto;
+
+      @media screen and (min-width: 62em) {
+        font-size: 4rem;
+        height: 4rem;
+        width: 4rem;
+      }
+
+      &:has(> i) {
+        position: relative;
+      }
+
+      > i:before {
+        position: absolute;
+        top: 0;
+        left: 50%;
+        transform: scale(0.5) translate(-100%, 0);
+      }
+    }
+
+    > button:first-child {
+
+      display: none;
+    }
+    
+    .btn__group {
+      display: flex;
+      justify-content: center;
+      padding-top: 2rem;
+      margin-bottom: 0;
+    }
+  }
+
+  :host([data-type="acknowledgement"]) dialog[open] {
+
+    .btn__group [data-cancel] {
+      display: none;
+    }
+  }
+  /* #endregion */
+
 }