enhancement(media-library): use checkerboard pattern as background (#2152)

This commit is contained in:
Shea Daniels
2019-03-14 13:52:40 -05:00
committed by Shawn Erquhart
parent 5980f630fa
commit a6c20cf688
5 changed files with 53 additions and 7 deletions

View File

@ -16,5 +16,6 @@ export {
shadows,
borders,
transitions,
effects,
reactSelectStyles,
} from './styles';

View File

@ -10,6 +10,7 @@ export {
shadows,
borders,
transitions,
effects,
reactSelectStyles,
};
@ -89,6 +90,8 @@ const colors = {
errorBackground: colorsRaw.redLight,
textFieldBorder: '#dfdfe3',
controlLabel: '#7a8291',
checkerboardLight: '#f2f2f2',
checkerboardDark: '#e6e6e6',
};
const lengths = {
@ -122,6 +125,33 @@ const shadows = {
dropDeep: css`
box-shadow: 0 4px 12px 0 rgba(68, 74, 87, 0.15), 0 1px 3px 0 rgba(68, 74, 87, 0.25);
`,
inset: css`
box-shadow: inset 0 0 4px rgba(68, 74, 87, 0.3);
`,
};
const effects = {
checkerboard: css`
background-color: ${colors.checkerboardLight};
background-size: 16px 16px;
background-position: 0 0, 8px 8px;
background-image: linear-gradient(
45deg,
${colors.checkerboardDark} 25%,
transparent 25%,
transparent 75%,
${colors.checkerboardDark} 75%,
${colors.checkerboardDark}
),
linear-gradient(
45deg,
${colors.checkerboardDark} 25%,
transparent 25%,
transparent 75%,
${colors.checkerboardDark} 75%,
${colors.checkerboardDark}
);
`,
};
const badge = css`