@iamproperty/components 7.1.0--beta7 → 7.2.0

package/assets/sass/foundations/root.scss

@@ -1,164 +1,175 @@
+@use 'sass:map';
+
 @use '../func' as *;
 
-#{$root} {
-  @media (prefers-reduced-motion: no-preference) {
-    scroll-behavior: smooth;
-  }
+$root: ':root' !default;
+$layers: 'true' !default;
+$mobileOnly: 'false' !default;
+$darkMode: 'true' !default;
 
-  // Print out the $vars array setup in the variables file so they can be used as CSS vars
-  // Custom variable values only support SassScript inside `#{}`.
-  @each $var, $value in $vars {
-    #{$var}: #{$value};
-  }
+@layer legacy, reset, elements, components, templates, overrides, utilities;
 
-  // Add in media query based updates to the global vars like updating the heading 1 font size
-  @include media-breakpoint-up(sm) {
-    @each $var, $value in $varsSM {
+@include layer('reset', $layers) {
+  #{$root} {
+    // Print out the $vars array setup in the variables file so they can be used as CSS vars
+    // Custom variable values only support SassScript inside `#{}`.
+    @each $var, $value in $vars {
       #{$var}: #{$value};
     }
-  }
 
-  @include media-breakpoint-up(md) {
-    @each $var, $value in $varsMD {
-      #{$var}: #{$value};
+    // Wider colours
+    @each $colour, $value in $wider-colours {
+      --wider-colour-#{$colour}: #{$value};
     }
-  }
-
-  @media screen and (min-width: 36em) {
-    @each $var, $value in map-get($vars-responsive, 'sm') {
-      #{'--'+$var}: #{$value};
+    @each $colour, $value in $wider-colours-hover {
+      --wider-colour-#{$colour}-hover: #{$value};
     }
-  }
-  @media screen and (min-width: 62em) {
-    @each $var, $value in map-get($vars-responsive, 'md') {
-      #{'--'+$var}: #{$value};
+    @each $colour, $value in $wider-colours-active {
+      --wider-colour-#{$colour}-active: #{$value};
     }
-  }
 
-  // Wider colours
-  @each $colour, $value in $wider-colours {
-    --wider-colour-#{$colour}: #{$value};
-  }
-  @each $colour, $value in $wider-colours-hover {
-    --wider-colour-#{$colour}-hover: #{$value};
-  }
-  @each $colour, $value in $wider-colours-active {
-    --wider-colour-#{$colour}-active: #{$value};
-  }
+    // Extra vars needed
+    --content-max-width: #{$content-max-width};
+    --colour-brand: var(--colour-primary);
+
+    // Cards variables
+    --card-top-padding: 2rem;
+    --card-right-padding: #{rem(16+16+24)};
+    --card-bottom-padding: 2rem;
+    --card-left-padding: 1rem;
+    --card-border-radius: #{rem(8)};
+    --card-box-shadow: #{rem(2)} #{rem(3)} #{rem(6)} rgba(0, 0, 0, 0.2);
+    --nav-height: #{rem(96)};
+    --code-color: #d63384;
+
+    // Default borders
+    --border-width: 1px;
+    --border-style: solid;
+    --border-color: var(--colour-border);
+
+    --container-max-width: #{rem(1280)};
+    --padding-inline: 1.5rem;
+
+    @media (prefers-reduced-motion: no-preference) {
+      scroll-behavior: smooth;
+    }
 
-  // Extra vars needed
-  --content-max-width: #{$content-max-width};
-  --colour-brand: var(--colour-primary);
-
-  // Cards variables
-  --card-top-padding: 2rem;
-  --card-right-padding: #{rem(16+16+24)};
-  --card-bottom-padding: 2rem;
-  --card-left-padding: 1rem;
-  --card-border-radius: #{rem(8)};
-  --card-box-shadow: #{rem(2)} #{rem(3)} #{rem(6)} rgba(0, 0, 0, 0.2);
-  --nav-height: #{rem(96)};
-  --code-color: #d63384;
-
-  // Default borders
-  --border-width: 1px;
-  --border-style: solid;
-  --border-color: var(--colour-border);
-
-  --container-max-width: #{rem(1280)};
-  --padding-inline: 1.5rem;
-
-  @include media-breakpoint-up(sm) {
-    --padding-inline: 2.5rem;
-  }
-  @include media-breakpoint-up(md) {
-    --padding-inline: 5.25rem;
+    // Add in media query based updates to the global vars like updating the heading 1 font size
+    @include media-breakpoint-up(sm, $mobileOnly) {
+      @each $var, $value in $varsSM {
+        #{$var}: #{$value};
+      }
+    }
 
-    &:has(.nav--large) {
-      --container-max-width: #{rem(1920)} !important;
-      --padding-inline: #{rem(56)} !important;
-      --container-padding-x-md: #{rem(56)} !important;
-      --container-padding-md: var(--container-padding-top) var(--container-padding-x-md) var(--container-padding-bottom)
-        var(--container-padding-x-md);
-      --container-padding: var(--container-padding-md);
+    @include media-breakpoint-up(md, $mobileOnly) {
+      @each $var, $value in $varsMD {
+        #{$var}: #{$value};
+      }
     }
-  }
-}
 
-.reset-colours {
-  @each $color, $value in $theme-colors {
-    --colour-#{$color}: #{$value};
-  }
-  @include reset-colours();
-}
+    @media screen and (min-width: 36em) {
+      @each $var, $value in map.get($vars-responsive, 'sm') {
+        #{'--'+$var}: #{$value};
+      }
+    }
+    @media screen and (min-width: 62em) {
+      @each $var, $value in map.get($vars-responsive, 'md') {
+        #{'--'+$var}: #{$value};
+      }
+    }
 
-// Dark mode; functional colours get updated
-@include dark-mode() {
-  #{$root} {
-    @each $color, $value in $dark-mode-colors {
-      --colour-#{$color}: #{$value};
+    @include media-breakpoint-up(sm, $mobileOnly) {
+      --padding-inline: 2.5rem;
+    }
+    @include media-breakpoint-up(md, $mobileOnly) {
+      --padding-inline: 5.25rem;
+
+      &:has(.nav--large) {
+        --container-max-width: #{rem(1920)} !important;
+        --padding-inline: #{rem(56)} !important;
+        --container-padding-x-md: #{rem(56)} !important;
+        --container-padding-md: var(--container-padding-top) var(--container-padding-x-md)
+          var(--container-padding-bottom) var(--container-padding-x-md);
+        --container-padding: var(--container-padding-md);
+      }
     }
-    @include invert-colours();
   }
-}
 
-@include light-mode() {
-  // Reset the colours of lighter backgrounds to make sure they aren't over written by dark mode. Some other tweaks to colours are applied
-  html:not(.dark-theme)
-    [class*='bg-']:not(.bg-primary):not(.bg-dark):not(.bg-danger):not(.bg-white):not(.bg-admin):not(.bg-canvas):not(
-      .bg-canvas-2
-    ):not(.invert-colours) {
+  .reset-colours {
     @each $color, $value in $theme-colors {
       --colour-#{$color}: #{$value};
     }
     @include reset-colours();
-    --colour-body: var(--colour-primary);
-    color: var(--colour-body);
   }
 
-  // Override the colours when on a dark background, similiar to dark mode but on a module level
-  [class*='bg-']:not(.bg-info):not(.bg-success):not(.bg-light):not(.bg-warning):not(.bg-white):not(.bg-admin):not(
-      .bg-canvas
-    ):not(.bg-canvas-2):not(.prevent-invert),
-  .invert-colours {
-    @include invert-colours();
-
-    color: #{$colour-inverted};
+  // Dark mode; functional colours get updated
+  @include dark-mode($darkMode) {
+    #{$root} {
+      @each $color, $value in $dark-mode-colors {
+        --colour-#{$color}: #{$value};
+      }
+      @include invert-colours();
+    }
   }
-}
 
-@include dark-mode() {
-  // Reset the colours of lighter backgrounds to make sure they aren't over written by dark mode. Some other tweaks to colours are applied
-  [class*='bg-']:not(.bg-canvas):not(.bg-canvas-2):not(.bg-light) {
-    @include reset-colours();
-    --colour-body: #{$primary};
-    color: var(--colour-body);
-  }
+  @include light-mode($darkMode) {
+    // Reset the colours of lighter backgrounds to make sure they aren't over written by dark mode. Some other tweaks to colours are applied
+    html:not(.dark-theme)
+      [class*='bg-']:not(.bg-primary):not(.bg-dark):not(.bg-danger):not(.bg-white):not(.bg-admin):not(.bg-canvas):not(
+        .bg-canvas-2
+      ):not(.invert-colours) {
+      @each $color, $value in $theme-colors {
+        --colour-#{$color}: #{$value};
+      }
+      @include reset-colours();
+      --colour-body: var(--colour-primary);
+      color: var(--colour-body);
+    }
+
+    // Override the colours when on a dark background, similiar to dark mode but on a module level
+    [class*='bg-']:not(.bg-info):not(.bg-success):not(.bg-light):not(.bg-warning):not(.bg-white):not(.bg-admin):not(
+        .bg-canvas
+      ):not(.bg-canvas-2):not(.prevent-invert),
+    .invert-colours {
+      @include invert-colours();
 
-  @each $color, $value in $theme-colors {
-    .bg-#{$color}[class*='gradient-'] {
-      background-color: var(--colour-#{$color}-theme) !important;
+      color: #{$colour-inverted};
     }
   }
 
-  [class*='bg-'][class*='gradient-']:not(.bg-primary):not(.bg-dark):not(.bg-danger) {
+  @include dark-mode($darkMode) {
+    // Reset the colours of lighter backgrounds to make sure they aren't over written by dark mode. Some other tweaks to colours are applied
+    [class*='bg-']:not(.bg-canvas):not(.bg-canvas-2):not(.bg-light) {
+      @include reset-colours();
+      --colour-body: #{$primary};
+      color: var(--colour-body);
+    }
+
     @each $color, $value in $theme-colors {
-      --colour-#{$color}: #{$value};
+      .bg-#{$color}[class*='gradient-'] {
+        background-color: var(--colour-#{$color}-theme) !important;
+      }
     }
-    @include reset-colours();
-    --colour-body: var(--colour-primary-theme);
-    color: var(--colour-body);
-  }
 
-  [class*='bg-'][class*='gradient-']:not(.bg-info):not(.bg-success):not(.bg-warning):not(.prevent-invert) {
-    @include invert-colours();
+    [class*='bg-'][class*='gradient-']:not(.bg-primary):not(.bg-dark):not(.bg-danger) {
+      @each $color, $value in $theme-colors {
+        --colour-#{$color}: #{$value};
+      }
+      @include reset-colours();
+      --colour-body: var(--colour-primary-theme);
+      color: var(--colour-body);
+    }
 
-    color: #{$colour-inverted};
+    [class*='bg-'][class*='gradient-']:not(.bg-info):not(.bg-success):not(.bg-warning):not(.prevent-invert) {
+      @include invert-colours();
+
+      color: #{$colour-inverted};
+    }
   }
-}
 
-@media (forced-colors: active) {
-  #{$root} {
-    --contrast-outline-width: 1px;
+  @media (forced-colors: active) {
+    #{$root} {
+      --contrast-outline-width: 1px;
+    }
   }
 }

package/assets/sass/helpers/max-height.scss

@@ -39,7 +39,7 @@
   max-height: calc(#{rem(600)} - var(--mh-modifier, 0rem));
 }
 
-@include media-breakpoint-up(sm) {
+@include media-breakpoint-up(sm, $mobileOnly) {
   :is(.mh-sm-sm, .mh-sm-md, .mh-sm-lg) {
     overflow: auto;
     overscroll-behavior: contain;
@@ -62,7 +62,7 @@
   }
 }
 
-@include media-breakpoint-up(md) {
+@include media-breakpoint-up(md, $mobileOnly) {
   :is(.mh-md-sm, .mh-md-md, .mh-md-lg) {
     overflow: auto;
     overscroll-behavior: contain;

package/assets/sass/main.scss

@@ -1,9 +1,17 @@
 @charset "UTF-8";
 
 @use '_fonts';
-@use '_corefiles';
-@import '_grid';
-@import '_bs_grid';
-@import '_utilities';
-@import '_utility-mixins';
-@import '_print';
+@use '_corefiles' with (
+  $layers: 'true',
+  $mobileOnly: 'false',
+  $darkMode: 'true'
+);
+@use '_grid' with (
+  $mobileOnly: 'false',
+  $darkMode: 'true'
+);
+@use '_utility-mixins' with (
+  $mobileOnly: 'false',
+  $darkMode: 'true'
+);
+@use '_print';

package/assets/sass/mobile-core.scss

@@ -0,0 +1,14 @@
+@charset "UTF-8";
+
+$root: ':root' !default;
+$layers: 'true' !default;
+$mobileOnly: 'false' !default;
+$darkMode: 'true' !default;
+
+@use '_fonts';
+@use '_corefiles.scss' with (
+  $root: $root,
+  $layers: $layers,
+  $mobileOnly: 'true',
+  $darkMode: $darkMode
+);

package/assets/sass/mobile.scss

@@ -0,0 +1,16 @@
+@charset "UTF-8";
+
+@use '_fonts';
+@use '_corefiles' with (
+  $layers: 'true',
+  $mobileOnly: 'true',
+  $darkMode: 'true'
+);
+@use '_grid' with (
+  $mobileOnly: 'true',
+  $darkMode: 'true'
+);
+@use '_utility-mixins' with (
+  $mobileOnly: 'true',
+  $darkMode: 'true'
+);

package/assets/sass/templates/auth.scss

@@ -1,105 +1,110 @@
 @use '../_func' as *;
 
-body:has(.template--auth) {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  background-color: var(--colour-canvas-2);
-}
-
-.template--auth {
-  --padding-top: #{rem(24)};
-  --brand-size: #{rem(36)};
+$layers: 'true' !default;
+$mobileOnly: 'false' !default;
+$darkMode: 'true' !default;
 
-  @include media-breakpoint-up(md) {
-    --padding-top: #{rem(40)};
-    --brand-size: #{rem(64)};
+@include layer('templates', $layers) {
+  body:has(.template--auth) {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    background-color: var(--colour-canvas-2);
   }
 
-  display: flex;
-  flex-wrap: wrap;
-  max-width: rem(1280);
-  margin-inline: auto;
+  .template--auth {
+    --padding-top: #{rem(24)};
+    --brand-size: #{rem(36)};
 
-  main {
     display: flex;
-    flex-direction: column;
-    min-height: 100vh;
-    padding-top: var(--padding-top);
-    padding-bottom: var(--padding-top);
-    padding-inline: var(--container-padding-x);
-
-    @include media-breakpoint-up(md) {
-      flex: 0 0 auto;
-      width: 43.75%;
-      padding-inline-end: calc(var(--container-padding-x) - rem(16));
-    }
+    flex-wrap: wrap;
+    max-width: rem(1280);
+    margin-inline: auto;
 
-    .brand {
-      font-size: var(--brand-size);
-      padding-top: 0;
-    }
-  }
-
-  aside {
-    display: none;
-
-    @include media-breakpoint-up(md) {
-      display: block;
-      flex: 0 0 auto;
-      width: 56.25%;
-      padding-inline: var(--container-padding-x) !important;
-      padding-block: var(--padding-top);
-      position: relative;
-      overflow: hidden;
+    @include media-breakpoint-up(md, $mobileOnly) {
+      --padding-top: #{rem(40)};
+      --brand-size: #{rem(64)};
     }
 
-    background-color: var(--colour-primary-theme);
+    main {
+      display: flex;
+      flex-direction: column;
+      min-height: 100vh;
+      padding-top: var(--padding-top);
+      padding-bottom: var(--padding-top);
+      padding-inline: var(--container-padding-x);
+
+      @include media-breakpoint-up(md, $mobileOnly) {
+        flex: 0 0 auto;
+        width: 43.75%;
+        padding-inline-end: calc(var(--container-padding-x) - rem(16));
+      }
 
-    @include light-mode() {
-      background-color: #e9f9fd;
+      .brand {
+        font-size: var(--brand-size);
+        padding-top: 0;
+      }
     }
 
-    > figure {
-      position: relative;
-      display: block;
-      margin-top: calc(var(--padding-top) * -1);
-      margin-inline: calc(var(--container-padding-x-md) * -1);
-      min-width: calc(100% + var(--container-padding-x-md) + var(--container-padding-x-md));
-      margin-bottom: rem(40);
-      max-height: rem(400);
-      clip-path: ellipse(70% 80% at 50% 20%);
-      rotate: -5deg;
-
-      &:after {
-        content: '';
-        position: absolute;
+    aside {
+      display: none;
+      background-color: var(--colour-primary-theme);
+
+      @include media-breakpoint-up(md, $mobileOnly) {
         display: block;
+        flex: 0 0 auto;
+        width: 56.25%;
+        padding-inline: var(--container-padding-x) !important;
+        padding-block: var(--padding-top);
+        position: relative;
+        overflow: hidden;
+      }
 
-        right: -2rem;
-        left: -2rem;
-        bottom: -1rem;
-        height: 50%;
+      @include light-mode($darkMode) {
+        background-color: #e9f9fd;
+      }
 
+      > figure {
+        position: relative;
+        display: block;
+        margin-top: calc(var(--padding-top) * -1);
+        margin-inline: calc(var(--container-padding-x-md) * -1);
+        min-width: calc(100% + var(--container-padding-x-md) + var(--container-padding-x-md));
+        margin-bottom: rem(40);
+        max-height: rem(400);
+        clip-path: ellipse(70% 80% at 50% 20%);
         rotate: -5deg;
-        background: linear-gradient(
-          0deg,
-          rgba(0, 49, 60, 1) 0%,
-          rgba(28, 182, 226, 0.45) 40%,
-          rgba(28, 182, 226, 0) 100%
-        );
-        opacity: 0.9;
+
+        &:after {
+          content: '';
+          position: absolute;
+          display: block;
+
+          right: -2rem;
+          left: -2rem;
+          bottom: -1rem;
+          height: 50%;
+
+          rotate: -5deg;
+          background: linear-gradient(
+            0deg,
+            rgba(0, 49, 60, 1) 0%,
+            rgba(28, 182, 226, 0.45) 40%,
+            rgba(28, 182, 226, 0) 100%
+          );
+          opacity: 0.9;
+        }
       }
-    }
 
-    img {
-      margin-inline: rem(-24);
-      min-width: calc(100% + rem(24) + rem(24));
-      margin-top: rem(-12);
-      max-height: rem(424);
-      object-fit: cover;
-      object-position: 50% 50%;
-      rotate: 5deg;
+      img {
+        margin-inline: rem(-24);
+        min-width: calc(100% + rem(24) + rem(24));
+        margin-top: rem(-12);
+        max-height: rem(424);
+        object-fit: cover;
+        object-position: 50% 50%;
+        rotate: 5deg;
+      }
     }
   }
 }