Skip to content

Outer md-button-toggle within md-button-toggle-group do not have round corners when selected or disabled #6689

@MA-Maddin

Description

@MA-Maddin

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Proper styling (round corners) of md-button-toggle within md-button-toggle-group

good

What is the current behavior?

Outer buttons do not have round corners when selected or disabled

wrong

What are the steps to reproduce?

https://material.angular.io/components/button-toggle/examples

What is the use-case or motivation for changing an existing behavior?

Comply with Material Design specs

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Material 2.0.0-beta.8
Google Chrome Version 60.0.3112.113 (Offizieller Build) (64-Bit)
Firefox 55.0.3 (64-Bit)

Is there anything else we should know?

This fixes the styling:

.mat-button-toggle:first-child.mat-button-toggle-checked, .mat-button-toggle:first-child.mat-button-toggle-disabled {
    border-top-left-radius: inherit;
    border-bottom-left-radius: inherit;
}
.mat-button-toggle:last-child.mat-button-toggle-checked, .mat-button-toggle:last-child.mat-button-toggle-disabled {
    border-top-right-radius: inherit;
    border-bottom-right-radius: inherit;
}

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions