mirror of
https://github.com/alibaba/lowcode-engine.git
synced 2026-01-13 01:21:58 +00:00
feat: left pane title style; setting pane style
This commit is contained in:
弱冠
parent
7ef3f300ea
commit
66e8c25a4b
@ -13,7 +13,7 @@
|
||||
align-items: center;
|
||||
}
|
||||
.lc-field-icon {
|
||||
margin-right: @x-gap;
|
||||
// margin-right: @x-gap;
|
||||
transform-origin: center;
|
||||
transition: transform 0.1s;
|
||||
}
|
||||
@ -21,7 +21,7 @@
|
||||
|
||||
&.lc-plain-field {
|
||||
// for top-level style
|
||||
padding: 8px 10px;
|
||||
// padding: 8px 10px;
|
||||
> .lc-field-body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
@ -34,7 +34,16 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// 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 {
|
||||
width: 70px;
|
||||
@ -58,19 +67,29 @@
|
||||
border-top: 1px solid var(--color-line-normal);
|
||||
}
|
||||
> .lc-field-head {
|
||||
padding-left: @x-gap;
|
||||
// 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-bottom: 1px solid var(--color-line-normal);
|
||||
// color: var(--color-title);
|
||||
padding: 0 16px;
|
||||
background-color: #F7F9FC;
|
||||
color: #8F9BB3;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
> .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 {
|
||||
@ -94,7 +113,11 @@
|
||||
}
|
||||
|
||||
&.lc-accordion-field {
|
||||
position: relative;
|
||||
// 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);
|
||||
@ -106,14 +129,15 @@
|
||||
|
||||
// 邻近的保持上下距离
|
||||
+ .lc-field {
|
||||
margin-top: @y-gap;
|
||||
// margin-top: @y-gap;
|
||||
}
|
||||
}
|
||||
|
||||
// 2rd level reset
|
||||
.lc-field-body {
|
||||
.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 {
|
||||
padding-top: 0;
|
||||
}
|
||||
@ -132,7 +156,8 @@
|
||||
background: var(--color-block-background-light);
|
||||
border-bottom-color: var(--color-line-light, rgba(31, 56, 88, .1));
|
||||
> .lc-field-icon {
|
||||
margin-right: @x-gap/2;
|
||||
// margin-right: @x-gap/2;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -42,9 +42,22 @@
|
||||
margin-right: 0;
|
||||
>.lc-setter-actions {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
right: 16px;
|
||||
top: 0;
|
||||
height: 32px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 5px;
|
||||
padding: 0 16px;
|
||||
border-bottom: 1px solid var(--color-line-normal);
|
||||
.lc-settings-navigator-icon {
|
||||
width: 16px;
|
||||
|
||||
@ -70,7 +70,7 @@ body {
|
||||
height: 48px;
|
||||
font-size: 16px;
|
||||
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;
|
||||
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 {
|
||||
height: 100%;
|
||||
@ -160,70 +163,86 @@ body {
|
||||
*/
|
||||
/*覆盖旧面板*/
|
||||
/*组件面板*/
|
||||
.ve-component-list {
|
||||
.ve-component-list-body{
|
||||
.ve-component-list-sidebar{
|
||||
.ve-component-list-navigator{
|
||||
.navigator-group{
|
||||
&:last-child{
|
||||
&::after{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&::after{
|
||||
content: '';
|
||||
display: block;
|
||||
height: 1px;
|
||||
background-color: #EDEFF3;
|
||||
line-height: 0;
|
||||
margin: 4px 12px 0;
|
||||
}
|
||||
.navigator-group-head{
|
||||
.navigator-group-title{
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
.navigator-group-item{
|
||||
border-left: 2px solid transparent;
|
||||
&.active{
|
||||
border-left-color: #0079f2;
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// .ve-component-list {
|
||||
// .ve-component-list-body{
|
||||
// .ve-component-list-sidebar{
|
||||
// .ve-component-list-navigator{
|
||||
// .navigator-group{
|
||||
// &:last-child{
|
||||
// &::after{
|
||||
// display: none;
|
||||
// }
|
||||
// }
|
||||
// &::after{
|
||||
// content: '';
|
||||
// display: block;
|
||||
// height: 1px;
|
||||
// background-color: #EDEFF3;
|
||||
// line-height: 0;
|
||||
// margin: 4px 12px 0;
|
||||
// }
|
||||
// .navigator-group-head{
|
||||
// .navigator-group-title{
|
||||
// border-bottom: none;
|
||||
// }
|
||||
// }
|
||||
// .navigator-group-item{
|
||||
// border-left: 2px solid transparent;
|
||||
// &.active{
|
||||
// border-left-color: #0079f2;
|
||||
// border-right: none;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
/*数据源*/
|
||||
.engine-datapool{
|
||||
.engine-datapool-view-group{
|
||||
padding-top: 48px;
|
||||
.engine-datapool-view-group-title{
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
font-size: 16px;
|
||||
background-color: transparent;
|
||||
padding: 0 16px;
|
||||
border-bottom: 1px solid #EDEFF3;
|
||||
}
|
||||
}
|
||||
}
|
||||
// .engine-datapool{
|
||||
// .engine-datapool-view-group{
|
||||
// padding-top: 48px;
|
||||
// .engine-datapool-view-group-title{
|
||||
// height: 48px;
|
||||
// line-height: 48px;
|
||||
// font-size: 16px;
|
||||
// background-color: transparent;
|
||||
// padding: 0 16px;
|
||||
// border-bottom: 1px solid #EDEFF3;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
/*动作面板*/
|
||||
.ve-action-pane{
|
||||
border-top: none;
|
||||
.rc-tabs{
|
||||
.rc-tabs-bar{
|
||||
background-color: transparent;
|
||||
.rc-tabs-tab{
|
||||
line-height: 1;
|
||||
&.rc-tabs-tab-active{
|
||||
// .ve-action-pane{
|
||||
// border-top: none;
|
||||
// .rc-tabs{
|
||||
// .rc-tabs-bar{
|
||||
// background-color: transparent;
|
||||
// .rc-tabs-tab{
|
||||
// line-height: 1;
|
||||
// &.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%;
|
||||
display: flex;
|
||||
margin-bottom: 2px;
|
||||
padding: 8px;
|
||||
padding: 8px 12px 8px 16px;
|
||||
|
||||
.lc-top-area-center{
|
||||
flex: 1;
|
||||
@ -294,7 +313,7 @@ body {
|
||||
align-items: center;
|
||||
// background: rgba(31,56,88,0.04);
|
||||
border-bottom: 1px solid #EDEFF3;
|
||||
.lc-tab-title {
|
||||
.lc-tab-title{
|
||||
flex: 1;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user