mirror of
https://github.com/material-components/material-web.git
synced 2024-09-19 17:47:46 +03:00
601ebb669c
BREAKING CHANGE: Rename `@material/web/button/lib` to `@material/web/button/internal`. Prefer not using internal files. PiperOrigin-RevId: 549999271
155 lines
3.9 KiB
SCSS
155 lines
3.9 KiB
SCSS
//
|
|
// Copyright 2021 Google LLC
|
|
// SPDX-License-Identifier: Apache-2.0
|
|
//
|
|
|
|
// go/keep-sorted start
|
|
@use 'sass:map';
|
|
// go/keep-sorted end
|
|
// go/keep-sorted start
|
|
@use '../../focus/focus-ring';
|
|
@use '../../ripple/ripple';
|
|
// 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),
|
|
pressed-color: var(--_pressed-state-layer-color),
|
|
hover-opacity: var(--_hover-state-layer-opacity),
|
|
pressed-opacity: var(--_pressed-state-layer-opacity),
|
|
)
|
|
);
|
|
}
|
|
|
|
md-focus-ring {
|
|
@include focus-ring.theme(
|
|
(
|
|
'shape-start-start': var(--_container-shape-start-start),
|
|
'shape-start-end': var(--_container-shape-start-end),
|
|
'shape-end-end': var(--_container-shape-end-end),
|
|
'shape-end-start': var(--_container-shape-end-start),
|
|
)
|
|
);
|
|
}
|
|
|
|
:host([disabled]) {
|
|
cursor: default;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.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 .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 {
|
|
content: '';
|
|
box-sizing: border-box;
|
|
border: 1px solid transparent;
|
|
border-radius: inherit;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
}
|
|
}
|
|
}
|
|
|
|
.button,
|
|
.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);
|
|
}
|
|
|
|
.button::after,
|
|
.button::before,
|
|
md-elevation,
|
|
.button__ripple {
|
|
z-index: -1; // Place behind content
|
|
}
|
|
|
|
// TODO(b/181413732): Verify token below are named correctly
|
|
.button--icon-leading {
|
|
padding-inline-start: var(--_with-icon-spacing-leading);
|
|
padding-inline-end: var(--_with-icon-spacing-trailing);
|
|
}
|
|
|
|
.button--icon-trailing {
|
|
padding-inline-start: var(--_with-trailing-icon-spacing-leading);
|
|
padding-inline-end: var(--_with-trailing-icon-spacing-trailing);
|
|
}
|
|
|
|
.link-button-wrapper {
|
|
inline-size: 100%;
|
|
}
|
|
}
|