aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorMegan Pearson <megan.e.pearson@gmail.com>2018-10-19 20:29:59 +0800
committerMegan Pearson <megan.e.pearson@gmail.com>2018-10-19 20:29:59 +0800
commit135a623b1f783a24ff4885a3dd0209fcaeb85678 (patch)
treeae56e4c852cbc60d728ae911520b4066fcc07aa0
parentba0b9b259fdd84c34254cb9d9cab4a2dc4c91f94 (diff)
downloaddexon-sol-tools-135a623b1f783a24ff4885a3dd0209fcaeb85678.tar.gz
dexon-sol-tools-135a623b1f783a24ff4885a3dd0209fcaeb85678.tar.zst
dexon-sol-tools-135a623b1f783a24ff4885a3dd0209fcaeb85678.zip
Responsive trace
-rw-r--r--packages/dev-tools-pages/ts/components/Trace.tsx38
1 files changed, 36 insertions, 2 deletions
diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx
index f4b4e76a3..fe1f357c7 100644
--- a/packages/dev-tools-pages/ts/components/Trace.tsx
+++ b/packages/dev-tools-pages/ts/components/Trace.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
import styled from 'styled-components';
-import { colors } from '../variables';
+import { colors, media } from '../variables';
import { withContext, Props } from './withContext';
import { Alpha, Beta, Gamma } from './Typography';
@@ -101,6 +101,8 @@ const StyledSection =
background: linear-gradient(to right, ${colors.black} 50%, ${props => props.background} 50%);
padding-top: 6.25rem;
padding-bottom: 5.25rem;
+
+ ${media.small`background: none`};
`;
const Wrapper = styled(Container)`
@@ -108,7 +110,14 @@ const Wrapper = styled(Container)`
${Alpha} {
padding-bottom: 2.5rem;
+
+ ${media.small`padding-bottom: 1.875rem;`};
}
+
+ ${media.small`
+ display: block;
+ width: 100%;
+ `};
`;
const Block =
@@ -125,27 +134,52 @@ const Block =
:last-of-type {
padding-left: 6.25rem;
}
+
+ ${media.small`
+ width: 100%;
+ padding-top: 2.5rem;
+ padding-bottom: 3.4375rem;
+
+ :first-of-type {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+ :last-of-type {
+ padding-left: 1.875rem;
+ padding-right: 1.875rem;
+ }
+ `};
`;
const MainCopy = styled(Beta)`
margin-bottom: 3.1875rem;
+ ${media.small`margin-bottom: 1.125rem;`};
`;
const List = styled.ul`
margin-top: 6.25rem;
margin-bottom: 0;
padding: 0;
+
+ ${media.small`margin-top: 3.4375rem;`};
`;
const Item = styled.li`
display: flex;
align-items: center;
- margin-bottom: 4.4375rem;
+
+ :not(:last-child) {
+ margin-bottom: 4.4375rem;
+
+ ${media.small`margin-bottom: 3.4375rem;`};
+ }
`;
const Copy = styled.div`
max-width: 20rem;
margin-right: 5.875rem;
+
+ ${media.small`margin-right: 2.0625rem;`};
`;
export default withContext(Trace);