refactor(ui): use variables for z-index values (#3453)

This commit is contained in:
Manish Giri
2020-03-24 09:46:47 -04:00
committed by GitHub
parent c6ef7e555f
commit a91e8316f7
19 changed files with 61 additions and 31 deletions

View File

@ -14,6 +14,7 @@ import {
lengths,
shadows,
buttons,
zIndex,
} from 'netlify-cms-ui-default';
import SettingsDropdown from 'UI/SettingsDropdown';
@ -31,7 +32,7 @@ const AppHeader = props => (
width: 100%;
top: 0;
background-color: ${colors.foreground};
z-index: 300;
z-index: ${zIndex.zIndex300};
height: ${lengths.topBarHeight};
`}
{...props}

View File

@ -3,7 +3,7 @@ import styled from '@emotion/styled';
import { connect } from 'react-redux';
import { boundGetAsset } from 'Actions/media';
import { Link } from 'react-router-dom';
import { colors, colorsRaw, components, lengths } from 'netlify-cms-ui-default';
import { colors, colorsRaw, components, lengths, zIndex } from 'netlify-cms-ui-default';
import { VIEW_STYLE_LIST, VIEW_STYLE_GRID } from 'Constants/collectionViews';
import { summaryFormatter } from 'Lib/formatters';
import { keyToPathArray } from 'Lib/stringTemplate';
@ -68,7 +68,7 @@ const CardBody = styled.div`
content: '';
position: absolute;
display: block;
z-index: 1;
z-index: ${zIndex.zIndex1};
bottom: 0;
left: -20%;
height: 140%;

View File

@ -5,7 +5,7 @@ import styled from '@emotion/styled';
import { css } from '@emotion/core';
import { translate } from 'react-polyglot';
import { NavLink } from 'react-router-dom';
import { Icon, components, colors, colorsRaw, lengths } from 'netlify-cms-ui-default';
import { Icon, components, colors, colorsRaw, lengths, zIndex } from 'netlify-cms-ui-default';
import { searchCollections } from 'Actions/collections';
const styles = {
@ -43,7 +43,7 @@ const SearchContainer = styled.div`
position: absolute;
top: 0;
left: 6px;
z-index: 2;
z-index: ${zIndex.zIndex2};
height: 100%;
display: flex;
align-items: center;
@ -58,7 +58,7 @@ const SearchInput = styled.input`
padding: 10px 6px 10px 32px;
width: 100%;
position: relative;
z-index: 1;
z-index: ${zIndex.zIndex1};
&:focus {
outline: none;

View File

@ -4,7 +4,14 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import { css, Global } from '@emotion/core';
import styled from '@emotion/styled';
import SplitPane from 'react-split-pane';
import { colors, colorsRaw, components, transitions, IconButton } from 'netlify-cms-ui-default';
import {
colors,
colorsRaw,
components,
transitions,
IconButton,
zIndex,
} from 'netlify-cms-ui-default';
import { ScrollSync, ScrollSyncPane } from 'react-scroll-sync';
import EditorControlPane from './EditorControlPane/EditorControlPane';
import EditorPreviewPane from './EditorPreviewPane/EditorPreviewPane';
@ -107,7 +114,7 @@ const ViewControls = styled.div`
position: absolute;
top: 10px;
right: 10px;
z-index: 299;
z-index: ${zIndex.zIndex299};
`;
class EditorInterface extends Component {

View File

@ -15,6 +15,7 @@ import {
colors,
components,
buttons,
zIndex,
} from 'netlify-cms-ui-default';
import { status } from 'Constants/publishModes';
import SettingsDropdown from 'UI/SettingsDropdown';
@ -55,7 +56,7 @@ const ToolbarContainer = styled.div`
left: 0;
width: 100%;
min-width: 800px;
z-index: 300;
z-index: ${zIndex.zIndex300};
background-color: #fff;
height: 66px;
display: flex;

View File

@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import { css } from '@emotion/core';
import styled from '@emotion/styled';
import { FileUploadButton } from 'UI';
import { buttons, shadows } from 'netlify-cms-ui-default';
import { buttons, shadows, zIndex } from 'netlify-cms-ui-default';
const styles = {
button: css`
@ -46,7 +46,7 @@ const StyledUploadButton = styled(FileUploadButton)`
opacity: 0;
overflow: hidden;
position: absolute;
z-index: 0;
z-index: ${zIndex.zIndex0};
outline: none;
}
`;

View File

@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import styled from '@emotion/styled';
import { Icon, lengths, colors } from 'netlify-cms-ui-default';
import { Icon, lengths, colors, zIndex } from 'netlify-cms-ui-default';
const SearchContainer = styled.div`
height: 37px;
@ -19,7 +19,7 @@ const SearchInput = styled.input`
padding: 10px 6px 10px 32px;
width: 100%;
position: relative;
z-index: 1;
z-index: ${zIndex.zIndex1};
&:focus {
outline: none;
@ -31,7 +31,7 @@ const SearchIcon = styled(Icon)`
position: absolute;
top: 50%;
left: 6px;
z-index: 2;
z-index: ${zIndex.zIndex2};
transform: translate(0, -50%);
`;

View File

@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import { css, Global, ClassNames } from '@emotion/core';
import ReactModal from 'react-modal';
import { transitions, shadows, lengths } from 'netlify-cms-ui-default';
import { transitions, shadows, lengths, zIndex } from 'netlify-cms-ui-default';
const ReactModalGlobalStyles = () => (
<Global
@ -29,7 +29,7 @@ const styleStrings = {
}
`,
overlay: `
z-index: 99999;
z-index: ${zIndex.zIndex99999};
position: fixed;
top: 0;
left: 0;

View File

@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
import { css, Global } from '@emotion/core';
import { translate } from 'react-polyglot';
import reduxNotificationsStyles from 'redux-notifications/lib/styles.css';
import { shadows, colors, lengths } from 'netlify-cms-ui-default';
import { shadows, colors, lengths, zIndex } from 'netlify-cms-ui-default';
const ReduxNotificationsGlobalStyles = () => (
<Global
@ -12,7 +12,7 @@ const ReduxNotificationsGlobalStyles = () => (
${reduxNotificationsStyles};
.notif__container {
z-index: 10000;
z-index: ${zIndex.zIndex10000};
white-space: pre-wrap;
}
`}