mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-29 18:48:45 +08:00
fix: 表单移动端样式优化 & 编辑器移动端预览样式优化 (#10377)
* fix: 编辑器移动端预览态弹窗不可见 * feat: 下拉框样式改成左对齐 * fix: 级联选择器箭头样式对齐下拉框 --------- Co-authored-by: zhangxulong <zhangxulong@baidu.com>
This commit is contained in:
parent
2299d9a3dd
commit
ffd251c240
@ -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 {
|
||||||
|
@ -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(
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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; // 避免右侧下拉箭头换行
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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 {
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user