Adds new module for setting container-type

tachyons-css · Sep 6, 2023 · 487d0b1 · 487d0b1
1 parent 010de55
commit 487d0b1
Showing 1 changed file with 34 additions and 0 deletions.
diff --git a/src/_container-type.css b/src/_container-type.css
@@ -0,0 +1,34 @@
+/*
+
+  CONTAINER-TYPE
+
+  Media Query Extensions:
+   -s = small
+   -m  = medium
+   -l  = large
+
+  MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/container-type
+
+*/
+
+.container-size { container-type: size; }
+.container-inline { container-type: inline-size; }
+.container-normal { container-type: normal; }
+
+@container (min-width:30em) {
+  .container-size-s { container-type: size; }
+  .container-inline-s { container-type: inline-size; }
+  .container-normal-s { container-type: normal; }
+}
+
+@container (min-width:48em) {
+  .container-size-m { container-type: size; }
+  .container-inline-m { container-type: inline-size; }
+  .container-normal-m { container-type: normal; }
+}
+
+@container (min-width:64em) {
+  .container-size-l { container-type: size; }
+  .container-inline-l { container-type: inline-size; }
+  .container-normal-l { container-type: normal; }
+}