More grid refactoring -- need to redo how we are doing gutters to use…

… custom properties (next todo item)
AgnosticUI · Sep 25, 2020 · a016599 · a016599
1 parent 1f91c53
commit a016599
Show file tree

Hide file tree

Showing 5 changed files with 541 additions and 337 deletions.
diff --git a/agnosticui-css/flexboxgrid-custom.css b/agnosticui-css/flexboxgrid-custom.css
@@ -352,6 +352,69 @@
   order: initial;
 }
 
+
+  /* This enables us to opt back in for gutters for things like cards.
+  These are only meant to be applied to the row element */
+
+  .gutter-4 {
+    margin-left: -2px;
+    margin-right: -2px;
+  }
+  .gutter-4 .auto:not(:first-child) {
+    padding-left: 2px;
+  }
+  .gutter-4 .auto:not(:last-child) {
+    padding-right: 2px;
+  }
+
+  .gutter-8 {
+    margin-left: -4px;
+    margin-right: -4px;
+  }
+  .gutter-8 .auto:not(:first-child) {
+    padding-left: 4px;
+  }
+  .gutter-8 .auto:not(:last-child) {
+    padding-right: 4px;
+  }
+
+  .gutter-16 {
+    margin-left: -8px;
+    margin-right: -8px;
+  }
+  .gutter-16 .auto:not(:first-child) {
+    padding-left: 8px;
+  }
+  .gutter-16 .auto:not(:last-child) {
+    padding-right: 8px;
+  }
+
+  .gutter-24 {
+    margin-left: -12px;
+    margin-right: -12px;
+  }
+  .gutter-24 .auto:not(:first-child) {
+    padding-left: 12px;
+  }
+  .gutter-24 .auto:not(:last-child) {
+    padding-right: 12px;
+  }
+
+  .gutter-32 {
+    margin-left: -16px;
+    margin-right: -16px;
+  }
+  .gutter-32 .auto:not(:first-child) {
+    padding-left: 16px;
+  }
+  .gutter-32 .auto:not(:last-child) {
+    padding-right: 16px;
+  }
+
+  .auto {
+    flex: 1 1 auto;
+  }
+
 @media only screen and (min-width: 576px) {
   .col-sm {
     flex-grow: 1;
@@ -1093,67 +1156,6 @@
     order: initial;
   }
 
-  /* This enables us to opt back in for gutters for things like cards.
-  These are only meant to be applied to the row element */
-
-  .gutter-4 {
-    margin-left: -2px;
-    margin-right: -2px;
-  }
-  .gutter-4 .auto:not(:first-child) {
-    padding-left: 2px;
-  }
-  .gutter-4 .auto:not(:last-child) {
-    padding-right: 2px;
-  }
-
-  .gutter-8 {
-    margin-left: -4px;
-    margin-right: -4px;
-  }
-  .gutter-8 .auto:not(:first-child) {
-    padding-left: 4px;
-  }
-  .gutter-8 .auto:not(:last-child) {
-    padding-right: 4px;
-  }
-
-  .gutter-16 {
-    margin-left: -8px;
-    margin-right: -8px;
-  }
-  .gutter-16 .auto:not(:first-child) {
-    padding-left: 8px;
-  }
-  .gutter-16 .auto:not(:last-child) {
-    padding-right: 8px;
-  }
-
-  .gutter-24 {
-    margin-left: -12px;
-    margin-right: -12px;
-  }
-  .gutter-24 .auto:not(:first-child) {
-    padding-left: 12px;
-  }
-  .gutter-24 .auto:not(:last-child) {
-    padding-right: 12px;
-  }
-
-  .gutter-32 {
-    margin-left: -16px;
-    margin-right: -16px;
-  }
-  .gutter-32 .auto:not(:first-child) {
-    padding-left: 16px;
-  }
-  .gutter-32 .auto:not(:last-child) {
-    padding-right: 16px;
-  }
-
-  .auto {
-    flex: 1 1 auto;
-  }
 }
 
 @media only screen and (max-width: 576px) {

diff --git a/showcase/src/App.vue b/showcase/src/App.vue
@@ -2,7 +2,7 @@
   <div id="app">
     <div :class="$style.layout">
       <AppHeader />
-      <main :class="$style.main">
+      <main>
         <SystemCards />
         <InputCards />
         <LayoutCards />
@@ -121,11 +121,4 @@ export default {
   min-height: 100vh;
   flex-direction: column;
 }
-
-.main {
-  /* TODO -- once we've got everything in the flexgrid I think we'll turn all this off */
-  width: var(--app-width-initial);
-  margin: 0 auto;
-  flex: 1 1 auto;
-}
 </style>