feat(box): Set flexbox properties to stacked boxes

telus · Nov 10, 2017 · c087582 · c087582
1 parent 0ee8049
commit c087582
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 3 deletions.
diff --git a/src/components/Box/Box.jsx b/src/components/Box/Box.jsx
@@ -23,7 +23,7 @@ const getBetweenClasses = (betweenSize, inline) => {
   const direction = inline ? 'Right' : 'Bottom'
   return joinClassNames(
     styles[`between${direction}Margin-${betweenSize}`],
-    inline ? styles.betweenRight : undefined
+    inline ? styles.betweenRight : styles.betweenBottom
   )
 }
 

diff --git a/src/components/Box/Box.modules.scss b/src/components/Box/Box.modules.scss
@@ -31,6 +31,11 @@ $responsive-spacings: (
   align-items: center;
 }
 
+.betweenBottom {
+  display: flex;
+  flex-direction: column;
+}
+
 // Todo remove unneeded classes related to margin
 @mixin spacingClasses ($level, $value) {
   .verticalPadding-#{$level} {

diff --git a/src/components/Card/Card.jsx b/src/components/Card/Card.jsx
@@ -11,8 +11,8 @@ import styles from './Card.modules.scss'
  *
  * <span class="docs--badge__updated">updated!</span> <span class="docs--badge__version">v0.26.0</span>
  */
-const Card = ({variant, children, ...rest}) => (
-  <Box {...safeRest(rest)} horizontal={3} vertical={4} dangerouslyAddClassName={styles[variant]}>
+const Card = ({ variant, children, ...rest }) => (
+  <Box {...safeRest(rest)} horizontal={4} vertical={4} dangerouslyAddClassName={styles[variant]}>
     {children}
   </Box>
 )