Adjust mobile horizontal padding for large tab navigation
This commit is contained in:
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user