Commit 53354dfc authored by Cory Donkin's avatar Cory Donkin

fix: remove use of space variable in peoplepicker styling

parent 8ceba26a
Pipeline #12645 failed with stages
in 9 minutes and 45 seconds
......@@ -12,8 +12,8 @@ const MainColumn = styled.div`
flex: 1 1 100%;
min-width: 0;
position: relative;
padding-left: ${th('space.2')};
padding-right: ${th('space.2')};
padding-left: calc(${th('gridUnit')}* 2);
padding-right: calc(${th('gridUnit')} * 2);
width: 100%;
${media.tabletPortraitUp`
width: 50%;
......@@ -22,22 +22,24 @@ const MainColumn = styled.div`
width: 33%;
margin-left: 16.666%;
margin-right: 16.666%;
padding-left: ${th('space.1')};
padding-right: ${th('space.1')};
padding-left: ${th('gridUnit')};
padding-right: ${th('gridUnit')};
`};
`
const SearchBoxContainer = styled('div')`
const SearchBoxContainer = styled.div`
box-sizing: border-box;
display: flex;
margin-left: calc(-${th('space.2')});
margin-right: calc(-${th('space.2')});
margin-left: calc(-${th('gridUnit')} * 2);
margin-right: calc(-${th('gridUnit')} * 2);
`
const BodyContainer = styled.div`
box-sizing: border-box;
display: flex;
margin-bottom: ${th('space.7')};
margin-bottom: calc(${th('gridUnit')} * 20);
margin-left: calc(-${th('gridUnit')} * 2);
margin-right: calc(-${th('gridUnit')} * 2);
`
const PeoplePickerLayout = ({
......
......@@ -43,7 +43,7 @@ const BaseParagraph = styled.p`
line-height: ${th(`lineHeightBase`)};
margin-top: 0;
margin-bottom: ${th('space.3')};
margin-bottom: calc(${th('gridUnit')} * 4);
&:last-child {
margin-bottom: 0;
......@@ -55,14 +55,14 @@ const SmallParagraph = styled(BaseParagraph)`
`
const StyledSmallParagraph = styled(SmallParagraph)`
margin-bottom: ${th('space.4')};
margin-bottom: calc(${th('gridUnit')} * 6);
color: ${th('colorTextSecondary')};
`
const ErrorParagraph = styled(StyledSmallParagraph)`
font-size: ${th('fontSizeBaseSmall')};
line-height: ${th(`lineHeightBaseSmall`)};
margin-bottom: ${th('space.4')};
margin-bottom: calc(${th('gridUnit')} * 6);
color: ${th('colorError')};
`
......
......@@ -55,7 +55,7 @@ const StyledSmallParagraph = styled.p`
line-height: ${th(`lineHeightBaseSmall`)};
margin-top: 0;
margin-bottom: ${th('space.3')};
margin-bottom: calc(${th('gridUnit')} * 4);
&:last-child {
margin-bottom: 0;
......
......@@ -19,17 +19,17 @@ const StyledRemoveIcon = styled(TrashIcon)`
const CheckCircleIcon = props => <Icon {...props}>check-circle</Icon>
const StyledSelectedIcon = styled(CheckCircleIcon)`
circle {
fill: ${th('colorPrimary')};
}
height: ${th('space.4')}
width: ${th('space.4')}
circle {
fill: ${th('colorPrimary')};
}
height: calc(${th('gridUnit')} * 6);
width: calc(${th('gridUnit')} * 6);
`
const StyledButton = styled.button`
background-color: inherit;
height: 100%;
width: ${th('space.5')};
width: calc(${th('gridUnit')} * 8);
border: none;
border-top-right-radius: ${th('borderRadius')};
border-bottom-right-radius: ${th('borderRadius')};
......
......@@ -6,7 +6,7 @@ import Icon from './Icon'
const RemoveButton = props => <Icon {...props}>X</Icon>
const StyledRemoveButton = styled(RemoveButton)`
margin-left: ${th('space.1')};
margin-left: ${th('gridUnit')};
& > svg {
stroke: ${th('colorTextReverse')};
......
......@@ -4,11 +4,11 @@ import { th, darken } from '@pubsweet/ui-toolkit'
const extraSmall = css`
font-size: 11px;
line-height: 12px;
padding: ${th('space.1')};
padding: ${th('gridUnit')};
`
const small = css`
padding: ${th('space.1')};
padding: ${th('gridUnit')};
`
const primary = css`
......
......@@ -22,9 +22,9 @@ export default css`
vertical-align: middle;
box-sizing: border-box;
width: ${th('space.3')};
height: ${th('space.3')};
margin-right: ${th('space.1')};
width: calc(${th('gridUnit')} * 4);
height: calc(${th('gridUnit')} * 4);
margin-right: ${th('gridUnit')};
margin-left: -30px;
background: transparent;
......
......@@ -8,11 +8,11 @@ export default {
font-size: ${th('gridUnit')};
`,
Label: css`
margin-bottom: ${th('space.1')};
margin-bottom: ${th('gridUnit')};
`,
Opener: css`
padding: 10px;
min-height: ${th('space.5')};
min-height: calc(${th('gridUnit')} * 8);
&:hover {
border-color: ${th('colorBorder')};
}
......@@ -21,8 +21,8 @@ export default {
`border-bottom-left-radius: 0; border-bottom-right-radius: 0;`};
`,
Option: css`
height: ${th('space.5')};
line-height: ${th('space.5')};
height: calc(${th('gridUnit')} * 8);
line-height: calc(${th('gridUnit')} * 8);
padding: 0 10px;
font-weight: inherit;
......
......@@ -17,7 +17,7 @@ const stepCenter = (isCurrent, isPast) => {
export const Steps = {
Root: css`
margin-bottom: ${th('space.6')};
margin-bottom: calc(${th('gridUnit')} * 12);
min-width: 0;
`,
......
......@@ -16,11 +16,11 @@ export default {
font-family: ${th('fontInterface')};
font-size: 16px;
line-height: 24px;
padding: ${th('space.2')};
height: ${th('space.5')};
padding: calc(${th('gridUnit')} * 2);
height: calc(${th('gridUnit')} * 8);
`,
Label: css`
margin-bottom: ${th('space.1')};
margin-bottom: ${th('gridUnit')};
`,
Root: css`
margin-bottom: 0px;
......
......@@ -8,18 +8,18 @@ export const MenuBar = {
background-color: ${th('colorBackgroundHue')};
margin-bottom: 0;
border-bottom: none;
line-height: ${th('space.2')};
padding: ${th('space.1')};
line-height: calc(${th('gridUnit')} * 2);
padding: ${th('gridUnit')};
`,
}
export const MenuButton = {
Button: css`
background-color: transparent;
margin: ${th('space.1')}
width: ${th('space.3')};
margin: ${th('gridUnit')}
width: calc(${th('gridUnit')} * 4);
/* subtract border width */
height: calc(${th('space.3')} - 2px);
height: calc((${th('gridUnit')} * 4) - 2px);
`,
}
......
......@@ -80,6 +80,8 @@ const cokoTheme = {
transitionDuration: '0.2s', // TODO -- julien: not 0.05s
transitionTimingFunction: 'ease',
transitionDelay: '0',
/* Breakpoints */
breakpoints: [480, 768, 1000, 1272],
cssOverrides: {
Login: {
......
......@@ -48,7 +48,6 @@ export default {
/* Spacing */
gridUnit: '8px',
space: ['8px', '16px', '24px', '32px', '40px'],
/* Border */
borderRadius: '5px', // changed, needs check by designers
......
......@@ -33,7 +33,7 @@ const AddOnButton = styled(Button)`
fill: ${th('colorTextReverse')};
line-height: 0;
min-width: 0;
padding: ${th('space.1')};
padding: ${th('gridUnit')};
margin: 0;
width: calc(${th('gridUnit')} * 6);
height: calc(${th('gridUnit')} * 6);
......
......@@ -6,9 +6,9 @@ import { th, media } from '@pubsweet/ui-toolkit'
const InternalBoxWrapper = ({ marginBottom, paddingX, width, children }) => {
const Wrapper = styled.div`
box-sizing: border-box;
padding-bottom: ${th(`space.${marginBottom}`)};
padding-left: ${th(`space.${paddingX}`)};
padding-right: ${th(`space.${paddingX}`)};
padding-bottom: calc(${th('gridUnit')} * ${marginBottom});
padding-left: calc(${th('gridUnit')} * ${paddingX});
padding-right: calc(${th('gridUnit')} * ${paddingX});
${media.tabletLandscapeUp`
width: 50%;
`};
......@@ -28,8 +28,8 @@ const TwoColumnLayout = ({
display: flex;
box-sizing: border-box;
flex-wrap: wrap;
margin-left: calc(0px - ${th('space.2')});
margin-right: calc(0px - ${th('space.2')});
margin-left: calc(-${th('gridUnit')}* 2);
margin-right: calc(-${th('gridUnit')}* 2);
`
return (
......@@ -38,7 +38,7 @@ const TwoColumnLayout = ({
<InternalBoxWrapper
// try to use the key property of the React element
key={item.key || index}
marginBottom={bottomSpacing ? 3 : 0}
marginBottom={bottomSpacing ? 4 : 0}
paddingX={paddingX}
width={customWidth}
>
......
......@@ -738,7 +738,7 @@
core-js "^2.5.7"
regenerator-runtime "^0.12.0"
"@babel/runtime@^7.0.0", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.3":
"@babel/runtime@^7.0.0", "@babel/runtime@^7.4.3":
version "7.4.4"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.4.tgz#dc2e34982eb236803aa27a07fea6857af1b9171d"
integrity sha512-w0+uT71b6Yi7i5SE0co4NioIpSYS6lLiXvCzWzGSKvpK5vdQtCbICHMj+gbAKAOtxiV6HsVh/MBdaF9EQ6faSg==
......@@ -752,10 +752,19 @@
dependencies:
regenerator-runtime "^0.12.0"
"@babel/template@^7.0.0", "@babel/template@^7.1.0", "@babel/template@^7.1.2", "@babel/template@^7.2.2":
"@babel/template@^7.1.0", "@babel/template@^7.2.2":
version "7.2.2"
resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.2.2.tgz#005b3fdf0ed96e88041330379e0da9a708eb2907"
integrity sha512-zRL0IMM02AUDwghf5LMSSDEz7sBCO2YnNmpg3uWTZj/v1rcG2BmQUvaGU8GhU8BvfMh1k2KIAYZ7Ji9KXPUg7g==
dependencies:
"@babel/code-frame" "^7.0.0"
"@babel/parser" "^7.2.2"
"@babel/types" "^7.2.2"
"@babel/template@^7.4.0", "@babel/template@^7.4.4":
version "7.4.4"
resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.4.4.tgz#f4b88d1225689a08f5bc3a17483545be9e4ed237"
integrity sha512-CiGzLN9KgAvgZsnivND7rkA+AeJ9JB0ciPOD4U59GKbQP2iQl+olF1l76kJOupqidozfZ32ghwBEJDhnk9MEcw==
dependencies:
"@babel/code-frame" "^7.0.0"
"@babel/parser" "^7.4.4"
......@@ -15042,10 +15051,15 @@ regenerator-runtime@^0.13.1:
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.1.tgz#522ea2aafd9200a00eee143dc14219a35a0f3991"
integrity sha512-5KzMIyPLvfdPmvsdlYsHqITrDfK9k7bmvf97HvHSN4810i254ponbxCQ1NukpRWlu6en2MBWzAlhDExEKISwAA==
regenerator-transform@^0.13.3:
version "0.13.3"
resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.13.3.tgz#264bd9ff38a8ce24b06e0636496b2c856b57bcbb"
integrity sha512-5ipTrZFSq5vU2YoGoww4uaRVAK4wyYC4TSICibbfEPOruUu8FFP7ErV0BjmbIOEpn3O/k9na9UEdYR/3m7N6uA==
regenerator-runtime@^0.13.2:
version "0.13.2"
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.2.tgz#32e59c9a6fb9b1a4aff09b4930ca2d4477343447"
integrity sha512-S/TQAZJO+D3m9xeN1WTI8dLKBBiRgXBlTJvbWjCThHWZj9EvHK70Ff50/tYj2J/fvBY6JtFVwRuazHN2E7M9BA==
regenerator-transform@^0.13.4:
version "0.13.4"
resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.13.4.tgz#18f6763cf1382c69c36df76c6ce122cc694284fb"
integrity sha512-T0QMBjK3J0MtxjPmdIMXm72Wvj2Abb0Bd4HADdfijwMdoIsyQZ6fWC7kDFhk2YinBBEMZDL7Y7wh0J1sGx3S4A==
dependencies:
private "^0.1.6"
......@@ -17900,7 +17914,7 @@ webpack-dev-middleware@^3.6.0:
range-parser "^1.0.3"
webpack-log "^2.0.0"
webpack-dev-server@3.1.14, webpack-dev-server@^3.1.14:
webpack-dev-server@3.1.14, webpack-dev-server@^3.2.1:
version "3.1.14"
resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-3.1.14.tgz#60fb229b997fc5a0a1fc6237421030180959d469"
integrity sha512-mGXDgz5SlTxcF3hUpfC8hrQ11yhAttuUQWf1Wmb+6zo3x6rb7b9mIfuQvAPLdfDRCGRGvakBWHdHOa0I9p/EVQ==
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment