nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2024-11-27 01:33:04 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

tabs: enhance styling #65 #64 #35

Browse source
This commit is contained in:
Sören Weber 2021-08-27 22:23:58 +02:00
parent 2f0c8e091d
commit 7da2073845
No known key found for this signature in database
GPG key ID: 07D17FF580AE7589
2 changed files with 26 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
layouts/shortcodes/tabs.html
View file

@ -8,7 +8,7 @@
data-tab-group="{{ $groupId }}" data-tab-group="{{ $groupId }}"
class="tab-nav-button btn {{ cond (eq $idx 0) "active" ""}}" class="tab-nav-button btn {{ cond (eq $idx 0) "active" ""}}"
onclick="switchTab('{{ $groupId }}','{{ .name }}')" onclick="switchTab('{{ $groupId }}','{{ .name }}')"
>{{ .name }}</button> ><span>{{ .name }}</span></button>
{{ end }} {{ end }}
</div> </div>
<div class="tab-content"> <div class="tab-content">

31
static/css/tabs.css
View file

@ -2,7 +2,9 @@
border-width: 1px 1px 1px 1px !important; border-width: 1px 1px 1px 1px !important;
border-color: #ccc !important; border-color: #ccc !important;
border-radius: 4px 4px 0 0 !important; border-radius: 4px 4px 0 0 !important;
background-color: #ddd !important; background-color: #eaeaea !important;
-webkit-print-color-adjust: exact;
color-adjust: exact;
float: left; float: left;
display: block; display: block;
position: relative; position: relative;
@ -10,24 +12,41 @@
bottom: -1px; bottom: -1px;
} }
#body .tab-nav-button:first-child { #body .tab-nav-button:first-child {
margin-left: 0px; margin-left: 9px;
} }
#body .tab-nav-button.active { #body .tab-nav-button.active {
background-color: #fff !important; background-color: #fff !important;
border-bottom-color: #fff !important; border-bottom-color: #fff !important;
} }
#body .tab-nav-button:not(.active) {
border-bottom-color: #ddd !important;
margin-top: 7px;
padding-bottom: 2px !important;
padding-top: 2px !important;
}
#body .tab-nav-button:not(.active) span {
opacity: .8;
}
@media print {
#body .tab-nav-button:not(.active) {
opacity: .5;
}
}
#body .tab-panel { #body .tab-panel {
margin-top: 32px; margin-top: 1.7rem;
margin-bottom: 32px; margin-bottom: 2rem;
} }
#body .tab-content { #body .tab-content {
display: block; background-color: #fff;
clear: both; clear: both;
-webkit-print-color-adjust: exact;
color-adjust: exact;
display: block;
padding: 8px; padding: 8px;
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
border-color: #ccc; border-color: #ccc;
z-index: 10;
} }
#body .tab-content .tab-item{ #body .tab-content .tab-item{
display: none; display: none;