button: add color option #240

2024-11-23 07:47:54 +00:00 · 2022-05-29 21:30:20 +02:00 · 2022-05-29 21:30:20 +02:00 · b55d2f9c3c
commit b55d2f9c3c
parent 5d2403a067
7 changed files with 202 additions and 86 deletions
--- a/exampleSite/content/basics/generator/_index.en.md
+++ b/exampleSite/content/basics/generator/_index.en.md
@ -24,13 +24,13 @@ This only works in modern browsers.

 ## Variant generator

-<a class="vardownload btn btn-default">Download color variant</a>
-<a class="varreset btn btn-default">Reset variant</a>
+<a class="vardownload btn primary">Download color variant</a>
+<a class="varreset btn warning">Reset variant</a>

 <div id="vargenerator" class="mermaid" style="background-color: var(--INTERNAL-MAIN-TEXT-color);" align="center">Graph</div>

-<a class="vardownload btn btn-default">Download color variant</a>
-<a class="varreset btn btn-default">Reset variant</a>
+<a class="vardownload btn primary">Download color variant</a>
+<a class="varreset btn warning">Reset variant</a>

 <script>
 variants.generator( '#vargenerator', '.vardownload', '.varreset' );
--- a/exampleSite/content/shortcodes/button.en.md
+++ b/exampleSite/content/shortcodes/button.en.md
@ -1,16 +1,75 @@
 +++
-description = "Nice buttons on your page"
+description = "Clickable buttons"
 title = "Button"
 +++

-A button is a just a clickable button with optional icon.
+The `button` shortcode displays a clickable button with adjustable color, title and icon.

-```go
-{{%/* button href="https://gohugo.io/" */%}}Get Hugo{{%/* /button */%}}
-{{%/* button href="https://gohugo.io/" icon="fas fa-download" */%}}Get Hugo with icon{{%/* /button */%}}
-{{%/* button href="https://gohugo.io/" icon="fas fa-download" icon-position="right" */%}}Get Hugo with icon right{{%/* /button */%}}
-```
+{{% button href="https://gohugo.io/" icon="download" %}}Get Hugo{{% /button %}}

-{{% button href="https://gohugo.io/" %}}Get Hugo{{% /button %}}
-{{% button href="https://gohugo.io/" icon="fas fa-download" %}}Get Hugo with icon{{% /button %}}
-{{% button href="https://gohugo.io/" icon="fas fa-download" icon-position="right" %}}Get Hugo with icon right{{% /button %}}
+## Usage
+
+Once the button is clicked, it opens another browser tab for the given URL.
+
+````go
+{{%/* button href="https://gohugo.io/" icon="download" %}}Get Hugo{{% /button */%}}
+````
+
+### Parameter
+
+| Name                  | Optional  | Default         | Notes       |
+|:----------------------|:----------|:----------------|:------------|
+| **href**              | yes       | _&lt;empty&gt;_ | The destination URL for the button. If this parameter is not set, the button will do nothing but is still displayed as clickable. |
+| **style**             | yes       | `transparent`   | The color scheme used to paint the button.<br/><br/>- by severity: `info`, `note`, `tip`, `warning`<br/>- by brand color: `primary`, `secondary`<br/>- by color: `blue`, `green`, `grey`, `orange`, `red`<br/>- by special color: `default`, `transparent` |
+| **icon**              | yes       | see notes       | [Font Awesome icon name]({{%relref "cont/icons#finding-an-icon" %}}) set to the left of the title. Depending on the **style** there may be a default icon. Any given value will overwrite the default.<br/><br/>- for severity styles: a nice matching icon for the severity<br/>- for all other colors: _&lt;empty&gt;_<br/><br/>If you want no icon for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) |
+| **iconposition**      | yes       | `left`          | Places the icon to the `left` or `right` of the title. |
+| _**&lt;content&gt;**_ | yes       | see notes       | Arbitray text for the button title. Depending on the **style** there may be a default title. Any given value will overwrite the default.<br/><br/>- for severity styles: the matching title for the severity<br/>- for all other colors: _&lt;empty&gt;_<br/><br/>If you want no title for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) |
+
+## Examples
+
+### Style
+
+#### by Severity
+
+{{% button href="https://gohugo.io/" style="info" %}}Get Hugo{{% /button %}}
+{{% button href="https://gohugo.io/" style="note" %}}Get Hugo{{% /button %}}
+{{% button href="https://gohugo.io/" style="tip" %}}Get Hugo{{% /button %}}
+{{% button href="https://gohugo.io/" style="warning" %}}Get Hugo{{% /button %}}
+
+#### by Brand Colors
+
+{{% button href="https://gohugo.io/" style="primary" %}}Get Hugo{{% /button %}}
+{{% button href="https://gohugo.io/" style="secondary" %}}Get Hugo{{% /button %}}
+
+#### by Color
+
+{{% button href="https://gohugo.io/" style="blue" %}}Get Hugo{{% /button %}}
+{{% button href="https://gohugo.io/" style="green" %}}Get Hugo{{% /button %}}
+{{% button href="https://gohugo.io/" style="grey" %}}Get Hugo{{% /button %}}
+{{% button href="https://gohugo.io/" style="orange" %}}Get Hugo{{% /button %}}
+{{% button href="https://gohugo.io/" style="red" %}}Get Hugo{{% /button %}}
+
+#### by Special Color
+
+{{% button href="https://gohugo.io/" style="default" %}}Get Hugo{{% /button %}}
+{{% button href="https://gohugo.io/" style="transparent" %}}Get Hugo{{% /button %}}
+
+### Icon
+
+#### to the left
+
+{{% button href="https://gohugo.io/" icon="download" %}}Get Hugo{{% /button %}}
+
+#### to the right
+
+{{% button href="https://gohugo.io/" icon="download" icon-position="right" %}}Get Hugo{{% /button %}}
+
+#### Override for Severity
+
+{{% button href="https://gohugo.io/" icon="dragon" style="warning" %}}Get Hugo{{% /button %}}
+
+### Other
+
+#### Severity Style with all Defaults
+
+{{% button href="https://gohugo.io/" style="tip" %}}{{% /button %}}
--- a/layouts/shortcodes/button.html
+++ b/layouts/shortcodes/button.html
@ -1,14 +1,27 @@
 {{- $_hugo_config := `{ "version": 1 }` }}
-<a{{ with .Get "href"}} href="{{ . }}" target="_blank"{{ end }} class="btn btn-default">
-  {{- $icon := .Get "icon" }}
-  {{- $iconposition := .Get "icon-position" }}
-  {{- if ($icon) }}
-    {{- if or (not ($iconposition)) (eq $iconposition "left") }}
+{{- $href := .Get "href" }}
+{{- $style := .Get "style" | default "transparent" }}
+{{- $title := .Get "title" | default (.Inner) | default ($style | T) }}
+{{- $icon := .Get "icon" | default "" }}
+{{- if and (not $icon) (eq (len $icon) 0) }}
+  {{- if eq $style "info" }}{{ $icon = default "info-circle" }}{{ end }}
+  {{- if eq $style "warning" }}{{ $icon = default "exclamation-triangle" }}{{ end }}
+  {{- if eq $style "note" }}{{ $icon = default "exclamation-circle" }}{{ end }}
+  {{- if eq $style "tip" }}{{ $icon = default "lightbulb" }}{{ end }}
+{{- end }}
+{{- $icon = trim $icon " " }}
+{{- if and $icon (not (findRE ".*?\\bfa-\\w.*?" $icon)) }}
+  {{- $icon = printf "fa-fw fas fa-%s" $icon }}
+{{- end }}
+{{- $iconposition := .Get "icon-position" | default "left" }}
+<span class="btn cstyle {{ $style }}">
+  <a href="{{ $href }}" target="_blank">
+    {{- if and $icon (eq $iconposition "left") }}
    <i class="{{ $icon }}"></i>
    {{- end }}
-  {{- end }}
-  {{ .Inner }}
-  {{- if and ($icon) (eq $iconposition "right")}}
+    {{ $title }}
+    {{- if and $icon (eq $iconposition "right") }}
    <i class="{{ $icon }}"></i>
    {{- end }}
  </a>
+</span>
--- a/static/css/print.css
+++ b/static/css/print.css
@ -160,7 +160,7 @@ rapi-doc{
    margin-left: -12px;
    width: calc( 100% + 12px + 8px );
 }
-.btn-default,
+.btn,
 #body .tab-nav-button {
    color: black !important;
 }
--- a/static/css/theme-neon.css
+++ b/static/css/theme-neon.css
@ -183,25 +183,45 @@ body .anchor {
    text-shadow: none;
 }

+body .btn,
 body div.box {
    box-shadow:
        0 0  1px #fff,
        0 0  2px #fff,
        0 0  4px #808080,
-        0 0  4px var(--VARIABLE-BOX-color),
-        0 0  8px var(--VARIABLE-BOX-color);
+        0 0  4px var(--VARIABLE-BOX-color);
 }

+body .btn,
 body div.box > .box-label {
    text-shadow:
        0 0  1px #fff,
        0 0  2px #fff,
        0 0  4px #808080,
-        0 0  4px var(--VARIABLE-BOX-CAPTION-color),
-        0 0  8px var(--VARIABLE-BOX-CAPTION-color);
+        0 0  4px var(--VARIABLE-BOX-CAPTION-color);
 }

-body div.box.transparent {
+body .btn.cstyle {
+    --VARIABLE-BOX-TEXT-color: var(--VARIABLE-BOX-CAPTION-color);
+}
+
+body .btn.cstyle.transparent {
+    --VARIABLE-BOX-BG-color: var(--INTERNAL-BOX-BG-color);
+}
+
+body .btn.cstyle.transparent a {
+    border-color: var(--VARIABLE-BOX-color);
+    color: var(--VARIABLE-BOX-CAPTION-color);
+}
+
+body .btn.cstyle.transparent a:hover,
+body .btn.cstyle.transparent a:focus,
+body .btn.cstyle.transparent a:active {
+    background-color: var(--INTERNAL-MAIN-TITLES-TEXT-color);
+    color: var(--INTERNAL-MAIN-TEXT-color);
+}
+
+body .box.cstyle.transparent {
    box-shadow: none;
 }

@ -214,6 +234,7 @@ body div.box.transparent {
    #body h6 {
        text-shadow: none;
    }
+    #body .btn,
    #body div.box,
    #body div.box > .box-label {
        box-shadow: none;
@ -231,6 +252,7 @@ above will not apply, so we have to repeat it here */
 .print #body h6 {
    text-shadow: none;
 }
+.print #body .btn,
 .print #body div.box,
 .print #body div.box > .box-label {
    box-shadow: none;
--- a/static/css/theme.css
+++ b/static/css/theme.css
@ -1168,49 +1168,50 @@ option {
 }

 .btn {
-    background-image: none !important;
-    border-radius: 4px !important;
-    border-style: solid !important;
-    border-width: 1px !important;
-    cursor: pointer !important;
-    display: inline-block !important;
-    font-size: 14px !important;
+    --VARIABLE-BOX-color: var(--INTERNAL-BOX-NEUTRAL-color);
+    --VARIABLE-BOX-CAPTION-color: var(--INTERNAL-BOX-CAPTION-color);
+    --VARIABLE-BOX-BG-color: var(--INTERNAL-BOX-BG-color);
+    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-NEUTRAL-TEXT-color);
+    border-radius: 4px;
+    -webkit-print-color-adjust: exact;
+    color-adjust: exact;
+    cursor: pointer;
+    display: inline-block;
+    font-size: 14px;
    font-weight: 500;
-    line-height: 1.42857143 !important;
-    padding: 6px 12px !important;
-    margin-bottom: 0 !important;
-    text-align: center !important;
-    touch-action: manipulation !important;
-    transition: all 0.15s !important;
-    -ms-user-select: none !important;
-    -webkit-user-select: none !important;
-    user-select: none !important;
-    white-space: nowrap !important;
+    line-height: 1.42857143;
+    margin-bottom: 0;
+    touch-action: manipulation;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    user-select: none;
 }

-.btn:focus {
-    outline: none !important;
-}
-
-.btn:hover,
-.btn:focus {
-    text-decoration: none !important;
-}
-
-.btn-default {
+.btn a {
+    border-radius: 4px;
+    border-style: solid;
+    border-width: 1px;
+    padding: 6px 12px;
+    text-align: center;
+    touch-action: manipulation;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    user-select: none;
+    white-space: nowrap;
    background-color: transparent;
-    border-color: rgba( 134, 134, 134, .333 ) !important;
 }

-.btn-default:hover,
-.btn-default:focus,
-.btn-default:active {
-    background-color: rgba( 134, 134, 134, .75 ) !important;
-    border-color: rgba( 134, 134, 134, .75 ) !important;
+#body #body-inner .btn a.highlight:after {
+    background-color: transparent;
 }

-.btn-default:active {
-    background-image: none !important;
+.btn a:focus {
+    outline: none;
+}
+
+.btn a:hover,
+.btn a:focus {
+    text-decoration: none;
 }

 /* anchors */
--- a/static/css/variant.css
+++ b/static/css/variant.css
@ -206,62 +206,62 @@ div.box > .box-content {
    color: var(--VARIABLE-BOX-TEXT-color);
 }

-div.box.info {
+.cstyle.info {
    --VARIABLE-BOX-color: var(--INTERNAL-BOX-INFO-color);
    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-INFO-TEXT-color);
 }

-div.box.warning {
+.cstyle.warning {
    --VARIABLE-BOX-color: var(--INTERNAL-BOX-WARNING-color);
    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-WARNING-TEXT-color);
 }

-div.box.note {
+.cstyle.note {
    --VARIABLE-BOX-color: var(--INTERNAL-BOX-NOTE-color);
    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-NOTE-TEXT-color);
 }

-div.box.tip {
+.cstyle.tip {
    --VARIABLE-BOX-color: var(--INTERNAL-BOX-TIP-color);
    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-TIP-TEXT-color);
 }

-div.box.primary {
+.cstyle.primary {
    --VARIABLE-BOX-color: var(--INTERNAL-PRIMARY-color);
    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color);
 }

-div.box.secondary {
+.cstyle.secondary {
    --VARIABLE-BOX-color: var(--INTERNAL-SECONDARY-color);
    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color);
 }

-div.box.blue {
+.cstyle.blue {
    --VARIABLE-BOX-color: var(--INTERNAL-BOX-BLUE-color);
    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-BLUE-TEXT-color);
 }

-div.box.green {
+.cstyle.green {
    --VARIABLE-BOX-color: var(--INTERNAL-BOX-GREEN-color);
    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-GREEN-TEXT-color);
 }

-div.box.grey {
+.cstyle.grey {
    --VARIABLE-BOX-color: var(--INTERNAL-BOX-GREY-color);
    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-GREY-TEXT-color);
 }

-div.box.orange {
+.cstyle.orange {
    --VARIABLE-BOX-color: var(--INTERNAL-BOX-ORANGE-color);
-    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-WARNING-ORANGE-color);
+    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-ORANGE-TEXT-color);
 }

-div.box.red {
+.cstyle.red {
    --VARIABLE-BOX-color: var(--INTERNAL-BOX-RED-color);
    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-RED-TEXT-color);
 }

-div.box.transparent {
+.cstyle.transparent {
    --VARIABLE-BOX-color: transparent;
    --VARIABLE-BOX-CAPTION-color: var(--INTERNAL-MAIN-TITLES-TEXT-color);
    --VARIABLE-BOX-BG-color: transparent;
@ -347,14 +347,35 @@ pre .copy-to-clipboard-button:hover {
    background-color: var(--INTERNAL-MAIN-BG-color);
 }

-.btn-default {
-    color: var(--INTERNAL-MAIN-TEXT-color) !important;
+.btn {
+    background-color: var(--VARIABLE-BOX-color);
 }

-.btn-default:hover,
-.btn-default:focus,
-.btn-default:active {
-    color: var(--INTERNAL-MAIN-BG-color) !important;
+.btn a {
+    border-color: var(--VARIABLE-BOX-color);
+    color: var(--VARIABLE-BOX-CAPTION-color);
+}
+
+.btn a:hover,
+.btn a:focus,
+.btn a:active {
+    background-color: var(--VARIABLE-BOX-BG-color);
+    color: var(--VARIABLE-BOX-TEXT-color);
+}
+
+.btn.cstyle.transparent {
+    --VARIABLE-BOX-BG-color: var(--INTERNAL-BOX-BG-color);
+}
+
+.btn.cstyle.transparent:hover,
+.btn.cstyle.transparent:focus,
+.btn.cstyle.transparent:active {
+    background-color: var(--INTERNAL-BOX-NEUTRAL-color);
+}
+
+.btn.cstyle.transparent a {
+    --VARIABLE-BOX-color: var(--INTERNAL-BOX-NEUTRAL-color);
+    --VARIABLE-BOX-TEXT-color: var(--VARIABLE-BOX-CAPTION-color);
 }

 #body .tags a.tag-link {