Added flat button style.

diff --git a/css/m-components.css b/css/m-components.css
index d966a9cb062e5c207d664dcbbea3b3cb62e766a2..64cf7f47d3e609e6ae456d9682e6ca254c585ff5 100644 (file)
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -979,6 +979,10 @@ table.m-table tr.m-dim th, table.m-table th.m-dim {
 
 /* Colored button, label */
 div.m-button a, .m-label { color: var(--button-background-color); }
+div.m-button.m-flat a { color: var(--color); }
+div.m-button.m-flat a:hover, div.m-button.m-default a:focus, div.m-button.m-default a:active {
+  color: var(--link-active-color);
+}
 div.m-button.m-default a, .m-label:not(.m-flat).m-default { background-color: var(--default-color); }
 div.m-button.m-primary a, .m-label:not(.m-flat).m-primary { background-color: var(--primary-color); }
 div.m-button.m-success a, .m-label:not(.m-flat).m-success { background-color: var(--success-color); }

diff --git a/doc/css/components.rst b/doc/css/components.rst
index 481314b6bf2f7f5d5e77f956a54df7302eca6604..4b6893449df77bdaba38d3089919326a4aa7daf6 100644 (file)
--- a/doc/css/components.rst
+++ b/doc/css/components.rst
@@ -352,8 +352,10 @@ without using those particular tags.
 
 To highlight important links such as file download, you can style them as
 buttons. Use :css:`.m-button` CSS class together with desired color class on an
-:html:`<a>` tag. The button is by default centered, apply a :css:`.m-fullwidth`
-class to it to display it as a full-width block with center-aligned label.
+:html:`<a>` tag. Use :css:`.m-flat` instead of a color class to make the button
+flat. It is then styled similarly to a link, but with bigger padding around.
+The button is by default centered, apply a :css:`.m-fullwidth` class to it to
+display it as a full-width block with center-aligned label.
 
 .. code-figure::
 
@@ -385,6 +387,9 @@ class to it to display it as a full-width block with center-aligned label.
           <div class="m-col-m-3 m-col-s-6">
             <div class="m-button m-dim m-fullwidth"><a href="#">Dim button</a></div>
           </div>
+          <div class="m-col-m-3 m-col-s-6">
+            <div class="m-button m-flat m-fullwidth"><a href="#">Flat button</a></div>
+          </div>
         </div>
 
 You can put two :html:`<div>`\ s with :css:`.m-big` and :css:`.m-small` CSS

diff --git a/doc/plugins/components.rst b/doc/plugins/components.rst
index 19c53a242adc62d82e0ed09ff895cdbaf5184edf..5c91fc40873119b76975fa9f1582b85edd997ca1 100644 (file)
--- a/doc/plugins/components.rst
+++ b/doc/plugins/components.rst
@@ -235,11 +235,12 @@ emphasis or strong text:
 `Button links`_
 ===============
 
-Use :rst:`.. button-default::`, :rst:`.. button-primary::` etc. directives to
-create a `button link <{filename}/css/components.rst#button-links>`_. Directive
-argument is the URL, directive contents are button title. Use the :rst:`:class:`
-option to specify additional CSS classes. Use two paragraphs of content to
-create a button with title and description.
+Use :rst:`.. button-default::`, :rst:`.. button-primary::` etc. or
+:rst:`.. button-flat::` directives to create a
+`button link <{filename}/css/components.rst#button-links>`_. Directive argument
+is the URL, directive contents are button title. Use the :rst:`:class:` option
+to specify additional CSS classes. Use two paragraphs of content to create a
+button with title and description.
 
 .. code-figure::
 

diff --git a/pelican-plugins/m/components.py b/pelican-plugins/m/components.py
index be842ecaef2034c2136d24e81c426c68baa49de2..b3771957d717295c9e3ab0cc8bb2d6ca0fc2a709 100644 (file)
--- a/pelican-plugins/m/components.py
+++ b/pelican-plugins/m/components.py
@@ -292,6 +292,9 @@ class InfoButton(Button):
 class DimButton(Button):
     style_class = 'm-dim'
 
+class FlatButton(Button):
+    style_class = 'm-flat'
+
 def register():
     rst.directives.register_directive('transition', Transition)
 
@@ -331,3 +334,4 @@ def register():
     rst.directives.register_directive('button-danger', DangerButton)
     rst.directives.register_directive('button-info', InfoButton)
     rst.directives.register_directive('button-dim', DimButton)
+    rst.directives.register_directive('button-flat', FlatButton)

diff --git a/pelican-plugins/m/test/components/page.html b/pelican-plugins/m/test/components/page.html
index fb2a6f2197b687ba49710253d3bc9c959bcd4e87..1184932e63548867ea5ebcb73271745f96d89c15 100644 (file)
--- a/pelican-plugins/m/test/components/page.html
+++ b/pelican-plugins/m/test/components/page.html
@@ -72,6 +72,9 @@ First text.</div>
 Second text.</div>
 </a>
 </div>
+<div class="m-button m-flat">
+<a href="#"><span>Flat button</span></a>
+</div>
 <!-- /content -->
       </div>
     </div>

diff --git a/pelican-plugins/m/test/components/page.rst b/pelican-plugins/m/test/components/page.rst
index 190891fd2bebb50253fd93ed8278823d625c3cc0..b28a7dc124e8c8ab1c59567eeff36aab17b2582b 100644 (file)
--- a/pelican-plugins/m/test/components/page.rst
+++ b/pelican-plugins/m/test/components/page.rst
@@ -72,3 +72,7 @@ m.components
     First text.
 
     Second text.
+
+.. button-flat:: #
+
+    Flat button