Clean up styles
This commit is contained in:
Daniel Lautzenheiser
parent
38bbe3ebb7
commit
c5a8a7cc1a
@ -49,7 +49,7 @@
|
||||
"react-frame-component": "^5.2.1",
|
||||
"react-hot-loader": "^4.8.0",
|
||||
"react-immutable-proptypes": "^2.1.0",
|
||||
"react-is": "16.13.1",
|
||||
"react-is": "18.2.0",
|
||||
"react-markdown": "^6.0.2",
|
||||
"react-modal": "^3.8.1",
|
||||
"react-polyglot": "^0.7.0",
|
||||
@ -92,6 +92,7 @@
|
||||
"react-immutable-proptypes": "^2.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "18.0.20",
|
||||
"@types/history": "^4.7.8",
|
||||
"@types/redux-mock-store": "^1.0.2",
|
||||
"@types/url-join": "^4.0.0",
|
||||
|
||||
2
packages/netlify-cms-core/src/bootstrap.js
vendored
2
packages/netlify-cms-core/src/bootstrap.js
vendored
@ -3,6 +3,7 @@ import { render } from 'react-dom';
|
||||
import { Provider, connect } from 'react-redux';
|
||||
import { Route, Router } from 'react-router-dom';
|
||||
import { I18n } from 'react-polyglot';
|
||||
import { GlobalStyles } from 'netlify-cms-ui-default';
|
||||
|
||||
import { store } from './redux';
|
||||
import { history } from './routing/history';
|
||||
@ -84,6 +85,7 @@ function bootstrap(opts = {}) {
|
||||
function Root() {
|
||||
return (
|
||||
<>
|
||||
<GlobalStyles />
|
||||
<Provider store={store}>
|
||||
<ConnectedTranslatedApp />
|
||||
</Provider>
|
||||
|
||||
@ -33,6 +33,11 @@ TopBarProgress.config({
|
||||
barThickness: 2,
|
||||
});
|
||||
|
||||
const AppWrapper = styled.div`
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
`
|
||||
|
||||
const AppMainContainer = styled.div`
|
||||
min-width: 1200px;
|
||||
max-width: 1440px;
|
||||
@ -175,7 +180,7 @@ class App extends React.Component {
|
||||
const hasWorkflow = publishMode === EDITORIAL_WORKFLOW;
|
||||
|
||||
return (
|
||||
<>
|
||||
<AppWrapper className="cms-wrapper">
|
||||
<Notifs CustomComponent={Toast} />
|
||||
<Header
|
||||
user={user}
|
||||
@ -248,7 +253,7 @@ class App extends React.Component {
|
||||
</Switch>
|
||||
{useMediaLibrary ? <MediaLibrary /> : null}
|
||||
</AppMainContainer>
|
||||
</>
|
||||
</AppWrapper>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -7,7 +7,13 @@ import { ClassNames, Global, css as coreCss } from '@emotion/core';
|
||||
import styled from '@emotion/styled';
|
||||
import { partial, uniqueId } from 'lodash';
|
||||
import { connect } from 'react-redux';
|
||||
import { FieldLabel, colors, transitions, lengths, borders } from 'netlify-cms-ui-default';
|
||||
import {
|
||||
FieldLabel,
|
||||
colors,
|
||||
transitions,
|
||||
lengths,
|
||||
borders,
|
||||
} from 'netlify-cms-ui-default';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
import gfm from 'remark-gfm';
|
||||
|
||||
|
||||
@ -1,24 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import { isElement } from 'react-is';
|
||||
|
||||
/**
|
||||
* We need to create a lightweight component here so that we can access the
|
||||
* context within the Frame. This allows us to attach the ScrollSyncPane to the
|
||||
* body.
|
||||
*/
|
||||
class PreviewContent extends React.Component {
|
||||
render() {
|
||||
const { previewComponent, previewProps } = this.props;
|
||||
return isElement(previewComponent)
|
||||
? React.cloneElement(previewComponent, previewProps)
|
||||
: React.createElement(previewComponent, previewProps);
|
||||
}
|
||||
}
|
||||
|
||||
PreviewContent.propTypes = {
|
||||
previewComponent: PropTypes.func.isRequired,
|
||||
previewProps: PropTypes.object,
|
||||
};
|
||||
|
||||
export default PreviewContent;
|
||||
@ -0,0 +1,35 @@
|
||||
/* eslint-disable @typescript-eslint/consistent-type-imports */
|
||||
/* eslint-disable func-style */
|
||||
import { CmsWidgetPreviewProps } from 'netlify-cms-core';
|
||||
import React, { ComponentType, ReactNode, useMemo } from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
|
||||
interface PreviewContentProps {
|
||||
previewComponent?:
|
||||
| React.ReactElement<unknown, string | React.JSXElementConstructor<any>>
|
||||
| ComponentType<CmsWidgetPreviewProps>;
|
||||
previewProps: CmsWidgetPreviewProps;
|
||||
}
|
||||
|
||||
const PreviewContent = ({ previewComponent, previewProps }: PreviewContentProps) => {
|
||||
const element = useMemo(() => document.getElementById('nc-root'), []);
|
||||
|
||||
return useMemo(() => {
|
||||
if (!element) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let children: ReactNode;
|
||||
if (!previewComponent) {
|
||||
children = null;
|
||||
} else if (React.isValidElement(previewComponent)) {
|
||||
children = React.cloneElement(previewComponent, previewProps);
|
||||
} else {
|
||||
children = React.createElement(previewComponent, previewProps);
|
||||
}
|
||||
|
||||
return ReactDOM.createPortal(<div className="preview-content">{children}</div>, element);
|
||||
}, [previewComponent, previewProps, element]);
|
||||
};
|
||||
|
||||
export default PreviewContent;
|
||||
@ -300,7 +300,9 @@ export class EditorToolbar extends React.Component {
|
||||
: this.renderNewEntrySimplePublishControls({ canCreate })}
|
||||
<div>
|
||||
{showDelete ? (
|
||||
<DeleteButton onClick={onDelete}>{t('editor.editorToolbar.deleteEntry')}</DeleteButton>
|
||||
<DeleteButton key="delete-button" onClick={onDelete}>
|
||||
{t('editor.editorToolbar.deleteEntry')}
|
||||
</DeleteButton>
|
||||
) : null}
|
||||
</div>
|
||||
</>
|
||||
@ -319,12 +321,17 @@ export class EditorToolbar extends React.Component {
|
||||
return (
|
||||
<PreviewButtonContainer>
|
||||
{deployPreviewReady ? (
|
||||
<PreviewLink rel="noopener noreferrer" target="_blank" href={url}>
|
||||
<PreviewLink
|
||||
key="preview-ready-button"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
href={url}
|
||||
>
|
||||
<span>{label}</span>
|
||||
<Icon type="new-tab" size="xsmall" />
|
||||
</PreviewLink>
|
||||
) : (
|
||||
<RefreshPreviewButton onClick={loadDeployPreview}>
|
||||
<RefreshPreviewButton key="preview-pending-button" onClick={loadDeployPreview}>
|
||||
<span>{t('editor.editorToolbar.deployPreviewPendingButtonLabel')}</span>
|
||||
<Icon type="refresh" size="xsmall" />
|
||||
</RefreshPreviewButton>
|
||||
@ -348,7 +355,9 @@ export class EditorToolbar extends React.Component {
|
||||
<Icon type="info-circle" size="small" className="tooltip" />
|
||||
</Tooltip>
|
||||
{statusKey && (
|
||||
<TooltipText>{t(`editor.editorToolbar.${statusToLocaleKey[statusKey]}`)}</TooltipText>
|
||||
<TooltipText key="status-tooltip">
|
||||
{t(`editor.editorToolbar.${statusToLocaleKey[statusKey]}`)}
|
||||
</TooltipText>
|
||||
)}
|
||||
</TooltipContainer>
|
||||
);
|
||||
@ -388,6 +397,7 @@ export class EditorToolbar extends React.Component {
|
||||
''
|
||||
) : (
|
||||
<StatusDropdownItem
|
||||
key="workflow-status-pending-publish"
|
||||
label={t('editor.editorToolbar.ready')}
|
||||
onClick={() => onChangeStatus('PENDING_PUBLISH')}
|
||||
icon={currentStatus === status.get('PENDING_PUBLISH') ? 'check' : null}
|
||||
@ -404,6 +414,7 @@ export class EditorToolbar extends React.Component {
|
||||
|
||||
return canPublish ? (
|
||||
<ToolbarDropdown
|
||||
key="workflow-new-publish-controls"
|
||||
dropdownTopOverlap="40px"
|
||||
dropdownWidth="150px"
|
||||
renderButton={() => (
|
||||
@ -445,6 +456,7 @@ export class EditorToolbar extends React.Component {
|
||||
|
||||
return canPublish || canCreate ? (
|
||||
<ToolbarDropdown
|
||||
key="workflow-existing-publish-controls"
|
||||
dropdownTopOverlap="40px"
|
||||
dropdownWidth="150px"
|
||||
renderButton={() => (
|
||||
@ -480,6 +492,7 @@ export class EditorToolbar extends React.Component {
|
||||
const { onDuplicate, t } = this.props;
|
||||
return canCreate ? (
|
||||
<ToolbarDropdown
|
||||
key="simple-existing-publish-controls"
|
||||
dropdownTopOverlap="40px"
|
||||
dropdownWidth="150px"
|
||||
renderButton={() => (
|
||||
@ -503,7 +516,7 @@ export class EditorToolbar extends React.Component {
|
||||
const { onPersist, onPersistAndNew, onPersistAndDuplicate, isPersisting, t } = this.props;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div key="simple-new-publish-controls">
|
||||
<ToolbarDropdown
|
||||
dropdownTopOverlap="40px"
|
||||
dropdownWidth="150px"
|
||||
@ -643,9 +656,9 @@ export class EditorToolbar extends React.Component {
|
||||
})}
|
||||
</BackCollection>
|
||||
{hasChanged ? (
|
||||
<BackStatusChanged>{t('editor.editorToolbar.unsavedChanges')}</BackStatusChanged>
|
||||
<BackStatusChanged key="back-changed">{t('editor.editorToolbar.unsavedChanges')}</BackStatusChanged>
|
||||
) : (
|
||||
<BackStatusUnchanged>{t('editor.editorToolbar.changesSaved')}</BackStatusUnchanged>
|
||||
<BackStatusUnchanged key="back-unchanged">{t('editor.editorToolbar.changesSaved')}</BackStatusUnchanged>
|
||||
)}
|
||||
</div>
|
||||
</ToolbarSectionBackLink>
|
||||
|
||||
@ -28,6 +28,7 @@ import {
|
||||
effects,
|
||||
zIndex,
|
||||
reactSelectStyles,
|
||||
GlobalStyles,
|
||||
} from './styles';
|
||||
|
||||
export const NetlifyCmsUiDefault = {
|
||||
@ -61,6 +62,7 @@ export const NetlifyCmsUiDefault = {
|
||||
effects,
|
||||
zIndex,
|
||||
reactSelectStyles,
|
||||
GlobalStyles,
|
||||
};
|
||||
export {
|
||||
Dropdown,
|
||||
@ -93,5 +95,6 @@ export {
|
||||
effects,
|
||||
zIndex,
|
||||
reactSelectStyles,
|
||||
GlobalStyles,
|
||||
GoBackButton,
|
||||
};
|
||||
|
||||
@ -1,440 +0,0 @@
|
||||
import { css } from '@emotion/core';
|
||||
|
||||
/**
|
||||
* Font Stacks
|
||||
*/
|
||||
const fonts = {
|
||||
primary: `
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
"Segoe UI",
|
||||
Roboto,
|
||||
Helvetica,
|
||||
Arial,
|
||||
sans-serif,
|
||||
"Apple Color Emoji",
|
||||
"Segoe UI Emoji",
|
||||
"Segoe UI Symbol"
|
||||
`,
|
||||
mono: `
|
||||
'SFMono-Regular',
|
||||
Consolas,
|
||||
"Liberation Mono",
|
||||
Menlo,
|
||||
Courier,
|
||||
monospace;
|
||||
`,
|
||||
};
|
||||
|
||||
/**
|
||||
* Theme Colors
|
||||
*/
|
||||
const colorsRaw = {
|
||||
white: '#fff',
|
||||
grayLight: '#eff0f4',
|
||||
gray: '#798291',
|
||||
grayDark: '#313d3e',
|
||||
blue: '#3a69c7',
|
||||
blueLight: '#e8f5fe',
|
||||
green: '#005614',
|
||||
greenLight: '#caef6f',
|
||||
brown: '#754e00',
|
||||
yellow: '#ffee9c',
|
||||
red: '#ff003b',
|
||||
redLight: '#fcefea',
|
||||
purple: '#70399f',
|
||||
purpleLight: '#f6d8ff',
|
||||
teal: '#17a2b8',
|
||||
tealLight: '#ddf5f9',
|
||||
};
|
||||
|
||||
const colors = {
|
||||
statusDraftText: colorsRaw.purple,
|
||||
statusDraftBackground: colorsRaw.purpleLight,
|
||||
statusReviewText: colorsRaw.brown,
|
||||
statusReviewBackground: colorsRaw.yellow,
|
||||
statusReadyText: colorsRaw.green,
|
||||
statusReadyBackground: colorsRaw.greenLight,
|
||||
text: colorsRaw.gray,
|
||||
textLight: colorsRaw.white,
|
||||
textLead: colorsRaw.grayDark,
|
||||
background: colorsRaw.grayLight,
|
||||
foreground: colorsRaw.white,
|
||||
active: colorsRaw.blue,
|
||||
activeBackground: colorsRaw.blueLight,
|
||||
inactive: colorsRaw.gray,
|
||||
button: colorsRaw.grayDark,
|
||||
buttonText: colorsRaw.white,
|
||||
inputBackground: colorsRaw.white,
|
||||
infoText: colorsRaw.blue,
|
||||
infoBackground: colorsRaw.blueLight,
|
||||
successText: colorsRaw.green,
|
||||
successBackground: colorsRaw.greenLight,
|
||||
warnText: colorsRaw.brown,
|
||||
warnBackground: colorsRaw.yellow,
|
||||
errorText: colorsRaw.red,
|
||||
errorBackground: colorsRaw.redLight,
|
||||
textFieldBorder: '#dfdfe3',
|
||||
controlLabel: '#7a8291',
|
||||
checkerboardLight: '#f2f2f2',
|
||||
checkerboardDark: '#e6e6e6',
|
||||
mediaDraftText: colorsRaw.purple,
|
||||
mediaDraftBackground: colorsRaw.purpleLight,
|
||||
};
|
||||
|
||||
const lengths = {
|
||||
topBarHeight: '56px',
|
||||
inputPadding: '16px 20px',
|
||||
borderRadius: '5px',
|
||||
richTextEditorMinHeight: '300px',
|
||||
borderWidth: '2px',
|
||||
topCardWidth: '722px',
|
||||
pageMargin: '28px 18px',
|
||||
objectWidgetTopBarContainerPadding: '0 14px 14px',
|
||||
};
|
||||
|
||||
const borders = {
|
||||
textField: `solid ${lengths.borderWidth} ${colors.textFieldBorder}`,
|
||||
};
|
||||
|
||||
const transitions = {
|
||||
main: '.2s ease',
|
||||
};
|
||||
|
||||
const shadows = {
|
||||
drop: `
|
||||
box-shadow: 0 2px 4px 0 rgba(19, 39, 48, 0.12);
|
||||
`,
|
||||
dropMain: `
|
||||
box-shadow: 0 2px 6px 0 rgba(68, 74, 87, 0.05), 0 1px 3px 0 rgba(68, 74, 87, 0.1);
|
||||
`,
|
||||
dropMiddle: `
|
||||
box-shadow: 0 2px 6px 0 rgba(68, 74, 87, 0.15), 0 1px 3px 0 rgba(68, 74, 87, 0.3);
|
||||
`,
|
||||
dropDeep: `
|
||||
box-shadow: 0 4px 12px 0 rgba(68, 74, 87, 0.15), 0 1px 3px 0 rgba(68, 74, 87, 0.25);
|
||||
`,
|
||||
inset: `
|
||||
box-shadow: inset 0 0 4px rgba(68, 74, 87, 0.3);
|
||||
`,
|
||||
};
|
||||
|
||||
const text = {
|
||||
fieldLabel: css`
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
color: ${colors.controlLabel};
|
||||
`,
|
||||
};
|
||||
|
||||
const gradients = {
|
||||
checkerboard: `
|
||||
linear-gradient(
|
||||
45deg,
|
||||
${colors.checkerboardDark} 25%,
|
||||
transparent 25%,
|
||||
transparent 75%,
|
||||
${colors.checkerboardDark} 75%,
|
||||
${colors.checkerboardDark}
|
||||
)
|
||||
`,
|
||||
};
|
||||
|
||||
const effects = {
|
||||
checkerboard: css`
|
||||
background-color: ${colors.checkerboardLight};
|
||||
background-size: 16px 16px;
|
||||
background-position: 0 0, 8px 8px;
|
||||
background-image: ${gradients.checkerboard}, ${gradients.checkerboard};
|
||||
`,
|
||||
};
|
||||
|
||||
const badge = css`
|
||||
font-size: 13px;
|
||||
line-height: 1;
|
||||
`;
|
||||
|
||||
const backgroundBadge = css`
|
||||
${badge};
|
||||
display: block;
|
||||
border-radius: ${lengths.borderRadius};
|
||||
padding: 4px 10px;
|
||||
text-align: center;
|
||||
`;
|
||||
|
||||
const textBadge = css`
|
||||
${badge};
|
||||
display: inline-block;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
`;
|
||||
|
||||
const card = css`
|
||||
${shadows.dropMain};
|
||||
border-radius: 5px;
|
||||
background-color: #fff;
|
||||
`;
|
||||
|
||||
const buttons = {
|
||||
button: css`
|
||||
border: 0;
|
||||
border-radius: ${lengths.borderRadius};
|
||||
cursor: pointer;
|
||||
`,
|
||||
default: css`
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
font-weight: 500;
|
||||
padding: 0 15px;
|
||||
background-color: ${colorsRaw.gray};
|
||||
color: ${colorsRaw.white};
|
||||
`,
|
||||
widget: css`
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 2px 12px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
border-radius: 3px;
|
||||
`,
|
||||
medium: css`
|
||||
height: 27px;
|
||||
line-height: 27px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
border-radius: 3px;
|
||||
padding: 0 24px 0 14px;
|
||||
`,
|
||||
small: css`
|
||||
font-size: 13px;
|
||||
height: 23px;
|
||||
line-height: 23px;
|
||||
`,
|
||||
gray: css`
|
||||
background-color: ${colors.button};
|
||||
color: ${colors.buttonText};
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: ${colorsRaw.white};
|
||||
background-color: #555a65;
|
||||
}
|
||||
`,
|
||||
grayText: css`
|
||||
background-color: transparent;
|
||||
color: ${colorsRaw.gray};
|
||||
`,
|
||||
green: css`
|
||||
background-color: #aae31f;
|
||||
color: ${colorsRaw.green};
|
||||
`,
|
||||
lightRed: css`
|
||||
background-color: ${colorsRaw.redLight};
|
||||
color: ${colorsRaw.red};
|
||||
`,
|
||||
lightBlue: css`
|
||||
background-color: ${colorsRaw.blueLight};
|
||||
color: ${colorsRaw.blue};
|
||||
`,
|
||||
lightTeal: css`
|
||||
background-color: ${colorsRaw.tealLight};
|
||||
color: #1195aa;
|
||||
`,
|
||||
teal: css`
|
||||
background-color: ${colorsRaw.teal};
|
||||
color: ${colorsRaw.white};
|
||||
`,
|
||||
disabled: css`
|
||||
background-color: ${colorsRaw.grayLight};
|
||||
color: ${colorsRaw.gray};
|
||||
cursor: default;
|
||||
`,
|
||||
};
|
||||
|
||||
const caret = css`
|
||||
color: ${colorsRaw.white};
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 5px solid transparent;
|
||||
border-radius: 2px;
|
||||
`;
|
||||
|
||||
const components = {
|
||||
card,
|
||||
caretDown: css`
|
||||
${caret};
|
||||
border-top: 6px solid currentColor;
|
||||
border-bottom: 0;
|
||||
`,
|
||||
caretRight: css`
|
||||
${caret};
|
||||
border-left: 6px solid currentColor;
|
||||
border-right: 0;
|
||||
`,
|
||||
badge: css`
|
||||
${backgroundBadge};
|
||||
color: ${colors.infoText};
|
||||
background-color: ${colors.infoBackground};
|
||||
`,
|
||||
badgeSuccess: css`
|
||||
${backgroundBadge};
|
||||
color: ${colors.successText};
|
||||
background-color: ${colors.successBackground};
|
||||
`,
|
||||
badgeDanger: css`
|
||||
${backgroundBadge};
|
||||
color: ${colorsRaw.red};
|
||||
background-color: #fbe0d7;
|
||||
`,
|
||||
textBadge: css`
|
||||
${textBadge};
|
||||
color: ${colors.infoText};
|
||||
`,
|
||||
textBadgeSuccess: css`
|
||||
${textBadge};
|
||||
color: ${colors.successText};
|
||||
`,
|
||||
textBadgeDanger: css`
|
||||
${textBadge};
|
||||
color: ${colorsRaw.red};
|
||||
`,
|
||||
loaderSize: css`
|
||||
width: 2.2857rem;
|
||||
height: 2.2857rem;
|
||||
`,
|
||||
cardTop: css`
|
||||
${card};
|
||||
width: ${lengths.topCardWidth};
|
||||
max-width: 100%;
|
||||
padding: 18px 20px;
|
||||
margin-bottom: 28px;
|
||||
`,
|
||||
cardTopHeading: css`
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
line-height: 37px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
`,
|
||||
cardTopDescription: css`
|
||||
max-width: 480px;
|
||||
color: ${colors.text};
|
||||
font-size: 14px;
|
||||
margin-top: 8px;
|
||||
`,
|
||||
objectWidgetTopBarContainer: css`
|
||||
padding: ${lengths.objectWidgetTopBarContainerPadding};
|
||||
`,
|
||||
dropdownList: css`
|
||||
${shadows.dropDeep};
|
||||
background-color: ${colorsRaw.white};
|
||||
border-radius: ${lengths.borderRadius};
|
||||
overflow: hidden;
|
||||
`,
|
||||
dropdownItem: css`
|
||||
${buttons.button};
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
color: ${colorsRaw.gray};
|
||||
font-weight: 500;
|
||||
border-bottom: 1px solid #eaebf1;
|
||||
padding: 8px 14px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
min-width: max-content;
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: ${colors.active};
|
||||
background-color: ${colors.activeBackground};
|
||||
}
|
||||
`,
|
||||
viewControlsText: css`
|
||||
font-size: 14px;
|
||||
color: ${colors.text};
|
||||
margin-right: 12px;
|
||||
white-space: nowrap;
|
||||
`,
|
||||
};
|
||||
|
||||
const reactSelectStyles = {
|
||||
control: styles => ({
|
||||
...styles,
|
||||
border: 0,
|
||||
boxShadow: 'none',
|
||||
padding: '9px 0 9px 12px',
|
||||
}),
|
||||
option: (styles, state) => ({
|
||||
...styles,
|
||||
backgroundColor: state.isSelected
|
||||
? `${colors.active}`
|
||||
: state.isFocused
|
||||
? `${colors.activeBackground}`
|
||||
: 'transparent',
|
||||
paddingLeft: '22px',
|
||||
}),
|
||||
menu: styles => ({ ...styles, right: 0, zIndex: zIndex.zIndex300 }),
|
||||
container: styles => ({ ...styles, padding: '0 !important' }),
|
||||
indicatorSeparator: (styles, state) =>
|
||||
state.hasValue && state.selectProps.isClearable
|
||||
? { ...styles, backgroundColor: `${colors.textFieldBorder}` }
|
||||
: { display: 'none' },
|
||||
dropdownIndicator: styles => ({ ...styles, color: `${colors.controlLabel}` }),
|
||||
clearIndicator: styles => ({ ...styles, color: `${colors.controlLabel}` }),
|
||||
multiValue: styles => ({
|
||||
...styles,
|
||||
backgroundColor: colors.background,
|
||||
}),
|
||||
multiValueLabel: styles => ({
|
||||
...styles,
|
||||
color: colors.textLead,
|
||||
fontWeight: 500,
|
||||
}),
|
||||
multiValueRemove: styles => ({
|
||||
...styles,
|
||||
color: colors.controlLabel,
|
||||
':hover': {
|
||||
color: colors.errorText,
|
||||
backgroundColor: colors.errorBackground,
|
||||
},
|
||||
}),
|
||||
};
|
||||
|
||||
const zIndex = {
|
||||
zIndex0: 0,
|
||||
zIndex1: 1,
|
||||
zIndex2: 2,
|
||||
zIndex10: 10,
|
||||
zIndex100: 100,
|
||||
zIndex200: 200,
|
||||
zIndex299: 299,
|
||||
zIndex300: 300,
|
||||
zIndex1000: 1000,
|
||||
zIndex10000: 10000,
|
||||
zIndex99999: 99999,
|
||||
};
|
||||
|
||||
export {
|
||||
fonts,
|
||||
colorsRaw,
|
||||
colors,
|
||||
lengths,
|
||||
components,
|
||||
buttons,
|
||||
text,
|
||||
shadows,
|
||||
borders,
|
||||
transitions,
|
||||
effects,
|
||||
zIndex,
|
||||
reactSelectStyles,
|
||||
};
|
||||
586
packages/netlify-cms-ui-default/src/styles.jsx
Normal file
586
packages/netlify-cms-ui-default/src/styles.jsx
Normal file
@ -0,0 +1,586 @@
|
||||
import React from 'react';
|
||||
import { css, Global } from '@emotion/core';
|
||||
|
||||
export const quantifier = '.cms-wrapper';
|
||||
|
||||
/**
|
||||
* Font Stacks
|
||||
*/
|
||||
const fonts = {
|
||||
primary: `
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
"Segoe UI",
|
||||
Roboto,
|
||||
Helvetica,
|
||||
Arial,
|
||||
sans-serif,
|
||||
"Apple Color Emoji",
|
||||
"Segoe UI Emoji",
|
||||
"Segoe UI Symbol"
|
||||
`,
|
||||
mono: `
|
||||
'SFMono-Regular',
|
||||
Consolas,
|
||||
"Liberation Mono",
|
||||
Menlo,
|
||||
Courier,
|
||||
monospace;
|
||||
`,
|
||||
};
|
||||
|
||||
/**
|
||||
* Theme Colors
|
||||
*/
|
||||
const colorsRaw = {
|
||||
white: '#fff',
|
||||
grayLight: '#eff0f4',
|
||||
gray: '#798291',
|
||||
grayDark: '#313d3e',
|
||||
blue: '#3a69c7',
|
||||
blueLight: '#e8f5fe',
|
||||
green: '#005614',
|
||||
greenLight: '#caef6f',
|
||||
brown: '#754e00',
|
||||
yellow: '#ffee9c',
|
||||
red: '#ff003b',
|
||||
redLight: '#fcefea',
|
||||
purple: '#70399f',
|
||||
purpleLight: '#f6d8ff',
|
||||
teal: '#17a2b8',
|
||||
tealLight: '#ddf5f9',
|
||||
};
|
||||
|
||||
const colors = {
|
||||
statusDraftText: colorsRaw.purple,
|
||||
statusDraftBackground: colorsRaw.purpleLight,
|
||||
statusReviewText: colorsRaw.brown,
|
||||
statusReviewBackground: colorsRaw.yellow,
|
||||
statusReadyText: colorsRaw.green,
|
||||
statusReadyBackground: colorsRaw.greenLight,
|
||||
text: colorsRaw.gray,
|
||||
textLight: colorsRaw.white,
|
||||
textLead: colorsRaw.grayDark,
|
||||
background: colorsRaw.grayLight,
|
||||
foreground: colorsRaw.white,
|
||||
active: colorsRaw.blue,
|
||||
activeBackground: colorsRaw.blueLight,
|
||||
inactive: colorsRaw.gray,
|
||||
button: colorsRaw.gray,
|
||||
buttonText: colorsRaw.white,
|
||||
inputBackground: colorsRaw.white,
|
||||
infoText: colorsRaw.blue,
|
||||
infoBackground: colorsRaw.blueLight,
|
||||
successText: colorsRaw.green,
|
||||
successBackground: colorsRaw.greenLight,
|
||||
warnText: colorsRaw.brown,
|
||||
warnBackground: colorsRaw.yellow,
|
||||
errorText: colorsRaw.red,
|
||||
errorBackground: colorsRaw.redLight,
|
||||
textFieldBorder: '#dfdfe3',
|
||||
controlLabel: '#7a8291',
|
||||
checkerboardLight: '#f2f2f2',
|
||||
checkerboardDark: '#e6e6e6',
|
||||
mediaDraftText: colorsRaw.purple,
|
||||
mediaDraftBackground: colorsRaw.purpleLight,
|
||||
};
|
||||
|
||||
const lengths = {
|
||||
topBarHeight: '56px',
|
||||
inputPadding: '16px 20px',
|
||||
borderRadius: '5px',
|
||||
richTextEditorMinHeight: '300px',
|
||||
borderWidth: '2px',
|
||||
topCardWidth: '682px',
|
||||
pageMargin: '28px 18px',
|
||||
objectWidgetTopBarContainerPadding: '0 14px 14px',
|
||||
};
|
||||
|
||||
const borders = {
|
||||
textField: `solid ${lengths.borderWidth} ${colors.textFieldBorder}`,
|
||||
};
|
||||
|
||||
const transitions = {
|
||||
main: '.2s ease',
|
||||
};
|
||||
|
||||
const shadows = {
|
||||
drop: `
|
||||
&& {
|
||||
box-shadow: 0 2px 4px 0 rgba(19, 39, 48, 0.12);
|
||||
}
|
||||
`,
|
||||
dropMain: `
|
||||
&& {
|
||||
box-shadow: 0 2px 6px 0 rgba(68, 74, 87, 0.05), 0 1px 3px 0 rgba(68, 74, 87, 0.1);
|
||||
}
|
||||
`,
|
||||
dropMiddle: `
|
||||
&& {
|
||||
box-shadow: 0 2px 6px 0 rgba(68, 74, 87, 0.15), 0 1px 3px 0 rgba(68, 74, 87, 0.3);
|
||||
}
|
||||
`,
|
||||
dropDeep: `
|
||||
&& {
|
||||
box-shadow: 0 4px 12px 0 rgba(68, 74, 87, 0.15), 0 1px 3px 0 rgba(68, 74, 87, 0.25);
|
||||
}
|
||||
`,
|
||||
inset: `
|
||||
&& {
|
||||
box-shadow: inset 0 0 4px rgba(68, 74, 87, 0.3);
|
||||
}
|
||||
`,
|
||||
};
|
||||
|
||||
const text = {
|
||||
fieldLabel: css`
|
||||
&& {
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
}
|
||||
`,
|
||||
};
|
||||
|
||||
const gradients = {
|
||||
checkerboard: `
|
||||
linear-gradient(
|
||||
45deg,
|
||||
${colors.checkerboardDark} 25%,
|
||||
transparent 25%,
|
||||
transparent 75%,
|
||||
${colors.checkerboardDark} 75%,
|
||||
${colors.checkerboardDark}
|
||||
)
|
||||
`,
|
||||
};
|
||||
|
||||
const effects = {
|
||||
checkerboard: css`
|
||||
&& {
|
||||
background-color: ${colors.checkerboardLight};
|
||||
background-size: 16px 16px;
|
||||
background-position: 0 0, 8px 8px;
|
||||
background-image: ${gradients.checkerboard}, ${gradients.checkerboard};
|
||||
}
|
||||
`,
|
||||
};
|
||||
|
||||
const badge = css`
|
||||
&& {
|
||||
font-size: 13px;
|
||||
line-height: 1;
|
||||
}
|
||||
`;
|
||||
|
||||
const backgroundBadge = css`
|
||||
&& {
|
||||
${badge};
|
||||
display: block;
|
||||
border-radius: ${lengths.borderRadius};
|
||||
padding: 4px 10px;
|
||||
text-align: center;
|
||||
}
|
||||
`;
|
||||
|
||||
const textBadge = css`
|
||||
&& {
|
||||
${badge};
|
||||
display: inline-block;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
`;
|
||||
|
||||
const card = css`
|
||||
&& {
|
||||
${shadows.dropMain};
|
||||
border-radius: 5px;
|
||||
background-color: #fff;
|
||||
}
|
||||
`;
|
||||
|
||||
const buttons = {
|
||||
button: css`
|
||||
&& {
|
||||
border: 0;
|
||||
border-radius: ${lengths.borderRadius};
|
||||
cursor: pointer;
|
||||
}
|
||||
`,
|
||||
default: css`
|
||||
&& {
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
font-weight: 500;
|
||||
padding: 0 15px;
|
||||
background-color: ${colorsRaw.gray};
|
||||
color: ${colorsRaw.white};
|
||||
}
|
||||
`,
|
||||
medium: css`
|
||||
&& {
|
||||
height: 27px;
|
||||
line-height: 27px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
border-radius: 3px;
|
||||
padding: 0 24px 0 14px;
|
||||
}
|
||||
`,
|
||||
small: css`
|
||||
&& {
|
||||
font-size: 13px;
|
||||
height: 23px;
|
||||
line-height: 23px;
|
||||
}
|
||||
`,
|
||||
gray: css`
|
||||
&& {
|
||||
background-color: ${colors.button};
|
||||
color: ${colors.buttonText};
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: ${colorsRaw.white};
|
||||
background-color: #555a65;
|
||||
}
|
||||
}
|
||||
`,
|
||||
grayText: css`
|
||||
&& {
|
||||
background-color: transparent;
|
||||
color: ${colorsRaw.gray};
|
||||
}
|
||||
`,
|
||||
green: css`
|
||||
&& {
|
||||
background-color: #aae31f;
|
||||
color: ${colorsRaw.green};
|
||||
}
|
||||
`,
|
||||
lightRed: css`
|
||||
&& {
|
||||
background-color: ${colorsRaw.redLight};
|
||||
color: ${colorsRaw.red};
|
||||
}
|
||||
`,
|
||||
lightBlue: css`
|
||||
&& {
|
||||
background-color: ${colorsRaw.blueLight};
|
||||
color: ${colorsRaw.blue};
|
||||
}
|
||||
`,
|
||||
lightTeal: css`
|
||||
&& {
|
||||
background-color: ${colorsRaw.tealLight};
|
||||
color: #1195aa;
|
||||
}
|
||||
`,
|
||||
teal: css`
|
||||
&& {
|
||||
background-color: ${colorsRaw.teal};
|
||||
color: ${colorsRaw.white};
|
||||
}
|
||||
`,
|
||||
disabled: css`
|
||||
&& {
|
||||
background-color: ${colorsRaw.grayLight};
|
||||
color: ${colorsRaw.gray};
|
||||
}
|
||||
`,
|
||||
};
|
||||
|
||||
const caret = css`
|
||||
color: ${colorsRaw.white};
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 5px solid transparent;
|
||||
border-radius: 2px;
|
||||
`;
|
||||
|
||||
const components = {
|
||||
card,
|
||||
caretDown: css`
|
||||
${caret};
|
||||
border-top: 6px solid currentColor;
|
||||
border-bottom: 0;
|
||||
`,
|
||||
caretRight: css`
|
||||
${caret};
|
||||
border-left: 6px solid currentColor;
|
||||
border-right: 0;
|
||||
`,
|
||||
badge: css`
|
||||
&& {
|
||||
${backgroundBadge};
|
||||
color: ${colors.infoText};
|
||||
background-color: ${colors.infoBackground};
|
||||
}
|
||||
`,
|
||||
badgeSuccess: css`
|
||||
&& {
|
||||
${backgroundBadge};
|
||||
color: ${colors.successText};
|
||||
background-color: ${colors.successBackground};
|
||||
}
|
||||
`,
|
||||
badgeDanger: css`
|
||||
&& {
|
||||
${backgroundBadge};
|
||||
color: ${colorsRaw.red};
|
||||
background-color: #fbe0d7;
|
||||
}
|
||||
`,
|
||||
textBadge: css`
|
||||
&& {
|
||||
${textBadge};
|
||||
color: ${colors.infoText};
|
||||
}
|
||||
`,
|
||||
textBadgeSuccess: css`
|
||||
&& {
|
||||
${textBadge};
|
||||
color: ${colors.successText};
|
||||
}
|
||||
`,
|
||||
textBadgeDanger: css`
|
||||
&& {
|
||||
${textBadge};
|
||||
color: ${colorsRaw.red};
|
||||
}
|
||||
`,
|
||||
loaderSize: css`
|
||||
&& {
|
||||
width: 2.28571429rem;
|
||||
height: 2.28571429rem;
|
||||
}
|
||||
`,
|
||||
cardTop: css`
|
||||
&& {
|
||||
${card};
|
||||
width: ${lengths.topCardWidth};
|
||||
max-width: 100%;
|
||||
padding: 18px 20px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
`,
|
||||
cardTopHeading: css`
|
||||
&& {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
line-height: 37px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
`,
|
||||
cardTopDescription: css`
|
||||
&& {
|
||||
max-width: 480px;
|
||||
color: ${colors.text};
|
||||
font-size: 14px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
`,
|
||||
objectWidgetTopBarContainer: css`
|
||||
&& {
|
||||
padding: ${lengths.objectWidgetTopBarContainerPadding};
|
||||
}
|
||||
`,
|
||||
dropdownList: css`
|
||||
&& {
|
||||
${shadows.dropDeep};
|
||||
background-color: ${colorsRaw.white};
|
||||
border-radius: ${lengths.borderRadius};
|
||||
overflow: hidden;
|
||||
}
|
||||
`,
|
||||
dropdownItem: css`
|
||||
&& {
|
||||
${buttons.button};
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
color: ${colorsRaw.gray};
|
||||
font-weight: 500;
|
||||
border-bottom: 1px solid #eaebf1;
|
||||
padding: 8px 14px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
min-width: max-content;
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: ${colors.active};
|
||||
background-color: ${colors.activeBackground};
|
||||
}
|
||||
}
|
||||
`,
|
||||
viewControlsText: css`
|
||||
&& {
|
||||
font-size: 14px;
|
||||
color: ${colors.text};
|
||||
margin-right: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
`,
|
||||
};
|
||||
|
||||
const reactSelectStyles = {
|
||||
control: styles => ({
|
||||
...styles,
|
||||
border: 0,
|
||||
boxShadow: 'none',
|
||||
padding: '9px 0 9px 12px',
|
||||
}),
|
||||
option: (styles, state) => ({
|
||||
...styles,
|
||||
backgroundColor: state.isSelected
|
||||
? `${colors.active}`
|
||||
: state.isFocused
|
||||
? `${colors.activeBackground}`
|
||||
: 'transparent',
|
||||
paddingLeft: '22px',
|
||||
}),
|
||||
menu: styles => ({ ...styles, right: 0, zIndex: zIndex.zIndex300 }),
|
||||
container: styles => ({ ...styles, padding: '0 !important' }),
|
||||
indicatorSeparator: (styles, state) =>
|
||||
state.hasValue && state.selectProps.isClearable
|
||||
? { ...styles, backgroundColor: `${colors.textFieldBorder}` }
|
||||
: { display: 'none' },
|
||||
dropdownIndicator: styles => ({ ...styles, color: `${colors.controlLabel}` }),
|
||||
clearIndicator: styles => ({ ...styles, color: `${colors.controlLabel}` }),
|
||||
multiValue: styles => ({
|
||||
...styles,
|
||||
backgroundColor: colors.background,
|
||||
}),
|
||||
multiValueLabel: styles => ({
|
||||
...styles,
|
||||
color: colors.textLead,
|
||||
fontWeight: 500,
|
||||
}),
|
||||
multiValueRemove: styles => ({
|
||||
...styles,
|
||||
color: colors.controlLabel,
|
||||
':hover': {
|
||||
color: colors.errorText,
|
||||
backgroundColor: colors.errorBackground,
|
||||
},
|
||||
}),
|
||||
};
|
||||
|
||||
const zIndex = {
|
||||
zIndex0: 0,
|
||||
zIndex1: 1,
|
||||
zIndex2: 2,
|
||||
zIndex10: 10,
|
||||
zIndex100: 100,
|
||||
zIndex200: 200,
|
||||
zIndex299: 299,
|
||||
zIndex300: 300,
|
||||
zIndex1000: 1000,
|
||||
zIndex10000: 10000,
|
||||
zIndex99999: 99999,
|
||||
};
|
||||
|
||||
function GlobalStyles() {
|
||||
return (
|
||||
<Global
|
||||
styles={css`
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
${quantifier} {
|
||||
font-family: ${fonts.primary};
|
||||
font-weight: normal;
|
||||
background-color: ${colors.background};
|
||||
color: ${colors.text};
|
||||
margin: 0;
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p {
|
||||
font-family: ${fonts.primary};
|
||||
color: ${colors.textLead};
|
||||
font-size: 15px;
|
||||
line-height: 1.5;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 24px;
|
||||
letter-spacing: 0.4px;
|
||||
color: ${colors.textLead};
|
||||
}
|
||||
|
||||
a,
|
||||
button {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
a {
|
||||
color: ${colors.text};
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: none;
|
||||
}
|
||||
}
|
||||
`}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
fonts,
|
||||
colorsRaw,
|
||||
colors,
|
||||
lengths,
|
||||
components,
|
||||
buttons,
|
||||
text,
|
||||
shadows,
|
||||
borders,
|
||||
transitions,
|
||||
effects,
|
||||
zIndex,
|
||||
reactSelectStyles,
|
||||
GlobalStyles,
|
||||
};
|
||||
@ -29,5 +29,8 @@
|
||||
"react": "^16.8.4",
|
||||
"react-dom": "^16.8.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"react-hot-loader": "4.13.0"
|
||||
},
|
||||
"incrementToForceBump": 2
|
||||
}
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"esModuleInterop": true,
|
||||
"preserveSymlinks": true,
|
||||
"noEmit": true,
|
||||
"strict": true,
|
||||
"isolatedModules": true,
|
||||
|
||||
18
yarn.lock
18
yarn.lock
@ -3720,6 +3720,15 @@
|
||||
"@types/scheduler" "*"
|
||||
csstype "^3.0.2"
|
||||
|
||||
"@types/react@18.0.20":
|
||||
version "18.0.20"
|
||||
resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.20.tgz#e4c36be3a55eb5b456ecf501bd4a00fd4fd0c9ab"
|
||||
integrity sha512-MWul1teSPxujEHVwZl4a5HxQ9vVNsjTchVA+xRqv/VYGCuKGAU6UhfrTdF5aBefwD1BHUD8i/zq+O/vyCm/FrA==
|
||||
dependencies:
|
||||
"@types/prop-types" "*"
|
||||
"@types/scheduler" "*"
|
||||
csstype "^3.0.2"
|
||||
|
||||
"@types/react@^17":
|
||||
version "17.0.44"
|
||||
resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.44.tgz#c3714bd34dd551ab20b8015d9d0dbec812a51ec7"
|
||||
@ -15360,7 +15369,7 @@ react-helmet-async@^1.0.2:
|
||||
react-fast-compare "^3.2.0"
|
||||
shallowequal "^1.1.0"
|
||||
|
||||
react-hot-loader@^4.8.0:
|
||||
react-hot-loader@4.13.0, react-hot-loader@^4.8.0:
|
||||
version "4.13.0"
|
||||
resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-4.13.0.tgz#c27e9408581c2a678f5316e69c061b226dc6a202"
|
||||
integrity sha512-JrLlvUPqh6wIkrK2hZDfOyq/Uh/WeVEr8nc7hkn2/3Ul0sx1Kr5y4kOGNacNRoj7RhwLNcQ3Udf1KJXrqc0ZtA==
|
||||
@ -15404,7 +15413,12 @@ react-inspector@^4.0.0:
|
||||
is-dom "^1.0.9"
|
||||
prop-types "^15.6.1"
|
||||
|
||||
react-is@16.13.1, react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.4, react-is@^16.8.6:
|
||||
react-is@18.2.0:
|
||||
version "18.2.0"
|
||||
resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
|
||||
integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
|
||||
|
||||
react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.4, react-is@^16.8.6:
|
||||
version "16.13.1"
|
||||
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
|
||||
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user