优化 image focus 状态提示可粘贴图片的样式优化

This commit is contained in:
liaoxuezhi 2019-10-31 15:38:53 +08:00
parent 2547ae2162
commit 109bd2b5c2
2 changed files with 22 additions and 15 deletions

View File

@ -40,16 +40,23 @@
} }
&-pasteTip { &-pasteTip {
display: block; pointer-events: none;
left: 0;
top: 50%;
transform: translateY(-50%);
position: absolute; position: absolute;
color: $text--muted-color; font-size: $Tooltip--attr-fontSize;
font-size: 12px; line-height: $Tooltip--attr-lineHeigt;
transform: scale(0.8); text-align: left;
transform-origin: 100% 100%; white-space: nowrap;
right: 0; background: $Tooltip--attr-bg;
bottom: 0; border: $Tooltip--attr-borderWidth solid $Tooltip--attr-borderColor;
padding: 2px 5px; border-radius: $Tooltip--attr-borderRadius;
background: rgba(255, 255, 255, 0.8); box-shadow: $Tooltip--attr-boxShadow;
left: 100%;
color: $Tooltip--attr-color;
padding: $Tooltip--attr-paddingY $Tooltip--attr-paddingX;
margin: 30px 0 0 $Tooltip--attr-gap;
} }
&-dropzone:focus &-addBtn { &-dropzone:focus &-addBtn {

View File

@ -938,13 +938,13 @@ export default class ImageControl extends React.Component<ImageProps, ImageState
data-position="right" data-position="right"
> >
<Icon icon="plus" className="icon" /> <Icon icon="plus" className="icon" />
</label>
) : null}
{isFocused ? ( {isFocused ? (
<span className={cx('ImageControl-pasteTip')}> <span className={cx('ImageControl-pasteTip')}>
</span> </span>
) : null}
</label>
) : null} ) : null}
{!autoUpload && !hideUploadButton && files.length ? ( {!autoUpload && !hideUploadButton && files.length ? (