aboutsummaryrefslogtreecommitdiffstats
path: root/packages/dev-tools-pages/ts/components
diff options
context:
space:
mode:
authorAugust Skare <post@augustskare.no>2018-10-26 14:50:20 +0800
committerAugust Skare <post@augustskare.no>2018-10-26 14:50:20 +0800
commitf17c7e4a22c4a11056251598a11b0ffb31804b73 (patch)
tree3098c59af55138692fd77b4c47d4fd6a83bd819a /packages/dev-tools-pages/ts/components
parent5fe98c816db02e44bf8f6744ca934f862f435898 (diff)
downloaddexon-sol-tools-f17c7e4a22c4a11056251598a11b0ffb31804b73.tar
dexon-sol-tools-f17c7e4a22c4a11056251598a11b0ffb31804b73.tar.gz
dexon-sol-tools-f17c7e4a22c4a11056251598a11b0ffb31804b73.tar.bz2
dexon-sol-tools-f17c7e4a22c4a11056251598a11b0ffb31804b73.tar.lz
dexon-sol-tools-f17c7e4a22c4a11056251598a11b0ffb31804b73.tar.xz
dexon-sol-tools-f17c7e4a22c4a11056251598a11b0ffb31804b73.tar.zst
dexon-sol-tools-f17c7e4a22c4a11056251598a11b0ffb31804b73.zip
fix button position in code component
Diffstat (limited to 'packages/dev-tools-pages/ts/components')
-rw-r--r--packages/dev-tools-pages/ts/components/Code.tsx39
1 files changed, 22 insertions, 17 deletions
diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx
index ffa4441d4..753965568 100644
--- a/packages/dev-tools-pages/ts/components/Code.tsx
+++ b/packages/dev-tools-pages/ts/components/Code.tsx
@@ -29,6 +29,13 @@ const Button = styled(BaseButton)`
}
`;
+const Container = styled.div`
+ position: relative;
+ &:hover ${Button} {
+ opacity: 1;
+ }
+`;
+
const Base =
styled.div <
CodeProps >
@@ -54,10 +61,6 @@ const Base =
overflow-x: auto;
-webkit-overflow-scrolling: touch;
-
- &:hover ${Button} {
- opacity: 1;
- }
`;
const StyledCodeDiff =
@@ -162,20 +165,22 @@ class Code extends React.Component<CodeProps, CodeState> {
const Code = diff ? StyledCodeDiff : 'code';
return (
- <Base language={language} diff={diff} light={light}>
- <StyledPre>
- <Code
- gutterLength={gutterLength}
- dangerouslySetInnerHTML={hlCode ? { __html: this.state.hlCode } : null}
- >
- {hlCode === undefined ? children : null}
- </Code>
- </StyledPre>
+ <Container>
+ <Base language={language} diff={diff} light={light}>
+ <StyledPre>
+ <Code
+ gutterLength={gutterLength}
+ dangerouslySetInnerHTML={hlCode ? { __html: this.state.hlCode } : null}
+ >
+ {hlCode === undefined ? children : null}
+ </Code>
+ </StyledPre>
+ {!('clipboard' in navigator) ? (
+ <CopyInput readOnly aria-hidden="true" ref={this.code} value={children} />
+ ) : null}
+ </Base>
{navigator.userAgent !== 'ReactSnap' ? <Button onClick={this.handleCopy}>Copy</Button> : null}
- {!('clipboard' in navigator) ? (
- <CopyInput readOnly aria-hidden="true" ref={this.code} value={children} />
- ) : null}
- </Base>
+ </Container>
);
}
}