mirror of
https://github.com/material-components/material-web.git
synced 2024-08-17 09:30:27 +03:00
fix(tabs): allow changing tab padding
PiperOrigin-RevId: 577030425
This commit is contained in:
parent
f5daadc307
commit
dd005df780
@ -18,10 +18,20 @@
|
||||
@mixin styles() {
|
||||
:host {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
outline: none;
|
||||
padding: 0 16px;
|
||||
position: relative;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
vertical-align: middle;
|
||||
user-select: none;
|
||||
font-family: var(--_label-text-font);
|
||||
font-size: var(--_label-text-size);
|
||||
line-height: var(--_label-text-line-height);
|
||||
font-weight: var(--_label-text-weight);
|
||||
color: var(--_label-text-color);
|
||||
z-index: 0; // Ensure this is a stacking context so the indicator displays
|
||||
|
||||
@include ripple.theme(
|
||||
(
|
||||
@ -45,24 +55,6 @@
|
||||
margin-bottom: calc(var(--_active-indicator-height) + 1px);
|
||||
}
|
||||
|
||||
.button {
|
||||
box-sizing: border-box;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
vertical-align: middle;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
padding: 0 16px;
|
||||
margin: 0;
|
||||
z-index: 0; // Ensure this is a stacking context so the indicator displays
|
||||
font-family: var(--_label-text-font);
|
||||
font-size: var(--_label-text-size);
|
||||
line-height: var(--_label-text-line-height);
|
||||
font-weight: var(--_label-text-weight);
|
||||
color: var(--_label-text-color);
|
||||
}
|
||||
|
||||
.button::before {
|
||||
background: var(--_container-color);
|
||||
content: '';
|
||||
@ -105,7 +97,7 @@
|
||||
}
|
||||
|
||||
// unselected states
|
||||
.button ::slotted([slot='icon']) {
|
||||
::slotted([slot='icon']) {
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
writing-mode: horizontal-tb;
|
||||
@ -116,29 +108,28 @@
|
||||
height: var(--_icon-size);
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
:host(:hover) {
|
||||
color: var(--_hover-label-text-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.button:hover ::slotted([slot='icon']) {
|
||||
:host(:hover) ::slotted([slot='icon']) {
|
||||
color: var(--_hover-icon-color);
|
||||
}
|
||||
|
||||
.button:focus {
|
||||
:host(:focus) {
|
||||
color: var(--_focus-label-text-color);
|
||||
}
|
||||
|
||||
.button:focus ::slotted([slot='icon']) {
|
||||
:host(:focus) ::slotted([slot='icon']) {
|
||||
color: var(--_focus-icon-color);
|
||||
}
|
||||
|
||||
.button:active {
|
||||
:host(:active) {
|
||||
color: var(--_pressed-label-text-color);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.button:active ::slotted([slot='icon']) {
|
||||
:host(:active) ::slotted([slot='icon']) {
|
||||
color: var(--_pressed-icon-color);
|
||||
}
|
||||
|
||||
@ -146,7 +137,7 @@
|
||||
:host([active]) .indicator {
|
||||
opacity: 1;
|
||||
}
|
||||
:host([active]) .button {
|
||||
:host([active]) {
|
||||
color: var(--_active-label-text-color);
|
||||
@include elevation.theme(
|
||||
(
|
||||
@ -164,32 +155,32 @@
|
||||
);
|
||||
}
|
||||
|
||||
:host([active]) .button ::slotted([slot='icon']) {
|
||||
:host([active]) ::slotted([slot='icon']) {
|
||||
color: var(--_active-icon-color);
|
||||
}
|
||||
|
||||
// selected states
|
||||
:host([active]) .button:hover {
|
||||
:host([active]:hover) {
|
||||
color: var(--_active-hover-label-text-color);
|
||||
}
|
||||
|
||||
:host([active]) .button:hover ::slotted([slot='icon']) {
|
||||
:host([active]:hover) ::slotted([slot='icon']) {
|
||||
color: var(--_active-hover-icon-color);
|
||||
}
|
||||
|
||||
:host([active]) .button:focus {
|
||||
:host([active]:focus) {
|
||||
color: var(--_active-focus-label-text-color);
|
||||
}
|
||||
|
||||
:host([active]) .button:focus ::slotted([slot='icon']) {
|
||||
:host([active]:focus) ::slotted([slot='icon']) {
|
||||
color: var(--_active-focus-icon-color);
|
||||
}
|
||||
|
||||
:host([active]) .button:active {
|
||||
:host([active]:active) {
|
||||
color: var(--_active-pressed-label-text-color);
|
||||
}
|
||||
|
||||
:host([active]) .button:active ::slotted([slot='icon']) {
|
||||
:host([active]:active) ::slotted([slot='icon']) {
|
||||
color: var(--_active-pressed-icon-color);
|
||||
}
|
||||
|
||||
|
@ -16,7 +16,7 @@ import {
|
||||
queryAssignedNodes,
|
||||
state,
|
||||
} from 'lit/decorators.js';
|
||||
import {classMap} from 'lit/directives/class-map.js';
|
||||
import {ClassInfo, classMap} from 'lit/directives/class-map.js';
|
||||
|
||||
import {
|
||||
polyfillARIAMixin,
|
||||
@ -105,7 +105,7 @@ export class Tab extends tabBaseClass {
|
||||
|
||||
protected override render() {
|
||||
const indicator = html`<div class="indicator"></div>`;
|
||||
return html` <div
|
||||
return html`<div
|
||||
class="button"
|
||||
role="presentation"
|
||||
@click=${this.handleContentClick}>
|
||||
@ -123,7 +123,7 @@ export class Tab extends tabBaseClass {
|
||||
</div>`;
|
||||
}
|
||||
|
||||
protected getContentClasses() {
|
||||
protected getContentClasses(): ClassInfo {
|
||||
return {
|
||||
'has-icon': this.hasIcon,
|
||||
'has-label': !this.iconOnly,
|
||||
|
Loading…
Reference in New Issue
Block a user