mirror of
https://github.com/material-components/material-web.git
synced 2024-09-20 01:57:33 +03:00
chore(navigationtab): merge static/theme-styles
PiperOrigin-RevId: 485368505
This commit is contained in:
Elizabeth Mitchell
Copybara-Service
parent
6ea18cd39d
commit
7371f35a56
@ -3,13 +3,9 @@
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
//
|
||||
|
||||
// stylelint-disable selector-class-pattern --
|
||||
// Selector '.md3-*' should only be used in this project.
|
||||
|
||||
@use 'sass:map';
|
||||
|
||||
@use '../../elevation/lib/elevation-theme';
|
||||
@use '../../navigationtab/lib/navigation-tab-theme';
|
||||
@use '../../sass/map-ext';
|
||||
@use '../../sass/resolvers';
|
||||
@use '../../sass/theme';
|
||||
@ -50,12 +46,6 @@ $dark-theme: tokens.md-comp-navigation-bar-values(
|
||||
$elevation-tokens: (container-elevation)
|
||||
);
|
||||
|
||||
.md3-navigation-tab {
|
||||
@include navigation-tab-theme.theme-styles(
|
||||
map-ext.pick($theme, map.keys(navigation-tab-theme.$light-theme))
|
||||
);
|
||||
}
|
||||
|
||||
$theme: theme.create-theme-vars($theme, 'navigation-bar');
|
||||
|
||||
@include _container-color(map.get($theme, container-color));
|
||||
|
||||
@ -3,5 +3,4 @@
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
//
|
||||
|
||||
@forward './lib/navigation-tab-theme' show
|
||||
theme;
|
||||
@forward './lib/navigation-tab' show theme;
|
||||
|
||||
@ -1,198 +0,0 @@
|
||||
//
|
||||
// Copyright 2022 Google LLC
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
//
|
||||
|
||||
// stylelint-disable selector-class-pattern --
|
||||
// Selector '.md3-*' should only be used in this project.
|
||||
|
||||
@use 'sass:map';
|
||||
|
||||
@use '../../badge/badge';
|
||||
@use '../../ripple/ripple-theme';
|
||||
@use '../../focus/focus-ring';
|
||||
@use '../../sass/theme';
|
||||
@use '../../tokens';
|
||||
|
||||
$_custom-property-prefix: 'navigation-bar';
|
||||
|
||||
$light-theme: tokens.md-comp-navigation-bar-values();
|
||||
$dark-theme: tokens.md-comp-navigation-bar-values(
|
||||
(
|
||||
md-sys-color: tokens.md-sys-color-values-dark-non-dynamic(),
|
||||
),
|
||||
$exclude-hardcoded-values: true
|
||||
);
|
||||
|
||||
@mixin theme($theme) {
|
||||
$theme: theme.validate-theme($light-theme, $theme);
|
||||
|
||||
$theme: theme.create-theme-vars($theme, $_custom-property-prefix);
|
||||
|
||||
@include theme.emit-theme-vars($theme);
|
||||
}
|
||||
|
||||
@mixin theme-styles($theme) {
|
||||
$theme: theme.validate-theme-styles(
|
||||
$light-theme,
|
||||
$theme,
|
||||
$require-all: false
|
||||
);
|
||||
|
||||
$theme: theme.create-theme-vars($theme, $_custom-property-prefix);
|
||||
|
||||
& {
|
||||
@each $token, $value in $theme {
|
||||
--_#{$token}: #{$value};
|
||||
}
|
||||
}
|
||||
|
||||
font-family: var(--_label-text-font);
|
||||
font-size: var(--_label-text-size);
|
||||
letter-spacing: var(--_label-text-tracking);
|
||||
font-weight: var(--_label-text-weight);
|
||||
line-height: var(--_label-text-line-height);
|
||||
|
||||
.md3-navigation-tab__icon {
|
||||
width: var(--_icon-size);
|
||||
height: var(--_icon-size);
|
||||
font-size: var(--_icon-size);
|
||||
}
|
||||
|
||||
&.md3-navigation-tab--active {
|
||||
.md3-navigation-tab__icon {
|
||||
color: var(--_active-icon-color);
|
||||
}
|
||||
|
||||
.md3-navigation-tab__label-text {
|
||||
color: var(--_active-label-text-color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.md3-navigation-tab__icon {
|
||||
color: var(--_active-hover-icon-color);
|
||||
}
|
||||
|
||||
.md3-navigation-tab__label-text {
|
||||
color: var(--_active-hover-label-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
.md3-navigation-tab__icon {
|
||||
color: var(--_active-focus-icon-color);
|
||||
}
|
||||
|
||||
.md3-navigation-tab__label-text {
|
||||
color: var(--_active-focus-label-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
.md3-navigation-tab__icon {
|
||||
color: var(--_active-pressed-icon-color);
|
||||
}
|
||||
|
||||
.md3-navigation-tab__label-text {
|
||||
color: var(--_active-pressed-label-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
@include ripple-theme.theme(
|
||||
(
|
||||
hover-state-layer-color: var(--_active-hover-state-layer-color),
|
||||
focus-state-layer-color: var(--_active-focus-state-layer-color),
|
||||
pressed-state-layer-color: var(--_active-pressed-state-layer-color),
|
||||
hover-state-layer-opacity: var(--_hover-state-layer-opacity),
|
||||
focus-state-layer-opacity: var(--_focus-state-layer-opacity),
|
||||
pressed-state-layer-opacity: var(--_pressed-state-layer-opacity),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
&:not(.md3-navigation-tab--active) {
|
||||
.md3-navigation-tab__icon {
|
||||
color: var(--_inactive-icon-color);
|
||||
}
|
||||
|
||||
.md3-navigation-tab__label-text {
|
||||
color: var(--_inactive-label-text-color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.md3-navigation-tab__icon {
|
||||
color: var(--_inactive-hover-icon-color);
|
||||
}
|
||||
|
||||
.md3-navigation-tab__label-text {
|
||||
color: var(--_inactive-hover-label-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
.md3-navigation-tab__icon {
|
||||
color: var(--_inactive-focus-icon-color);
|
||||
}
|
||||
|
||||
.md3-navigation-tab__label-text {
|
||||
color: var(--_inactive-focus-label-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
.md3-navigation-tab__icon {
|
||||
color: var(--_inactive-pressed-icon-color);
|
||||
}
|
||||
|
||||
.md3-navigation-tab__label-text {
|
||||
color: var(--_inactive-pressed-label-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
@include ripple-theme.theme(
|
||||
(
|
||||
hover-state-layer-color: var(--_inactive-hover-state-layer-color),
|
||||
focus-state-layer-color: var(--_inactive-focus-state-layer-color),
|
||||
pressed-state-layer-color: var(--_inactive-pressed-state-layer-color),
|
||||
hover-state-layer-opacity: var(--_hover-state-layer-opacity),
|
||||
focus-state-layer-opacity: var(--_focus-state-layer-opacity),
|
||||
pressed-state-layer-opacity: var(--_pressed-state-layer-opacity),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.md3-navigation-tab__active-indicator {
|
||||
background-color: var(--_active-indicator-color);
|
||||
border-radius: var(--_active-indicator-shape);
|
||||
}
|
||||
|
||||
// Keep icon-content in sync with active-indicator size.
|
||||
.md3-navigation-tab__active-indicator,
|
||||
.md3-navigation-tab__icon-content {
|
||||
height: var(--_active-indicator-height);
|
||||
}
|
||||
|
||||
// Keep icon-content in sync with active-indicator size.
|
||||
&.md3-navigation-tab--active .md3-navigation-tab__active-indicator,
|
||||
.md3-navigation-tab__icon-content {
|
||||
width: var(--_active-indicator-width);
|
||||
}
|
||||
|
||||
@include focus-ring.theme(
|
||||
(
|
||||
container-outer-padding-vertical: -4px,
|
||||
container-outer-padding-horizontal: -4px,
|
||||
)
|
||||
);
|
||||
|
||||
@include badge.theme(
|
||||
(
|
||||
color: var(--_badge-color),
|
||||
size: var(--_badge-size),
|
||||
shape: var(--_badge-shape),
|
||||
large-color: var(--_large-badge-color),
|
||||
large-size: var(--_large-badge-size),
|
||||
large-shape: var(--_large-badge-shape),
|
||||
)
|
||||
);
|
||||
}
|
||||
@ -6,11 +6,44 @@
|
||||
// stylelint-disable selector-class-pattern --
|
||||
// Selector '.md3-*' should only be used in this project.
|
||||
|
||||
@use 'sass:map';
|
||||
|
||||
@use '../../badge/badge';
|
||||
@use '../../ripple/ripple-theme';
|
||||
@use '../../focus/focus-ring';
|
||||
@use '../../motion/animation';
|
||||
@use '../../sass/theme';
|
||||
@use '../../tokens';
|
||||
|
||||
$animation-duration: 100ms;
|
||||
$_custom-property-prefix: 'navigation-bar';
|
||||
|
||||
@mixin theme($tokens) {
|
||||
$tokens: theme.validate-theme(
|
||||
tokens.md-comp-navigation-bar-values(),
|
||||
$tokens
|
||||
);
|
||||
|
||||
$tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
|
||||
|
||||
@include theme.emit-theme-vars($tokens);
|
||||
}
|
||||
|
||||
@mixin styles() {
|
||||
$tokens: tokens.md-comp-navigation-bar-values();
|
||||
$tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
|
||||
|
||||
* {
|
||||
@each $token, $value in $tokens {
|
||||
--_#{$token}: #{$value};
|
||||
}
|
||||
}
|
||||
|
||||
:host {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
@mixin static-styles() {
|
||||
.md3-navigation-tab {
|
||||
align-items: center;
|
||||
appearance: none;
|
||||
@ -29,6 +62,29 @@ $animation-duration: 100ms;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
font-family: var(--_label-text-font);
|
||||
font-size: var(--_label-text-size);
|
||||
letter-spacing: var(--_label-text-tracking);
|
||||
font-weight: var(--_label-text-weight);
|
||||
line-height: var(--_label-text-line-height);
|
||||
|
||||
@include focus-ring.theme(
|
||||
(
|
||||
container-outer-padding-vertical: -4px,
|
||||
container-outer-padding-horizontal: -4px,
|
||||
)
|
||||
);
|
||||
|
||||
@include badge.theme(
|
||||
(
|
||||
color: var(--_badge-color),
|
||||
size: var(--_badge-size),
|
||||
shape: var(--_badge-shape),
|
||||
large-color: var(--_large-badge-color),
|
||||
large-size: var(--_large-badge-size),
|
||||
large-shape: var(--_large-badge-shape),
|
||||
)
|
||||
);
|
||||
|
||||
// Firefox draws a dotted border around focused buttons unless specifically overridden.
|
||||
&::-moz-focus-inner {
|
||||
@ -69,17 +125,34 @@ $animation-duration: 100ms;
|
||||
transition: animation.standard(width, $animation-duration),
|
||||
animation.standard(opacity, $animation-duration);
|
||||
width: 32px;
|
||||
background-color: var(--_active-indicator-color);
|
||||
border-radius: var(--_active-indicator-shape);
|
||||
|
||||
.md3-navigation-tab--active & {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Keep icon-content in sync with active-indicator size.
|
||||
.md3-navigation-tab__active-indicator,
|
||||
.md3-navigation-tab__icon-content {
|
||||
height: var(--_active-indicator-height);
|
||||
}
|
||||
|
||||
// Keep icon-content in sync with active-indicator size.
|
||||
.md3-navigation-tab--active .md3-navigation-tab__active-indicator,
|
||||
.md3-navigation-tab__icon-content {
|
||||
width: var(--_active-indicator-width);
|
||||
}
|
||||
|
||||
.md3-navigation-tab__icon {
|
||||
fill: currentColor;
|
||||
align-self: center;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: var(--_icon-size);
|
||||
height: var(--_icon-size);
|
||||
font-size: var(--_icon-size);
|
||||
|
||||
&.md3-navigation-tab__icon--active {
|
||||
display: none;
|
||||
@ -97,4 +170,106 @@ $animation-duration: 100ms;
|
||||
.md3-navigation-tab__ripple {
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.md3-navigation-tab--active {
|
||||
.md3-navigation-tab__icon {
|
||||
color: var(--_active-icon-color);
|
||||
}
|
||||
|
||||
.md3-navigation-tab__label-text {
|
||||
color: var(--_active-label-text-color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.md3-navigation-tab__icon {
|
||||
color: var(--_active-hover-icon-color);
|
||||
}
|
||||
|
||||
.md3-navigation-tab__label-text {
|
||||
color: var(--_active-hover-label-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
.md3-navigation-tab__icon {
|
||||
color: var(--_active-focus-icon-color);
|
||||
}
|
||||
|
||||
.md3-navigation-tab__label-text {
|
||||
color: var(--_active-focus-label-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
.md3-navigation-tab__icon {
|
||||
color: var(--_active-pressed-icon-color);
|
||||
}
|
||||
|
||||
.md3-navigation-tab__label-text {
|
||||
color: var(--_active-pressed-label-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
@include ripple-theme.theme(
|
||||
(
|
||||
hover-state-layer-color: var(--_active-hover-state-layer-color),
|
||||
focus-state-layer-color: var(--_active-focus-state-layer-color),
|
||||
pressed-state-layer-color: var(--_active-pressed-state-layer-color),
|
||||
hover-state-layer-opacity: var(--_hover-state-layer-opacity),
|
||||
focus-state-layer-opacity: var(--_focus-state-layer-opacity),
|
||||
pressed-state-layer-opacity: var(--_pressed-state-layer-opacity),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.md3-navigation-tab:not(.md3-navigation-tab--active) {
|
||||
.md3-navigation-tab__icon {
|
||||
color: var(--_inactive-icon-color);
|
||||
}
|
||||
|
||||
.md3-navigation-tab__label-text {
|
||||
color: var(--_inactive-label-text-color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.md3-navigation-tab__icon {
|
||||
color: var(--_inactive-hover-icon-color);
|
||||
}
|
||||
|
||||
.md3-navigation-tab__label-text {
|
||||
color: var(--_inactive-hover-label-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
.md3-navigation-tab__icon {
|
||||
color: var(--_inactive-focus-icon-color);
|
||||
}
|
||||
|
||||
.md3-navigation-tab__label-text {
|
||||
color: var(--_inactive-focus-label-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
.md3-navigation-tab__icon {
|
||||
color: var(--_inactive-pressed-icon-color);
|
||||
}
|
||||
|
||||
.md3-navigation-tab__label-text {
|
||||
color: var(--_inactive-pressed-label-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
@include ripple-theme.theme(
|
||||
(
|
||||
hover-state-layer-color: var(--_inactive-hover-state-layer-color),
|
||||
focus-state-layer-color: var(--_inactive-focus-state-layer-color),
|
||||
pressed-state-layer-color: var(--_inactive-pressed-state-layer-color),
|
||||
hover-state-layer-opacity: var(--_hover-state-layer-opacity),
|
||||
focus-state-layer-opacity: var(--_focus-state-layer-opacity),
|
||||
pressed-state-layer-opacity: var(--_pressed-state-layer-opacity),
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,19 +3,6 @@
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
//
|
||||
|
||||
// stylelint-disable selector-class-pattern --
|
||||
// Selector '.md3-*' should only be used in this project.
|
||||
|
||||
@use './navigation-tab';
|
||||
@use './navigation-tab-theme';
|
||||
|
||||
@include navigation-tab.static-styles();
|
||||
|
||||
:host {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.md3-navigation-tab {
|
||||
@include navigation-tab-theme.theme-styles(navigation-tab-theme.$light-theme);
|
||||
}
|
||||
@include navigation-tab.styles;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user