Adjust mobile horizontal padding for large tab navigation

This commit is contained in:
2026-05-18 16:34:07 +02:00
parent 82e82f78f3
commit fac9e88e4f
+9
View File
@@ -70,6 +70,7 @@
--layout-pulldown-option-padding-inline: var(--compact-interaction-padding-horizontal);
--layout-pulldown-padding-inline: var(--compact-interaction-padding-horizontal);
--layout-pulldown-chevron-offset: var(--compact-interaction-padding-horizontal);
--layout-tab-navigation-large-padding-inline: var(--interaction-padding-horizontal);
--layout-pulldown-chevron-reserved-space: var(--spacing-large);
--layout-input-label-width: var(--dimension-input-label-width);
--layout-input-field-desktop-width: var(--dimension-input-field-desktop-width);
@@ -265,6 +266,10 @@ body {
}
@media (max-width: 48rem) {
:root {
--layout-tab-navigation-large-padding-inline: 0.8rem;
}
body {
padding: var(--spacing-small);
}
@@ -549,6 +554,10 @@ section + section {
background: var(--surface-tab-compact-background);
}
.sg-tab-button-group[data-component="tab-navigation"][data-component-size="large"] .sg-tab-button {
padding-inline: var(--layout-tab-navigation-large-padding-inline);
}
.sg-tab-button[aria-selected="true"] {
background: var(--surface-tab-selected);
color: var(--text-tab-selected);