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

@ -7,7 +7,7 @@ import { css as coreCss, ClassNames } from '@emotion/core';
import { get, isEmpty, debounce } from 'lodash';
import { Value, Document, Block, Text } from 'slate';
import { Editor as Slate } from 'slate-react';
import { lengths, fonts } from 'netlify-cms-ui-default';
import { lengths, fonts, zIndex } from 'netlify-cms-ui-default';
import { editorStyleVars, EditorControlBar } from '../styles';
import { slateToMarkdown, markdownToSlate } from '../serializers';
import Toolbar from '../MarkdownControl/Toolbar';
@ -28,7 +28,7 @@ const visualEditorStyles = ({ minimal }) => `
padding: 0;
display: flex;
flex-direction: column;
z-index: 100;
z-index: ${zIndex.zIndex100};
`;
const InsertionPoint = styled.div`

View File

@ -1,6 +1,7 @@
/* eslint-disable react/prop-types */
import React from 'react';
import { css } from '@emotion/core';
import { zIndex } from 'netlify-cms-ui-default';
const InsertionPoint = props => (
<div
@ -8,7 +9,7 @@ const InsertionPoint = props => (
height: 32px;
cursor: text;
position: relative;
z-index: 1;
z-index: ${zIndex.zIndex1};
margin-top: -16px;
`}
{...props}

View File

@ -1,11 +1,12 @@
import styled from '@emotion/styled';
import { zIndex } from 'netlify-cms-ui-default';
export const editorStyleVars = {
stickyDistanceBottom: '100px',
};
export const EditorControlBar = styled.div`
z-index: 200;
z-index: ${zIndex.zIndex200};
position: sticky;
top: 0;
margin-bottom: ${editorStyleVars.stickyDistanceBottom};