颜色参数样式调整

This commit is contained in:
ciaochaos 2020-05-15 17:01:10 +08:00
parent 0fc3c7c3f8
commit 7073895d52
3 changed files with 27 additions and 6 deletions

View File

@ -359,7 +359,6 @@ input[type="number"]{
.dl-btn {
cursor: pointer;
float: left;
font-size: 0.9em;
line-height: 2em;
margin: 0;
@ -405,6 +404,11 @@ input[type="number"]{
color: #44D7B6;
}
.dl-btn-active {
border-color: #44D7B6;
color: #44D7B6;
}
.dl-btn:active {
-webkit-transition-duration: 0s; /* Safari */
transition-duration: 0s;
@ -470,6 +474,14 @@ select:-moz-focusring {
text-shadow: 0 0 0 #000;
}
.Qr-color-picker {
width: 200px;
.twitter-picker {
max-width: calc(100vw - 46px)!important;
border: 0px solid rgba(0, 0, 0, 0.12) !important;
box-sizing: border-box;
border-radius: 10px!important;
box-shadow: 0px 3px 6px -4px rgba(0, 0, 0, 0.12), 0px 6px 16px 0px rgba(0, 0, 0, 0.08), 0px 9px 28px 8px rgba(0, 0, 0, 0.05) !important;
}
.twitter-picker:nth-last-child(1) input {
font: 15px 'Futura', sans-serif !important;
}

View File

@ -15,3 +15,6 @@
font-size: calc(10px + 2vmin);
color: black;
}
.Layout {
}

View File

@ -16,8 +16,13 @@ const ParamColor = ({ rendererIndex, paramIndex, value, onChange }) => {
display: 'inline-block',
cursor: 'pointer',
},
container: {
position: 'relative',
},
popover: {
marginTop: '10px',
position: 'absolute',
right: '0',
zIndex: '2',
},
cover: {
@ -31,7 +36,7 @@ const ParamColor = ({ rendererIndex, paramIndex, value, onChange }) => {
});
return (
<div>
<div style={styles.container}>
<button className="dl-btn" onClick={ () => setDisplay(!displayColorPicker) }>
选择颜色
</button>
@ -41,8 +46,9 @@ const ParamColor = ({ rendererIndex, paramIndex, value, onChange }) => {
<div style={styles.cover} onClick={() => setDisplay(false)} />
<TwitterPicker
key={"input_" + rendererIndex + "_" + paramIndex}
triangle="hide"
triangle="none"
color={value}
colors={['#FF6900', '#FCB900', '#7BDCB5', '#00D084', '#8ED1FC', '#0693E3', '#ABB8C3', '#EB144C', '#F78DA7', '#9900EF']}
onChangeComplete={onChange}
/>
</div>