grayDark constant color

This commit is contained in:
Sérgio Ramos 2017-02-06 16:18:44 +00:00
parent 89c43c5842
commit 0c5276f108
11 changed files with 52 additions and 55 deletions

View File

@ -28,7 +28,7 @@ const {
// Main Contonent Wrapper Styles // Main Contonent Wrapper Styles
const StyledDiv = styled.div` const StyledDiv = styled.div`
border-bottom: solid ${remcalc(1)} #d8d8d8; border-bottom: solid ${remcalc(1)} ${colors.greyDark};
padding: ${remcalc(30)} 0; padding: ${remcalc(30)} 0;
margin-bottom: ${remcalc(21)}; margin-bottom: ${remcalc(21)};
`; `;

View File

@ -5,6 +5,7 @@ const Styled = require('styled-components');
const Avatar = require('@ui/components/avatar'); const Avatar = require('@ui/components/avatar');
const Container = require('@ui/components/container'); const Container = require('@ui/components/container');
const constants = require('@ui/shared/constants');
const PropTypes = require('@root/prop-types'); const PropTypes = require('@root/prop-types');
const selectors = require('@state/selectors'); const selectors = require('@state/selectors');
const Ul = require('@ui/components/horizontal-list/ul'); const Ul = require('@ui/components/horizontal-list/ul');
@ -22,6 +23,10 @@ const {
default: styled default: styled
} = Styled; } = Styled;
const {
colors
} = constants;
const { const {
orgsSelector orgsSelector
} = selectors; } = selectors;
@ -32,7 +37,7 @@ const {
const StyledNav = styled.div` const StyledNav = styled.div`
background-color: #f2f2f2; background-color: #f2f2f2;
border-bottom: ${remcalc(1)} solid #d8d8d8; border-bottom: ${remcalc(1)} solid ${colors.greyDark};
& ul { & ul {
height: ${remcalc(60)}; height: ${remcalc(60)};
@ -45,7 +50,7 @@ const NavigationLinkContainer = styled.div`
position: relative; position: relative;
padding: ${remcalc(11)} ${remcalc(12)} ${remcalc(12)}; padding: ${remcalc(11)} ${remcalc(12)} ${remcalc(12)};
color: #646464; color: #646464;
border: solid ${remcalc(1)} #d8d8d8; border: solid ${remcalc(1)} ${colors.greyDark};
height: ${remcalc(24)}; height: ${remcalc(24)};
background-color: #f2f2f2; background-color: #f2f2f2;

View File

@ -34,7 +34,7 @@ const backgroundHover = match({
}, base.primaryLight); }, base.primaryLight);
const backgroundActive = match({ const backgroundActive = match({
secondary: base.greyDark, secondary: base.greyDarker,
disabled: inactive.default disabled: inactive.default
}, base.primaryDark); }, base.primaryDark);
@ -49,7 +49,7 @@ const borderHover = match({
}, base.primaryDark); }, base.primaryDark);
const borderActive = match({ const borderActive = match({
secondary: base.greyDark, secondary: base.greyDarker,
disabled: inactive.default disabled: inactive.default
}, base.primaryDark); }, base.primaryDark);

View File

@ -20,9 +20,9 @@ const {
const paper = ` const paper = `
0 ${remcalc(8)} 0 ${remcalc(-5)} ${colors.base.grey}, 0 ${remcalc(8)} 0 ${remcalc(-5)} ${colors.base.grey},
0 ${remcalc(8)} ${remcalc(1)} ${remcalc(-4)} ${colors.base.greyDark}, 0 ${remcalc(8)} ${remcalc(1)} ${remcalc(-4)} ${colors.base.greyDarker},
0 ${remcalc(16)} 0 ${remcalc(-10)} ${colors.base.grey}, 0 ${remcalc(16)} 0 ${remcalc(-10)} ${colors.base.grey},
0 ${remcalc(16)} ${remcalc(1)} ${remcalc(-9)} ${colors.base.greyDark}; 0 ${remcalc(16)} ${remcalc(1)} ${remcalc(-9)} ${colors.base.greyDarker};
`; `;
const height = (props) => props.collapsed const height = (props) => props.collapsed
@ -51,7 +51,7 @@ const Item = styled(Row)`
height: ${height}; height: ${height};
min-height: ${minHeight}; min-height: ${minHeight};
box-shadow: ${shadow}; box-shadow: ${shadow};
border: ${remcalc(1)} solid #D8D8D8; border: ${remcalc(1)} solid ${colors.greyDark};
background-color: ${colors.base.white}; background-color: ${colors.base.white};
margin-bottom: ${marginBottom}; margin-bottom: ${marginBottom};
`; `;

View File

@ -8,9 +8,9 @@ const {
remcalc remcalc
} = fns; } = fns;
const { const {
breakpoints breakpoints,
colors
} = constants; } = constants;
const { const {
@ -20,7 +20,7 @@ const {
const StyledTableHeadItem = styled.td` const StyledTableHeadItem = styled.td`
border-bottom: none; border-bottom: none;
padding: ${remcalc(24)}; padding: ${remcalc(24)};
${breakpoints.medium` ${breakpoints.medium`
${props => `width: ${props.mdWidth}`} ${props => `width: ${props.mdWidth}`}
`} `}
@ -30,8 +30,8 @@ const StyledTableHeadItem = styled.td`
const StyledTableHead = styled.thead` const StyledTableHead = styled.thead`
background: #fafafa; background: #fafafa;
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05); box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
border: solid ${remcalc(1)} #d8d8d8; border: solid ${remcalc(1)} ${colors.greyDark};
${breakpoints.smallOnly` ${breakpoints.smallOnly`
display: none; display: none;
`} `}

View File

@ -13,12 +13,13 @@ const {
} = Styled; } = Styled;
const { const {
breakpoints breakpoints,
colors
} = constants; } = constants;
const StyledRow = styled.tr` const StyledRow = styled.tr`
border: solid ${remcalc(1)} #d8d8d8; border: solid ${remcalc(1)} ${colors.greyDark};
${breakpoints.smallOnly` ${breakpoints.smallOnly`
display: block; display: block;
`} `}
@ -26,7 +27,7 @@ const StyledRow = styled.tr`
const StyledTableItem = styled.td` const StyledTableItem = styled.td`
padding: ${remcalc(24)}; padding: ${remcalc(24)};
${breakpoints.smallOnly` ${breakpoints.smallOnly`
display: block; display: block;
`} `}

View File

@ -1,9 +1,10 @@
const fns = require('../../shared/functions');
const composers = require('../../shared/composers');
const React = require('react'); const React = require('react');
const Styled = require('styled-components'); const Styled = require('styled-components');
const fns = require('../../shared/functions');
const composers = require('../../shared/composers');
const constants = require('../../shared/constants');
const { const {
default: styled, default: styled,
css css
@ -17,19 +18,23 @@ const {
remcalc remcalc
} = fns; } = fns;
const {
colors
} = constants;
const StyledTableRow = styled.div` const StyledTableRow = styled.div`
${clearfix} ${clearfix}
padding: ${remcalc(24)} 0; padding: ${remcalc(24)} 0;
border-bottom: solid 1px #d8d8d8; border-bottom: solid 1px ${colors.greyDark};
& > .table-item { & > .table-item {
text-align: center; text-align: center;
${props => { ${props => {
const width = 100 / props.itemCount; const width = 100 / props.itemCount;
return css` return css`
width: ${width}%; width: ${width}%;
`; `;
}} }}
} }

View File

@ -1,45 +1,30 @@
const React = require('react'); const React = require('react');
const Styled = require('styled-components'); const Styled = require('styled-components');
const constants = require('../../shared/constants');
const { const {
default: styled default: styled
} = Styled; } = Styled;
const {
colors
} = constants;
const StyledTableWrapper = styled.section` const StyledTableWrapper = styled.section`
border: solid 1px #d8d8d8 border: solid 1px ${colors.greyDark}
font-family: 'LibreFranklin', sans-serif; font-family: 'LibreFranklin', sans-serif;
font-style: normal; font-style: normal;
`; `;
// const StyledTableHead = styled.thead``;
// const StyledTableBody = styled.tbody``;
// const renderTable = ({
// hasHeader = false,
// hasBody = true,
// width = '100%'
// }) => {
//
// const tableBody = () => {
//
// return (
// <StyledTableBody />
// )
// }
//
// }
const Table = ({ const Table = ({
children, children,
title, title,
}) => { }) => (
<StyledTableWrapper>
return ( {children}
<StyledTableWrapper> </StyledTableWrapper>
{children} );
</StyledTableWrapper>
);
};
Table.propTypes = { Table.propTypes = {
children: React.PropTypes.node, children: React.PropTypes.node,

View File

@ -61,7 +61,7 @@ const StyledRadio = styled.input`
const StyledLabel = styled.label` const StyledLabel = styled.label`
background: transparent; background: transparent;
border: ${remcalc(1)} solid #D8D8D8; border: ${remcalc(1)} solid ${colors.greyDark};
display: inline-block; display: inline-block;
font-size: ${remcalc(20)}; font-size: ${remcalc(20)};
padding: ${remcalc('12 25')}; padding: ${remcalc('12 25')};

View File

@ -68,7 +68,7 @@ const StyledList = styled.ul`
} }
&:before { &:before {
border-color: rgba(216, 216, 216, 0); border-color: rgba(216, 216, 216, 0);
border-bottom-color: #d8d8d8; border-bottom-color: ${colors.greyDark};
border-width: ${remcalc(12)}; border-width: ${remcalc(12)};
margin-left: ${remcalc(-12)}; margin-left: ${remcalc(-12)};
} }

View File

@ -15,7 +15,8 @@ const base = {
white: '#FFFFFF', white: '#FFFFFF',
grey: '#f8f8f8', grey: '#f8f8f8',
greyLight: '#e9e9e9', greyLight: '#e9e9e9',
greyDark: '#919191', greyDark: '#d8d8d8',
greyDarker: '#919191',
red: '#DA4B42', red: '#DA4B42',
yellow: '#E4A800', yellow: '#E4A800',
green: '#00AF66', green: '#00AF66',