Merge branch '23643-responsive-environment-tables' into 'master'

Responsive environment tables

See merge request !11836

1 files changed, 86 insertions, 0 deletions

diff --git a/app/assets/stylesheets/framework/responsive-tables.scss b/app/assets/stylesheets/framework/responsive-tables.scss
new file mode 100644
index 00000000000..94528c7a222
--- /dev/null
+++ b/app/assets/stylesheets/framework/responsive-tables.scss
@@ -0,0 +1,86 @@
+@mixin flex-max-width($max) {
+  flex: 0 0 #{$max + '%'};
+  max-width: #{$max + '%'};
+}
+
+.gl-responsive-table-row {
+  margin-top: 10px;
+  border: 1px solid $border-color;
+
+  @media (min-width: $screen-md-min) {
+    padding: 15px 0;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    border: none;
+    border-bottom: 1px solid $white-normal;
+  }
+
+  .table-section {
+    white-space: nowrap;
+
+    $section-widths: 10 15 25 30;
+    @each $width in $section-widths {
+      &.section-#{$width} {
+        flex: 0 0 #{$width + '%'};
+
+        @media (min-width: $screen-md-min) {
+          max-width: #{$width + '%'};
+        }
+      }
+    }
+
+    &:not(.table-button-footer) {
+      @media (max-width: $screen-sm-max) {
+        display: flex;
+        align-self: stretch;
+        padding: 10px;
+        align-items: center;
+        height: 62px;
+
+        &:not(:first-of-type) {
+          border-top: 1px solid $white-normal;
+        }
+      }
+    }
+  }
+}
+
+.table-row-header {
+  font-size: 13px;
+
+  @media (max-width: $screen-sm-max) {
+    display: none;
+  }
+}
+
+.table-mobile-header {
+  color: $gl-text-color-secondary;
+  @include flex-max-width(40);
+
+  @media (min-width: $screen-md-min) {
+    display: none;
+  }
+}
+
+.table-mobile-content {
+  @media (max-width: $screen-sm-max) {
+    @include flex-max-width(60);
+    text-align: right;
+  }
+}
+
+.flex-truncate-parent {
+  display: flex;
+}
+
+.flex-truncate-child {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  @media (min-width: $screen-md-min) {
+    flex: 0 0 90%;
+  }
+}