mirror of
https://github.com/material-components/material-web.git
synced 2024-09-11 13:46:10 +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() {
|
@mixin styles() {
|
||||||
:host {
|
:host {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
outline: none;
|
outline: none;
|
||||||
|
padding: 0 16px;
|
||||||
|
position: relative;
|
||||||
-webkit-tap-highlight-color: transparent;
|
-webkit-tap-highlight-color: transparent;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
user-select: none;
|
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(
|
@include ripple.theme(
|
||||||
(
|
(
|
||||||
@ -45,24 +55,6 @@
|
|||||||
margin-bottom: calc(var(--_active-indicator-height) + 1px);
|
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 {
|
.button::before {
|
||||||
background: var(--_container-color);
|
background: var(--_container-color);
|
||||||
content: '';
|
content: '';
|
||||||
@ -105,7 +97,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// unselected states
|
// unselected states
|
||||||
.button ::slotted([slot='icon']) {
|
::slotted([slot='icon']) {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
position: relative;
|
position: relative;
|
||||||
writing-mode: horizontal-tb;
|
writing-mode: horizontal-tb;
|
||||||
@ -116,29 +108,28 @@
|
|||||||
height: var(--_icon-size);
|
height: var(--_icon-size);
|
||||||
}
|
}
|
||||||
|
|
||||||
.button:hover {
|
:host(:hover) {
|
||||||
color: var(--_hover-label-text-color);
|
color: var(--_hover-label-text-color);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button:hover ::slotted([slot='icon']) {
|
:host(:hover) ::slotted([slot='icon']) {
|
||||||
color: var(--_hover-icon-color);
|
color: var(--_hover-icon-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.button:focus {
|
:host(:focus) {
|
||||||
color: var(--_focus-label-text-color);
|
color: var(--_focus-label-text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.button:focus ::slotted([slot='icon']) {
|
:host(:focus) ::slotted([slot='icon']) {
|
||||||
color: var(--_focus-icon-color);
|
color: var(--_focus-icon-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.button:active {
|
:host(:active) {
|
||||||
color: var(--_pressed-label-text-color);
|
color: var(--_pressed-label-text-color);
|
||||||
outline: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.button:active ::slotted([slot='icon']) {
|
:host(:active) ::slotted([slot='icon']) {
|
||||||
color: var(--_pressed-icon-color);
|
color: var(--_pressed-icon-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -146,7 +137,7 @@
|
|||||||
:host([active]) .indicator {
|
:host([active]) .indicator {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
:host([active]) .button {
|
:host([active]) {
|
||||||
color: var(--_active-label-text-color);
|
color: var(--_active-label-text-color);
|
||||||
@include elevation.theme(
|
@include elevation.theme(
|
||||||
(
|
(
|
||||||
@ -164,32 +155,32 @@
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
:host([active]) .button ::slotted([slot='icon']) {
|
:host([active]) ::slotted([slot='icon']) {
|
||||||
color: var(--_active-icon-color);
|
color: var(--_active-icon-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
// selected states
|
// selected states
|
||||||
:host([active]) .button:hover {
|
:host([active]:hover) {
|
||||||
color: var(--_active-hover-label-text-color);
|
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);
|
color: var(--_active-hover-icon-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
:host([active]) .button:focus {
|
:host([active]:focus) {
|
||||||
color: var(--_active-focus-label-text-color);
|
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);
|
color: var(--_active-focus-icon-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
:host([active]) .button:active {
|
:host([active]:active) {
|
||||||
color: var(--_active-pressed-label-text-color);
|
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);
|
color: var(--_active-pressed-icon-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -16,7 +16,7 @@ import {
|
|||||||
queryAssignedNodes,
|
queryAssignedNodes,
|
||||||
state,
|
state,
|
||||||
} from 'lit/decorators.js';
|
} from 'lit/decorators.js';
|
||||||
import {classMap} from 'lit/directives/class-map.js';
|
import {ClassInfo, classMap} from 'lit/directives/class-map.js';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
polyfillARIAMixin,
|
polyfillARIAMixin,
|
||||||
@ -105,7 +105,7 @@ export class Tab extends tabBaseClass {
|
|||||||
|
|
||||||
protected override render() {
|
protected override render() {
|
||||||
const indicator = html`<div class="indicator"></div>`;
|
const indicator = html`<div class="indicator"></div>`;
|
||||||
return html` <div
|
return html`<div
|
||||||
class="button"
|
class="button"
|
||||||
role="presentation"
|
role="presentation"
|
||||||
@click=${this.handleContentClick}>
|
@click=${this.handleContentClick}>
|
||||||
@ -123,7 +123,7 @@ export class Tab extends tabBaseClass {
|
|||||||
</div>`;
|
</div>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
protected getContentClasses() {
|
protected getContentClasses(): ClassInfo {
|
||||||
return {
|
return {
|
||||||
'has-icon': this.hasIcon,
|
'has-icon': this.hasIcon,
|
||||||
'has-label': !this.iconOnly,
|
'has-label': !this.iconOnly,
|
||||||
|
Loading…
Reference in New Issue
Block a user