From c7121538bcd9396431a1820e175aaccfa27861ea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= Date: Wed, 22 Mar 2017 12:12:43 +0000 Subject: [PATCH] convert missing pxs to rem --- ui/src/components/button/index.js | 8 ++------ ui/src/components/colors/story.js | 12 ++++++------ ui/src/components/horizontal-list/li.js | 2 +- ui/src/components/metric/full/select.js | 12 ++++++------ ui/src/components/metric/full/view.js | 2 +- ui/src/components/table-data-table/table-head.js | 2 +- ui/src/components/table-simple-table/table-body.js | 2 +- ui/src/components/table-simple-table/table-head.js | 2 +- ui/src/components/table-simple-table/table-row.js | 2 +- ui/src/components/table-simple-table/table.js | 2 +- ui/src/components/tabs/tab/index.js | 2 +- ui/src/components/tooltip/index.js | 3 ++- 12 files changed, 24 insertions(+), 27 deletions(-) diff --git a/ui/src/components/button/index.js b/ui/src/components/button/index.js index 4ebc1cda..efc610e4 100644 --- a/ui/src/components/button/index.js +++ b/ui/src/components/button/index.js @@ -1,9 +1,5 @@ -import { - Baseline, - typography, - paperEffect -} from '../../shared/composers'; import { colors, boxes } from '../../shared/constants'; +import { Baseline, typography, paperEffect } from '../../shared/composers'; import { remcalc } from '../../shared/functions'; import isString from 'lodash.isstring'; import match from '../../shared/match'; @@ -140,7 +136,7 @@ const StyledButton = styled.button` // Need to use HTML element selector, as adjecent buttons may have // different class names if they are primary/secondary/disabled & + button { - margin-left: 20px; + margin-left: ${remcalc(20)}; } `; diff --git a/ui/src/components/colors/story.js b/ui/src/components/colors/story.js index 36ef0de3..f9233884 100644 --- a/ui/src/components/colors/story.js +++ b/ui/src/components/colors/story.js @@ -6,18 +6,18 @@ import Column from '../column'; import Row from '../row'; const StyledWrapper = styled.div` - margin-left: 20px; - margin-bottom: 20px; - border: solid 1px ${colors.base.grey}; - padding: 18px; + margin-left: ${remcalc(20)}; + margin-bottom: ${remcalc(20)}; + border: solid ${remcalc(1)} ${colors.base.grey}; + padding: ${remcalc(18)}; `; const Square = styled.div` display: inline-block; - border: solid 1px ${colors.base.grey}; + border: solid ${remcalc(1)} ${colors.base.grey}; width: 100%; - height: 100px; + height: ${remcalc(100)}; `; const StyledP = styled.p` diff --git a/ui/src/components/horizontal-list/li.js b/ui/src/components/horizontal-list/li.js index f8634e92..2a5deeea 100644 --- a/ui/src/components/horizontal-list/li.js +++ b/ui/src/components/horizontal-list/li.js @@ -18,7 +18,7 @@ const Li = styled.li` &.active { cursor: default; color: ${colors.base.primary}; - border-bottom: 2px solid ${colors.base.primary}; + border-bottom: ${remcalc(2)} solid ${colors.base.primary}; } } `; diff --git a/ui/src/components/metric/full/select.js b/ui/src/components/metric/full/select.js index a10e5956..64c70f9a 100644 --- a/ui/src/components/metric/full/select.js +++ b/ui/src/components/metric/full/select.js @@ -10,13 +10,13 @@ const SelectWrapper = styled.div` text-align: right !important; &:after { - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-top: 5px solid ${colors.base.white}; + border-left: ${remcalc(5)} solid transparent; + border-right: ${remcalc(5)} solid transparent; + border-top: ${remcalc(5)} solid ${colors.base.white}; ${pseudoEl({ - top: '28px', - right: '18px' + top: remcalc(28), + right: remcalc(18) })} } `; @@ -24,7 +24,7 @@ const SelectWrapper = styled.div` const StyledSelect = styled.select` padding: ${remcalc(18)} ${remcalc(24)}; min-width: ${remcalc(154)}; - font-size:16px; + font-size: ${remcalc(16)}; text-align: right !important; border-radius: 0; color: ${colors.base.white}; diff --git a/ui/src/components/metric/full/view.js b/ui/src/components/metric/full/view.js index 61e446c1..44116f00 100644 --- a/ui/src/components/metric/full/view.js +++ b/ui/src/components/metric/full/view.js @@ -11,7 +11,7 @@ const Container = styled.div` width: 100%; max-width: ${remcalc(940)}; box-shadow: ${boxes.bottomShaddow}; - border: 1px solid ${colors.base.grey}; + border: ${remcalc(1)} solid ${colors.base.grey}; background-color: ${colors.base.white}; `; diff --git a/ui/src/components/table-data-table/table-head.js b/ui/src/components/table-data-table/table-head.js index 6d8a48b7..1dded65b 100644 --- a/ui/src/components/table-data-table/table-head.js +++ b/ui/src/components/table-data-table/table-head.js @@ -15,7 +15,7 @@ const StyledTableHeadItem = styled.td` const StyledTableHead = styled.thead` background: #fafafa; - box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05); + box-shadow: 0 ${remcalc(2)}; 0 0 rgba(0, 0, 0, 0.05); border: solid ${remcalc(1)} ${colors.base.grey}; ${breakpoints.smallOnly` diff --git a/ui/src/components/table-simple-table/table-body.js b/ui/src/components/table-simple-table/table-body.js index a707c8a9..bc88537c 100644 --- a/ui/src/components/table-simple-table/table-body.js +++ b/ui/src/components/table-simple-table/table-body.js @@ -3,7 +3,7 @@ import styled from 'styled-components'; import React from 'react'; const StyledTableBody = styled.article` - box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05); + box-shadow: 0 ${remcalc(2)} 0 0 rgba(0, 0, 0, 0.05); ${clearfix} `; diff --git a/ui/src/components/table-simple-table/table-head.js b/ui/src/components/table-simple-table/table-head.js index ea85f9ff..fb3bd6e5 100644 --- a/ui/src/components/table-simple-table/table-head.js +++ b/ui/src/components/table-simple-table/table-head.js @@ -5,7 +5,7 @@ import React from 'react'; const StyledTableHead = styled.header` background: #fafafa; - box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05); + box-shadow: 0 ${remcalc(2)} 0 0 rgba(0, 0, 0, 0.05); padding: ${remcalc(24)} 0; ${clearfix} diff --git a/ui/src/components/table-simple-table/table-row.js b/ui/src/components/table-simple-table/table-row.js index 890e7481..550ea489 100644 --- a/ui/src/components/table-simple-table/table-row.js +++ b/ui/src/components/table-simple-table/table-row.js @@ -8,7 +8,7 @@ const StyledTableRow = styled.div` ${clearfix} padding: ${remcalc(24)} 0; - border-bottom: solid 1px ${colors.base.grey}; + border-bottom: solid ${remcalc(1)} ${colors.base.grey}; & > .table-item { text-align: center; diff --git a/ui/src/components/table-simple-table/table.js b/ui/src/components/table-simple-table/table.js index 32323523..7d5b90d2 100644 --- a/ui/src/components/table-simple-table/table.js +++ b/ui/src/components/table-simple-table/table.js @@ -4,7 +4,7 @@ import styled from 'styled-components'; import React from 'react'; const StyledTableWrapper = styled.section` - border: solid 1px ${colors.base.grey} + border: solid ${remcalc(1)} ${colors.base.grey} font-family: 'LibreFranklin', sans-serif; font-style: normal; `; diff --git a/ui/src/components/tabs/tab/index.js b/ui/src/components/tabs/tab/index.js index 681b008b..8dbe5893 100644 --- a/ui/src/components/tabs/tab/index.js +++ b/ui/src/components/tabs/tab/index.js @@ -36,7 +36,7 @@ const StyledLabel = styled.label` font-size: ${remcalc(20)}; margin: 0 0.5rem 0 0; vertical-align: bottom; - box-shadow: inset ${remcalc(2)} -6px 10px 0px rgba(0,0,0,0.06); + box-shadow: inset ${remcalc(2)} ${remcalc(-6)} ${remcalc(10)} 0 rgba(0,0,0,0.06); `; const StyledPanel = styled.div` diff --git a/ui/src/components/tooltip/index.js b/ui/src/components/tooltip/index.js index e3c0f4b4..e2f15cf7 100644 --- a/ui/src/components/tooltip/index.js +++ b/ui/src/components/tooltip/index.js @@ -30,7 +30,8 @@ const StyledList = styled.ul` /*min-width: ${remcalc(200)};*/ position: absolute; - top: 4px; + top: ${remcalc(4)}; + ${(props) => { return props.arrowPosition.left ? `left: -${getMeasurement(props.arrowPosition.left)}` :