Skip to content

Commit

Permalink
polishing up after a few days of chewing on it
Browse files Browse the repository at this point in the history
  • Loading branch information
@danilo-leal
danilo-leal committed Feb 9, 2022
1 parent 0ec791e commit 01010c1
Show file tree
Hide file tree
Showing 16 changed files with 147 additions and 149 deletions.
22 changes: 11 additions & 11 deletions docs/data/material/components/selects/UnstyledSelectControlled.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,12 @@ import PopperUnstyled from '@mui/base/PopperUnstyled';
import { styled } from '@mui/system';

const blue = {
100: '#DAECFF',
200: '#99CCF3',
400: '#3399FF',
500: '#007FFF',
600: '#0072E5',
900: '#003A75',
};

const grey = {
Expand All @@ -34,7 +36,7 @@ const StyledButton = styled('button')(
background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]};
border-radius: 0.75em;
margin: 0.5em;
margin-top: 0.5em;
padding: 10px;
text-align: left;
line-height: 1.5;
Expand All @@ -46,8 +48,7 @@ const StyledButton = styled('button')(
}
&.${selectUnstyledClasses.focusVisible} {
outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]};
outline-offset: 2px;
outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[100]};
}
&.${selectUnstyledClasses.expanded} {
Expand All @@ -68,7 +69,7 @@ const StyledListbox = styled('ul')(
font-family: IBM Plex Sans, sans-serif;
font-size: 0.875rem;
box-sizing: border-box;
padding: 0;
padding: 5px;
margin: 10px 0;
min-width: 320px;
background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
Expand All @@ -83,18 +84,17 @@ const StyledListbox = styled('ul')(
const StyledOption = styled(OptionUnstyled)(
({ theme }) => `
list-style: none;
padding: 10px;
margin: 0;
border-bottom: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]};
padding: 8px;
border-radius: 0.45em;
cursor: default;
&:last-of-type {
border-bottom: none;
}
&.${optionUnstyledClasses.selected} {
background-color: ${blue[500]};
color: #fff;
background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
}
&.${optionUnstyledClasses.highlighted} {
Expand All @@ -103,8 +103,8 @@ const StyledOption = styled(OptionUnstyled)(
}
&.${optionUnstyledClasses.highlighted}.${optionUnstyledClasses.selected} {
background-color: ${blue[600]};
color: #fff;
background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
}
&.${optionUnstyledClasses.disabled} {
Expand Down
20 changes: 10 additions & 10 deletions docs/data/material/components/selects/UnstyledSelectControlled.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,12 @@ import PopperUnstyled from '@mui/base/PopperUnstyled';
import { styled } from '@mui/system';

const blue = {
100: '#DAECFF',
200: '#99CCF3',
400: '#3399FF',
500: '#007FFF',
600: '#0072E5',
900: '#003A75',
};

const grey = {
Expand Down Expand Up @@ -48,8 +50,7 @@ const StyledButton = styled('button')(
}
&.${selectUnstyledClasses.focusVisible} {
outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]};
outline-offset: 2px;
outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[100]};
}
&.${selectUnstyledClasses.expanded} {
Expand All @@ -70,7 +71,7 @@ const StyledListbox = styled('ul')(
font-family: IBM Plex Sans, sans-serif;
font-size: 0.875rem;
box-sizing: border-box;
padding: 0;
padding: 5px;
margin: 10px 0;
min-width: 320px;
background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
Expand All @@ -85,18 +86,17 @@ const StyledListbox = styled('ul')(
const StyledOption = styled(OptionUnstyled)(
({ theme }) => `
list-style: none;
padding: 10px;
margin: 0;
border-bottom: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]};
padding: 8px;
border-radius: 0.45em;
cursor: default;
&:last-of-type {
border-bottom: none;
}
&.${optionUnstyledClasses.selected} {
background-color: ${blue[500]};
color: #fff;
background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
}
&.${optionUnstyledClasses.highlighted} {
Expand All @@ -105,8 +105,8 @@ const StyledOption = styled(OptionUnstyled)(
}
&.${optionUnstyledClasses.highlighted}.${optionUnstyledClasses.selected} {
background-color: ${blue[600]};
color: #fff;
background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
}
&.${optionUnstyledClasses.disabled} {
Expand Down
20 changes: 10 additions & 10 deletions docs/data/material/components/selects/UnstyledSelectCustomRenderValue.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,12 @@ import PopperUnstyled from '@mui/base/PopperUnstyled';
import { styled } from '@mui/system';

const blue = {
100: '#DAECFF',
200: '#99CCF3',
400: '#3399FF',
500: '#007FFF',
600: '#0072E5',
900: '#003A75',
};

const grey = {
Expand Down Expand Up @@ -46,8 +48,7 @@ const StyledButton = styled('button')(
}
&.${selectUnstyledClasses.focusVisible} {
outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]};
outline-offset: 2px;
outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[100]};
}
&.${selectUnstyledClasses.expanded} {
Expand All @@ -68,7 +69,7 @@ const StyledListbox = styled('ul')(
font-family: IBM Plex Sans, sans-serif;
font-size: 0.875rem;
box-sizing: border-box;
padding: 0;
padding: 5px;
margin: 10px 0;
min-width: 320px;
background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
Expand All @@ -83,18 +84,17 @@ const StyledListbox = styled('ul')(
const StyledOption = styled(OptionUnstyled)(
({ theme }) => `
list-style: none;
padding: 10px;
margin: 0;
border-bottom: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]};
padding: 8px;
border-radius: 0.45em;
cursor: default;
&:last-of-type {
border-bottom: none;
}
&.${optionUnstyledClasses.selected} {
background-color: ${blue[500]};
color: #fff;
background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
}
&.${optionUnstyledClasses.highlighted} {
Expand All @@ -103,8 +103,8 @@ const StyledOption = styled(OptionUnstyled)(
}
&.${optionUnstyledClasses.highlighted}.${optionUnstyledClasses.selected} {
background-color: ${blue[600]};
color: #fff;
background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
}
&.${optionUnstyledClasses.disabled} {
Expand Down
20 changes: 10 additions & 10 deletions docs/data/material/components/selects/UnstyledSelectCustomRenderValue.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,12 @@ import PopperUnstyled from '@mui/base/PopperUnstyled';
import { styled } from '@mui/system';

const blue = {
100: '#DAECFF',
200: '#99CCF3',
400: '#3399FF',
500: '#007FFF',
600: '#0072E5',
900: '#003A75',
};

const grey = {
Expand Down Expand Up @@ -49,8 +51,7 @@ const StyledButton = styled('button')(
}
&.${selectUnstyledClasses.focusVisible} {
outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]};
outline-offset: 2px;
outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[100]};
}
&.${selectUnstyledClasses.expanded} {
Expand All @@ -71,7 +72,7 @@ const StyledListbox = styled('ul')(
font-family: IBM Plex Sans, sans-serif;
font-size: 0.875rem;
box-sizing: border-box;
padding: 0;
padding: 5px;
margin: 10px 0;
min-width: 320px;
background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
Expand All @@ -86,18 +87,17 @@ const StyledListbox = styled('ul')(
const StyledOption = styled(OptionUnstyled)(
({ theme }) => `
list-style: none;
padding: 10px;
margin: 0;
border-bottom: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]};
padding: 8px;
border-radius: 0.45em;
cursor: default;
&:last-of-type {
border-bottom: none;
}
&.${optionUnstyledClasses.selected} {
background-color: ${blue[500]};
color: #fff;
background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
}
&.${optionUnstyledClasses.highlighted} {
Expand All @@ -106,8 +106,8 @@ const StyledOption = styled(OptionUnstyled)(
}
&.${optionUnstyledClasses.highlighted}.${optionUnstyledClasses.selected} {
background-color: ${blue[600]};
color: #fff;
background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
}
&.${optionUnstyledClasses.disabled} {
Expand Down
20 changes: 10 additions & 10 deletions docs/data/material/components/selects/UnstyledSelectGrouping.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,12 @@ import PopperUnstyled from '@mui/base/PopperUnstyled';
import { styled } from '@mui/system';

const blue = {
100: '#DAECFF',
200: '#99CCF3',
400: '#3399FF',
500: '#007FFF',
600: '#0072E5',
900: '#003A75',
};

const grey = {
Expand Down Expand Up @@ -47,8 +49,7 @@ const StyledButton = styled('button')(
}
&.${selectUnstyledClasses.focusVisible} {
outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]};
outline-offset: 2px;
outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[100]};
}
&.${selectUnstyledClasses.expanded} {
Expand All @@ -69,7 +70,7 @@ const StyledListbox = styled('ul')(
font-family: IBM Plex Sans, sans-serif;
font-size: 0.875rem;
box-sizing: border-box;
padding: 0;
padding: 5px;
margin: 10px 0;
min-width: 320px;
background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
Expand All @@ -84,18 +85,17 @@ const StyledListbox = styled('ul')(
const StyledOption = styled(OptionUnstyled)(
({ theme }) => `
list-style: none;
padding: 10px;
margin: 0;
border-bottom: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]};
padding: 8px;
border-radius: 0.45em;
cursor: default;
&:last-of-type {
border-bottom: none;
}
&.${optionUnstyledClasses.selected} {
background-color: ${blue[500]};
color: #fff;
background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
}
&.${optionUnstyledClasses.highlighted} {
Expand All @@ -104,8 +104,8 @@ const StyledOption = styled(OptionUnstyled)(
}
&.${optionUnstyledClasses.highlighted}.${optionUnstyledClasses.selected} {
background-color: ${blue[600]};
color: #fff;
background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
}
&.${optionUnstyledClasses.disabled} {
Expand Down
Loading

0 comments on commit 01010c1

Please sign in to comment.