From: Vladimír Vondruš Date: Fri, 5 Jan 2018 16:39:31 +0000 (+0100) Subject: css: rework button markup. X-Git-Url: https://www.chiark.greenend.org.uk/ucgi/~cjwatson/git?a=commitdiff_plain;h=b9824736835cf2b8ed3ace7795c0e7cf24ffccb4;p=blog.git css: rework button markup. Default to centered button, because that's what one usually wants. This also resolves the problem with the following markup not having spacing after and thus being too sticky to content that immediately follows it.
...
The new markup is thus this, the .m-text-centered class no longer needed. Adding .m-fullwidth to the
works as expected.
...
Sorry for potential breakages of your content. --- diff --git a/css/m-components.css b/css/m-components.css index 287c4506..d5af0c07 100644 --- a/css/m-components.css +++ b/css/m-components.css @@ -694,7 +694,10 @@ dl.m-diary dd { } /* Button */ -a.m-button { +div.m-button { + text-align: center; +} +div.m-button a { display: inline-block; border-radius: var(--border-radius); padding-top: 0.75rem; @@ -702,19 +705,18 @@ a.m-button { padding-left: 1.5rem; padding-right: 1.5rem; text-decoration: none; - text-align: center; font-size: 1.17rem; } -a.m-button.m-fullwidth { +div.m-button.m-fullwidth a { display: block; padding-left: 0; padding-right: 0; } -a.m-button .m-big:first-child { +div.m-button a .m-big:first-child { font-size: 1.37rem; font-weight: bold; } -a.m-button .m-small:last-child { +div.m-button a .m-small:last-child { font-size: 0.854rem; } @@ -977,33 +979,33 @@ table.m-table tr.m-dim th, table.m-table th.m-dim { } /* 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 { +div.m-button a, .m-label { color: var(--background-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); } +div.m-button.m-warning a, .m-label:not(.m-flat).m-warning { background-color: var(--warning-color); } +div.m-button.m-danger a, .m-label:not(.m-flat).m-danger { background-color: var(--danger-color); } +div.m-button.m-info a, .m-label:not(.m-flat).m-info { background-color: var(--info-color); } +div.m-button.m-dim a, .m-label:not(.m-flat).m-dim { background-color: var(--dim-color); } +div.m-button.m-default a:hover, div.m-button.m-default a:focus, div.m-button.m-default a:active { background-color: var(--default-button-active-color); } -a.m-button.m-primary:hover, a.m-button.m-primary:focus, a.m-button.m-primary:active { +div.m-button.m-primary a:hover, div.m-button.m-primary a:focus, div.m-button.m-primary a:active { background-color: var(--primary-button-active-color); } -a.m-button.m-success:hover, a.m-button.m-success:focus, a.m-button.m-success:active { +div.m-button.m-success a:hover, div.m-button.m-success a:focus, div.m-button.m-success a:active { background-color: var(--success-button-active-color); } -a.m-button.m-warning:hover, a.m-button.m-warning:focus, a.m-button.m-warning:active { +div.m-button.m-warning a:hover, div.m-button.m-warning a:focus, div.m-button.m-warning a:active { background-color: var(--warning-button-active-color); } -a.m-button.m-danger:hover, a.m-button.m-danger:focus, a.m-button.m-danger:active { +div.m-button.m-danger a:hover, div.m-button.m-danger a:focus, div.m-button.m-danger a:active { background-color: var(--danger-button-active-color); } -a.m-button.m-info:hover, a.m-button.m-info:focus, a.m-button.m-info:active { +div.m-button.m-info a:hover, div.m-button.m-info a:focus, div.m-button.m-info a:active { background-color: var(--info-button-active-color); } -a.m-button.m-dim:hover, a.m-button.m-dim:focus, a.m-button.m-dim:active { +div.m-button.m-dim a:hover, div.m-button.m-dim a:focus, div.m-button.m-dim a:active { background-color: var(--dim-button-active-color); } @@ -1392,7 +1394,7 @@ div.m-math.m-dim svg, svg.m-math.m-dim { fill: var(--dim-color); } /* Spacing after every block element, but not after the last */ p, ul, ol, dl, blockquote, pre, figure.m-code-figure, figure.m-console-figure, hr, article, article > header, article section, -.m-note, .m-frame, .m-block, .m-button, +.m-note, .m-frame, .m-block, div.m-button, div.m-scroll, table.m-table, div.m-image, img.m-image, svg.m-image, figure.m-figure, .m-imagegrid, div.m-math { margin-bottom: 1rem; @@ -1400,10 +1402,10 @@ figure.m-figure, .m-imagegrid, div.m-math { p:last-child, ul:last-child, ol:last-child, dl:last-child, blockquote:last-child, pre:last-child, figure.m-code-figure:last-child, figure.m-console-figure:last-child, hr:last-child, article:last-child, article section:last-child, -.m-note:last-child, .m-frame:last-child, .m-block:last-child, .m-button:last-child, -table.m-table:last-child, img.m-image:last-child, svg.m-image:last-child, -div.m-image:last-child, figure.m-figure:last-child, .m-imagegrid:last-child, -div.m-math:last-child { +.m-note:last-child, .m-frame:last-child, .m-block:last-child, +div.m-button:last-child, table.m-table:last-child, +img.m-image:last-child, svg.m-image:last-child, div.m-image:last-child, +figure.m-figure:last-child, .m-imagegrid:last-child, div.m-math:last-child { margin-bottom: 0; } @@ -1413,8 +1415,7 @@ div.m-math:last-child { li > p:last-child, li > blockquote:last-child, li > pre:last-child, li > figure.m-code-figure:last-child, li > figure.m-console-figure:last-child, li > .m-note:last-child, li > .m-frame:last-child, li > .m-block:last-child, -li > .m-button:last-child, li > div.m-scroll:last-child, -li > table.m-table:last-child, +li > div.m-button:last-child, li > div.m-scroll:last-child, li > table.m-table:last-child, li > img.m-image:last-child, li > svg.m-image:last-child, li > div.m-image:last-child, li > figure.m-figure:last-child, li > div.m-math:last-child { margin-bottom: 1rem; @@ -1422,11 +1423,10 @@ li > figure.m-figure:last-child, li > div.m-math:last-child { li:last-child > p:last-child, li:last-child > blockquote:last-child, li:last-child > pre:last-child, li:last-child > figure.m-code-figure:last-child, li:last-child > figure.m-console-figure:last-child, li:last-child > .m-note:last-child, li:last-child > .m-frame:last-child, li:last-child > .m-block:last-child, -li:last-child > .m-button:last-child, li:last-child > div.m-scroll:last-child, -li:last-child > table.m-table:last-child, -li:last-child > img.m-image:last-child, li:last-child > svg.m-image:last-child, -li:last-child > div.m-image:last-child, li:last-child > figure.m-figure:last-child, -li:last-child > div.m-math:last-child { +li:last-child > div.m-button:last-child, li:last-child > div.m-scroll:last-child, +li:last-child > table.m-table:last-child, li:last-child > img.m-image:last-child, +li:last-child > svg.m-image:last-child, li:last-child > div.m-image:last-child, +li:last-child > figure.m-figure:last-child, li:last-child > div.m-math:last-child { margin-bottom: 0; } diff --git a/doc/css/components-test.rst b/doc/css/components-test.rst index a04b4dd2..dbfd6edb 100644 --- a/doc/css/components-test.rst +++ b/doc/css/components-test.rst @@ -1140,7 +1140,7 @@ List with components inside
An info note.
  • - A button +
    A button

  • Next item.

    diff --git a/doc/css/components.rst b/doc/css/components.rst index 56614c8b..481314b6 100644 --- a/doc/css/components.rst +++ b/doc/css/components.rst @@ -352,40 +352,38 @@ 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:`` tag. The button is by default displayed as inline block, either -wrap it in :css:`.m-text-center` etc. :html:`
    ` to make it centered or -apply a :css:`.m-fullwidth` class to it to display it as a full-width block -with center-aligned label. +:html:`` 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. .. code-figure:: .. code:: html - Success button +
    Success button
    .. raw:: html
    - Default button +
    Default button
    - Primary button +
    Primary button
    - Success button +
    Success button
    - Warning button +
    Warning button
    - Danger button +
    Danger button
    - Info button +
    Info button
    - Dim button +
    Dim button
    @@ -396,8 +394,8 @@ class inside the :html:`` to achieve the following effect: .. code:: html -
    - +
    +
    Download the thing
    Any platform, 5 kB.
     @@ -405,8 +403,8 @@ class inside the :html:`` to achieve the following effect: .. raw:: html -
    - +
    +
    Download the thing
    Any platform, 5 kB.
     diff --git a/pelican-plugins/m/components.py b/pelican-plugins/m/components.py index 5b6ca883..be842eca 100644 --- a/pelican-plugins/m/components.py +++ b/pelican-plugins/m/components.py @@ -233,8 +233,7 @@ class Button(rst.Directive): set_classes(self.options) text = '\n'.join(self.content) - ref_node = nodes.reference(text, '', refuri=self.arguments[0], **self.options) - ref_node['classes'] += ['m-button', self.style_class] + ref_node = nodes.reference(text, '', refuri=self.arguments[0]) if self.content: node = nodes.Element() # anonymous container for parsing @@ -266,7 +265,11 @@ class Button(rst.Directive): description['classes'] += ['m-small'] ref_node += description - return [ref_node] + wrapper_node = nodes.container(**self.options) + wrapper_node['classes'] += ['m-button', self.style_class] + wrapper_node += ref_node + + return [wrapper_node] class DefaultButton(Button): style_class = 'm-default' diff --git a/pelican-plugins/m/test/components/page.html b/pelican-plugins/m/test/components/page.html index 4f30ba61..fb2a6f21 100644 --- a/pelican-plugins/m/test/components/page.html +++ b/pelican-plugins/m/test/components/page.html @@ -62,12 +62,16 @@ snippet
    Dim text.

    ~ ~ ~

    -Button text. -
    +
    +Button text. +
    +
    +
    First text.
    Second text.
     +