refactor: make column classes standalone (#253)

facebookincubator · May 4, 2022 · 0c099d6 · 0c099d6
1 parent 888cc87
commit 0c099d6
Showing 1 changed file with 32 additions and 33 deletions.
diff --git a/packages/core/styles/layout/grid.pcss b/packages/core/styles/layout/grid.pcss
@@ -32,39 +32,6 @@
   flex-wrap: wrap;
   margin: 0 calc(var(--ifm-spacing-horizontal) * -1);
 
-  & .col {
-    --ifm-col-width: 100%;
-
-    flex: 1 0;
-    margin-left: 0;
-    max-width: 100%;
-    padding: 0 var(--ifm-spacing-horizontal);
-    width: 100%;
-
-    &[class*='col--'] {
-      flex: 0 0 var(--ifm-col-width);
-      max-width: var(--ifm-col-width);
-    }
-
-    @media (--ifm-narrow-window) {
-      & {
-        --ifm-col-width: 100%;
-        flex-basis: var(--ifm-col-width);
-        margin-left: 0;
-      }
-    }
-
-    @for $column from 1 to 12 {
-      &--$(column) {
-        --ifm-col-width: calc($(column) / 12 * 100%);
-      }
-
-      &--offset-$(column) {
-        margin-left: calc($(column) / 12 * 100%);
-      }
-    }
-  }
-
   &--no-gutters {
     margin-left: 0;
     margin-right: 0;
@@ -95,3 +62,35 @@
     align-items: baseline;
   }
 }
+
+.col {
+  --ifm-col-width: 100%;
+
+  flex: 1 0;
+  margin-left: 0;
+  max-width: var(--ifm-col-width);
+  padding: 0 var(--ifm-spacing-horizontal);
+  width: 100%;
+
+  &[class*='col--'] {
+    flex: 0 0 var(--ifm-col-width);
+  }
+
+  @media (--ifm-narrow-window) {
+    & {
+      --ifm-col-width: 100%;
+      flex-basis: var(--ifm-col-width);
+      margin-left: 0;
+    }
+  }
+
+  @for $column from 1 to 12 {
+    &--$(column) {
+      --ifm-col-width: calc($(column) / 12 * 100%);
+    }
+
+    &--offset-$(column) {
+      margin-left: calc($(column) / 12 * 100%);
+    }
+  }
+}