convert every px measure into rem
This commit is contained in:
parent
4eea80a74d
commit
124ec8e6d3
@ -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 = {
|
||||
|
@ -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`
|
||||
|
@ -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,
|
||||
|
@ -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] {
|
||||
|
@ -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;
|
||||
`;
|
||||
|
||||
|
@ -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;
|
||||
`;
|
||||
|
@ -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`
|
||||
@ -40,17 +40,17 @@ const Label = styled.label`
|
||||
|
||||
const InputField = styled.input`
|
||||
${baseBox()};
|
||||
|
||||
|
||||
${props => props.success ? successBakcground : defaultBackground }
|
||||
|
||||
|
||||
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%;
|
||||
|
||||
|
||||
&:focus {
|
||||
border-color: ${boxes.border.checked};
|
||||
outline: none;
|
||||
|
@ -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)});
|
||||
|
@ -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};
|
||||
`;
|
||||
|
@ -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)`
|
||||
|
@ -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;
|
||||
|
@ -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%);
|
||||
|
@ -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%;
|
||||
`;
|
||||
|
||||
|
@ -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()}
|
||||
|
@ -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%;
|
||||
}
|
||||
|
||||
|
@ -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)
|
||||
|
@ -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 {
|
||||
|
@ -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)};
|
||||
|
@ -30,14 +30,14 @@ 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%;
|
||||
min-height: ${remcalc(96)};
|
||||
${baseBox()};
|
||||
border-color: ${props => props.error ? colors.alert : ''};
|
||||
|
||||
|
||||
&:focus {
|
||||
border-color: ${boxes.border.checked};
|
||||
outline: none;
|
||||
|
@ -30,7 +30,7 @@ const StyledText = styled.span`
|
||||
const StyledDiv = styled.div`
|
||||
display: inline-block;
|
||||
background-color: ${colors.brandInactive};
|
||||
|
||||
|
||||
${baseBox()}
|
||||
`;
|
||||
|
||||
@ -46,17 +46,16 @@ const StyledInput0 = styled.input`
|
||||
display: none;
|
||||
|
||||
& + span {
|
||||
background: linear-gradient(to right,
|
||||
transparent 50%,
|
||||
background: linear-gradient(to right,
|
||||
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;
|
||||
}
|
||||
@ -66,17 +65,16 @@ const StyledInput0 = styled.input`
|
||||
const StyledInput1 = styled.input`
|
||||
display: none;
|
||||
|
||||
& + span {
|
||||
background: linear-gradient(to right,
|
||||
${colors.brandSecondary} 50%,
|
||||
& + span {
|
||||
background: linear-gradient(to right,
|
||||
${colors.brandSecondary} 50%,
|
||||
transparent 50%);
|
||||
background-position: right bottom;
|
||||
|
||||
|
||||
${inputStyled}
|
||||
}
|
||||
|
||||
|
||||
&:checked {
|
||||
|
||||
& + span {
|
||||
background-position: left bottom;
|
||||
}
|
||||
|
@ -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 = ({
|
||||
|
@ -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');
|
||||
|
@ -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};
|
||||
`;
|
||||
|
||||
|
@ -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);
|
||||
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user