From 3e440e5228832e1c741ae403e673bd06cec448e9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=B6ren=20Weber?= Date: Wed, 29 Nov 2023 21:52:14 +0100 Subject: [PATCH] button: make non-interactive if used as mock #740 --- layouts/partials/shortcodes/button.html | 19 ++++++++++++++----- static/css/ie.css | 12 ++++++------ static/css/theme-neon.css | 6 +++--- static/css/theme.css | 13 ++++++++----- static/css/variant.css | 18 +++++++++--------- 5 files changed, 40 insertions(+), 28 deletions(-) diff --git a/layouts/partials/shortcodes/button.html b/layouts/partials/shortcodes/button.html index f9d23850c7..b496548594 100644 --- a/layouts/partials/shortcodes/button.html +++ b/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 -}} - + {{- if $isButton -}} - + - {{- else -}} + {{- else if $isLink -}} + {{- else -}} + {{- end -}} {{- end }} \ No newline at end of file diff --git a/static/css/ie.css b/static/css/ie.css index 7d7b4fa562..0aaf1f2004 100644 --- a/static/css/ie.css +++ b/static/css/ie.css @@ -628,9 +628,9 @@ color: rgba( 255, 255, 255, 1 ); /* var(--BOX-CAPTION-color) */ } - .btn > *:hover, - .btn > *:active, - .btn > *:focus { + .btn.interactive > *:hover, + .btn.interactive > *:active, + .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.transparent:focus, - .btn.cstyle.transparent:active { + .btn.cstyle.interactive.transparent:hover, + .btn.cstyle.interactive.transparent:focus, + .btn.cstyle.interactive.transparent:active { background-color: rgba( 128, 128, 128, 1 ); /* var(--BOX-NEUTRAL-color) */ } diff --git a/static/css/theme-neon.css b/static/css/theme-neon.css index 9068641d9e..92f2c56da6 100644 --- a/static/css/theme-neon.css +++ b/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.transparent > *:active, -body .btn.cstyle.transparent > *:focus { +body .btn.cstyle.interactive.transparent > *:hover, +body .btn.cstyle.interactive.transparent > *:active, +body .btn.cstyle.interactive.transparent > *:focus { background-color: var(--INTERNAL-MAIN-TITLES-TEXT-color); color: var(--INTERNAL-MAIN-TEXT-color); } diff --git a/static/css/theme.css b/static/css/theme.css index 788ffa23ef..499e46d2c2 100644 --- a/static/css/theme.css +++ b/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 > *:active, -.btn > *:focus { +.btn.interactive > *:hover, +.btn.interactive > *:active, +.btn.interactive > *:focus { text-decoration: none; } diff --git a/static/css/variant.css b/static/css/variant.css index e8748dad32..b462cab17f 100644 --- a/static/css/variant.css +++ b/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 > *:active, -.btn > *:focus { +.btn.interactive > *:hover, +.btn.interactive > *:active, +.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.transparent:focus, -.btn.cstyle.transparent:active, -.btn.cstyle.transparent:has(a:hover), -.btn.cstyle.transparent:has(a:focus), -.btn.cstyle.transparent:has(a:active) { +.btn.cstyle.interactive.transparent:hover, +.btn.cstyle.interactive.transparent:focus, +.btn.cstyle.interactive.transparent:active, +.btn.cstyle.interactive.transparent:has(a:hover), +.btn.cstyle.interactive.transparent:has(a:focus), +.btn.cstyle.interactive.transparent:has(a:active) { background-color: var(--INTERNAL-BOX-NEUTRAL-color); }