crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use defined paddings

Browse Source
This commit is contained in:
Ezekiel Aquino
2018-12-10 14:26:32 +01:00
parent f93e77e77c
commit 55ed406746
4 changed files with 17 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
packages/website/ts/@next/components/button.tsx
View File

@@ -2,6 +2,7 @@ import * as React from 'react';
import { Link as ReactRouterLink } from 'react-router-dom';
import styled from 'styled-components';
import { BREAKPOINTS } from 'ts/@next/components/layout';
import { colors } from 'ts/style/colors';
interface ButtonInterface {
@@ -71,6 +72,16 @@ export const ButtonWrap = styled.div`
a + a,
a + button,
button + a {
margin-left: 10px;
@media (min-width: ${BREAKPOINTS.mobile}) {
margin-left: 10px;
}
@media (max-width: ${BREAKPOINTS.mobile}) {
margin: 0 10px;
}
}
@media (max-width: ${BREAKPOINTS.mobile}) {
white-space: nowrap;
}
`;

6
packages/website/ts/@next/components/layout.tsx
View File

@@ -1,5 +1,5 @@
import styled from 'styled-components';
import { getCSSPadding, PaddingInterface } from 'ts/@next/constants/utilities';
import {getCSSPadding, PADDING_SIZES, PaddingInterface} from 'ts/@next/constants/utilities';
interface WrapWidths {
default: string;
@@ -83,7 +83,7 @@ export const Main = styled.main`
// just <Section asElement?="div/section/footer/header/whatever" /> ?
export const Section = styled.section<SectionProps>`
width: ${props => props.isFullWidth ? `calc(100% + ${GUTTER * 2}px)` : '100%'};
padding: ${props => !props.isNoPadding && (props.isPadLarge ? '60px 30px' : '30px')};
padding: ${props => !props.isNoPadding && (props.isPadLarge ? `${PADDING_SIZES.large} ${PADDING_SIZES.default}` : PADDING_SIZES.default)};
background-color: ${props => props.bgColor};
position: ${props => props.isRelative && 'relative'};
overflow: ${props => props.isRelative && 'hidden'};
@@ -132,7 +132,7 @@ export const Column = styled.div<ColumnProps>`
background-color: ${props => props.bgColor};
@media (min-width: ${BREAKPOINTS.mobile}) {
padding: ${props => !props.isNoPadding && (props.isPadLarge ? '60px 30px' : '30px')};
padding: ${props => !props.isNoPadding && (props.isPadLarge ? `${PADDING_SIZES.large} ${PADDING_SIZES.default}` : PADDING_SIZES.default)};
width: ${props => props.colWidth ? COLUMN_WIDTHS[props.colWidth] : '100%'};
}

2
packages/website/ts/@next/components/sections/landing/hero.tsx
View File

@@ -6,7 +6,7 @@ import {Heading, Paragraph} from 'ts/@next/components/text';
import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg';
export const SectionLandingHero = () => (
<Section>
<Section isPadLarge={true}>
<Wrap isReversed={true}>
<Column colWidth="1/2">
<WrapCentered>

2
packages/website/ts/@next/constants/utilities.tsx
View File

@@ -7,7 +7,7 @@ interface PaddingSizes {
[key: string]: string;
}
const PADDING_SIZES: PaddingSizes = {
export const PADDING_SIZES: PaddingSizes = {
'default': '30px',
'large': '60px',
'small': '15px',