Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

Commit 693ecca

Browse files
committed
fix(tabs): update min-width to follow the spec
- previous commits removed use of `getMinTabWidth` but never updated the related CSS - this applies the proper `min-width` CSS to match the spec - which is `72px` on `xs` and `160px` on everything else - this also changes the left and right padding from `24px` to `12px` to align with the spec Relates to #10406. Relates to #11432. BREAKING CHANGE: Tab items now have a `min-width` and `padding` which matches the Material Design specification. For width, this is `72px` on `xs` screens and `160px` on all other screens. For left and right `padding`, this is now `12px` instead of `24px`. If your app needs to have tabs which are smaller than the spec, you will need to override `md-tab-item`'s `min-width` and `md-tab`'s `padding` styles.
1 parent 29c0a4a commit 693ecca

File tree

1 file changed

+9
-1
lines changed

1 file changed

+9
-1
lines changed

src/components/tabs/tabs.scss

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -172,6 +172,14 @@ md-pagination-wrapper {
172172
position: relative;
173173
justify-content: center;
174174
}
175+
md-tab-item {
176+
min-width: 72px;
177+
}
178+
@media (min-width: $layout-breakpoint-xs) {
179+
md-tab-item {
180+
min-width: 160px;
181+
}
182+
}
175183
}
176184

177185
md-tabs-content-wrapper {
@@ -259,7 +267,7 @@ md-tab {
259267
font-size: 14px;
260268
text-align: center;
261269
line-height: $tabs-header-height - 24;
262-
padding: 12px 24px;
270+
padding: 12px;
263271
transition: background-color 0.35s $swift-ease-in-out-timing-function;
264272
cursor: pointer;
265273
white-space: nowrap;

0 commit comments

Comments
 (0)