convert every px measure into rem

This commit is contained in:
Sérgio Ramos 2017-01-12 19:04:52 +00:00
parent 4eea80a74d
commit 124ec8e6d3
25 changed files with 161 additions and 126 deletions

View File

@ -23,10 +23,15 @@ const {
const { const {
remcalc remcalc
} = fns; } = fns;
const { const {
pseudoEl pseudoEl
} = composers; } = composers;
const borderSide = props => props.toggled
? 'bottom'
: 'top';
const StyledHeader = styled.header` const StyledHeader = styled.header`
background-color: #ffffff; background-color: #ffffff;
padding-top: ${remcalc(21)}; padding-top: ${remcalc(21)};
@ -34,7 +39,7 @@ const StyledHeader = styled.header`
`; `;
const StyledLogo = styled.img` const StyledLogo = styled.img`
padding-top: ${remcalc(10)} padding-top: ${remcalc(10)};
`; `;
const StyledProfileWrapper = styled.div` const StyledProfileWrapper = styled.div`
@ -43,26 +48,26 @@ const StyledProfileWrapper = styled.div`
const StyledAvatarWrapper = styled.div` const StyledAvatarWrapper = styled.div`
&:after { &:after {
border-left: 5px solid transparent; border-left: ${remcalc(5)} solid transparent;
border-right: 5px solid transparent; border-right: ${remcalc(5)} solid transparent;
border-${props => props.toggled ? 'bottom' : 'top'}: 5px solid black; border-${borderSide}: ${remcalc(5)} solid black;
${pseudoEl({ ${pseudoEl({
top: '50%', top: '50%',
right: '10px' right: remcalc(10)
})} })}
} }
`; `;
const StyledTooltipWrapper = styled.div` const StyledTooltipWrapper = styled.div`
position: absolute; position: absolute;
left: -40px; left: ${remcalc(-40)};
bottom: -180px; bottom: ${remcalc(-180)};
`; `;
const StyledName = styled.span` const StyledName = styled.span`
position: relative; position: relative;
top: -12px; top: ${remcalc(-12)};
`; `;
const EmptyButton = styled.button` const EmptyButton = styled.button`
@ -71,7 +76,7 @@ const EmptyButton = styled.button`
`; `;
const StyledAvatar = styled(Avatar)` const StyledAvatar = styled(Avatar)`
marginLeft: 12px; marginLeft: ${remcalc(12)};
`; `;
const arrowPosition = { const arrowPosition = {

View File

@ -28,7 +28,7 @@ const StyledTile = styled.div`
width: ${remcalc(300)}; width: ${remcalc(300)};
height: ${remcalc(247)}; height: ${remcalc(247)};
box-shadow: ${boxes.bottomShaddow}; box-shadow: ${boxes.bottomShaddow};
border: 1px solid ${colors.borderSecondary}; border: ${remcalc(1)} solid ${colors.borderSecondary};
background-color: ${colors.brandSecondary}; background-color: ${colors.brandSecondary};
${breakpoints.small` ${breakpoints.small`

View File

@ -15,10 +15,10 @@ const {
} = Styled; } = Styled;
const { const {
generateFonts generateFonts,
remcalc
} = fncs; } = fncs;
// The name that will be used in the 'font-family' property // The name that will be used in the 'font-family' property
const fontFamilies = [ const fontFamilies = [
'LibreFranklin' 'LibreFranklin'
@ -156,7 +156,7 @@ module.exports = styled.div`
} }
& figure { & figure {
margin: 1em 40px; margin: 1em ${remcalc(40)};
} }
& hr { & hr {
@ -208,12 +208,12 @@ module.exports = styled.div`
& [type="button"]:-moz-focusring, & [type="button"]:-moz-focusring,
& [type="reset"]:-moz-focusring, & [type="reset"]:-moz-focusring,
& [type="submit"]:-moz-focusring { & [type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText; outline: ${remcalc(1)} dotted ButtonText;
} }
& fieldset { & fieldset {
border: 1px solid #c0c0c0; border: ${remcalc(1)} solid #c0c0c0;
margin: 0 2px; margin: 0 ${remcalc(2)};
padding: 0.35em 0.625em 0.75em; padding: 0.35em 0.625em 0.75em;
} }
@ -245,7 +245,7 @@ module.exports = styled.div`
& [type="search"] { & [type="search"] {
-webkit-appearance: textfield; -webkit-appearance: textfield;
outline-offset: -2px; outline-offset: ${remcalc(-2)};
} }
& [type="search"]::-webkit-search-cancel-button, & [type="search"]::-webkit-search-cancel-button,
@ -302,7 +302,7 @@ module.exports = styled.div`
& abbr[title], & abbr[title],
& abbr[data-original-title] { & abbr[data-original-title] {
cursor: help; cursor: help;
border-bottom: 1px dotted ${typography.abbrBorderColor}; border-bottom: ${remcalc(1)} dotted ${typography.abbrBorderColor};
} }
& address { & address {
@ -352,8 +352,8 @@ module.exports = styled.div`
} }
&:focus { &:focus {
outline: 5px auto -webkit-focus-ring-color; outline: ${remcalc(5)} auto -webkit-focus-ring-color;
outline-offset: -2px; outline-offset: ${remcalc(-2)};
} }
} }
@ -444,8 +444,8 @@ module.exports = styled.div`
} }
& button:focus { & button:focus {
outline: 1px dotted; outline: ${remcalc(1)} dotted;
outline: 5px auto -webkit-focus-ring-color; outline: ${remcalc(5)} auto -webkit-focus-ring-color;
} }
& input, & input,

View File

@ -96,7 +96,7 @@ const style = css`
background-image: none; background-image: none;
background-color: ${background}; background-color: ${background};
border-radius: ${borderRadius}; border-radius: ${borderRadius};
border: solid 1px ${border}; border: solid ${remcalc(1)} ${border};
box-shadow: ${boxes.bottomShaddow}; box-shadow: ${boxes.bottomShaddow};
@ -104,12 +104,12 @@ const style = css`
outline: 0; outline: 0;
text-decoration: none; text-decoration: none;
background-color: ${background}; background-color: ${background};
border: solid 1px ${border}; border: solid ${remcalc(1)} ${border};
} }
&:hover { &:hover {
background-color: ${backgroundHover}; background-color: ${backgroundHover};
border: solid 1px ${borderHover}; border: solid ${remcalc(1)} ${borderHover};
} }
&:active, &:active,
@ -119,7 +119,7 @@ const style = css`
outline: 0; outline: 0;
background-color: ${backgroundActive}; background-color: ${backgroundActive};
border: solid 1px ${borderActive}; border: solid ${remcalc(1)} ${borderActive};
} }
&[disabled] { &[disabled] {

View File

@ -1,11 +1,16 @@
const React = require('react');
const constants = require('../../shared/constants'); const constants = require('../../shared/constants');
const fns = require('../../shared/functions');
const React = require('react');
const Styled = require('styled-components'); const Styled = require('styled-components');
const { const {
boxes boxes
} = constants; } = constants;
const {
remcalc
} = fns;
const { const {
default: styled, default: styled,
} = Styled; } = Styled;
@ -26,8 +31,8 @@ const StyledInput = styled.input`
const StyledLabel = styled.label` const StyledLabel = styled.label`
color: rgb(100, 100, 100); color: rgb(100, 100, 100);
position: absolute; position: absolute;
width: 24px; width: ${remcalc(24)};
height: 24px; height: ${remcalc(24)};
top: 0; top: 0;
border-radius: ${boxes.borderRadius}; border-radius: ${boxes.borderRadius};
background-color: rgb(255, 255, 255); background-color: rgb(255, 255, 255);
@ -38,12 +43,12 @@ const StyledLabel = styled.label`
opacity: 0; opacity: 0;
content: ''; content: '';
position: absolute; position: absolute;
width: 9px; width: ${remcalc(9)};
height: 4px; height: ${remcalc(4)};
background: transparent; background: transparent;
top: 7px; top: ${remcalc(7)};
left: 7px; left: ${remcalc(7)};
border: 3px solid #333; border: ${remcalc(3)} solid #333;
border-top: none; border-top: none;
border-right: none; border-right: none;
transform: rotate(-45deg); transform: rotate(-45deg);
@ -57,8 +62,8 @@ const StyledLabel = styled.label`
`; `;
const StyledDiv = styled.div` const StyledDiv = styled.div`
width: 24px; width: ${remcalc(24)};
height: 24px; height: ${remcalc(24)};
position: relative; position: relative;
`; `;

View File

@ -15,5 +15,5 @@ module.exports = styled.h1`
font-style: normal; font-style: normal;
font-stretch: normal; font-stretch: normal;
color: #364acd; color: #364acd;
border-bottom: 1px solid #d8d8d8; border-bottom: ${remcalc(1)} solid #d8d8d8;
`; `;

View File

@ -25,9 +25,9 @@ const {
const successBakcground = css` const successBakcground = css`
background-color: ${colors.brandSecondary}; background-color: ${colors.brandSecondary};
background-image: url("./input-confirm.svg"); background-image: url('./input-confirm.svg');
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 98% 20px; background-position: 98% ${remcalc(20)};
`; `;
const defaultBackground = css` const defaultBackground = css`
@ -46,7 +46,7 @@ const InputField = styled.input`
border-color: ${props => props.error ? colors.alert : 'auto'} border-color: ${props => props.error ? colors.alert : 'auto'}
color: ${props => props.error ? colors.alert : colors.fonts.semibold} color: ${props => props.error ? colors.alert : colors.fonts.semibold}
display: block; display: block;
font-size: 16px; font-size: ${remcalc(16)};
padding: ${remcalc('15 18')}; padding: ${remcalc('15 18')};
visibility: visible; visibility: visible;
width: 100%; width: 100%;

View File

@ -20,7 +20,7 @@ const StyledItem = styled(Item)`
position: absolute; position: absolute;
background-color: ${colors.brandPrimary}; background-color: ${colors.brandPrimary};
border: solid 1px ${colors.borderPrimary}; border: solid ${remcalc(1)} ${colors.borderPrimary};
box-shadow: none; box-shadow: none;
width: calc(100% + ${remcalc(2)}); width: calc(100% + ${remcalc(2)});

View File

@ -19,10 +19,10 @@ const {
} = Styled; } = Styled;
const paper = ` const paper = `
0 8px 0 -5px #fafafa, 0 ${remcalc(8)} 0 ${remcalc(-5)} #fafafa,
0 8px 1px -4px ${colors.borderSecondary}, 0 ${remcalc(8)} ${remcalc(1)} ${remcalc(-4)} ${colors.borderSecondary},
0 16px 0 -10px #fafafa, 0 ${remcalc(16)} 0 ${remcalc(-10)} #fafafa,
0 16px 1px -9px ${colors.borderSecondary}; 0 ${remcalc(16)} ${remcalc(1)} ${remcalc(-9)} ${colors.borderSecondary};
`; `;
const height = (props) => props.collapsed const height = (props) => props.collapsed
@ -52,7 +52,7 @@ const Item = styled(Row)`
height: ${height}; height: ${height};
min-height: ${minHeight}; min-height: ${minHeight};
box-shadow: ${shadow}; box-shadow: ${shadow};
border: 1px solid ${colors.borderSecondary}; border: ${remcalc(1)} solid ${colors.borderSecondary};
background-color: ${colors.brandSecondary}; background-color: ${colors.brandSecondary};
margin-bottom: ${marginBottom}; margin-bottom: ${marginBottom};
`; `;

View File

@ -27,7 +27,7 @@ const borderLeftColor = (props) => !props.fromHeader
const Nav = styled.nav` const Nav = styled.nav`
flex: 0 0 ${remcalc(47)}; flex: 0 0 ${remcalc(47)};
border-left: 1px solid ${borderLeftColor}; border-left: ${remcalc(1)} solid ${borderLeftColor};
`; `;
const StyledButton = styled(Button)` const StyledButton = styled(Button)`

View File

@ -35,7 +35,7 @@ const Span = styled.span`
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
font-stretch: normal; font-stretch: normal;
font-size: 14px; font-size: ${remcalc(14)};
color: ${color}; color: ${color};
justify-content: flex-end; justify-content: flex-end;

View File

@ -1,3 +1,5 @@
const fns = require('../../shared/functions');
const constants = require('../../shared/constants'); const constants = require('../../shared/constants');
const React = require('react'); const React = require('react');
const Styled = require('styled-components'); const Styled = require('styled-components');
@ -8,6 +10,10 @@ const {
colors colors
} = constants; } = constants;
const {
remcalc
} = fns;
const { const {
default: styled default: styled
} = Styled; } = Styled;
@ -17,7 +23,7 @@ const StyledModal = styled.div`
display: block; display: block;
left: 50%; left: 50%;
margin: 0 auto; margin: 0 auto;
padding: 20px; padding: ${remcalc(20)};
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);

View File

@ -1,9 +1,15 @@
const React = require('react');
const constants = require('../../shared/constants'); const constants = require('../../shared/constants');
const fns = require('../../shared/functions');
const React = require('react');
const { const {
colors colors
} = constants; } = constants;
const {
remcalc
} = fns;
const { const {
storiesOf storiesOf
} = require('@kadira/storybook'); } = require('@kadira/storybook');
@ -12,7 +18,7 @@ const Base= require('../base');
const Modal = require('./'); const Modal = require('./');
const _customCloseStyle = ` const _customCloseStyle = `
border: solid ${colors.alert} 5px; border: solid ${colors.alert} ${remcalc(5)};
border-radius: 50%; border-radius: 50%;
`; `;

View File

@ -13,7 +13,8 @@ const {
} = constants; } = constants;
const { const {
rndId rndId,
remcalc
} = fns; } = fns;
const { const {
@ -36,12 +37,12 @@ const StyledLi = styled.li`
cursor: pointer; cursor: pointer;
display: flex; display: flex;
float: left; float: left;
height: 50px; height: ${remcalc(50)};
justify-content: center; justify-content: center;
margin-right: 10px; margin-right: ${remcalc(10)};
min-width: 50px; min-width: ${remcalc(50)};
padding-left: 15px; padding-left: ${remcalc(15)};
padding-right: 15px; padding-right: ${remcalc(15)};
position: relative; position: relative;
${baseBox()} ${baseBox()}

View File

@ -46,12 +46,12 @@ const StyledSpan = styled.span`
&::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
width: 10px; width: ${remcalc(10)};
height: 10px; height: ${remcalc(10)};
box-shadow: 0 0 0 1px #646464; box-shadow: 0 0 0 ${remcalc(1)} #646464;
border: 8px solid ${colors.brandInactive}; border: ${remcalc(8)} solid ${colors.brandInactive};
top: 5px; top: ${remcalc(5)};
left: 5px; left: ${remcalc(5)};
border-radius: 100%; border-radius: 100%;
} }

View File

@ -38,7 +38,7 @@ const rangeThumb = css`
cursor: pointer; cursor: pointer;
height: ${remcalc(24)}; height: ${remcalc(24)};
position: relative; position: relative;
top: -10px; top: ${remcalc(-10)};
width: ${remcalc(36)}; width: ${remcalc(36)};
${baseBox()} ${baseBox()}
@ -46,7 +46,7 @@ const rangeThumb = css`
const rangeLower = css` const rangeLower = css`
background: ${colors.brandPrimary}; background: ${colors.brandPrimary};
height: 6px; height: ${remcalc(6)};
${baseBox({ ${baseBox({
radius: remcalc(50), radius: remcalc(50),
@ -56,7 +56,7 @@ const rangeLower = css`
const rangeUpper = css` const rangeUpper = css`
background: #E6E6E6; background: #E6E6E6;
height: 6px; height: ${remcalc(6)};
${baseBox({ ${baseBox({
radius: remcalc(50) radius: remcalc(50)

View File

@ -26,27 +26,27 @@ const SelectWrapper = styled.div`
display: inline-block; display: inline-block;
&:after { &:after {
border-left: 5px solid transparent; border-left: ${remcalc(5)} solid transparent;
border-right: 5px solid transparent; border-right: ${remcalc(5)} solid transparent;
border-bottom: 5px solid black; border-bottom: ${remcalc(5)} solid black;
${pseudoEl({ ${pseudoEl({
top: '25px', top: remcalc(25),
right: '20px' right: remcalc(20)
})} })}
} }
`; `;
const StyledSelect = styled.select` const StyledSelect = styled.select`
font-size:16px; font-size: ${remcalc(16)};
min-width: ${remcalc(288)}; min-width: ${remcalc(288)};
min-height: ${remcalc(54)}; min-height: ${remcalc(54)};
border-radius: 4px; border-radius: ${remcalc(4)};
padding-left: ${remcalc(20)}; padding-left: ${remcalc(20)};
background-color: #FFFFFF; background-color: #FFFFFF;
box-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.05); box-shadow: inset 0 ${remcalc(3)} 0 0 rgba(0, 0, 0, 0.05);
border: solid 1px #D8D8D8; border: solid ${remcalc(1)} #D8D8D8;
-webkit-appearance: none; -webkit-appearance: none;
&:before { &:before {

View File

@ -34,9 +34,9 @@ const StyledTab = styled.div`
const StyledRadio = styled.input` const StyledRadio = styled.input`
clip: rect(0 0 0 0); clip: rect(0 0 0 0);
height: 1px; height: ${remcalc(1)};
opacity: 0; opacity: 0;
width: 1px; width: ${remcalc(1)};
${moveZ({ ${moveZ({
position: 'fixed', position: 'fixed',
@ -61,7 +61,7 @@ const StyledRadio = styled.input`
const StyledLabel = styled.label` const StyledLabel = styled.label`
background: transparent; background: transparent;
border: 1px solid #D8D8D8; border: ${remcalc(1)} solid #D8D8D8;
display: inline-block; display: inline-block;
font-size: ${remcalc(20)}; font-size: ${remcalc(20)};
padding: ${remcalc('12 25')}; padding: ${remcalc('12 25')};
@ -81,7 +81,7 @@ const StyledContent = styled.div`
background: ${colors.brandInactive}; background: ${colors.brandInactive};
border: ${boxes.border.unchecked}; border: ${boxes.border.unchecked};
box-sizing: border-box; box-sizing: border-box;
box-shadow: 0 -1px 26px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 ${remcalc(-1)} ${remcalc(26)} 0 rgba(0, 0, 0, 0.2);
display: block; display: block;
float: left; float: left;
font-size: ${remcalc(16)}; font-size: ${remcalc(16)};

View File

@ -30,7 +30,7 @@ const InputField = styled.textarea`
background: ${colors.brandSecondary}; background: ${colors.brandSecondary};
color: ${props => props.error ? colors.alert : colors.fonts.semibold} color: ${props => props.error ? colors.alert : colors.fonts.semibold}
display: block; display: block;
font-size: 16px; font-size: ${remcalc(16)};
padding: ${remcalc('15 18')}; padding: ${remcalc('15 18')};
visibility: visible; visibility: visible;
width: 100%; width: 100%;

View File

@ -50,13 +50,12 @@ const StyledInput0 = styled.input`
transparent 50%, transparent 50%,
${colors.brandSecondary} 50%); ${colors.brandSecondary} 50%);
background-position: left bottom; background-position: left bottom;
box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.4); box-shadow: inset ${remcalc(-7)} 0 ${remcalc(9)} ${remcalc(-7)} rgba(0,0,0,0.4);
${inputStyled} ${inputStyled}
} }
&:checked { &:checked {
& + span { & + span {
background-position: right bottom; background-position: right bottom;
} }
@ -76,7 +75,6 @@ const StyledInput1 = styled.input`
} }
&:checked { &:checked {
& + span { & + span {
background-position: left bottom; background-position: left bottom;
} }

View File

@ -56,14 +56,14 @@ const StyledList = styled.ul`
&:after { &:after {
border-color: rgba(255, 255, 255, 0); border-color: rgba(255, 255, 255, 0);
border-bottom-color: #fff; border-bottom-color: #fff;
border-width: 10px; border-width: ${remcalc(10)};
margin-left: -10px; margin-left: ${remcalc(-10)};
} }
&:before { &:before {
border-color: rgba(216, 216, 216, 0); border-color: rgba(216, 216, 216, 0);
border-bottom-color: #d8d8d8; border-bottom-color: #d8d8d8;
border-width: 12px; border-width: ${remcalc(12)};
margin-left: -12px; margin-left: ${remcalc(-12)};
} }
`; `;
module.exports = ({ module.exports = ({

View File

@ -1,12 +1,17 @@
const constants = require('../../shared/constants'); const constants = require('../../shared/constants');
const d3 = require('d3');
const fns = require('../../shared/functions');
const React = require('react'); const React = require('react');
const Styled = require('styled-components'); const Styled = require('styled-components');
const d3 = require('d3');
const { const {
colors colors
} = constants; } = constants;
const {
remcalc
} = fns;
const { const {
default: styled default: styled
} = Styled; } = Styled;
@ -77,7 +82,7 @@ const StyledSVGContainer = styled.svg`
.health, .health_warn { .health, .health_warn {
font-family: "Libre Franklin"; font-family: "Libre Franklin";
font-size: 12px; font-size: ${remcalc(12)};
font-weight: bold; font-weight: bold;
font-style: normal; font-style: normal;
font-stretch: normal; font-stretch: normal;
@ -85,12 +90,12 @@ const StyledSVGContainer = styled.svg`
} }
.health_warn { .health_warn {
font-size: 15px; font-size: ${remcalc(15)};
} }
.stat { .stat {
font-family: "Libre Franklin"; font-family: "Libre Franklin";
font-size: 12px; font-size: ${remcalc(12)};
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
font-stretch: normal; font-stretch: normal;
@ -99,7 +104,7 @@ const StyledSVGContainer = styled.svg`
.node_statistics { .node_statistics {
font-family: "Libre Franklin"; font-family: "Libre Franklin";
font-size: 12px; font-size: ${remcalc(12)};
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
font-stretch: normal; font-stretch: normal;
@ -113,7 +118,7 @@ const StyledSVGContainer = styled.svg`
.primary, .secondary { .primary, .secondary {
font-family: "Libre Franklin"; font-family: "Libre Franklin";
font-size: 12px; font-size: ${remcalc(12)};
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
font-stretch: normal; font-stretch: normal;
@ -122,7 +127,7 @@ const StyledSVGContainer = styled.svg`
.info_text { .info_text {
font-family: "Libre Franklin"; font-family: "Libre Franklin";
font-size: 16px; font-size: ${remcalc(16)};
font-weight: 600; font-weight: 600;
font-style: normal; font-style: normal;
font-stretch: normal; font-stretch: normal;
@ -177,7 +182,7 @@ class TopologyGraph extends React.Component {
.selectAll('line') .selectAll('line')
.data(graph.links) .data(graph.links)
.enter().append('line') .enter().append('line')
.attr('stroke-width', '2px'); .attr('stroke-width', remcalc(12));
// And svg group, to contain all of the attributes in @antonas' first prototype // And svg group, to contain all of the attributes in @antonas' first prototype
svg.selectAll('.node') svg.selectAll('.node')
@ -272,10 +277,10 @@ class TopologyGraph extends React.Component {
.width + paddingLeft; .width + paddingLeft;
}) })
.attr('cy', '24') .attr('cy', '24')
.attr('stroke-width', '0px') .attr('stroke-width', 0)
.attr('fill', (d) => .attr('fill', (d) =>
d.id === 'Memcached' ? 'rgb(217, 77, 68)' : 'rgb(0,175,102)') d.id === 'Memcached' ? 'rgb(217, 77, 68)' : 'rgb(0,175,102)')
.attr('r', '9px'); .attr('r', remcalc(9));
// An icon or label that exists within the circle, inside the infobox // An icon or label that exists within the circle, inside the infobox
health.append('text') health.append('text')
@ -298,7 +303,7 @@ class TopologyGraph extends React.Component {
.attr('class', 'node') .attr('class', 'node')
.attr('d', d) .attr('d', d)
.attr('stroke', '#343434') .attr('stroke', '#343434')
.attr('stroke-width', '1px') .attr('stroke-width', remcalc(1))
.attr('fill', '#464646'); .attr('fill', '#464646');
const html = stats const html = stats
@ -339,7 +344,7 @@ class TopologyGraph extends React.Component {
.attr('class', 'node') .attr('class', 'node')
.attr('d', topRoundedRect('0', '0', width, topHeight, radius)) .attr('d', topRoundedRect('0', '0', width, topHeight, radius))
.attr('stroke', colors.topologyBackground) .attr('stroke', colors.topologyBackground)
.attr('stroke-width', '1px') .attr('stroke-width', remcalc(1))
.attr('fill', colors.brandSecondaryColor); .attr('fill', colors.brandSecondaryColor);
const text = elm.append('g'); const text = elm.append('g');

View File

@ -1,4 +1,5 @@
const constants = require('../../shared/constants'); const constants = require('../../shared/constants');
const fns = require('../../shared/functions');
const React = require('react'); const React = require('react');
const Styled = require('styled-components'); const Styled = require('styled-components');
@ -6,12 +7,16 @@ const {
colors colors
} = constants; } = constants;
const {
remcalc
} = fns;
const { const {
default: styled default: styled
} = Styled; } = Styled;
const TopologyView = styled.div` const TopologyView = styled.div`
border: 1px solid ${colors.borderSecondary}; border: ${remcalc(1)} solid ${colors.borderSecondary};
background-color: ${colors.brandSecondary}; background-color: ${colors.brandSecondary};
`; `;

View File

@ -8,7 +8,8 @@ const {
} = constants; } = constants;
const { const {
rndId rndId,
remcalc
} = fns; } = fns;
const { const {
@ -40,7 +41,7 @@ const StyledInput = styled.input`
const StyledContent = styled.div` const StyledContent = styled.div`
border: ${boxes.border.unchecked}; border: ${boxes.border.unchecked};
border-radius: 4px; border-radius: ${remcalc(4)};
cursor: pointer; cursor: pointer;
padding: remcalc(36); padding: remcalc(36);

View File

@ -1,15 +1,18 @@
const colors = require('./colors'); const colors = require('./colors');
const fns = require('../functions');
const boxes = { const {
borderRadius: '4px', remcalc
bottomShaddow: '0 2px 0 0 rgba(0, 0, 0, 0.05)', } = fns;
bottomShaddowDarker: '0 2px 0 0 rgba(0, 0, 0, 0.1)',
insetShaddow: 'inset 0 3px 0 0 rgba(0, 0, 0, 0.05)', module.exports = {
borderRadius: remcalc(4),
bottomShaddow: `0 ${remcalc(2)} 0 0 rgba(0, 0, 0, 0.05)`,
bottomShaddowDarker: `0 ${remcalc(2)} 0 0 rgba(0, 0, 0, 0.1)`,
insetShaddow: `inset 0 ${remcalc(3)} 0 0 rgba(0, 0, 0, 0.05)`,
border: { border: {
checked: `1px solid ${colors.brandPrimary}`, checked: `${remcalc(1)} solid ${colors.brandPrimary}`,
unchecked: `1px solid ${colors.borderSecondary}`, unchecked: `${remcalc(1)} solid ${colors.borderSecondary}`,
confirmed: `1px solid ${colors.confirmation}` confirmed: `${remcalc(1)} solid ${colors.confirmation}`
} }
}; };
module.exports = boxes;