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

package/assets/sass/elements/popover.scss

@@ -1,259 +1,259 @@
-@use 'sass:math';
-@use '../_func' as *;
-
-
-
-
-
-@layer elements {
-  /* #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);
-
-      &:not(.btn-action) {
-        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;
-
-        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);
-      }
-
-      &:has(+ dialog[open]):not([data-number]):after {
-        transform: rotate(270deg);
-      }
-    }
-
-    > [popover] {
-      display: var(--menu-display, none);
-      position: fixed;
-      top: anchor(bottom) !important;
-
-      left: anchor(left) !important;
-
-      position-try-fallbacks: flip-block, flip-inline !important;
-
-      /* right: auto; */
-      margin: 0 0 0 0.25rem;
-      /* padding: 1rem; */
-      padding: 1.5rem;
-
-      &::backdrop {
-        display: none;
-      }
-    }
-
-    > [popover]:popover-open {
-      display: block !important;
-    }
-
-    &:has([popover]:popover-open) > button {
-      background-color: var(--colour);
-    }
-
-    > :is(dialog[open], dialog:popover-open) {
-      left: 0;
-      margin-top: -1rem;
-      top: 100%;
-      z-index: var(--index-floating);
-      min-width: 20rem; /* 320 */
-      border-radius: 1rem;
-      width: 20rem; /* 320 */
-
-      @media screen and (min-width: 36em) {
-        width: 20.9375rem; /* 335 */ 
-      }
-      @media screen and (min-width: 62em) {
-        width: 22.5rem; /* 360 */ 
-      }
-
-      &.dialog--list {
-        width: fit-content !important;
-        min-width: 10rem !important; /* 160 */ 
-        max-width: 15rem !important; /* 240 */ 
-        padding: var(--menu-padding, 0.5rem);
-        margin: 0;
-        background: var(--menu-bg, canvas);
-        border: var(--menu-border, 2px solid grey);
-        overflow: auto;
-        border: none !important;
-        border-radius: 0.5rem;
-        box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.1);
-
-        @media screen and (min-width: 36em) {
-          width: max-content !important;
-        }
-
-        hr {
-          height: 1px !important;
-          background-color: var(--menu-hr-border-color, var(--border-color, grey)) !important;
-          width: 100%;
-          margin: var(--menu-item-margin, 0 0 0.25rem 0) !important;
-          padding: 0 !important;
-        }
-
-        .radio--tick {
-          margin-right: 0;
-          padding-left: 1.5rem;
-          margin-bottom: 0;
-
-          &:before {
-            left: 0;
-            font-size: 1em;
-            top: 0.75rem;
-          }
-        }
-
-        a {
-          padding: 0.375rem; /* 6 */
-
-          &:not(:hover, :focus, :active) {
-            border-color: transparent;
-          }
-          margin: 0;
-
-          &:after {
-            display: none;
-          }
-        }
-
-        .btn-action {
-          background: unset;
-          border: unset;
-          color: var(--colour-primary);
-          font-weight: inherit;
-          font-family: inherit;
-          font-size: 1rem;
-          line-height: 1.1875rem; /* 19 */ 
-          display: block;
-          margin: var(--menu-item-margin, 0 0 0.25rem 0);
-          padding-block: var(--menu-item-padding, 0.5rem);
-          width: var(--menu-item-width, 100%);
-          max-width: var(--menu-item-width, 100%);
-          text-align: var(--menu-item-text-align, left);
-
-          &:not(:hover, :focus, :active) {
-            border-color: transparent;
-          }
-
-          &:is(:hover, :focus) {
-            background: var(--colour-light) !important;
-            border-radius: 0.25rem !important;
-          }
-
-          &:is(:active) {
-            background: rgba(224, 224, 224, 1) !important;
-            border-radius: 0.25rem !important;
-          }
-        }
-      }
-
-      :is(dialog[open], dialog:popover-open) {
-        display: contents;
-      }
-    }
-
-    &.dialog__wrapper--right > :is(dialog[open], dialog:popover-open) {
-      right: 0;
-      left: auto;
-    }
-
-    &.dialog__wrapper--sm > :is(dialog[open], dialog:popover-open) {
-      width: 14.9375rem; /* 239 */ 
-    }
-
-    &.dialog__wrapper--lg > :is(dialog[open], dialog:popover-open) {
-      width: 19.9375rem; /* 319*/ 
-    }
-
-    @media screen and (min-width: 36em) {
-      &.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: 16.5625rem;
-      }
-      &.dialog__wrapper--lg > dialog[open] {
-        width: 28.25rem; /* 452 */ 
-      }
-    }
-
-    @media screen and (min-width: 62em) {
-      &.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: 16.5625rem;
-      }
-      &.dialog__wrapper--lg > dialog[open] {
-        width: 28.375rem; /* 454 */ 
-      }
-    }
-  }
-
-  /*  Show hide the indidual or multiple label */
-  .dialog__wrapper :is(.empty, .individual) {
-    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 */
-}
-
+@use 'sass:math';
+@use '../_func' as *;
+
+
+
+
+
+@layer elements {
+  /* #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);
+
+      &:not(.btn-action) {
+        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;
+
+        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);
+      }
+
+      &:has(+ dialog[open]):not([data-number]):after {
+        transform: rotate(270deg);
+      }
+    }
+
+    > [popover] {
+      display: var(--menu-display, none);
+      position: fixed;
+      top: anchor(bottom) !important;
+
+      left: anchor(left) !important;
+
+      position-try-fallbacks: flip-block, flip-inline !important;
+
+      /* right: auto; */
+      margin: 0 0 0 0.25rem;
+      /* padding: 1rem; */
+      padding: 1.5rem;
+
+      &::backdrop {
+        display: none;
+      }
+    }
+
+    > [popover]:popover-open {
+      display: block !important;
+    }
+
+    &:has([popover]:popover-open) > button {
+      background-color: var(--colour);
+    }
+
+    > :is(dialog[open], dialog:popover-open) {
+      left: 0;
+      margin-top: -1rem;
+      top: 100%;
+      z-index: var(--index-floating);
+      min-width: 20rem; /* 320 */
+      border-radius: 1rem;
+      width: 20rem; /* 320 */
+
+      @media screen and (min-width: 36em) {
+        width: 20.9375rem; /* 335 */ 
+      }
+      @media screen and (min-width: 62em) {
+        width: 22.5rem; /* 360 */ 
+      }
+
+      &.dialog--list {
+        width: fit-content !important;
+        min-width: 10rem !important; /* 160 */ 
+        max-width: 15rem !important; /* 240 */ 
+        padding: var(--menu-padding, 0.5rem);
+        margin: 0;
+        background: var(--menu-bg, canvas);
+        border: var(--menu-border, 2px solid grey);
+        overflow: auto;
+        border: none !important;
+        border-radius: 0.5rem;
+        box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.1);
+
+        @media screen and (min-width: 36em) {
+          width: max-content !important;
+        }
+
+        hr {
+          height: 1px !important;
+          background-color: var(--menu-hr-border-color, var(--border-color, grey)) !important;
+          width: 100%;
+          margin: var(--menu-item-margin, 0 0 0.25rem 0) !important;
+          padding: 0 !important;
+        }
+
+        .radio--tick {
+          margin-right: 0;
+          padding-left: 1.5rem;
+          margin-bottom: 0;
+
+          &:before {
+            left: 0;
+            font-size: 1em;
+            top: 0.75rem;
+          }
+        }
+
+        a {
+          padding: 0.375rem; /* 6 */
+
+          &:not(:hover, :focus, :active) {
+            border-color: transparent;
+          }
+          margin: 0;
+
+          &:after {
+            display: none;
+          }
+        }
+
+        .btn-action {
+          background: unset;
+          border: unset;
+          color: var(--colour-primary);
+          font-weight: inherit;
+          font-family: inherit;
+          font-size: 1rem;
+          line-height: 1.1875rem; /* 19 */ 
+          display: block;
+          margin: var(--menu-item-margin, 0 0 0.25rem 0);
+          padding-block: var(--menu-item-padding, 0.5rem);
+          width: var(--menu-item-width, 100%);
+          max-width: var(--menu-item-width, 100%);
+          text-align: var(--menu-item-text-align, left);
+
+          &:not(:hover, :focus, :active) {
+            border-color: transparent;
+          }
+
+          &:is(:hover, :focus) {
+            background: var(--colour-light) !important;
+            border-radius: 0.25rem !important;
+          }
+
+          &:is(:active) {
+            background: rgba(224, 224, 224, 1) !important;
+            border-radius: 0.25rem !important;
+          }
+        }
+      }
+
+      :is(dialog[open], dialog:popover-open) {
+        display: contents;
+      }
+    }
+
+    &.dialog__wrapper--right > :is(dialog[open], dialog:popover-open) {
+      right: 0;
+      left: auto;
+    }
+
+    &.dialog__wrapper--sm > :is(dialog[open], dialog:popover-open) {
+      width: 14.9375rem; /* 239 */ 
+    }
+
+    &.dialog__wrapper--lg > :is(dialog[open], dialog:popover-open) {
+      width: 19.9375rem; /* 319*/ 
+    }
+
+    @media screen and (min-width: 36em) {
+      &.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: 16.5625rem;
+      }
+      &.dialog__wrapper--lg > dialog[open] {
+        width: 28.25rem; /* 452 */ 
+      }
+    }
+
+    @media screen and (min-width: 62em) {
+      &.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: 16.5625rem;
+      }
+      &.dialog__wrapper--lg > dialog[open] {
+        width: 28.375rem; /* 454 */ 
+      }
+    }
+  }
+
+  /*  Show hide the indidual or multiple label */
+  .dialog__wrapper :is(.empty, .individual) {
+    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 */
+}
+