mirror of
https://github.com/material-components/material-web.git
synced 2024-10-26 21:56:56 +03:00
c9e8de0207
Added chip tokens for `leading-space`, `trailing-space`, `icon-label-space`, `with-leading-icon-leading-space`, and `with-trailing-icon-trailing-space`. PiperOrigin-RevId: 588942324
230 lines
4.8 KiB
SCSS
230 lines
4.8 KiB
SCSS
//
|
|
// Copyright 2023 Google LLC
|
|
// SPDX-License-Identifier: Apache-2.0
|
|
//
|
|
|
|
// go/keep-sorted start
|
|
@use 'sass:list';
|
|
@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 {
|
|
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);
|
|
display: inline-flex;
|
|
height: var(--_container-height);
|
|
cursor: pointer;
|
|
-webkit-tap-highlight-color: transparent;
|
|
|
|
@include ripple.theme(
|
|
(
|
|
'hover-color': var(--_hover-state-layer-color),
|
|
'hover-opacity': var(--_hover-state-layer-opacity),
|
|
'pressed-color': var(--_pressed-state-layer-color),
|
|
'pressed-opacity': var(--_pressed-state-layer-opacity),
|
|
)
|
|
);
|
|
}
|
|
|
|
:host([disabled]) {
|
|
pointer-events: none;
|
|
}
|
|
|
|
:host([touch-target='wrapper']) {
|
|
margin: max(0px, (48px - var(--_container-height)) / 2) 0;
|
|
}
|
|
|
|
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),
|
|
)
|
|
);
|
|
}
|
|
|
|
.container {
|
|
border-radius: inherit;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
height: 100%;
|
|
position: relative;
|
|
width: 100%;
|
|
|
|
// Container color, separate node for disabled opacity changes
|
|
&::before {
|
|
border-radius: inherit;
|
|
content: '';
|
|
inset: 0;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
}
|
|
}
|
|
|
|
.container:not(.disabled) {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.container.disabled {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.cell {
|
|
display: flex;
|
|
}
|
|
|
|
.action {
|
|
align-items: baseline;
|
|
appearance: none;
|
|
background: none;
|
|
border: none;
|
|
border-radius: inherit;
|
|
display: flex;
|
|
outline: none;
|
|
padding: 0;
|
|
position: relative;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.primary.action {
|
|
padding-inline-start: var(--_leading-space);
|
|
padding-inline-end: var(--_trailing-space);
|
|
}
|
|
|
|
.has-icon .primary.action {
|
|
padding-inline-start: var(--_with-leading-icon-leading-space);
|
|
}
|
|
|
|
.touch {
|
|
height: 48px;
|
|
inset: 50% 0 0;
|
|
position: absolute;
|
|
transform: translateY(-50%);
|
|
width: 100%;
|
|
}
|
|
|
|
:host([touch-target='none']) .touch {
|
|
display: none;
|
|
}
|
|
|
|
// Outline, separate node for disabled opacity changes
|
|
.outline {
|
|
border: var(--_outline-width) solid var(--_outline-color);
|
|
border-radius: inherit;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
}
|
|
|
|
:where(:focus) .outline {
|
|
border-color: var(--_focus-outline-color);
|
|
}
|
|
|
|
:where(.disabled) .outline {
|
|
border-color: var(--_disabled-outline-color);
|
|
opacity: var(--_disabled-outline-opacity);
|
|
}
|
|
|
|
md-ripple {
|
|
border-radius: inherit;
|
|
}
|
|
|
|
.label,
|
|
.icon,
|
|
.touch {
|
|
// Place content above background elements
|
|
z-index: 1;
|
|
}
|
|
|
|
.label {
|
|
align-items: center;
|
|
color: var(--_label-text-color);
|
|
display: flex;
|
|
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);
|
|
height: 100%;
|
|
text-overflow: ellipsis;
|
|
user-select: none;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
:where(:hover) .label {
|
|
color: var(--_hover-label-text-color);
|
|
}
|
|
|
|
:where(:focus) .label {
|
|
color: var(--_focus-label-text-color);
|
|
}
|
|
|
|
:where(:active) .label {
|
|
color: var(--_pressed-label-text-color);
|
|
}
|
|
|
|
:where(.disabled) .label {
|
|
color: var(--_disabled-label-text-color);
|
|
opacity: var(--_disabled-label-text-opacity);
|
|
}
|
|
|
|
.icon {
|
|
align-self: center;
|
|
display: flex;
|
|
fill: currentColor;
|
|
position: relative;
|
|
}
|
|
|
|
.icon ::slotted(:first-child) {
|
|
font-size: var(--_icon-size);
|
|
height: var(--_icon-size);
|
|
width: var(--_icon-size);
|
|
}
|
|
|
|
.leading.icon {
|
|
color: var(--_leading-icon-color);
|
|
}
|
|
|
|
.leading.icon ::slotted(*),
|
|
.leading.icon svg {
|
|
margin-inline-end: var(--_icon-label-space);
|
|
}
|
|
|
|
:where(:hover) .leading.icon {
|
|
color: var(--_hover-leading-icon-color);
|
|
}
|
|
|
|
:where(:focus) .leading.icon {
|
|
color: var(--_focus-leading-icon-color);
|
|
}
|
|
|
|
:where(:active) .leading.icon {
|
|
color: var(--_pressed-leading-icon-color);
|
|
}
|
|
|
|
:where(.disabled) .leading.icon {
|
|
color: var(--_disabled-leading-icon-color);
|
|
opacity: var(--_disabled-leading-icon-opacity);
|
|
}
|
|
|
|
@media (forced-colors: active) {
|
|
:where(.disabled) :is(.label, .outline, .leading.icon) {
|
|
color: GrayText;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
a,
|
|
button:not(:disabled) {
|
|
cursor: inherit;
|
|
}
|
|
}
|