@material-ui/core/styles#fade JavaScript Examples
The following examples show how to use
@material-ui/core/styles#fade.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: PageRegion.js From covid-19 with MIT License | 6 votes |
|
useLegendStyles = makeStyles(theme => ({
serieses: {
border: `1px solid ${fade(theme.palette.action.active, 0.12)}`,
display: 'flex',
flexWrap: 'wrap',
maxWidth: '500px',
},
series: {
border: 'none',
color: fade(theme.palette.action.active, 0.12),
'&.selected': {
backgroundColor: 'initial',
color: fade(theme.palette.action.active, 0.8),
fontWeight: 'initial',
},
...baseToggleButtonStyles,
},
icon: {
paddingRight: '4px',
},
}))
Example #2
| Source File: AdvancedGraph.js From covid-19 with MIT License | 6 votes |
|
useLegendStyles = makeStyles(theme => ({
serieses: {
border: `1px solid ${fade(theme.palette.action.active, 0.12)}`,
display: 'flex',
flexWrap: 'wrap',
maxWidth: '500px',
},
series: {
border: 'none',
color: fade(theme.palette.action.active, 0.12),
'&.selected': {
backgroundColor: 'initial',
color: fade(theme.palette.action.active, 0.8),
fontWeight: 'initial',
},
...baseToggleButtonStyles,
},
icon: {
paddingRight: '4px',
},
}))
Example #3
| Source File: styles.js From social with The Unlicense | 6 votes |
|
useStyles = makeStyles((theme) => ({
...theme.custom,
like: {
transition: 'background-color, color, 0.15s ease',
'&:hover, &:focus': {
backgroundColor: fade(theme.palette.primary.main, 0.05),
color: theme.palette.primary.main,
},
},
}))
Example #4
| Source File: header.js From PopCritic with MIT License | 5 votes |
|
useStyles = makeStyles((theme) => ({
header: {
flexGrow: 1,
},
bar: {
background: 'rgb(30,30,30)'
},
title: {
flexGrow: 1,
display: 'none',
fontSize: 25,
fontWeight: "bolder",
[theme.breakpoints.up('sm')]: {
display: 'block',
},
},
login: {
margin: 20,
fontWeight: "bolder",
[theme.breakpoints.down('sm')]: {
padding: 5,
},
},
search: {
position: 'relative',
borderRadius: 20,
backgroundColor: fade(theme.palette.common.white, 0.15),
'&:hover': {
backgroundColor: fade(theme.palette.common.white, 0.25),
},
marginLeft: 0,
width: '100%',
[theme.breakpoints.up('sm')]: {
marginLeft: theme.spacing(1),
width: 'auto',
},
},
searchIcon: {
padding: theme.spacing(0, 2),
height: '100%',
position: 'absolute',
pointerEvents: 'none',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
inputRoot: {
color: 'inherit',
},
avatar: {
marginRight: 20,
border: "2px solid white"
},
user: {
margin: 25
},
gh: {
color: "white",
margin: 15,
[theme.breakpoints.down('sm')]: {
display: "none"
}
},
inputInput: {
padding: theme.spacing(1, 1, 1, 0),
paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
transition: theme.transitions.create('width'),
width: '100%',
[theme.breakpoints.up('sm')]: {
width: '20ch',
'&:focus': {
width: '30ch',
},
},
},
}))
Example #5
| Source File: PageRegion.js From covid-19 with MIT License | 5 votes |
|
useTitleStyles = makeStyles(theme => ({
noOverflow: {
overflow: 'hidden',
},
container: {
alignItems: 'flex-end',
display: 'flex',
flexWrap: 'wrap',
margin: '0 -12px',
width: 'calc(100% - 24px)',
},
tagSticky: {
backgroundColor: "#FFFFFF",
position: "sticky",
top: 0,
left: 0,
zIndex: "1",
},
tagContainer: {
alignItems: 'flex-end',
display: 'flex',
flexWrap: 'nowrap',
// margin: '0 -12px', // ??
width: 'calc(100% - 24px)',
},
node: {
margin: '0 12px 16px 12px',
},
text: {
padding: '0 8px',
marginLeft: '-8px',
marginRight: '8px',
},
parentLink: {
borderRadius: '8px',
color: fade(theme.palette.text.primary, 0.5),
textDecoration: 'none',
'&:hover': {
background: '#efefef',
},
},
numbers: {
color: theme.palette.text.secondary,
display: 'flex',
flexWrap: 'wrap',
[theme.breakpoints.down('xs')]: {
display: 'initial',
},
},
number: {
borderLeft: '2px solid',
borderTop: '2px solid',
flexGrow: 1,
padding: '4px 0 4px 4px',
'&:not(:last-child)': {
paddingRight: '4px',
},
},
}))
Example #6
| Source File: SearchInput.js From covid-19 with MIT License | 5 votes |
|
useStyles = makeStyles(theme => ({
root: {
alignItems: 'center',
backgroundColor: fade(theme.palette.common.white, 0.15),
borderRadius: theme.shape.borderRadius,
display: 'flex',
height: '2em',
position: 'relative',
'&:hover': {
backgroundColor: fade(theme.palette.common.white, 0.25),
},
[theme.breakpoints.down('xs')]: {
marginLeft: 0,
marginBottom: theme.spacing(1),
},
},
searchIcon: {
height: '100%',
padding: theme.spacing(0, 1),
pointerEvents: 'none',
position: 'absolute',
},
input: {
color: 'inherit',
flexGrow: 1,
paddingLeft: `calc(1em + ${theme.spacing(2.5)}px)`,
position: 'relative',
[theme.breakpoints.down('xs')]: {
maxWidth: '20ch',
},
},
divider: {
backgroundColor: `rgba(255, 255, 255, 0.7)`,
height: '70%',
marginLeft: theme.spacing(1),
position: 'relative',
width: '1px',
},
iconButton: {
color: theme.palette.common.white,
height: '100%',
padding: theme.spacing(0, 1),
position: 'relative',
"&:hover": {
backgroundColor: "transparent",
},
},
resultsContainer: {
alignSelf: 'flex-start',
borderRadius: '4px',
color: theme.palette.text.primary,
marginTop: '4px',
maxHeight: '150px',
maxWidth: '100vh',
padding: '4px',
position: 'absolute',
top: '100%',
userSelect: 'none',
width: '350px',
zIndex: 9999,
'&.hide': {
display: 'none',
},
},
resultsList: {
'&:focus': {
outline: 'none',
},
},
result: {
background: '#fff',
lineHeight: RESULT_HEIGHT + 'px',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
},
}))
Example #7
| Source File: AppBar.js From covid-19 with MIT License | 5 votes |
|
useStyles = makeStyles(theme => ({
appBar: {
color: RELIEF_COLOR,
display: 'flex',
},
nameAndSearch: {
display: 'flex',
alignItems: 'center',
[theme.breakpoints.down('xs')]: {
display: 'initial',
},
},
appName: {
overflow: 'visible',
},
search: {
marginLeft: theme.spacing(4),
},
donations: {
background: RELIEF_COLOR,
borderRadius: '8px',
display: 'block',
marginLeft: '16px',
padding: '6px 8px',
textAlign: 'center',
'&:hover': {
color: theme.palette.primary.light,
filter: `drop-shadow(0 0 2px ${fade(RELIEF_COLOR, 0.95)})`,
textDecoration: 'none',
transform: 'translateY(-1px)',
},
},
expander: {
flexGrow: 1,
},
socialButtons: {
fontSize: '1.5625em',
lineHeight: '1em',
whiteSpace: 'nowrap',
'& > *': {
marginLeft: '4px',
verticalAlign: 'middle',
}
},
socialButton: {
'&:hover': {
filter: `drop-shadow(0 0 2px ${fade(RELIEF_COLOR, 0.95)})`,
transform: 'translateY(-1px)',
},
},
actions: {
alignItems: 'center',
display: 'flex',
flexWrap: 'wrap',
flexShrink: 2,
justifyContent: 'flex-end',
textAlign: 'end',
},
}))
Example #8
| Source File: search-box.js From chromeless with Mozilla Public License 2.0 | 5 votes |
|
styles = (theme) => ({
toolbarSearchContainer: {
zIndex: 10,
position: 'relative',
borderRadius: 6,
paddingLeft: theme.spacing(1),
paddingRight: theme.spacing(1),
backgroundColor: theme.palette.type === 'dark' ? theme.palette.background.paper : theme.palette.primary.dark,
color: fade(theme.palette.common.white, 0.88),
flex: 1,
WebkitAppRegion: 'no-drag',
},
toolbarSectionSearch: {
alignItems: 'center',
display: 'flex',
flexDirection: 'row',
height: 28,
margin: '0 auto',
},
searchBarText: {
padding: '0 4px',
flex: 1,
userSelect: 'none',
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
transform: 'translateY(-1px)',
fontWeight: 'normal',
},
input: {
font: 'inherit',
border: 0,
display: 'block',
verticalAlign: 'middle',
whiteSpace: 'normal',
background: 'none',
margin: 0,
color: 'inherit',
width: '100%',
padding: 16,
'&:focus': {
outline: 0,
},
'&::placeholder': {
color: fade(theme.palette.common.white, 0.3),
},
},
searchIcon: {
fill: theme.palette.common.white,
},
searchButton: {
[theme.breakpoints.up('md')]: {
display: 'none',
},
},
})
Example #9
| Source File: search-box.js From chromeless with Mozilla Public License 2.0 | 5 votes |
|
styles = (theme) => ({
toolbarSearchContainer: {
zIndex: 10,
position: 'relative',
borderRadius: 6,
paddingLeft: theme.spacing(1),
paddingRight: theme.spacing(1),
backgroundColor: theme.palette.type === 'dark' ? theme.palette.background.paper : theme.palette.primary.dark,
color: fade(theme.palette.common.white, 0.88),
flex: 1,
WebkitAppRegion: 'no-drag',
},
toolbarSectionSearch: {
alignItems: 'center',
display: 'flex',
flexDirection: 'row',
height: 28,
margin: '0 auto',
},
searchBarText: {
padding: '0 4px',
flex: 1,
userSelect: 'none',
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
transform: 'translateY(-1px)',
fontWeight: 'normal',
},
input: {
font: 'inherit',
border: 0,
display: 'block',
verticalAlign: 'middle',
whiteSpace: 'normal',
background: 'none',
margin: 0,
color: 'inherit',
width: '100%',
'&:focus': {
outline: 0,
border: 0,
boxShadow: 'none',
},
'&::placeholder': {
color: fade(theme.palette.common.white, 0.3),
},
},
searchIcon: {
fill: theme.palette.common.white,
},
searchButton: {
[theme.breakpoints.up('md')]: {
display: 'none',
},
},
})
Example #10
| Source File: search-box.js From chromeless with Mozilla Public License 2.0 | 5 votes |
|
styles = (theme) => ({
toolbarSearchContainer: {
zIndex: 10,
position: 'relative',
borderRadius: 6,
paddingLeft: theme.spacing(1),
paddingRight: theme.spacing(1),
backgroundColor: theme.palette.type === 'dark' ? theme.palette.background.paper : theme.palette.primary.dark,
color: fade(theme.palette.common.white, 0.88),
flex: 1,
WebkitAppRegion: 'no-drag',
},
toolbarSectionSearch: {
alignItems: 'center',
display: 'flex',
flexDirection: 'row',
height: 28,
margin: '0 auto',
},
searchBarText: {
padding: '0 4px',
flex: 1,
userSelect: 'none',
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
transform: 'translateY(-1px)',
fontWeight: 'normal',
},
input: {
font: 'inherit',
border: 0,
display: 'block',
verticalAlign: 'middle',
whiteSpace: 'normal',
background: 'none',
margin: 0,
color: 'inherit',
width: '100%',
padding: 16,
'&:focus': {
outline: 0,
},
'&::placeholder': {
color: fade(theme.palette.common.white, 0.3),
},
},
searchIcon: {
fill: theme.palette.common.white,
},
searchButton: {
[theme.breakpoints.up('md')]: {
display: 'none',
},
},
})
Example #11
| Source File: MusicSearch.js From qasong with ISC License | 5 votes |
|
useStyles = makeStyles((theme) => ({
search: {
position: "relative",
borderRadius: theme.shape.borderRadius,
backgroundColor: fade(theme.palette.primary.contrastText, 0.4),
"&:hover": {
backgroundColor: fade(theme.palette.primary.contrastText, 0.65),
},
color: theme.palette.primary.main,
marginLeft: 0,
width: "100%",
[theme.breakpoints.up("sm")]: {
marginLeft: theme.spacing(1),
width: "auto",
},
},
searchIcon: {
padding: theme.spacing(0, 2),
height: "100%",
position: "absolute",
pointerEvents: "none",
display: "flex",
alignItems: "center",
justifyContent: "center",
},
inputRoot: {
color: "inherit",
},
inputInput: {
padding: theme.spacing(1, 1, 1, 0),
// vertical padding + font size from searchIcon
paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
transition: theme.transitions.create("width"),
width: "100%",
[theme.breakpoints.up("sm")]: {
width: "12ch",
"&:focus": {
width: "20ch",
},
},
},
}))
Example #12
| Source File: Navbar.styles.js From grants-fe with MIT License | 5 votes |
|
useStyles = makeStyles((theme) => ({
grow: {
flexGrow: 1,
},
menuButton: {
marginRight: theme.spacing(2),
},
title: {
display: "none",
[theme.breakpoints.up("sm")]: {
display: "block",
color: theme.palette.common.white,
fontSize: "1.5em",
fontWeight: 300,
},
},
search: {
position: "relative",
borderRadius: theme.shape.borderRadius,
backgroundColor: fade(theme.palette.common.white, 0.15),
"&:hover": {
backgroundColor: fade(theme.palette.common.white, 0.25),
},
marginRight: theme.spacing(2),
marginLeft: 0,
width: "100%",
[theme.breakpoints.up("sm")]: {
marginLeft: theme.spacing(3),
width: "auto",
},
},
searchIcon: {
padding: theme.spacing(0, 2),
height: "100%",
position: "absolute",
pointerEvents: "none",
display: "flex",
alignItems: "center",
justifyContent: "center",
},
inputRoot: {
color: "inherit",
},
inputInput: {
padding: theme.spacing(1, 1, 1, 0),
// vertical padding + font size from searchIcon
paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
transition: theme.transitions.create("width"),
width: "100%",
[theme.breakpoints.up("md")]: {
width: "20ch",
},
},
sectionDesktop: {
display: "none",
[theme.breakpoints.up("md")]: {
display: "flex",
},
},
sectionMobile: {
display: "flex",
[theme.breakpoints.up("md")]: {
display: "none",
},
},
}))
Example #13
| Source File: feature.js From SiteSheet with MIT License | 5 votes |
|
useStyles = makeStyles((theme) => ({
iconWrapper: {
backgroundColor: fade(theme.palette.background.emphasis, .6),
},
img: {
maxWidth: '100%'
}
}))
Example #14
| Source File: Dashboard.js From google-forms with MIT License | 5 votes |
|
useStyles = makeStyles((theme) => ({
grow: {
flexGrow: 1,
},
menuButton: {
marginRight: theme.spacing(2),
},
title: {
display: 'none',
[theme.breakpoints.up('sm')]: {
display: 'block',
},
},
search: {
position: 'relative',
borderRadius: theme.shape.borderRadius,
backgroundColor: fade(theme.palette.common.white, 0.15),
'&:hover': {
backgroundColor: fade(theme.palette.common.white, 0.25),
},
marginRight: theme.spacing(2),
marginLeft: theme.spacing(2),
width: '100%',
[theme.breakpoints.up('sm')]: {
marginLeft: theme.spacing(3),
width: 'auto',
},
},
searchIcon: {
padding: theme.spacing(0, 2),
height: '100%',
position: 'absolute',
pointerEvents: 'none',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
inputRoot: {
color: 'inherit',
},
inputInput: {
padding: theme.spacing(1, 1, 1, 0),
// vertical padding + font size from searchIcon
paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
transition: theme.transitions.create('width'),
width: '100%',
[theme.breakpoints.up('md')]: {
width: '20ch',
},
},
sectionDesktop: {
display: 'none',
[theme.breakpoints.up('md')]: {
display: 'flex',
},
},
sectionMobile: {
display: 'flex',
[theme.breakpoints.up('md')]: {
display: 'none',
},
},
}))
Example #15
| Source File: styles.js From social with The Unlicense | 5 votes |
|
useStyles = makeStyles((theme) => ({
...theme.custom,
button: {
height: 55,
minWidth: 55,
padding: 10,
width: 45,
[theme.breakpoints.up('lg')]: {
width: '100%',
},
'&:hover': {
backgroundColor: fade(theme.palette.primary.light, 0.1),
},
},
container: {
display: 'none',
[theme.breakpoints.up('lg')]: {
alignItems: 'center',
display: 'flex',
textAlign: 'left',
padding: 10,
width: '100%',
},
},
displayName: {
color: theme.palette.text.primary,
fontWeight: 'bold',
},
icon: {
color: theme.palette.text.secondary,
},
menuHeader: {
alignItems: 'center',
display: 'flex',
textAlign: 'left',
padding: 10,
},
text: {
fontSize: theme.typography.body2.fontSize,
lineHeight: 1.4,
},
userAndSlug: {
display: 'flex',
flexDirection: 'column',
flexGrow: 1,
justifyContent: 'flex-start',
margin: theme.spacing(0, 2, 0, 1),
},
}))
Example #16
| Source File: OftadehAppBar.jsx From oftadeh-react-admin with MIT License | 5 votes |
|
useStyles = makeStyles((theme) => ({
appBar: {
transition: theme.transitions.create(["margin", "width"], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
},
appBarShift: {
width: (props) => `calc(100% - ${props.drawerWidth}px)`,
marginLeft: (props) => props.drawerWidth,
transition: theme.transitions.create(["margin", "width"], {
easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen,
}),
},
menuButton: {
// marginRight: theme.spacing(2)
},
grow: {
flexGrow: 1,
},
search: {
position: "relative",
borderRadius: theme.shape.borderRadius,
backgroundColor:
theme.palette.type === "dark"
? fade(theme.palette.common.white, 0.15)
: fade(theme.palette.action.disabled, 0.15),
"&:hover": {
backgroundColor:
theme.palette.type === "dark"
? fade(theme.palette.common.white, 0.25)
: fade(theme.palette.action.disabled, 0.25),
},
// marginRight: theme.spacing(2),
marginLeft: 0,
width: "100%",
[theme.breakpoints.up("sm")]: {
marginLeft: theme.spacing(3),
width: "auto",
},
},
searchIcon: {
padding: theme.spacing(0, 2),
height: "100%",
position: "absolute",
pointerEvents: "none",
display: "flex",
alignItems: "center",
justifyContent: "center",
},
inputRoot: {
color: "inherit",
},
inputInput: {
padding: theme.spacing(1, 1, 1, 0),
// vertical padding + font size from searchIcon
paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
transition: theme.transitions.create("width"),
width: "100%",
[theme.breakpoints.up("md")]: {
width: "20ch",
},
},
appbarSection: {
display: "flex",
// display: "none",
alignItems: "center",
// [theme.breakpoints.up("sm")]: {
// display: "flex"
// }
},
appbarToday: {
display: "flex",
[theme.breakpoints.down("xs")]: {
display: "none",
},
},
}))
Example #17
| Source File: Menu.js From mern-ecommerce with MIT License | 5 votes |
|
useStyles = makeStyles((theme) => ({
grow: {
flexGrow: 1,
},
menuButton: {
marginRight: theme.spacing(2),
},
title: {
[theme.breakpoints.up('sm')]: {
display: 'block',
},
},
search: {
position: 'relative',
borderRadius: theme.shape.borderRadius,
backgroundColor: fade(theme.palette.common.white, 0.15),
'&:hover': {
backgroundColor: fade(theme.palette.common.white, 0.25),
},
marginRight: theme.spacing(2),
marginLeft: 0,
width: '100%',
[theme.breakpoints.up('sm')]: {
marginLeft: theme.spacing(3),
width: 'auto',
},
},
searchIcon: {
padding: theme.spacing(0, 2),
height: '100%',
position: 'absolute',
pointerEvents: 'none',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
inputRoot: {
color: 'inherit',
},
inputInput: {
padding: theme.spacing(1, 1, 1, 0),
// vertical padding + font size from searchIcon
paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
transition: theme.transitions.create('width'),
width: '100%',
[theme.breakpoints.up('md')]: {
width: '20ch',
},
},
sectionDesktop: {
display: 'none',
[theme.breakpoints.up('md')]: {
display: 'flex',
},
},
sectionMobile: {
display: 'flex',
[theme.breakpoints.up('md')]: {
display: 'none',
},
},
}))
Example #18
| Source File: AllureDockerToolbar.js From allure-docker-service-ui with Apache License 2.0 | 5 votes |
|
styles = (theme) => ({
grow: {
flexGrow: 1,
},
title: {
display: "none",
[theme.breakpoints.up("sm")]: {
display: "block",
},
},
search: {
position: "relative",
borderRadius: theme.shape.borderRadius,
backgroundColor: fade(theme.palette.common.white, 0.15),
"&:hover": {
backgroundColor: fade(theme.palette.common.white, 0.25),
},
marginRight: theme.spacing(2),
marginLeft: 0,
width: "100%",
[theme.breakpoints.up("sm")]: {
marginLeft: theme.spacing(3),
width: "auto",
},
},
searchIcon: {
padding: theme.spacing(0, 2),
height: "100%",
position: "absolute",
pointerEvents: "none",
display: "flex",
alignItems: "center",
justifyContent: "center",
},
searchTextField: {
color: "inherit",
padding: theme.spacing(0.5),
paddingLeft: `calc(1em + ${theme.spacing(5)}px)`,
transition: theme.transitions.create("width"),
width: "100%",
[theme.breakpoints.up("md")]: {
width: "40ch",
},
},
sectionDesktop: {
display: "none",
[theme.breakpoints.up("md")]: {
display: "flex",
},
},
sectionMobile: {
display: "flex",
[theme.breakpoints.up("md")]: {
display: "none",
},
},
menuButton: {
marginRight: theme.spacing(2),
},
hide: {
display: "none",
},
})
Example #19
| Source File: styles.js From social with The Unlicense | 5 votes |
|
useStyles = makeStyles((theme) => ({
asideContainer: {
alignItems: 'center',
backgroundColor: fade(theme.palette.primary.main, 0.8),
display: 'flex',
justifyContent: 'center',
padding: theme.spacing(0, 2),
[theme.breakpoints.up('md')]: {
gridColumn: '1 / 2',
gridRow: 1,
height: '100%',
},
},
asideList: {
'& .MuiListItem-root': {
alignItems: 'flex-start',
color: theme.palette.common.white,
display: 'flex',
},
'& .MuiTypography-root': {
fontSize: 20,
},
'& .MuiSvgIcon-root': {
color: theme.palette.common.white,
fontSize: 30,
marginTop: theme.spacing(0.5),
},
},
branding: {
fontSize: 40,
marginTop: theme.spacing(2),
marginBottom: theme.spacing(2),
[theme.breakpoints.up('md')]: {
marginTop: 0,
},
},
content: {
maxWidth: 380,
},
ctaItem: {
marginBottom: theme.spacing(2),
},
ctaContainer: {
marginTop: theme.spacing(6),
marginBottom: theme.spacing(2),
},
indexLayout: {
width: '100%',
[theme.breakpoints.up('md')]: {
display: 'grid',
gridTemplateColumns: '50% 50%',
},
},
mainContainer: {
alignItems: 'center',
display: 'flex',
justifyContent: 'center',
padding: theme.spacing(0, 2),
position: 'relative',
[theme.breakpoints.up('md')]: {
gridColumn: '2 / 2',
gridRow: 1,
height: '100%',
},
},
}))
Example #20
| Source File: passwordResetStyles.js From zubhub with GNU Affero General Public License v3.0 | 4 votes |
|
styles = theme => ({
root: {
paddingTop: '2em',
paddingBottom: '2em',
flex: '1 0 auto',
background: 'rgba(255,204,0,1)',
background:
'linear-gradient(to bottom, rgba(255,204,0,1) 0%, rgba(255,229,133,1) 25%, rgba(255,255,255,1) 61%, rgba(255,255,255,1) 100%)',
},
containerStyle: {
maxWidth: '600px',
[theme.breakpoints.up('1600')]: {
maxWidth: '950px',
},
},
cardStyle: {
border: 0,
borderRadius: 15,
boxShadow: '0 3px 5px 2px rgba(0, 0, 0, .12)',
color: 'white',
padding: '0 30px',
},
titleStyle: {
fontWeight: 900,
fontSize: '1.7rem',
[theme.breakpoints.up('1600')]: {
fontSize: '2.5rem',
},
},
descStyle: {
[theme.breakpoints.up('1600')]: {
fontSize: '1.7rem',
},
},
customLabelStyle: {
'&.MuiFormLabel-root.Mui-focused': {
color: '#00B8C4',
},
[theme.breakpoints.up('1600')]: {
fontSize: '1.7rem',
},
},
customInputStyle: {
borderRadius: 15,
'&.MuiOutlinedInput-notchedOutline': {
border: '2px solid #00B8C4',
boxShadow: `${fade('#00B8C4', 0)} 0 0 0 0.2rem`,
},
'&.MuiOutlinedInput-root': {
'&:hover fieldset': {
border: '2px solid #00B8C4',
boxShadow: `${fade('#00B8C4', 0)} 0 0 0 0.2rem`,
},
'&.Mui-focused fieldset': {
border: '2px solid #00B8C4',
boxShadow: `${fade('#00B8C4', 0)} 0 0 0 0.2rem`,
},
[theme.breakpoints.up('1600')]: {
fontSize: '1.7rem',
},
},
},
errorBox: {
width: '100%',
padding: '1em',
borderRadius: 6,
borderWidth: '1px',
borderColor: '#a94442',
backgroundColor: '#ffcdd2',
[theme.breakpoints.up('1600')]: {
fontSize: '1.5rem',
},
},
error: {
color: '#a94442',
},
fieldHelperTextStyle: {
[theme.breakpoints.up('1600')]: {
fontSize: '1.2rem',
},
},
})
Example #21
| Source File: DateRangePicker.js From ehr with GNU Affero General Public License v3.0 | 4 votes |
|
styles = theme => {
const focusedRangeColor = fade(theme.palette.primary.main, 0.3);
const focusedRangeGradient = `linear-gradient(to right, ${focusedRangeColor}, ${focusedRangeColor})`;
const transparentRangeGradient = `linear-gradient(to right, rgba(0,0,0,0.0), rgba(0,0,0,0.0))`;
return {
day: {
width: 40,
height: 36,
fontSize: theme.typography.caption.fontSize,
margin: 0,
color: theme.palette.text.primary,
fontWeight: theme.typography.fontWeightMedium,
padding: 0,
transition: 'none',
'&::after': {
borderRadius: '100%',
bottom: 0,
boxSizing: 'border-box',
content: '""',
height: 36,
width: 36,
left: 0,
margin: 'auto',
position: 'absolute',
right: 0,
top: 0,
transform: 'scale(0)',
zIndex: 2,
},
'&:hover': {
backgroundColor: 'transparent',
color: theme.palette.text.primary,
'&::after': {
backgroundColor: theme.palette.background.paper,
border: `2px solid ${theme.palette.primary.main}`,
bottom: -2,
left: -2,
height: 36,
width: 36,
right: -2,
top: -2,
boxSizing: 'content-box',
transform: 'scale(1)',
},
},
'& > .MuiIconButton-label': {
zIndex: 3,
},
},
hidden: {
opacity: 0,
pointerEvents: 'none',
},
current: {
color: theme.palette.primary.main,
fontWeight: 600,
},
focusedRange: {
color: theme.palette.primary.contrastText,
background:
`${focusedRangeGradient} no-repeat 0/20px 40px, ` +
`${focusedRangeGradient} no-repeat 20px 0/20px 40px`,
fontWeight: theme.typography.fontWeightMedium,
width: 40,
marginRight: 0,
marginLeft: 0,
borderRadius: 0,
},
dayDisabled: {
pointerEvents: 'none',
color: theme.palette.text.hint,
},
beginCap: {
'&::after': {
transform: 'scale(1)',
backgroundColor: theme.palette.primary.main,
},
},
endCap: {
'&::after': {
transform: 'scale(1)',
backgroundColor: theme.palette.primary.main,
},
},
focusedFirst: {
background:
`${transparentRangeGradient} no-repeat 0/20px 40px, ` +
`${focusedRangeGradient} no-repeat 20px 0/20px 40px`,
},
focusedLast: {
background:
`${focusedRangeGradient} no-repeat 0/20px 40px, ` +
`${transparentRangeGradient} no-repeat 20px 0/20px 40px`,
},
};
}
Example #22
| Source File: Viewer.styles.js From EDAViewer with MIT License | 4 votes |
|
componentsStyle = (theme) => ({
grow1: {
flexGrow: 2.7,
},
grow2: {
flexGrow: 1,
},
designName: {
fontSize: "1.3rem",
fontWeight: "bold",
margin: "0",
},
defViewer: {
backgroundColor: "white",
padding: "2rem",
},
defViewerCanvas: {},
nested: {
paddingLeft: theme.spacing(4),
"& .MuiListItemText-primary": {
fontSize: "0.875rem",
},
},
componentsCollapse: {},
listItem: {
height: "40px",
},
panelSeperator: {},
panelLayers: {
borderLeft: `1px solid ${primaryColor}`,
overflowY: "auto",
},
panelComponents: { borderLeft: `1px solid ${primaryColor}` },
componentDialog: {
"& .MuiDialogContent-root": {
paddingTop: 0,
paddingBottom: 0,
},
"& .MuiDialogContentText-root": {
marginBottom: 0,
},
},
designStats: {
fontSize: "1.02rem",
margin: "0",
},
menuButton: {
marginRight: theme.spacing(2),
},
componentsExplorerHeader: {
display: "flex",
justifyContent: "space-between",
},
componentsExplorerSearch: {
display: "flex",
paddingLeft: "12px",
paddingRight: "12px",
},
componentsExplorerSearchField: {
width: "100%",
},
toolbarButton: {
paddingLeft: "1rem",
paddingRight: "1rem",
boxShadow: "unset",
},
toolbarText: {
boxShadow: "unset",
margin: "0",
width: "300px",
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
},
title: {
display: "none",
[theme.breakpoints.up("sm")]: {
display: "block",
},
},
menuItem: {
fontSize: "14px",
paddingTop: "0",
paddingBottom: "0",
"& .MuiListItemIcon-root": {
minWidth: "36px",
},
},
search: {
position: "relative",
borderRadius: theme.shape.borderRadius,
backgroundColor: fade(theme.palette.common.white, 0.15),
"&:hover": {
backgroundColor: fade(theme.palette.common.white, 0.25),
},
marginRight: theme.spacing(2),
marginLeft: 0,
width: "100%",
[theme.breakpoints.up("sm")]: {
marginLeft: theme.spacing(3),
width: "auto",
},
},
searchIcon: {
padding: theme.spacing(0, 2),
height: "100%",
position: "absolute",
pointerEvents: "none",
display: "flex",
alignItems: "center",
justifyContent: "center",
},
inputRoot: {
color: "inherit",
},
inputInput: {
padding: theme.spacing(1, 1, 1, 0),
paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
transition: theme.transitions.create("width"),
width: "100%",
[theme.breakpoints.up("md")]: {
width: "20ch",
},
},
sectionDesktop: {
display: "none",
[theme.breakpoints.up("md")]: {
display: "flex",
},
},
sectionMobile: {
display: "flex",
[theme.breakpoints.up("md")]: {
display: "none",
},
},
infoIcon: {
opacity: 0.6,
},
visiblityListItem: {
paddingTop: 0,
paddingBottom: 0,
},
viewerToolBar: {
maxHeight: "64px",
},
visiblityListCheckbox: {},
root: {
flexGrow: 1,
height: "100%",
backgroundColor: "#e5e5e5",
"& .MuiTypography-root": {
marginRight: "1rem",
},
},
viewer: {
height: "100vh",
overflow: "hidden",
},
menuButton: {
marginRight: theme.spacing(2),
},
title: {
flexGrow: 1,
},
viewerProgressBar: {
display: "flex",
justifyContent: "center",
alignItems: "center",
backgroundColor: "#000000",
opacity: "0.9",
position: "absolute",
},
progress: {
color: infoColor,
width: "6rem !important",
height: "6rem !important",
},
progressTitle: {
...title,
color: "#FFFFFF",
},
appBar: {
backgroundColor: primaryColor,
paddingTop: "1px",
paddingBottom: "1px",
minWidth: "100%",
},
})
Example #23
| Source File: navbar.style.js From graphql-sample-apps with Apache License 2.0 | 4 votes |
|
useStyles = makeStyles((theme) => ({
nav: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
height: 64,
padding: '0px 24px 0px 24px',
color: 'white',
},
navLeft: {
display: 'grid',
gridTemplateColumns: 'auto auto auto',
gridGap: 20,
alignItems: 'center'
},
navRight: {
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
[theme.breakpoints.down('md')]: {
display: 'none',
},
[theme.breakpoints.up('md')]: {
display: 'flex',
},
},
toggleBtn: {
display: 'none',
[theme.breakpoints.down('md')]: {
display: 'block'
},
[theme.breakpoints.up('md')]: {
display: 'none'
},
},
navLinks: {
position: 'absolute',
display: 'flex',
flexDirection: 'column',
width: 'calc(100%)',
height: 'auto',
backgroundColor: '#0B79D0',
color: 'white',
top: 64,
padding: '16px 24px'
},
ml2: {
marginLeft: theme.spacing(4)
},
search: {
position: 'relative',
borderRadius: theme.shape.borderRadius,
backgroundColor: fade(theme.palette.common.white, 0.15),
'&:hover': {
backgroundColor: fade(theme.palette.common.white, 0.25),
},
marginRight: theme.spacing(2),
marginLeft: 0,
width: '100%',
[theme.breakpoints.up('md')]: {
marginLeft: theme.spacing(3),
width: 'auto',
},
[theme.breakpoints.down('md')]: {
display: 'none'
},
},
searchToggle: {
position: 'relative',
borderRadius: theme.shape.borderRadius,
backgroundColor: fade(theme.palette.common.white, 0.15),
'&:hover': {
backgroundColor: fade(theme.palette.common.white, 0.25),
},
marginRight: theme.spacing(2),
marginLeft: 0,
width: '100%',
[theme.breakpoints.up('sm')]: {
width: 'auto',
}
},
searchIcon: {
padding: theme.spacing(0, 2),
height: '100%',
position: 'absolute',
pointerEvents: 'none',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
inputRoot: {
color: 'inherit',
},
inputInput: {
padding: theme.spacing(1, 1, 1, 0),
paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
transition: theme.transitions.create('width'),
width: '100%',
[theme.breakpoints.up('md')]: {
width: '20ch',
},
},
appBar: {
transition: theme.transitions.create(["margin", "width"], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
})
},
appBarShift: {
width: `calc(100% - 240px)`,
marginLeft: 240,
transition: theme.transitions.create(["margin", "width"], {
easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen,
}),
}
}))
Example #24
| Source File: navbar.style.js From graphql-sample-apps with Apache License 2.0 | 4 votes |
|
useStyles = makeStyles((theme) => ({
nav: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
height: 64,
padding: '0px 24px 0px 0px',
color: 'white',
},
navLeft: {
display: 'grid',
gridTemplateColumns: 'auto auto auto',
gridGap: 20,
alignItems: 'center',
},
navRight: {
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
[theme.breakpoints.down('md')]: {
display: 'flex',
marginLeft: '-15%',
},
[theme.breakpoints.up('md')]: {
display: 'flex',
},
},
login: {
[theme.breakpoints.down('md')]: {
display: 'none',
},
},
toggleBtn: {
display: 'none',
[theme.breakpoints.down('md')]: {
display: 'block',
},
[theme.breakpoints.up('md')]: {
display: 'none',
},
},
navLinks: {
position: 'absolute',
display: 'flex',
flexDirection: 'column',
width: 'calc(100%)',
height: 'auto',
backgroundColor: '#0B79D0',
color: 'white',
top: 64,
padding: '16px 24px',
},
ml2: {
marginLeft: theme.spacing(4),
},
search: {
position: 'relative',
borderRadius: theme.shape.borderRadius,
backgroundColor: fade(theme.palette.common.white, 0.15),
'&:hover': {
backgroundColor: fade(theme.palette.common.white, 0.25),
},
marginRight: theme.spacing(2),
marginLeft: 0,
width: '100%',
[theme.breakpoints.up('md')]: {
marginLeft: theme.spacing(3),
width: 'auto',
},
[theme.breakpoints.down('md')]: {
display: 'none',
},
},
searchToggle: {
position: 'relative',
borderRadius: theme.shape.borderRadius,
backgroundColor: fade(theme.palette.common.white, 0.15),
'&:hover': {
backgroundColor: fade(theme.palette.common.white, 0.25),
},
marginRight: theme.spacing(2),
marginLeft: 0,
width: '100%',
[theme.breakpoints.up('sm')]: {
width: 'auto',
},
},
searchIcon: {
padding: theme.spacing(0, 2),
height: '100%',
position: 'absolute',
pointerEvents: 'none',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
inputRoot: {
color: 'inherit',
},
inputInput: {
padding: theme.spacing(1, 1, 1, 0),
paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
transition: theme.transitions.create('width'),
width: '100%',
[theme.breakpoints.up('md')]: {
width: '20ch',
},
},
headerTitle: {
color: '#424242',
},
appBar: {
background: 'white',
color: '#424242',
boxShadow: 'none',
borderBottom: '1px solid rgba(0, 0, 0, 0.12)',
transition: theme.transitions.create(['margin', 'width'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
},
appBarShift: {
width: `calc(100%)`,
// marginLeft: 180,
[theme.breakpoints.down('xs')]: {
width: `calc(100%)`,
// marginLeft: 60,
height: '58px',
},
transition: theme.transitions.create(['margin', 'width'], {
easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen,
}),
},
logo: {
display: 'flex',
padding: theme.spacing(0, 1),
...theme.mixins.toolbar,
justifyContent: 'center',
cursor: 'pointer',
minHeight: '80px !important',
[theme.breakpoints.down('md')]: {
marginLeft: '-15%',
},
},
}))
Example #25
| Source File: Dashboard.js From theouterrim with MIT License | 4 votes |
|
useStyles = makeStyles(theme => ({
root: {
display: "flex",
},
appBar: {
transition: theme.transitions.create(["margin", "width"], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
backgroundColor: theme.palette.type === "dark" ? "#424242" : null,
},
appBarShift: {
width: `calc(100% - ${drawerWidth}px)`,
marginLeft: drawerWidth,
transition: theme.transitions.create(["margin", "width"], {
easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen,
}),
},
menuButton: {
marginRight: theme.spacing(2),
},
hide: {
display: "none",
},
drawer: {
width: drawerWidth,
flexShrink: 0,
},
drawerPaper: {
width: drawerWidth,
},
drawerHeader: {
display: "flex",
alignItems: "center",
padding: theme.spacing(0, 1),
...theme.mixins.toolbar,
justifyContent: "flex-end",
},
content: {
flexGrow: 1,
padding: theme.spacing(3),
transition: theme.transitions.create("margin", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
marginLeft: -drawerWidth,
},
container: {
paddingTop: theme.spacing(4),
paddingBottom: theme.spacing(4),
},
contentShift: {
transition: theme.transitions.create("margin", {
easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen,
}),
marginLeft: 0,
},
search: {
position: "relative",
borderRadius: theme.shape.borderRadius,
backgroundColor: fade(theme.palette.common.white, 0.15),
"&:hover": {
backgroundColor: fade(theme.palette.common.white, 0.25),
},
marginRight: theme.spacing(2),
marginLeft: 0,
width: "100%",
[theme.breakpoints.up("sm")]: {
marginLeft: theme.spacing(3),
width: "auto",
},
},
searchIcon: {
width: theme.spacing(7),
height: "100%",
position: "absolute",
pointerEvents: "none",
display: "flex",
alignItems: "center",
justifyContent: "center",
},
inputRoot: {
color: "inherit",
},
inputInput: {
padding: theme.spacing(1, 1, 1, 7),
transition: theme.transitions.create("width"),
width: "100%",
[theme.breakpoints.up("md")]: {
width: 200,
},
},
copyright: {
fontStyle: "italic",
marginTop: "2rem",
color: theme.palette.text.secondary,
},
spacer: {
flexGrow: 1,
},
}))
Example #26
| Source File: styles.js From yasn with MIT License | 4 votes |
|
useStyles = makeStyles((theme) => ({
grow: {
flexGrow: 1,
marginBottom: "4rem",
},
title: {
display: "none",
[theme.breakpoints.up("sm")]: {
display: "block",
},
color: "white",
},
search: {
position: "relative",
borderRadius: theme.shape.borderRadius,
backgroundColor: fade(theme.palette.common.white, 0.15),
"&:hover": {
backgroundColor: fade(theme.palette.common.white, 0.25),
},
marginRight: theme.spacing(2),
marginLeft: 0,
width: "100%",
[theme.breakpoints.up("sm")]: {
marginLeft: theme.spacing(3),
maxWidth: '210px',
},
},
searchIcon: {
padding: theme.spacing(0, 2),
height: "100%",
position: "absolute",
pointerEvents: "none",
display: "flex",
alignItems: "center",
justifyContent: "center",
},
inputRoot: {
marginLeft: '48px'
},
inputInput: {
padding: theme.spacing(1, 1, 1, 0),
// vertical padding + font size from searchIcon
paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
transition: theme.transitions.create("width"),
width: "100%",
color: "white",
[theme.breakpoints.up("md")]: {
width: "20ch",
},
},
endAdornment:{
color: "white",
},
sectionDesktop: {
display: "none",
[theme.breakpoints.up("md")]: {
display: "flex",
},
},
sectionMobile: {
display: "flex",
[theme.breakpoints.up("md")]: {
display: "none",
},
},
root: {
display: "flex",
},
drawer: {
[theme.breakpoints.up("sm")]: {
width: drawerWidth,
flexShrink: 0,
},
},
appBar: {
[theme.breakpoints.up("sm")]: {
width: `calc(100% - ${drawerWidth}px)`,
marginLeft: drawerWidth,
},
background: "#171c25",
},
link: {
color: "#292a36",
},
menuButton: {
marginRight: theme.spacing(2),
[theme.breakpoints.up("sm")]: {
display: "none",
},
},
// necessary for content to be below app bar
toolbar: theme.mixins.toolbar,
drawerPaper: {
width: drawerWidth,
},
content: {
marginTop: "2em",
flexGrow: 1,
padding: theme.spacing(3),
},
}))
Example #27
| Source File: signupStyles.js From zubhub with GNU Affero General Public License v3.0 | 4 votes |
|
styles = theme => ({
root: {
paddingTop: '2em',
paddingBottom: '2em',
flex: '1 0 auto',
background: 'rgba(255,204,0,1)',
background:
'linear-gradient(to bottom, rgba(255,204,0,1) 0%, rgba(255,229,133,1) 25%, rgba(255,255,255,1) 61%, rgba(255,255,255,1) 100%)',
},
containerStyle: {
maxWidth: '600px',
[theme.breakpoints.up('1600')]: {
maxWidth: '950px',
},
},
cardStyle: {
border: 0,
borderRadius: 15,
boxShadow: '0 3px 5px 2px rgba(0, 0, 0, .12)',
color: 'white',
padding: '0 30px',
},
titleStyle: {
fontWeight: 900,
fontSize: '1.7rem',
[theme.breakpoints.up('1600')]: {
fontSize: '2.5rem',
},
},
descStyle: {
[theme.breakpoints.up('1600')]: {
fontSize: '1.7rem',
},
},
customLabelStyle: {
'&.MuiFormLabel-root.Mui-focused': {
color: '#00B8C4',
},
fontSize: '1rem',
[theme.breakpoints.up('1600')]: {
fontSize: '1.7rem',
},
},
customInputStyle: {
borderRadius: 15,
'&.MuiOutlinedInput-notchedOutline': {
border: '2px solid #00B8C4',
boxShadow: `${fade('#00B8C4', 0)} 0 0 0 0.2rem`,
},
'&.MuiOutlinedInput-root': {
'&:hover fieldset': {
border: '2px solid #00B8C4',
boxShadow: `${fade('#00B8C4', 0)} 0 0 0 0.2rem`,
},
'&.Mui-focused fieldset': {
border: '2px solid #00B8C4',
boxShadow: `${fade('#00B8C4', 0)} 0 0 0 0.2rem`,
},
[theme.breakpoints.up('1600')]: {
fontSize: '1.7rem',
},
},
},
locationInputStyle: {
'& input': {
boxSizing: 'content-box',
},
},
secondaryLink: {
color: '#00B8C4',
'&:hover': {
color: '#03848C',
},
[theme.breakpoints.up('1600')]: {
fontSize: '1.2rem',
},
},
center: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
},
dividerText: {
[theme.breakpoints.up('1600')]: {
fontSize: '1.2rem',
},
},
divider: {
width: '30%',
marginRight: '1em',
marginLeft: '1em',
[theme.breakpoints.up('1600')]: {
height: '0.1em',
},
[theme.breakpoints.down('510')]: {
width: '20%',
},
[theme.breakpoints.down('381')]: {
marginLeft: '0.5em',
marginRight: '0.5em',
},
},
textDecorationNone: {
textDecoration: 'none',
},
errorBox: {
width: '100%',
padding: '1em',
borderRadius: 6,
borderWidth: '1px',
borderColor: '#a94442',
backgroundColor: '#ffcdd2',
[theme.breakpoints.up('1600')]: {
fontSize: '1.5rem',
},
},
error: {
color: '#a94442',
},
fieldHelperTextStyle: {
[theme.breakpoints.up('1600')]: {
fontSize: '1.2rem',
},
},
})
Example #28
| Source File: profileStyles.js From zubhub with GNU Affero General Public License v3.0 | 4 votes |
|
styles = theme => ({
root: {
flex: '1 0 auto',
},
profileHeaderStyle: {
paddingTop: '1.5em',
background: 'rgba(255,204,0,1)',
background:
'linear-gradient(to bottom, rgba(255,204,0,1) 0%, rgba(255,229,133,1) 25%, rgba(255,255,255,1) 61%, rgba(255,255,255,1) 100%)',
[theme.breakpoints.down('511')]: {
paddingTop: '4em',
},
},
avatarBoxStyle: {
width: '100%',
display: 'flex',
justifyContent: 'center',
},
profileShareButtonStyle: {
borderRadius: '50% !important',
},
avatarStyle: {
width: '100%',
height: '100%',
paddingTop: '1.5em',
paddingBottom: '1.5em',
'& img': {
width: '10em',
backgroundColor: 'white',
height: '10em',
borderRadius: '50%',
boxShadow: `0 3px 5px 2px rgba(0, 0, 0, .12)`,
},
},
ProfileDetailStyle: {
width: '100%',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
},
userNameStyle: {
fontWeight: 900,
fontSize: '2rem',
position: 'relative',
[theme.breakpoints.down('470')]: {
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
},
},
tagsContainerStyle: {
display: 'flex',
flexWrap: 'wrap',
},
emailStyle: { marginBottom: '0.5em' },
dividerStyle: {
width: '100vw',
},
moreInfoBoxStyle: {
height: '3em',
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
moreInfoStyle: {
marginLeft: '0.5em',
marginRight: '0.5em',
fontWeight: 'bold',
fontSize: '0.9rem',
color: '#00B8C4',
},
profileLowerStyle: {
margin: '1em',
padding: '1em',
},
titleStyle: {
fontWeight: 900,
fontSize: '1.5rem',
},
cardStyle: {
border: 0,
borderRadius: 15,
boxShadow: '0 3px 5px 2px rgba(0, 0, 0, .12)',
color: 'white',
padding: '0 30px',
},
customLabelStyle: {
'&.MuiFormLabel-root.Mui-focused': {
color: '#00B8C4',
},
},
projectGridStyle: {
marginBottom: '2em',
},
customInputStyle: {
borderRadius: 15,
'&.MuiOutlinedInput-notchedOutline': {
border: '2px solid #00B8C4',
boxShadow: `${fade('#00B8C4', 0)} 0 0 0 0.2rem`,
},
'&.MuiOutlinedInput-root': {
'&:hover fieldset': {
border: '2px solid #00B8C4',
boxShadow: `${fade('#00B8C4', 0)} 0 0 0 0.2rem`,
},
'&.Mui-focused fieldset': {
border: '2px solid #00B8C4',
boxShadow: `${fade('#00B8C4', 0)} 0 0 0 0.2rem`,
},
},
},
secondaryLink: {
color: '#00B8C4',
'&:hover': {
color: '#03848C',
},
},
center: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
},
textDecorationNone: {
textDecoration: 'none',
},
floatRight: { float: 'right' },
displayNone: { display: 'none' },
largeLabel: {
fontSize: '1.3rem',
},
errorBox: {
width: '100%',
padding: '1em',
borderRadius: 6,
borderWidth: '1px',
borderColor: '#a94442',
backgroundColor: '#ffcdd2',
},
error: {
color: '#a94442',
},
})
Example #29
| Source File: passwordResetConfirmStyles.js From zubhub with GNU Affero General Public License v3.0 | 4 votes |
|
styles = theme => ({
root: {
paddingTop: '2em',
paddingBottom: '2em',
flex: '1 0 auto',
background: 'rgba(255,204,0,1)',
background:
'linear-gradient(to bottom, rgba(255,204,0,1) 0%, rgba(255,229,133,1) 25%, rgba(255,255,255,1) 61%, rgba(255,255,255,1) 100%)',
},
containerStyle: {
maxWidth: '600px',
[theme.breakpoints.up('1600')]: {
maxWidth: '950px',
},
},
cardStyle: {
border: 0,
borderRadius: 15,
boxShadow: '0 3px 5px 2px rgba(0, 0, 0, .12)',
color: 'white',
padding: '0 30px',
},
titleStyle: {
fontWeight: 900,
fontSize: '1.7rem',
[theme.breakpoints.up('1600')]: {
fontSize: '2.5rem',
},
},
customLabelStyle: {
'&.MuiFormLabel-root.Mui-focused': {
color: '#00B8C4',
},
[theme.breakpoints.up('1600')]: {
fontSize: '1.7rem',
},
},
customInputStyle: {
borderRadius: 15,
'&.MuiOutlinedInput-notchedOutline': {
border: '2px solid #00B8C4',
boxShadow: `${fade('#00B8C4', 0)} 0 0 0 0.2rem`,
},
'&.MuiOutlinedInput-root': {
'&:hover fieldset': {
border: '2px solid #00B8C4',
boxShadow: `${fade('#00B8C4', 0)} 0 0 0 0.2rem`,
},
'&.Mui-focused fieldset': {
border: '2px solid #00B8C4',
boxShadow: `${fade('#00B8C4', 0)} 0 0 0 0.2rem`,
},
[theme.breakpoints.up('1600')]: {
fontSize: '1.7rem',
},
},
},
secondaryLink: {
color: '#00B8C4',
'&:hover': {
color: '#03848C',
},
},
center: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
},
divider: {
width: '30%',
marginRight: '1em',
marginLeft: '1em',
},
textDecorationNone: {
textDecoration: 'none',
},
errorBox: {
width: '100%',
padding: '1em',
borderRadius: 6,
borderWidth: '1px',
borderColor: '#a94442',
backgroundColor: '#ffcdd2',
[theme.breakpoints.up('1600')]: {
fontSize: '1.5rem',
},
},
error: {
color: '#a94442',
},
fieldHelperTextStyle: {
[theme.breakpoints.up('1600')]: {
fontSize: '1.2rem',
},
},
})
