fix(table): apply mobile bottom border at grid breakpoint (#1881)

patternfly · Jun 6, 2019 · 7aae2fa · 7aae2fa
1 parent 5485854
commit 7aae2fa
Showing 1 changed file with 11 additions and 20 deletions.
diff --git a/src/patternfly/components/Table/table-grid.scss b/src/patternfly/components/Table/table-grid.scss
@@ -40,6 +40,9 @@
   // Responsive vars
   // ==================================================================
 
+  // Table
+  --pf-c-table--responsive--BorderColor: var(--pf-global--BorderColor--300);
+
   // Body
   --pf-c-table-tbody--responsive--MarginTop: var(--pf-global--spacer--xs);
   --pf-c-table-tbody--m-expanded--before--Top: var(--pf-global--spacer--sm);
@@ -113,10 +116,8 @@
   tbody {
     display: block;
 
-    @media screen and (max-width: $pf-global--breakpoint--sm) {
-      &:first-of-type {
-        border-top: var(--pf-c-table-tbody--responsive--BorderWidth) solid var(--pf-c-table--BorderColor);
-      }
+    &:first-of-type {
+      border-top: var(--pf-c-table-tbody--responsive--BorderWidth) solid var(--pf-c-table--responsive--BorderColor);
     }
   }
 
@@ -126,12 +127,8 @@
   }
 
   // Table row
-  tr {
-    @media screen and (max-width: $pf-global--breakpoint--sm) {
-      &:not(.pf-c-table__expandable-row) {
-        border-bottom-width: var(--pf-c-table-tr--responsive--BorderWidth);
-      }
-    }
+  tr:not(.pf-c-table__expandable-row) {
+    border-bottom: var(--pf-c-table-tr--responsive--BorderWidth) solid var(--pf-c-table--responsive--BorderColor);
   }
 
   // The last tr should always have a border width of 1px
@@ -141,20 +138,14 @@
   }
 
   tbody.pf-m-expanded {
-    @media screen and (max-width: $pf-global--breakpoint--xl) {
-      border-bottom: var(--pf-c-table--BorderWidth) solid var(--pf-c-table--BorderColor);
-    }
+    border-bottom: var(--pf-c-table--BorderWidth) solid var(--pf-c-table--BorderColor);
 
-    @media screen and (max-width: $pf-global--breakpoint--xl) {
-      tr:not(.pf-c-table__expandable-row) {
-        border-bottom: 0;
-      }
+    tr:not(.pf-c-table__expandable-row) {
+      border-bottom: 0;
     }
 
     &:not(:last-of-type) {
-      @media screen and (max-width: $pf-global--breakpoint--sm) {
-        border-bottom: var(--pf-c-table-tbody--responsive--BorderWidth) solid var(--pf-c-table--BorderColor);
-      }
+      border-bottom: var(--pf-c-table-tbody--responsive--BorderWidth) solid var(--pf-c-table--responsive--BorderColor);
     }
   }