@iqual/nuxt-icms 1.4.10 → 1.5.0

package/assets/css/components/grid-container.css

@@ -1,296 +1,346 @@
-@layer components {
-  :root {
-    --container-max-width: 1380px;
-    --container-max-width-bk: calc(1380px * 0.8); /* 80vw coming from blokkli */
-
-    --container-gutter-width-2xs: theme(spacing.4);
-    --container-gutter-width-xs: theme(spacing.4);
-    --container-gutter-width-sm: theme(spacing.4);
-    --container-gutter-width-md: theme(spacing.6);
-    --container-gutter-width-lg: theme(spacing.6);
-    --container-gutter-width-xl: theme(spacing.6);
-
-    --container-x-margin-2xs: theme(spacing.4);
-    --container-x-margin-xs: theme(spacing.4);
-    --container-x-margin-sm: theme(spacing.4);
-    --container-x-margin-md: theme(spacing.8);
-    --container-x-margin-lg: theme(spacing.12);
-    --container-x-margin-xl: auto;
-
-    --container-columns-2xs: 1fr 1fr 1fr 1fr; /* 4 */
-    --container-columns-xs: 1fr 1fr 1fr 1fr; /* 4 */
-    --container-columns-sm: 1fr 1fr 1fr 1fr 1fr 1fr; /* 6 */
-    --container-columns-md: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; /* 8 */
-    --container-columns-lg: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; /* 12 */
-
-    --container-columns-width-xl: calc(
-      calc(
-          var(--container-max-width) -
-            calc(11 * var(--container-gutter-width-xl))
-        ) / 12
-    );
-
-    --container-columns-width-xl-bk: calc(
-      calc(
-          var(--container-max-width-bk) -
-            calc(11 * var(--container-gutter-width-xl))
-        ) / 12
-    );
-
-    /* Repeat doesn't work with grid-template, hence we simply repeat by copy-pasting. */
-    --container-columns-xl: var(--container-columns-width-xl)
-      var(--container-columns-width-xl) var(--container-columns-width-xl)
-      var(--container-columns-width-xl) var(--container-columns-width-xl)
-      var(--container-columns-width-xl) var(--container-columns-width-xl)
-      var(--container-columns-width-xl) var(--container-columns-width-xl)
-      var(--container-columns-width-xl) var(--container-columns-width-xl)
-      var(--container-columns-width-xl); /* 12 */
-
-    /* Repeat doesn't work with grid-template, hence we simply repeat by copy-pasting. */
-    --container-columns-xl-bk: var(--container-columns-width-xl-bk)
-      var(--container-columns-width-xl-bk) var(--container-columns-width-xl-bk)
-      var(--container-columns-width-xl-bk) var(--container-columns-width-xl-bk)
-      var(--container-columns-width-xl-bk) var(--container-columns-width-xl-bk)
-      var(--container-columns-width-xl-bk) var(--container-columns-width-xl-bk)
-      var(--container-columns-width-xl-bk) var(--container-columns-width-xl-bk)
-      var(--container-columns-width-xl-bk); /* 12 */
-
-    --container-breakout-border-column-size-2xs: calc(
-      var(--container-x-margin-2xs) - var(--container-gutter-width-2xs)
-    );
-    --container-breakout-border-column-size-xs: calc(
-      var(--container-x-margin-xs) - var(--container-gutter-width-xs)
-    );
-    --container-breakout-border-column-size-sm: calc(
-      var(--container-x-margin-sm) - var(--container-gutter-width-sm)
-    );
-    --container-breakout-border-column-size-md: calc(
-      var(--container-x-margin-md) - var(--container-gutter-width-md)
-    );
-    --container-breakout-border-column-size-lg: calc(
-      var(--container-x-margin-lg) - var(--container-gutter-width-lg)
-    );
+
+:root {
+  --container-max-width: 1380px;
+  --container-max-width-bk: calc(1380px * 0.8); /* 80vw coming from blokkli */
+
+  --container-gutter-width-2xs: theme(spacing.4);
+  --container-gutter-width-xs: theme(spacing.4);
+  --container-gutter-width-sm: theme(spacing.4);
+  --container-gutter-width-md: theme(spacing.6);
+  --container-gutter-width-lg: theme(spacing.6);
+  --container-gutter-width-xl: theme(spacing.6);
+
+  --container-x-margin-2xs: theme(spacing.4);
+  --container-x-margin-xs: theme(spacing.4);
+  --container-x-margin-sm: theme(spacing.4);
+  --container-x-margin-md: theme(spacing.8);
+  --container-x-margin-lg: theme(spacing.12);
+  --container-x-margin-xl: auto;
+
+  --container-columns-2xs: 1fr 1fr 1fr 1fr; /* 4 */
+  --container-columns-xs: 1fr 1fr 1fr 1fr; /* 4 */
+  --container-columns-sm: 1fr 1fr 1fr 1fr 1fr 1fr; /* 6 */
+  --container-columns-md: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; /* 8 */
+  --container-columns-lg: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; /* 12 */
+
+  --container-columns-width-xl: calc(
+    calc(
+        var(--container-max-width) -
+          calc(11 * var(--container-gutter-width-xl))
+      ) / 12
+  );
+
+  --container-columns-width-xl-bk: calc(
+    calc(
+        var(--container-max-width-bk) -
+          calc(11 * var(--container-gutter-width-xl))
+      ) / 12
+  );
+
+  /* Repeat doesn't work with grid-template, hence we simply repeat by copy-pasting. */
+  --container-columns-xl: var(--container-columns-width-xl)
+    var(--container-columns-width-xl) var(--container-columns-width-xl)
+    var(--container-columns-width-xl) var(--container-columns-width-xl)
+    var(--container-columns-width-xl) var(--container-columns-width-xl)
+    var(--container-columns-width-xl) var(--container-columns-width-xl)
+    var(--container-columns-width-xl) var(--container-columns-width-xl)
+    var(--container-columns-width-xl); /* 12 */
+
+  /* Repeat doesn't work with grid-template, hence we simply repeat by copy-pasting. */
+  --container-columns-xl-bk: var(--container-columns-width-xl-bk)
+    var(--container-columns-width-xl-bk) var(--container-columns-width-xl-bk)
+    var(--container-columns-width-xl-bk) var(--container-columns-width-xl-bk)
+    var(--container-columns-width-xl-bk) var(--container-columns-width-xl-bk)
+    var(--container-columns-width-xl-bk) var(--container-columns-width-xl-bk)
+    var(--container-columns-width-xl-bk) var(--container-columns-width-xl-bk)
+    var(--container-columns-width-xl-bk); /* 12 */
+
+  --container-breakout-border-column-size-2xs: calc(
+    var(--container-x-margin-2xs) - var(--container-gutter-width-2xs)
+  );
+  --container-breakout-border-column-size-xs: calc(
+    var(--container-x-margin-xs) - var(--container-gutter-width-xs)
+  );
+  --container-breakout-border-column-size-sm: calc(
+    var(--container-x-margin-sm) - var(--container-gutter-width-sm)
+  );
+  --container-breakout-border-column-size-md: calc(
+    var(--container-x-margin-md) - var(--container-gutter-width-md)
+  );
+  --container-breakout-border-column-size-lg: calc(
+    var(--container-x-margin-lg) - var(--container-gutter-width-lg)
+  );
+}
+
+.grid-container {
+  @apply grid;
+  @apply grid-cols-[var(--container-columns-2xs)] gap-[var(--container-gutter-width-2xs)];
+  &:not(.is-small) {
+    @apply px-[var(--container-x-margin-2xs)];
   }
 
-  .grid-container {
-    @apply grid;
-    @apply grid-cols-[var(--container-columns-2xs)] gap-[var(--container-gutter-width-2xs)];
+  @variant xs {
+    @apply grid-cols-[var(--container-columns-xs)] gap-[var(--container-gutter-width-xs)];
     &:not(.is-small) {
-      @apply px-[var(--container-x-margin-2xs)];
+      @apply px-[var(--container-x-margin-xs)];
     }
+  }
 
-    @screen xs {
-      @apply grid-cols-[var(--container-columns-xs)] gap-[var(--container-gutter-width-xs)];
-      &:not(.is-small) {
-        @apply px-[var(--container-x-margin-xs)];
-      }
+  @variant sm {
+    @apply grid-cols-[var(--container-columns-sm)] gap-[var(--container-gutter-width-sm)];
+    &:not(.is-small) {
+      @apply px-[var(--container-x-margin-sm)];
     }
+  }
 
-    @screen sm {
-      @apply grid-cols-[var(--container-columns-sm)] gap-[var(--container-gutter-width-sm)];
-      &:not(.is-small) {
-        @apply px-[var(--container-x-margin-sm)];
-      }
+  @variant md {
+    @apply grid-cols-[var(--container-columns-md)] gap-[var(--container-gutter-width-md)];
+    &:not(.is-small) {
+      @apply px-[var(--container-x-margin-md)];
     }
+  }
 
-    @screen md {
-      @apply grid-cols-[var(--container-columns-md)] gap-[var(--container-gutter-width-md)];
-      &:not(.is-small) {
-        @apply px-[var(--container-x-margin-md)];
-      }
+  @variant lg {
+    &:not(.is-small) {
+      @apply grid-cols-[var(--container-columns-lg)] gap-[var(--container-gutter-width-lg)] px-[var(--container-x-margin-lg)];
     }
+  }
 
-    @screen lg {
-      &:not(.is-small) {
-        @apply grid-cols-[var(--container-columns-lg)] gap-[var(--container-gutter-width-lg)] px-[var(--container-x-margin-lg)];
+  @variant xl {
+    &:not(.is-small) {
+      @apply px-0;
+      @apply grid-cols-[var(--container-columns-xl)] gap-[var(--container-gutter-width-xl)];
+      @apply mx-auto w-[var(--container-max-width)];
+
+      .bk-main-canvas & {
+        @apply grid-cols-[var(--container-columns-xl-bk)];
+        @apply mx-auto w-[var(--container-max-width-bk)];
       }
     }
+  }
 
-    @screen xl {
-      &:not(.is-small) {
-        @apply px-0;
-        @apply grid-cols-[var(--container-columns-xl)] gap-[var(--container-gutter-width-xl)];
-        @apply mx-auto w-[var(--container-max-width)];
+  &.breakout-left,
+  &.breakout-right {
+    @apply px-0;
+    @apply mx-0 w-auto;
+  }
 
-        .bk-main-canvas & {
-          @apply grid-cols-[var(--container-columns-xl-bk)];
-          @apply mx-auto w-[var(--container-max-width-bk)];
-        }
-      }
+  &.breakout-left {
+    & > :nth-child(1) {
+      grid-area: a;
     }
 
-    &.breakout-left,
-    &.breakout-right {
-      @apply px-0;
-      @apply mx-0 w-auto;
+    & > :nth-child(2) {
+      grid-area: b;
     }
 
-    &.breakout-left {
-      & > :nth-child(1) {
-        grid-area: a;
-      }
-
-      & > :nth-child(2) {
-        grid-area: b;
-      }
+    @apply max-w-full;
 
-      @apply max-w-full;
+    grid-template:
+      'a a a a a a' auto
+      '. b b b b .' auto
+      / var(--container-breakout-border-column-size-2xs) var(
+        --container-columns-2xs
+      )
+      var(--container-breakout-border-column-size-2xs);
 
+    @variant xs {
       grid-template:
         'a a a a a a' auto
         '. b b b b .' auto
-        / var(--container-breakout-border-column-size-2xs) var(
-          --container-columns-2xs
+        / var(--container-breakout-border-column-size-xs) var(
+          --container-columns-xs
         )
-        var(--container-breakout-border-column-size-2xs);
+        var(--container-breakout-border-column-size-xs);
+    }
 
-      @screen xs {
-        grid-template:
-          'a a a a a a' auto
-          '. b b b b .' auto
-          / var(--container-breakout-border-column-size-xs) var(
-            --container-columns-xs
-          )
-          var(--container-breakout-border-column-size-xs);
-      }
+    @variant sm {
+      grid-template:
+        'a a a a b b b .' auto
+        / var(--container-breakout-border-column-size-sm) var(
+          --container-columns-sm
+        )
+        var(--container-breakout-border-column-size-sm);
+    }
 
-      @screen sm {
-        grid-template:
-          'a a a a b b b .' auto
-          / var(--container-breakout-border-column-size-sm) var(
-            --container-columns-sm
-          )
-          var(--container-breakout-border-column-size-sm);
-      }
+    @variant md {
+      grid-template:
+        'a a a a a b b b b .' auto
+        / var(--container-breakout-border-column-size-md) var(
+          --container-columns-md
+        )
+        var(--container-breakout-border-column-size-md);
+    }
 
-      @screen md {
-        grid-template:
-          'a a a a a b b b b .' auto
-          / var(--container-breakout-border-column-size-md) var(
-            --container-columns-md
-          )
-          var(--container-breakout-border-column-size-md);
-      }
+    @variant lg {
+      grid-template:
+        'a a a a a a a a b b b b b .' auto
+        / var(--container-breakout-border-column-size-lg) var(
+          --container-columns-lg
+        )
+        var(--container-breakout-border-column-size-lg);
+    }
 
-      @screen lg {
-        grid-template:
-          'a a a a a a a a b b b b b .' auto
-          / var(--container-breakout-border-column-size-lg) var(
-            --container-columns-lg
-          )
-          var(--container-breakout-border-column-size-lg);
-      }
+    @variant xl {
+      @apply w-full;
+      grid-template:
+        'a a a a a a a a b b b b b .' auto
+        / 1fr var(--container-columns-xl) 1fr;
 
-      @screen xl {
+      .bk-main-canvas & {
         @apply w-full;
         grid-template:
           'a a a a a a a a b b b b b .' auto
-          / 1fr var(--container-columns-xl) 1fr;
-
-        .bk-main-canvas & {
-          @apply w-full;
-          grid-template:
-            'a a a a a a a a b b b b b .' auto
-            / 1fr var(--container-columns-xl-bk) 1fr;
-        }
+          / 1fr var(--container-columns-xl-bk) 1fr;
       }
     }
+  }
+
+  &.breakout-right {
+    & > :nth-child(1) {
+      grid-area: b;
+    }
 
-    &.breakout-right {
-      & > :nth-child(1) {
-        grid-area: b;
-      }
+    & > :nth-child(2) {
+      grid-area: a;
+    }
 
-      & > :nth-child(2) {
-        grid-area: a;
-      }
+    @apply max-w-full;
 
-      @apply max-w-full;
+    grid-template:
+      'a a a a a a' auto
+      '. b b b b .' auto
+      / var(--container-breakout-border-column-size-2xs) var(
+        --container-columns-2xs
+      )
+      var(--container-breakout-border-column-size-2xs);
 
+    @variant xs {
       grid-template:
         'a a a a a a' auto
         '. b b b b .' auto
-        / var(--container-breakout-border-column-size-2xs) var(
-          --container-columns-2xs
+        / var(--container-breakout-border-column-size-xs) var(
+          --container-columns-xs
         )
-        var(--container-breakout-border-column-size-2xs);
+        var(--container-breakout-border-column-size-xs);
+    }
 
-      @screen xs {
-        grid-template:
-          'a a a a a a' auto
-          '. b b b b .' auto
-          / var(--container-breakout-border-column-size-xs) var(
-            --container-columns-xs
-          )
-          var(--container-breakout-border-column-size-xs);
-      }
+    @variant sm {
+      grid-template:
+        '. b b b a a a a' auto
+        / var(--container-breakout-border-column-size-sm) var(
+          --container-columns-sm
+        )
+        var(--container-breakout-border-column-size-sm);
+    }
 
-      @screen sm {
-        grid-template:
-          '. b b b a a a a' auto
-          / var(--container-breakout-border-column-size-sm) var(
-            --container-columns-sm
-          )
-          var(--container-breakout-border-column-size-sm);
-      }
+    @variant md {
+      grid-template:
+        '. b b b b a a a a a' auto
+        / var(--container-breakout-border-column-size-md) var(
+          --container-columns-md
+        )
+        var(--container-breakout-border-column-size-md);
+    }
 
-      @screen md {
-        grid-template:
-          '. b b b b a a a a a' auto
-          / var(--container-breakout-border-column-size-md) var(
-            --container-columns-md
-          )
-          var(--container-breakout-border-column-size-md);
-      }
+    @variant lg {
+      grid-template:
+        '. b b b b b a a a a a a a a' auto
+        / var(--container-breakout-border-column-size-lg) var(
+          --container-columns-lg
+        )
+        var(--container-breakout-border-column-size-lg);
+    }
 
-      @screen lg {
-        grid-template:
-          '. b b b b b a a a a a a a a' auto
-          / var(--container-breakout-border-column-size-lg) var(
-            --container-columns-lg
-          )
-          var(--container-breakout-border-column-size-lg);
-      }
+    @variant xl {
+      @apply w-full;
+      grid-template:
+        '. b b b b b a a a a a a a a' auto
+        / 1fr var(--container-columns-xl) 1fr;
 
-      @screen xl {
+      .bk-main-canvas & {
         @apply w-full;
         grid-template:
           '. b b b b b a a a a a a a a' auto
-          / 1fr var(--container-columns-xl) 1fr;
-
-        .bk-main-canvas & {
-          @apply w-full;
-          grid-template:
-            '. b b b b b a a a a a a a a' auto
-            / 1fr var(--container-columns-xl-bk) 1fr;
-        }
+          / 1fr var(--container-columns-xl-bk) 1fr;
       }
     }
+  }
 
-    /* @todo: Delete this later, this is just for reference */
+  /* @todo: Delete this later, this is just for reference */
 
-    .grid-container-6 {
-      @apply col-span-4 md:col-span-5 md:col-start-2 lg:col-span-6 lg:col-start-3;
-    }
+  .grid-container-6 {
+    @apply col-span-4 md:col-span-5 md:col-start-2 lg:col-span-6 lg:col-start-3;
+  }
 
-    .grid-container-8 {
-      @apply col-span-4 sm:col-span-6 md:col-span-6 md:col-start-2 lg:col-span-8 lg:col-start-3;
-    }
+  .grid-container-8 {
+    @apply col-span-4 sm:col-span-6 md:col-span-6 md:col-start-2 lg:col-span-8 lg:col-start-3;
+  }
 
-    .grid-container-6-small {
-      @apply col-span-4 md:col-span-5 lg:col-span-6;
-    }
+  .grid-container-6-small {
+    @apply col-span-4 md:col-span-5 lg:col-span-6;
+  }
 
-    .grid-container-8-small {
-      @apply col-span-4 sm:col-span-6 lg:col-span-8;
-    }
+  .grid-container-8-small {
+    @apply col-span-4 sm:col-span-6 lg:col-span-8;
+  }
 
-    .grid-container-10 {
-      @apply col-span-4 sm:col-span-6 md:col-span-8 lg:col-span-10 lg:col-start-2;
-    }
+  .grid-container-10 {
+    @apply col-span-4 sm:col-span-6 md:col-span-8 lg:col-span-10 lg:col-start-2;
+  }
 
-    .grid-container-12 {
-      @apply col-span-4 sm:col-span-6 md:col-span-8 lg:col-span-12;
-    }
+  .grid-container-12 {
+    @apply col-span-4 sm:col-span-6 md:col-span-8 lg:col-span-12;
   }
 }
+
+.grid-standard {
+  @apply container mx-auto grid grid-cols-12 gap-12;
+}
+.grid-3-col {
+  @apply !grid-cols-1;
+
+  &:has(> *:first-child:nth-last-child(2)) {
+    @apply md:!grid-cols-2;
+  }
+
+  &:has(> *:first-child:nth-last-child(3)) {
+    @apply lg:!grid-cols-3;
+  }
+
+  &:has(
+      > *:first-child:not(
+          :nth-last-child(1),
+          :nth-last-child(2),
+          :nth-last-child(3)
+        )
+    ) {
+    @apply lg:!grid-cols-3;
+  }
+}
+.grid-4-col {
+  @apply !grid-cols-1;
+
+  &:has(> *:first-child:nth-last-child(2)) {
+    @apply md:!grid-cols-2;
+  }
+
+  &:has(> *:first-child:nth-last-child(3)) {
+    @apply lg:!grid-cols-3;
+  }
+
+  &:has(> *:first-child:nth-last-child(4)) {
+    @apply lg:!grid-cols-4;
+  }
+
+  &:has(
+      > *:first-child:not(
+          :nth-last-child(1),
+          :nth-last-child(2),
+          :nth-last-child(3),
+          :nth-last-child(4)
+        )
+    ) {
+    @apply lg:!grid-cols-4;
+  }
+}