Skip to content

Commit

Permalink
feat(menu): Introduce mixins and base style for menu selection group …
Browse files Browse the repository at this point in the history
…title

PiperOrigin-RevId: 524315087
  • Loading branch information
material-web-copybara authored and copybara-github committed Apr 18, 2023
1 parent f771b09 commit be3fd32
Show file tree
Hide file tree
Showing 3 changed files with 48 additions and 1 deletion.
46 changes: 46 additions & 0 deletions packages/mdc-menu/_menu.scss
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@
@use '@material/theme/theme';
@use '@material/theme/custom-properties';
@use './menu-custom-properties';
@use '@material/typography/typography';
@use './variables';

/// @deprecated Use static-styles() instead.
Expand Down Expand Up @@ -139,6 +140,17 @@
}
// postcss-bem-linter: end

.mdc-menu__selection-group-title {
@include feature-targeting.targets($feat-structure) {
align-items: center;
display: flex;
}
}

.mdc-menu__selection-group-title-text {
@include typography.overflow-ellipsis($query);
}

.mdc-menu-item--selected .mdc-menu__selection-group-icon {
@include feature-targeting.targets($feat-structure) {
display: inline;
Expand Down Expand Up @@ -192,3 +204,37 @@
@include theme.property(min-width, $min-width-custom-property);
}
}

@mixin selection-group-title-spacing(
$leading,
$trailing: $leading,
$query: feature-targeting.all()
) {
$feat-structure: feature-targeting.create-target($query, structure);

@include feature-targeting.targets($feat-structure) {
.mdc-menu__selection-group-title {
@include rtl.reflexive-property(margin, $leading, $trailing);
}
}
}

@mixin selection-group-title-height($height, $query: feature-targeting.all()) {
$feat-structure: feature-targeting.create-target($query, structure);

@include feature-targeting.targets($feat-structure) {
.mdc-menu__selection-group-title {
@include theme.property(height, $height);
}
}
}

@mixin selection-group-title-color($color, $query: feature-targeting.all()) {
$feat-color: feature-targeting.create-target($query, color);

.mdc-menu__selection-group-title {
@include feature-targeting.targets($feat-color) {
@include theme.property(color, $color);
}
}
}
2 changes: 1 addition & 1 deletion packages/mdc-menu/_mixins.scss
Original file line number Diff line number Diff line change
Expand Up @@ -21,4 +21,4 @@
//

/// @deprecated Import '_menu.scss' instead.
@forward './menu' show core-styles, open-item-opacity, width, min-width;
@forward './menu' hide static-styles;
1 change: 1 addition & 0 deletions packages/mdc-menu/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
"@material/shape": "^14.0.0",
"@material/theme": "^14.0.0",
"@material/tokens": "^14.0.0",
"@material/typography": "^14.0.0",
"tslib": "^2.1.0"
}
}

0 comments on commit be3fd32

Please sign in to comment.