Signed-off-by: Ky <virginie.ky@gmail.com>
This commit is contained in:
Ky 2020-04-26 19:30:23 +02:00
parent ef8afac70e
commit 771df8dfb7
10 changed files with 167 additions and 182 deletions

View File

@ -10,16 +10,12 @@ const MenuDropdown = styled(DropdownMenu)`
box-shadow: 0px 2px 4px rgba(227, 233, 243, 0.5);
transform: translate3d(-178px, 28px, 0px) !important;
${({ isopen }) => {
if (isopen === 'true') {
return `
border-top-color: #aed4fb !important;
border-top-right-radius: 0;
`;
}
return '';
}}
${({ isopen }) =>
isopen &&
`
border-top-color: #aed4fb !important;
border-top-right-radius: 0;
`}
`;
export default MenuDropdown;

View File

@ -18,70 +18,70 @@ const Toggle = styled(DropdownToggle)`
}
${({ isopen }) => {
// Fix react warning
if (isopen === 'true') {
return `
background: #e6f0fb;
border: 1px solid #aed4fb !important;
border-radius: 2px;
border-bottom-right-radius: 0 !important;
border-bottom-left-radius: 0 !important;
border-top-right-radius: 2px !important;
&:before {
content: '\f013';
font-family: FontAwesome;
color: #007eff;
}
&:after {
content: '\f0d7';
display: inline-block;
margin-top: -1px;
margin-left: 10px;
font-family: FontAwesome;
color: #007eff;
transform: rotateX(180deg);
transition: transform 0.3s ease-out;
}
&:hover,
:active,
:focus {
background: #e6f0fb;
border: 1px solid #aed4fb;
}
`;
}
// Fix react warning
if (isopen === 'true') {
return `
background: #ffffff !important;
border: 1px solid #e3e9f3;
border-radius: 2px !important;
font-size: 1.4rem;
background: #e6f0fb;
border: 1px solid #aed4fb !important;
border-radius: 2px;
border-bottom-right-radius: 0 !important;
border-bottom-left-radius: 0 !important;
border-top-right-radius: 2px !important;
&:before {
content: '\f013';
font-family: FontAwesome;
color: #323740;
color: #007eff;
}
&:after {
content: '\f0d7';
display: inline-block;
margin-top: -1px;
margin-left: 11px;
margin-left: 10px;
font-family: FontAwesome;
color: #323740;
color: #007eff;
transform: rotateX(180deg);
transition: transform 0.3s ease-out;
}
&:hover,
:focus,
:active {
background: #ffffff !important;
border: 1px solid #e3e9f3;
:active,
:focus {
background: #e6f0fb;
border: 1px solid #aed4fb;
}
`;
}}
}
return `
background: #ffffff !important;
border: 1px solid #e3e9f3;
border-radius: 2px !important;
font-size: 1.4rem;
&:before {
content: '\f013';
font-family: FontAwesome;
color: #323740;
}
&:after {
content: '\f0d7';
display: inline-block;
margin-top: -1px;
margin-left: 11px;
font-family: FontAwesome;
color: #323740;
transition: transform 0.3s ease-out;
}
&:hover,
:focus,
:active {
background: #ffffff !important;
border: 1px solid #e3e9f3;
}
`;
}}
`;
export default Toggle;

View File

@ -9,20 +9,20 @@ const NameWrapper = styled.div`
cursor: pointer;
${({ isOverEditBlock, isOverRemove, isSelected }) => {
if (isOverRemove) {
return `
color: #f64d0a;
`;
}
if (isOverRemove) {
return `
color: #f64d0a;
`;
}
if (isSelected || isOverEditBlock) {
return `
color: #007eff;
`;
}
if (isSelected || isOverEditBlock) {
return `
color: #007eff;
`;
}
return '';
}}
return '';
}}
`;
export default NameWrapper;

View File

@ -3,16 +3,16 @@ import styled from 'styled-components';
const Carret = styled.div`
position: absolute;
${({ right }) => {
if (right) {
return `
right: -4px;
`;
}
if (right) {
return `
left: -1px;
right: -4px;
`;
}}
}
return `
left: -1px;
`;
}}
height: 100%;
width: 2px;
margin-right: 3px;

View File

@ -13,18 +13,15 @@ const Button = styled(PlusButton)`
}
}
${({ hasError }) => {
if (hasError) {
return `
background-color: #FAA684;
:before, :after {
background-color: #F64D0A;
}
`;
${({ hasError }) =>
hasError &&
`
background-color: #FAA684;
:before, :after {
background-color: #F64D0A;
}
`}
return '';
}}
&.isOpen {
transform: rotate(-45deg);
}

View File

@ -1,4 +1,4 @@
import styled, { css } from 'styled-components';
import styled from 'styled-components';
const ComponentsPicker = styled.div`
overflow: hidden;
@ -12,10 +12,10 @@ const ComponentsPicker = styled.div`
}
${({ isOpen }) =>
isOpen &&
css`
max-height: 260px;
`}
isOpen &&
`
max-height: 260px;
`}
.componentPickerTitle {
margin-bottom: 15px;

View File

@ -1,4 +1,4 @@
import styled, { css } from 'styled-components';
import styled from 'styled-components';
const Div = styled.div`
padding-left: 0;
@ -41,26 +41,22 @@ const Label = styled.label`
border-radius: 3px;
}
${({ value }) => {
if (value === true) {
return css`
font-weight: 500;
&:after {
content: '\f00c';
position: absolute;
top: 1px;
left: 17px;
font-size: 10px;
font-family: 'FontAwesome';
font-weight: 100;
color: #1c5de7;
transition: all 0.2s;
}
`;
${({ value }) =>
value &&
`
font-weight: 500;
&:after {
content: '\f00c';
position: absolute;
top: 1px;
left: 17px;
font-size: 10px;
font-family: 'FontAwesome';
font-weight: 100;
color: #1c5de7;
transition: all 0.2s;
}
return '';
}}
`}
`;
export { Div, Label };

View File

@ -5,60 +5,60 @@ const NonRepeatableWrapper = styled.div`
padding: 0 20px !important;
${({ isEmpty, isFromDynamicZone }) => {
if (isEmpty) {
return `
position: relative;
height: 108px;
margin-bottom: 21px !important;
background-color: #fafafb;
text-align: center;
cursor: pointer;
border-radius: 2px;
> button {
position: absolute;
top: 30px;
left: calc(50% - 18px);
height: 36px;
width: 36px;
line-height: 38px;
border-radius: 50%;
background-color: #f3f4f4;
cursor: pointer;
}
border: 1px solid transparent;
&:hover {
border: 1px solid #aed4fb;
background-color: #e6f0fb;
> button {
:before,
:after {
background-color: #007eff;
}
background-color: #aed4fb;
}
> p {
color: #007eff;
}
}
`;
}
if (isFromDynamicZone) {
return `
background-color: #fff;
padding: 0 10px !important;
`;
}
if (isEmpty) {
return `
padding-top: 25px !important;
background-color: #f7f8f8;
margin-bottom: 18px !important;
position: relative;
height: 108px;
margin-bottom: 21px !important;
background-color: #fafafb;
text-align: center;
cursor: pointer;
border-radius: 2px;
> button {
position: absolute;
top: 30px;
left: calc(50% - 18px);
height: 36px;
width: 36px;
line-height: 38px;
border-radius: 50%;
background-color: #f3f4f4;
cursor: pointer;
}
border: 1px solid transparent;
&:hover {
border: 1px solid #aed4fb;
background-color: #e6f0fb;
> button {
:before,
:after {
background-color: #007eff;
}
background-color: #aed4fb;
}
> p {
color: #007eff;
}
}
`;
}}
}
if (isFromDynamicZone) {
return `
background-color: #fff;
padding: 0 10px !important;
`;
}
return `
padding-top: 25px !important;
background-color: #f7f8f8;
margin-bottom: 18px !important;
`;
}}
`;
export default NonRepeatableWrapper;

View File

@ -1,4 +1,4 @@
import styled, { css } from 'styled-components';
import styled from 'styled-components';
const Wrapper = styled.div`
display: flex;
@ -7,16 +7,14 @@ const Wrapper = styled.div`
height: 30px;
width: 100%;
padding: 0 5px;
${({ isComponent }) => {
if (isComponent) {
return css`
height: 34px;
padding: 0;
`;
}
return '';
}}
${({ isComponent }) =>
isComponent &&
`
height: 34px;
padding: 0;
`}
border-radius: 2px;
> div {
width: 100%;

View File

@ -10,13 +10,11 @@ const EmptyComponent = styled.div`
text-align: center;
background-color: #fff;
${({ hasMinError }) => {
if (hasMinError) {
return 'border-color: #FAA684';
}
return '';
}}
${({ hasMinError }) =>
hasMinError &&
`
border-color: #FAA684
`}
> p {
color: #9ea7b8;