Skip to content

Commit

Permalink
Merge pull request #445 from mmrtnz/css-paper
Browse files Browse the repository at this point in the history 
**All component less files have been refactored.** Next are core less files.
  • Loading branch information
@mmrtnz
mmrtnz committed Mar 18, 2015
2 parents 82c7b62 + eac16ec commit aa3be12
Show file tree
Hide file tree
Showing 8 changed files with 143 additions and 137 deletions.
104 changes: 59 additions & 45 deletions docs/src/app/components/pages/components/paper.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,13 @@ var PaperPage = React.createClass({
'sometimes helpful to assign an className to the inner div ' +
'for styling. This property is the className for the inner div.'
},
{
name: 'innerStyle',
type: 'string',
header: 'optional',
desc: 'Similiar to innerClassName. Overrides the inline-style of ' +
'the inner div.'
},
{
name: 'rounded',
type: 'bool',
Expand Down Expand Up @@ -103,6 +110,13 @@ var PaperPage = React.createClass({
}
];

var styles = {
height: 100,
width: 100,
margin: '0 auto',
marginBottom: 64,
};

return (
<ComponentDoc
name="Paper"
Expand All @@ -111,57 +125,57 @@ var PaperPage = React.createClass({

<div className="paper-examples">
<div className="paper-examples-group">
<Paper zDepth={1}>
<p>zDepth=1</p>
</Paper>
<Paper zDepth={2}>
<p>zDepth=2</p>
</Paper>
<Paper zDepth={3}>
<p>zDepth=3</p>
</Paper>
<Paper zDepth={4}>
<p>zDepth=4</p>
</Paper>
<Paper zDepth={5}>
<p>zDepth=5</p>
</Paper>
<Paper style={styles} innerClassName="mui-paper-container" zDepth={1}>
<p>zDepth=1</p>
</Paper>
<Paper style={styles} innerClassName="mui-paper-container" zDepth={2}>
<p>zDepth=2</p>
</Paper>
<Paper style={styles} innerClassName="mui-paper-container" zDepth={3}>
<p>zDepth=3</p>
</Paper>
<Paper style={styles} innerClassName="mui-paper-container" zDepth={4}>
<p>zDepth=4</p>
</Paper>
<Paper style={styles} innerClassName="mui-paper-container" zDepth={5}>
<p>zDepth=5</p>
</Paper>
</div>

<div className="paper-examples-group">
<Paper zDepth={1} rounded={false}>
<p>rounded=false</p>
</Paper>
<Paper zDepth={2} rounded={false}>
<p>rounded=false</p>
</Paper>
<Paper zDepth={3} rounded={false}>
<p>rounded=false</p>
</Paper>
<Paper zDepth={4} rounded={false}>
<p>rounded=false</p>
</Paper>
<Paper zDepth={5} rounded={false}>
<p>rounded=false</p>
</Paper>
<Paper style={styles} innerClassName="mui-paper-container" zDepth={1} rounded={false}>
<p>rounded=false</p>
</Paper>
<Paper style={styles} innerClassName="mui-paper-container" zDepth={2} rounded={false}>
<p>rounded=false</p>
</Paper>
<Paper style={styles} innerClassName="mui-paper-container" zDepth={3} rounded={false}>
<p>rounded=false</p>
</Paper>
<Paper style={styles} innerClassName="mui-paper-container" zDepth={4} rounded={false}>
<p>rounded=false</p>
</Paper>
<Paper style={styles} innerClassName="mui-paper-container" zDepth={5} rounded={false}>
<p>rounded=false</p>
</Paper>
</div>

<div className="paper-examples-group">
<Paper zDepth={1} circle={true}>
<p>circle=true</p>
</Paper>
<Paper zDepth={2} circle={true}>
<p>circle=true</p>
</Paper>
<Paper zDepth={3} circle={true}>
<p>circle=true</p>
</Paper>
<Paper zDepth={4} circle={true}>
<p>circle=true</p>
</Paper>
<Paper zDepth={5} circle={true}>
<p>circle=true</p>
</Paper>
<Paper style={styles} innerClassName="mui-paper-container" zDepth={1} circle={true}>
<p>circle=true</p>
</Paper>
<Paper style={styles} innerClassName="mui-paper-container" zDepth={2} circle={true}>
<p>circle=true</p>
</Paper>
<Paper style={styles} innerClassName="mui-paper-container" zDepth={3} circle={true}>
<p>circle=true</p>
</Paper>
<Paper style={styles} innerClassName="mui-paper-container" zDepth={4} circle={true}>
<p>circle=true</p>
</Paper>
<Paper style={styles} innerClassName="mui-paper-container" zDepth={5} circle={true}>
<p>circle=true</p>
</Paper>
</div>
</div>

Expand Down
2 changes: 1 addition & 1 deletion src/js/enhanced-switch.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -216,7 +216,7 @@ var EnhancedSwitch = React.createClass({
) : (
<div style={wrapStyles}>
<div style={this.props.trackStyle}/>
<Paper style={this.props.thumbStyle} zDepth={1}> {ripples} </Paper>
<Paper style={this.props.thumbStyle} zDepth={1} circle={true}> {ripples} </Paper>
</div>
);

Expand Down
23 changes: 14 additions & 9 deletions src/js/menu/menu.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -180,22 +180,27 @@ var Menu = React.createClass({
},

// Main Style
_paperContainer: function() {
var styles = {
paddingTop: CustomVariables.spacing.desktopGutterMini,
paddingBottom: CustomVariables.spacing.desktopGutterMini,
_main: function() {
return this.mergeAndPrefix({
backgroundColor: CustomVariables.menuBackgroundColor,
transition: Transitions.easeOut(null, 'height'),
};
});
},

_innerPaper: function() {
var style = {
paddingTop: CustomVariables.spacing.desktopGutterMini,
paddingBottom: CustomVariables.spacing.desktopGutterMini,
}

if (this.props.hideable) {
this.mergeStyles(styles, {
this.mergeStyles(style, {
overflow: 'hidden',
padding: 0,
});
}

return this.mergeAndPrefix(styles);
return style;
},

_subheader: function() {
Expand All @@ -206,11 +211,11 @@ var Menu = React.createClass({
},

render: function() {
var styles = this._paperContainer();
var styles = this._main();
if (this.props.hideable) styles = this.mergeStyles(styles, this._hideable());

return (
<Paper ref="paperContainer" zDepth={this.props.zDepth} style={styles}>
<Paper ref="paperContainer" zDepth={this.props.zDepth} style={styles} innerStyle={this._innerPaper()}>
{this._getChildren()}
</Paper>
);
Expand Down
86 changes: 68 additions & 18 deletions src/js/paper.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
var React = require('react');
var Classable = require('./mixins/classable');
var StylePropable = require('./mixins/style-propable');

var Paper = React.createClass({

mixins: [Classable],
mixins: [StylePropable],

propTypes: {
circle: React.PropTypes.bool,
className: React.PropTypes.string,
innerClassName: React.PropTypes.string,
innerStyle: React.PropTypes.object,
rounded: React.PropTypes.bool,
zDepth: React.PropTypes.oneOf([0,1,2,3,4,5])
zDepth: React.PropTypes.oneOf([0,1,2,3,4,5]),
},

getDefaultProps: function() {
Expand All @@ -21,29 +22,47 @@ var Paper = React.createClass({
};
},

/** Styles */
_main: function() {
return this.mergeAndPrefix({
boxShadow: this.getZDepthShadows(this.props.zDepth).boxShadow,
borderRadius: this.props.circle ? '50%' :
this.props.rounded ? '2px' :
'0px',
});
},

_inner: function() {
var style = {
width: '100%',
height: '100%',
boxShadow: this.getZDepthShadows(this.props.zDepth).bottomBoxShadow,
borderRadius: this.props.circle ? '50%' :
this.props.rounded ? '2px' :
'0px',
};

if (this.props.innerStyle) {
style = this.mergeAndPrefix(style, this.props.innerStyle);
}

return style;
},

render: function() {
var {
className,
circle,
innerClassName,
style,
innerStyle,
circle,
rounded,
zDepth,
innerStyle,
...other } = this.props,
classes = this.getClasses(
'mui-paper ' +
'mui-z-depth-' + this.props.zDepth, {
'mui-rounded': this.props.rounded,
'mui-circle': this.props.circle
}),
insideClasses =
this.props.innerClassName + ' ' +
'mui-paper-container ' +
'mui-z-depth-bottom';
...other } = this.props;

return (
<div {...other} className={classes}>
<div ref="innerContainer" className={insideClasses} style={innerStyle || {}}>
<div {...other} className={this.props.className} style={this._main()}>
<div ref="innerContainer" className={this.props.innerClassName} style={this._inner()}>
{this.props.children}
</div>
</div>
Expand All @@ -52,6 +71,37 @@ var Paper = React.createClass({

getInnerContainer: function() {
return this.refs.innerContainer;
},

getZDepthShadows: function(zDepth) {
var shadows = [
{
boxShadow: '',
bottomBoxShadow: '',
},
{
boxShadow: '0 1px 4px rgba(0, 0, 0, 0.24)',
bottomBoxShadow: '0 1px 6px rgba(0, 0, 0, 0.12)',
},
{
boxShadow: '0 3px 10px rgba(0, 0, 0, 0.23)',
bottomBoxShadow: '0 3px 10px rgba(0, 0, 0, 0.16)',
},
{
boxShadow: '0 6px 10px rgba(0, 0, 0, 0.23)',
bottomBoxShadow: '0 10px 30px rgba(0, 0, 0, 0.19)',
},
{
boxShadow: '0 10px 18px rgba(0, 0, 0, 0.22)',
bottomBoxShadow: '0 14px 45px rgba(0, 0, 0, 0.25)',
},
{
boxShadow: '0 15px 20px rgba(0, 0, 0, 0.22)',
bottomBoxShadow: '0 19px 60px rgba(0, 0, 0, 0.30)',
},
];

return shadows[zDepth];
}

});
Expand Down
2 changes: 1 addition & 1 deletion src/js/toggle.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ var Toggle = React.createClass({
var toggleElement = (
<div>
<div style={trackStyles} />
<Paper style={thumbStyles} zDepth={1}/>
<Paper style={thumbStyles} circle={true} zDepth={1} />
</div>
);

Expand Down
3 changes: 0 additions & 3 deletions src/less/components.less
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,2 @@
// Core CSS
@import "core/core.less";

// Components
@import "components/components.less";
1 change: 0 additions & 1 deletion src/less/components/components.less
View file

This file was deleted.

59 changes: 0 additions & 59 deletions src/less/components/paper.less
View file

This file was deleted.

0 comments on commit aa3be12

Please sign in to comment.