css: new Label component.

diff --git a/css/m-components.css b/css/m-components.css
index c59a6565324f8ad1e114c476467f63d927a77a5e..31491661a92a57edbbbbc43e9501347e1f48005a 100644 (file)
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -668,6 +668,21 @@ a.m-button .m-small:last-child {
   font-size: 0.854rem;
 }
 
+/* Label */
+.m-label {
+  border-radius: var(--border-radius);
+  font-size: 75%;
+  font-weight: normal;
+  padding: 0.125rem 0.25rem;
+  vertical-align: 7.5%;
+}
+.m-label.m-flat {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: var(--dim-color);
+  padding: 0.0625rem 0.1875rem;
+}
+
 /* Tables */
 table.m-table {
   border-collapse: collapse;
@@ -885,28 +900,28 @@ table.m-table tr.m-dim th, table.m-table th.m-dim {
   color: var(--dim-filled-link-active-color);
 }
 
-/* Colored text */
-.m-text.m-default { color: var(--default-color); }
-.m-text.m-primary { color: var(--primary-color); }
-.m-text.m-success { color: var(--success-color); }
-.m-text.m-warning { color: var(--warning-color); }
-.m-text.m-danger { color: var(--danger-color); }
-.m-text.m-info { color: var(--info-color); }
-.m-text.m-dim { color: var(--dim-color); }
+/* Colored text, flat label */
+.m-text.m-default, .m-label.m-flat.m-default { color: var(--default-color); }
+.m-text.m-primary, .m-label.m-flat.m-primary { color: var(--primary-color); }
+.m-text.m-success, .m-label.m-flat.m-success { color: var(--success-color); }
+.m-text.m-warning, .m-label.m-flat.m-warning { color: var(--warning-color); }
+.m-text.m-danger, .m-label.m-flat.m-danger { color: var(--danger-color); }
+.m-text.m-info, .m-label.m-flat.m-info { color: var(--info-color); }
+.m-text.m-dim, .m-label.m-flat.m-dim { color: var(--dim-color); }
 .m-text.m-dim a { color: var(--dim-link-color); }
 .m-text.m-dim a:hover, .m-text.m-dim a:focus, .m-text.m-dim a:active {
   color: var(--dim-link-active-color);
 }
 
-/* Colored button */
-a.m-button { color: var(--background-color); }
-a.m-button.m-default { background-color: var(--default-color); }
-a.m-button.m-primary { background-color: var(--primary-color); }
-a.m-button.m-success { background-color: var(--success-color); }
-a.m-button.m-warning { background-color: var(--warning-color); }
-a.m-button.m-danger { background-color: var(--danger-color); }
-a.m-button.m-info { background-color: var(--info-color); }
-a.m-button.m-dim { background-color: var(--dim-color); }
+/* Colored button, label */
+a.m-button, .m-label { color: var(--background-color); }
+a.m-button.m-default, .m-label:not(.m-flat).m-default { background-color: var(--default-color); }
+a.m-button.m-primary, .m-label:not(.m-flat).m-primary { background-color: var(--primary-color); }
+a.m-button.m-success, .m-label:not(.m-flat).m-success { background-color: var(--success-color); }
+a.m-button.m-warning, .m-label:not(.m-flat).m-warning { background-color: var(--warning-color); }
+a.m-button.m-danger, .m-label:not(.m-flat).m-danger { background-color: var(--danger-color); }
+a.m-button.m-info, .m-label:not(.m-flat).m-info { background-color: var(--info-color); }
+a.m-button.m-dim, .m-label:not(.m-flat).m-dim { background-color: var(--dim-color); }
 a.m-button.m-default:hover, a.m-button.m-default:focus, a.m-button.m-default:active {
   background-color: var(--default-button-active-color);
 }

diff --git a/doc/css/components-test.rst b/doc/css/components-test.rst
index 1119a0e2f1db20e31f68911aad136bab74b965e4..c7ac4201b15994ae49c0e7dd35a6a78f5886f7eb 100644 (file)
--- a/doc/css/components-test.rst
+++ b/doc/css/components-test.rst
@@ -151,6 +151,26 @@ Text
     <p class="m-text m-info">Info text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Aliquam pharetra imperdiet tortor sed vehicula. <a href="#">Link.</a></p>
     <p class="m-text m-dim">Dim text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Aliquam pharetra imperdiet tortor sed vehicula. <a href="#">Link.</a></p>
 
+Labels
+======
+
+They should have proper vertical alignment.
+
+.. raw:: html
+
+    <h1>Heading 1 <span class="m-label m-default">label</span> <span class="m-label m-dim">label</span></h1>
+    <h2>Heading 2 <span class="m-label m-primary">label</span> <span class="m-label m-flat m-default">flat</span></h2>
+    <h3>Heading 3 <span class="m-label m-success">label</span> <span class="m-label m-flat m-primary">flat</span></h3>
+    <h4>Heading 4 <span class="m-label m-warning">label</span> <span class="m-label m-flat m-success">flat</span></h4>
+    <h5>Heading 5 <span class="m-label m-danger">label</span> <span class="m-label m-flat m-warning">flat</span></h5>
+    <h6>Heading 6 <span class="m-label m-info">label</span> <span class="m-label m-flat m-danger">flat</span></h6>
+
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class="m-label m-primary">label</span> <span class="m-label m-flat m-info">flat</span> Vivamus ultrices a erat eu suscipit. Aliquam pharetra imperdiet tortor sed vehicula.</p>
+
+    <p class="m-text m-big">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices <span class="m-label m-success">label</span> <span class="m-label m-flat m-dim">flat</span> a erat eu suscipit. Aliquam pharetra imperdiet tortor sed vehicula.</p>
+
+    <p class="m-text m-small">Lorem ipsum dolor sit amet,  <span class="m-label m-warning">label</span> <span class="m-label m-flat m-info">flat</span> consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Aliquam pharetra imperdiet tortor sed vehicula.</p>
+
 Tables
 ======
 

diff --git a/doc/css/components.rst b/doc/css/components.rst
index 02cdb3385830292e69b8b23aaf73f00ebd00a74d..88cf94d6a3f54b717a9dcf4e1c4c04f7a5f7ed92 100644 (file)
--- a/doc/css/components.rst
+++ b/doc/css/components.rst
@@ -357,6 +357,27 @@ class inside the :html:`<a>` to achieve the following effect:
           </a>
         </div>
 
+`Labels`_
+=========
+
+Use :css:`.m-label` together with a color class to style a label. Combine with
+:css:`.m-flat` to create a less noticeable label. The label size adapts to size
+of surrounding text.
+
+.. code-figure::
+
+    .. code:: html
+
+        <h3>An article <span class="m-label m-success">updated</span></h3>
+        <p class="m-text m-dim">That's how things are now.
+        <span class="m-label m-flat m-primary">clarified</span></p>
+
+    .. raw:: html
+
+        <h3>An article <span class="m-label m-success">updated</span></h3>
+        <p class="m-text m-dim">That's how things are now.
+        <span class="m-label m-flat m-primary">clarified</span></p>
+
 `Tables`_
 =========
 

diff --git a/doc/plugins/components.rst b/doc/plugins/components.rst
index 1d34db6a7cdbe9d10397f6f917944e5450a67236..7252ce429fea7199b9801f870b2df425337aa531 100644 (file)
--- a/doc/plugins/components.rst
+++ b/doc/plugins/components.rst
@@ -335,3 +335,26 @@ arranging content in three-column grid can be done like this:
         .. container:: m-col-m-4 m-text-center
 
             Right column content.
+
+For inline components, derive a custom role with additional CSS classes. For
+example:
+
+.. code-figure::
+
+    .. code:: rst
+
+        .. role:: label-success
+            :class: m-label m-success
+        .. role:: label-danger
+            :class: m-label m-danger
+
+        -   Design direction and project goals :label-success:`done`
+        -   Automated testing :label-danger:`missing`
+
+    .. role:: label-success
+        :class: m-label m-success
+    .. role:: label-danger
+        :class: m-label m-danger
+
+    -   Design direction and project goals :label-success:`done`
+    -   Automated testing :label-danger:`missing`