nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2024-11-23 07:47:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

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

Browse source
This commit is contained in:
Sören Weber 2023-11-29 21:52:14 +01:00
parent 7dd41c5142
commit 3e440e5228
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
5 changed files with 40 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
layouts/partials/shortcodes/button.html
View file

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

12
static/css/ie.css
View file

@ -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) */
}

6
static/css/theme-neon.css
View file

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

13
static/css/theme.css
View file

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

18
static/css/variant.css
View file

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