mirror of
https://github.com/material-components/material-web.git
synced 2026-03-09 00:09:23 +08:00
d12ed3e4e3
Changes: - Elevation is now `inset:0;position:absolute;` by default - Separated surface styles into a temporary `<md-elevation-surface>` element (this will be removed after tonal surface update) PiperOrigin-RevId: 521934300
159 lines
4.0 KiB
SCSS
159 lines
4.0 KiB
SCSS
//
|
|
// Copyright 2021 Google LLC
|
|
// SPDX-License-Identifier: Apache-2.0
|
|
//
|
|
|
|
// stylelint-disable selector-class-pattern --
|
|
// Selector '.md3-*' should only be used in this project.
|
|
|
|
// go/keep-sorted start
|
|
@use 'sass:map';
|
|
// go/keep-sorted end
|
|
// go/keep-sorted start
|
|
@use '../../focus/focus-ring';
|
|
@use '../../ripple/ripple';
|
|
@use '../../sass/dom';
|
|
@use '../../sass/shape';
|
|
// go/keep-sorted end
|
|
|
|
@mixin styles() {
|
|
:host {
|
|
display: inline-flex;
|
|
outline: none;
|
|
-webkit-tap-highlight-color: transparent;
|
|
/**
|
|
* Override vertical-align with shortest value "top". Vertical-align's default
|
|
* "baseline" value causes buttons to be misaligned next to each other if one
|
|
* button has an icon and the other does not.
|
|
*/
|
|
vertical-align: top;
|
|
|
|
@include ripple.theme(
|
|
(
|
|
hover-color: var(--_hover-state-layer-color),
|
|
focus-color: var(--_focus-state-layer-color),
|
|
pressed-color: var(--_pressed-state-layer-color),
|
|
hover-opacity: var(--_hover-state-layer-opacity),
|
|
focus-opacity: var(--_focus-state-layer-opacity),
|
|
pressed-opacity: var(--_pressed-state-layer-opacity),
|
|
)
|
|
);
|
|
|
|
@include focus-ring.theme(
|
|
(
|
|
shape: shape.corners-to-shape-token('--_container-shape'),
|
|
)
|
|
);
|
|
}
|
|
|
|
:host([disabled]) {
|
|
cursor: default;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.md3-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
min-inline-size: 64px;
|
|
border: none;
|
|
outline: none;
|
|
user-select: none;
|
|
-webkit-appearance: none;
|
|
vertical-align: middle;
|
|
background: transparent;
|
|
text-decoration: none;
|
|
inline-size: 100%;
|
|
position: relative;
|
|
z-index: 0; // Place content on top of elevation and ripple
|
|
block-size: var(--_container-height);
|
|
font: var(--_label-text-type);
|
|
color: var(--_label-text-color);
|
|
// TODO(b/181413732): Verify token below are named correctly
|
|
padding-inline-start: var(--_spacing-leading);
|
|
padding-inline-end: var(--_spacing-trailing);
|
|
gap: 8px;
|
|
|
|
&::before {
|
|
// Background color. Separate node for disabled opacity styles.
|
|
background-color: var(--_container-color);
|
|
border-radius: inherit;
|
|
content: '';
|
|
inset: 0;
|
|
position: absolute;
|
|
}
|
|
|
|
&::-moz-focus-inner {
|
|
padding: 0;
|
|
border: 0;
|
|
}
|
|
|
|
&:hover {
|
|
color: var(--_hover-label-text-color);
|
|
cursor: pointer;
|
|
}
|
|
|
|
&:focus {
|
|
color: var(--_focus-label-text-color);
|
|
}
|
|
|
|
&:active {
|
|
color: var(--_pressed-label-text-color);
|
|
outline: none;
|
|
}
|
|
|
|
&:disabled .md3-button__label {
|
|
color: var(--_disabled-label-text-color);
|
|
opacity: var(--_disabled-label-text-opacity);
|
|
}
|
|
|
|
&:disabled::before {
|
|
background-color: var(--_disabled-container-color);
|
|
opacity: var(--_disabled-container-opacity);
|
|
}
|
|
|
|
@media (forced-colors: active) {
|
|
&::before {
|
|
@include dom.transparent-border();
|
|
}
|
|
}
|
|
}
|
|
|
|
.md3-button,
|
|
.md3-button__ripple {
|
|
border-start-start-radius: var(--_container-shape-start-start);
|
|
border-start-end-radius: var(--_container-shape-start-end);
|
|
border-end-start-radius: var(--_container-shape-end-start);
|
|
border-end-end-radius: var(--_container-shape-end-end);
|
|
}
|
|
|
|
.md3-button::after,
|
|
.md3-button::before,
|
|
md-elevation,
|
|
md-elevation-surface,
|
|
.md3-button__ripple {
|
|
z-index: -1; // Place behind content
|
|
}
|
|
|
|
// TODO(b/181413732): Verify token below are named correctly
|
|
.md3-button--icon-leading {
|
|
padding-inline-start: var(--_with-icon-spacing-leading);
|
|
padding-inline-end: var(--_with-icon-spacing-trailing);
|
|
}
|
|
|
|
.md3-button--icon-trailing {
|
|
padding-inline-start: var(--_with-trailing-icon-spacing-leading);
|
|
padding-inline-end: var(--_with-trailing-icon-spacing-trailing);
|
|
}
|
|
|
|
.md3-link-button-wrapper {
|
|
inline-size: 100%;
|
|
}
|
|
}
|
|
|
|
:root {
|
|
--md-filled-button-container-shape-start-start: 12px;
|
|
--md-filled-button-container-shape: 8px;
|
|
}
|