From 19b411e74f896b7c9864fb26dfdb45f01cd4f820 Mon Sep 17 00:00:00 2001 From: Tilman Frick Date: Tue, 19 Dec 2017 01:48:35 +0100 Subject: [PATCH] feat(lsg): new styling for pattern pane --- src/component/container/pattern_list.tsx | 2 +- src/lsg/patterns/icons/index.tsx | 4 +- src/lsg/patterns/input/index.tsx | 30 +++++++----- .../patterns/panes/patterns-pane/index.tsx | 6 ++- src/lsg/patterns/pattern-list/index.tsx | 46 ++++++++++++++++--- 5 files changed, 65 insertions(+), 23 deletions(-) diff --git a/src/component/container/pattern_list.tsx b/src/component/container/pattern_list.tsx index 3acb0fa77..d23d95f1b 100644 --- a/src/component/container/pattern_list.tsx +++ b/src/component/container/pattern_list.tsx @@ -58,7 +58,7 @@ export class PatternListContainer extends React.Component - + {list} diff --git a/src/lsg/patterns/icons/index.tsx b/src/lsg/patterns/icons/index.tsx index ca72fc74b..cfb22e897 100644 --- a/src/lsg/patterns/icons/index.tsx +++ b/src/lsg/patterns/icons/index.tsx @@ -21,8 +21,8 @@ export interface IconProps { export enum Size { XXS = 12, - XS = 24, - S = 38 + XS = 18, + S = 24 } interface StyledIconProps { diff --git a/src/lsg/patterns/input/index.tsx b/src/lsg/patterns/input/index.tsx index 3ed63ca50..3b1e6b2c3 100644 --- a/src/lsg/patterns/input/index.tsx +++ b/src/lsg/patterns/input/index.tsx @@ -1,4 +1,5 @@ import { colors } from '../colors'; +import { getSpace, Size } from '../space'; import * as React from 'react'; import styled from 'styled-components'; @@ -21,26 +22,33 @@ const StyledInput = styled.input` /* reset Styles */ -webkit-appearance:textfield; outline: none; + border: none; + background: transparent; + + margin: 0 ${getSpace(Size.L)}px; + font-size: 15px; box-sizing: border-box; display: block; - width: 100%; - padding: 8px 11px; - border: 1px solid ${colors.grey90.toString()}; - color: ${colors.grey60.toString()}; - :focus { - box-shadow: 0 0 10px ${colors.blue40.toRGBString(0.5)}; - padding: 8px 11px; - border: 1px solid ${colors.blue40.toString()}; - } + width: calc(100% - ${getSpace(Size.M)*2}px); + color: ${colors.black.toString()}; + + font-weight: 500; + transition: color 0.2s; ::placeholder { - color: ${colors.grey90.toString()}; + color: ${colors.grey50.toString()}; + } + + :hover { + ::placeholder { + color: ${colors.black.toString()}; + } } ::-webkit-search-decoration { display:none; - } + } `; const Input: React.StatelessComponent = props => ( diff --git a/src/lsg/patterns/panes/patterns-pane/index.tsx b/src/lsg/patterns/panes/patterns-pane/index.tsx index 78a9b07bd..b6b96b49e 100644 --- a/src/lsg/patterns/panes/patterns-pane/index.tsx +++ b/src/lsg/patterns/panes/patterns-pane/index.tsx @@ -8,9 +8,11 @@ const StyledPatternsPane = styled.div` flex-grow: 2; flex-shrink: 0; flex-basis: 40%; - padding: ${getSpace(Size.L)}px 0; - border-top: 2px solid ${colors.grey60.toString()}; + padding: ${getSpace(Size.M)}px 0; + border-top: 1px solid ${colors.grey80.toString()}; overflow: scroll; + margin-left: -${getSpace(Size.L)}px; + margin-right: -${getSpace(Size.L)}px; `; const PatternsPane: React.StatelessComponent<{}> = props => {props.children}; diff --git a/src/lsg/patterns/pattern-list/index.tsx b/src/lsg/patterns/pattern-list/index.tsx index ab622f7a0..9ddec374f 100644 --- a/src/lsg/patterns/pattern-list/index.tsx +++ b/src/lsg/patterns/pattern-list/index.tsx @@ -17,24 +17,46 @@ const StyledPatternList = styled.ul` display: block; padding: 0; margin: 0; + + > div { + display: flex; + flex-wrap: wrap; + } `; const StyledPatternLabel = styled.div` margin-bottom: ${getSpace(Size.S)}px; + margin-top: ${getSpace(Size.L)}px; + margin-left: ${getSpace(Size.L)}px; color: ${colors.grey60.toString()}; + text-transform: capitalize; `; const StyledPatternListItem = styled.li` - display: flex; - align-items: center; + display: block; padding: ${getSpace(Size.S)}px; - border: 1px solid ${colors.grey90.toString()}; - margin: 0 0 ${getSpace(Size.S)}px 0; + margin: 0 0 ${getSpace(Size.XS)}px 0; border-radius: 3px; background: ${colors.white.toString()}; font-family: ${fonts().NORMAL_FONT}; font-size: 12px; color: ${colors.black.toString()}; + width: calc(50% - ${getSpace(Size.XS)/2}px - ${getSpace(Size.L)}px); + box-sizing: border-box; + text-align: center; + + box-shadow: 0 1px 3px 0 rgba(0,0,0,0.15); + margin-left: ${getSpace(Size.L)}px; + transition: box-shadow 0.2s; + + &:nth-of-type(2n) { + margin-left: ${getSpace(Size.XS)}px; + margin-right: ${getSpace(Size.L)}px; + } + + &:hover { + box-shadow: 0 1px 3px 0 rgba(0,0,0,0.3); + } ${(props: PatternListItemProps) => props.draggable ? 'cursor: move;' : props.onClick ? 'cursor: pointer;' : ''}; @@ -42,11 +64,21 @@ const StyledPatternListItem = styled.li` const StyledSVG = styled.svg` margin-right: ${getSpace(Size.L)}px; - fill: ${colors.grey60.toString()}; + fill: ${colors.grey50.toString()}; `; const StyledIcon = styled(Icon)` - margin-right: ${getSpace(Size.L)}px; + margin: 0 auto; + display: block; + margin-bottom: ${getSpace(Size.XS)}px; +`; + +const StyledPatternListItemLabel = styled.div` + text-align: center; + width: 100%; + display: block; + text-transform: capitalize; + color: ${colors.grey36.toString()}; `; export const PatternListItem: React.StatelessComponent = props => { @@ -63,7 +95,7 @@ export const PatternListItem: React.StatelessComponent = p color={colors.grey60} /> )} - {props.children} + {props.children} ); };