From 685b88148505d9310c2a923544b89a5f702adab6 Mon Sep 17 00:00:00 2001 From: Brad Adams Date: Sat, 24 Mar 2018 21:21:16 +0100 Subject: [PATCH 1/2] Initial css style resets --- .../src/components/Card/CardContent.js | 26 +++++--- .../src/components/Card/CardEmptyState.js | 21 ++++--- .../src/components/Card/CardMedia/wrap.js | 13 ++-- .../src/components/Card/CardText.js | 11 +++- .../src/components/Card/CardWrap.js | 59 ++++++++++--------- .../react-microlink/src/utils/styleResets.js | 10 ++++ 6 files changed, 86 insertions(+), 54 deletions(-) create mode 100644 packages/react-microlink/src/utils/styleResets.js diff --git a/packages/react-microlink/src/components/Card/CardContent.js b/packages/react-microlink/src/components/Card/CardContent.js index 88e4e3c79..3abc5ab26 100644 --- a/packages/react-microlink/src/components/Card/CardContent.js +++ b/packages/react-microlink/src/components/Card/CardContent.js @@ -1,9 +1,10 @@ import React from 'react' -import styled, {css} from 'styled-components' +import styled, { css } from 'styled-components' import extractDomain from 'extract-domain' import CardText from './CardText' -import {media} from '../../utils' +import { media } from '../../utils' +import { backgroundColorReset, sizeReset } from '../../utils/styleResets' const isLarge = cardSize => cardSize === 'large' @@ -18,7 +19,7 @@ const mobileDescriptionStyle = css` text-overflow: ellipsis; white-space: nowrap; } - `} + `}; ` export const Content = styled.div` @@ -29,7 +30,9 @@ export const Content = styled.div` padding: 10px 15px; min-width: 0; box-sizing: border-box; - ${({cardSize}) => isLarge(cardSize) && largeContentStyle}; + ${({ cardSize }) => isLarge(cardSize) && largeContentStyle}; + ${backgroundColorReset}; + ${sizeReset}; ` const Title = styled.header` @@ -37,6 +40,8 @@ const Title = styled.header` font-weight: bold; margin: 0; flex-grow: 1.2; + ${backgroundColorReset}; + ${sizeReset}; ` const Description = styled.div` @@ -44,21 +49,28 @@ const Description = styled.div` flex-grow: 2; margin: auto 0; line-height: 18px; - ${({cardSize}) => !isLarge(cardSize) && mobileDescriptionStyle}; + ${({ cardSize }) => !isLarge(cardSize) && mobileDescriptionStyle}; + ${backgroundColorReset}; + ${sizeReset}; ` const Url = styled.footer` font-size: 12px; margin: 0; flex-grow: 0; + ${backgroundColorReset}; + ${sizeReset}; ` -export default ({title, description, url, cardSize, className}) => ( +export default ({ title, description, url, cardSize, className }) => ( <CardText lines={1}>{title}</CardText> - + {description} diff --git a/packages/react-microlink/src/components/Card/CardEmptyState.js b/packages/react-microlink/src/components/Card/CardEmptyState.js index c2546f3a8..1fcc1dc24 100644 --- a/packages/react-microlink/src/components/Card/CardEmptyState.js +++ b/packages/react-microlink/src/components/Card/CardEmptyState.js @@ -7,7 +7,7 @@ import { Content } from './CardContent' import { media } from '../../utils' const EmptyImage = CardImage.extend` - ${emptyStateImageAnimation} + ${emptyStateImageAnimation}; ` const EmptyTitle = styled.span` @@ -17,20 +17,18 @@ const EmptyTitle = styled.span` background: #e1e8ed; margin: 2px 0 8px; opacity: 0.8; - ${emptyStateAnimation} + ${emptyStateAnimation}; ` const EmptyDescription = styled.span` width: 95%; + height: 33px; display: block; background: #e1e8ed; margin-bottom: 12px; opacity: 0.8; position: relative; - ${emptyStateAnimation} - animation-delay: .125s; - - height: 33px; + ${emptyStateAnimation} animation-delay: .125s; &::before { content: ''; @@ -49,9 +47,11 @@ const EmptyDescription = styled.span` bottom: 14px; } - ${({cardSize}) => cardSize !== 'large' && media.mobile` + ${({ cardSize }) => + cardSize !== 'large' && + media.mobile` height: 14px; - `} + `}; ` const EmptyLink = styled.span` @@ -60,11 +60,10 @@ const EmptyLink = styled.span` display: block; background: #e1e8ed; opacity: 0.8; - ${emptyStateAnimation} - animation-delay: .25s; + ${emptyStateAnimation} animation-delay: .25s; ` -const CardEmptyState = ({cardSize}) => ( +const CardEmptyState = ({ cardSize }) => ( diff --git a/packages/react-microlink/src/components/Card/CardMedia/wrap.js b/packages/react-microlink/src/components/Card/CardMedia/wrap.js index b9e25eb61..ec35edce1 100644 --- a/packages/react-microlink/src/components/Card/CardMedia/wrap.js +++ b/packages/react-microlink/src/components/Card/CardMedia/wrap.js @@ -1,7 +1,8 @@ -import styled, {css} from 'styled-components' +import styled, { css } from 'styled-components' -import {media, isLarge} from '../../../utils' -import {loadingOverlay} from './loader' +import { media, isLarge } from '../../../utils' +import { sizeReset } from '../../../utils/styleResets' +import { loadingOverlay } from './loader' const largeStyle = css` flex: 1; @@ -23,6 +24,7 @@ export default styled.div` height: auto; position: relative; transition: flex-basis 0.25s ease-in-out; + ${sizeReset}; &::before { content: ''; @@ -30,7 +32,6 @@ export default styled.div` display: block; } - ${loadingOverlay} - - ${({cardSize}) => (isLarge(cardSize) ? largeStyle : mobileStyle)} + ${loadingOverlay} ${({ cardSize }) => + isLarge(cardSize) ? largeStyle : mobileStyle}; ` diff --git a/packages/react-microlink/src/components/Card/CardText.js b/packages/react-microlink/src/components/Card/CardText.js index 0510ca628..ca01a4ea9 100644 --- a/packages/react-microlink/src/components/Card/CardText.js +++ b/packages/react-microlink/src/components/Card/CardText.js @@ -2,15 +2,24 @@ import React from 'react' import styled from 'styled-components' import NanoClamp from 'nanoclamp' -const Clamp = ({children, className, lines}) => ( +import { backgroundColorReset, sizeReset } from '../../utils/styleResets' + +const Clamp = ({ children, className, lines }) => ( ) const CardText = styled(Clamp)` &&& { font-family: inherit; + font-size: inherit; + font-weight: inherit; color: inherit; margin: 0; + padding: 0; + border: 0; + text-decoration: none; + ${backgroundColorReset}; + ${sizeReset}; } ` diff --git a/packages/react-microlink/src/components/Card/CardWrap.js b/packages/react-microlink/src/components/Card/CardWrap.js index 8bab0c222..6806f7137 100644 --- a/packages/react-microlink/src/components/Card/CardWrap.js +++ b/packages/react-microlink/src/components/Card/CardWrap.js @@ -5,7 +5,7 @@ import { media, isLarge } from '../../utils' const HEIGHT = '382px' -const contrastStyle = ({backgroundColor, color}) => css` +const contrastStyle = ({ backgroundColor, color }) => css` background-color: ${backgroundColor}; border-color: ${color}; transition-property: filter; @@ -26,62 +26,63 @@ const largeStyle = css` ${media.mobile` height: calc(${HEIGHT} * 7/9); - `} + `}; ` const hoverStyle = css` transition-property: background, border-color; &:hover { - background: #F5F8FA; - border-color: rgba(136,153,166,.5); + background: #f5f8fa; + border-color: rgba(136, 153, 166, 0.5); } ` -const reverseStyle = ({cardSize}) => css` - flex-direction: ${isLarge(cardSize) ? 'column-reverse' : 'row-reverse'} +const reverseStyle = ({ cardSize }) => css` + flex-direction: ${isLarge(cardSize) ? 'column-reverse' : 'row-reverse'}; ` -const roundStyle = ({round}) => css` +const roundStyle = ({ round }) => css` border-radius: ${round === true ? `.42857em` : round}; ` const style = css` max-width: 500px; - background-color: #fff; - border-width: 1px; - border-style: solid; - border-color: #E1E8ED; + background: #fff; + border: 1px solid #e1e8ed; + margin: 0; + padding: 0; + outline: none; overflow: hidden; color: #181919; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; display: flex; text-decoration: none; - opacity:1; + opacity: 1; position: relative; - - transition-duration: .15s; + transition-duration: 0.15s; transition-timing-function: ease-in-out; + box-sizing: border-box; - &:active, - &:hover { - outline: 0; + * { + box-sizing: inherit; } - ${({loading, contrast}) => !loading && !contrast && hoverStyle} - - ${({round}) => round && roundStyle} - - ${({cardSize}) => isLarge(cardSize) && largeStyle} - - ${({reverse}) => reverse && reverseStyle} - - ${({backgroundColor, color, contrast}) => contrast && color && backgroundColor && contrastStyle} - - ${({backgroundColor, color, contrast}) => contrast && (!color || !backgroundColor) && hoverStyle} + ${({ loading, contrast }) => !loading && !contrast && hoverStyle} ${({ + round +}) => round && roundStyle} ${({ cardSize }) => + isLarge(cardSize) && largeStyle} ${({ reverse }) => + reverse && reverseStyle} ${({ backgroundColor, color, contrast }) => + contrast && color && backgroundColor && contrastStyle} ${({ + backgroundColor, + color, + contrast +}) => contrast && (!color || !backgroundColor) && hoverStyle}; ` const CardWrap = ({ is, rel, href, target, ...props }) => { - const el = styled[is]`${style}` + const el = styled[is]` + ${style}; + ` const opts = is === 'a' ? { ...props, href, rel, target } : props return createElement(el, opts) } diff --git a/packages/react-microlink/src/utils/styleResets.js b/packages/react-microlink/src/utils/styleResets.js new file mode 100644 index 000000000..eb7aada97 --- /dev/null +++ b/packages/react-microlink/src/utils/styleResets.js @@ -0,0 +1,10 @@ +import { css } from 'styled-components' + +export const backgroundColorReset = css` + background-color: inherit; +` + +export const sizeReset = css` + width: auto; + height: auto; +` From 6187bb128506807dc54622b64b7dbe1a09f253f5 Mon Sep 17 00:00:00 2001 From: Brad Adams Date: Sat, 24 Mar 2018 21:39:39 +0100 Subject: [PATCH 2/2] Misc. text css resets --- packages/react-microlink/src/components/Card/CardText.js | 2 ++ packages/react-microlink/src/components/Card/CardWrap.js | 2 ++ 2 files changed, 4 insertions(+) diff --git a/packages/react-microlink/src/components/Card/CardText.js b/packages/react-microlink/src/components/Card/CardText.js index ca01a4ea9..f39c3453f 100644 --- a/packages/react-microlink/src/components/Card/CardText.js +++ b/packages/react-microlink/src/components/Card/CardText.js @@ -18,6 +18,8 @@ const CardText = styled(Clamp)` padding: 0; border: 0; text-decoration: none; + text-align: inherit; + direction: inherit; ${backgroundColorReset}; ${sizeReset}; } diff --git a/packages/react-microlink/src/components/Card/CardWrap.js b/packages/react-microlink/src/components/Card/CardWrap.js index 6806f7137..b806995e7 100644 --- a/packages/react-microlink/src/components/Card/CardWrap.js +++ b/packages/react-microlink/src/components/Card/CardWrap.js @@ -59,6 +59,8 @@ const style = css` text-decoration: none; opacity: 1; position: relative; + text-align: left; + direction: ltr; transition-duration: 0.15s; transition-timing-function: ease-in-out; box-sizing: border-box;