颜色参数样式调整
This commit is contained in:
parent
0fc3c7c3f8
commit
7073895d52
|
@ -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;
|
||||
}
|
|
@ -15,3 +15,6 @@
|
|||
font-size: calc(10px + 2vmin);
|
||||
color: black;
|
||||
}
|
||||
|
||||
.Layout {
|
||||
}
|
|
@ -1,7 +1,7 @@
|
|||
import React, {useState} from 'react';
|
||||
import reactCSS from 'reactcss';
|
||||
import PropTypes from 'prop-types';
|
||||
import {TwitterPicker} from 'react-color';
|
||||
import { TwitterPicker } from 'react-color';
|
||||
import '../Qrcode.css';
|
||||
|
||||
const ParamColor = ({ rendererIndex, paramIndex, value, onChange }) => {
|
||||
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue