Extend figure styles to <figure> elements

Previous styles for figures only applied to <div class="figure">, but many
markdown extensions generate <figure> elements.

docs/figures.md

@@ -0,0 +1,38 @@
+# Figures and captions
+
+Reflex has support for figures and captions in two formats:
+
+`figure` and `figcaption` HTML elements:
+
+``` html
+<figure>
+    <img src="img.jpg" />
+    <figcaption>Caption</figcaption>
+</figure>
+```
+
+A `div` with `figure` class and `p` with `caption` class:
+``` html
+<div class="figure">
+    <img src="img.jpg">
+    <p class="caption">Caption</p>
+</div>
+```
+
+## Alignment
+
+Add `align-left`, `align-center` or `align-right` class to align figures to left, center and right respectively.
+
+## Border
+
+Add `border` class to add a border around the figure and caption.
+
+## Markdown
+
+[markdown-captions](https://github.com/evidlo/markdown_captions) is recommended as it generates semantic `figure` and `figcaption` HTML elements, with support for tooltips and HTML classes.
+
+An example of a center-aligned figure with caption, tooltip and border using *markdown-captions*:
+
+``` markdown
+![Caption](img.jpg "Tooltip on hover"){: .align-center .border}
+```

static/stylesheet/style.less

@@ -717,21 +717,26 @@ div.admonition.warning {
   background-color: @admonition-warning-bg-color;
 }
 
-div.figure {
+figure,div.figure {
   font-size: 90%;
   color: @figure-color;
-  
+
+  figcaption {
+    margin-top: 0.5em;
+    text-align: center;
+  }
+
   img {
     vertical-align: middle;
     line-height: 1;
     display: inline;
   }
-  
+
   p {
     margin-top: 0;
     margin-bottom: 0;
   }
-  
+
   p.caption {
     font-style: italic;
   }
@@ -741,14 +746,19 @@ div.figure {
   }
 }
 
-div.figure.align-left {
+figure.align-left,div.figure.align-left {
   text-align: left;
 }
 
-div.figure.align-center {
+figure.align-center,div.figure.align-center {
   text-align: center;
 }
 
-div.figure.align-right {
+figure.align-right,div.figure.align-right {
   text-align: right;
 }
+
+figure.border,div.figure.border {
+  border: 2px solid @med-grey;
+  padding: 7px;
+}