github/lowcode-engine
1
0
Fork 0
mirror of https://github.com/alibaba/lowcode-engine.git synced 2026-01-19 22:21:54 +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; @y-gap: 8px;
.lc-field { .lc-field {
// head
.lc-field-head { .lc-field-head {
display: flex; display: flex;
align-items: center; align-items: center;
@ -61,23 +60,11 @@
} }
} }
.lc-field-icon { .lc-field-icon {
// margin-right: @x-gap;
transform-origin: center; transform-origin: center;
transition: transform 0.1s; 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 { &.lc-inline-field {
display: flex; display: flex;
align-items: center; align-items: center;
@ -111,29 +98,33 @@
&.lc-block-field, &.lc-accordion-field { &.lc-block-field, &.lc-accordion-field {
display: block; display: block;
&:not(:first-child) { &:first-child {
border-top: 1px solid var(--color-line-normal); > .lc-field-head {
border-top: none;
}
} }
> .lc-field-head { > .lc-field-head {
// padding-left: @x-gap;
height: 32px; height: 32px;
display: flex; display: flex;
align-items: center; align-items: center;
font-weight: 500; font-weight: 500;
// background: var(--color-block-background-shallow, rgba(31,56,88,.06)); background: var(--color-block-background-shallow, rgba(31,56,88,.06));
// border-bottom: 1px solid var(--color-line-normal); border-top: 1px solid var(--color-line-normal,rgba(31,56,88,.1));
// color: var(--color-title); border-bottom: 1px solid var(--color-line-normal,rgba(31,56,88,.1));
color: var(--color-title);
padding: 0 16px; padding: 0 16px;
background-color: #F7F9FC;
color: #8F9BB3;
user-select: none; user-select: none;
> .lc-field-icon {
color: #8F9BB3;
}
} }
> .lc-field-body { > .lc-field-body {
// padding: @y-gap @x-gap/2; // padding: @y-gap @x-gap/2;
padding: 16px; padding: 12px;
.lc-inline-field{ .lc-inline-field{
margin-bottom: 16px; margin-bottom: 12px;
&:last-child{ &:last-child{
margin-bottom: 0; margin-bottom: 0;
} }
@ -162,10 +153,15 @@
&.lc-accordion-field { &.lc-accordion-field {
position: relative; position: relative;
// collapsed
&:last-child.lc-field-is-collapsed{ &.lc-field-is-collapsed {
border-bottom: 1px solid var(--color-line-normal); margin-bottom: 6px;
} }
// collapsed
// &:last-child.lc-field-is-collapsed{
// border-bottom: 1px solid var(--color-line-normal);
// }
&.lc-field-is-collapsed { &.lc-field-is-collapsed {
> .lc-field-head .lc-field-icon { > .lc-field-head .lc-field-icon {
transform: rotate(180deg); transform: rotate(180deg);
@ -200,14 +196,19 @@
.lc-accordion-field, .lc-block-field { .lc-accordion-field, .lc-block-field {
> .lc-field-head { > .lc-field-head {
padding-left: @x-gap/2; padding-left: @x-gap;
background: var(--color-block-background-light); 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 { > .lc-field-icon {
// margin-right: @x-gap/2; // margin-right: @x-gap/2;
margin-right: 0; margin-right: 0;
} }
} }
> .lc-field-body {
padding: 8px;
}
} }
// 3rd level field title width should short // 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; position: relative;
>.lc-setter-actions { >.lc-setter-actions {
position: absolute; position: absolute;
right: -2px; right: -4px;
top: 50%; top: 50%;
transform: translate(100%, -50%); transform: translate(100%, -50%);
.lc-switch-trigger { .lc-switch-trigger {
@ -18,11 +18,19 @@
} }
.lc-title { .lc-title {
cursor: pointer; cursor: pointer;
.lc-title-icon svg {
fill: #8F9BB3;
}
} }
.variable-binded { .variable-binded {
background: var(--color-brand, #006cff); background: var(--color-brand, #006cff);
color: #fff!important; color: #fff!important;
border-radius: 3px; border-radius: 3px;
.lc-title-icon svg {
fill: #fff;
}
} }
} }
.next-input,.next-date-picker,.next-month-picker { .next-input,.next-date-picker,.next-month-picker {
@ -42,7 +50,7 @@
margin-right: 0; margin-right: 0;
>.lc-setter-actions { >.lc-setter-actions {
position: absolute; position: absolute;
right: 16px; right: 12px;
top: 0; top: 0;
height: 32px; height: 32px;
transform: none; transform: none;
@ -56,8 +64,8 @@
position: static; position: static;
margin-right: 0; margin-right: 0;
> .lc-setter-actions{ > .lc-setter-actions{
right: 32px; right: 36px;
top: 6px; top: 4px;
transform: none; transform: none;
} }
} }