From 93ac5ad989bbd2ef39062cef1485d11f93b8b788 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Vladim=C3=ADr=20Vondru=C5=A1?= Date: Sat, 18 Nov 2017 17:08:58 +0100 Subject: [PATCH] css: new Label component. --- css/m-components.css | 49 ++++++++++++++++++++++++------------- doc/css/components-test.rst | 20 +++++++++++++++ doc/css/components.rst | 21 ++++++++++++++++ doc/plugins/components.rst | 23 +++++++++++++++++ 4 files changed, 96 insertions(+), 17 deletions(-) diff --git a/css/m-components.css b/css/m-components.css index c59a6565..31491661 100644 --- 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 1119a0e2..c7ac4201 100644 --- a/doc/css/components-test.rst +++ b/doc/css/components-test.rst @@ -151,6 +151,26 @@ Text

Info text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Aliquam pharetra imperdiet tortor sed vehicula. Link.

Dim text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Aliquam pharetra imperdiet tortor sed vehicula. Link.

+Labels +====== + +They should have proper vertical alignment. + +.. raw:: html + +

Heading 1 label label

+

Heading 2 label flat

+

Heading 3 label flat

+

Heading 4 label flat

+
Heading 5 label flat
+
Heading 6 label flat
+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. label flat Vivamus ultrices a erat eu suscipit. Aliquam pharetra imperdiet tortor sed vehicula.

+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices label flat a erat eu suscipit. Aliquam pharetra imperdiet tortor sed vehicula.

+ +

Lorem ipsum dolor sit amet, label flat consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Aliquam pharetra imperdiet tortor sed vehicula.

+ Tables ====== diff --git a/doc/css/components.rst b/doc/css/components.rst index 02cdb338..88cf94d6 100644 --- a/doc/css/components.rst +++ b/doc/css/components.rst @@ -357,6 +357,27 @@ class inside the :html:`` to achieve the following effect: +`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 + +

An article updated

+

That's how things are now. + clarified

+ + .. raw:: html + +

An article updated

+

That's how things are now. + clarified

+ `Tables`_ ========= diff --git a/doc/plugins/components.rst b/doc/plugins/components.rst index 1d34db6a..7252ce42 100644 --- 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` -- 2.30.2