mirror of
https://github.com/material-components/material-web.git
synced 2024-10-27 14:07:17 +03:00
e7ededa579
PiperOrigin-RevId: 496483211
275 lines
6.7 KiB
SCSS
275 lines
6.7 KiB
SCSS
//
|
|
// 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';
|
|
@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);
|
|
|
|
:host {
|
|
@each $token, $value in $tokens {
|
|
--_#{$token}: #{$value};
|
|
}
|
|
|
|
display: flex;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.md3-navigation-tab {
|
|
align-items: center;
|
|
appearance: none;
|
|
background: none;
|
|
border: none;
|
|
box-sizing: border-box;
|
|
cursor: pointer;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
justify-content: center;
|
|
min-height: 48px;
|
|
min-width: 48px;
|
|
outline: none;
|
|
padding: 8px 0px 12px;
|
|
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(
|
|
(
|
|
offset-vertical: -2px,
|
|
offset-horizontal: -2px,
|
|
shape: map.get(tokens.md-sys-shape-values(), corner-small),
|
|
)
|
|
);
|
|
|
|
@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 {
|
|
border: 0;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.md3-navigation-tab__icon-content {
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
justify-content: center;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.md3-navigation-tab__label-text {
|
|
height: 16px;
|
|
margin-top: 4px;
|
|
opacity: 1;
|
|
transition: animation.standard(opacity, $animation-duration),
|
|
animation.standard(height, $animation-duration);
|
|
z-index: 1;
|
|
|
|
.md3-navigation-tab--hide-inactive-label:not(.md3-navigation-tab--active)
|
|
& {
|
|
height: 0;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.md3-navigation-tab__active-indicator {
|
|
display: flex;
|
|
justify-content: center;
|
|
opacity: 0;
|
|
position: absolute;
|
|
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;
|
|
}
|
|
|
|
.md3-navigation-tab--active & {
|
|
display: none;
|
|
|
|
&.md3-navigation-tab__icon--active {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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(
|
|
(
|
|
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(
|
|
(
|
|
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),
|
|
)
|
|
);
|
|
}
|
|
}
|