mirror/chinese-colors
2
0
Fork 1
mirror of https://github.com/zerosoul/chinese-colors.git synced 2024-11-27 04:40:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: updates

Browse Source
This commit is contained in:
Tristan 2019-09-10 00:03:56 +08:00
parent dc96ec4609
commit da0f2095a4
5 changed files with 11 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.js
View File

@ -119,7 +119,7 @@ const App = () => {
<Header />
</Wrapper>
{!modalVisible && <IconInfo showInfoModal={showModal} />}
<InfoModal visible={modalVisible} bgColor={currColor.hex} closeModal={closeModal} />
{modalVisible && <InfoModal bgColor={currColor.hex} closeModal={closeModal} />}
</>
);
};

11
src/components/ColorSet.js
View File

@ -7,21 +7,22 @@ const Wrapper = styled.li`
padding: 0.8rem 0.4rem;
padding-top: 0.2rem;
font-size: 1.5rem;
border-top-right-radius: 0.6rem;
border-top-left-radius: 0.6rem;
border-top-right-radius: 0.5rem;
border-top-left-radius: 0.5rem;
margin-right: 0.4rem;
transition: all 0.8s;
transition: all 0.6s;
min-height: 8rem;
transform: translateY(50%);
text-align: center;
writing-mode: vertical-lr;
font-weight: 800;
box-shadow: 0 0 0.8rem black;
text-shadow: 0 0 6px #999;
&:last-child {
margin-right: 0;
}
&.selected {
transform: translateY(-0.6rem) scale(1.2);
transform: translateY(0) scale(1.1);
}
`;
@ -34,7 +35,7 @@ const ColorSet = ({ name, rgb, hex, currSet, setCurrSet }) => {
return (
<Wrapper
onClick={handleSetClick}
style={{ color: hex, background: `rgba(${rgb.join(',')},.4)` }}
style={{ color: hex, background: `rgba(${rgb.join(',')})` }}
className={name == currSet ? 'selected' : ''}
>
{name}

1
src/components/ColorTitle.js
View File

@ -14,6 +14,7 @@ const Wrapper = styled.hgroup`
padding-top: 1rem;
position: relative;
transition: transform 0.4s ease-in;
width: 4.6rem;
cursor: pointer;
&:hover {

2
src/components/IconInfo.js
View File

@ -3,7 +3,7 @@ import styled from 'styled-components';
const Wrapper = styled.aside`
position: fixed;
bottom: 1rem;
top: 1rem;
right: 1rem;
cursor: pointer;
border-radius: 50%;

8
src/components/InfoModal.js
View File

@ -8,12 +8,8 @@ const Wrapper = styled.section`
left: 0;
right: 0;
bottom: 0;
display: none;
z-index: 999;
&.visible {
display: block;
}
.mask {
position: absolute;
top: 0;
@ -61,11 +57,11 @@ const Wrapper = styled.section`
}
}
`;
export default function InfoModal({ visible, closeModal, bgColor }) {
export default function InfoModal({ closeModal, bgColor }) {
console.log('bgcolor', bgColor);
return (
<Wrapper bgColor={bgColor} className={visible && 'visible'}>
<Wrapper bgColor={bgColor}>
<div className="mask" onClick={closeModal}></div>
<div className="info">
<h2>chinese colors</h2>