Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

Commit

Permalink
fix(button): fixes button styles for components that override their d…
Browse files Browse the repository at this point in the history 
…efault styles
  • Loading branch information
@robertmesserle
robertmesserle committed Jun 17, 2015
1 parent 3e7ff23 commit b1046bc
Show file tree
Hide file tree
Showing 2 changed files with 2 additions and 4 deletions.
4 changes: 0 additions & 4 deletions src/components/button/button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,10 +151,6 @@ $icon-button-margin: rem(0.600) !default;
-webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC');
}

md-icon {
margin-top: 0;
}

&.md-mini {
line-height: $button-fab-mini-line-height;
width: $button-fab-mini-width;
Expand Down
2 changes: 2 additions & 0 deletions src/components/list/list.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,8 @@ md-list-item {
text-transform: none;
width: 100%;
white-space: normal;
flex-direction: inherit;
align-items: inherit;
}
&:focus {
outline: none
Expand Down

9 comments on commit b1046bc

@hodeyp
Copy link

@hodeyp hodeyp commented on b1046bc Jun 17, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@robertmesserle - this is still causing me issues with md-list components. In 0.10.0 the you could use md-list-item with children and layout in a simple table style. This no longer works when there is an ng-click on the md-list-item...

screen shot 2015-06-17 at 21 59 46

@ThomasBurleson
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@hodeyp - Please provide a CodePen that demonstrates this issue.

@kuhnroyal
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can confirm this, the display: inline-flex from .md-button needs to be overridden here as well.

@kuhnroyal
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Before something like this was possible: http://plnkr.co/edit/UIe8PStjDZ8pHsK3Z1Zm?p=preview
Comment the style and you have the current situation.

@kuhnroyal
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I also used to have some buttons with md-icon and text in them. They used to be aligned in a row, now they are in a column. Not sure if that is a use-case you (or the material-design-guide) want to support, but I think its a pretty common one.

<md-button class="md-primary md-raised">
   <md-icon md-svg-icon="foo"></md-icon>
   <span>Stuff</span>
</md-button>

Edit: added this to the plunkr as well.

@hodeyp
Copy link

@hodeyp hodeyp commented on b1046bc Jun 18, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

http://plnkr.co/edit/vZfbOv?p=preview

I don't seem to be getting any text on the list items with an ng-click at all now

@asans
Copy link

@asans asans commented on b1046bc Jun 19, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Current master branch still causes issues with menu item buttons.

The menu button text is centered and not left-aligned due to the new styles.

See Menu Position Mode Demos to see how it looks.

https://material.angularjs.org/HEAD/#/demo/material.components.menu

@asans
Copy link

@asans asans commented on b1046bc Jun 19, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, this causes problems with list buttons in bottom sheet. icon and buttons are vertically laid out instead of horizontal.

Due to the way flex column is used to style the buttons, this is causing the layout issues. Since it's meant to fix the link vs button consistency and based on the fixes presented here, it's assumed that any component that includes buttons should have the css fixed.

However, this presents the issue that a standalone button is not longer laid out horizontally. So for example:

<div class="just-a-button">
<md-button>
  <md-icon ...> </md-icon>
  Button Text
</md-button>

The above button, instead of aligning the icon to the left of the button text, will end up with icon on top of the button text. Both vertical and horizontal alignments should be supported.

@thvd
Copy link

@thvd thvd commented on b1046bc Jun 23, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍, please fix this issue

Please sign in to comment.