Athemis/ds4
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

style: improve tab navigation height and spacing for icons

Browse source 
- Increase tab navigation height from 2x to 2.5x line-height
- Add proper flexbox centering for tab items with icons
- Add gap between icon and text (0.25rem)
- Add padding (0.5rem vertical, 0.75rem horizontal) for better touch targets
- Reduce icon size to 0.875rem for better visual balance
- Remove fixed line-height to allow proper vertical centering
- Maintain text shadow effect for active tabs

The tab navigation now properly accommodates FontAwesome icons while
maintaining good visual hierarchy and touch accessibility.
This commit is contained in:
Alexander Minges 2025-07-29 19:08:06 +02:00
parent 40e14d1196
commit d020822012
Signed by: Athemis
GPG key ID: 31FBDEF92DDB162B
1 changed files with 11 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

13
scss/components/shared/_sheet_tab_nav.scss
View file

@ -12,9 +12,8 @@ nav.tabs {
border-top: variables.$border-groove;
display: flex;
flex-wrap: nowrap;
height: calc(2 * var(--line-height-16));
height: calc(2.5 * var(--line-height-16));
justify-content: space-around;
line-height: calc(2 * var(--line-height-16));
margin: variables.$margin-sm 0;
.ds4-sheet-tab-nav__item,
@ -22,6 +21,16 @@ nav.tabs {
flex: 0 1 auto !important; // necessary to override the styling from lang-de, see https://gitlab.com/henry4k/foundryvtt-lang-de/-/issues/9
font-weight: bold;
white-space: nowrap;
display: flex;
align-items: center;
justify-content: center;
gap: 0.25rem;
padding: 0.5rem 0.75rem;
line-height: 1;
i {
font-size: 0.875rem;
}
&.active {
text-shadow: 0 0 variables.$padding-md var(--color-shadow-primary);