mirror of
https://github.com/material-components/material-web.git
synced 2024-10-27 14:07:17 +03:00
0111127e98
PiperOrigin-RevId: 460211503
92 lines
1.7 KiB
SCSS
92 lines
1.7 KiB
SCSS
//
|
|
// Copyright 2022 Google LLC
|
|
// SPDX-License-Identifier: Apache-2.0
|
|
//
|
|
|
|
// This file contains common static styles that are shared across icon button
|
|
// variants.
|
|
|
|
// stylelint-disable selector-class-pattern --
|
|
// Selector '.md3-*' should only be used in this project.
|
|
|
|
// TODO(b/228217731): Remove compat dependencies
|
|
@use '@material/web/compat/touchtarget/touch-target';
|
|
@use '@material/web/focus/lib/focus-ring-theme';
|
|
|
|
@mixin static-styles() {
|
|
:host {
|
|
display: inline-flex;
|
|
outline: none;
|
|
|
|
@include _focus-ring();
|
|
}
|
|
|
|
:host([disabled]) {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.md3-icon-button {
|
|
align-items: center;
|
|
border: none;
|
|
box-sizing: border-box;
|
|
cursor: pointer;
|
|
display: flex;
|
|
fill: currentColor;
|
|
justify-content: center;
|
|
outline: none;
|
|
position: relative;
|
|
text-decoration: none;
|
|
user-select: none;
|
|
z-index: 0;
|
|
|
|
i,
|
|
svg,
|
|
img,
|
|
::slotted(*) {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.md3-icon-button--flip-icon .md3-icon-button__icon {
|
|
transform: scaleX(-1);
|
|
}
|
|
|
|
.md3-icon-button__icon {
|
|
display: inline-flex;
|
|
|
|
&.md3-icon-button__icon--on {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.md3-icon-button--on {
|
|
.md3-icon-button__icon {
|
|
display: none;
|
|
|
|
&.md3-icon-button__icon--on {
|
|
display: inline-flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
.md3-icon-button__link {
|
|
height: 100%;
|
|
outline: none;
|
|
position: absolute;
|
|
width: 100%;
|
|
}
|
|
|
|
.md3-icon-button__touch {
|
|
@include touch-target.touch-target($set-width: true);
|
|
}
|
|
}
|
|
|
|
@mixin _focus-ring() {
|
|
@include focus-ring-theme.theme(
|
|
(
|
|
container-outer-padding-vertical: 0px,
|
|
container-outer-padding-horizontal: 0px,
|
|
)
|
|
);
|
|
}
|