refactor(ui): use variables for z-index values (#3453)
This commit is contained in:
@ -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}
|
||||
|
@ -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%;
|
||||
|
@ -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;
|
||||
|
@ -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 {
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
}
|
||||
`;
|
||||
|
@ -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%);
|
||||
`;
|
||||
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
}
|
||||
`}
|
||||
|
Reference in New Issue
Block a user