tabs: adjust tab handle styling #550

McShelby · Jun 6, 2023 · f50c362 · f50c362
1 parent 67fe76a
commit f50c362
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 3 deletions.
diff --git a/layouts/partials/shortcodes/tabs.html b/layouts/partials/shortcodes/tabs.html
@@ -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 }}
       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>
   {{- end }}
   </div>

diff --git a/static/css/theme.css b/static/css/theme.css
@@ -1850,6 +1850,8 @@ html[dir="rtl"] #sidebar ul.collapsible-menu > li > label > i.fa-chevron-right {
 }
 
 #body .tab-nav-button{
+    -webkit-appearance: none;
+    appearance: none;
     background-color: transparent;
     border: 1px solid transparent;
     display: block;
@@ -1864,21 +1866,35 @@ html[dir="rtl"] #sidebar ul.collapsible-menu > li > label > i.fa-chevron-right {
     cursor: default;
 }
 
+#body .tab-nav-button > *{
+    position: relative;
+}
+
 #body .tab-nav-button.active > *{
     border-radius: 1px 1px 0 0;
 }
 
 #body .tab-nav-button > * > *{
     border-bottom-style: solid;
-    border-bottom-width: 2px;
-    padding: .2rem .6rem;
+    border-bottom-width: .2rem;
+    padding: .2rem .6rem 0 .6rem;
 }
 
 #body .tab-nav-button.active > * > *{
     border-bottom-color: transparent;
     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{
     border-style: solid;
     border-width: 1px;