-
-
Save oflenake/40f78e2663eb6ec27b78e658739f813c to your computer and use it in GitHub Desktop.
Styles for an Expense Tracker Web Tutorial
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { makeStyles } from '@material-ui/core/styles'; | |
| export default makeStyles((theme) => ({ | |
| desktop: { | |
| [theme.breakpoints.up('sm')]: { | |
| display: 'none', | |
| }, | |
| }, | |
| mobile: { | |
| [theme.breakpoints.down('sm')]: { | |
| display: 'none', | |
| }, | |
| }, | |
| main: { | |
| [theme.breakpoints.up('sm')]: { | |
| paddingBottom: '5%', | |
| }, | |
| }, | |
| last: { | |
| [theme.breakpoints.down('sm')]: { | |
| marginBottom: theme.spacing(3), | |
| paddingBottom: '200px', | |
| }, | |
| }, | |
| grid: { | |
| '& > *': { | |
| margin: theme.spacing(2), | |
| }, | |
| }, | |
| })); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { makeStyles } from '@material-ui/core/styles'; | |
| export default makeStyles(() => ({ | |
| income: { | |
| borderBottom: '10px solid rgba(0, 255, 0, 0.5)', | |
| }, | |
| expense: { | |
| borderBottom: '10px solid rgba(255, 0, 0, 0.5)', | |
| }, | |
| })); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { makeStyles } from '@material-ui/core/styles'; | |
| export default makeStyles(() => ({ | |
| radioGroup: { | |
| display: 'flex', | |
| justifyContent: 'center', | |
| marginBottom: '-10px', | |
| }, | |
| button: { | |
| marginTop: '20px', | |
| }, | |
| })); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { makeStyles } from '@material-ui/core/styles'; | |
| import { red, green } from '@material-ui/core/colors'; | |
| export default makeStyles((theme) => ({ | |
| avatarIncome: { | |
| color: '#fff', | |
| backgroundColor: green[500], | |
| }, | |
| avatarExpense: { | |
| color: theme.palette.getContrastText(red[500]), | |
| backgroundColor: red[500], | |
| }, | |
| list: { | |
| maxHeight: '150px', | |
| overflow: 'auto', | |
| }, | |
| })); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { makeStyles } from '@material-ui/core/styles'; | |
| export default makeStyles((theme) => ({ | |
| media: { | |
| height: 0, | |
| paddingTop: '56.25%', // 16:9 | |
| }, | |
| expand: { | |
| transform: 'rotate(0deg)', | |
| marginLeft: 'auto', | |
| transition: theme.transitions.create('transform', { | |
| duration: theme.transitions.duration.shortest, | |
| }), | |
| }, | |
| expandOpen: { | |
| transform: 'rotate(180deg)', | |
| }, | |
| cartContent: { | |
| paddingTop: 0, | |
| }, | |
| divider: { | |
| margin: '20px 0', | |
| }, | |
| })); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { makeStyles } from '@material-ui/core/styles'; | |
| export default makeStyles((theme) => ({ | |
| root: { | |
| width: '100%', | |
| '& > * + *': { | |
| marginTop: theme.spacing(2), | |
| }, | |
| }, | |
| })); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment