Fix/improve responsiveness combinators (#41)

* Improve responsiveness combinators

* Make responsive combinators have flex layout by default

Author: arthurxavierx

docs/Examples/Responsive.example.purs

@@ -4,7 +4,7 @@ import Prelude
 
 import Lumi.Components.Column (column_)
 import Lumi.Components.Example (example)
-import Lumi.Components.Responsive (desktop, mobile)
+import Lumi.Components.Responsive (desktop_, mobile_)
 import Lumi.Components.Text (body_, h2_)
 import React.Basic (JSX)
 
@@ -14,7 +14,11 @@ docs =
     [ h2_ "Desktop and mobile"
     , example $
         column_
-          [ mobile $ body_ "Mobile: this text only is only visible on mobile-sized screens."
-          , desktop $ body_ "Desktop: this text only is only visible on desktop-sized screens."
+          [ mobile_
+              [ body_ "Mobile: this text only is only visible on mobile-sized screens."
+              ]
+          , desktop_
+              [ body_ "Desktop: this text only is only visible on desktop-sized screens."
+              ]
           ]
     ]

src/Lumi/Components/Divider.purs

@@ -35,6 +35,7 @@ styles = jss
           , background: cssStringHSLA colors.black4
           , fontSize: "0"
           , border: "0"
+          , flexShrink: "0"
           }
       }
   }

src/Lumi/Components/Responsive.purs

@@ -4,29 +4,40 @@ import Prelude
 
 import JSS (JSS, jss)
 import React.Basic (JSX, element)
-import React.Basic.DOM (unsafeCreateDOMComponent)
+import React.Basic.DOM (CSS, css, unsafeCreateDOMComponent)
 
-mobile :: JSX -> JSX
-mobile = lumiMobileElement <<< { children: _ }
-  where
-    lumiMobileElement = element (unsafeCreateDOMComponent "lumi-mobile")
+type ResponsiveProps =
+  { style :: CSS
+  , children :: Array JSX
+  }
+
+mobile :: ResponsiveProps -> JSX
+mobile = element (unsafeCreateDOMComponent "lumi-mobile")
+
+mobile_ :: Array JSX -> JSX
+mobile_ = mobile <<< { style: css {}, children: _ }
+
+desktop :: ResponsiveProps -> JSX
+desktop = element (unsafeCreateDOMComponent "lumi-desktop")
 
-desktop :: JSX -> JSX
-desktop = lumiDesktopElement <<< { children: _ }
-  where
-    lumiDesktopElement = element (unsafeCreateDOMComponent "lumi-desktop")
+desktop_ :: Array JSX -> JSX
+desktop_ = desktop <<< { style: css {}, children: _ }
 
 styles :: JSS
 styles = jss
   { "@global":
-      { "@media (max-width: 860px)":
-          { "lumi-desktop":
-              { "display": "none"
+      { "lumi-desktop":
+          { "display": "flex"
+          , "flex-shrink": "0"
+          , "@media (max-width: 860px)":
+              { "display": "none !important"
               }
           }
-      , "@media (min-width: 861px)":
-          { "lumi-mobile":
-              { "display": "none"
+      , "lumi-mobile":
+          { "display": "flex"
+          , "flex-shrink": "0"
+          , "@media (min-width: 861px)":
+              { "display": "none !important"
               }
           }
       }