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