@iamproperty/components 7.1.0--beta7 → 7.2.0

package/assets/sass/_components.scss

@@ -1,141 +1,364 @@
 @use 'sass:math';
 @use '_func' as *;
 
-@use 'components/nav.preload';
-@use 'components/carousel.config';
-@use 'components/multiselect.preload';
-@use 'components/inline-edit.preload';
-@use 'components/charts.config.scss';
+$layers: 'true' !default;
+$mobileOnly: 'false' !default;
+$darkMode: 'true' !default;
 
-// Make sure the first
-main {
-  position: relative;
+@use 'components/nav.preload' with (
+  $layers: $layers,
+  $darkMode: $darkMode,
+  $mobileOnly: $mobileOnly
+);
+@use 'components/carousel.config' with (
+  $layers: $layers,
+  $darkMode: $darkMode,
+  $mobileOnly: $mobileOnly
+);
+@use 'components/multiselect.preload' with (
+  $layers: $layers,
+  $darkMode: $darkMode,
+  $mobileOnly: $mobileOnly
+);
+@use 'components/inline-edit.preload' with (
+  $layers: $layers,
+  $darkMode: $darkMode,
+  $mobileOnly: $mobileOnly
+);
+@use 'components/charts.config.scss' with (
+  $layers: $layers,
+  $darkMode: $darkMode,
+  $mobileOnly: $mobileOnly
+);
+@use 'components/menu.scss' with (
+  $layers: $layers,
+  $darkMode: $darkMode,
+  $mobileOnly: $mobileOnly
+);
+@use 'components/tabs.scss' with (
+  $layers: $layers,
+  $darkMode: $darkMode,
+  $mobileOnly: $mobileOnly
+);
 
-  > *:first-child {
-    padding-top: 2rem;
+@include layer('components', $layers) {
+  // Make sure the first
+  main {
+    position: relative;
+
+    > *:first-child {
+      padding-top: 2rem;
+    }
   }
-}
 
-// #region Undefined web components
+  // #region Undefined web components
 
-@include media-breakpoint-up(md) {
-  iam-header:not(:defined) {
-    min-height: rem(470);
+  @include media-breakpoint-up(md, $mobileOnly) {
+    iam-header:not(:defined) {
+      min-height: rem(470);
+    }
   }
-}
 
-// #region Cards
-.card:not(:defined) {
-  box-shadow: var(--card-box-shadow);
-  border-radius: var(--card-border-radius);
-  padding: var(--card-top-padding) var(--card-right-padding) var(--card-bottom-padding) var(--card-left-padding);
-}
+  // #region Cards
+  .card:not(:defined) {
+    box-shadow: var(--card-box-shadow);
+    border-radius: var(--card-border-radius);
+    padding: var(--card-top-padding) var(--card-right-padding) var(--card-bottom-padding) var(--card-left-padding);
+  }
 
-.row
-  [class*='col']:has(
-    label:first-child:last-child .card:defined:first-child:last-child,
-    button:first-child:last-child .card:defined:first-child:last-child,
-    a:first-child:last-child .card:defined:first-child:last-child
-  ) {
-  display: flex;
-}
+  .row
+    [class*='col']:has(
+      label:first-child:last-child .card:defined:first-child:last-child,
+      button:first-child:last-child .card:defined:first-child:last-child,
+      a:first-child:last-child .card:defined:first-child:last-child
+    ) {
+    display: flex;
+  }
 
-iam-card:has([type='checkbox']:checked) {
-  --hover-outline-colour: var(--colour-info);
-  --outline-colour: var(--colour-info);
-}
+  iam-card:has([type='checkbox']:checked) {
+    --hover-outline-colour: var(--colour-info);
+    --outline-colour: var(--colour-info);
+  }
 
-label:has(.card) {
-  padding: 0 !important;
-  margin-right: 0 !important;
+  label:has(.card) {
+    padding: 0 !important;
+    margin-right: 0 !important;
 
-  &:before,
-  &:after {
-    display: none !important;
-  }
+    &:before,
+    &:after {
+      display: none !important;
+    }
 
-  .optional-text {
-    display: none;
-  }
+    .optional-text {
+      display: none;
+    }
 
-  &:has(:checked) {
-    .card:defined {
-      outline: 2px solid var(--colour, var(--colour-primary));
-      outline-offset: -2px;
+    &:has(:checked) {
+      .card:defined {
+        outline: 2px solid var(--colour, var(--colour-primary));
+        outline-offset: -2px;
 
-      ::part(body) {
-        background: none;
-      }
-      ::part(footer) {
-        background: none;
+        ::part(body) {
+          background: none;
+        }
+        ::part(footer) {
+          background: none;
+        }
       }
     }
   }
-}
 
-iam-filter-card:not(:has(i)) {
-  border-left: 0.75rem solid var(--colour, var(--colour-primary));
-}
+  iam-filter-card:not(:has(i)) {
+    border-left: 0.75rem solid var(--colour, var(--colour-primary));
+  }
 
-.card .badge:not([class*='bg-']):not([class*='wider-colour-']) {
-  background-color: var(--colour-canvas);
-  outline: 1px solid var(--colour-light);
-}
+  .card .badge:not([class*='bg-']):not([class*='wider-colour-']) {
+    background-color: var(--colour-canvas);
+    outline: 1px solid var(--colour-light);
+  }
 
-a[target='_blank'] .card {
-  --icon: var(--icon-new-tab);
-}
+  a[target='_blank'] .card {
+    --icon: var(--icon-new-tab);
+  }
 
-// #endregion
+  // #endregion
 
-// Search
-iam-search input:not(.is-invalid):not(:invalid) {
-  background: none !important;
-}
-iam-search .optional-text {
-  display: none !important;
-}
+  // Search
+  iam-search input:not(.is-invalid):not(:invalid) {
+    background: none !important;
+  }
+  iam-search .optional-text {
+    display: none !important;
+  }
 
-// Table dark mode support
-iam-table {
-  tbody tr {
-    @include dark-mode() {
-      --hover-background: var(--colour-canvas);
+  // Table dark mode support
+  iam-table {
+    tbody tr {
+      @include dark-mode($darkMode) {
+        --hover-background: var(--colour-canvas);
 
-      &:is(:hover, :focus-within, .hover) {
-        background: var(--row-bg);
+        &:is(:hover, :focus-within, .hover) {
+          background: var(--row-bg);
+        }
       }
     }
   }
-}
 
-@container (width > 23.4375em) {
-  iam-table.table--cta:not(.table--loading):not(:has(tr:first-child td:first-child:last-child)) {
-    tr > *:not(:first-child):last-child {
-      @media screen and (prefers-color-scheme: dark) {
-        background: linear-gradient(90deg, transparent 0%, var(--row-bg) 1.25rem);
+  @container (width > 23.4375em) {
+    iam-table.table--cta:not(.table--loading):not(:has(tr:first-child td:first-child:last-child)) {
+      tr > *:not(:first-child):last-child {
+        @media screen and (prefers-color-scheme: dark) {
+          background: linear-gradient(90deg, transparent 0%, var(--row-bg) 1.25rem);
+        }
       }
     }
   }
-}
 
-iam-table {
-  tr:has([type='checkbox']:checked) {
-    @include dark-mode() {
-      --row-bg: #000000;
+  iam-table {
+    tr:has([type='checkbox']:checked) {
+      @include dark-mode($darkMode) {
+        --row-bg: #000000;
+      }
     }
   }
-}
 
-iam-pagination {
-  --pagination-link-color: var(--colour-light);
-  --pagination-link-color-active: #e0e0e0;
-}
+  iam-pagination {
+    --pagination-link-color: var(--colour-light);
+    --pagination-link-color-active: #e0e0e0;
+  }
+
+  iam-fileupload::part(file) {
+    @include dark-mode($darkMode) {
+      background: var(--colour-canvas-2);
+      border-color: var(--colour-canvas-2);
+      color: var(--colour-body);
+    }
+  }
+
+  iam-bento-grid {
+    details {
+      summary {
+        position: relative;
+        height: 100%;
+        width: 100%;
+        max-width: 100%;
+        padding: 1.5rem;
+        margin-bottom: 0;
+
+        [role='presentation'] {
+          display: block;
+          font-family: var(--font-body);
+          font-weight: normal;
+          font-size: 1rem;
+          position: relative;
+          width: fit-content;
+          //margin-bottom: 2rem;
+          opacity: 0;
+          transition: opacity 1s;
+
+          &:before {
+            display: block;
+            content: ' ';
+            position: absolute;
+            top: 100%;
+            left: 50%;
+            width: 100%;
+            height: 0;
+            border: 1px solid currentColor;
+            transform: translate(-50%, 0);
+            transition: 1s;
+          }
+
+          &:after {
+            display: inline-block;
+            content: '\f061';
+            top: 100%;
+            margin-left: 0.5em;
+            line-height: 1em;
+            font-size: 1em;
+            font-family: 'Font Awesome 6 Pro';
+          }
+        }
 
-iam-fileupload::part(file) {
-  @include dark-mode() {
-    background: var(--colour-canvas-2);
-    border-color: var(--colour-canvas-2);
-    color: var(--colour-body);
+        &::after {
+          opacity: 0;
+          content: '\f422';
+          pointer-events: all;
+          top: 1.5rem;
+          right: 1.5rem;
+          left: auto;
+          position: absolute;
+          line-height: 1em;
+          font-size: 1em;
+          font-family: 'Font Awesome 6 Pro';
+        }
+
+        &:hover {
+          [role='presentation'] {
+            display: block;
+            font-family: var(--font-body);
+            font-weight: normal;
+            font-size: 1rem;
+            position: relative;
+            width: fit-content;
+
+            &:before {
+              width: 80%;
+            }
+          }
+        }
+      }
+
+      &:before {
+        content: '';
+        position: absolute;
+        display: block;
+        top: 30%;
+        left: 40%;
+        height: 70%;
+        aspect-ratio: 2 / 1;
+
+        background-image: var(--bg);
+        background-repeat: no-repeat;
+        background-size: cover;
+        border-radius: 0.5rem;
+        transition: 1s;
+      }
+
+      &:hover:before {
+        left: 35%;
+        top: 25%;
+        height: 75%;
+      }
+
+      &[open]:before {
+        left: 50% !important;
+        top: 30% !important;
+        height: 70% !important;
+      }
+
+      &::details-content {
+        opacity: 0;
+
+        padding: 0 1.5rem 1.5rem 1.5rem;
+        transition: 1s;
+
+        overflow: auto;
+      }
+    }
+
+    details {
+      summary:hover {
+        [role='presentation'] {
+          opacity: 1;
+        }
+      }
+    }
+
+    @container (width > 40em) {
+      details summary {
+        position: sticky;
+        top: 0;
+        left: 0;
+      }
+    }
+
+    details[open] {
+      &:not(.animating)::details-content {
+        opacity: 1;
+      }
+
+      > *:last-child {
+        padding-bottom: 0;
+        margin-bottom: 0;
+      }
+
+      summary {
+        pointer-events: none;
+        width: 100%;
+        max-width: 100%;
+        height: fit-content;
+
+        [role='presentation'] {
+          opacity: 0;
+        }
+
+        [role='presentation'] {
+          margin-bottom: -2rem;
+        }
+
+        &:after {
+          opacity: 1;
+        }
+      }
+    }
+
+    :is(details)::-webkit-scrollbar {
+      width: 4px;
+      height: 4px;
+    }
+
+    :is(details)::-webkit-scrollbar-track {
+      background-color: #00313c;
+      border-top: none;
+      border-left: 4px solid transparent;
+    }
+
+    :is(details)::-webkit-scrollbar-thumb {
+      background-color: white;
+      width: 4px;
+      border-top: none;
+      border-left: none;
+    }
+
+    details[open] {
+      position: relative;
+    }
+  }
+
+  @supports selector(::details-content) {
+    .notice {
+      display: none;
+    }
   }
 }

package/assets/sass/_corefiles.scss

@@ -1,32 +1,56 @@
 @use 'sass:math';
 @use '_func' as *;
 
-@layer reset, elements, components, templates, overrides, utilities;
-
 $root: ':root' !default;
 $layers: 'true' !default;
+$mobileOnly: 'false' !default;
+$darkMode: 'true' !default;
+$optionalText: 'true' !default;
 
 // Foundations
-@include layer('reset') {
-  @import 'foundations/root.scss';
-  @import 'foundations/reboot.scss';
-}
+@use 'foundations/root.scss' with (
+  $root: $root,
+  $layers: $layers,
+  $mobileOnly: $mobileOnly,
+  $darkMode: $darkMode
+);
 
-@include layer('elements') {
-  @import '_elements.scss';
-}
+@use 'foundations/reboot.scss' with (
+  $layers: $layers,
+  $mobileOnly: $mobileOnly,
+  $darkMode: $darkMode
+);
 
-@include layer('components') {
-  // Deal with preloaded state of native components
-  @import '_components.scss';
-}
+// Elements
+@use '_elements.scss' with (
+  $layers: $layers,
+  $mobileOnly: $mobileOnly,
+  $darkMode: $darkMode,
+  $optionalText: $optionalText
+);
 
-@include layer('templates') {
-  @import 'templates/form.scss';
-  @import 'templates/auth.scss';
-}
+// Components
+@use '_components.scss' with (
+  $layers: $layers,
+  $mobileOnly: $mobileOnly,
+  $darkMode: $darkMode
+);
+
+// Templates
+@use 'templates/form.scss' with (
+  $layers: $layers,
+  $mobileOnly: $mobileOnly,
+  $darkMode: $darkMode
+);
+
+@use 'templates/auth.scss' with (
+  $layers: $layers,
+  $mobileOnly: $mobileOnly,
+  $darkMode: $darkMode
+);
 
-@include layer('overrides') {
+// Overrides
+@include layer('overrides', $layers) {
   @media (prefers-reduced-motion) {
     * {
       transition: unset;

package/assets/sass/_elements.scss

@@ -1,23 +1,103 @@
-@import 'elements/brand.scss';
-@import 'elements/icons.scss';
-@import 'elements/media.scss';
-@import 'elements/type.scss';
+@use './func' as *;
+
+$layers: 'true' !default;
+$mobileOnly: 'false' !default;
+$darkMode: 'true' !default;
+$optionalText: 'true' !default;
+
+@use 'elements/brand.scss' with (
+  $layers: $layers,
+  $darkMode: $darkMode,
+  $mobileOnly: $mobileOnly
+);
+@use 'elements/icons.scss' with (
+  $layers: $layers,
+  $darkMode: $darkMode,
+  $mobileOnly: $mobileOnly
+);
+@use 'elements/media.scss' with (
+  $layers: $layers,
+  $darkMode: $darkMode,
+  $mobileOnly: $mobileOnly
+);
+@use 'elements/type.scss' with (
+  $layers: $layers,
+  $darkMode: $darkMode,
+  $mobileOnly: $mobileOnly
+);
 // elements
-@import 'elements/lists.scss';
-@import 'elements/tooltips.scss';
-@import 'elements/container.scss';
-@import 'elements/table.element.scss';
+@use 'elements/lists.scss' with (
+  $layers: $layers,
+  $darkMode: $darkMode,
+  $mobileOnly: $mobileOnly
+);
+@use 'elements/tooltips.scss' with (
+  $layers: $layers,
+  $darkMode: $darkMode,
+  $mobileOnly: $mobileOnly
+);
+@use 'elements/container.scss' with (
+  $layers: $layers,
+  $darkMode: $darkMode,
+  $mobileOnly: $mobileOnly
+);
+@use 'elements/table.element.scss' with (
+  $layers: $layers,
+  $darkMode: $darkMode,
+  $mobileOnly: $mobileOnly
+);
 
-@import 'elements/links.scss';
-@import 'elements/buttons';
-@import 'elements/dialog.scss';
-@import 'elements/popover.scss';
-@import 'elements/modal.scss';
-@import 'elements/admin-panel.scss';
+@use 'elements/links.scss' with (
+  $layers: $layers,
+  $darkMode: $darkMode,
+  $mobileOnly: $mobileOnly
+);
+@use 'elements/buttons' with (
+  $layers: $layers,
+  $darkMode: $darkMode,
+  $mobileOnly: $mobileOnly
+);
+@use 'elements/dialog.scss' with (
+  $layers: $layers,
+  $darkMode: $darkMode,
+  $mobileOnly: $mobileOnly
+);
+@use 'elements/popover.scss' with (
+  $layers: $layers,
+  $darkMode: $darkMode,
+  $mobileOnly: $mobileOnly
+);
+@use 'elements/modal.scss' with (
+  $layers: $layers,
+  $darkMode: $darkMode,
+  $mobileOnly: $mobileOnly
+);
+@use 'elements/admin-panel.scss' with (
+  $layers: $layers,
+  $darkMode: $darkMode,
+  $mobileOnly: $mobileOnly
+);
 
-@import 'elements/forms.scss';
+@use 'elements/forms.scss' with (
+  $layers: $layers,
+  $darkMode: $darkMode,
+  $mobileOnly: $mobileOnly,
+  $optionalText: $optionalText
+);
 
-@import 'elements/badge-tag.scss';
-@import 'elements/details.scss';
+@use 'elements/badge-tag.scss' with (
+  $layers: $layers,
+  $darkMode: $darkMode,
+  $mobileOnly: $mobileOnly
+);
+@use 'elements/details.scss' with (
+  $layers: $layers,
+  $darkMode: $darkMode,
+  $mobileOnly: $mobileOnly
+);
 
-@import 'elements/progress.scss';
+@use 'elements/progress.scss' with (
+  $layers: $layers,
+  $darkMode: $darkMode,
+  $mobileOnly: $mobileOnly
+);