From: Vladimír Vondruš <mosra@centrum.cz>
Date: Mon, 1 Jan 2018 18:41:28 +0000 (+0100)
Subject: css: support for colored figures.
X-Git-Url: https://www.chiark.greenend.org.uk/ucgi/~cjwatson/git?a=commitdiff_plain;h=95fd8e16d6667123fe912543c44ba11576859f02;p=blog.git

css: support for colored figures.
---

diff --git a/css/m-components.css b/css/m-components.css
index e042a8de..1463c368 100644
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -1118,6 +1118,26 @@ article section:target figure.m-code-figure, article section:target figure.m-con
   z-index: 1; /* so the selection border isn't above figure border */
 }
 
+/* Colored figure */
+figure.m-figure.m-default:before { border-color: var(--default-filled-background-color); }
+figure.m-figure.m-default figcaption { color: var(--default-color); }
+figure.m-figure.m-primary:before { border-color: var(--primary-filled-background-color); }
+figure.m-figure.m-primary figcaption { color: var(--primary-color); }
+figure.m-figure.m-success:before { border-color: var(--success-filled-background-color); }
+figure.m-figure.m-success figcaption { color: var(--success-color); }
+figure.m-figure.m-warning:before { border-color: var(--warning-filled-background-color); }
+figure.m-figure.m-warning figcaption { color: var(--warning-color); }
+figure.m-figure.m-danger:before { border-color: var(--danger-filled-background-color); }
+figure.m-figure.m-danger figcaption { color: var(--danger-color); }
+figure.m-figure.m-info:before { border-color: var(--info-filled-background-color); }
+figure.m-figure.m-info figcaption { color: var(--info-color); }
+figure.m-figure.m-dim:before { border-color: var(--dim-filled-background-color); }
+figure.m-figure.m-dim { color: var(--dim-color); }
+figure.m-figure.m-dim a { color: var(--dim-link-color); }
+figure.m-figure.m-dim a:hover, figure.m-figure.m-dim a:focus, figure.m-figure.m-dim a:active {
+  color: var(--dim-link-active-color);
+}
+
 /* Image grid */
 .m-imagegrid > div {
   background-color: var(--background-color); /* to avoid section HL shining through */
diff --git a/doc/css/components-test.rst b/doc/css/components-test.rst
index a7057e5f..4864c8df 100644
--- a/doc/css/components-test.rst
+++ b/doc/css/components-test.rst
@@ -918,6 +918,64 @@ instead of extending the border and there should be proper padding on bottom):
       <figcaption>A Somewhat Lengthy Caption For A Photo</figcaption>
     </figure>
 
+Figures of varying colors:
+
+.. raw:: html
+
+    <div class="m-row">
+      <div class="m-col-m-3 m-col-s-6">
+        <figure class="m-figure m-default">
+          <img src="{filename}/static/ship-small.jpg" />
+          <figcaption>Default figure</figcaption>
+          <span>Text.</span>
+        </figure>
+      </div>
+      <div class="m-col-m-3 m-col-s-6">
+        <figure class="m-figure m-primary">
+          <img src="{filename}/static/ship-small.jpg" />
+          <figcaption>Primary figure</figcaption>
+          <span>Text.</span>
+        </figure>
+      </div>
+      <div class="m-col-m-3 m-col-s-6">
+        <figure class="m-figure m-success">
+          <img src="{filename}/static/ship-small.jpg" />
+          <figcaption>Success figure</figcaption>
+          <span>Text.</span>
+        </figure>
+      </div>
+      <div class="m-col-m-3 m-col-s-6">
+        <figure class="m-figure m-warning">
+          <img src="{filename}/static/ship-small.jpg" />
+          <figcaption>Warning figure</figcaption>
+          <span>Text.</span>
+        </figure>
+      </div>
+    </div>
+    <div class="m-row">
+      <div class="m-col-m-3 m-col-s-6">
+        <figure class="m-figure m-danger">
+          <img src="{filename}/static/ship-small.jpg" />
+          <figcaption>Danger figure</figcaption>
+          <span>Text.</span>
+        </figure>
+      </div>
+      <div class="m-col-m-3 m-col-s-6">
+        <figure class="m-figure m-info">
+          <img src="{filename}/static/ship-small.jpg" />
+          <figcaption>Info figure</figcaption>
+          <span>Text.</span>
+        </figure>
+      </div>
+      <div class="m-col-m-3 m-col-s-6">
+        <figure class="m-figure m-dim">
+          <img src="{filename}/static/ship-small.jpg" />
+          <figcaption>Dim figure</figcaption>
+          <span>Text.</span>
+        </figure>
+      </div>
+    </div>
+
 Image grid
 ==========
 
diff --git a/doc/css/components.rst b/doc/css/components.rst
index 12bbd26b..ca957274 100644
--- a/doc/css/components.rst
+++ b/doc/css/components.rst
@@ -652,6 +652,8 @@ wrapped in some tag as well (for example a :html:`<span>`). The
 Figure always expects at least the caption to be present. If you want just an
 image, use the plain image tag. If you have a lot of figures on the page and
 the border is distracting, apply the :css:`.m-flat` class to hide it.
+Optionally you can color the figure border and caption by adding one of the
+`CSS color classes <#colors>`_ to the :html:`<figure>` element.
 
 .. code-figure::