fix: 表单移动端样式优化 & 编辑器移动端预览样式优化 (#10377)

* fix: 编辑器移动端预览态弹窗不可见

* feat: 下拉框样式改成左对齐

* fix: 级联选择器箭头样式对齐下拉框

---------

Co-authored-by: zhangxulong <zhangxulong@baidu.com>
This commit is contained in:
ls 2024-06-04 10:25:41 +08:00 committed by GitHub
parent 2299d9a3dd
commit ffd251c240
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 19 additions and 8 deletions

View File

@ -394,8 +394,9 @@
.ae-PreviewIFrame {
pointer-events: all !important;
border: 0 !important;
min-height: calc(100% - 46px);
min-height: 100%;
width: 100%;
height: auto !important;
}
.ae-IFramePreview {

View File

@ -39,7 +39,7 @@ export default class IFramePreview extends React.Component<IFramePreviewProps> {
return el.outerHTML;
});
styles.push(
`<style>body {height:auto !important;min-height:100%;display: flex;flex-direction: column;}</style>`
`<style>body {height:auto !important;min-height:100%;overflow-y:auto !important;display: flex;flex-direction: column;}</style>`
);
this.initialContent = `<!DOCTYPE html><html><head>${styles.join(

View File

@ -99,6 +99,12 @@
padding-right: px2rem(6px);
> svg {
transform: scale(0.8);
transition: transform var(--animation-duration);
display: inline-block;
color: var(--Form-select-caret-iconColor);
width: 10px;
height: 10px;
top: 0;
}
}

View File

@ -319,12 +319,17 @@
font-size: var(--fontSizeLg);
border: none;
justify-content: flex-end;
width: 100%;
&.is-focused,
&:hover {
border: none !important;
}
.#{$ns}ResultBox-value-wrap {
text-align: left;
}
.#{$ns}ResultBox-clear {
@include input-clear();
width: px2rem(26px);
@ -357,7 +362,6 @@
width: 10px;
height: 10px;
top: 0;
transform: rotate(-90deg);
}
}
}

View File

@ -737,8 +737,8 @@
height: 100%;
.#{$ns}ResultBox-value-wrap {
justify-content: flex-end;
text-align: right;
justify-content: flex-start;
text-align: left;
flex-wrap: nowrap; // 避免右侧下拉箭头换行
}
}

View File

@ -280,10 +280,10 @@
min-height: var(--Form-select-height);
border: none;
padding: 0;
font-size: var(--fontSizeLg);
font-size: var(--select-base-default-fontSize);
.#{$ns}Select-valueWrap {
text-align: right;
text-align: left;
padding-right: 4px;
}
.#{$ns}Select-arrow {

View File

@ -378,7 +378,7 @@ export class ResultBox extends React.Component<ResultBoxProps> {
)}
{!allowInput && mobileUI && showArrow ? (
<span className={cx('ResultBox-arrow')}>
<Icon icon="caret" className="icon" />
<Icon icon="right-arrow-bold" className="icon" />
</span>
) : null}
</div>