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

feat: left pane title style; setting pane style

Browse Source
This commit is contained in:
弱冠 2020-05-07 14:15:43 +08:00
parent 7ef3f300ea
commit 66e8c25a4b
4 changed files with 134 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,7 +13,7 @@
align-items: center; align-items: center;
} }
.lc-field-icon { .lc-field-icon {
margin-right: @x-gap; // margin-right: @x-gap;
transform-origin: center; transform-origin: center;
transition: transform 0.1s; transition: transform 0.1s;
} }
@ -21,7 +21,7 @@
&.lc-plain-field { &.lc-plain-field {
// for top-level style // for top-level style
padding: 8px 10px; // padding: 8px 10px;
> .lc-field-body { > .lc-field-body {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
@ -34,7 +34,16 @@
display: flex; display: flex;
align-items: center; align-items: center;
// for top-level style // for top-level style
padding: 8px 10px; padding: 16px;
&:first-child{
padding-top: 16px;
}
&:last-child{
padding-bottom: 16px;
}
&+.lc-inline-field{
padding-top: 0;
}
> .lc-field-head { > .lc-field-head {
width: 70px; width: 70px;
@ -58,19 +67,29 @@
border-top: 1px solid var(--color-line-normal); border-top: 1px solid var(--color-line-normal);
} }
> .lc-field-head { > .lc-field-head {
padding-left: @x-gap; // 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-bottom: 1px solid var(--color-line-normal);
color: var(--color-title); // color: var(--color-title);
padding: 0 16px;
background-color: #F7F9FC;
color: #8F9BB3;
user-select: none; user-select: none;
} }
> .lc-field-body { > .lc-field-body {
padding: @y-gap @x-gap/2; // padding: @y-gap @x-gap/2;
padding: 16px;
.lc-inline-field{
margin-bottom: 16px;
&:last-child{
margin-bottom: 0;
}
}
} }
+ .lc-inline-field { + .lc-inline-field {
@ -94,7 +113,11 @@
} }
&.lc-accordion-field { &.lc-accordion-field {
position: relative;
// collapsed // 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);
@ -106,14 +129,15 @@
// 邻近的保持上下距离 // 邻近的保持上下距离
+ .lc-field { + .lc-field {
margin-top: @y-gap; // margin-top: @y-gap;
} }
} }
// 2rd level reset // 2rd level reset
.lc-field-body { .lc-field-body {
.lc-inline-field { .lc-inline-field {
padding: @y-gap @x-gap/2 0 @x-gap/2; // padding: @y-gap @x-gap/2 0 @x-gap/2;
padding: 0;
&:first-child { &:first-child {
padding-top: 0; padding-top: 0;
} }
@ -132,7 +156,8 @@
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-color: var(--color-line-light, rgba(31, 56, 88, .1));
> .lc-field-icon { > .lc-field-icon {
margin-right: @x-gap/2; // margin-right: @x-gap/2;
margin-right: 0;
} }
} }
} }

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

@ -42,9 +42,22 @@
margin-right: 0; margin-right: 0;
>.lc-setter-actions { >.lc-setter-actions {
position: absolute; position: absolute;
right: 10px; right: 16px;
top: 0; top: 0;
height: 32px; height: 32px;
transform: none; transform: none;
} }
} }
.lc-block-field > .lc-field-body > .lc-setter-mixed{
}
.lc-accordion-field > .lc-field-body > .lc-setter-mixed{
position: static;
margin-right: 0;
> .lc-setter-actions{
right: 32px;
top: 6px;
transform: none;
}
}

2
packages/editor-skeleton/src/components/settings/style.less
View File

@ -15,7 +15,7 @@
height: 30px; height: 30px;
display: flex; display: flex;
align-items: center; align-items: center;
padding-left: 5px; padding: 0 16px;
border-bottom: 1px solid var(--color-line-normal); border-bottom: 1px solid var(--color-line-normal);
.lc-settings-navigator-icon { .lc-settings-navigator-icon {
width: 16px; width: 16px;

147
packages/editor-skeleton/src/layouts/workbench.less
View File

@ -70,7 +70,7 @@ body {
height: 48px; height: 48px;
font-size: 16px; font-size: 16px;
padding: 0 15px; padding: 0 15px;
border-bottom: 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: #0F1726; color: #0F1726;
font-weight: bold; font-weight: bold;
} }
@ -116,6 +116,9 @@ body {
} }
*/ */
} }
.lc-outline-pane{
border-top: 1px solid var(--color-line-normal,rgba(31,56,88,.1));
}
} }
.lc-panel { .lc-panel {
height: 100%; height: 100%;
@ -160,70 +163,86 @@ body {
*/ */
/*覆盖旧面板*/ /*覆盖旧面板*/
/*组件面板*/ /*组件面板*/
.ve-component-list { // .ve-component-list {
.ve-component-list-body{ // .ve-component-list-body{
.ve-component-list-sidebar{ // .ve-component-list-sidebar{
.ve-component-list-navigator{ // .ve-component-list-navigator{
.navigator-group{ // .navigator-group{
&:last-child{ // &:last-child{
&::after{ // &::after{
display: none; // display: none;
} // }
} // }
&::after{ // &::after{
content: ''; // content: '';
display: block; // display: block;
height: 1px; // height: 1px;
background-color: #EDEFF3; // background-color: #EDEFF3;
line-height: 0; // line-height: 0;
margin: 4px 12px 0; // margin: 4px 12px 0;
} // }
.navigator-group-head{ // .navigator-group-head{
.navigator-group-title{ // .navigator-group-title{
border-bottom: none; // border-bottom: none;
} // }
} // }
.navigator-group-item{ // .navigator-group-item{
border-left: 2px solid transparent; // border-left: 2px solid transparent;
&.active{ // &.active{
border-left-color: #0079f2; // border-left-color: #0079f2;
border-right: none; // border-right: none;
} // }
} // }
} // }
} // }
} // }
} // }
} // }
/*数据源*/ /*数据源*/
.engine-datapool{ // .engine-datapool{
.engine-datapool-view-group{ // .engine-datapool-view-group{
padding-top: 48px; // padding-top: 48px;
.engine-datapool-view-group-title{ // .engine-datapool-view-group-title{
height: 48px; // height: 48px;
line-height: 48px; // line-height: 48px;
font-size: 16px; // font-size: 16px;
background-color: transparent; // background-color: transparent;
padding: 0 16px; // padding: 0 16px;
border-bottom: 1px solid #EDEFF3; // border-bottom: 1px solid #EDEFF3;
} // }
} // }
} // }
/*动作面板*/ /*动作面板*/
.ve-action-pane{ // .ve-action-pane{
border-top: none; // border-top: none;
.rc-tabs{ // .rc-tabs{
.rc-tabs-bar{ // .rc-tabs-bar{
background-color: transparent; // background-color: transparent;
.rc-tabs-tab{ // .rc-tabs-tab{
line-height: 1; // line-height: 1;
&.rc-tabs-tab-active{ // &.rc-tabs-tab-active{
} // }
} // }
} // }
} // }
} // }
/*设置面板*/
// .ve-field .ve-field-head,
// .ve-field.ve-accordion2-field > .ve-field-head .ve-field-title-content{
// padding: 0;
// }
// .ve-field.ve-accordion2-field > .ve-field-split-line{
// display: none;
// }
// .vs-style .vs-style-source{
// margin: 0 0 16px;
// }
// .vs-code-button,
// .vs-json-button{
// margin: 0;
// }
} }
@ -238,7 +257,7 @@ body {
width: 100%; width: 100%;
display: flex; display: flex;
margin-bottom: 2px; margin-bottom: 2px;
padding: 8px; padding: 8px 12px 8px 16px;
.lc-top-area-center{ .lc-top-area-center{
flex: 1; flex: 1;
@ -294,7 +313,7 @@ body {
align-items: center; align-items: center;
// background: rgba(31,56,88,0.04); // background: rgba(31,56,88,0.04);
border-bottom: 1px solid #EDEFF3; border-bottom: 1px solid #EDEFF3;
.lc-tab-title { .lc-tab-title{
flex: 1; flex: 1;
height: 32px; height: 32px;
display: flex; display: flex;