From: Vladimír Vondruš <mosra@centrum.cz>
Date: Tue, 16 Jan 2018 12:53:43 +0000 (+0100)
Subject: Added flat button style.
X-Git-Url: https://www.chiark.greenend.org.uk/ucgi/~cjwatson/git?a=commitdiff_plain;h=67182dc73cee965e5a2184b1706c94344287a308;p=blog.git

Added flat button style.
---

diff --git a/css/m-components.css b/css/m-components.css
index d966a9cb..64cf7f47 100644
--- 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 481314b6..4b689344 100644
--- 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 19c53a24..5c91fc40 100644
--- 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 be842eca..b3771957 100644
--- 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 fb2a6f21..1184932e 100644
--- 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 190891fd..b28a7dc1 100644
--- 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