grayDark constant color
This commit is contained in:
parent
89c43c5842
commit
0c5276f108
@ -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)};
|
||||||
`;
|
`;
|
||||||
|
@ -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;
|
||||||
|
|
||||||
|
@ -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);
|
||||||
|
|
||||||
|
@ -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};
|
||||||
`;
|
`;
|
||||||
|
@ -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;
|
||||||
`}
|
`}
|
||||||
|
@ -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;
|
||||||
`}
|
`}
|
||||||
|
@ -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}%;
|
||||||
`;
|
`;
|
||||||
}}
|
}}
|
||||||
}
|
}
|
||||||
|
@ -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,
|
||||||
|
@ -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')};
|
||||||
|
@ -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)};
|
||||||
}
|
}
|
||||||
|
@ -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',
|
||||||
|
Loading…
Reference in New Issue
Block a user