css: add m-block-dot-* to have linear lists delimited by a center dot.

diff --git a/css/m-components.css b/css/m-components.css
index b32c8853815d6948726114ab506635229f8a37ed..495c11a0101b6d971f4b36fc2d3da51327c2b645 100644 (file)
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -185,20 +185,32 @@ ul[class*='m-block-'] li, ol[class*='m-block-'] li {
 ul[class*='m-block-bar-'] li:not(:last-child)::after, ol[class*='m-block-bar-'] li:not(:last-child)::after {
   content: " | ";
 }
+ul[class*='m-block-dot-'] li:not(:last-child)::after, ol[class*='m-block-dot-'] li:not(:last-child)::after {
+  content: " • ";
+}
 @media screen and (min-width: 576px) {
-  ul.m-block-bar-s, ol.m-block-bar-s { padding-left: 2rem; }
-  ul.m-block-bar-s li, ol.m-block-bar-s li { display: list-item; }
-  ul.m-block-bar-s li:not(:last-child)::after, ol.m-block-bar-s li:not(:last-child)::after { content: ""; }
+  ul.m-block-bar-s, ol.m-block-bar-s,
+  ul.m-block-dot-s, ol.m-block-dot-s { padding-left: 2rem; }
+  ul.m-block-bar-s li, ol.m-block-bar-s li,
+  ul.m-block-dot-s li, ol.m-block-dot-s li { display: list-item; }
+  ul.m-block-bar-s li:not(:last-child)::after, ol.m-block-bar-s li:not(:last-child)::after,
+  ul.m-block-dot-s li:not(:last-child)::after, ol.m-block-dot-s li:not(:last-child)::after { content: ""; }
 }
 @media screen and (min-width: 768px) {
-  ul.m-block-bar-m, ol.m-block-bar-m { padding-left: 2rem; }
-  ul.m-block-bar-m li, ol.m-block-bar-m li { display: list-item; }
-  ul.m-block-bar-m li:not(:last-child)::after, ol.m-block-bar-m li:not(:last-child)::after { content: ""; }
+  ul.m-block-bar-m, ol.m-block-bar-m,
+  ul.m-block-dot-m, ol.m-block-dot-m { padding-left: 2rem; }
+  ul.m-block-bar-m li, ol.m-block-bar-m li,
+  ul.m-block-dot-m li, ol.m-block-dot-m li { display: list-item; }
+  ul.m-block-bar-m li:not(:last-child)::after, ol.m-block-bar-m li:not(:last-child)::after,
+  ul.m-block-dot-m li:not(:last-child)::after, ol.m-block-dot-m li:not(:last-child)::after { content: ""; }
 }
 @media screen and (min-width: 992px) {
-  ul.m-block-bar-l, ol.m-block-bar-l { padding-left: 2rem; }
-  ul.m-block-bar-l li, ol.m-block-bar-l li { display: list-item; }
-  ul.m-block-bar-l li:not(:last-child)::after, ol.m-block-bar-l li:not(:last-child)::after { content: ""; }
+  ul.m-block-bar-l, ol.m-block-bar-l,
+  ul.m-block-dot-l, ol.m-block-dot-l { padding-left: 2rem; }
+  ul.m-block-bar-l li, ol.m-block-bar-l li,
+  ul.m-block-dot-l li, ol.m-block-dot-l li { display: list-item; }
+  ul.m-block-bar-l li:not(:last-child)::after, ol.m-block-bar-l li:not(:last-child)::after,
+  ul.m-block-dot-l li:not(:last-child)::after, ol.m-block-dot-l li:not(:last-child)::after { content: ""; }
 }
 
 /* Special paragraph styling */

diff --git a/css/m-dark+doxygen.compiled.css b/css/m-dark+doxygen.compiled.css
index 0bd8572f166caafb4a1edbdb584c8f1b5286351d..85150baf3834de350fe36380513867d369aa83b2 100644 (file)
--- a/css/m-dark+doxygen.compiled.css
+++ b/css/m-dark+doxygen.compiled.css
@@ -540,20 +540,32 @@ ul[class*='m-block-'] li, ol[class*='m-block-'] li {
 ul[class*='m-block-bar-'] li:not(:last-child)::after, ol[class*='m-block-bar-'] li:not(:last-child)::after {
   content: " | ";
 }
+ul[class*='m-block-dot-'] li:not(:last-child)::after, ol[class*='m-block-dot-'] li:not(:last-child)::after {
+  content: " • ";
+}
 @media screen and (min-width: 576px) {
-  ul.m-block-bar-s, ol.m-block-bar-s { padding-left: 2rem; }
-  ul.m-block-bar-s li, ol.m-block-bar-s li { display: list-item; }
-  ul.m-block-bar-s li:not(:last-child)::after, ol.m-block-bar-s li:not(:last-child)::after { content: ""; }
+  ul.m-block-bar-s, ol.m-block-bar-s,
+  ul.m-block-dot-s, ol.m-block-dot-s { padding-left: 2rem; }
+  ul.m-block-bar-s li, ol.m-block-bar-s li,
+  ul.m-block-dot-s li, ol.m-block-dot-s li { display: list-item; }
+  ul.m-block-bar-s li:not(:last-child)::after, ol.m-block-bar-s li:not(:last-child)::after,
+  ul.m-block-dot-s li:not(:last-child)::after, ol.m-block-dot-s li:not(:last-child)::after { content: ""; }
 }
 @media screen and (min-width: 768px) {
-  ul.m-block-bar-m, ol.m-block-bar-m { padding-left: 2rem; }
-  ul.m-block-bar-m li, ol.m-block-bar-m li { display: list-item; }
-  ul.m-block-bar-m li:not(:last-child)::after, ol.m-block-bar-m li:not(:last-child)::after { content: ""; }
+  ul.m-block-bar-m, ol.m-block-bar-m,
+  ul.m-block-dot-m, ol.m-block-dot-m { padding-left: 2rem; }
+  ul.m-block-bar-m li, ol.m-block-bar-m li,
+  ul.m-block-dot-m li, ol.m-block-dot-m li { display: list-item; }
+  ul.m-block-bar-m li:not(:last-child)::after, ol.m-block-bar-m li:not(:last-child)::after,
+  ul.m-block-dot-m li:not(:last-child)::after, ol.m-block-dot-m li:not(:last-child)::after { content: ""; }
 }
 @media screen and (min-width: 992px) {
-  ul.m-block-bar-l, ol.m-block-bar-l { padding-left: 2rem; }
-  ul.m-block-bar-l li, ol.m-block-bar-l li { display: list-item; }
-  ul.m-block-bar-l li:not(:last-child)::after, ol.m-block-bar-l li:not(:last-child)::after { content: ""; }
+  ul.m-block-bar-l, ol.m-block-bar-l,
+  ul.m-block-dot-l, ol.m-block-dot-l { padding-left: 2rem; }
+  ul.m-block-bar-l li, ol.m-block-bar-l li,
+  ul.m-block-dot-l li, ol.m-block-dot-l li { display: list-item; }
+  ul.m-block-bar-l li:not(:last-child)::after, ol.m-block-bar-l li:not(:last-child)::after,
+  ul.m-block-dot-l li:not(:last-child)::after, ol.m-block-dot-l li:not(:last-child)::after { content: ""; }
 }
 p.m-poem {
   text-indent: 0;

diff --git a/css/m-dark.compiled.css b/css/m-dark.compiled.css
index a904f4fa45437edc11dfa40ce3fb6f997a4fa0f7..b2459dba103d6b2e3fc6638db2fb958927fd305a 100644 (file)
--- a/css/m-dark.compiled.css
+++ b/css/m-dark.compiled.css
@@ -540,20 +540,32 @@ ul[class*='m-block-'] li, ol[class*='m-block-'] li {
 ul[class*='m-block-bar-'] li:not(:last-child)::after, ol[class*='m-block-bar-'] li:not(:last-child)::after {
   content: " | ";
 }
+ul[class*='m-block-dot-'] li:not(:last-child)::after, ol[class*='m-block-dot-'] li:not(:last-child)::after {
+  content: " • ";
+}
 @media screen and (min-width: 576px) {
-  ul.m-block-bar-s, ol.m-block-bar-s { padding-left: 2rem; }
-  ul.m-block-bar-s li, ol.m-block-bar-s li { display: list-item; }
-  ul.m-block-bar-s li:not(:last-child)::after, ol.m-block-bar-s li:not(:last-child)::after { content: ""; }
+  ul.m-block-bar-s, ol.m-block-bar-s,
+  ul.m-block-dot-s, ol.m-block-dot-s { padding-left: 2rem; }
+  ul.m-block-bar-s li, ol.m-block-bar-s li,
+  ul.m-block-dot-s li, ol.m-block-dot-s li { display: list-item; }
+  ul.m-block-bar-s li:not(:last-child)::after, ol.m-block-bar-s li:not(:last-child)::after,
+  ul.m-block-dot-s li:not(:last-child)::after, ol.m-block-dot-s li:not(:last-child)::after { content: ""; }
 }
 @media screen and (min-width: 768px) {
-  ul.m-block-bar-m, ol.m-block-bar-m { padding-left: 2rem; }
-  ul.m-block-bar-m li, ol.m-block-bar-m li { display: list-item; }
-  ul.m-block-bar-m li:not(:last-child)::after, ol.m-block-bar-m li:not(:last-child)::after { content: ""; }
+  ul.m-block-bar-m, ol.m-block-bar-m,
+  ul.m-block-dot-m, ol.m-block-dot-m { padding-left: 2rem; }
+  ul.m-block-bar-m li, ol.m-block-bar-m li,
+  ul.m-block-dot-m li, ol.m-block-dot-m li { display: list-item; }
+  ul.m-block-bar-m li:not(:last-child)::after, ol.m-block-bar-m li:not(:last-child)::after,
+  ul.m-block-dot-m li:not(:last-child)::after, ol.m-block-dot-m li:not(:last-child)::after { content: ""; }
 }
 @media screen and (min-width: 992px) {
-  ul.m-block-bar-l, ol.m-block-bar-l { padding-left: 2rem; }
-  ul.m-block-bar-l li, ol.m-block-bar-l li { display: list-item; }
-  ul.m-block-bar-l li:not(:last-child)::after, ol.m-block-bar-l li:not(:last-child)::after { content: ""; }
+  ul.m-block-bar-l, ol.m-block-bar-l,
+  ul.m-block-dot-l, ol.m-block-dot-l { padding-left: 2rem; }
+  ul.m-block-bar-l li, ol.m-block-bar-l li,
+  ul.m-block-dot-l li, ol.m-block-dot-l li { display: list-item; }
+  ul.m-block-bar-l li:not(:last-child)::after, ol.m-block-bar-l li:not(:last-child)::after,
+  ul.m-block-dot-l li:not(:last-child)::after, ol.m-block-dot-l li:not(:last-child)::after { content: ""; }
 }
 p.m-poem {
   text-indent: 0;

diff --git a/css/m-light+doxygen.compiled.css b/css/m-light+doxygen.compiled.css
index 0afc2c26849d537e6205da02273e6c52b07ce8b1..c7ca76e8d9e08c496f91cc14a519cd5a937d93ea 100644 (file)
--- a/css/m-light+doxygen.compiled.css
+++ b/css/m-light+doxygen.compiled.css
@@ -540,20 +540,32 @@ ul[class*='m-block-'] li, ol[class*='m-block-'] li {
 ul[class*='m-block-bar-'] li:not(:last-child)::after, ol[class*='m-block-bar-'] li:not(:last-child)::after {
   content: " | ";
 }
+ul[class*='m-block-dot-'] li:not(:last-child)::after, ol[class*='m-block-dot-'] li:not(:last-child)::after {
+  content: " • ";
+}
 @media screen and (min-width: 576px) {
-  ul.m-block-bar-s, ol.m-block-bar-s { padding-left: 2rem; }
-  ul.m-block-bar-s li, ol.m-block-bar-s li { display: list-item; }
-  ul.m-block-bar-s li:not(:last-child)::after, ol.m-block-bar-s li:not(:last-child)::after { content: ""; }
+  ul.m-block-bar-s, ol.m-block-bar-s,
+  ul.m-block-dot-s, ol.m-block-dot-s { padding-left: 2rem; }
+  ul.m-block-bar-s li, ol.m-block-bar-s li,
+  ul.m-block-dot-s li, ol.m-block-dot-s li { display: list-item; }
+  ul.m-block-bar-s li:not(:last-child)::after, ol.m-block-bar-s li:not(:last-child)::after,
+  ul.m-block-dot-s li:not(:last-child)::after, ol.m-block-dot-s li:not(:last-child)::after { content: ""; }
 }
 @media screen and (min-width: 768px) {
-  ul.m-block-bar-m, ol.m-block-bar-m { padding-left: 2rem; }
-  ul.m-block-bar-m li, ol.m-block-bar-m li { display: list-item; }
-  ul.m-block-bar-m li:not(:last-child)::after, ol.m-block-bar-m li:not(:last-child)::after { content: ""; }
+  ul.m-block-bar-m, ol.m-block-bar-m,
+  ul.m-block-dot-m, ol.m-block-dot-m { padding-left: 2rem; }
+  ul.m-block-bar-m li, ol.m-block-bar-m li,
+  ul.m-block-dot-m li, ol.m-block-dot-m li { display: list-item; }
+  ul.m-block-bar-m li:not(:last-child)::after, ol.m-block-bar-m li:not(:last-child)::after,
+  ul.m-block-dot-m li:not(:last-child)::after, ol.m-block-dot-m li:not(:last-child)::after { content: ""; }
 }
 @media screen and (min-width: 992px) {
-  ul.m-block-bar-l, ol.m-block-bar-l { padding-left: 2rem; }
-  ul.m-block-bar-l li, ol.m-block-bar-l li { display: list-item; }
-  ul.m-block-bar-l li:not(:last-child)::after, ol.m-block-bar-l li:not(:last-child)::after { content: ""; }
+  ul.m-block-bar-l, ol.m-block-bar-l,
+  ul.m-block-dot-l, ol.m-block-dot-l { padding-left: 2rem; }
+  ul.m-block-bar-l li, ol.m-block-bar-l li,
+  ul.m-block-dot-l li, ol.m-block-dot-l li { display: list-item; }
+  ul.m-block-bar-l li:not(:last-child)::after, ol.m-block-bar-l li:not(:last-child)::after,
+  ul.m-block-dot-l li:not(:last-child)::after, ol.m-block-dot-l li:not(:last-child)::after { content: ""; }
 }
 p.m-poem {
   text-indent: 0;

diff --git a/css/m-light.compiled.css b/css/m-light.compiled.css
index ea40bc143df608bfbd36bd64c98cfadbbf54cdc3..2b58d04ee20cfbb21513da06f2f576413838cc02 100644 (file)
--- a/css/m-light.compiled.css
+++ b/css/m-light.compiled.css
@@ -540,20 +540,32 @@ ul[class*='m-block-'] li, ol[class*='m-block-'] li {
 ul[class*='m-block-bar-'] li:not(:last-child)::after, ol[class*='m-block-bar-'] li:not(:last-child)::after {
   content: " | ";
 }
+ul[class*='m-block-dot-'] li:not(:last-child)::after, ol[class*='m-block-dot-'] li:not(:last-child)::after {
+  content: " • ";
+}
 @media screen and (min-width: 576px) {
-  ul.m-block-bar-s, ol.m-block-bar-s { padding-left: 2rem; }
-  ul.m-block-bar-s li, ol.m-block-bar-s li { display: list-item; }
-  ul.m-block-bar-s li:not(:last-child)::after, ol.m-block-bar-s li:not(:last-child)::after { content: ""; }
+  ul.m-block-bar-s, ol.m-block-bar-s,
+  ul.m-block-dot-s, ol.m-block-dot-s { padding-left: 2rem; }
+  ul.m-block-bar-s li, ol.m-block-bar-s li,
+  ul.m-block-dot-s li, ol.m-block-dot-s li { display: list-item; }
+  ul.m-block-bar-s li:not(:last-child)::after, ol.m-block-bar-s li:not(:last-child)::after,
+  ul.m-block-dot-s li:not(:last-child)::after, ol.m-block-dot-s li:not(:last-child)::after { content: ""; }
 }
 @media screen and (min-width: 768px) {
-  ul.m-block-bar-m, ol.m-block-bar-m { padding-left: 2rem; }
-  ul.m-block-bar-m li, ol.m-block-bar-m li { display: list-item; }
-  ul.m-block-bar-m li:not(:last-child)::after, ol.m-block-bar-m li:not(:last-child)::after { content: ""; }
+  ul.m-block-bar-m, ol.m-block-bar-m,
+  ul.m-block-dot-m, ol.m-block-dot-m { padding-left: 2rem; }
+  ul.m-block-bar-m li, ol.m-block-bar-m li,
+  ul.m-block-dot-m li, ol.m-block-dot-m li { display: list-item; }
+  ul.m-block-bar-m li:not(:last-child)::after, ol.m-block-bar-m li:not(:last-child)::after,
+  ul.m-block-dot-m li:not(:last-child)::after, ol.m-block-dot-m li:not(:last-child)::after { content: ""; }
 }
 @media screen and (min-width: 992px) {
-  ul.m-block-bar-l, ol.m-block-bar-l { padding-left: 2rem; }
-  ul.m-block-bar-l li, ol.m-block-bar-l li { display: list-item; }
-  ul.m-block-bar-l li:not(:last-child)::after, ol.m-block-bar-l li:not(:last-child)::after { content: ""; }
+  ul.m-block-bar-l, ol.m-block-bar-l,
+  ul.m-block-dot-l, ol.m-block-dot-l { padding-left: 2rem; }
+  ul.m-block-bar-l li, ol.m-block-bar-l li,
+  ul.m-block-dot-l li, ol.m-block-dot-l li { display: list-item; }
+  ul.m-block-bar-l li:not(:last-child)::after, ol.m-block-bar-l li:not(:last-child)::after,
+  ul.m-block-dot-l li:not(:last-child)::after, ol.m-block-dot-l li:not(:last-child)::after { content: ""; }
 }
 p.m-poem {
   text-indent: 0;

diff --git a/doc/css/typography.rst b/doc/css/typography.rst
index e8ca1a23bc56bdeef5bb7da7a98770c0cd993d37..e96c39e7b8fa195f007cd9a2aedbca426b299fab 100644 (file)
--- a/doc/css/typography.rst
+++ b/doc/css/typography.rst
@@ -146,8 +146,9 @@ indentation.
         </ol>
 
 It's possible to convert a list to a single line with items separated by ``|``
-to save vertical space on mobile devices and responsively change it back on
-larger screens. Mark such list with :css:`.m-block-bar-*`:
+or ``•`` to save vertical space on mobile devices and responsively change it
+back on larger screens. Mark such list with :css:`.m-block-bar-*` or
+:css:`.m-block-dot-*`:
 
 .. code-figure::
 
@@ -159,6 +160,12 @@ larger screens. Mark such list with :css:`.m-block-bar-*`:
           <li>Item 3</li>
         </ul>
 
+        <ul class="m-block-dot-t">
+          <li>Alice</li>
+          <li>Bob</li>
+          <li>Joe</li>
+        </ul>
+
     .. raw:: html
 
         <ul class="m-block-bar-m">
@@ -167,6 +174,12 @@ larger screens. Mark such list with :css:`.m-block-bar-*`:
           <li>Item 3</li>
         </ul>
 
+        <ul class="m-block-dot-t">
+          <li>Alice</li>
+          <li>Bob</li>
+          <li>Joe</li>
+        </ul>
+
 .. note-success::
 
     Shrink your browser window to see the effect in the above list.