Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(multiple): account for mixed declarations in latest Sass version #29596

Merged
merged 1 commit into from
Aug 20, 2024
Merged

fix(multiple): account for mixed declarations in latest Sass version #29596

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,7 @@
"requirejs": "^2.3.6",
"rollup": "^2.66.1",
"rollup-plugin-sourcemaps": "^0.6.3",
"sass": "^1.68.0",
"sass": "^1.77.8",
"selenium-webdriver": "^3.6.0",
"semver": "^7.3.5",
"send": "^0.17.2",
Expand Down
10 changes: 5 additions & 5 deletions src/material/badge/badge.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,11 +63,6 @@ $large-size: $default-size + 6;
box-sizing: border-box;
pointer-events: none;

@include cdk.high-contrast(active, off) {
outline: solid 1px;
border-radius: 0;
}

@include token-utils.use-tokens(tokens-mat-badge.$prefix, tokens-mat-badge.get-token-slots()) {
@include token-utils.create-token-slot(background-color, background-color);
@include token-utils.create-token-slot(color, text-color);
Expand Down Expand Up @@ -101,6 +96,11 @@ $large-size: $default-size + 6;
right: 100%;
}
}

@include cdk.high-contrast(active, off) {
outline: solid 1px;
border-radius: 0;
}
}

.mat-badge-disabled .mat-badge-content {
Expand Down
3 changes: 2 additions & 1 deletion src/material/button-toggle/button-toggle.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ $_standard-tokens: (

.mat-button-toggle-standalone,
.mat-button-toggle-group {
@include elevation.overridable-elevation(2);
position: relative;
display: inline-flex;
flex-direction: row;
Expand All @@ -43,6 +42,8 @@ $_standard-tokens: (
@include token-utils.create-token-slot(border-radius, shape);
}

@include elevation.overridable-elevation(2);

@include cdk.high-contrast(active, off) {
outline: solid 1px;
}
Expand Down
2 changes: 0 additions & 2 deletions src/material/button/_button-base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,8 +141,6 @@
@include token-utils.use-tokens($prefix, $slots) {
$icon-spacing: token-utils.get-token-variable(icon-spacing, true);
$icon-offset: token-utils.get-token-variable(icon-offset, true);
$horizontal-padding: token-utils.get-token-variable(horizontal-padding, true);
padding: 0 $horizontal-padding;

@if ($has-with-icon-padding) {
$with-icon-horizontal-padding:
Expand Down
88 changes: 61 additions & 27 deletions src/material/button/button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,12 +63,9 @@
.mat-mdc-button {
$mat-text-button-slots: tokens-mat-text-button.get-token-slots();

@include button-base.mat-private-button-horizontal-layout(tokens-mat-text-button.$prefix,
$mat-text-button-slots, true);
@include button-base.mat-private-button-ripple(tokens-mat-text-button.$prefix,
$mat-text-button-slots);
@include button-base.mat-private-button-touch-target(false, tokens-mat-text-button.$prefix,
$mat-text-button-slots);
@include token-utils.use-tokens(tokens-mat-text-button.$prefix, $mat-text-button-slots) {
padding: 0 #{token-utils.get-token-variable(horizontal-padding, true)};
}

@include token-utils.use-tokens(
tokens-mdc-text-button.$prefix,
Expand All @@ -95,19 +92,19 @@
@include token-utils.create-token-slot(color, disabled-label-text-color);
}
}

@include button-base.mat-private-button-horizontal-layout(tokens-mat-text-button.$prefix,
$mat-text-button-slots, true);
@include button-base.mat-private-button-ripple(tokens-mat-text-button.$prefix,
$mat-text-button-slots);
@include button-base.mat-private-button-touch-target(false, tokens-mat-text-button.$prefix,
$mat-text-button-slots);
}

.mat-mdc-unelevated-button {
$mat-filled-button-slots: tokens-mat-filled-button.get-token-slots();
transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);

@include button-base.mat-private-button-horizontal-layout(tokens-mat-filled-button.$prefix,
$mat-filled-button-slots, false);
@include button-base.mat-private-button-ripple(tokens-mat-filled-button.$prefix,
$mat-filled-button-slots);
@include button-base.mat-private-button-touch-target(false, tokens-mat-filled-button.$prefix,
$mat-filled-button-slots);

@include token-utils.use-tokens(
tokens-mdc-filled-button.$prefix,
tokens-mdc-filled-button.get-token-slots()
Expand All @@ -118,7 +115,23 @@
@include token-utils.create-token-slot(letter-spacing, label-text-tracking);
@include token-utils.create-token-slot(text-transform, label-text-transform);
@include token-utils.create-token-slot(font-weight, label-text-weight);
}

@include token-utils.use-tokens(tokens-mat-filled-button.$prefix, $mat-filled-button-slots) {
padding: 0 #{token-utils.get-token-variable(horizontal-padding, true)};
}

@include button-base.mat-private-button-horizontal-layout(tokens-mat-filled-button.$prefix,
$mat-filled-button-slots, false);
@include button-base.mat-private-button-ripple(tokens-mat-filled-button.$prefix,
$mat-filled-button-slots);
@include button-base.mat-private-button-touch-target(false, tokens-mat-filled-button.$prefix,
$mat-filled-button-slots);

@include token-utils.use-tokens(
tokens-mdc-filled-button.$prefix,
tokens-mdc-filled-button.get-token-slots()
) {
&:not(:disabled) {
@include token-utils.create-token-slot(color, label-text-color);
@include token-utils.create-token-slot(background-color, container-color);
Expand All @@ -141,13 +154,6 @@
$mat-protected-button-slots: tokens-mat-protected-button.get-token-slots();
transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);

@include button-base.mat-private-button-horizontal-layout(tokens-mat-protected-button.$prefix,
$mat-protected-button-slots, false);
@include button-base.mat-private-button-ripple(tokens-mat-protected-button.$prefix,
$mat-protected-button-slots);
@include button-base.mat-private-button-touch-target(false, tokens-mat-protected-button.$prefix,
$mat-protected-button-slots);

@include token-utils.use-tokens(
tokens-mdc-protected-button.$prefix,
tokens-mdc-protected-button.get-token-slots()
Expand All @@ -159,7 +165,26 @@
@include token-utils.create-token-slot(letter-spacing, label-text-tracking);
@include token-utils.create-token-slot(text-transform, label-text-transform);
@include token-utils.create-token-slot(font-weight, label-text-weight);
}

@include token-utils.use-tokens(
tokens-mat-protected-button.$prefix,
$mat-protected-button-slots
) {
padding: 0 #{token-utils.get-token-variable(horizontal-padding, true)};
}

@include button-base.mat-private-button-horizontal-layout(tokens-mat-protected-button.$prefix,
$mat-protected-button-slots, false);
@include button-base.mat-private-button-ripple(tokens-mat-protected-button.$prefix,
$mat-protected-button-slots);
@include button-base.mat-private-button-touch-target(false, tokens-mat-protected-button.$prefix,
$mat-protected-button-slots);

@include token-utils.use-tokens(
tokens-mdc-protected-button.$prefix,
tokens-mdc-protected-button.get-token-slots()
) {
&:not(:disabled) {
@include token-utils.create-token-slot(color, label-text-color);
@include token-utils.create-token-slot(background-color, container-color);
Expand Down Expand Up @@ -199,13 +224,6 @@
border-style: solid;
transition: border 280ms cubic-bezier(0.4, 0, 0.2, 1);

@include button-base.mat-private-button-horizontal-layout(tokens-mat-outlined-button.$prefix,
$mat-outlined-button-slots, false);
@include button-base.mat-private-button-ripple(tokens-mat-outlined-button.$prefix,
$mat-outlined-button-slots);
@include button-base.mat-private-button-touch-target(false, tokens-mat-outlined-button.$prefix,
$mat-outlined-button-slots);

@include token-utils.use-tokens(
tokens-mdc-outlined-button.$prefix,
tokens-mdc-outlined-button.get-token-slots()
Expand All @@ -218,7 +236,23 @@
@include token-utils.create-token-slot(font-weight, label-text-weight);
@include token-utils.create-token-slot(border-radius, container-shape);
@include token-utils.create-token-slot(border-width, outline-width);
}

@include token-utils.use-tokens(tokens-mat-outlined-button.$prefix, $mat-outlined-button-slots) {
padding: 0 #{token-utils.get-token-variable(horizontal-padding, true)};
}

@include button-base.mat-private-button-horizontal-layout(tokens-mat-outlined-button.$prefix,
$mat-outlined-button-slots, false);
@include button-base.mat-private-button-ripple(tokens-mat-outlined-button.$prefix,
$mat-outlined-button-slots);
@include button-base.mat-private-button-touch-target(false, tokens-mat-outlined-button.$prefix,
$mat-outlined-button-slots);

@include token-utils.use-tokens(
tokens-mdc-outlined-button.$prefix,
tokens-mdc-outlined-button.get-token-slots()
) {
&:not(:disabled) {
@include token-utils.create-token-slot(color, label-text-color);
@include token-utils.create-token-slot(border-color, outline-color);
Expand Down
29 changes: 15 additions & 14 deletions src/material/button/fab.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,6 @@
@use '../core/tokens/m2/mat/fab-small' as tokens-mat-fab-small;

.mat-mdc-fab-base {
@include button-base.mat-private-button-interactive();
@include style-private.private-animation-noop();
@include vendor-prefixes.user-select(none);
position: relative;
display: inline-flex;
Expand All @@ -32,6 +30,9 @@
transform 270ms 0ms cubic-bezier(0, 0, 0.2, 1);
flex-shrink: 0; // Prevent the button from shrinking since it's always supposed to be a circle.

@include button-base.mat-private-button-interactive();
@include style-private.private-animation-noop();

&::before {
position: absolute;
box-sizing: border-box;
Expand Down Expand Up @@ -114,9 +115,6 @@
}

@mixin _fab-structure($mdc-tokens, $mat-tokens) {
@include button-base.mat-private-button-touch-target(true, $mat-tokens...);
@include button-base.mat-private-button-ripple($mat-tokens...);

@include token-utils.use-tokens($mdc-tokens...) {
@include token-utils.create-token-slot(background-color, container-color);
@include token-utils.create-token-slot(border-radius, container-shape);
Expand All @@ -134,6 +132,9 @@
@include token-utils.create-token-slot(background-color, disabled-state-container-color);
}
}

@include button-base.mat-private-button-touch-target(true, $mat-tokens...);
@include button-base.mat-private-button-ripple($mat-tokens...);
}

.mat-mdc-fab {
Expand Down Expand Up @@ -167,15 +168,6 @@
max-width: 100%;
line-height: normal;

@include _fab-elevation($mdc-tokens);

@include button-base.mat-private-button-disabled {
// Necessary for interactive disabled buttons.
&, &:focus {
box-shadow: none;
}
}

@include token-utils.use-tokens($mdc-tokens...) {
@include token-utils.create-token-slot(height, container-height);
@include token-utils.create-token-slot(border-radius, container-shape);
Expand All @@ -185,6 +177,15 @@
@include token-utils.create-token-slot(letter-spacing, label-text-tracking);
}

@include _fab-elevation($mdc-tokens);

@include button-base.mat-private-button-disabled {
// Necessary for interactive disabled buttons.
&, &:focus {
box-shadow: none;
}
}

// stylelint-disable selector-class-pattern
// For Extended FAB with text label followed by icon.
// We are checking for the a button class because white this is a FAB it
Expand Down
17 changes: 10 additions & 7 deletions src/material/button/icon-button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,17 @@
// the unused `.mdc-button__icon` class. Explicitly set the font-size here.
@include token-utils.create-token-slot(font-size, icon-size);
@include token-utils.create-token-slot(color, icon-color);
}

@include button-base.mat-private-button-interactive();
@include button-base.mat-private-button-ripple(tokens-mat-icon-button.$prefix,
tokens-mat-icon-button.get-token-slots());
@include button-base.mat-private-button-touch-target(true, tokens-mat-icon-button.$prefix,
tokens-mat-icon-button.get-token-slots());
@include private.private-animation-noop();

@include token-utils.use-tokens(
tokens-mdc-icon-button.$prefix, tokens-mdc-icon-button.get-token-slots()) {
@include button-base.mat-private-button-disabled {
@include token-utils.create-token-slot(color, disabled-icon-color);
};
Expand All @@ -62,13 +72,6 @@
}
}

@include button-base.mat-private-button-interactive();
@include button-base.mat-private-button-ripple(tokens-mat-icon-button.$prefix,
tokens-mat-icon-button.get-token-slots());
@include button-base.mat-private-button-touch-target(true, tokens-mat-icon-button.$prefix,
tokens-mat-icon-button.get-token-slots());
@include private.private-animation-noop();

.mat-mdc-button-persistent-ripple {
border-radius: 50%;
}
Expand Down
14 changes: 7 additions & 7 deletions src/material/checkbox/_checkbox-common.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,10 +175,10 @@ $_fallback-size: 40px;
// Always apply the color since the element becomes `opacity: 0`
// when unchecked. This makes the animation look better.
@include token-utils.create-token-slot(color, selected-checkmark-color);
}

@include cdk.high-contrast(active, off) {
color: CanvasText;
}
@include cdk.high-contrast(active, off) {
color: CanvasText;
}
}

Expand Down Expand Up @@ -214,15 +214,15 @@ $_fallback-size: 40px;
transition: opacity $_transition-duration $_exit-curve,
transform $_transition-duration $_exit-curve;

@include cdk.high-contrast(active, off) {
margin: 0 1px;
}

@include token-utils.use-tokens($prefix, $slots) {
// Always apply the color since the element becomes `opacity: 0`
// when unchecked. This makes the animation look better.
@include token-utils.create-token-slot(border-color, selected-checkmark-color);
}

@include cdk.high-contrast(active, off) {
margin: 0 1px;
}
}

@include token-utils.use-tokens($prefix, $slots) {
Expand Down
4 changes: 2 additions & 2 deletions src/material/checkbox/checkbox.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,15 @@
@include checkbox-common.checkbox-structure(true);

.mat-mdc-checkbox {
@include checkbox-common.checkbox-noop-animations;

// The host node defaults to `display: inline`, we have to change it in order for margins to work.
display: inline-block;
// Avoids issues in some CSS grid layouts (see #25153).
position: relative;
// Disable the browser's tap highlight since we indicate state with the ripple instead.
-webkit-tap-highlight-color: transparent;

@include checkbox-common.checkbox-noop-animations;

// Clicking the label toggles the checkbox, but MDC does not include any styles that inform the
// user of this. Therefore we add the pointer cursor on top of MDC's styles.
label {
Expand Down
10 changes: 5 additions & 5 deletions src/material/chips/chip.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -642,6 +642,11 @@ $_avatar-trailing-padding: 8px;
// MDC centers the text, but we have a lot of internal customers who have it at the start.
text-align: left;

// Give the text label a higher z-index than the focus overlay to ensure that the focus overlay
// does not affect the color of the text. Material spec requires state layer to not interfere with
// text color.
z-index: 1;

[dir='rtl'] & {
text-align: right;
}
Expand Down Expand Up @@ -671,11 +676,6 @@ $_avatar-trailing-padding: 8px;
$offset: calc(#{$border-width} + 2px);
margin: calc(#{$offset} * -1);
}

// Give the text label a higher z-index than the focus overlay to ensure that the focus overlay
// does not affect the color of the text. Material spec requires state layer to not interfere with
// text color.
z-index: 1;
}

.mat-mdc-chip-remove {
Expand Down
Loading
Loading