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

@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import { css } from '@emotion/core';
import styled from '@emotion/styled';
import { Wrapper, Button as DropdownButton, Menu, MenuItem } from 'react-aria-menubutton';
import { buttons, components } from './styles';
import { buttons, components, zIndex } from './styles';
import Icon from './Icon';
const StyledWrapper = styled(Wrapper)`
@ -37,7 +37,7 @@ const DropdownList = styled.ul`
top: 0;
left: 0;
min-width: 100%;
z-index: 2;
z-index: ${zIndex.zIndex2};
${props => css`
width: ${props.width};

View File

@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import styled from '@emotion/styled';
import { css, keyframes } from '@emotion/core';
import CSSTransition from 'react-transition-group/CSSTransition';
import { colors } from './styles';
import { colors, zIndex } from './styles';
const styles = {
disabled: css`
@ -122,7 +122,7 @@ const StyledLoader = styled(Loader)`
left: 50%;
margin: 0px;
text-align: center;
z-index: 1000;
z-index: ${zIndex.zIndex1000};
transform: translateX(-50%) translateY(-50%);
&:before,

View File

@ -21,6 +21,7 @@ import {
borders,
transitions,
effects,
zIndex,
reactSelectStyles,
GlobalStyles,
} from './styles';
@ -53,6 +54,7 @@ export const NetlifyCmsUiDefault = {
borders,
transitions,
effects,
zIndex,
reactSelectStyles,
GlobalStyles,
};
@ -84,6 +86,7 @@ export {
borders,
transitions,
effects,
zIndex,
reactSelectStyles,
GlobalStyles,
GoBackButton,

View File

@ -380,6 +380,20 @@ const reactSelectStyles = {
}),
};
const zIndex = {
zIndex0: 0,
zIndex1: 1,
zIndex2: 2,
zIndex10: 10,
zIndex100: 100,
zIndex200: 200,
zIndex299: 299,
zIndex300: 300,
zIndex1000: 1000,
zIndex10000: 10000,
zIndex99999: 99999,
};
const GlobalStyles = () => (
<Global
styles={css`
@ -480,6 +494,7 @@ export {
borders,
transitions,
effects,
zIndex,
reactSelectStyles,
GlobalStyles,
};