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

package/assets/sass/elements/container.scss

@@ -1,155 +1,118 @@
-@use 'sass:math';
-@use '../_func' as *;
-
-
-
-
-
-@layer elements {
-  // #region contain
-  // #region container
-  .container {
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-
-    container-type: inline-size;
-    width: 100%;
-
-    &:not([class*='col-']){
-
-      grid-column: container !important;
-      padding: var(--container-padding);
-    }
-
-    &:not(:has(.row)):has([class*='col-']) {
-      display: grid;
-      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];
-      column-gap: 1rem;
-    }
-
-    [class*='col-span-']:not([class*='-col-span-']):not(:first-child) {
-      --col-start: auto;
-    }
-
-    @media screen and (min-width: 36em) {
-      [class*='sm-col-span-']:not(:first-child) {
-        --col-start: auto;
-      }
-    }
-
-    @media screen and (min-width: 62em) {
-      [class*='md-col-span-']:not(:first-child) {
-        --col-start: auto;
-      }
-    }
-
-    &:not(.container-fluid) {
-      max-width: var(--container-max-width);
-    }
-
-    .container:not(.container-xs-breakout) {
-      padding-left: 0;
-      padding-right: 0;
-      padding-bottom: 0;
-      padding-top: 0;
-    }
-
-    &[class*='bg-'] {
-      padding-top: 3rem;
-      padding-bottom: 2rem;
-    }
-
-    &[class*='bg-'] + .container:not([class*='bg-']) {
-      padding-top: 2rem;
-    }
-
-    // Fix the clearing for containers
-    &:before {
-      display: table;
-      clear: both;
-      content: '';
-    }
-    &:after {
-      display: table;
-      clear: both;
-      content: '';
-    }
-
-    &.container-xs-breakout {
-      margin-left: -1.25rem;
-      margin-right: -1.25rem;
-      width: calc(100% + 2.5rem);
-
-      @media screen and (min-width: 36em) {
-        margin-left: auto;
-        margin-right: auto;
-        width: 100%;
-      }
-    }
-  }
-
-  :host .container {
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-    padding: var(--container-padding);
-    width: 100%;
-  }
-
-  // replicate container padding-bottom
-  main > .row {
-    padding-bottom: 1rem;
-
-    &[class*='bg-'] {
-      padding-top: 3rem;
-      padding-bottom: 2rem;
-    }
-
-    &[class*='bg-'] + :is(.row, .container):not([class*='bg-']) {
-      padding-top: 2rem;
-    }
-  }
-  // #endregion
-
-  // #region Circles
-  .container {
-    &:has(.circle) {
-      position: relative;
-      z-index: 1;
-    }
-
-    > .circle {
-      position: absolute;
-      z-index: var(--index-below);
-      border-width: 3px;
-    }
-
-    // Default pattern
-    &:not([class*='circle-pattern-']) > .circle {
-      font-size: 18.75rem; /* (300) */
-      top: -4.6875rem;
-      left: -12.5rem; /* -200 */
-    }
-
-    &:not([class*='circle-pattern-']) > .circle ~ .circle {
-      font-size: 21.875rem;
-      top: auto;
-      left: auto;
-      right: -6.25rem;
-      bottom: -12.5rem; /* -200 */
-    }
-  }
-  // #endregion
-}
+@layer elements {
+
+  /* #region container */
+  .container {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+
+    container-type: inline-size;
+    width: 100%;
+
+    &:not([class*='col-']){
+
+      grid-column: container !important;
+      padding: var(--container-padding);
+    }
+
+    &:not(:has(.row)):has([class*='col-']) {
+      display: grid;
+      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];
+      column-gap: 1rem;
+    }
+
+    [class*='col-span-']:not([class*='-col-span-']):not(:first-child) {
+      --col-start: auto;
+    }
+
+    @media screen and (min-width: 36em) {
+      [class*='sm-col-span-']:not(:first-child) {
+        --col-start: auto;
+      }
+    }
+
+    @media screen and (min-width: 62em) {
+      [class*='md-col-span-']:not(:first-child) {
+        --col-start: auto;
+      }
+    }
+
+    &:not(.container-fluid) {
+      max-width: var(--container-max-width);
+    }
+
+    .container:not(.container-xs-breakout) {
+      padding-left: 0;
+      padding-right: 0;
+      padding-bottom: 0;
+      padding-top: 0;
+    }
+
+    &[class*='bg-'] {
+      padding-top: 3rem;
+      padding-bottom: 2rem;
+    }
+
+    &[class*='bg-'] + .container:not([class*='bg-']) {
+      padding-top: 2rem;
+    }
+
+    /* Fix the clearing for containers */
+    &:before {
+      display: table;
+      clear: both;
+      content: '';
+    }
+    &:after {
+      display: table;
+      clear: both;
+      content: '';
+    }
+
+    &.container-xs-breakout {
+      margin-left: -1.25rem;
+      margin-right: -1.25rem;
+      width: calc(100% + 2.5rem);
+
+      @media screen and (min-width: 36em) {
+        margin-left: auto;
+        margin-right: auto;
+        width: 100%;
+      }
+    }
+  }
+
+  :host .container {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    padding: var(--container-padding);
+    width: 100%;
+  }
+
+  /* replicate container padding-bottom */
+  main > .row {
+    padding-bottom: 1rem;
+
+    &[class*='bg-'] {
+      padding-top: 3rem;
+      padding-bottom: 2rem;
+    }
+
+    &[class*='bg-'] + :is(.row, .container):not([class*='bg-']) {
+      padding-top: 2rem;
+    }
+  }
+  /* #endregion */
+}