From d2da07d244e788618bf34da385e4f431afadee02 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Vladim=C3=ADr=20Vondru=C5=A1?= <mosra@centrum.cz>
Date: Sat, 13 Oct 2018 19:48:26 +0200
Subject: [PATCH] css: ensure parity between <img> and <svg> for images and
 figures.

---
 css/m-components.css             | 16 ++++++++--------
 css/m-dark+doxygen.compiled.css  | 10 +++++-----
 css/m-dark.compiled.css          | 10 +++++-----
 css/m-light+doxygen.compiled.css | 10 +++++-----
 css/m-light.compiled.css         | 10 +++++-----
 doc/css/components.rst           |  3 ++-
 6 files changed, 30 insertions(+), 29 deletions(-)

diff --git a/css/m-components.css b/css/m-components.css
index e0f7fb9e..39bb4bb9 100644
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -675,7 +675,7 @@ div.m-button.m-dim a:hover, div.m-button.m-dim a:focus, div.m-button.m-dim a:act
   background-color: var(--dim-button-active-color);
 }
 
-/* Image */
+/* Image. Ensure everything is done for both <img> and <svg>. */
 img.m-image, svg.m-image {
   display: block;
   margin-left: auto;
@@ -684,7 +684,7 @@ img.m-image, svg.m-image {
 div.m-image {
   text-align: center;
 }
-img.m-image, svg.m-image, div.m-image img {
+img.m-image, svg.m-image, div.m-image img, div.m-image svg {
   max-width: 100%;
   border-radius: var(--border-radius);
 }
@@ -692,7 +692,7 @@ div.m-image.m-fullwidth img, div.m-image.m-fullwidth svg {
   width: 100%;
 }
 
-/* Figure */
+/* Figure. Ensure everything is done for both <img> and <svg>. */
 figure.m-figure {
   max-width: 100%;
   margin-top: 0;
@@ -724,13 +724,13 @@ figure.m-figure > * {
   caption-side: bottom;
 }
 figure.m-figure > *:first-child {
-  /* otherwise figure with clickable image is center differently */
+  /* otherwise figure with clickable image is centered differently */
   display: inline;
 }
 figure.m-figure > *:last-child {
   margin-bottom: 1rem;
 }
-figure.m-figure img {
+figure.m-figure img, figure.m-figure svg {
   position: relative; /* so it's above the border */
   margin-left: 0;
   margin-right: 0;
@@ -739,7 +739,7 @@ figure.m-figure img {
   border-top-right-radius: var(--border-radius);
   max-width: 100%;
 }
-figure.m-figure.m-flat img {
+figure.m-figure.m-flat img, figure.m-figure.m-flat svg {
   border-bottom-left-radius: var(--border-radius);
   border-bottom-right-radius: var(--border-radius);
 }
@@ -749,7 +749,7 @@ figure.m-figure figcaption {
   font-weight: var(--heading-font-weight);
   font-size: 1.17rem; /* taken from webkit defaults for h3 */
 }
-figure.m-figure a img {
+figure.m-figure a img, figure.m-figure a svg {
   margin-left: -1rem;
   margin-right: -1rem;
 }
@@ -760,7 +760,7 @@ figure.m-figure.m-fullwidth, figure.m-figure.m-fullwidth > * {
 figure.m-figure.m-fullwidth > *:first-child {
   display: inline;
 }
-figure.m-figure.m-fullwidth img {
+figure.m-figure.m-fullwidth img, figure.m-figure.m-fullwidth svg {
   width: 100%;
 }
 figure.m-figure.m-fullwidth:after {
diff --git a/css/m-dark+doxygen.compiled.css b/css/m-dark+doxygen.compiled.css
index 12ccdb90..b94faedc 100644
--- a/css/m-dark+doxygen.compiled.css
+++ b/css/m-dark+doxygen.compiled.css
@@ -1007,7 +1007,7 @@ img.m-image, svg.m-image {
 div.m-image {
   text-align: center;
 }
-img.m-image, svg.m-image, div.m-image img {
+img.m-image, svg.m-image, div.m-image img, div.m-image svg {
   max-width: 100%;
   border-radius: 0.2rem;
 }
@@ -1050,7 +1050,7 @@ figure.m-figure > *:first-child {
 figure.m-figure > *:last-child {
   margin-bottom: 1rem;
 }
-figure.m-figure img {
+figure.m-figure img, figure.m-figure svg {
   position: relative;
   margin-left: 0;
   margin-right: 0;
@@ -1059,7 +1059,7 @@ figure.m-figure img {
   border-top-right-radius: 0.2rem;
   max-width: 100%;
 }
-figure.m-figure.m-flat img {
+figure.m-figure.m-flat img, figure.m-figure.m-flat svg {
   border-bottom-left-radius: 0.2rem;
   border-bottom-right-radius: 0.2rem;
 }
@@ -1069,7 +1069,7 @@ figure.m-figure figcaption {
   font-weight: 600;
   font-size: 1.17rem;
 }
-figure.m-figure a img {
+figure.m-figure a img, figure.m-figure a svg {
   margin-left: -1rem;
   margin-right: -1rem;
 }
@@ -1079,7 +1079,7 @@ figure.m-figure.m-fullwidth, figure.m-figure.m-fullwidth > * {
 figure.m-figure.m-fullwidth > *:first-child {
   display: inline;
 }
-figure.m-figure.m-fullwidth img {
+figure.m-figure.m-fullwidth img, figure.m-figure.m-fullwidth svg {
   width: 100%;
 }
 figure.m-figure.m-fullwidth:after {
diff --git a/css/m-dark.compiled.css b/css/m-dark.compiled.css
index 632979a2..c23f3aa6 100644
--- a/css/m-dark.compiled.css
+++ b/css/m-dark.compiled.css
@@ -1007,7 +1007,7 @@ img.m-image, svg.m-image {
 div.m-image {
   text-align: center;
 }
-img.m-image, svg.m-image, div.m-image img {
+img.m-image, svg.m-image, div.m-image img, div.m-image svg {
   max-width: 100%;
   border-radius: 0.2rem;
 }
@@ -1050,7 +1050,7 @@ figure.m-figure > *:first-child {
 figure.m-figure > *:last-child {
   margin-bottom: 1rem;
 }
-figure.m-figure img {
+figure.m-figure img, figure.m-figure svg {
   position: relative;
   margin-left: 0;
   margin-right: 0;
@@ -1059,7 +1059,7 @@ figure.m-figure img {
   border-top-right-radius: 0.2rem;
   max-width: 100%;
 }
-figure.m-figure.m-flat img {
+figure.m-figure.m-flat img, figure.m-figure.m-flat svg {
   border-bottom-left-radius: 0.2rem;
   border-bottom-right-radius: 0.2rem;
 }
@@ -1069,7 +1069,7 @@ figure.m-figure figcaption {
   font-weight: 600;
   font-size: 1.17rem;
 }
-figure.m-figure a img {
+figure.m-figure a img, figure.m-figure a svg {
   margin-left: -1rem;
   margin-right: -1rem;
 }
@@ -1079,7 +1079,7 @@ figure.m-figure.m-fullwidth, figure.m-figure.m-fullwidth > * {
 figure.m-figure.m-fullwidth > *:first-child {
   display: inline;
 }
-figure.m-figure.m-fullwidth img {
+figure.m-figure.m-fullwidth img, figure.m-figure.m-fullwidth svg {
   width: 100%;
 }
 figure.m-figure.m-fullwidth:after {
diff --git a/css/m-light+doxygen.compiled.css b/css/m-light+doxygen.compiled.css
index b32b33c6..addc9ce9 100644
--- a/css/m-light+doxygen.compiled.css
+++ b/css/m-light+doxygen.compiled.css
@@ -1007,7 +1007,7 @@ img.m-image, svg.m-image {
 div.m-image {
   text-align: center;
 }
-img.m-image, svg.m-image, div.m-image img {
+img.m-image, svg.m-image, div.m-image img, div.m-image svg {
   max-width: 100%;
   border-radius: 0.2rem;
 }
@@ -1050,7 +1050,7 @@ figure.m-figure > *:first-child {
 figure.m-figure > *:last-child {
   margin-bottom: 1rem;
 }
-figure.m-figure img {
+figure.m-figure img, figure.m-figure svg {
   position: relative;
   margin-left: 0;
   margin-right: 0;
@@ -1059,7 +1059,7 @@ figure.m-figure img {
   border-top-right-radius: 0.2rem;
   max-width: 100%;
 }
-figure.m-figure.m-flat img {
+figure.m-figure.m-flat img, figure.m-figure.m-flat svg {
   border-bottom-left-radius: 0.2rem;
   border-bottom-right-radius: 0.2rem;
 }
@@ -1069,7 +1069,7 @@ figure.m-figure figcaption {
   font-weight: normal;
   font-size: 1.17rem;
 }
-figure.m-figure a img {
+figure.m-figure a img, figure.m-figure a svg {
   margin-left: -1rem;
   margin-right: -1rem;
 }
@@ -1079,7 +1079,7 @@ figure.m-figure.m-fullwidth, figure.m-figure.m-fullwidth > * {
 figure.m-figure.m-fullwidth > *:first-child {
   display: inline;
 }
-figure.m-figure.m-fullwidth img {
+figure.m-figure.m-fullwidth img, figure.m-figure.m-fullwidth svg {
   width: 100%;
 }
 figure.m-figure.m-fullwidth:after {
diff --git a/css/m-light.compiled.css b/css/m-light.compiled.css
index 73b33c49..a30bd2a3 100644
--- a/css/m-light.compiled.css
+++ b/css/m-light.compiled.css
@@ -1007,7 +1007,7 @@ img.m-image, svg.m-image {
 div.m-image {
   text-align: center;
 }
-img.m-image, svg.m-image, div.m-image img {
+img.m-image, svg.m-image, div.m-image img, div.m-image svg {
   max-width: 100%;
   border-radius: 0.2rem;
 }
@@ -1050,7 +1050,7 @@ figure.m-figure > *:first-child {
 figure.m-figure > *:last-child {
   margin-bottom: 1rem;
 }
-figure.m-figure img {
+figure.m-figure img, figure.m-figure svg {
   position: relative;
   margin-left: 0;
   margin-right: 0;
@@ -1059,7 +1059,7 @@ figure.m-figure img {
   border-top-right-radius: 0.2rem;
   max-width: 100%;
 }
-figure.m-figure.m-flat img {
+figure.m-figure.m-flat img, figure.m-figure.m-flat svg {
   border-bottom-left-radius: 0.2rem;
   border-bottom-right-radius: 0.2rem;
 }
@@ -1069,7 +1069,7 @@ figure.m-figure figcaption {
   font-weight: normal;
   font-size: 1.17rem;
 }
-figure.m-figure a img {
+figure.m-figure a img, figure.m-figure a svg {
   margin-left: -1rem;
   margin-right: -1rem;
 }
@@ -1079,7 +1079,7 @@ figure.m-figure.m-fullwidth, figure.m-figure.m-fullwidth > * {
 figure.m-figure.m-fullwidth > *:first-child {
   display: inline;
 }
-figure.m-figure.m-fullwidth img {
+figure.m-figure.m-fullwidth img, figure.m-figure.m-fullwidth svg {
   width: 100%;
 }
 figure.m-figure.m-fullwidth:after {
diff --git a/doc/css/components.rst b/doc/css/components.rst
index 846466a7..6bf6b215 100644
--- a/doc/css/components.rst
+++ b/doc/css/components.rst
@@ -660,7 +660,8 @@ border around the caption and description. The caption is expected to be in the
 :html:`<figcaption>` element. The description is optional, but should be
 wrapped in some tag as well (for example a :html:`<span>`). The
 :css:`.m-fullwidth` class works here too and you can also wrap the
-:html:`<img>` element in an :html:`<a>` tag to make it clickable.
+:html:`<img>` / :html:`<svg>` element in an :html:`<a>` tag to make it
+clickable.
 
 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
-- 
2.30.2