material-web/tabs/internal/_tabs.scss
Elizabeth Mitchell a0fca90bdf fix(tabs): scrollable divider not taking up full width
PiperOrigin-RevId: 563802077
2023-09-08 11:13:34 -07:00

46 lines
839 B
SCSS

//
// Copyright 2023 Google LLC
// SPDX-License-Identifier: Apache-2.0
//
// Note, there are currently no tokens for tabs. Instead, tabs are entirely
// themed via primary/secondary tab.
@mixin styles() {
:host {
box-sizing: border-box;
display: flex;
flex-direction: column;
overflow: auto;
scroll-behavior: smooth;
scrollbar-width: none;
position: relative;
}
:host([hidden]) {
display: none;
}
:host::-webkit-scrollbar {
display: none;
}
.tabs {
align-items: end;
display: flex;
height: 100%;
overflow: inherit;
justify-content: space-between;
width: 100%;
}
::slotted(*) {
flex: 1;
}
// draw selected on top so its indicator can be transitioned from the
// previously selected tab, on top of it
::slotted([active]) {
z-index: 1;
}
}