Skip to content

Commit

Permalink
Fixed ripple style bug on flat buttons.
Browse files Browse the repository at this point in the history
  • Loading branch information
Hai Nguyen committed Feb 17, 2015
1 parent f6ce73b commit 2e529f6
Showing 4 changed files with 10 additions and 9 deletions.
2 changes: 1 addition & 1 deletion docs/src/app/components/pages/components/buttons.jsx
Original file line number Diff line number Diff line change
@@ -179,7 +179,7 @@ var ButtonPage = React.createClass({
<div className="button-example-container">
<FlatButton linkButton={true} href="https://github.com/callemall/material-ui" secondary={true}>
<FontIcon className="muidocs-icon-custom-github example-flat-button-icon"/>
<span className="mui-flat-button-label">Github</span>
<span className="mui-flat-button-label example-icon-button-label">Github</span>
</FlatButton>
</div>
<div className="button-example-container">
12 changes: 6 additions & 6 deletions docs/src/less/pages/components/buttons.less
Original file line number Diff line number Diff line change
@@ -16,6 +16,10 @@
width: 25%;
}
}

.example-icon-button-label {
padding-left: 8px;
}
}

.example-image-button {
@@ -49,17 +53,13 @@
display: inline-block;
vertical-align: middle;
float: left;
padding-left: 6px;
padding-left: 12px;
line-height: 36px;
}

.example-icon-button-label {
padding-left: 6px!important;
}

.example-flat-button-icon {
display: inline-block;
float: left;
line-height: 36px;
padding-right: 6px;
padding-left: 12px;
}
2 changes: 1 addition & 1 deletion src/js/utils/dom.js
Original file line number Diff line number Diff line change
@@ -12,7 +12,7 @@ module.exports = {
},

offset: function(el) {
var rect = el.getBoundingClientRect()
var rect = el.getBoundingClientRect();
return {
top: rect.top + document.body.scrollTop,
left: rect.left + document.body.scrollLeft
3 changes: 2 additions & 1 deletion src/less/components/flat-button.less
Original file line number Diff line number Diff line change
@@ -11,7 +11,7 @@
color: @flat-button-text-color;
line-height: @button-height;
min-width: @button-min-width;
padding: 0 @desktop-gutter-less;
padding: 0;
margin: 0;

//This is need so that ripples do not bleed
@@ -33,6 +33,7 @@

.mui-flat-button-label {
position: relative;
padding: 0 @desktop-gutter-less;
}

&:hover,

0 comments on commit 2e529f6

Please sign in to comment.