css: ensure parity between <img> and <svg> for images and figures.

diff --git a/css/m-components.css b/css/m-components.css
index e0f7fb9e556629f0e04fbbffb823891943437846..39bb4bb9a2eb5fe71a2cb4e2891a68c57ef99b4c 100644 (file)
--- 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 12ccdb90441ee0f3bb1e124556c6599ff616f433..b94faedc9bed9ee2a70555c74fa40de6a47a8b48 100644 (file)
--- 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 632979a216098cbebceb5016d895ad9ef4c6e785..c23f3aa69a8c862e72e224efc779c865779cc39e 100644 (file)
--- 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 b32b33c6cfedc7a73112fd479d1acb5bcced09f2..addc9ce903abcca5623c902124153b72643629cf 100644 (file)
--- 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 73b33c49ac0c15c38d69aaf64950f2f9057949c0..a30bd2a31ba049c2cc31100176def62ec4c4da7f 100644 (file)
--- 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 846466a7195ecfa11cfa1f305488c02198fa2f54..6bf6b21585a77bdc4d5f059a9eb73f203ae75fab 100644 (file)
--- 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