Add flex_gridce-7772-add-subscription-table-to-gitlab-com-billing-areas

2 files changed, 53 insertions, 0 deletions

diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss
index 4041f2b4479..834e7ffce81 100644
--- a/app/assets/stylesheets/framework.scss
+++ b/app/assets/stylesheets/framework.scss
@@ -65,3 +65,4 @@
 @import 'framework/feature_highlight';
 @import 'framework/terms';
 @import 'framework/read_more';
+@import 'framework/flex_grid';
diff --git a/app/assets/stylesheets/framework/flex_grid.scss b/app/assets/stylesheets/framework/flex_grid.scss
new file mode 100644
index 00000000000..10537fd5549
--- /dev/null
+++ b/app/assets/stylesheets/framework/flex_grid.scss
@@ -0,0 +1,52 @@
+.flex-grid {
+  .grid-row {
+    border-bottom: 1px solid $border-color;
+    padding: 0;
+
+    &:last-child {
+      border-bottom: 0;
+    }
+
+    @include media-breakpoint-down(md) {
+      border-bottom: 0;
+      border-right: 1px solid $border-color;
+
+      &:last-child {
+        border-right: 0;
+      }
+    }
+
+    @include media-breakpoint-down(xs) {
+      border-right: 0;
+      border-bottom: 1px solid $border-color;
+
+      &:last-child {
+        border-bottom: 0;
+      }
+    }
+  }
+
+  .grid-cell {
+    padding: 10px $gl-padding;
+    border-right: 1px solid $border-color;
+
+    &:last-child {
+      border-right: 0;
+    }
+
+    @include media-breakpoint-up(md) {
+      flex: 1;
+    }
+
+    @include media-breakpoint-down(md) {
+      border-right: 0;
+      flex: none;
+    }
+  }
+}
+
+.card {
+  .card-body.flex-grid {
+    padding: 0;
+  }
+}