crimson-quirks/crimson-quirks-ui
1
0
Fork 0
mirror of https://github.com/hazemKrimi/crimson-quirks-ui.git synced 2026-05-01 18:20:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update text area component

Browse Source
This commit is contained in:
Hazem Krimi
2021-04-23 18:25:09 +01:00
parent d633a519eb
commit ad9a101d58
2 changed files with 26 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/TextArea/index.tsx
+2
View File
@@ -49,6 +49,7 @@ const TextArea = ({
)}
</div>
<div className='textarea'>
<div>
<textarea
rows={10}
value={value}
@@ -57,6 +58,7 @@ const TextArea = ({
placeholder={placeholder}
/>
</div>
</div>
</Wrapper>
);
};
src/components/TextArea/styles.ts
+17 -29
View File
@@ -23,32 +23,20 @@ export const Wrapper = styled.div<WrapperProps>`
width: inherit;
height: inherit;
border-radius: 5px;
padding: 1rem;
position: relative;
padding: 2px;
color: ${({ theme }) => theme.colors.black.main};
background: ${({ theme }) => theme.colors.white.main};
background-clip: padding-box;
border: 2px solid transparent;
&:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: inherit;
height: inherit;
z-index: -1;
margin: -2px;
border-radius: inherit;
div {
background: ${({ theme }) => theme.colors.white.main};
padding: 1rem;
border-radius: 5px;
}
}
.info {
margin-bottom: 5px;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-columns: 1fr auto;
align-items: center;
p {
@@ -78,61 +66,61 @@ export const Wrapper = styled.div<WrapperProps>`
switch (color) {
case 'client':
return css`
.textarea:before {
.textarea {
background: ${theme.colors.client.light};
}
`;
case 'productOwner':
return css`
.textarea:before {
.textarea {
background: ${theme.colors.productOwner.light};
}
`;
case 'developer':
return css`
.textarea:before {
.textarea {
background: ${theme.colors.developer.light};
}
`;
case 'admin':
return css`
.textarea:before {
.textarea {
background: ${theme.colors.admin.light};
}
`;
case 'success':
return css`
.textarea:before {
.textarea {
background: ${theme.colors.success.main};
}
`;
case 'warning':
return css`
.textarea:before {
.textarea {
background: ${theme.colors.warning.main};
}
`;
case 'error':
return css`
.textarea:before {
.textarea {
background: ${theme.colors.error.main};
}
`;
case 'black':
return css`
.textarea:before {
.textarea {
background: ${theme.colors.black.main};
}
`;
case 'white':
return css`
.textarea:before {
.textarea {
background: ${theme.colors.white.main};
}
`;
default:
return css`
.textarea:before {
.textarea {
background: ${theme.colors.client.light};
}
`;
@@ -148,7 +136,7 @@ export const Wrapper = styled.div<WrapperProps>`
-webkit-text-fill-color: transparent;
}
.textarea:before {
.textarea {
background: ${theme.colors.error.main};
}
`}