Skip to content

Commit

Permalink
[core] Remove usage of theme.spacing.unit (#12022)
Browse files Browse the repository at this point in the history
oliviertassinari authored Jul 1, 2018
1 parent c377e61 commit c92d9f2
Showing 46 changed files with 150 additions and 157 deletions.
2 changes: 1 addition & 1 deletion .size-limit.js
Original file line number Diff line number Diff line change
@@ -27,7 +27,7 @@ module.exports = [
name: 'The size of all the modules of material-ui.',
webpack: true,
path: 'packages/material-ui/build/index.js',
limit: '94.9 KB',
limit: '94.6 KB',
},
{
name: 'The main bundle of the docs',
32 changes: 15 additions & 17 deletions packages/material-ui-docs/src/MarkdownElement/MarkdownElement.js
Original file line number Diff line number Diff line change
@@ -83,11 +83,11 @@ const styles = theme => ({
fontSize: 16,
color: theme.palette.text.primary,
'& .anchor-link': {
marginTop: -theme.spacing.unit * 12, // Offset for the anchor.
marginTop: -96, // Offset for the anchor.
position: 'absolute',
},
'& pre, & pre[class*="language-"]': {
margin: `${theme.spacing.unit * 3}px 0`,
margin: '24px 0',
padding: '12px 18px',
backgroundColor: theme.palette.background.paper,
borderRadius: theme.shape.borderRadius,
@@ -110,26 +110,26 @@ const styles = theme => ({
'& h1': {
...theme.typography.display2,
color: theme.palette.text.secondary,
margin: `${theme.spacing.unit * 4}px 0 ${theme.spacing.unit * 2}px`,
margin: '32px 0 16px',
},
'& .description': {
...theme.typography.headline,
margin: `0 0 ${theme.spacing.unit * 5}px`,
margin: '0 0 40px',
},
'& h2': {
...theme.typography.display1,
color: theme.palette.text.secondary,
margin: `${theme.spacing.unit * 4}px 0 ${theme.spacing.unit * 3}px`,
margin: '32px 0 24px',
},
'& h3': {
...theme.typography.headline,
color: theme.palette.text.secondary,
margin: `${theme.spacing.unit * 4}px 0 ${theme.spacing.unit * 3}px`,
margin: '32px 0 24px',
},
'& h4': {
...theme.typography.title,
color: theme.palette.text.secondary,
margin: `${theme.spacing.unit * 3}px 0 ${theme.spacing.unit * 2}px`,
margin: '24px 0 16px',
},
'& p, & ul, & ol': {
lineHeight: 1.6,
@@ -149,7 +149,7 @@ const styles = theme => ({
'&:hover .anchor-link-style': {
display: 'inline-block',
opacity: 1,
padding: `0 ${theme.spacing.unit}px`,
padding: '0 8px',
color: theme.palette.text.hint,
'&:hover': {
color: theme.palette.text.secondary,
@@ -199,16 +199,14 @@ const styles = theme => ({
},
'& td': {
borderBottom: `1px solid ${theme.palette.divider}`,
padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px ${theme.spacing.unit}px ${
theme.spacing.unit
}px`,
padding: '8px 16px 8px 8px',
textAlign: 'left',
},
'& td:last-child': {
paddingRight: theme.spacing.unit * 3,
paddingRight: 24,
},
'& td compact': {
paddingRight: theme.spacing.unit * 3,
paddingRight: 24,
},
'& td code': {
fontSize: 13,
@@ -218,11 +216,11 @@ const styles = theme => ({
whiteSpace: 'pre',
borderBottom: `1px solid ${theme.palette.divider}`,
fontWeight: theme.typography.fontWeightMedium,
padding: `0 ${theme.spacing.unit * 2}px 0 ${theme.spacing.unit}px`,
padding: '0 16px 0 8px',
textAlign: 'left',
},
'& th:last-child': {
paddingRight: theme.spacing.unit * 3,
paddingRight: 24,
},
'& tr': {
height: 48,
@@ -236,8 +234,8 @@ const styles = theme => ({
'& blockquote': {
borderLeft: `5px solid ${theme.palette.text.hint}`,
backgroundColor: theme.palette.background.paper,
padding: `${theme.spacing.unit / 2}px ${theme.spacing.unit * 3}px`,
margin: `${theme.spacing.unit * 3}px 0`,
padding: '4px 24px',
margin: '24px 0',
},
'& a, & a code': {
// Style taken from the Link component
6 changes: 3 additions & 3 deletions packages/material-ui-lab/src/SpeedDial/SpeedDial.js
Original file line number Diff line number Diff line change
@@ -10,7 +10,7 @@ import { duration } from '@material-ui/core/styles/transitions';
import Button from '@material-ui/core/Button';
import { isMuiElement } from '@material-ui/core/utils/reactHelpers';

const styles = theme => ({
const styles = {
root: {
zIndex: 1050,
display: 'flex',
@@ -19,12 +19,12 @@ const styles = theme => ({
actions: {
display: 'flex',
flexDirection: 'column-reverse', // Display the first action at the bottom.
marginBottom: theme.spacing.unit * 2,
marginBottom: 16,
},
actionsClosed: {
transition: 'top 0s linear 0.2s',
},
});
};

class SpeedDial extends React.Component {
state = {
Original file line number Diff line number Diff line change
@@ -10,7 +10,7 @@ const styles = theme => ({
position: 'relative',
},
button: {
margin: theme.spacing.unit,
margin: 8,
color: theme.palette.text.secondary,
transition: `${theme.transitions.create('transform', {
duration: theme.transitions.duration.shorter,
4 changes: 2 additions & 2 deletions packages/material-ui/src/Avatar/Avatar.js
Original file line number Diff line number Diff line change
@@ -10,8 +10,8 @@ export const styles = theme => ({
alignItems: 'center',
justifyContent: 'center',
flexShrink: 0,
width: theme.spacing.unit * 5,
height: theme.spacing.unit * 5,
width: 40,
height: 40,
fontFamily: theme.typography.fontFamily,
fontSize: theme.typography.pxToRem(20),
borderRadius: '50%',
Original file line number Diff line number Diff line change
@@ -12,7 +12,7 @@ export const styles = theme => ({
transition: theme.transitions.create(['color', 'padding-top'], {
duration: theme.transitions.duration.short,
}),
paddingTop: theme.spacing.unit,
paddingTop: 8,
paddingBottom: 10,
paddingLeft: 12,
paddingRight: 12,
@@ -21,7 +21,7 @@ export const styles = theme => ({
color: theme.palette.text.secondary,
flex: '1',
'&$iconOnly': {
paddingTop: theme.spacing.unit * 2,
paddingTop: 16,
},
'&$selected': {
paddingTop: 6,
6 changes: 3 additions & 3 deletions packages/material-ui/src/CardActions/CardActions.js
Original file line number Diff line number Diff line change
@@ -10,13 +10,13 @@ export const styles = theme => ({
display: 'flex',
alignItems: 'center',
boxSizing: 'border-box',
padding: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`,
padding: '8px 4px',
[theme.breakpoints.up('sm')]: {
padding: `${theme.spacing.unit}px ${theme.spacing.unit * 1.5}px`,
padding: '8px 12px',
},
},
action: {
margin: `0 ${theme.spacing.unit / 2}px`,
margin: '0 4px',
},
});

6 changes: 3 additions & 3 deletions packages/material-ui/src/CardContent/CardContent.js
Original file line number Diff line number Diff line change
@@ -5,10 +5,10 @@ import withStyles from '../styles/withStyles';

export const styles = theme => ({
root: theme.mixins.gutters({
paddingTop: theme.spacing.unit * 2,
paddingBottom: theme.spacing.unit * 2,
paddingTop: 16,
paddingBottom: 16,
'&:last-child': {
paddingBottom: theme.spacing.unit * 3,
paddingBottom: 24,
},
}),
});
10 changes: 5 additions & 5 deletions packages/material-ui/src/CardHeader/CardHeader.js
Original file line number Diff line number Diff line change
@@ -8,18 +8,18 @@ export const styles = theme => ({
root: theme.mixins.gutters({
display: 'flex',
alignItems: 'center',
paddingTop: theme.spacing.unit * 2,
paddingBottom: theme.spacing.unit * 2,
paddingTop: 16,
paddingBottom: 16,
}),
avatar: {
flex: '0 0 auto',
marginRight: theme.spacing.unit * 2,
marginRight: 16,
},
action: {
flex: '0 0 auto',
alignSelf: 'flex-start',
marginTop: theme.spacing.unit * -1,
marginRight: theme.spacing.unit * -2,
marginTop: -8,
marginRight: -16,
},
content: {
flex: '1 1 auto',
2 changes: 1 addition & 1 deletion packages/material-ui/src/Dialog/Dialog.js
Original file line number Diff line number Diff line change
@@ -32,7 +32,7 @@ export const styles = theme => ({
},
paperScrollPaper: {
flex: '0 1 auto',
maxHeight: `calc(100% - ${48 * 2}px)`,
maxHeight: 'calc(100% - 96px)',
},
paperScrollBody: {
margin: '48px auto',
8 changes: 4 additions & 4 deletions packages/material-ui/src/DialogActions/DialogActions.js
Original file line number Diff line number Diff line change
@@ -5,19 +5,19 @@ import withStyles from '../styles/withStyles';
import { cloneChildrenWithClassName } from '../utils/reactHelpers';
import '../Button'; // So we don't have any override priority issue.

export const styles = theme => ({
export const styles = {
root: {
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
flex: '0 0 auto',
margin: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`,
margin: '8px 4px',
},
action: {
margin: `0 ${theme.spacing.unit / 2}px`,
margin: '0 4px',
minWidth: 64,
},
});
};

function DialogActions(props) {
const { disableActionSpacing, children, classes, className, ...other } = props;
21 changes: 9 additions & 12 deletions packages/material-ui/src/DialogContent/DialogContent.js
Original file line number Diff line number Diff line change
@@ -3,19 +3,16 @@ import PropTypes from 'prop-types';
import classNames from 'classnames';
import withStyles from '../styles/withStyles';

export const styles = theme => {
const spacing = theme.spacing.unit * 3;
return {
root: {
flex: '1 1 auto',
overflowY: 'auto',
WebkitOverflowScrolling: 'touch', // Add iOS momentum scrolling.
padding: `0 ${spacing}px ${spacing}px ${spacing}px`,
'&:first-child': {
paddingTop: spacing,
},
export const styles = {
root: {
flex: '1 1 auto',
overflowY: 'auto',
WebkitOverflowScrolling: 'touch', // Add iOS momentum scrolling.
padding: '0 24px 24px',
'&:first-child': {
paddingTop: 24,
},
};
},
};

function DialogContent(props) {
7 changes: 3 additions & 4 deletions packages/material-ui/src/DialogTitle/DialogTitle.js
Original file line number Diff line number Diff line change
@@ -4,14 +4,13 @@ import classNames from 'classnames';
import withStyles from '../styles/withStyles';
import Typography from '../Typography';

export const styles = theme => ({
export const styles = {
root: {
margin: 0,
padding: `${theme.spacing.unit * 3}px ${theme.spacing.unit * 3}px \
20px ${theme.spacing.unit * 3}px`,
padding: '24px 24px 20px',
flex: '0 0 auto',
},
});
};

function DialogTitle(props) {
const { children, classes, className, disableTypography, ...other } = props;
2 changes: 1 addition & 1 deletion packages/material-ui/src/Divider/Divider.js
Original file line number Diff line number Diff line change
@@ -19,7 +19,7 @@ export const styles = theme => ({
width: '100%',
},
inset: {
marginLeft: theme.spacing.unit * 9,
marginLeft: 72,
},
light: {
backgroundColor: fade(theme.palette.divider, 0.08),
2 changes: 1 addition & 1 deletion packages/material-ui/src/ExpansionPanel/ExpansionPanel.js
Original file line number Diff line number Diff line change
@@ -60,7 +60,7 @@ export const styles = theme => {
},
},
expanded: {
margin: `${theme.spacing.unit * 2}px 0`,
margin: '16px 0',
'&:first-child': {
marginTop: 0,
},
Original file line number Diff line number Diff line change
@@ -5,17 +5,17 @@ import withStyles from '../styles/withStyles';
import { cloneChildrenWithClassName } from '../utils/reactHelpers';
import '../Button'; // So we don't have any override priority issue.

export const styles = theme => ({
export const styles = {
root: {
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
padding: `${theme.spacing.unit * 2}px ${theme.spacing.unit}px`,
padding: '16px 8px',
},
action: {
marginLeft: theme.spacing.unit,
marginLeft: 8,
},
});
};

function ExpansionPanelActions(props) {
const { children, classes, className, ...other } = props;
Original file line number Diff line number Diff line change
@@ -3,12 +3,12 @@ import PropTypes from 'prop-types';
import classNames from 'classnames';
import withStyles from '../styles/withStyles';

export const styles = theme => ({
export const styles = {
root: {
display: 'flex',
padding: `${theme.spacing.unit}px ${theme.spacing.unit * 3}px ${theme.spacing.unit * 3}px`,
padding: '8px 24px 24px',
},
});
};

function ExpansionPanelDetails(props) {
const { classes, children, className, ...other } = props;
Original file line number Diff line number Diff line change
@@ -14,9 +14,9 @@ export const styles = theme => {
return {
root: {
display: 'flex',
minHeight: theme.spacing.unit * 6,
minHeight: 8 * 6,
transition: theme.transitions.create(['min-height', 'background-color'], transition),
padding: `0 ${theme.spacing.unit * 3}px 0 ${theme.spacing.unit * 3}px`,
padding: '0 24px 0 24px',
'&:hover:not($disabled)': {
cursor: 'pointer',
},
@@ -39,7 +39,7 @@ export const styles = theme => {
transition: theme.transitions.create(['margin'], transition),
margin: '12px 0',
'& > :last-child': {
paddingRight: theme.spacing.unit * 4,
paddingRight: 32,
},
'&$expanded': {
margin: '20px 0',
@@ -48,7 +48,7 @@ export const styles = theme => {
expandIcon: {
position: 'absolute',
top: '50%',
right: theme.spacing.unit,
right: 8,
transform: 'translateY(-50%) rotate(0deg)',
transition: theme.transitions.create('transform', transition),
'&:hover': {
12 changes: 6 additions & 6 deletions packages/material-ui/src/FormControl/FormControl.js
Original file line number Diff line number Diff line change
@@ -6,7 +6,7 @@ import { isFilled, isAdornedStart } from '../Input/Input';
import { capitalize } from '../utils/helpers';
import { isMuiElement } from '../utils/reactHelpers';

export const styles = theme => ({
export const styles = {
root: {
display: 'inline-flex',
flexDirection: 'column',
@@ -18,17 +18,17 @@ export const styles = theme => ({
border: 0,
},
marginNormal: {
marginTop: theme.spacing.unit * 2,
marginBottom: theme.spacing.unit,
marginTop: 16,
marginBottom: 8,
},
marginDense: {
marginTop: theme.spacing.unit,
marginBottom: theme.spacing.unit / 2,
marginTop: 8,
marginBottom: 4,
},
fullWidth: {
width: '100%',
},
});
};

/**
* Provides context such as filled/focused/error/required for form inputs.
Original file line number Diff line number Diff line change
@@ -16,7 +16,7 @@ export const styles = theme => ({
// Remove grey highlight
WebkitTapHighlightColor: 'transparent',
marginLeft: -14,
marginRight: theme.spacing.unit * 2, // used for row presentation of radio/checkbox
marginRight: 16, // used for row presentation of radio/checkbox
'&$disabled': {
cursor: 'default',
},
4 changes: 2 additions & 2 deletions packages/material-ui/src/FormHelperText/FormHelperText.js
Original file line number Diff line number Diff line change
@@ -9,7 +9,7 @@ export const styles = theme => ({
fontFamily: theme.typography.fontFamily,
fontSize: theme.typography.pxToRem(12),
textAlign: 'left',
marginTop: theme.spacing.unit,
marginTop: 8,
lineHeight: '1em',
minHeight: '1em',
margin: 0,
@@ -23,7 +23,7 @@ export const styles = theme => ({
error: {},
disabled: {},
marginDense: {
marginTop: theme.spacing.unit / 2,
marginTop: 4,
},
});

8 changes: 4 additions & 4 deletions packages/material-ui/src/Input/Input.js
Original file line number Diff line number Diff line change
@@ -71,7 +71,7 @@ export const styles = theme => {
},
formControl: {
'label + &': {
marginTop: theme.spacing.unit * 2,
marginTop: 16,
},
},
focused: {},
@@ -121,15 +121,15 @@ export const styles = theme => {
},
error: {},
multiline: {
padding: `${theme.spacing.unit - 2}px 0 ${theme.spacing.unit - 1}px`,
padding: `${8 - 2}px 0 ${8 - 1}px`,
},
fullWidth: {
width: '100%',
},
input: {
font: 'inherit',
color: 'currentColor',
padding: `${theme.spacing.unit - 2}px 0 ${theme.spacing.unit - 1}px`,
padding: `${8 - 2}px 0 ${8 - 1}px`,
border: 0,
boxSizing: 'content-box',
verticalAlign: 'middle',
@@ -172,7 +172,7 @@ export const styles = theme => {
},
},
inputMarginDense: {
paddingTop: theme.spacing.unit / 2 - 1,
paddingTop: 4 - 1,
},
inputMultiline: {
resize: 'none',
8 changes: 4 additions & 4 deletions packages/material-ui/src/InputAdornment/InputAdornment.js
Original file line number Diff line number Diff line change
@@ -4,19 +4,19 @@ import classNames from 'classnames';
import Typography from '../Typography';
import withStyles from '../styles/withStyles';

export const styles = theme => ({
export const styles = {
root: {
display: 'flex',
maxHeight: '2em',
alignItems: 'center',
},
positionStart: {
marginRight: theme.spacing.unit,
marginRight: 8,
},
positionEnd: {
marginLeft: theme.spacing.unit,
marginLeft: 8,
},
});
};

function InputAdornment(props) {
const {
4 changes: 2 additions & 2 deletions packages/material-ui/src/InputLabel/InputLabel.js
Original file line number Diff line number Diff line change
@@ -15,11 +15,11 @@ export const styles = theme => ({
left: 0,
top: 0,
// slight alteration to spec spacing to match visual spec result
transform: `translate(0, ${theme.spacing.unit * 3}px) scale(1)`,
transform: 'translate(0, 24px) scale(1)',
},
marginDense: {
// Compensation for the `Input.inputDense` style.
transform: `translate(0, ${theme.spacing.unit * 2.5 + 1}px) scale(1)`,
transform: 'translate(0, 21px) scale(1)',
},
shrink: {
transform: 'translate(0, 1.5px) scale(0.75)',
12 changes: 6 additions & 6 deletions packages/material-ui/src/List/List.js
Original file line number Diff line number Diff line change
@@ -3,25 +3,25 @@ import PropTypes from 'prop-types';
import classNames from 'classnames';
import withStyles from '../styles/withStyles';

export const styles = theme => ({
export const styles = {
root: {
listStyle: 'none',
margin: 0,
padding: 0,
position: 'relative',
},
padding: {
paddingTop: theme.spacing.unit,
paddingBottom: theme.spacing.unit,
paddingTop: 8,
paddingBottom: 8,
},
dense: {
paddingTop: theme.spacing.unit / 2,
paddingBottom: theme.spacing.unit / 2,
paddingTop: 4,
paddingBottom: 4,
},
subheader: {
paddingTop: 0,
},
});
};

class List extends React.Component {
getChildContext() {
6 changes: 3 additions & 3 deletions packages/material-ui/src/ListItem/ListItem.js
Original file line number Diff line number Diff line change
@@ -27,8 +27,8 @@ export const styles = theme => ({
paddingBottom: 12,
},
dense: {
paddingTop: theme.spacing.unit,
paddingBottom: theme.spacing.unit,
paddingTop: 8,
paddingBottom: 8,
},
disabled: {
opacity: 0.5,
@@ -54,7 +54,7 @@ export const styles = theme => ({
secondaryAction: {
// Add some space to avoid collision as `ListItemSecondaryAction`
// is absolutely positionned.
paddingRight: theme.spacing.unit * 4,
paddingRight: 32,
},
});

2 changes: 1 addition & 1 deletion packages/material-ui/src/ListItemIcon/ListItemIcon.js
Original file line number Diff line number Diff line change
@@ -5,7 +5,7 @@ import withStyles from '../styles/withStyles';

export const styles = theme => ({
root: {
marginRight: theme.spacing.unit * 2,
marginRight: 16,
color: theme.palette.action.active,
flexShrink: 0,
},
4 changes: 2 additions & 2 deletions packages/material-ui/src/ListItemText/ListItemText.js
Original file line number Diff line number Diff line change
@@ -8,14 +8,14 @@ export const styles = theme => ({
root: {
flex: '1 1 auto',
minWidth: 0,
padding: `0 ${theme.spacing.unit * 2}px`,
padding: '0 16px',
'&:first-child': {
paddingLeft: 0,
},
},
inset: {
'&:first-child': {
paddingLeft: theme.spacing.unit * 7,
paddingLeft: 56,
},
},
dense: {
2 changes: 1 addition & 1 deletion packages/material-ui/src/ListSubheader/ListSubheader.js
Original file line number Diff line number Diff line change
@@ -21,7 +21,7 @@ export const styles = theme => ({
color: 'inherit',
},
inset: {
paddingLeft: theme.spacing.unit * 9,
paddingLeft: 72,
},
sticky: {
position: 'sticky',
6 changes: 3 additions & 3 deletions packages/material-ui/src/MenuItem/MenuItem.js
Original file line number Diff line number Diff line change
@@ -9,14 +9,14 @@ import ListItem from '../ListItem';
export const styles = theme => ({
root: {
...theme.typography.subheading,
height: theme.spacing.unit * 3,
height: 24,
boxSizing: 'content-box',
width: 'auto',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
paddingLeft: theme.spacing.unit * 2,
paddingRight: theme.spacing.unit * 2,
paddingLeft: 16,
paddingRight: 16,
'&$selected': {
backgroundColor: theme.palette.action.selected,
},
6 changes: 3 additions & 3 deletions packages/material-ui/src/MobileStepper/MobileStepper.js
Original file line number Diff line number Diff line change
@@ -15,7 +15,7 @@ export const styles = theme => ({
justifyContent: 'space-between',
alignItems: 'center',
background: theme.palette.background.default,
padding: theme.spacing.unit,
padding: 8,
},
positionBottom: {
position: 'fixed',
@@ -39,8 +39,8 @@ export const styles = theme => ({
dot: {
backgroundColor: theme.palette.action.disabled,
borderRadius: '50%',
width: theme.spacing.unit,
height: theme.spacing.unit,
width: 8,
height: 8,
margin: '0 2px',
},
dotActive: {
6 changes: 3 additions & 3 deletions packages/material-ui/src/NativeSelect/NativeSelect.js
Original file line number Diff line number Diff line change
@@ -18,9 +18,9 @@ export const styles = theme => ({
// When interacting quickly, the text can end up selected.
// Native select can't be selected either.
userSelect: 'none',
paddingRight: theme.spacing.unit * 4,
width: `calc(100% - ${theme.spacing.unit * 4}px)`,
minWidth: theme.spacing.unit * 2, // So it doesn't collapse.
paddingRight: 32,
width: 'calc(100% - 32px)',
minWidth: 16, // So it doesn't collapse.
cursor: 'pointer',
'&:focus': {
// Show that it's not an text input
2 changes: 1 addition & 1 deletion packages/material-ui/src/Snackbar/Snackbar.js
Original file line number Diff line number Diff line change
@@ -10,7 +10,7 @@ import Slide from '../Slide';
import SnackbarContent from '../SnackbarContent';

export const styles = theme => {
const gutter = theme.spacing.unit * 3;
const gutter = 24;
const top = { top: 0 };
const bottom = { bottom: 0 };
const right = { justifyContent: 'flex-end' };
8 changes: 4 additions & 4 deletions packages/material-ui/src/SnackbarContent/SnackbarContent.js
Original file line number Diff line number Diff line change
@@ -20,7 +20,7 @@ export const styles = theme => {
display: 'flex',
alignItems: 'center',
flexWrap: 'wrap',
padding: `6px ${theme.spacing.unit * 3}px`,
padding: '6px 24px',
[theme.breakpoints.up('md')]: {
minWidth: 288,
maxWidth: 568,
@@ -31,14 +31,14 @@ export const styles = theme => {
},
},
message: {
padding: `${theme.spacing.unit}px 0`,
padding: '8px 0',
},
action: {
display: 'flex',
alignItems: 'center',
marginLeft: 'auto',
paddingLeft: theme.spacing.unit * 3,
marginRight: -theme.spacing.unit,
paddingLeft: 24,
marginRight: -8,
},
};
};
8 changes: 4 additions & 4 deletions packages/material-ui/src/Step/Step.js
Original file line number Diff line number Diff line change
@@ -4,11 +4,11 @@ import classNames from 'classnames';
import warning from 'warning';
import withStyles from '../styles/withStyles';

export const styles = theme => ({
export const styles = {
root: {},
horizontal: {
paddingLeft: theme.spacing.unit,
paddingRight: theme.spacing.unit,
paddingLeft: 8,
paddingRight: 8,
'&:first-child': {
paddingLeft: 0,
},
@@ -21,7 +21,7 @@ export const styles = theme => ({
flex: 1,
position: 'relative',
},
});
};

function Step(props) {
const {
8 changes: 4 additions & 4 deletions packages/material-ui/src/StepButton/StepButton.js
Original file line number Diff line number Diff line change
@@ -8,11 +8,11 @@ import ButtonBase from '../ButtonBase';
import StepLabel from '../StepLabel';
import { isMuiElement } from '../utils/reactHelpers';

export const styles = theme => ({
export const styles = {
root: {
width: '100%',
padding: `${theme.spacing.unit * 3}px ${theme.spacing.unit * 2}px`,
margin: `${-theme.spacing.unit * 3}px ${-theme.spacing.unit * 2}px`,
padding: '24px 16px',
margin: '-24px -16px',
boxSizing: 'content-box',
},
vertical: {
@@ -21,7 +21,7 @@ export const styles = theme => ({
touchRipple: {
color: 'rgba(0, 0, 0, 0.3)',
},
});
};

function StepButton(props) {
const {
6 changes: 3 additions & 3 deletions packages/material-ui/src/StepConnector/StepConnector.js
Original file line number Diff line number Diff line change
@@ -10,11 +10,11 @@ export const styles = theme => ({
horizontal: {},
vertical: {
marginLeft: 12, // half icon
padding: `0 0 ${theme.spacing.unit}px`,
padding: '0 0 8px',
},
alternativeLabel: {
position: 'absolute',
top: theme.spacing.unit + 4,
top: 8 + 4,
left: 'calc(50% + 20px)',
right: 'calc(-50% + 20px)',
},
@@ -29,7 +29,7 @@ export const styles = theme => ({
lineVertical: {
borderLeftStyle: 'solid',
borderLeftWidth: 1,
minHeight: theme.spacing.unit * 3,
minHeight: 24,
},
});

6 changes: 3 additions & 3 deletions packages/material-ui/src/StepContent/StepContent.js
Original file line number Diff line number Diff line change
@@ -7,10 +7,10 @@ import withStyles from '../styles/withStyles';

export const styles = theme => ({
root: {
marginTop: theme.spacing.unit,
marginTop: 8,
marginLeft: 12, // half icon
paddingLeft: theme.spacing.unit + 12, // margin + half icon
paddingRight: theme.spacing.unit,
paddingLeft: 8 + 12, // margin + half icon
paddingRight: 8,
borderLeft: `1px solid ${
theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]
}`,
4 changes: 2 additions & 2 deletions packages/material-ui/src/StepLabel/StepLabel.js
Original file line number Diff line number Diff line change
@@ -35,14 +35,14 @@ export const styles = theme => ({
},
'&$alternativeLabel': {
textAlign: 'center',
marginTop: theme.spacing.unit * 2,
marginTop: 16,
},
'&$error': {
color: theme.palette.error.main,
},
},
iconContainer: {
paddingRight: theme.spacing.unit,
paddingRight: 8,
'&$alternativeLabel': {
paddingRight: 0,
},
6 changes: 3 additions & 3 deletions packages/material-ui/src/Stepper/Stepper.js
Original file line number Diff line number Diff line change
@@ -7,10 +7,10 @@ import withStyles from '../styles/withStyles';
import Paper from '../Paper';
import StepConnector from '../StepConnector';

export const styles = theme => ({
export const styles = {
root: {
display: 'flex',
padding: theme.spacing.unit * 3,
padding: 24,
},
horizontal: {
flexDirection: 'row',
@@ -22,7 +22,7 @@ export const styles = theme => ({
alternativeLabel: {
alignItems: 'flex-start',
},
});
};

function Stepper(props) {
const {
4 changes: 2 additions & 2 deletions packages/material-ui/src/Tab/Tab.js
Original file line number Diff line number Diff line change
@@ -72,8 +72,8 @@ export const styles = theme => ({
paddingLeft: 12,
paddingRight: 12,
[theme.breakpoints.up('md')]: {
paddingLeft: theme.spacing.unit * 3,
paddingRight: theme.spacing.unit * 3,
paddingLeft: 24,
paddingRight: 24,
},
},
label: {
7 changes: 3 additions & 4 deletions packages/material-ui/src/TableCell/TableCell.js
Original file line number Diff line number Diff line change
@@ -18,10 +18,9 @@ export const styles = theme => ({
: darken(fade(theme.palette.divider, 1), 0.8)
}`,
textAlign: 'left',
padding: `${theme.spacing.unit / 2}px ${theme.spacing.unit * 7}px ${theme.spacing.unit /
2}px ${theme.spacing.unit * 3}px`,
padding: '4px 56px 4px 24px',
'&:last-child': {
paddingRight: theme.spacing.unit * 3,
paddingRight: 24,
},
},
head: {
@@ -44,7 +43,7 @@ export const styles = theme => ({
flexDirection: 'row-reverse', // can be dynamically inherited at runtime by contents
},
paddingDense: {
paddingRight: theme.spacing.unit * 3,
paddingRight: 24,
},
paddingCheckbox: {
padding: '0 12px',
10 changes: 5 additions & 5 deletions packages/material-ui/src/TablePagination/TablePagination.js
Original file line number Diff line number Diff line change
@@ -36,21 +36,21 @@ export const styles = theme => ({
flexShrink: 0,
},
selectRoot: {
marginRight: theme.spacing.unit * 4,
marginLeft: theme.spacing.unit,
marginRight: 32,
marginLeft: 8,
color: theme.palette.text.secondary,
},
select: {
paddingLeft: theme.spacing.unit,
paddingRight: theme.spacing.unit * 2,
paddingLeft: 8,
paddingRight: 16,
},
selectIcon: {
top: 1,
},
actions: {
flexShrink: 0,
color: theme.palette.text.secondary,
marginLeft: theme.spacing.unit * 2.5,
marginLeft: 20,
},
});

6 changes: 3 additions & 3 deletions packages/material-ui/src/Tabs/TabScrollButton.js
Original file line number Diff line number Diff line change
@@ -6,12 +6,12 @@ import KeyboardArrowRight from '../internal/svg-icons/KeyboardArrowRight';
import withStyles from '../styles/withStyles';
import ButtonBase from '../ButtonBase';

export const styles = theme => ({
export const styles = {
root: {
color: 'inherit',
flex: `0 0 ${theme.spacing.unit * 7}px`,
flex: '0 0 56px',
},
});
};

/**
* @ignore - internal component.
12 changes: 6 additions & 6 deletions packages/material-ui/src/Tooltip/Tooltip.js
Original file line number Diff line number Diff line change
@@ -34,7 +34,7 @@ export const styles = theme => ({
easing: theme.transitions.easing.easeIn,
}),
minHeight: 0,
padding: `${theme.spacing.unit / 2}px ${theme.spacing.unit}px`,
padding: '4px 8px',
fontSize: theme.typography.pxToRem(10),
lineHeight: `${theme.typography.round(14 / 10)}em`,
'&$open': {
@@ -47,34 +47,34 @@ export const styles = theme => ({
},
},
touch: {
padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px`,
padding: '8px 16px',
fontSize: theme.typography.pxToRem(14),
lineHeight: `${theme.typography.round(16 / 14)}em`,
},
tooltipPlacementLeft: {
transformOrigin: 'right center',
margin: `0 ${theme.spacing.unit * 3}px`,
margin: '0 24px',
[theme.breakpoints.up('sm')]: {
margin: '0 14px',
},
},
tooltipPlacementRight: {
transformOrigin: 'left center',
margin: `0 ${theme.spacing.unit * 3}px`,
margin: '0 24px',
[theme.breakpoints.up('sm')]: {
margin: '0 14px',
},
},
tooltipPlacementTop: {
transformOrigin: 'center bottom',
margin: `${theme.spacing.unit * 3}px 0`,
margin: '24px 0',
[theme.breakpoints.up('sm')]: {
margin: '14px 0',
},
},
tooltipPlacementBottom: {
transformOrigin: 'center top',
margin: `${theme.spacing.unit * 3}px 0`,
margin: '24px 0',
[theme.breakpoints.up('sm')]: {
margin: '14px 0',
},
2 changes: 1 addition & 1 deletion packages/material-ui/src/Typography/Typography.js
Original file line number Diff line number Diff line change
@@ -41,7 +41,7 @@ export const styles = theme => ({
marginBottom: '0.35em',
},
paragraph: {
marginBottom: theme.spacing.unit * 2,
marginBottom: 16,
},
colorInherit: {
color: 'inherit',

0 comments on commit c92d9f2

Please sign in to comment.