Skip to content

Commit

Permalink
Project import generated by Copybara.
Browse files Browse the repository at this point in the history
PiperOrigin-RevId: 358465241
  • Loading branch information
Angular Material Team authored and mmalerba committed Feb 19, 2021
1 parent 79708d4 commit 758ccab
Show file tree
Hide file tree
Showing 13 changed files with 56 additions and 52 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
$config: mat-get-color-config($config-or-theme);
@include mat-using-mdc-theme($config) {
@include mdc-menu-surface-core-styles($mat-theme-styles-query);
@include mdc-list-without-ripple($mat-theme-styles-query);
@include mdc-list-deprecated-without-ripple($mat-theme-styles-query);
}
}

Expand All @@ -18,7 +18,7 @@
.mat-mdc-autocomplete-panel {
// Note that we include this private mixin, because the public one adds
// a bunch of styles that we aren't using for the autocomplete panel.
@include mdc-list-base_($mat-typography-styles-query);
@include mdc-list-deprecated-base_($mat-typography-styles-query);
}
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@

// Note that we include this private mixin, because the public
// one adds a bunch of styles that we aren't using for the menu.
@include mdc-list-base_($query: structure);
@include mdc-list-deprecated-base_($query: structure);
@include cdk-high-contrast(active, off) {
outline: solid 1px;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@
// Since this will usually be rendered in an overlay,
// we have explicitly set the default color.
@include mdc-theme-prop(color, text-primary-on-background);
@include mdc-list-item-disabled-text-color($mdc-list-text-disabled-color,
$query: $mat-theme-styles-query);
@include mdc-list-deprecated-item-disabled-text-color(
$mdc-list-deprecated-text-disabled-color, $query: $mat-theme-styles-query);
}
}
}
Expand Down
13 changes: 8 additions & 5 deletions src/material-experimental/mdc-core/option/_option-theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@
// Since this will usually be rendered in an overlay,
// we have explicitly set the default color.
@include mdc-theme-prop(color, text-primary-on-background);
@include mdc-list-item-disabled-text-color($mdc-list-text-disabled-color,
$query: $mat-theme-styles-query);
@include mdc-list-deprecated-item-disabled-text-color(
$mdc-list-deprecated-text-disabled-color, $query: $mat-theme-styles-query);

&:hover:not(.mdc-list-item--disabled),
&:focus:not(.mdc-list-item--disabled),
Expand All @@ -29,15 +29,18 @@
}

.mat-primary .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) {
@include mdc-list-item-primary-text-ink-color(primary, $query: $mat-theme-styles-query);
@include mdc-list-deprecated-item-primary-text-ink-color(
primary, $query: $mat-theme-styles-query);
}

.mat-accent .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) {
@include mdc-list-item-primary-text-ink-color(secondary, $query: $mat-theme-styles-query);
@include mdc-list-deprecated-item-primary-text-ink-color(
secondary, $query: $mat-theme-styles-query);
}

.mat-warn .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) {
@include mdc-list-item-primary-text-ink-color(error, $query: $mat-theme-styles-query);
@include mdc-list-deprecated-item-primary-text-ink-color(
error, $query: $mat-theme-styles-query);
}
}
}
Expand Down
14 changes: 7 additions & 7 deletions src/material-experimental/mdc-core/option/optgroup.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,11 @@
@import '../../mdc-helpers/mdc-helpers';

.mat-mdc-optgroup-label {
@include mdc-list-item-base_;
@include mdc-list-list-item-padding-variant(
$mdc-list-textual-variant-config, $query: $mat-base-styles-query);
@include mdc-list-list-item-height-variant(
$mdc-list-textual-variant-config, $query: $mat-base-styles-query);
@include mdc-list-item-disabled-text-opacity($mdc-list-text-disabled-opacity,
$query: $mat-base-styles-query);
@include mdc-list-deprecated-item-base_;
@include mdc-list-deprecated-list-item-padding-variant(
$mdc-list-deprecated-textual-variant-config, $query: $mat-base-styles-query);
@include mdc-list-deprecated-list-item-height-variant(
$mdc-list-deprecated-textual-variant-config, $query: $mat-base-styles-query);
@include mdc-list-deprecated-item-disabled-text-opacity(
$mdc-list-deprecated-text-disabled-opacity, $query: $mat-base-styles-query);
}
22 changes: 11 additions & 11 deletions src/material-experimental/mdc-core/option/option.scss
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,17 @@
.mat-mdc-option {
// Note that we include this private mixin, because the public
// one adds a bunch of styles that we aren't using for the menu.
@include mdc-list-item-base_;
@include mdc-list-list-item-padding-variant(
$mdc-list-textual-variant-config, $query: $mat-base-styles-query);
@include mdc-list-item-disabled-text-opacity($mdc-list-text-disabled-opacity,
$query: $mat-base-styles-query);
@include mdc-list-deprecated-item-base_;
@include mdc-list-deprecated-list-item-padding-variant(
$mdc-list-deprecated-textual-variant-config, $query: $mat-base-styles-query);
@include mdc-list-deprecated-item-disabled-text-opacity(
$mdc-list-deprecated-text-disabled-opacity, $query: $mat-base-styles-query);
@include user-select(none);

// Set the `min-height` here ourselves, instead of going through
// the `mdc-list-list-item-height-variant` mixin, because it sets a `height`
// which doesn't work well with multi-line options.
min-height: map-get($mdc-list-textual-variant-config, single-line-height);
min-height: map-get($mdc-list-deprecated-textual-variant-config, single-line-height);

// Workaround for https://goo.gl/pFmjJD in IE 11. Adds a pseudo
// element that will stretch the option to the correct height. See:
Expand All @@ -35,20 +35,20 @@
// Note that we bump the padding here, rather than padding inside the
// group so that ripples still reach to the edges of the panel.
.mat-mdc-optgroup &:not(.mat-mdc-option-multiple) {
padding-left: $mdc-list-side-padding * 2;
padding-left: $mdc-list-deprecated-side-padding * 2;

[dir='rtl'] & {
padding-left: $mdc-list-side-padding;
padding-right: $mdc-list-side-padding * 2;
padding-left: $mdc-list-deprecated-side-padding;
padding-right: $mdc-list-deprecated-side-padding * 2;
}
}

.mat-pseudo-checkbox {
margin-right: $mdc-list-side-padding;
margin-right: $mdc-list-deprecated-side-padding;

[dir='rtl'] & {
margin-right: 0;
margin-left: $mdc-list-side-padding;
margin-left: $mdc-list-deprecated-side-padding;
}
}

Expand Down
4 changes: 2 additions & 2 deletions src/material-experimental/mdc-list/_list-option-theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@
}

&.mdc-list-item--selected {
@include mdc-list-item-primary-text-ink-color($color);
@include mdc-list-item-graphic-ink-color($color);
@include mdc-list-deprecated-item-primary-text-ink-color($color);
@include mdc-list-deprecated-item-graphic-ink-color($color);

&::before {
@include mdc-theme-prop(background, $color);
Expand Down
8 changes: 4 additions & 4 deletions src/material-experimental/mdc-list/_list-theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
@include mat-mdc-private-interactive-list-item-state-colors($config);

@include mat-using-mdc-theme($config) {
@include mdc-list-without-ripple($query: $mat-theme-styles-query);
@include mdc-list-deprecated-without-ripple($query: $mat-theme-styles-query);

.mat-mdc-list-option {
@include mat-mdc-private-list-option-color-override(primary);
Expand All @@ -35,7 +35,7 @@
@mixin mat-mdc-list-density($config-or-theme) {
$density-scale: mat-get-density-config($config-or-theme);
$height: density.prop-value(
$density-config: $mdc-list-single-line-density-config,
$density-config: $mdc-list-deprecated-single-line-density-config,
$density-scale: $density-scale,
$property-name: height,
);
Expand All @@ -45,7 +45,7 @@
// the styles should actually only affect single-line list items. This has been reported as
// a bug in the MDC repository: https://github.com/material-components/material-components-web/issues/5737.
.mat-mdc-list-item-single-line {
@include mdc-list-single-line-height($height);
@include mdc-list-deprecated-single-line-height($height);
}

@include mat-mdc-private-list-option-density-styles($density-scale);
Expand All @@ -54,7 +54,7 @@
@mixin mat-mdc-list-typography($config-or-theme) {
$config: mat-get-typography-config($config-or-theme);
@include mat-using-mdc-typography($config) {
@include mdc-list-without-ripple($query: $mat-typography-styles-query);
@include mdc-list-deprecated-without-ripple($query: $mat-typography-styles-query);
@include mat-mdc-private-list-option-typography-styles();
}
}
Expand Down
4 changes: 2 additions & 2 deletions src/material-experimental/mdc-list/list.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
@import '@material/list/variables.import';
@import '../mdc-helpers/mdc-helpers';

@include mdc-list-without-ripple($query: $mat-base-styles-query);
@include mdc-list-deprecated-without-ripple($query: $mat-base-styles-query);

// MDC expects the list element to be a `<ul>`, since we use `<mat-list>` instead we need to
// explicitly set `display: block`
Expand Down Expand Up @@ -48,7 +48,7 @@
// Styles here come from `$mdc-list-graphic-size_`:
// https://github.com/material-components/material-components-web/blob/3ca8c4c45a3d2a654ef3cb8fc7525bcde37badf0/packages/mdc-list/_mixins.scss#L538
$size: 40px;
$margin-value: 72px - $mdc-list-side-padding - $size;
$margin-value: 72px - $mdc-list-deprecated-side-padding - $size;

width: $size;
height: $size;
Expand Down
4 changes: 2 additions & 2 deletions src/material-experimental/mdc-menu/_menu-theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
$config: mat-get-color-config($config-or-theme);
@include mat-using-mdc-theme($config) {
@include mdc-menu-surface-core-styles($mat-theme-styles-query);
@include mdc-list-without-ripple($mat-theme-styles-query);
@include mdc-list-deprecated-without-ripple($mat-theme-styles-query);

// MDC doesn't appear to have disabled styling for menu
// items so we have to grey them out ourselves.
Expand Down Expand Up @@ -51,7 +51,7 @@
.mat-mdc-menu-content {
// Note that we include this private mixin, because the public
// one adds a bunch of styles that we aren't using for the menu.
@include mdc-list-base_($mat-typography-styles-query);
@include mdc-list-deprecated-base_($mat-typography-styles-query);

// MDC uses the `subtitle1` level for list items, but the spec shows `body1` as the correct
// level.
Expand Down
20 changes: 10 additions & 10 deletions src/material-experimental/mdc-menu/menu.scss
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ mat-menu {
.mat-mdc-menu-content {
// Note that we include this private mixin, because the public
// one adds a bunch of styles that we aren't using for the menu.
@include mdc-list-base_($query: structure);
@include mdc-list-deprecated-base_($query: structure);
}

.mat-mdc-menu-panel {
Expand All @@ -36,21 +36,21 @@ mat-menu {

.mat-mdc-menu-item {
$height: density.prop-value(
$density-config: $mdc-list-single-line-density-config,
$density-scale: $mdc-list-single-line-density-scale,
$density-config: $mdc-list-deprecated-single-line-density-config,
$density-scale: $mdc-list-deprecated-single-line-density-scale,
$property-name: height,
);

// Note that we include this private mixin, because the public
// one adds a bunch of styles that we aren't using for the menu.
@include mdc-list-item-base_;
@include mdc-list-list-item-padding-variant(
$mdc-list-textual-variant-config, $query: $mat-base-styles-query);
@include mdc-list-deprecated-item-base_;
@include mdc-list-deprecated-list-item-padding-variant(
$mdc-list-deprecated-textual-variant-config, $query: $mat-base-styles-query);

// MDC's menu items are `<li>` nodes which don't need resets, however ours
// can be anything, including buttons, so we need to do the reset ourselves.
@include mat-button-reset;
@include mdc-list-single-line-height($height, $query: $mat-base-styles-query);
@include mdc-list-deprecated-single-line-height($height, $query: $mat-base-styles-query);
cursor: pointer;
width: 100%;
text-align: left;
Expand All @@ -71,15 +71,15 @@ mat-menu {
}

.mat-icon {
margin-right: $mdc-list-side-padding;
margin-right: $mdc-list-deprecated-side-padding;
}

[dir='rtl'] & {
text-align: right;

.mat-icon {
margin-right: 0;
margin-left: $mdc-list-side-padding;
margin-left: $mdc-list-deprecated-side-padding;
}
}

Expand All @@ -100,7 +100,7 @@ mat-menu {

// Renders out a chevron on menu items that trigger a sub-menu.
.mat-mdc-menu-item-submenu-trigger {
@include mat-menu-item-submenu-trigger($mdc-list-side-padding);
@include mat-menu-item-submenu-trigger($mdc-list-deprecated-side-padding);
}

// Increase specificity because ripple styles are part of the `mat-core` mixin and can
Expand Down
4 changes: 2 additions & 2 deletions src/material-experimental/mdc-select/_select-theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
$mdc-select-disabled-dropdown-icon-color: rgba(mdc-theme-prop-value(on-surface), 0.38) !global;

@include mdc-menu-surface-core-styles($mat-theme-styles-query);
@include mdc-list-without-ripple($mat-theme-styles-query);
@include mdc-list-deprecated-without-ripple($mat-theme-styles-query);

.mat-mdc-select-value {
color: $mdc-select-ink-color;
Expand Down Expand Up @@ -88,7 +88,7 @@
.mat-mdc-select-panel {
// Note that we include this private mixin, because the public one adds
// a bunch of styles that we aren't using for the select panel.
@include mdc-list-base_($mat-typography-styles-query);
@include mdc-list-deprecated-base_($mat-typography-styles-query);
}

.mat-mdc-select-value {
Expand Down
5 changes: 3 additions & 2 deletions src/material-experimental/mdc-select/select.scss
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@
$mat-select-arrow-size: 5px !default;
$mat-select-arrow-margin: 4px !default;
$mat-select-panel-max-height: 256px !default;
$mat-select-placeholder-arrow-space: 2 * ($mat-select-arrow-size + $mat-select-arrow-margin);
$mat-select-placeholder-arrow-space: 2 *
($mat-select-arrow-size + $mat-select-arrow-margin);
$leading-width: 12px !default;
$scale: 0.75 !default;

Expand Down Expand Up @@ -78,7 +79,7 @@ $scale: 0.75 !default;

// Note that we include this private mixin, because the public
// one adds a bunch of styles that we aren't using for the menu.
@include mdc-list-base_($query: structure);
@include mdc-list-deprecated-base_($query: structure);
@include cdk-high-contrast(active, off) {
outline: solid 1px;
}
Expand Down

0 comments on commit 758ccab

Please sign in to comment.