Skip to content

Commit

Permalink
[docs] Improve font size scaling of some demos (#19950)
Browse files Browse the repository at this point in the history
  • Loading branch information
@eps1lon
eps1lon authored Mar 4, 2020
1 parent 89c0ed4 commit 7124101
Show file tree
Hide file tree
Showing 26 changed files with 42 additions and 38 deletions.
8 changes: 5 additions & 3 deletions docs/src/pages/components/app-bar/PrimarySearchAppBar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ const useStyles = makeStyles(theme => ({
},
},
searchIcon: {
width: theme.spacing(7),
padding: theme.spacing(0, 2),
height: '100%',
position: 'absolute',
pointerEvents: 'none',
Expand All @@ -56,11 +56,13 @@ const useStyles = makeStyles(theme => ({
color: 'inherit',
},
inputInput: {
padding: theme.spacing(1, 1, 1, 7),
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: 200,
width: '20ch',
},
},
sectionDesktop: {
Expand Down
8 changes: 5 additions & 3 deletions docs/src/pages/components/app-bar/PrimarySearchAppBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ const useStyles = makeStyles((theme: Theme) =>
},
},
searchIcon: {
width: theme.spacing(7),
padding: theme.spacing(0, 2),
height: '100%',
position: 'absolute',
pointerEvents: 'none',
Expand All @@ -57,11 +57,13 @@ const useStyles = makeStyles((theme: Theme) =>
color: 'inherit',
},
inputInput: {
padding: theme.spacing(1, 1, 1, 7),
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: 200,
width: '20ch',
},
},
sectionDesktop: {
Expand Down
10 changes: 6 additions & 4 deletions docs/src/pages/components/app-bar/SearchAppBar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ const useStyles = makeStyles(theme => ({
},
},
searchIcon: {
width: theme.spacing(7),
padding: theme.spacing(0, 2),
height: '100%',
position: 'absolute',
pointerEvents: 'none',
Expand All @@ -49,13 +49,15 @@ const useStyles = makeStyles(theme => ({
color: 'inherit',
},
inputInput: {
padding: theme.spacing(1, 1, 1, 7),
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: 120,
width: '12ch',
'&:focus': {
width: 200,
width: '20ch',
},
},
},
Expand Down
10 changes: 6 additions & 4 deletions docs/src/pages/components/app-bar/SearchAppBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ const useStyles = makeStyles((theme: Theme) =>
},
},
searchIcon: {
width: theme.spacing(7),
padding: theme.spacing(0, 2),
height: '100%',
position: 'absolute',
pointerEvents: 'none',
Expand All @@ -50,13 +50,15 @@ const useStyles = makeStyles((theme: Theme) =>
color: 'inherit',
},
inputInput: {
padding: theme.spacing(1, 1, 1, 7),
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: 120,
width: '12ch',
'&:focus': {
width: 200,
width: '20ch',
},
},
},
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/lists/AlignItemsList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import Typography from '@material-ui/core/Typography';
const useStyles = makeStyles(theme => ({
root: {
width: '100%',
maxWidth: 360,
maxWidth: '36ch',
backgroundColor: theme.palette.background.paper,
},
inline: {
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/lists/AlignItemsList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
width: '100%',
maxWidth: 360,
maxWidth: '36ch',
backgroundColor: theme.palette.background.paper,
},
inline: {
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/menus/LongMenu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ export default function LongMenu() {
PaperProps={{
style: {
maxHeight: ITEM_HEIGHT * 4.5,
width: 200,
width: '20ch',
},
}}
>
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/menus/LongMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ export default function LongMenu() {
PaperProps={{
style: {
maxHeight: ITEM_HEIGHT * 4.5,
width: 200,
width: '20ch',
},
}}
>
Expand Down
2 changes: 0 additions & 2 deletions docs/src/pages/components/menus/SimpleListMenu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,6 @@ import Menu from '@material-ui/core/Menu';

const useStyles = makeStyles(theme => ({
root: {
width: '100%',
maxWidth: 360,
backgroundColor: theme.palette.background.paper,
},
}));
Expand Down
2 changes: 0 additions & 2 deletions docs/src/pages/components/menus/SimpleListMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,6 @@ import Menu from '@material-ui/core/Menu';
const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
width: '100%',
maxWidth: 360,
backgroundColor: theme.palette.background.paper,
},
}),
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/text-fields/BasicTextFields.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const useStyles = makeStyles(theme => ({
root: {
'& > *': {
margin: theme.spacing(1),
width: 200,
width: '25ch',
},
},
}));
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/text-fields/BasicTextFields.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const useStyles = makeStyles((theme: Theme) =>
root: {
'& > *': {
margin: theme.spacing(1),
width: 200,
width: '25ch',
},
},
}),
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/text-fields/ColorTextFields.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const useStyles = makeStyles(theme => ({
root: {
'& > *': {
margin: theme.spacing(1),
width: 200,
width: '25ch',
},
},
}));
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/text-fields/ColorTextFields.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const useStyles = makeStyles((theme: Theme) =>
root: {
'& > *': {
margin: theme.spacing(1),
width: 200,
width: '25ch',
},
},
}),
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/text-fields/FormPropsTextFields.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const useStyles = makeStyles(theme => ({
root: {
'& .MuiTextField-root': {
margin: theme.spacing(1),
width: 200,
width: '25ch',
},
},
}));
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/text-fields/FormPropsTextFields.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const useStyles = makeStyles((theme: Theme) =>
root: {
'& .MuiTextField-root': {
margin: theme.spacing(1),
width: 200,
width: '25ch',
},
},
}),
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/text-fields/InputAdornments.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const useStyles = makeStyles(theme => ({
marginTop: theme.spacing(3),
},
textField: {
width: 200,
width: '25ch',
},
}));

Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/text-fields/InputAdornments.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const useStyles = makeStyles((theme: Theme) =>
marginTop: theme.spacing(3),
},
textField: {
width: 200,
width: '25ch',
},
}),
);
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/text-fields/LayoutTextFields.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const useStyles = makeStyles(theme => ({
textField: {
marginLeft: theme.spacing(1),
marginRight: theme.spacing(1),
width: 200,
width: '25ch',
},
}));

Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/text-fields/LayoutTextFields.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const useStyles = makeStyles((theme: Theme) =>
textField: {
marginLeft: theme.spacing(1),
marginRight: theme.spacing(1),
width: 200,
width: '25ch',
},
}),
);
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/text-fields/MultilineTextFields.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const useStyles = makeStyles(theme => ({
root: {
'& .MuiTextField-root': {
margin: theme.spacing(1),
width: 200,
width: '25ch',
},
},
}));
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/text-fields/MultilineTextFields.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const useStyles = makeStyles((theme: Theme) =>
root: {
'& .MuiTextField-root': {
margin: theme.spacing(1),
width: 200,
width: '25ch',
},
},
}),
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/text-fields/SelectTextFields.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const useStyles = makeStyles(theme => ({
root: {
'& .MuiTextField-root': {
margin: theme.spacing(1),
width: 200,
width: '25ch',
},
},
}));
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/text-fields/SelectTextFields.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const useStyles = makeStyles((theme: Theme) =>
root: {
'& .MuiTextField-root': {
margin: theme.spacing(1),
width: 200,
width: '25ch',
},
},
}),
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/text-fields/StateTextFields.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const useStyles = makeStyles(theme => ({
root: {
'& .MuiTextField-root': {
margin: theme.spacing(1),
width: 200,
width: '25ch',
},
},
}));
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/text-fields/StateTextFields.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const useStyles = makeStyles((theme: Theme) =>
root: {
'& .MuiTextField-root': {
margin: theme.spacing(1),
width: 200,
width: '25ch',
},
},
}),
Expand Down

0 comments on commit 7124101

Please sign in to comment.