button: make non-interactive if used as mock #740

layouts/partials/shortcodes/button.html

@@ -13,17 +13,22 @@
 {{- $target := .target | default "" }}
 {{- $type := .type | default "" }}
 {{- $isButton := false }}
-{{- if or (not $href) (strings.HasPrefix $href "javascript:") }}
+{{- $isLink := false }}
+{{- if or $type (strings.HasPrefix $href "javascript:") }}
   {{- $isButton = true }}
   {{- $href = substr $href (len "javascript:") }}
   {{- if not $type }}
     {{- $type = "button" }}
   {{- end }}
+{{- else if not $href }}
 {{- else if and (eq (len $target) 0) (or (strings.HasPrefix $href "http://") (strings.HasPrefix $href "https://") ) }}
+  {{- $isLink = true }}
   {{- $target = "_blank" }}
   {{- if isset $page.Site.Params "externallinktarget" }}
     {{- $target = $page.Site.Params.externalLinkTarget }}
   {{- end }}
+{{- else }}
+  {{- $isLink = true }}
 {{- end }}
 {{- $title := .title | default ($content) }}
 {{- if not $title }}
@@ -46,11 +51,13 @@
 {{- end }}
 {{- $iconposition := .iconposition | default "left" }}
 {{- with $page -}}
-<span class="btn cstyle {{ $style }}"{{ if $color }} style="--VARIABLE-BOX-color: {{ $color }};"{{ end }}>
+<span class="btn cstyle {{ if or $isButton $isLink }}interactive {{ end }}{{ $style }}"{{ if $color }} style="--VARIABLE-BOX-color: {{ $color }};"{{ end }}>
   {{- if $isButton -}}
-  <button{{ if $href }} onclick="{{ $href | safeJS }}"{{ end }}{{ if gt (len $type) 0 }} type="{{ $type }}"{{ end }}>
+  <button onclick="{{ $href | safeJS }}"{{ if gt (len $type) 0 }} type="{{ $type }}"{{ end }}>
+  {{- else if $isLink -}}
+  <a href="{{ $href }}"{{ if gt (len $target) 0 }} target="{{ $target }}"{{ end }}>
   {{- else -}}
-  <a{{ if $href }} href="{{ $href }}"{{ if gt (len $target) 0 }} target="{{ $target }}"{{ end }}{{ end }}>
+  <span>
   {{- end }}
   {{- if and $icon (eq $iconposition "left") }}<i class="{{ $icon }}"></i>{{ end }}
   {{- if and $icon (eq $iconposition "left") $title }} {{ end }}
@@ -59,8 +66,10 @@
   {{- if and $icon (eq $iconposition "right") }}<i class="{{ $icon }}"></i>{{ end }}
   {{- if $isButton -}}
   </button>
-  {{- else -}}
+  {{- else if $isLink -}}
   </a>
+  {{- else -}}
+  </span>
   {{- end -}}
 </span>
 {{- end }}

static/css/ie.css

@@ -628,9 +628,9 @@
 		color: rgba( 255, 255, 255, 1 ); /* var(--BOX-CAPTION-color) */
 	}
 
-	.btn > *:hover,
+	.btn.interactive > *:hover,
-	.btn > *:active,
+	.btn.interactive > *:active,
-	.btn > *:focus {
+	.btn.interactive > *:focus {
 		background-color: rgba( 255, 255, 255, .833 ); /* var(--BOX-BG-color) */
 		color: rgba( 16, 16, 16, 1 ); /* var(--BOX-NEUTRAL-TEXT-color) */
 	}
@@ -736,9 +736,9 @@
 		color: rgba( 0, 0, 0, 1 ); /* var(--MAIN-TEXT-color) */
 	}
 
-	.btn.cstyle.transparent:hover,
+	.btn.cstyle.interactive.transparent:hover,
-	.btn.cstyle.transparent:focus,
+	.btn.cstyle.interactive.transparent:focus,
-	.btn.cstyle.transparent:active {
+	.btn.cstyle.interactive.transparent:active {
 		background-color: rgba( 128, 128, 128, 1 ); /* var(--BOX-NEUTRAL-color) */
 	}
 

static/css/theme-neon.css

@@ -244,9 +244,9 @@ body .btn.cstyle.transparent > * {
     color: var(--VARIABLE-BOX-CAPTION-color);
 }
 
-body .btn.cstyle.transparent > *:hover,
+body .btn.cstyle.interactive.transparent > *:hover,
-body .btn.cstyle.transparent > *:active,
+body .btn.cstyle.interactive.transparent > *:active,
-body .btn.cstyle.transparent > *:focus {
+body .btn.cstyle.interactive.transparent > *:focus {
     background-color: var(--INTERNAL-MAIN-TITLES-TEXT-color);
     color: var(--INTERNAL-MAIN-TEXT-color);
 }

static/css/theme.css

@@ -1492,7 +1492,6 @@ html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right {
 
 .btn {
     border-radius: 4px;
-    cursor: pointer;
     display: inline-block;
     font-size: .9rem;
     font-weight: 500;
@@ -1503,7 +1502,11 @@ html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right {
     -webkit-user-select: none;
     user-select: none;
 }
+.btn.interactive {
+    cursor: pointer;
+}
 
+.btn > span,
 .btn > a {
     display: block;
 }
@@ -1539,13 +1542,13 @@ html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right {
     background-color: transparent;
 }
 
-.btn > *:focus {
+.btn.interactive > .btn-interactive:focus {
     outline: none;
 }
 
-.btn > *:hover,
+.btn.interactive > *:hover,
-.btn > *:active,
+.btn.interactive > *:active,
-.btn > *:focus {
+.btn.interactive > *:focus {
     text-decoration: none;
 }
 

static/css/variant.css

@@ -356,9 +356,9 @@ pre:not(.mermaid) .copy-to-clipboard-button:hover {
     color: var(--VARIABLE-BOX-CAPTION-color);
 }
 
-.btn > *:hover,
+.btn.interactive > *:hover,
-.btn > *:active,
+.btn.interactive > *:active,
-.btn > *:focus {
+.btn.interactive > *:focus {
     background-color: var(--VARIABLE-BOX-BG-color);
     color: var(--VARIABLE-BOX-TEXT-color);
 }
@@ -367,12 +367,12 @@ pre:not(.mermaid) .copy-to-clipboard-button:hover {
     --VARIABLE-BOX-BG-color: var(--INTERNAL-BOX-BG-color);
 }
 
-.btn.cstyle.transparent:hover,
+.btn.cstyle.interactive.transparent:hover,
-.btn.cstyle.transparent:focus,
+.btn.cstyle.interactive.transparent:focus,
-.btn.cstyle.transparent:active,
+.btn.cstyle.interactive.transparent:active,
-.btn.cstyle.transparent:has(a:hover),
+.btn.cstyle.interactive.transparent:has(a:hover),
-.btn.cstyle.transparent:has(a:focus),
+.btn.cstyle.interactive.transparent:has(a:focus),
-.btn.cstyle.transparent:has(a:active) {
+.btn.cstyle.interactive.transparent:has(a:active) {
     background-color: var(--INTERNAL-BOX-NEUTRAL-color);
 }