@iamproperty/components 7.1.0--beta7 → 7.2.0

package/assets/sass/elements/popover.scss

@@ -1,190 +1,201 @@
 @use 'sass:math';
 @use '../_func' as *;
 
-// #region popover styling
-.dialog__wrapper {
-  position: relative;
-  display: inline-block;
-  margin-bottom: calc(var(--btn-margin) - 0.25rem);
-
-  &:has(dialog[open], dialog:popover-open) > button {
-    background: var(--colour-btn-secondary-bg-hover);
-    color: var(--colour-btn-secondary-hover);
-    filter: brightness(85%);
-    transition:
-      background 0.1s,
-      color 0.1s;
-    //color: var(--colour-btn);
-    border-radius: 1.5rem;
-  }
-
-  > .btn:first-child {
-    margin-bottom: 0.25rem;
-
-    &:not(.btn-compact):not([class*='fa-']):after {
-      content: '';
-
-      display: inline-block;
-      margin-left: 1em;
-      margin-bottom: -0.15em;
-      height: 1em;
-      width: 1em;
-      z-index: var(--index-focus);
-      background: currentColor;
-      mask-image: var(--icon-arrow);
-      mask-size: 100%;
-      mask-repeat: no-repeat;
-      mask-position: 50% 50%;
-      -webkit-mask-image: var(--icon-arrow);
-      -webkit-mask-size: 100%;
-      -webkit-mask-repeat: no-repeat;
-      -webkit-mask-position: 50% 50%;
-
-      transform: rotate(90deg);
-    }
-
-    &[aria-expanded]:not([data-number]):after {
-      transform: rotate(270deg);
-    }
-  }
-
-  > :is(dialog[open], dialog:popover-open) {
-    left: 0;
-    top: 100%;
-    z-index: var(--index-floating);
-    min-width: rem(320);
-    border-radius: rem(16);
-    width: rem(320);
-    padding: rem(24);
-
-    @include media-breakpoint-up(sm) {
-      width: rem(335);
-    }
-    @include media-breakpoint-up(md) {
-      width: rem(360);
+$layers: 'true' !default;
+$mobileOnly: 'false' !default;
+$darkMode: 'true' !default;
+
+@include layer('elements', $layers) {
+  // #region popover styling
+  .dialog__wrapper {
+    position: relative;
+    display: inline-block;
+    margin-bottom: calc(var(--btn-margin) - 0.25rem);
+
+    &:has(dialog[open], dialog:popover-open) > button {
+      background: var(--colour-btn-secondary-bg-hover);
+      color: var(--colour-btn-secondary-hover);
+      filter: brightness(85%);
+      transition:
+        background 0.1s,
+        color 0.1s;
+      //color: var(--colour-btn);
+      border-radius: 1.5rem;
     }
 
-    &.dialog--list {
-      width: fit-content !important;
-
-      @include media-breakpoint-up(sm) {
-        width: max-content !important;
+    > .btn:first-child {
+      //margin-bottom: 0.25rem;
+
+      &:not(.btn-compact):not([class*='fa-']):after {
+        content: '';
+
+        display: inline-block;
+        margin-left: 1em;
+
+        height: 1em;
+        width: 1em;
+        z-index: var(--index-focus);
+        background: currentColor;
+        mask-image: var(--icon-arrow);
+        mask-size: 100%;
+        mask-repeat: no-repeat;
+        mask-position: 50% 50%;
+        -webkit-mask-image: var(--icon-arrow);
+        -webkit-mask-size: 100%;
+        -webkit-mask-repeat: no-repeat;
+        -webkit-mask-position: 50% 50%;
+
+        transform: rotate(90deg);
       }
 
-      min-width: rem(140) !important;
-      max-width: rem(280) !important;
-      padding: rem(16);
-      margin: 0;
-
-      hr {
-        height: 2px;
-        background: var(--colour-border);
-        margin-left: -#{rem(16)};
-        margin-right: -#{rem(16)};
-        margin-block: 0.25rem;
+      &[aria-expanded]:not([data-number]):after {
+        transform: rotate(270deg);
       }
 
-      .radio--tick {
-        margin-right: 0;
-        padding-left: 1.5rem;
-        margin-bottom: 0;
+      &:has(+ dialog[open]):not([data-number]):after {
+        transform: rotate(270deg);
+      }
+    }
 
-        &:before {
-          left: 0;
-          font-size: 1em;
-          top: 0.75rem;
-        }
+    > :is(dialog[open], dialog:popover-open) {
+      left: 0;
+      margin-top: -1rem;
+      top: 100%;
+      z-index: var(--index-floating);
+      min-width: rem(320);
+      border-radius: rem(16);
+      width: rem(320);
+      padding: rem(24);
+
+      @include media-breakpoint-up(sm, $mobileOnly) {
+        width: rem(335);
+      }
+      @include media-breakpoint-up(md, $mobileOnly) {
+        width: rem(360);
       }
 
-      a {
-        padding: #{rem(6)};
+      &.dialog--list {
+        width: fit-content !important;
 
-        &:not(:hover, :focus, :active) {
-          border-color: transparent;
-        }
+        min-width: rem(140) !important;
+        max-width: rem(280) !important;
+        padding: rem(16);
         margin: 0;
 
-        &:after {
-          display: none;
+        @include media-breakpoint-up(sm, $mobileOnly) {
+          width: max-content !important;
         }
-      }
 
-      .btn-action {
-        &:not(:hover, :focus, :active) {
-          border-color: transparent;
+        hr {
+          height: 2px;
+          background: var(--colour-border);
+          margin-left: -#{rem(16)};
+          margin-right: -#{rem(16)};
+          margin-block: 0.25rem;
         }
-        margin: 0;
-      }
-    }
 
-    :is(dialog[open], dialog:popover-open) {
-      display: contents;
-    }
-  }
+        .radio--tick {
+          margin-right: 0;
+          padding-left: 1.5rem;
+          margin-bottom: 0;
 
-  &.dialog__wrapper--right > :is(dialog[open], dialog:popover-open) {
-    right: 0;
-    left: auto;
-  }
+          &:before {
+            left: 0;
+            font-size: 1em;
+            top: 0.75rem;
+          }
+        }
 
-  &.dialog__wrapper--sm > :is(dialog[open], dialog:popover-open) {
-    width: rem(239);
-  }
+        a {
+          padding: #{rem(6)};
 
-  &.dialog__wrapper--lg > :is(dialog[open], dialog:popover-open) {
-    width: rem(319);
-  }
+          &:not(:hover, :focus, :active) {
+            border-color: transparent;
+          }
+          margin: 0;
 
-  @include media-breakpoint-up(sm) {
-    &.dialog__wrapper--sm-left > dialog[open] {
-      left: 0;
-      right: auto;
+          &:after {
+            display: none;
+          }
+        }
+
+        .btn-action {
+          &:not(:hover, :focus, :active) {
+            border-color: transparent;
+          }
+          margin: 0;
+        }
+      }
+
+      :is(dialog[open], dialog:popover-open) {
+        display: contents;
+      }
     }
-    &.dialog__wrapper--sm-right > dialog[open] {
+
+    &.dialog__wrapper--right > :is(dialog[open], dialog:popover-open) {
       right: 0;
       left: auto;
     }
-    &.dialog__wrapper--sm > dialog[open] {
-      width: rem(265);
-    }
-    &.dialog__wrapper--lg > dialog[open] {
-      width: rem(452);
-    }
-  }
 
-  @include media-breakpoint-up(md) {
-    &.dialog__wrapper--md-left > dialog[open] {
-      left: 0;
-      right: auto;
+    &.dialog__wrapper--sm > :is(dialog[open], dialog:popover-open) {
+      width: rem(239);
     }
-    &.dialog__wrapper--md-right > dialog[open] {
-      right: 0;
-      left: auto;
+
+    &.dialog__wrapper--lg > :is(dialog[open], dialog:popover-open) {
+      width: rem(319);
     }
-    &.dialog__wrapper--sm > dialog[open] {
-      width: rem(266);
+
+    @include media-breakpoint-up(sm, $mobileOnly) {
+      &.dialog__wrapper--sm-left > dialog[open] {
+        left: 0;
+        right: auto;
+      }
+      &.dialog__wrapper--sm-right > dialog[open] {
+        right: 0;
+        left: auto;
+      }
+      &.dialog__wrapper--sm > dialog[open] {
+        width: rem(265);
+      }
+      &.dialog__wrapper--lg > dialog[open] {
+        width: rem(452);
+      }
     }
-    &.dialog__wrapper--lg > dialog[open] {
-      width: rem(454);
+
+    @include media-breakpoint-up(md, $mobileOnly) {
+      &.dialog__wrapper--md-left > dialog[open] {
+        left: 0;
+        right: auto;
+      }
+      &.dialog__wrapper--md-right > dialog[open] {
+        right: 0;
+        left: auto;
+      }
+      &.dialog__wrapper--sm > dialog[open] {
+        width: rem(266);
+      }
+      &.dialog__wrapper--lg > dialog[open] {
+        width: rem(454);
+      }
     }
   }
-}
 
-// Show hide the indidual or multiple label
-.dialog__wrapper :is(.empty, .individual) {
-  display: none;
-}
-
-@supports selector(:has(*)) {
+  // Show hide the indidual or multiple label
   .dialog__wrapper :is(.empty, .individual) {
-    display: inline;
+    display: none;
   }
-}
 
-.dialog__wrapper:has(input:checked) .empty,
-.dialog__wrapper:not(:has(input:checked)) .individual,
-.dialog__wrapper:has(input:checked ~ input:checked) .individual,
-.dialog__wrapper:not(:has(input:checked ~ input:checked)) .multiple {
-  display: none;
+  @supports selector(:has(*)) {
+    .dialog__wrapper :is(.empty, .individual) {
+      display: inline;
+    }
+  }
+
+  .dialog__wrapper:has(input:checked) .empty,
+  .dialog__wrapper:not(:has(input:checked)) .individual,
+  .dialog__wrapper:has(input:checked ~ input:checked) .individual,
+  .dialog__wrapper:not(:has(input:checked ~ input:checked)) .multiple {
+    display: none;
+  }
+  // #endregion
 }
-// #endregion