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

package/assets/sass/elements/admin-panel.css

@@ -1,310 +1,310 @@
-@layer elements {
-  .admin-panel {
-    --padding-x: 1.5rem;
-    --padding-top: 1rem;
-    --padding-bottom: 1rem;
-    --mh-modifier: 4.5rem; /* 56px + 16px */
-    --mh-padding-inline: var(--padding-x);
-    display: block;
-    padding: var(--padding-top) var(--padding-x) var(--padding-bottom) var(--padding-x);
-    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
-    background-color: var(--colour-canvas-2);
-    border-radius: 0.5rem;
-    margin-bottom: 1.5rem;
-    outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
-    overflow: hidden;
-    
-    &:has(
-      :is([class*='cols-'], [class*='col-start-'], [class*='col-end-'], [class*='col-span-'])
-    ) {
-      display: grid;
-
-      > * {
-        grid-column: var(--col-start, col-1-start) / var(--col-end, col-12-end);
-      }
-    }
-
-    @container style(--theme: dark) {
-      background-color: var(--colour-canvas-2);
-      color: var(--colour-body);
-
-      .bg-white {
-        background-color: transparent !important;
-        color: var(--white) !important;
-      }
-    }
-
-    &:empty {
-      display: none;
-    }
-
-    > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .admin-panel__heading):not(.lead):first-child {
-      --gradient-direction: -90deg !important;
-      background-color: var(--colour-success);
-
-      &:not([class*='bg-']) {
-        color: var(--colour-primary-theme);
-        background-image: linear-gradient(var(--gradient-direction), var(--colour-info) 0, transparent 100%);
-      }
-
-      margin: calc(var(--padding-top) * -1) calc(var(--padding-x) * -1) var(--padding-top) calc(var(--padding-x) * -1);
-      display: block;
-      border-top-left-radius: 0.5rem;
-      border-top-right-radius: 0.5rem;
-    }
-
-    > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):not(.lead):first-child,
-    .admin-panel__heading > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):not(.lead) {
-      font-size: 1.125rem; /* 18/16 */
-      line-height: 1.5rem;
-      font-weight: bold;
-      padding: 1rem 1.5rem;
-      max-width: unset;
-    }
-
-    > :is(.admin-panel__heading):first-child {
-      display: flex!important;
-      flex-wrap: wrap;
-      gap: 1rem;
-      align-items: center;
-      padding: 1rem 1.5rem;
-
-      > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
-        padding: 0;
-        margin-inline-end: auto;
-      }
-
-      .btn {
-        --btn-margin: 0;
-        margin-bottom: 0;
-      }
-
-      .dialog__wrapper + .btn {
-        --btn-margin: 0.25rem;
-        margin-inline-end: 0;
-      }
-
-      @media (prefers-color-scheme: light) {
-        .btn-action,
-        .dialog__wrapper {
-          --colour-canvas-2: #ffffff;
-          --colour-heading: var(--colour-primary);
-          --colour-btn-action-hover-bg: var(--colour-light);
-          --colour-btn-hover: var(--colour-primary);
-          --colour-border: #d8d8d8;
-        }
-      }
-    }
-
-    :is(iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, iam-table-ajax, .iam-table) {
-      margin: 0 0 2rem 0;
-      padding: 0;
-      box-shadow: none;
-      background: none;
-    }
-
-    & > *:not([class*="mb-"]):not(.btn__group):last-child {
-      margin-bottom: 0 !important;
-    }
-
-    & > *:is(p):last-child {
-      padding-bottom: 0 !important;
-    }
-
-    & p {
-      max-width: 100%;
-      padding-bottom: 1.5rem;
-    }
-
-    & > :is(.mh-sm, .mh-md, .mh-lg, .mh-sm-sm, .mh-sm-md, .mh-sm-lg, .mh-md-sm, .mh-md-md, .mh-md-lg, .mh-fluid) {
-      overflow: auto;
-
-      &:before {
-        top: 100% !important;
-      }
-    }
-
-    & > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):not(.lead):first-child
-      + :is(.mh-sm, .mh-md, .mh-lg, .mh-sm-sm, .mh-sm-md, .mh-sm-lg, .mh-md-sm, .mh-md-md, .mh-md-lg, .mh-fluid) {
-      padding-top: var(--padding-top);
-      margin-top: calc(var(--padding-top) * -1);
-    }
-
-    & > :is(
-        .mh-sm,
-        .mh-md,
-        .mh-lg,
-        .mh-sm-sm,
-        .mh-sm-md,
-        .mh-sm-lg,
-        .mh-md-sm,
-        .mh-md-md,
-        .mh-md-lg,
-        .mh-fluid
-      ):last-child {
-      padding-bottom: var(--padding-bottom);
-      margin-bottom: calc(var(--padding-bottom) * -1) !important;
-
-      & > *:not([class*="mb-"]):last-child {
-        margin-bottom: 0 !important;
-      }
-
-      & > *:is(p):last-child {
-        padding-bottom: 0 !important;
-      }
-    }
-
-    & > iam-pagination {
-      margin-top: -1rem;
-    }
-
-    &:has(.mh-fluid) {
-      max-height: 100%;
-      display: flex;
-      flex-direction: column;
-    }
-
-    &.grid {
-      display: grid !important;
-      grid-template-columns: subgrid !important;
-
-      > *:not(:first-child) {
-        grid-column: var(--col-start, col-1-start) / var(--col-end, col-12-end);
-      }
-    }
-
-    & > hr {
-      margin-inline: calc(var(--padding-x) * -1);
-    }
-  }
-
-  [class*='col'].admin-panel:first-child:last-child:not(
-      :has(.mh-sm, .mh-md, .mh-lg, .mh-sm-sm, .mh-sm-md, .mh-sm-lg, .mh-md-sm, .mh-md-md, .mh-md-lg, .mh-fluid)
-    ) {
-    min-height: calc(100% - 1.5rem);
-  }
-
-  /* #region Has actionbar */
-  .admin-panel:has(iam-actionbar) {
-    & > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):not(.lead):first-child {
-      margin-bottom: 0;
-    }
-
-    iam-actionbar {
-      background: var(--colour-canvas);
-      margin-inline: calc(var(--padding-x) * -1);
-      margin-bottom: var(--padding-top);
-
-      &:first-child {
-        margin-top: calc(var(--padding-top) * -1);
-      }
-      &:not(:first-child) {
-        border-radius: 0;
-      }
-    }
-
-    & > :is(iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, iam-table-ajax) {
-      overflow: visible;
-
-      &:first-child {
-        margin-top: calc(var(--padding-top) * -1);
-      }
-
-      iam-actionbar {
-        margin-top: 0 !important;
-        border-radius: 0;
-        box-shadow: none;
-      }
-    }
-  }
-  /* #endregion */
-
-  /* #region Admin panel as details */
-  details.admin-panel {
-    summary:after {
-      content: '\f077';
-      font-weight: bold;
-      margin-left: 0;
-      height: 2rem;
-      width: 2rem;
-      text-align: center;
-      line-height: 2rem;
-      margin-right: -0.5rem;
-    }
-
-    summary:not(:has(.btn:hover)):hover:after {
-      background: var(--colour-light);
-      border-radius: 50%;
-    }
-    summary:not(:has(.btn:hover)):active:after {
-      background: var(--colour-light);
-      filter: brightness(85%);
-      border-radius: 50%;
-    }
-  }
-  details.admin-panel:not([open]) {
-    padding-bottom: 0;
-
-    summary:first-child {
-      margin-bottom: 0;
-    }
-
-    summary:after {
-      content: '\f078';
-    }
-  }
-  /* #endregion */
-  
-  .admin-panel__footer:last-child {
-    background-color: var(--wider-colour);
-    padding-top: var(--padding-top);
-    margin-inline: calc(var(--padding-x) * -1);
-    padding-inline: var(--padding-x);
-    padding-bottom: 0;
-
-    & > *:last-child {
-      margin-bottom: 0;
-      padding-bottom: var(--padding-bottom);
-
-      align-self: center;
-    }
-  }
-
-  .admin-panel__footer:not([class*="mb-"]):last-child {
-
-    margin-bottom: calc(var(--padding-bottom) * -1)!important;
-  }
-
-  /* #region */
-  .sub-panel {
-    background: var(--colour-canvas);
-    padding: var(--spacer-1);
-    border: 1px solid var(--colour-border);
-    border-radius: 0.25rem;
-    font-weight: normal;
-    margin-bottom: 1rem;
-
-    & > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
-
-      font-size: 1rem;
-      line-height: 1;
-      margin-bottom: 0;
-      padding-bottom: 0.5rem;
-      font-weight: normal;
-    }
-
-    strong {
-      font-weight: normal;
-    }
-
-    .logo {
-      height: 1.5rem;
-      width: 1.5rem;
-      object-fit: contain;
-      padding: 0;
-      margin: 0 auto 0.25rem auto;
-      display: block;
-    }
-  }
-  /* #endregion */
-}
+@layer elements {
+  .admin-panel {
+    --padding-x: 1.5rem;
+    --padding-top: 1rem;
+    --padding-bottom: 1rem;
+    --mh-modifier: 4.5rem; /* 56px + 16px */
+    --mh-padding-inline: var(--padding-x);
+    display: block;
+    padding: var(--padding-top) var(--padding-x) var(--padding-bottom) var(--padding-x);
+    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
+    background-color: var(--colour-canvas-2);
+    border-radius: 0.5rem;
+    margin-bottom: 1.5rem;
+    outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
+    overflow: hidden;
+    
+    &:has(
+      :is([class*='cols-'], [class*='col-start-'], [class*='col-end-'], [class*='col-span-'])
+    ) {
+      display: grid;
+
+      > * {
+        grid-column: var(--col-start, col-1-start) / var(--col-end, col-12-end);
+      }
+    }
+
+    @container style(--theme: dark) {
+      background-color: var(--colour-canvas-2);
+      color: var(--colour-body);
+
+      .bg-white {
+        background-color: transparent !important;
+        color: var(--white) !important;
+      }
+    }
+
+    &:empty {
+      display: none;
+    }
+
+    > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .admin-panel__heading):not(.lead):first-child {
+      --gradient-direction: -90deg !important;
+      background-color: var(--colour-success);
+
+      &:not([class*='bg-']) {
+        color: var(--colour-primary-theme);
+        background-image: linear-gradient(var(--gradient-direction), var(--colour-info) 0, transparent 100%);
+      }
+
+      margin: calc(var(--padding-top) * -1) calc(var(--padding-x) * -1) var(--padding-top) calc(var(--padding-x) * -1);
+      display: block;
+      border-top-left-radius: 0.5rem;
+      border-top-right-radius: 0.5rem;
+    }
+
+    > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):not(.lead):first-child,
+    .admin-panel__heading > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):not(.lead) {
+      font-size: 1.125rem; /* 18/16 */
+      line-height: 1.5rem;
+      font-weight: bold;
+      padding: 1rem 1.5rem;
+      max-width: unset;
+    }
+
+    > :is(.admin-panel__heading):first-child {
+      display: flex!important;
+      flex-wrap: wrap;
+      gap: 1rem;
+      align-items: center;
+      padding: 1rem 1.5rem;
+
+      > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
+        padding: 0;
+        margin-inline-end: auto;
+      }
+
+      .btn {
+        --btn-margin: 0;
+        margin-bottom: 0;
+      }
+
+      .dialog__wrapper + .btn {
+        --btn-margin: 0.25rem;
+        margin-inline-end: 0;
+      }
+
+      @media (prefers-color-scheme: light) {
+        .btn-action,
+        .dialog__wrapper {
+          --colour-canvas-2: #ffffff;
+          --colour-heading: var(--colour-primary);
+          --colour-btn-action-hover-bg: var(--colour-light);
+          --colour-btn-hover: var(--colour-primary);
+          --colour-border: #d8d8d8;
+        }
+      }
+    }
+
+    :is(iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, iam-table-ajax, .iam-table) {
+      margin: 0 0 2rem 0;
+      padding: 0;
+      box-shadow: none;
+      background: none;
+    }
+
+    & > *:not([class*="mb-"]):not(.btn__group):last-child {
+      margin-bottom: 0 !important;
+    }
+
+    & > *:is(p):last-child {
+      padding-bottom: 0 !important;
+    }
+
+    & p {
+      max-width: 100%;
+      padding-bottom: 1.5rem;
+    }
+
+    & > :is(.mh-sm, .mh-md, .mh-lg, .mh-sm-sm, .mh-sm-md, .mh-sm-lg, .mh-md-sm, .mh-md-md, .mh-md-lg, .mh-fluid) {
+      overflow: auto;
+
+      &:before {
+        top: 100% !important;
+      }
+    }
+
+    & > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):not(.lead):first-child
+      + :is(.mh-sm, .mh-md, .mh-lg, .mh-sm-sm, .mh-sm-md, .mh-sm-lg, .mh-md-sm, .mh-md-md, .mh-md-lg, .mh-fluid) {
+      padding-top: var(--padding-top);
+      margin-top: calc(var(--padding-top) * -1);
+    }
+
+    & > :is(
+        .mh-sm,
+        .mh-md,
+        .mh-lg,
+        .mh-sm-sm,
+        .mh-sm-md,
+        .mh-sm-lg,
+        .mh-md-sm,
+        .mh-md-md,
+        .mh-md-lg,
+        .mh-fluid
+      ):last-child {
+      padding-bottom: var(--padding-bottom);
+      margin-bottom: calc(var(--padding-bottom) * -1) !important;
+
+      & > *:not([class*="mb-"]):last-child {
+        margin-bottom: 0 !important;
+      }
+
+      & > *:is(p):last-child {
+        padding-bottom: 0 !important;
+      }
+    }
+
+    & > iam-pagination {
+      margin-top: -1rem;
+    }
+
+    &:has(.mh-fluid) {
+      max-height: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+
+    &.grid {
+      display: grid !important;
+      grid-template-columns: subgrid !important;
+
+      > *:not(:first-child) {
+        grid-column: var(--col-start, col-1-start) / var(--col-end, col-12-end);
+      }
+    }
+
+    & > hr {
+      margin-inline: calc(var(--padding-x) * -1);
+    }
+  }
+
+  [class*='col'].admin-panel:first-child:last-child:not(
+      :has(.mh-sm, .mh-md, .mh-lg, .mh-sm-sm, .mh-sm-md, .mh-sm-lg, .mh-md-sm, .mh-md-md, .mh-md-lg, .mh-fluid)
+    ) {
+    min-height: calc(100% - 1.5rem);
+  }
+
+  /* #region Has actionbar */
+  .admin-panel:has(iam-actionbar) {
+    & > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):not(.lead):first-child {
+      margin-bottom: 0;
+    }
+
+    iam-actionbar {
+      background: var(--colour-canvas);
+      margin-inline: calc(var(--padding-x) * -1);
+      margin-bottom: var(--padding-top);
+
+      &:first-child {
+        margin-top: calc(var(--padding-top) * -1);
+      }
+      &:not(:first-child) {
+        border-radius: 0;
+      }
+    }
+
+    & > :is(iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, iam-table-ajax) {
+      overflow: visible;
+
+      &:first-child {
+        margin-top: calc(var(--padding-top) * -1);
+      }
+
+      iam-actionbar {
+        margin-top: 0 !important;
+        border-radius: 0;
+        box-shadow: none;
+      }
+    }
+  }
+  /* #endregion */
+
+  /* #region Admin panel as details */
+  details.admin-panel {
+    summary:after {
+      content: '\f077';
+      font-weight: bold;
+      margin-left: 0;
+      height: 2rem;
+      width: 2rem;
+      text-align: center;
+      line-height: 2rem;
+      margin-right: -0.5rem;
+    }
+
+    summary:not(:has(.btn:hover)):hover:after {
+      background: var(--colour-light);
+      border-radius: 50%;
+    }
+    summary:not(:has(.btn:hover)):active:after {
+      background: var(--colour-light);
+      filter: brightness(85%);
+      border-radius: 50%;
+    }
+  }
+  details.admin-panel:not([open]) {
+    padding-bottom: 0;
+
+    summary:first-child {
+      margin-bottom: 0;
+    }
+
+    summary:after {
+      content: '\f078';
+    }
+  }
+  /* #endregion */
+  
+  .admin-panel__footer:last-child {
+    background-color: var(--wider-colour);
+    padding-top: var(--padding-top);
+    margin-inline: calc(var(--padding-x) * -1);
+    padding-inline: var(--padding-x);
+    padding-bottom: 0;
+
+    & > *:last-child {
+      margin-bottom: 0;
+      padding-bottom: var(--padding-bottom);
+
+      align-self: center;
+    }
+  }
+
+  .admin-panel__footer:not([class*="mb-"]):last-child {
+
+    margin-bottom: calc(var(--padding-bottom) * -1)!important;
+  }
+
+  /* #region */
+  .sub-panel {
+    background: var(--colour-canvas);
+    padding: var(--spacer-1);
+    border: 1px solid var(--colour-border);
+    border-radius: 0.25rem;
+    font-weight: normal;
+    margin-bottom: 1rem;
+
+    & > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
+
+      font-size: 1rem;
+      line-height: 1;
+      margin-bottom: 0;
+      padding-bottom: 0.5rem;
+      font-weight: normal;
+    }
+
+    strong {
+      font-weight: normal;
+    }
+
+    .logo {
+      height: 1.5rem;
+      width: 1.5rem;
+      object-fit: contain;
+      padding: 0;
+      margin: 0 auto 0.25rem auto;
+      display: block;
+    }
+  }
+  /* #endregion */
+}