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

package/assets/sass/_grid.scss

@@ -1,320 +1,320 @@
-@use 'sass:math';
-@use 'sass:map';
-@use '_func' as *;
-
-$columns: 12;
-$rows-per-page: 20;
-$grid-utility-count: 10;
-
-$breakpoints: (
-  sm: 36em,
-  /* 576 */ md: 62em /* 992 */,
-);
-
-// #region grid mixins
-@mixin grid-utilities($br: '') {
-  .#{$br}inline-start {
-    justify-self: start;
-  }
-
-  .#{$br}block-start {
-    align-self: start;
-  }
-
-  .#{$br}inline-center {
-    justify-self: center;
-  }
-
-  .#{$br}block-center {
-    align-self: center;
-  }
-
-  .#{$br}inline-end {
-    justify-self: end;
-  }
-
-  .#{$br}block-end {
-    align-self: end;
-  }
-
-  .#{$br}display-contents {
-    display: contents;
-  }
-
-  .#{$br}display-none {
-    display: none;
-  }
-
-  .#{$br}display-block {
-    display: block;
-  }
-
-  .#{$br}display-grid {
-    display: grid;
-  }
-
-  .#{$br}flow-dense {
-    // Apply to a wrapper div of the items
-    grid-auto-flow: dense;
-  }
-
-  @for $i from 0 to $grid-utility-count {
-    .#{$br}order-#{$i + 1} {
-      order: #{$i + 1};
-    }
-  }
-}
-
-@mixin grid-columns($br: '') {
-  *:not(:where(main)):has(> [class*='#{$br}col-']) {
-    display: grid;
-    grid-template-columns: subgrid;
-  }
-
-  .#{$br}col-start-auto {
-    --col-start: auto;
-
-    &:first-child {
-      --col-start: col-1;
-    }
-  }
-  
-  hr + .#{$br}col-start-auto {
-    --col-start: col-1;
-  }
-
-  @for $i from 0 to $columns {
-    .#{$br}col-start-#{$i + 1} {
-      --col-start: col-#{$i + 1}-start !important;
-    }
-
-    .#{$br}col-end-#{$i + 1} {
-      --col-end: col-#{$i + 1}-end;
-
-      & + .#{$br}col-start-auto:not([class*="col-span-"]) {
-        --col-start: col-#{$i + 2}-start;
-      }
-    }
-
-    .#{$br}col-span-#{$i + 1} {
-      --col-end: span #{$i + 1};
-      
-      & + .#{$br}col-start-auto:not([class*="col-span-"]) {
-        --col-start: col-#{$i + 2}-start;
-      }
-    }
-  }
-}
-
-@mixin grid-rows($br: '') {
-  // Assign how many rows an item takes
-  @for $i from 0 to $grid-utility-count {
-    .#{$br}row-span-#{$i + 1} {
-      --row-span: #{$i + 1};
-    }
-  }
-
-  // Move the item to a set row
-  @for $i from 0 to $rows-per-page {
-    .#{$br}row-start-#{$i + 1} {
-      --row-start: #{$i + 1};
-    }
-  }
-}
-// #endregion
-
-@layer reset {
-  // #region Main grid setup
-  body {
-    --excess-space: calc((100% - var(--max-width)) / 2);
-    --col-size: calc(
-      (
-          100% - max(0%, var(--excess-space)) - max(0%, var(--excess-space)) - var(--gutter) - var(--gutter) - (var(--gap) * (#{$columns - 1}))
-        ) / #{$columns}
-    );
-    column-gap: var(--gap);
-    display: grid;
-    margin-inline: 0;
-    width: 100%;
-    grid-template-rows: auto;
-    align-content: start;
-    justify-content: center;
-
-    $templateColumns: '';
-
-    @for $i from 1 to $columns {
-      $templateColumns: $templateColumns + 'var(--col-size) [col-' + $i + '-end col-'+ ($i + 1)+'-start] ';
-    }
-    grid-template-columns:
-      [full-width-start container-start] calc(var(--gutter) - var(--gap))
-      [content-start col-1-start]
-      #{$templateColumns}
-      var(--col-size) [col-#{$columns}-end content-end] calc(var(--gutter) - var(--gap))
-      [container-end full-width-end];
-
-    @media screen and (min-width: #{em(1280 * 1.125)}) {
-      grid-template-columns:
-        [full-width-start] calc(var(--excess-space) - var(--gap))
-        [container-start] calc(var(--gutter) - var(--gap))
-        [content-start col-1-start]
-        #{$templateColumns}
-        var(--col-size) [col-#{$columns}-end content-end] calc(var(--gutter) - var(--gap))
-        [container-end] calc(var(--excess-space) - var(--gap)) [full-width-end];
-    }
-
-    & * {
-      grid-column: content;
-
-      &:where(button):not(:has(.card)) {
-        max-width: fit-content;
-        place-self: start;
-      }
-
-      &:is(div) {
-        align-content: start;
-      }
-    }
-  }
-
-  div:has(main) {
-    display: contents !important;
-  }
-
-  :is(nav, main, footer) {
-    display: grid;
-    grid-column: full-width !important;
-    grid-template-columns: subgrid;
-  }
-
-  *:not(.row) > main:not(:has(.container:last-child)):not(:has(iam-collapsible-side:last-child)) {
-    padding-bottom: 1rem;
-  }
-
-  main > :is(.full-width, [class*='bg-']:has(.container), iam-header, iam-collapsible-side, iam-notification) {
-    grid-column: full-width;
-  }
-
-  [class*='bg-']:not([class*='col-']):has(.container) {
-    display: grid;
-    grid-column: full-width;
-    grid-template-columns: subgrid;
-  }
-  // #endregion
-
-  // #region Grid utility classes
-  .grid {
-    display: grid !important;
-    grid-template-columns: subgrid !important;
-    
-    > * {
-      grid-column: var(--col-start, col-1-start) / var(--col-end, col-#{$columns}-end);
-    }
-  }
-  .sub-grid {
-
-    display: grid !important;
-    grid-template-rows: auto !important;
-    grid-template-columns: [content-start col-1-start] 1fr [col-1-end col-2-start] 1fr [col-2-end col-3-start] 1fr [col-3-end col-4-start] 1fr [col-4-end col-5-start] 1fr [col-5-end col-6-start] 1fr [col-6-end col-7-start] 1fr [col-7-end col-8-start] 1fr [col-8-end col-9-start] 1fr [col-9-end col-10-start] 1fr [col-10-end col-11-start] 1fr [col-11-end col-12-start] 1fr [col-12-end content-end] !important;
-    column-gap: var(--gap) !important;
-
-    > * {
-      grid-column: var(--col-start, col-1-start) / var(--col-end, col-#{$columns}-end);
-    }
-  }
-
-  *:has([class*='order-']:not([class*="border-"])) > *:not([class*='order-']) {
-    order: 99;
-  }
-
-  @include grid-utilities();
-  
-  @media screen and (min-width: 36em) {
-    @include grid-utilities(#{'sm-'});
-  }
-  @media screen and (min-width: 62em) {
-    @include grid-utilities(#{'md-'});
-  }
-  // #endregion
-
-  // #region Create the columns
-  :is([class*='col-start-'], [class*='col-end-'], [class*='col-span-']) {
-    grid-column: var(--col-start, col-1-start) / var(--col-end, col-#{$columns}-end);
-  }
-
-  *:not(:where(html, body)):has(
-      :is([class*='cols-'], [class*='col-start-'], [class*='col-end-'], [class*='col-span-'])
-    ) {
-    display: grid;
-    grid-template-columns: subgrid;
-
-    [class*='col-']:not([class*='col-start-auto']) {
-      --col-start: col-1;
-    }
-
-    [class*='col-'] [class*='col-'] {
-      --col-start: auto;
-    }
-
-    * {
-      grid-column: var(--col-start, col-1-start) / var(--col-end, col-#{$columns}-end);
-    }
-  }
-
-  @include grid-columns();
-  @media screen and (min-width: 36em) {
-    @include grid-columns(#{'sm-'});
-  }
-  @media screen and (min-width: 62em) {
-    @include grid-columns(#{'md-'});
-  }
-  // #endregion
-
-  // #region Create rows
-  :where([class*='row-'], [class*='rows-']) {
-    grid-row: var(--row-start, auto) / span var(--row-span, 1);
-  }
-
-  @include grid-rows();
-  @media screen and (min-width: 36em) {
-    @include grid-rows(#{'sm-'});
-  }
-  @media screen and (min-width: 62em) {
-    @include grid-rows(#{'md-'});
-  }
-  // #endregion
-
-  // #region Create the Columns wrappers
-  [class*='cols-']:not(.row) {
-    display: grid;
-    grid-template-columns: subgrid;
-  }
-
-  @for $i from 1 to math.floor(math.div($columns, 2)) + 1 {
-    $count: math.div($columns, $i);
-
-    .cols-#{$i} > * {
-      grid-column: auto / span #{math.floor($count)};
-    }
-  }
-  
-  @media screen and (min-width: 36em) {
-    @for $i from 1 to math.floor(math.div($columns, 2)) + 1 {
-      $count: math.div($columns, $i);
-
-      .sm-cols-#{$i} > * {
-        grid-column: auto / span #{math.floor($count)};
-      }
-    }
-  }
-  @media screen and (min-width: 62em) {
-    @for $i from 1 to math.floor(math.div($columns, 2)) + 1 {
-      $count: math.div($columns, $i);
-
-      .md-cols-#{$i} > * {
-        grid-column: auto / span #{math.floor($count)};
-      }
-    }
-  }
-
-  // #endregion
-}
+@use 'sass:math';
+@use 'sass:map';
+@use '_func' as *;
+
+$columns: 12;
+$rows-per-page: 20;
+$grid-utility-count: 10;
+
+$breakpoints: (
+  sm: 36em,
+  /* 576 */ md: 62em /* 992 */,
+);
+
+/* #region grid mixins */
+@mixin grid-utilities($br: '') {
+  .#{$br}inline-start {
+    justify-self: start;
+  }
+
+  .#{$br}block-start {
+    align-self: start;
+  }
+
+  .#{$br}inline-center {
+    justify-self: center;
+  }
+
+  .#{$br}block-center {
+    align-self: center;
+  }
+
+  .#{$br}inline-end {
+    justify-self: end;
+  }
+
+  .#{$br}block-end {
+    align-self: end;
+  }
+
+  .#{$br}display-contents {
+    display: contents;
+  }
+
+  .#{$br}display-none {
+    display: none;
+  }
+
+  .#{$br}display-block {
+    display: block;
+  }
+
+  .#{$br}display-grid {
+    display: grid;
+  }
+
+  .#{$br}flow-dense {
+    /*  Apply to a wrapper div of the items */
+    grid-auto-flow: dense;
+  }
+
+  @for $i from 0 to $grid-utility-count {
+    .#{$br}order-#{$i + 1} {
+      order: #{$i + 1};
+    }
+  }
+}
+
+@mixin grid-columns($br: '') {
+  *:not(:where(main)):has(> [class*='#{$br}col-']) {
+    display: grid;
+    grid-template-columns: subgrid;
+  }
+
+  .#{$br}col-start-auto {
+    --col-start: auto;
+
+    &:first-child {
+      --col-start: col-1;
+    }
+  }
+  
+  hr + .#{$br}col-start-auto {
+    --col-start: col-1;
+  }
+
+  @for $i from 0 to $columns {
+    .#{$br}col-start-#{$i + 1} {
+      --col-start: col-#{$i + 1}-start !important;
+    }
+
+    .#{$br}col-end-#{$i + 1} {
+      --col-end: col-#{$i + 1}-end;
+
+      & + .#{$br}col-start-auto:not([class*="col-span-"]) {
+        --col-start: col-#{$i + 2}-start;
+      }
+    }
+
+    .#{$br}col-span-#{$i + 1} {
+      --col-end: span #{$i + 1};
+      
+      & + .#{$br}col-start-auto:not([class*="col-span-"]) {
+        --col-start: col-#{$i + 2}-start;
+      }
+    }
+  }
+}
+
+@mixin grid-rows($br: '') {
+  /*  Assign how many rows an item takes */
+  @for $i from 0 to $grid-utility-count {
+    .#{$br}row-span-#{$i + 1} {
+      --row-span: #{$i + 1};
+    }
+  }
+
+  /*  Move the item to a set row */
+  @for $i from 0 to $rows-per-page {
+    .#{$br}row-start-#{$i + 1} {
+      --row-start: #{$i + 1};
+    }
+  }
+}
+/* #endregion */
+
+@layer reset {
+  /* #region Main grid setup */
+  body {
+    --excess-space: calc((100% - var(--max-width)) / 2);
+    --col-size: calc(
+      (
+          100% - max(0%, var(--excess-space)) - max(0%, var(--excess-space)) - var(--gutter) - var(--gutter) - (var(--gap) * (#{$columns - 1}))
+        ) / #{$columns}
+    );
+    column-gap: var(--gap);
+    display: grid;
+    margin-inline: 0;
+    width: 100%;
+    grid-template-rows: auto;
+    align-content: start;
+    justify-content: center;
+
+    $templateColumns: '';
+
+    @for $i from 1 to $columns {
+      $templateColumns: $templateColumns + 'var(--col-size) [col-' + $i + '-end col-'+ ($i + 1)+'-start] ';
+    }
+    grid-template-columns:
+      [full-width-start container-start] calc(var(--gutter) - var(--gap))
+      [content-start col-1-start]
+      #{$templateColumns}
+      var(--col-size) [col-#{$columns}-end content-end] calc(var(--gutter) - var(--gap))
+      [container-end full-width-end];
+
+    @media screen and (min-width: #{em(1280 * 1.125)}) {
+      grid-template-columns:
+        [full-width-start] calc(var(--excess-space) - var(--gap))
+        [container-start] calc(var(--gutter) - var(--gap))
+        [content-start col-1-start]
+        #{$templateColumns}
+        var(--col-size) [col-#{$columns}-end content-end] calc(var(--gutter) - var(--gap))
+        [container-end] calc(var(--excess-space) - var(--gap)) [full-width-end];
+    }
+
+    & * {
+      grid-column: content;
+
+      &:where(button):not(:has(.card)) {
+        max-width: fit-content;
+        place-self: start;
+      }
+
+      &:is(div) {
+        align-content: start;
+      }
+    }
+  }
+
+  div:has(main) {
+    display: contents !important;
+  }
+
+  :is(nav, main, footer) {
+    display: grid;
+    grid-column: full-width !important;
+    grid-template-columns: subgrid;
+  }
+
+  *:not(.row) > main:not(:has(.container:last-child)):not(:has(iam-collapsible-side:last-child)) {
+    padding-bottom: 1rem;
+  }
+
+  main > :is(.full-width, [class*='bg-']:has(.container), iam-header, iam-collapsible-side, iam-notification) {
+    grid-column: full-width;
+  }
+
+  [class*='bg-']:not([class*='col-']):has(.container) {
+    display: grid;
+    grid-column: full-width;
+    grid-template-columns: subgrid;
+  }
+  /* #endregion */
+
+  /* #region Grid utility classes */
+  .grid {
+    display: grid !important;
+    grid-template-columns: subgrid !important;
+    
+    > * {
+      grid-column: var(--col-start, col-1-start) / var(--col-end, col-#{$columns}-end);
+    }
+  }
+  .sub-grid {
+
+    display: grid !important;
+    grid-template-rows: auto !important;
+    grid-template-columns: [content-start col-1-start] 1fr [col-1-end col-2-start] 1fr [col-2-end col-3-start] 1fr [col-3-end col-4-start] 1fr [col-4-end col-5-start] 1fr [col-5-end col-6-start] 1fr [col-6-end col-7-start] 1fr [col-7-end col-8-start] 1fr [col-8-end col-9-start] 1fr [col-9-end col-10-start] 1fr [col-10-end col-11-start] 1fr [col-11-end col-12-start] 1fr [col-12-end content-end] !important;
+    column-gap: var(--gap) !important;
+
+    > * {
+      grid-column: var(--col-start, col-1-start) / var(--col-end, col-#{$columns}-end);
+    }
+  }
+
+  *:has([class*='order-']:not([class*="border-"])) > *:not([class*='order-']) {
+    order: 99;
+  }
+
+  @include grid-utilities();
+  
+  @media screen and (min-width: 36em) {
+    @include grid-utilities(#{'sm-'});
+  }
+  @media screen and (min-width: 62em) {
+    @include grid-utilities(#{'md-'});
+  }
+  /* #endregion */
+
+  /* #region Create the columns */
+  :is([class*='col-start-'], [class*='col-end-'], [class*='col-span-']) {
+    grid-column: var(--col-start, col-1-start) / var(--col-end, col-#{$columns}-end);
+  }
+
+  *:not(:where(html, body)):has(
+      :is([class*='cols-'], [class*='col-start-'], [class*='col-end-'], [class*='col-span-'])
+    ) {
+    display: grid;
+    grid-template-columns: subgrid;
+
+    [class*='col-']:not([class*='col-start-auto']) {
+      --col-start: col-1;
+    }
+
+    [class*='col-'] [class*='col-'] {
+      --col-start: auto;
+    }
+
+    * {
+      grid-column: var(--col-start, col-1-start) / var(--col-end, col-#{$columns}-end);
+    }
+  }
+
+  @include grid-columns();
+  @media screen and (min-width: 36em) {
+    @include grid-columns(#{'sm-'});
+  }
+  @media screen and (min-width: 62em) {
+    @include grid-columns(#{'md-'});
+  }
+  /* #endregion */
+
+  /* #region Create rows */
+  :where([class*='row-'], [class*='rows-']) {
+    grid-row: var(--row-start, auto) / span var(--row-span, 1);
+  }
+
+  @include grid-rows();
+  @media screen and (min-width: 36em) {
+    @include grid-rows(#{'sm-'});
+  }
+  @media screen and (min-width: 62em) {
+    @include grid-rows(#{'md-'});
+  }
+  /* #endregion */
+
+  /* #region Create the Columns wrappers */
+  [class*='cols-']:not(.row) {
+    display: grid;
+    grid-template-columns: subgrid;
+  }
+
+  @for $i from 1 to math.floor(math.div($columns, 2)) + 1 {
+    $count: math.div($columns, $i);
+
+    .cols-#{$i} > * {
+      grid-column: auto / span #{math.floor($count)};
+    }
+  }
+  
+  @media screen and (min-width: 36em) {
+    @for $i from 1 to math.floor(math.div($columns, 2)) + 1 {
+      $count: math.div($columns, $i);
+
+      .sm-cols-#{$i} > * {
+        grid-column: auto / span #{math.floor($count)};
+      }
+    }
+  }
+  @media screen and (min-width: 62em) {
+    @for $i from 1 to math.floor(math.div($columns, 2)) + 1 {
+      $count: math.div($columns, $i);
+
+      .md-cols-#{$i} > * {
+        grid-column: auto / span #{math.floor($count)};
+      }
+    }
+  }
+
+  /* #endregion */
+}