wip

Author: Richard Feldman

examples/src/Homepage.css.elm

@@ -0,0 +1,49 @@
+module HomepageStylesheet where
+
+import Stylesheets exposing (..)
+import SharedStyles exposing (..)
+
+
+port css : String
+port css =
+    Stylesheets.prettyPrint 4 <|
+        stylesheet
+
+            |.| HeaderLinks |.| Footer |#| FootnotesDebug
+
+            |%| header />/ stuff
+
+
+            |%| header /:/ hover
+                |-| doStuff bar
+                |-| doStuff bar
+
+
+            |%| header />/ stuff
+            |%| header />>/ stuff
+                |-| backgroundColor (rgb 90 90 90)
+                |-| boxSizing borderBox
+                |-| padding 12 px
+
+            |%| nav
+                |-| display inlineBlock
+                |-| paddingBottom 12 px
+
+            |.| NavLink
+                |-| margin 12 px
+                |-| color (rgb 255 255 255)
+
+            |#| ReactiveLogo
+                |-| display inlineBlock
+                |-| marginLeft 150 px
+                |-| marginRight 80 px
+                |-| verticalAlign middle
+
+            |#| BuyTickets
+                |-| padding 16 px
+                |-| paddingLeft 24 px
+                |-| paddingRight 24 px
+                |-| marginLeft 50 px
+                |-| color (rgb 255 255 255)
+                |-| backgroundColor (rgb 27 217 130)
+                |-| verticalAlign middle

examples/src/HomepageStylesheet.elm

@@ -1,37 +1,37 @@
-module HomepageStylesheet where
+module HomepageStylesheet (..) where
 
 import Stylesheets exposing (..)
 import SharedStyles exposing (..)
 
 
 port css : String
 port css =
-    Stylesheets.prettyPrint 4 <|
-        stylesheet
-            |%| header
-                |-| backgroundColor (rgb 90 90 90)
-                |-| boxSizing borderBox
-                |-| padding 12 px
-
-            |%| nav
-                |-| display inlineBlock
-                |-| paddingBottom 12 px
-
-            |.| NavLink
-                |-| margin 12 px
-                |-| color (rgb 255 255 255)
-
-            |#| ReactiveLogo
-                |-| display inlineBlock
-                |-| marginLeft 150 px
-                |-| marginRight 80 px
-                |-| verticalAlign middle
-
-            |#| BuyTickets
-                |-| padding 16 px
-                |-| paddingLeft 24 px
-                |-| paddingRight 24 px
-                |-| marginLeft 50 px
-                |-| color (rgb 255 255 255)
-                |-| backgroundColor (rgb 27 217 130)
-                |-| verticalAlign middle
+    Stylesheets.prettyPrint 4
+        <| stylesheet
+        |.| HeaderLinks
+        |.| Footer
+        |#| FootnotesDebug
+        |%| header
+        />/ stuff
+        |-| backgroundColor (rgb 90 90 90)
+        |-| boxSizing borderBox
+        |-| padding 12 px
+        |%| nav
+        |-| display inlineBlock
+        |-| paddingBottom 12 px
+        |.| NavLink
+        |-| margin 12 px
+        |-| color (rgb 255 255 255)
+        |#| ReactiveLogo
+        |-| display inlineBlock
+        |-| marginLeft 150 px
+        |-| marginRight 80 px
+        |-| verticalAlign middle
+        |#| BuyTickets
+        |-| padding 16 px
+        |-| paddingLeft 24 px
+        |-| paddingRight 24 px
+        |-| marginLeft 50 px
+        |-| color (rgb 255 255 255)
+        |-| backgroundColor (rgb 27 217 130)
+        |-| verticalAlign middle

src/Stylesheets.elm

@@ -485,6 +485,25 @@ styleWithPrefix prefix (Style selector attrs children) childSelector =
     children ++ [ Style (tagToString tag) [] [] ]
         |> Style selector attrs
 
+{-| Specify that one selector is a descendant of another.
+
+In CSS, this has historically been done without an operator
+(e.g. `form input { color: "#ff0000" }`) although the proposed
+[CSS4 descendant combinator `>>`](https://drafts.csswg.org/selectors-4/#descendant-combinators)
+would allow for explicitly declaring the relationship
+(e.g. `form >> input { color: "#ff0000" }`)
+
+The />>/ operator works like the proposed `>>` in CSS4:
+
+    |%| form />>/ input
+        |-| color (hex "ff0000")
+
+    -- CSS equivalent: form input { color: "#ff0000" }
+
+To use this with classes and ids instead of tags (e.g. `form .field { color: "#ff0000" }`),
+see />>./ and />>#/
+-}
+(/>>/)
 
 (|%|=) : Style class id -> List Tag -> Style class id
 (|%|=) (Style selector attrs children) tags =