Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WIP] CSS resets #94

Closed
wants to merge 2 commits into from
Closed

[WIP] CSS resets #94

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
685b881
Initial css style resets
breadadams Mar 24, 2018
6187bb1
Misc. text css resets
breadadams Mar 24, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 19 additions & 7 deletions packages/react-microlink/src/components/Card/CardContent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'

Expand All @@ -18,7 +19,7 @@ const mobileDescriptionStyle = css`
text-overflow: ellipsis;
white-space: nowrap;
}
`}
`};
`

export const Content = styled.div`
Expand All @@ -29,36 +30,47 @@ 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`
font-size: 16px;
font-weight: bold;
margin: 0;
flex-grow: 1.2;
${backgroundColorReset};
${sizeReset};
`

const Description = styled.div`
font-size: 14px;
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 }) => (
<Content className={className} cardSize={cardSize}>
<Title className='microlink_card__content_title'>
<CardText lines={1}>{title}</CardText>
</Title>
<Description className='microlink_card__content_description' cardSize={cardSize}>
<Description
className='microlink_card__content_description'
cardSize={cardSize}
>
<CardText lines={2}>{description}</CardText>
</Description>
<Url className='microlink_card__content_url'>
Expand Down
21 changes: 10 additions & 11 deletions packages/react-microlink/src/components/Card/CardEmptyState.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { Content } from './CardContent'
import { media } from '../../utils'

const EmptyImage = CardImage.extend`
${emptyStateImageAnimation}
${emptyStateImageAnimation};
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is the semicolon necessary? 🤔

`

const EmptyTitle = styled.span`
Expand All @@ -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: '';
Expand All @@ -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`
Expand All @@ -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 }) => (
<Fragment>
<EmptyImage cardSize={cardSize} />
<Content cardSize={cardSize}>
Expand Down
13 changes: 7 additions & 6 deletions packages/react-microlink/src/components/Card/CardMedia/wrap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -23,14 +24,14 @@ export default styled.div`
height: auto;
position: relative;
transition: flex-basis 0.25s ease-in-out;
${sizeReset};

&::before {
content: '';
padding-bottom: 100%;
display: block;
}

${loadingOverlay}

${({cardSize}) => (isLarge(cardSize) ? largeStyle : mobileStyle)}
${loadingOverlay} ${({ cardSize }) =>
isLarge(cardSize) ? largeStyle : mobileStyle};
`
13 changes: 12 additions & 1 deletion packages/react-microlink/src/components/Card/CardText.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,26 @@ 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 }) => (
<NanoClamp className={className} lines={lines} text={children} is='p' />
)

const CardText = styled(Clamp)`
&&& {
font-family: inherit;
font-size: inherit;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

are this inherit styles resets?

font-weight: inherit;
color: inherit;
margin: 0;
padding: 0;
border: 0;
text-decoration: none;
text-align: inherit;
direction: inherit;
${backgroundColorReset};
${sizeReset};
}
`

Expand Down
61 changes: 32 additions & 29 deletions packages/react-microlink/src/components/Card/CardWrap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -26,62 +26,65 @@ 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;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks a reset

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;
text-align: left;
direction: ltr;
transition-duration: 0.15s;
transition-timing-function: ease-in-out;
box-sizing: border-box;

&:active,
&:hover {
outline: 0;
* {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

uh, sure?

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)
}
Expand Down
10 changes: 10 additions & 0 deletions packages/react-microlink/src/utils/styleResets.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { css } from 'styled-components'

export const backgroundColorReset = css`
background-color: inherit;
`

export const sizeReset = css`
Copy link
Member

@Kikobeats Kikobeats Mar 25, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was thinking more in a file that content reset per each component, for example:

export const cardDescription = css`
text-decoration: none;
`

Then when you load the specific reset style into the component is easy to determinate what style are part of the component and what are part of the reset:

// resets
${reset.cardDescription}; 
// specific styles
font-size: 14px;
flex-grow: 2;
margin: auto 0;
line-height: 18px;
${({cardSize}) => !isLarge(cardSize) && mobileDescriptionStyle};

width: auto;
height: auto;
`