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

tabs: colors for each tab in a set #550

Browse source
This commit is contained in:
Sören Weber 2023-06-05 18:31:55 +02:00
parent df37463789
commit aea9a54a08
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
3 changed files with 20 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -2,27 +2,28 @@
{{- $tabs := .content | default slice }} {{- $tabs := .content | default slice }}
{{- $groupid := .groupid | default (partial "make-random-md5.hugo" $context) }} {{- $groupid := .groupid | default (partial "make-random-md5.hugo" $context) }}
{{- with $context }} {{- with $context }}
<div class="tab-panel cstyle default" data-tab-group="{{ $groupid }}"> <div class="tab-panel" data-tab-group="{{ $groupid }}">
<div class="tab-nav"> <div class="tab-nav">
{{- range $idx, $tab := $tabs }} {{- range $idx, $tab := $tabs }}
<button <button
data-tab-item="{{ .name | $context.RenderString | plainify }}" data-tab-item="{{ .name | $context.RenderString | plainify }}"
class="tab-nav-button{{ cond (eq $idx 0) " active" ""}}" class="tab-nav-button tab-panel-style cstyle default{{ cond (eq $idx 0) " active" ""}}"
onclick="switchTab('{{ $groupid }}','{{ .name | $context.RenderString | plainify}}')" onclick="switchTab('{{ $groupid }}','{{ .name | $context.RenderString | plainify}}')"
> >
<div><div>{{ .name | $context.RenderString }}</div></div> <div><div>{{ .name | $context.RenderString }}</div></div>
</button> </button>
{{- end }} {{- end }}
</div> </div>
<div class="tab-content"> <div class="tab-content-container">
{{- range $idx, $tab := $tabs }} {{- range $idx, $tab := $tabs }}
<div <div
data-tab-item="{{ .name | $context.RenderString | plainify }}" data-tab-item="{{ .name | $context.RenderString | plainify }}"
class="tab-content-text{{ cond (eq $idx 0) " active" ""}}" class="tab-content tab-panel-style cstyle default{{ cond (eq $idx 0) " active" ""}}">
> <div class="tab-content-text">
{{ if ne "<" (substr (strings.TrimLeft " " .content) 0 1) }}<p>{{ end }}<!-- we add a DOM element here if there is none to make collapsing marings work --> {{ if ne "<" (substr (strings.TrimLeft " " .content) 0 1) }}<p>{{ end }}<!-- we add a DOM element here if there is none to make collapsing marings work -->
{{ .content | safeHTML }}</div><!-- no line break allowed here because of awkward behavior of Hugo 110 or this theme when tag shortcode is called standalone outside of tags shortcode ? --> {{ .content | safeHTML }}</div><!-- no line break allowed here because of awkward behavior of Hugo 110 or this theme when tag shortcode is called standalone outside of tags shortcode ? -->
{{- end }} </div>
{{- end }}
</div> </div>
</div> </div>
{{- end }} {{- end }}

12
static/css/theme.css
View file

@ -1882,14 +1882,18 @@ html[dir="rtl"] #sidebar ul.collapsible-menu > li > label > i.fa-chevron-right {
#body .tab-content{ #body .tab-content{
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
display: block; display: none;
/* if setting a border to 1px, a browser instead sets it to 1dppx which is not /* if setting a border to 1px, a browser instead sets it to 1dppx which is not
usable as a unit yet, so we have to calculate it ourself */ usable as a unit yet, so we have to calculate it ourself */
margin-top: calc( -1px / var(--dpr) ); margin-top: calc( -1px / var(--dpr) );
z-index: 10; z-index: 10;
} }
#body .tab-content.active{
display: block;
}
#body .tab-content-text{ #body .tab-content-text{
display: none;
padding: 1rem; padding: 1rem;
} }
/* remove margin if only a single code block is contained in the tab */ /* remove margin if only a single code block is contained in the tab */
@ -1900,10 +1904,6 @@ html[dir="rtl"] #sidebar ul.collapsible-menu > li > label > i.fa-chevron-right {
#body .tab-content-text > div.highlight:only-child > pre{ #body .tab-content-text > div.highlight:only-child > pre{
border: 0; border: 0;
} }
#body .tab-content-text.active{
display: block;
}
#body .tab-content-text pre{ #body .tab-content-text pre{
margin-bottom: 0; margin-bottom: 0;
margin-top: 0; margin-top: 0;

12
static/css/variant.css
View file

@ -398,25 +398,25 @@ article ul > li > input[type="checkbox"] {
color: var(--VARIABLE-BOX-TEXT-color); color: var(--VARIABLE-BOX-TEXT-color);
} }
.tab-panel.cstyle.default { .tab-panel-style.cstyle.default {
--VARIABLE-BOX-color: rgba( 134, 134, 134, .4 ); --VARIABLE-BOX-color: rgba( 134, 134, 134, .4 );
--VARIABLE-BOX-BG-color: var(--INTERNAL-MAIN-BG-color); --VARIABLE-BOX-BG-color: var(--INTERNAL-MAIN-BG-color);
} }
.tab-panel.cstyle.transparent { .tab-panel-style.cstyle.transparent {
--VARIABLE-BOX-color: var(--INTERNAL-BOX-NEUTRAL-color); --VARIABLE-BOX-color: var(--INTERNAL-BOX-NEUTRAL-color);
--VARIABLE-BOX-BG-color: transparent; --VARIABLE-BOX-BG-color: transparent;
} }
#body .tab-panel.cstyle.default > * > .tab-nav-button.active, #body .tab-panel-style.cstyle.default.tab-nav-button.active,
#body .tab-panel.cstyle.transparent > * > .tab-nav-button.active{ #body .tab-panel-style.cstyle.transparent.tab-nav-button.active{
background-color: var(--VARIABLE-BOX-BG-color); background-color: var(--VARIABLE-BOX-BG-color);
border-left-color: var(--VARIABLE-BOX-color); border-left-color: var(--VARIABLE-BOX-color);
border-right-color: var(--VARIABLE-BOX-color); border-right-color: var(--VARIABLE-BOX-color);
border-top-color: var(--VARIABLE-BOX-color); border-top-color: var(--VARIABLE-BOX-color);
} }
#body .tab-panel.cstyle.default > .tab-content, #body .tab-panel-style.cstyle.default.tab-content,
#body .tab-panel.cstyle.transparent > .tab-content{ #body .tab-panel-style.cstyle.transparent.tab-content{
background-color: var(--VARIABLE-BOX-BG-color); background-color: var(--VARIABLE-BOX-BG-color);
} }