parent
a6f2fddd29
commit
fd9a68e586
@ -0,0 +1,540 @@ |
||||
import css from './index.module.scss' |
||||
import {useState} from "react"; |
||||
|
||||
export default function StyleControl(props) { |
||||
|
||||
if (!props.node) return undefined; |
||||
const styleArr = props.node.config.style; |
||||
|
||||
const [styleReal, setStyleReal] = useState({ |
||||
'background-img': undefined, |
||||
'background-color': undefined, |
||||
'background-other': undefined, |
||||
'position': 'absolute', |
||||
'width': undefined, |
||||
'width-mx':'px', |
||||
'height': undefined, |
||||
'height-mx': 'px', |
||||
'backdrop-filter': undefined, |
||||
'top': undefined, |
||||
'right': undefined, |
||||
'bottom': undefined, |
||||
'left': undefined, |
||||
'top-mx': 'px', |
||||
'right-mx': 'px', |
||||
'bottom-mx': 'px', |
||||
'left-mx': 'px', |
||||
'margin': undefined, |
||||
'padding': undefined, |
||||
'border-radius': undefined, |
||||
'border-radius-mx': 'px', |
||||
'border': undefined, |
||||
'href': undefined, |
||||
'overflow': 'auto', |
||||
'color': undefined, |
||||
'font-size': undefined, |
||||
'font-size-mx': 'em', |
||||
'font-weight': undefined, |
||||
'line-height': undefined, |
||||
'line-height-mx': 'px', |
||||
'text-align': 'left', |
||||
'white-space': undefined, |
||||
'text-indent': undefined, |
||||
'text-indent-mx': 'px', |
||||
}) |
||||
|
||||
function handleStyleCHange(e, caseText) { |
||||
if(caseText == "background-img"){ |
||||
|
||||
}else{ |
||||
styleReal[caseText] = e.target.value; |
||||
} |
||||
setStyleReal({...styleReal}) |
||||
} |
||||
|
||||
|
||||
return Object.keys(styleArr).map((item, index) => { |
||||
return <div className={css.styleBox} key={item}> |
||||
<div className={css.title}> |
||||
<div>{item}</div> |
||||
<div onClick={() => console.log(styleReal)}>{item == 'containerStyle' ? '容器样式' : '文本样式'}</div> |
||||
</div> |
||||
<div className={css.styleControlBox}> |
||||
<div className={css.container}> |
||||
{ |
||||
styleArr[item].map(name => { |
||||
return <div className={css.styleControl} key={name}> |
||||
<div className={css.styleName}>{name}</div> |
||||
<div className={css.control}> |
||||
{ |
||||
name == 'position' && <div> |
||||
<div className={css.one}> |
||||
<div className={css.title}>定位</div> |
||||
<div className={css.two}> |
||||
<div className={css.inputTextSmall}> |
||||
<div></div> |
||||
<div> |
||||
</div> |
||||
<div><label><input type="radio" name='position' |
||||
defaultChecked={styleReal['position'] != 'absolute'} |
||||
value='relative' |
||||
onChange={e => handleStyleCHange(e, 'position')}/>relative</label> |
||||
<label><input type="radio" name='position' |
||||
defaultChecked={styleReal['position'] == 'absolute'} |
||||
value='absolute' |
||||
onChange={e => handleStyleCHange(e, 'position')}/>absolute</label> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
} |
||||
{ |
||||
name == 'box-shadow' && <div> |
||||
<div className={css.one}> |
||||
<div className={css.title}>边框阴影</div> |
||||
<div className={css.two}> |
||||
<div className={css.inputTextSmall}> |
||||
<div></div> |
||||
<div><input type="text" style={{width: 'auto'}} |
||||
value={styleReal['box-shadow']} |
||||
onChange={e => handleStyleCHange(e, 'box-shadow')}/> |
||||
</div> |
||||
<div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
} |
||||
{ |
||||
name == 'width' && <div> |
||||
<div className={css.one}> |
||||
<div className={css.title}>向右距离</div> |
||||
<div className={css.two}> |
||||
<div className={css.inputTextSmall}> |
||||
<div></div> |
||||
<div><input type="number" value={styleReal['width']} |
||||
onChange={e => handleStyleCHange(e, 'width')}/></div> |
||||
<div> |
||||
<label><input type="radio" name='width' defaultChecked={styleReal['width-mx'] != '%'} |
||||
value='px' |
||||
onChange={e => handleStyleCHange(e, 'width-mx')}/>px</label> |
||||
<label><input type="radio" name='width' value='%' defaultChecked={styleReal['width-mx'] == '%'} |
||||
onChange={e => handleStyleCHange(e, 'width-mx')}/>%</label> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
} |
||||
{ |
||||
name == 'height' && <div> |
||||
<div className={css.one}> |
||||
<div className={css.title}>向右距离</div> |
||||
<div className={css.two}> |
||||
<div className={css.inputTextSmall}> |
||||
<div></div> |
||||
<div><input type="number" width={100} value={styleReal['height']} |
||||
onChange={e => handleStyleCHange(e, 'height')}/></div> |
||||
<div> |
||||
<label><input type="radio" name='height' defaultChecked={styleReal['height-mx'] != '%'} |
||||
value='px' |
||||
onChange={e => handleStyleCHange(e, 'height-mx')}/>px</label> |
||||
<label><input type="radio" name='height' value='%' defaultChecked={styleReal['height-mx'] == '%'} |
||||
onChange={e => handleStyleCHange(e, 'height-mx')}/>%</label> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
} |
||||
{ |
||||
name == 'background' && <div> |
||||
<div className={css.one}> |
||||
<div className={css.title}>背景图片</div> |
||||
<div className={css.two}> |
||||
<div><input type="file" value={styleReal['background-img']} |
||||
onChange={e => handleStyleCHange(e, 'background-img')}/> |
||||
</div> |
||||
<label><input type="radio" name='background-img' value='a' defaultChecked={styleReal['background-other'] != 'b' || styleReal['background-other'] != 'b'} |
||||
onChange={e => handleStyleCHange(e, 'background-other')}/>自适应</label> |
||||
<label><input type="radio" name='background-img' value='b' defaultChecked={styleReal['background-other'] == 'b'} |
||||
onChange={e => handleStyleCHange(e, 'background-other')}/>循环</label> |
||||
<label><input type="radio" name='background-img' value='c' defaultChecked={styleReal['background-other'] == 'c'} |
||||
onChange={e => handleStyleCHange(e, 'background-other')}/>平铺</label> |
||||
</div> |
||||
</div> |
||||
<div className={css.one}> |
||||
<div className={css.title}>背景颜色</div> |
||||
<div className={css.two}> |
||||
<div className={css.inputTextSmall}> |
||||
<div>#</div> |
||||
<div><input type="text" value={styleReal['background-color']} |
||||
onChange={e => handleStyleCHange(e, 'background-color')}/> |
||||
</div> |
||||
<div></div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
} |
||||
{ |
||||
name == 'backdrop-filter' && <div> |
||||
<div className={css.one}> |
||||
<div className={css.title}>滤镜</div> |
||||
<div className={css.two}> |
||||
<div className={css.inputTextSmall}> |
||||
<div></div> |
||||
<div><input type="number" width={100} |
||||
value={styleReal['backdrop-filter']} |
||||
onChange={e => handleStyleCHange(e, 'backdrop-filter')}/> |
||||
</div> |
||||
<div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
} |
||||
{ |
||||
name == 'top' && <div> |
||||
<div className={css.one}> |
||||
<div className={css.title}>向上距离</div> |
||||
<div className={css.two}> |
||||
<div className={css.inputTextSmall}> |
||||
<div></div> |
||||
<div><input type="number" value={styleReal['top']} |
||||
onChange={e => handleStyleCHange(e, 'top')}/></div> |
||||
<div> |
||||
<label><input type="radio" name='top' value='px' defaultChecked={styleReal['top-mx'] != '%'} |
||||
onChange={e => handleStyleCHange(e, 'top-mx')}/>px</label> |
||||
<label><input type="radio" name='top' value='%' defaultChecked={styleReal['top-mx'] == '%'} |
||||
onChange={e => handleStyleCHange(e, 'top-mx')}/>%</label> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
} |
||||
{ |
||||
name == 'right' && <div> |
||||
<div className={css.one}> |
||||
<div className={css.title}>向右距离</div> |
||||
<div className={css.two}> |
||||
<div className={css.inputTextSmall}> |
||||
<div></div> |
||||
<div><input type="number" value={styleReal['right']} |
||||
onChange={e => handleStyleCHange(e, 'right')}/></div> |
||||
<div> |
||||
<label><input type="radio" name='right' defaultChecked={styleReal['right-mx'] == '%'} |
||||
value='px' |
||||
onChange={e => handleStyleCHange(e, 'right-mx')}/>px</label> |
||||
<label><input type="radio" name='right' value='%' defaultChecked={styleReal['right-mx'] == '%'} |
||||
onChange={e => handleStyleCHange(e, 'right-mx')}/>%</label> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
} |
||||
{ |
||||
name == 'bottom' && <div> |
||||
<div className={css.one}> |
||||
<div className={css.title}>向下距离</div> |
||||
<div className={css.two}> |
||||
<div className={css.inputTextSmall}> |
||||
<div></div> |
||||
<div><input type="number" value={styleReal['bottom']} |
||||
onChange={e => handleStyleCHange(e, 'bottom')}/></div> |
||||
<div> |
||||
<label><input type="radio" name='bottom' defaultChecked={styleReal['bottom-mx'] != '%'} |
||||
value='px' |
||||
onChange={e => handleStyleCHange(e, 'bottom-mx')}/>px</label> |
||||
<label><input type="radio" name='bottom' value='%' defaultChecked={styleReal['bottom-mx'] == '%'} |
||||
onChange={e => handleStyleCHange(e, 'bottom-mx')}/>%</label> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
} |
||||
{ |
||||
name == 'left' && <div> |
||||
<div className={css.one}> |
||||
<div className={css.title}>向左距离</div> |
||||
<div className={css.two}> |
||||
<div className={css.inputTextSmall}> |
||||
<div></div> |
||||
<div><input type="number" value={styleReal['left']} |
||||
onChange={e => handleStyleCHange(e, 'left')}/></div> |
||||
<div> |
||||
<label><input type="radio" name='left' value='px' defaultChecked={styleReal['bottom-mx'] != '%'} |
||||
onChange={e => handleStyleCHange(e, 'left-mx')}/>px</label> |
||||
<label><input type="radio" name='left' value='%' defaultChecked={styleReal['bottom-mx'] == '%'} |
||||
onChange={e => handleStyleCHange(e, 'left-mx')}/>%</label> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
} |
||||
{ |
||||
name == 'margin' && <div> |
||||
<div className={css.one}> |
||||
<div className={css.title}>外边距</div> |
||||
<div className={css.two}> |
||||
<div className={css.inputTextSmall}> |
||||
<div></div> |
||||
<div><input type="text" style={{width: 'auto'}} |
||||
value={styleReal['margin']} |
||||
onChange={e => handleStyleCHange(e, 'margin')}/></div> |
||||
<div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
} |
||||
{ |
||||
name == 'padding' && <div> |
||||
<div className={css.one}> |
||||
<div className={css.title}>内边距</div> |
||||
<div className={css.two}> |
||||
<div className={css.inputTextSmall}> |
||||
<div></div> |
||||
<div><input type="text" style={{width: 'auto'}} |
||||
value={styleReal['border']} |
||||
onChange={e => handleStyleCHange(e, 'padding')}/></div> |
||||
<div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
} |
||||
{ |
||||
name == 'border' && <div> |
||||
<div className={css.one}> |
||||
<div className={css.title}>边框</div> |
||||
<div className={css.two}> |
||||
<div className={css.inputTextSmall}> |
||||
<div></div> |
||||
<div><input type="text" style={{width: 'auto'}} |
||||
value={styleReal['border']} |
||||
onChange={e => handleStyleCHange(e, 'border')}/></div> |
||||
<div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
} |
||||
{ |
||||
name == 'border-radius' && <div> |
||||
<div className={css.one}> |
||||
<div className={css.title}>圆角边框</div> |
||||
<div className={css.two}> |
||||
<div className={css.inputTextSmall}> |
||||
<div></div> |
||||
<div><input type="number" value={styleReal['border-radius']} |
||||
onChange={e => handleStyleCHange(e, 'border-radius')}/> |
||||
</div> |
||||
<div> |
||||
<label><input type="radio" name='border-radius' defaultChecked={styleReal['border-radius-mx'] != '%'} |
||||
value='px' |
||||
onChange={e => handleStyleCHange(e, 'border-radius-mx')}/>px</label> |
||||
<label><input type="radio" name='border-radius' value='%' defaultChecked={styleReal['border-radius-mx'] == '%'} |
||||
onChange={e => handleStyleCHange(e, 'border-radius-mx')}/>%</label> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
} |
||||
{ |
||||
name == 'href' && <div> |
||||
<div className={css.one}> |
||||
<div className={css.title}>点击链接</div> |
||||
<div className={css.two}> |
||||
<div className={css.inputTextSmall}> |
||||
<div></div> |
||||
<div><input type="text" style={{width: 'auto'}} |
||||
value={styleReal['href']} |
||||
onChange={e => handleStyleCHange(e, 'href')}/></div> |
||||
<div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
} |
||||
{ |
||||
name == 'overflow' && <div> |
||||
<div className={css.one}> |
||||
<div className={css.title}>超出隐藏</div> |
||||
<div className={css.two}> |
||||
<div className={css.inputTextSmall}> |
||||
<div></div> |
||||
<div> |
||||
</div> |
||||
<div> |
||||
<label><input type="radio" name='overflow' defaultChecked={styleReal['overflow'] != 'auto'} |
||||
value='hidden' |
||||
onChange={e => handleStyleCHange(e, 'overflow')}/>hidden</label> |
||||
<label><input type="radio" name='overflow' value='auto' defaultChecked={styleReal['overflow'] == 'auto'} |
||||
onChange={e => handleStyleCHange(e, 'overflow')}/>auto</label> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
} |
||||
{ |
||||
name == 'color' && <div> |
||||
<div className={css.one}> |
||||
<div className={css.title}>文字颜色</div> |
||||
<div className={css.two}> |
||||
<div className={css.inputTextSmall}> |
||||
<div>#</div> |
||||
<div><input type="text" value={styleReal['color']} |
||||
onChange={e => handleStyleCHange(e, 'color')}/></div> |
||||
<div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
} |
||||
{ |
||||
name == 'font-size' && <div> |
||||
<div className={css.one}> |
||||
<div className={css.title}>文字大小</div> |
||||
<div className={css.two}> |
||||
<div className={css.inputTextSmall}> |
||||
<div></div> |
||||
<div><input type="number" style={{width: '40px'}} |
||||
value={styleReal['font-size']} |
||||
onChange={e => handleStyleCHange(e, 'font-size')}/> |
||||
</div> |
||||
<div> |
||||
<label><input type="radio" name='font-size' defaultChecked={styleReal['font-size-mx'] != 'em' || styleReal['font-size-mx'] != 'rem'} |
||||
value='px' |
||||
onChange={e => handleStyleCHange(e, 'font-size-mx')}/>px</label> |
||||
<label><input type="radio" name='font-size' value='em' defaultChecked={styleReal['font-size-mx'] == 'em'} |
||||
onChange={e => handleStyleCHange(e, 'font-size-mx')}/>em</label> |
||||
<label><input type="radio" name='font-size' value='rem' defaultChecked={styleReal['font-size-mx'] == 'rem'} |
||||
onChange={e => handleStyleCHange(e, 'font-size-mx')}/>rem</label> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
} |
||||
{ |
||||
name == 'font-weight' && <div> |
||||
<div className={css.one}> |
||||
<div className={css.title}>文字粗细</div> |
||||
<div className={css.two}> |
||||
<div className={css.inputTextSmall}> |
||||
<div></div> |
||||
<div><input type="number" style={{width: 'auto'}} |
||||
value={styleReal['font-weight']} |
||||
onChange={e => handleStyleCHange(e, 'font-weight')}/> |
||||
</div> |
||||
<div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
} |
||||
{ |
||||
name == 'white-space' && <div>xx</div> |
||||
} |
||||
{ |
||||
name == 'text-indent' && <div> |
||||
<div className={css.one}> |
||||
<div className={css.title}>首行缩进</div> |
||||
<div className={css.two}> |
||||
<div className={css.inputTextSmall}> |
||||
<div></div> |
||||
<div><input type="number" style={{width: '40px'}} |
||||
value={styleReal['text-indent']} |
||||
onChange={e => handleStyleCHange(e, 'text-indent')}/> |
||||
</div> |
||||
<div> |
||||
<label><input type="radio" name='text-indent' defaultChecked={styleReal['text-indent-mx'] != 'em' || styleReal['text-indent-mx'] != 'rem'} |
||||
value='px' |
||||
onChange={e => handleStyleCHange(e, 'text-indent-mx')}/>px</label> |
||||
<label><input type="radio" name='text-indent' value='em' defaultChecked={styleReal['text-indent-mx'] == 'em'} |
||||
onChange={e => handleStyleCHange(e, 'text-indent-mx')}/>em</label> |
||||
<label><input type="radio" name='text-indent' value='rem' defaultChecked={styleReal['text-indent-mx'] == 'rem'} |
||||
onChange={e => handleStyleCHange(e, 'text-indent-mx')}/>rem</label> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
} |
||||
{ |
||||
name == 'line-height' && <div> |
||||
<div className={css.one}> |
||||
<div className={css.title}>行高</div> |
||||
<div className={css.two}> |
||||
<div className={css.inputTextSmall}> |
||||
<div></div> |
||||
<div><input type="number" style={{width: '40px'}} |
||||
value={styleReal['line-height']} |
||||
onChange={e => handleStyleCHange(e, 'line-height')}/> |
||||
</div> |
||||
<div> |
||||
<label><input type="radio" name='line-height' defaultChecked={styleReal['line-height-mx'] != 'em' || styleReal['line-height-mx'] != 'rem'} |
||||
value='px' |
||||
onChange={e => handleStyleCHange(e, 'line-height-mx')}/>px</label> |
||||
<label><input type="radio" name='line-height' value='em' defaultChecked={styleReal['line-height-mx'] == 'em'} |
||||
onChange={e => handleStyleCHange(e, 'line-height-mx')}/>em</label> |
||||
<label><input type="radio" name='line-height' value='rem' defaultChecked={styleReal['line-height-mx'] == 'em'} |
||||
onChange={e => handleStyleCHange(e, 'line-height-mx')}/>rem</label> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
} |
||||
{ |
||||
name == 'text-align' && <div> |
||||
<div className={css.one}> |
||||
<div className={css.title}>对齐</div> |
||||
<div className={css.two}> |
||||
<div className={css.inputTextSmall}> |
||||
<div></div> |
||||
<div><input type="number" style={{width: '40px'}} |
||||
value={styleReal['text-indent']} |
||||
onChange={e => handleStyleCHange(e, 'text-align')}/> |
||||
</div> |
||||
<div> |
||||
<label><input type="radio" name='text-indent' defaultChecked={styleReal['text-align-mx'] != 'center' || styleReal['text-align-mx'] != 'right'} |
||||
value='left' |
||||
onChange={e => handleStyleCHange(e, 'text-indent-mx')}/>px</label> |
||||
<label><input type="radio" name='text-indent' defaultChecked={styleReal['text-align-mx'] == 'center'} |
||||
value='center' |
||||
onChange={e => handleStyleCHange(e, 'text-indent-mx')}/>em</label> |
||||
<label><input type="radio" name='text-indent' defaultChecked={styleReal['text-align-mx'] == 'right'} |
||||
value='right' |
||||
onChange={e => handleStyleCHange(e, 'text-indent-mx')}/>rem</label> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
} |
||||
</div> |
||||
</div> |
||||
}) |
||||
} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
}) |
||||
} |
@ -0,0 +1,117 @@ |
||||
@import '@/assets/default.scss'; |
||||
.styleBox{ |
||||
position: relative; |
||||
padding: 0.5rem 0; |
||||
|
||||
& > div.title{ |
||||
position: relative; |
||||
border-left: 3px solid #666; |
||||
padding: 0.8rem; |
||||
& > div:first-child{ |
||||
font-size: 1.2rem; |
||||
font-weight: 600; |
||||
line-height: 1.5em; |
||||
} |
||||
& > div:last-child{ |
||||
font-size: 0.9rem; |
||||
color: #888; |
||||
//@include font-serif; |
||||
} |
||||
} |
||||
& > div.styleControlBox{ |
||||
position: relative; |
||||
overflow: overlay; |
||||
.container{ |
||||
position: relative; |
||||
overflow: auto; |
||||
.styleControl{ |
||||
position: relative; |
||||
& > .styleName{ |
||||
position: relative; |
||||
@include font-mono; |
||||
padding: 1.2rem; |
||||
&:before{ |
||||
content: "--"; |
||||
position: absolute; |
||||
@include font-mono; |
||||
left: 0px; |
||||
background: #1a1a1a; |
||||
border-radius: 100%; |
||||
overflow: hidden; |
||||
height: 0.6rem; |
||||
line-height: 100%; |
||||
width: 0.6rem; |
||||
margin: 0.4rem 0 0.4rem 0.3rem; |
||||
} |
||||
} |
||||
& > div.control{ |
||||
position: relative; |
||||
& > div{ |
||||
position: relative; |
||||
& > div.one{ |
||||
position: relative; |
||||
padding-left: 1rem; |
||||
&>div.title{ |
||||
position: relative; |
||||
border-left: 2px solid #888; |
||||
line-height: 1.5em; |
||||
padding-left: 0.3rem; |
||||
color: #333; |
||||
font-size: 0.9rem; |
||||
} |
||||
& > div.two{ |
||||
position: relative; |
||||
padding: 0.5rem 0; |
||||
& > div.title{ |
||||
|
||||
} |
||||
& > div.three{ |
||||
|
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.inputTextSmall{ |
||||
position: relative; |
||||
display: flex; |
||||
font-size: 1rem; |
||||
overflow: hidden; |
||||
width: 100%; |
||||
& > div:nth-child(1){ |
||||
position: relative; |
||||
flex-shrink: 0; |
||||
margin-right: 0.5rem; |
||||
width: 1rem; |
||||
} |
||||
& > div:nth-child(2){ |
||||
position: relative; |
||||
flex: 1 1; |
||||
input{ |
||||
position: relative; |
||||
width: auto; |
||||
max-width: 100px; |
||||
display: inline-block; |
||||
font-size: 1rem; |
||||
padding: 0.1rem 0.5rem; |
||||
border-radius: 3px; |
||||
} |
||||
} |
||||
& > div:nth-child(3){ |
||||
position: relative; |
||||
flex-shrink: 0; |
||||
margin-left: 0.5rem; |
||||
& > *{ |
||||
margin: 0 0.3rem; |
||||
} |
||||
} |
||||
} |
||||
|
||||
input[type='file']{ |
||||
width: 150px; |
||||
} |
Loading…
Reference in new issue