Make z-index configurable from theme

mdyna · Jul 1, 2019 · cd2d171 · cd2d171
1 parent 55e2edf
commit cd2d171
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 5 deletions.
diff --git a/src/components/BlockInsert.js b/src/components/BlockInsert.js
@@ -154,7 +154,9 @@ class BlockInsert extends React.Component<Props, State> {
 
 const Trigger = styled.div`
   position: absolute;
-  z-index: 199; /* must be below toolbar index */
+  z-index: ${props => {
+    return props.theme.zIndex + 99;
+  }}; /* must be below toolbar index */
   opacity: 0;
   background-color: ${props => props.theme.background};
   transition: opacity 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275),

diff --git a/src/components/Contents.js b/src/components/Contents.js
@@ -106,7 +106,9 @@ const Wrapper = styled.div`
   position: fixed;
   right: 0;
   top: 150px;
-  z-index: 100;
+  z-index: ${props => {
+    return props.theme.zIndex;
+  }};
 
   @media print {
     display: none;

diff --git a/src/components/CopyButton.js b/src/components/CopyButton.js
@@ -39,7 +39,9 @@ const StyledCopyToClipboard = styled(CopyToClipboard)`
 
   opacity: 0;
   transition: opacity 50ms ease-in-out;
-  z-index: 199; /* must be below toolbar index */
+  z-index: ${props => {
+    return props.theme.zIndex + 99;
+  }}; /* must be below toolbar index */
   font-size: 12px;
   font-weight: 500;
   color: ${props => props.theme.text};

diff --git a/src/components/Toolbar/BlockToolbar.js b/src/components/Toolbar/BlockToolbar.js
@@ -210,7 +210,9 @@ const Separator = styled.div`
 
 const Bar = styled.div`
   display: flex;
-  z-index: 100;
+  z-index: ${props => {
+    return props.theme.zIndex;
+  }};
   position: relative;
   align-items: center;
   background: ${props => props.theme.blockToolbarBackground};

diff --git a/src/components/Toolbar/index.js b/src/components/Toolbar/index.js
@@ -183,7 +183,9 @@ export default class Toolbar extends React.Component<Props, State> {
 export const Menu = styled.div`
   padding: 8px 16px;
   position: absolute;
-  z-index: 200;
+  z-index: ${props => {
+    return props.theme.zIndex + 100;
+  }};
   top: -10000px;
   left: -10000px;
   opacity: 0;

diff --git a/src/theme.js b/src/theme.js
@@ -24,6 +24,7 @@ export const base = {
   fontFamilyMono:
     "'SFMono-Regular',Consolas,'Liberation Mono', Menlo, Courier,monospace",
   fontWeight: 400,
+  zIndex: 100,
   link: colors.primary,
   placeholder: "#B1BECC",
   textSecondary: "#4E5C6E",