// postcss-bem-linter: define button
.mdc-button {
@include mdc-typography(body2);
@include mdc-theme-prop(color, text-primary-on-light);
display: inline-block;
position: relative;
min-width: 64px;
height: 36px;
padding: 0 16px;
border: none;
border-radius: 2px;
outline: none;
background: transparent;
font-size: 14px; // Override font to specifically be px as spec defined pt
font-weight: 500;
line-height: 36px; // Override line-height so text aligns centered
text-align: center;
text-decoration: none;
text-transform: uppercase;
vertical-align: middle;
user-select: none;
box-sizing: border-box;
-webkit-appearance: none;
-webkit-tap-highlight-color: rgba(black, .18);
@include mdc-theme-dark {
@include mdc-theme-prop(color, text-primary-on-dark);
-webkit-tap-highlight-color: rgba(white, .18);
}
// postcss-bem-linter: ignore
&::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: mdc-animation-exit(opacity, 120ms);
border-radius: inherit;
background: currentColor;
content: "";
opacity: 0;
}
&:focus::before {
transition: mdc-animation-enter(opacity, 120ms);
opacity: .12;
}
&:active::before {
transition: mdc-animation-enter(opacity, 120ms);
// Slightly darker value for visual distinction.
// This allows a full base that has distinct modes.
// Progressive enhancement with ripples will provide complete button spec alignment.
opacity: .18;
}
&:focus:active::before {
transition-timing-function: $mdc-animation-fast-out-slow-in-timing-function;
}
&:active {
outline: none;
}
&:hover {
cursor: pointer;
}
&::-moz-focus-inner {
padding: 0;
border: 0;
}
&--dense {
height: 32px;
font-size: .8125rem; // 13sp
line-height: 32px;
}
&--raised {
@include mdc-elevation(2);
@include mdc-elevation-transition;
min-width: 88px;
&:active {
@include mdc-elevation(8);
}
@include mdc-theme-dark(".mdc-button") {
@include mdc-theme-prop(background-color, primary);
// postcss-bem-linter: ignore
&::before {
// We are explicitly not fully adhering to Material Design here.
// This should be the 700-shade when active instead of a black shade.
// Due to the complexity involved in adhering fully it is being ignored.
// Instead re-using the existing architecture for shading works just fine.
color: black;
}
}
}
&--primary {
@include mdc-theme-prop(color, primary);
@include mdc-theme-dark(".mdc-button") {
@include mdc-theme-prop(color, primary);
}
// postcss-bem-linter: ignore
&.mdc-button--raised {
@include mdc-theme-prop(background-color, primary);
@include mdc-theme-prop(color, text-primary-on-primary);
// postcss-bem-linter: ignore
&::before {
color: black;
}
}
}
&--accent {
@include mdc-theme-prop(color, accent);
@include mdc-theme-dark(".mdc-button") {
@include mdc-theme-prop(color, accent);
}
// postcss-bem-linter: ignore
&.mdc-button--raised {
@include mdc-theme-prop(background-color, accent);
@include mdc-theme-prop(color, text-primary-on-accent);
// postcss-bem-linter: ignore
&::before {
color: black;
}
}
}
&--compact {
padding: 0 8px;
}
fieldset:disabled &,
&:disabled {
color: rgba(0, 0, 0, .26);
cursor: default;
pointer-events: none;
@include mdc-theme-dark(".mdc-button") {
color: rgba(255, 255, 255, .3);
}
}
fieldset:disabled &--raised,
&--raised:disabled {
@include mdc-elevation(0);
background-color: rgba(0, 0, 0, .12);
pointer-events: none;
@include mdc-theme-dark(".mdc-button") {
background-color: rgba(255, 255, 255, .12);
}
}
}
// postcss-bem-linter: end
.mdc-button.mdc-ripple-upgraded {
@include mdc-ripple-base;
@include mdc-ripple-bg((pseudo: "::before"));
@include mdc-ripple-fg((pseudo: "::after"));
overflow: hidden;
@include mdc-theme-dark(".mdc-button", true) {
@include mdc-ripple-bg((pseudo: "::before", base-color: white, opacity: .14));
@include mdc-ripple-fg((pseudo: "::after", base-color: white, opacity: .14));
}
@each $theme-style in (primary, accent) {
&.mdc-button--#{$theme-style} {
@include mdc-ripple-bg((pseudo: "::before", theme-style: $theme-style, opacity: .12));
@include mdc-ripple-fg((pseudo: "::after", theme-style: $theme-style, opacity: .12));
}
}
}
.mdc-button--raised.mdc-ripple-upgraded {
@each $theme-style in (primary, accent) {
&.mdc-button--#{$theme-style} {
@include mdc-ripple-bg((pseudo: "::before", base-color: white, opacity: .14));
@include mdc-ripple-fg((pseudo: "::after", base-color: white, opacity: .14));
}
}
}