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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -50,13 +50,12 @@ const StyledInput0 = styled.input`
transparent 50%,
${colors.brandSecondary} 50%);
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}
}
&:checked {
& + span {
background-position: right bottom;
}
@ -76,7 +75,6 @@ const StyledInput1 = styled.input`
}
&:checked {
& + span {
background-position: left bottom;
}

View File

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

View File

@ -1,12 +1,17 @@
const constants = require('../../shared/constants');
const d3 = require('d3');
const fns = require('../../shared/functions');
const React = require('react');
const Styled = require('styled-components');
const d3 = require('d3');
const {
colors
} = constants;
const {
remcalc
} = fns;
const {
default: styled
} = Styled;
@ -77,7 +82,7 @@ const StyledSVGContainer = styled.svg`
.health, .health_warn {
font-family: "Libre Franklin";
font-size: 12px;
font-size: ${remcalc(12)};
font-weight: bold;
font-style: normal;
font-stretch: normal;
@ -85,12 +90,12 @@ const StyledSVGContainer = styled.svg`
}
.health_warn {
font-size: 15px;
font-size: ${remcalc(15)};
}
.stat {
font-family: "Libre Franklin";
font-size: 12px;
font-size: ${remcalc(12)};
font-weight: normal;
font-style: normal;
font-stretch: normal;
@ -99,7 +104,7 @@ const StyledSVGContainer = styled.svg`
.node_statistics {
font-family: "Libre Franklin";
font-size: 12px;
font-size: ${remcalc(12)};
font-weight: normal;
font-style: normal;
font-stretch: normal;
@ -113,7 +118,7 @@ const StyledSVGContainer = styled.svg`
.primary, .secondary {
font-family: "Libre Franklin";
font-size: 12px;
font-size: ${remcalc(12)};
font-weight: normal;
font-style: normal;
font-stretch: normal;
@ -122,7 +127,7 @@ const StyledSVGContainer = styled.svg`
.info_text {
font-family: "Libre Franklin";
font-size: 16px;
font-size: ${remcalc(16)};
font-weight: 600;
font-style: normal;
font-stretch: normal;
@ -177,7 +182,7 @@ class TopologyGraph extends React.Component {
.selectAll('line')
.data(graph.links)
.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
svg.selectAll('.node')
@ -272,10 +277,10 @@ class TopologyGraph extends React.Component {
.width + paddingLeft;
})
.attr('cy', '24')
.attr('stroke-width', '0px')
.attr('stroke-width', 0)
.attr('fill', (d) =>
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
health.append('text')
@ -298,7 +303,7 @@ class TopologyGraph extends React.Component {
.attr('class', 'node')
.attr('d', d)
.attr('stroke', '#343434')
.attr('stroke-width', '1px')
.attr('stroke-width', remcalc(1))
.attr('fill', '#464646');
const html = stats
@ -339,7 +344,7 @@ class TopologyGraph extends React.Component {
.attr('class', 'node')
.attr('d', topRoundedRect('0', '0', width, topHeight, radius))
.attr('stroke', colors.topologyBackground)
.attr('stroke-width', '1px')
.attr('stroke-width', remcalc(1))
.attr('fill', colors.brandSecondaryColor);
const text = elm.append('g');

View File

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

View File

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

View File

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