button: add color option #240

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="vardownload btn primary">Download color variant</a>
-<a class="varreset btn btn-default">Reset 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="vardownload btn primary">Download color variant</a>
-<a class="varreset btn btn-default">Reset variant</a>
+<a class="varreset btn warning">Reset variant</a>
 
 <script>
 variants.generator( '#vargenerator', '.vardownload', '.varreset' );

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/" 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 */%}}
-```
 
-{{% button href="https://gohugo.io/" %}}Get Hugo{{% /button %}}
+## Usage
-{{% 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 %}}
+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       | _<empty>_ | 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 %}}

layouts/shortcodes/button.html

@@ -1,14 +1,27 @@
 {{- $_hugo_config := `{ "version": 1 }` }}
-<a{{ with .Get "href"}} href="{{ . }}" target="_blank"{{ end }} class="btn btn-default">
+{{- $href := .Get "href" }}
-  {{- $icon := .Get "icon" }}
+{{- $style := .Get "style" | default "transparent" }}
-  {{- $iconposition := .Get "icon-position" }}
+{{- $title := .Get "title" | default (.Inner) | default ($style | T) }}
-  {{- if ($icon) }}
+{{- $icon := .Get "icon" | default "" }}
-    {{- if or (not ($iconposition)) (eq $iconposition "left") }}
+{{- 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 }}
+    {{ $title }}
-  {{ .Inner }}
+    {{- if and $icon (eq $iconposition "right") }}
-  {{- if and ($icon) (eq $iconposition "right")}}
     <i class="{{ $icon }}"></i>
     {{- end }}
   </a>
+</span>

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;
 }

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  4px var(--VARIABLE-BOX-color);
-        0 0  8px 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  4px var(--VARIABLE-BOX-CAPTION-color);
-        0 0  8px 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;

static/css/theme.css

@@ -1168,49 +1168,50 @@ option {
 }
 
 .btn {
-    background-image: none !important;
+    --VARIABLE-BOX-color: var(--INTERNAL-BOX-NEUTRAL-color);
-    border-radius: 4px !important;
+    --VARIABLE-BOX-CAPTION-color: var(--INTERNAL-BOX-CAPTION-color);
-    border-style: solid !important;
+    --VARIABLE-BOX-BG-color: var(--INTERNAL-BOX-BG-color);
-    border-width: 1px !important;
+    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-NEUTRAL-TEXT-color);
-    cursor: pointer !important;
+    border-radius: 4px;
-    display: inline-block !important;
+    -webkit-print-color-adjust: exact;
-    font-size: 14px !important;
+    color-adjust: exact;
+    cursor: pointer;
+    display: inline-block;
+    font-size: 14px;
     font-weight: 500;
-    line-height: 1.42857143 !important;
+    line-height: 1.42857143;
-    padding: 6px 12px !important;
+    margin-bottom: 0;
-    margin-bottom: 0 !important;
+    touch-action: manipulation;
-    text-align: center !important;
+    -ms-user-select: none;
-    touch-action: manipulation !important;
+    -webkit-user-select: none;
-    transition: all 0.15s !important;
+    user-select: none;
-    -ms-user-select: none !important;
-    -webkit-user-select: none !important;
-    user-select: none !important;
-    white-space: nowrap !important;
 }
 
-.btn:focus {
+.btn a {
-    outline: none !important;
+    border-radius: 4px;
-}
+    border-style: solid;
-
+    border-width: 1px;
-.btn:hover,
+    padding: 6px 12px;
-.btn:focus {
+    text-align: center;
-    text-decoration: none !important;
+    touch-action: manipulation;
-}
+    -ms-user-select: none;
-
+    -webkit-user-select: none;
-.btn-default {
+    user-select: none;
+    white-space: nowrap;
     background-color: transparent;
-    border-color: rgba( 134, 134, 134, .333 ) !important;
 }
 
-.btn-default:hover,
+#body #body-inner .btn a.highlight:after {
-.btn-default:focus,
+    background-color: transparent;
-.btn-default:active {
-    background-color: rgba( 134, 134, 134, .75 ) !important;
-    border-color: rgba( 134, 134, 134, .75 ) !important;
 }
 
-.btn-default:active {
+.btn a:focus {
-    background-image: none !important;
+    outline: none;
+}
+
+.btn a:hover,
+.btn a:focus {
+    text-decoration: none;
 }
 
 /* anchors */

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 {
+.btn {
-    color: var(--INTERNAL-MAIN-TEXT-color) !important;
+    background-color: var(--VARIABLE-BOX-color);
 }
 
-.btn-default:hover,
+.btn a {
-.btn-default:focus,
+    border-color: var(--VARIABLE-BOX-color);
-.btn-default:active {
+    color: var(--VARIABLE-BOX-CAPTION-color);
-    color: var(--INTERNAL-MAIN-BG-color) !important;
+}
+
+.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 {