fix(Table): More compact tables on mobile

nordnet · Jun 1, 2017 · befa6ca · befa6ca
1 parent 88afb87
commit befa6ca
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 9 deletions.
diff --git a/src/components/td/td-styles.jsx b/src/components/td/td-styles.jsx
@@ -16,10 +16,18 @@ export default createStyleSheet('Td', theme => {
       ...styleUtils.ellipsis(),
       fontFamily: typography.primary.fontFamily,
       fontWeight: 'inherit',
-      fontSize: 14,
-      minWidth: 40,
-      paddingTop: 20,
-      paddingBottom: 20,
+
+      fontSize: 12,
+      minWidth: 20,
+      paddingTop: 8,
+      paddingBottom: 8,
+
+      [mixins.media('sm')]: {
+        fontSize: 14,
+        minWidth: 40,
+        paddingTop: 20,
+        paddingBottom: 20,
+      },
     },
   };
 });
diff --git a/src/components/th/th-styles.jsx b/src/components/th/th-styles.jsx
@@ -15,9 +15,15 @@ export default createStyleSheet('Th', theme => {
       ...styleUtils.align(),
       ...styleUtils.ellipsis(),
       fontFamily: typography.primary.fontFamily,
-      fontWeight: 500,
-      minWidth: 40,
-      paddingBottom: 10,
+      fontWeight: typography.fontWeightSemiBold,
+
+      minWidth: 20,
+      paddingBottom: 4,
+
+      [mixins.media('sm')]: {
+        minWidth: 40,
+        paddingBottom: 10,
+      },
     },
   };
 });
diff --git a/src/components/thead/thead-styles.jsx b/src/components/thead/thead-styles.jsx
@@ -12,11 +12,15 @@ export default createStyleSheet('Thead', theme => {
       fontWeight: 'bold',
       borderColor: color.gray,
       borderBottom: `2px solid ${palette.shades.dark.text.muted}`,
-      paddingBottom: '10px',
       letterSpacing: '1px',
-      fontSize: '12px',
       ...styleUtils.sizes(),
       width: '100%',
+      fontSize: 12,
+      paddingBottom: 4,
+
+      [mixins.media('sm')]: {
+        paddingBottom: 10,
+      },
 
       '&.primary': {
         background: color.gray,