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 { .ae-PreviewIFrame {
pointer-events: all !important; pointer-events: all !important;
border: 0 !important; border: 0 !important;
min-height: calc(100% - 46px); min-height: 100%;
width: 100%; width: 100%;
height: auto !important;
} }
.ae-IFramePreview { .ae-IFramePreview {

View File

@ -39,7 +39,7 @@ export default class IFramePreview extends React.Component<IFramePreviewProps> {
return el.outerHTML; return el.outerHTML;
}); });
styles.push( 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( this.initialContent = `<!DOCTYPE html><html><head>${styles.join(

View File

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

View File

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

View File

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

View File

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