github/lowcode-engine
1
0
Fork 0
mirror of https://github.com/alibaba/lowcode-engine.git synced 2026-01-13 01:21:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: 右侧配置面板样式优化

Browse Source
This commit is contained in:
mario.gk 2020-07-08 16:41:59 +08:00
parent cd0c6a8871
commit 00c28dde6f
2 changed files with 42 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
packages/editor-skeleton/src/components/field/index.less
View File

@ -1,8 +1,7 @@
@x-gap: 10px;
@x-gap: 12px;
@y-gap: 8px;
.lc-field {
// head
.lc-field-head {
display: flex;
align-items: center;
@ -61,23 +60,11 @@
}
}
.lc-field-icon {
// margin-right: @x-gap;
transform-origin: center;
transition: transform 0.1s;
}
}
// &.lc-plain-field {
// // for top-level style
// // padding: 8px 10px;
// > .lc-field-body {
// flex: 1;
// min-width: 0;
// display: flex;
// align-items: center;
// }
// }
&.lc-inline-field {
display: flex;
align-items: center;
@ -111,29 +98,33 @@
&.lc-block-field, &.lc-accordion-field {
display: block;
&:not(:first-child) {
border-top: 1px solid var(--color-line-normal);
&:first-child {
> .lc-field-head {
border-top: none;
}
}
> .lc-field-head {
// padding-left: @x-gap;
height: 32px;
display: flex;
align-items: center;
font-weight: 500;
// background: var(--color-block-background-shallow, rgba(31,56,88,.06));
// border-bottom: 1px solid var(--color-line-normal);
// color: var(--color-title);
background: var(--color-block-background-shallow, rgba(31,56,88,.06));
border-top: 1px solid var(--color-line-normal,rgba(31,56,88,.1));
border-bottom: 1px solid var(--color-line-normal,rgba(31,56,88,.1));
color: var(--color-title);
padding: 0 16px;
background-color: #F7F9FC;
color: #8F9BB3;
user-select: none;
> .lc-field-icon {
color: #8F9BB3;
}
}
> .lc-field-body {
// padding: @y-gap @x-gap/2;
padding: 16px;
padding: 12px;
.lc-inline-field{
margin-bottom: 16px;
margin-bottom: 12px;
&:last-child{
margin-bottom: 0;
}
@ -162,10 +153,15 @@
&.lc-accordion-field {
position: relative;
// collapsed
&:last-child.lc-field-is-collapsed{
border-bottom: 1px solid var(--color-line-normal);
&.lc-field-is-collapsed {
margin-bottom: 6px;
}
// collapsed
// &:last-child.lc-field-is-collapsed{
// border-bottom: 1px solid var(--color-line-normal);
// }
&.lc-field-is-collapsed {
> .lc-field-head .lc-field-icon {
transform: rotate(180deg);
@ -200,14 +196,19 @@
.lc-accordion-field, .lc-block-field {
> .lc-field-head {
padding-left: @x-gap/2;
padding-left: @x-gap;
background: var(--color-block-background-light);
border-bottom-color: var(--color-line-light, rgba(31, 56, 88, .1));
border-bottom: none;
border-top: none;
> .lc-field-icon {
// margin-right: @x-gap/2;
margin-right: 0;
}
}
> .lc-field-body {
padding: 8px;
}
}
// 3rd level field title width should short

16
packages/editor-skeleton/src/components/mixed-setter/style.less
View File

@ -6,7 +6,7 @@
position: relative;
>.lc-setter-actions {
position: absolute;
right: -2px;
right: -4px;
top: 50%;
transform: translate(100%, -50%);
.lc-switch-trigger {
@ -18,11 +18,19 @@
}
.lc-title {
cursor: pointer;
.lc-title-icon svg {
fill: #8F9BB3;
}
}
.variable-binded {
background: var(--color-brand, #006cff);
color: #fff!important;
border-radius: 3px;
.lc-title-icon svg {
fill: #fff;
}
}
}
.next-input,.next-date-picker,.next-month-picker {
@ -42,7 +50,7 @@
margin-right: 0;
>.lc-setter-actions {
position: absolute;
right: 16px;
right: 12px;
top: 0;
height: 32px;
transform: none;
@ -56,8 +64,8 @@
position: static;
margin-right: 0;
> .lc-setter-actions{
right: 32px;
top: 6px;
right: 36px;
top: 4px;
transform: none;
}
}