Make CSS for flex grids less nested [#152292192]

Signed-off-by: Ming Xiao <mxiao@pivotal.io>
pivotal-cf · Jan 4, 2018 · 4f16a97 · 4f16a97
1 parent 4aa8106
commit 4f16a97
Showing 1 changed file with 73 additions and 73 deletions.
diff --git a/src/css/flex-grids/flex-grids.scss b/src/css/flex-grids/flex-grids.scss
@@ -29,96 +29,96 @@ $base-unit: 8px;
       padding: 0;
     }
   }
+}
 
-  .col {
-    min-width: 0;
-    box-sizing: border-box;
-    -webkit-flex: 0 0 auto;
-    -ms-flex: 0 0 auto;
-    flex: 0 0 auto;
-    -webkit-flex-grow: 1;
-    -ms-flex-positive: 1;
-    -webkit-box-flex: 1;
-    flex-grow: 1;
-    -ms-flex-preferred-size: 0;
-    -webkit-flex-basis: 0;
-    flex-basis: 0;
-    max-width: 100%;
-    padding: 0 $base-unit 0 $base-unit;
-  }
+.col {
+  min-width: 0;
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  -webkit-box-flex: 1;
+  flex-grow: 1;
+  -ms-flex-preferred-size: 0;
+  -webkit-flex-basis: 0;
+  flex-basis: 0;
+  max-width: 100%;
+  padding: 0 $base-unit 0 $base-unit;
+}
 
-  .col-fixed {
-    flex: 0 1 auto;
-  }
+.col-fixed {
+  flex: 0 1 auto;
+}
 
-  @for $i from 1 through 24 {
-    .col-#{$i} {
-      -ms-flex-preferred-size: (100% / 24) * $i;
-      -webkit-flex-basis: (100% / 24) * $i;
-      flex-basis: (100% / 24) * $i;
-      max-width: (100% / 24) * $i;
-    }
+@for $i from 1 through 24 {
+  .col-#{$i} {
+    -ms-flex-preferred-size: (100% / 24) * $i;
+    -webkit-flex-basis: (100% / 24) * $i;
+    flex-basis: (100% / 24) * $i;
+    max-width: (100% / 24) * $i;
   }
+}
 
-  @for $i from 2 through 11 {
-    .col-grow-#{$i} {
-      flex-grow: $i;
-    }
+@for $i from 2 through 11 {
+  .col-grow-#{$i} {
+    flex-grow: $i;
   }
+}
 
-  .col-align-top {
-    -webkit-align-self: flex-start;
-    -ms-flex-item-align: start;
-    align-self: flex-start;
-  }
+.col-align-top {
+  -webkit-align-self: flex-start;
+  -ms-flex-item-align: start;
+  align-self: flex-start;
+}
 
-  .col-align-bottom {
-    align-self: flex-end;
-  }
+.col-align-bottom {
+  align-self: flex-end;
+}
 
-  .col-align-middle {
-    -webkit-align-self: center;
-    -ms-flex-item-align: center;
-    align-self: center;
-  }
+.col-align-middle {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+}
 
-  .col-top {
-    justify-content: flex-start !important;
-    flex-direction: column;
-    display: flex;
-  }
+.col-top {
+  justify-content: flex-start !important;
+  flex-direction: column;
+  display: flex;
+}
 
-  .col-bottom {
-    justify-content: flex-end !important;
-    flex-direction: column;
-    display: flex;
-  }
+.col-bottom {
+  justify-content: flex-end !important;
+  flex-direction: column;
+  display: flex;
+}
 
-  .col-middle {
-    justify-content: center;
-    flex-direction: column;
-    display: flex;
-  }
+.col-middle {
+  justify-content: center;
+  flex-direction: column;
+  display: flex;
+}
 
-  @media only screen and (max-width: $screen-sm) {
-    .col-sm {
-      flex: 100%;
-      max-width: 100%;
-    }
+@media only screen and (max-width: $screen-sm) {
+  .col-sm {
+    flex: 100%;
+    max-width: 100%;
   }
+}
 
-  @media only screen and (max-width: $screen-md) {
-    .col-md {
-      flex: 100%;
-      max-width: 100%;
-    }
+@media only screen and (max-width: $screen-md) {
+  .col-md {
+    flex: 100%;
+    max-width: 100%;
   }
+}
 
-  @media only screen and (max-width: $screen-lg) {
-    .col-lg {
-      flex: 100%;
-      max-width: 100%;
-    }
+@media only screen and (max-width: $screen-lg) {
+  .col-lg {
+    flex: 100%;
+    max-width: 100%;
   }
 }