Skip to content
This repository has been archived by the owner on Dec 23, 2022. It is now read-only.

Commit

Permalink
Fix style to work with material-ui@1.0.0-beta.30 and update dependency.
Browse files Browse the repository at this point in the history 
Fixes #176
  • Loading branch information
@leMaik
leMaik committed Jan 23, 2018
1 parent 28445ec commit 63841b7
Show file tree
Hide file tree
Showing 3 changed files with 126 additions and 95 deletions.
36 changes: 32 additions & 4 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,14 +52,14 @@
"enzyme-to-json": "^3.2.2",
"gh-pages": "^1.0.0",
"jest": "^21.2.1",
"material-ui": "^1.0.0-beta.24",
"material-ui": "^1.0.0-beta.30",
"react": "^16.1.1",
"react-dom": "^16.1.1",
"react-test-renderer": "^16.2.0",
"standard": "^10.0.2"
},
"peerDependencies": {
"material-ui": "^1.0.0-beta.20",
"material-ui": "^1.0.0-beta.30",
"react": "^16.0.0",
"react-dom": "^16.0.0"
},
Expand Down
181 changes: 92 additions & 89 deletions src/ChipInput.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,100 +12,103 @@ import FormControl from 'material-ui/Form/FormControl'
import FormHelperText from 'material-ui/Form/FormHelperText'
import cx from 'classnames'

const styles = (theme) => ({
root: {},
inputRoot: {
display: 'inline-block',
marginTop: 0
},
input: {
display: 'inline-block',
appearance: 'none', // Remove border in Safari, doesn't seem to break anything in other browsers
WebkitTapHighlightColor: 'rgba(0,0,0,0)', // Remove mobile color flashing (deprecated style).
float: 'left'
},
chipContainer: {
cursor: 'text',
marginBottom: -2,
minHeight: 40,
'&$labeled': {
marginTop: 18
}
},
labeled: {},
label: {
top: 4
},
labelShrink: {
top: 0
},
helperText: {
marginBottom: -20
},
inkbar: {
'&:after': {
backgroundColor: theme.palette.primary[theme.palette.type === 'light' ? 'A700' : 'A200'],
left: 0,
bottom: 0,
// Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
content: '""',
height: 2,
position: 'absolute',
right: 0,
transform: 'scaleX(0)',
transition: theme.transitions.create('transform', {
duration: theme.transitions.duration.shorter,
easing: theme.transitions.easing.easeOut
}),
pointerEvents: 'none' // Transparent to the hover style.
const styles = (theme) => {
const light = theme.palette.type === 'light'
const bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)'

return {
root: {},
inputRoot: {
display: 'inline-block',
marginTop: 0
},
'&$focused:after': {
transform: 'scaleX(1)'
}
},
focused: {},
disabled: {},
underline: {
'&:before': {
backgroundColor: theme.palette.input.bottomLine,
left: 0,
bottom: 0,
// Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
content: '""',
height: 1,
position: 'absolute',
right: 0,
transition: theme.transitions.create('background-color', {
duration: theme.transitions.duration.shorter,
easing: theme.transitions.easing.ease
}),
pointerEvents: 'none' // Transparent to the hover style.
input: {
display: 'inline-block',
appearance: 'none', // Remove border in Safari, doesn't seem to break anything in other browsers
WebkitTapHighlightColor: 'rgba(0,0,0,0)', // Remove mobile color flashing (deprecated style).
float: 'left'
},
'&:hover:not($disabled):before': {
backgroundColor: theme.palette.text.primary,
height: 2
chipContainer: {
cursor: 'text',
marginBottom: -2,
minHeight: 40,
'&$labeled': {
marginTop: 18
}
},
'&$disabled:before': {
background: 'transparent',
backgroundImage: `linear-gradient(to right, ${
theme.palette.input.bottomLine
} 33%, transparent 0%)`,
backgroundPosition: 'left top',
backgroundRepeat: 'repeat-x',
backgroundSize: '5px 1px'
}
},
error: {
'&:after': {
backgroundColor: theme.palette.error.A400,
transform: 'scaleX(1)' // error is always underlined in red
labeled: {},
label: {
top: 4
},
labelShrink: {
top: 0
},
helperText: {
marginBottom: -20
},
inkbar: {
'&:after': {
backgroundColor: theme.palette.primary[light ? 'dark' : 'light'],
left: 0,
bottom: 0,
// Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
content: '""',
height: 2,
position: 'absolute',
right: 0,
transform: 'scaleX(0)',
transition: theme.transitions.create('transform', {
duration: theme.transitions.duration.shorter,
easing: theme.transitions.easing.easeOut
}),
pointerEvents: 'none' // Transparent to the hover style.
},
'&$focused:after': {
transform: 'scaleX(1)'
}
},
focused: {},
disabled: {},
underline: {
'&:before': {
backgroundColor: bottomLineColor,
left: 0,
bottom: 0,
// Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
content: '""',
height: 1,
position: 'absolute',
right: 0,
transition: theme.transitions.create('background-color', {
duration: theme.transitions.duration.shorter,
easing: theme.transitions.easing.ease
}),
pointerEvents: 'none' // Transparent to the hover style.
},
'&:hover:not($disabled):before': {
backgroundColor: theme.palette.text.primary,
height: 2
},
'&$disabled:before': {
background: 'transparent',
backgroundImage: `linear-gradient(to right, ${bottomLineColor} 33%, transparent 0%)`,
backgroundPosition: 'left top',
backgroundRepeat: 'repeat-x',
backgroundSize: '5px 1px'
}
},
error: {
'&:after': {
backgroundColor: theme.palette.error.A400,
transform: 'scaleX(1)' // error is always underlined in red
}
},
chip: {
margin: '0 8px 8px 0',
float: 'left'
}
},
chip: {
margin: '0 8px 8px 0',
float: 'left'
}
})
}

const defaultChipRenderer = ({ value, text, isFocused, isDisabled, handleClick, handleDelete, className }, key) => (
<Chip
Expand Down

0 comments on commit 63841b7

Please sign in to comment.