mirror of
https://github.com/material-components/material-web.git
synced 2024-10-27 06:04:44 +03:00
implement button css custom props
This commit is contained in:
parent
221e54f938
commit
73fd7afee9
@ -18,6 +18,22 @@ limitations under the License.
|
||||
@import '@material/button/mdc-button.scss';
|
||||
@import '@material/mwc-icon/src/_mwc-icon.scss';
|
||||
|
||||
@mixin mdc-button-outline-width-var-aware(
|
||||
$outline-width,
|
||||
$padding: $mdc-button-contained-horizontal-padding,
|
||||
$query: mdc-feature-all()
|
||||
) {
|
||||
$feat-structure: mdc-feature-create-target($query, structure);
|
||||
// Note: Adjust padding to maintain consistent width with non-outlined buttons
|
||||
$padding-value: calc(#{$padding} - #{$outline-width});
|
||||
|
||||
@include mdc-button-horizontal-padding($padding-value, $query);
|
||||
|
||||
@include mdc-feature-targets($feat-structure) {
|
||||
border-width: $outline-width;
|
||||
}
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
@extend %material-icons;
|
||||
}
|
||||
@ -33,4 +49,34 @@ limitations under the License.
|
||||
|
||||
.mdc-button {
|
||||
flex: auto;
|
||||
|
||||
text-transform: var(--mdc-button-text-transform, uppercase);
|
||||
letter-spacing: var(--mdc-button-letter-spacing);
|
||||
|
||||
@include mdc-button-horizontal-padding(var(--mdc-button-horizontal-padding, #{$mdc-button-contained-horizontal-padding}));
|
||||
|
||||
&.mdc-button--outlined {
|
||||
@include mdc-button-outline-width-var-aware(var(--mdc-button-outline-width, #{$mdc-button-outlined-border-width}), var(--mdc-button-horizontal-padding, #{$mdc-button-contained-horizontal-padding}));
|
||||
border-color: var(--mdc-button-outline-color, var(--mdc-theme-primary, #{mdc-theme-prop-value(primary)}));
|
||||
}
|
||||
}
|
||||
|
||||
:host([disabled]) {
|
||||
.mdc-button {
|
||||
|
||||
&.mdc-button--raised,
|
||||
&.mdc-button--unelevated {
|
||||
background-color: var(--mdc-button-disabled-fill-color, #{rgba(mdc-theme-prop-value(on-surface), .12)});
|
||||
color: var(--mdc-button-disabled-filled-ink-color, #{$mdc-button-disabled-ink-color});
|
||||
}
|
||||
|
||||
&:not(.mdc-button--raised):not(.mdc-button--unelevated) {
|
||||
color: var(--mdc-button-disabled-ink-color, #{$mdc-button-disabled-ink-color});
|
||||
}
|
||||
|
||||
&.mdc-button--outlined {
|
||||
border-color: var(--mdc-button-disabled-ink-color, #{$mdc-button-disabled-ink-color});
|
||||
border-color: var(--mdc-button-disabled-outline-color, var(--mdc-button-disabled-ink-color, #{$mdc-button-disabled-ink-color}));
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user