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

tabs: adjust tab handle styling #550

Browse source
This commit is contained in:
Sören Weber 2023-06-06 18:15:08 +02:00
parent 67fe76a99c
commit f50c362c8e
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
2 changed files with 22 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
layouts/partials/shortcodes/tabs.html
View file

@ -60,7 +60,10 @@
class="tab-nav-button tab-panel-style cstyle {{ .style }}{{ cond (eq $idx 0) " active" ""}}"{{ if .color }} style="--VARIABLE-BOX-color: {{ .color }};"{{ end }} class="tab-nav-button tab-panel-style cstyle {{ .style }}{{ cond (eq $idx 0) " active" ""}}"{{ if .color }} style="--VARIABLE-BOX-color: {{ .color }};"{{ end }}
onclick="switchTab('{{ $groupid }}','{{ .itemid }}')" onclick="switchTab('{{ $groupid }}','{{ .itemid }}')"
> >
<div><div>{{ if .icon }}<i class="{{ .icon }}"></i>{{ end }}{{ if and .icon .title }} {{ end }}{{ .title | $context.RenderString }}{{ if (not .title) }}&#8203;{{ end }}</div></div> <div>
<div class="tab-nav-hidden">{{ if .icon }}<i class="{{ .icon }}"></i>{{ end }}{{ if and .icon .title }} {{ end }}{{ .title | $context.RenderString }}{{ if (not .title) }}&#8203;{{ end }}</div>
<div class="tab-nav-text">{{ if .icon }}<i class="{{ .icon }}"></i>{{ end }}{{ if and .icon .title }} {{ end }}{{ .title | $context.RenderString }}{{ if (not .title) }}&#8203;{{ end }}</div>
</div>
</button> </button>
{{- end }} {{- end }}
</div> </div>

20
static/css/theme.css
View file

@ -1850,6 +1850,8 @@ html[dir="rtl"] #sidebar ul.collapsible-menu > li > label > i.fa-chevron-right {
} }
#body .tab-nav-button{ #body .tab-nav-button{
-webkit-appearance: none;
appearance: none;
background-color: transparent; background-color: transparent;
border: 1px solid transparent; border: 1px solid transparent;
display: block; display: block;
@ -1864,14 +1866,18 @@ html[dir="rtl"] #sidebar ul.collapsible-menu > li > label > i.fa-chevron-right {
cursor: default; cursor: default;
} }
#body .tab-nav-button > *{
position: relative;
}
#body .tab-nav-button.active > *{ #body .tab-nav-button.active > *{
border-radius: 1px 1px 0 0; border-radius: 1px 1px 0 0;
} }
#body .tab-nav-button > * > *{ #body .tab-nav-button > * > *{
border-bottom-style: solid; border-bottom-style: solid;
border-bottom-width: 2px; border-bottom-width: .2rem;
padding: .2rem .6rem; padding: .2rem .6rem 0 .6rem;
} }
#body .tab-nav-button.active > * > *{ #body .tab-nav-button.active > * > *{
@ -1879,6 +1885,16 @@ html[dir="rtl"] #sidebar ul.collapsible-menu > li > label > i.fa-chevron-right {
font-weight: 500; font-weight: 500;
} }
#body .tab-nav-button > * > .tab-nav-hidden{
font-weight: 500;
visibility: hidden;
}
#body .tab-nav-button > * > .tab-nav-text{
position: absolute;
top: 0;
}
#body .tab-content{ #body .tab-content{
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;