@yoyoboot/l-52abp-ng-form-generator
Version:
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.2.0.
410 lines (347 loc) • 8.02 kB
text/less
// 设计器样式
app-form-designer {
// text-align: center;
::-webkit-scrollbar {
width: 0 ;
height: 0 ;
}
::-webkit-scrollbar-thumb {
background-color: #fff ;
}
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-track {
border-radius: 10px ;
-webkit-box-shadow: inset 0 0 6px transparent ;
}
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-track {
border-radius: 10px ;
-webkit-box-shadow: inset 0 0 6px transparent ;
}
::-webkit-scrollbar-track {
background-color: transparent ;
}
nz-header,
nz-content,
nz-footer,
nz-sider {
background-color: #fff ;
}
nz-content {
min-height: 120px;
}
nz-layout:last-child {
margin: 0;
}
.right-sider {
.ant-tabs > .ant-tabs-nav .ant-tabs-nav-list {
width: 100%;
}
.ant-tabs > .ant-tabs-nav .ant-tabs-nav-list .ant-tabs-tab {
width: 50%;
}
.ant-tabs-tab .ant-tabs-tab-btn {
margin: 0 auto;
}
.p-20 {
display: block;
padding: 20px;
}
}
.ant-tabs-nav {
margin-bottom: 0 ;
}
.components-list {
box-sizing: border-box;
height: 100%;
padding: 8px;
.components-item {
display: inline-block;
width: 48%;
margin: 1%;
transition: transform 0ms ;
}
}
.form-designer {
.fields-list {
text-align: left;
.field-title {
display: flex;
width: 100%;
padding: 8px 12px;
font-size: 13px;
}
.field-label.w100 {
width: 98%;
}
.field-label {
position: relative;
left: 0;
display: block;
float: left;
width: 48%;
margin: 1%;
overflow: hidden;
color: #333;
font-size: 12px;
line-height: 26px;
white-space: nowrap;
text-overflow: ellipsis;
border: 1px solid #f4f6fc;
.modules {
padding-right: 5px;
}
a {
display: block;
padding: 0 10px;
color: #333;
background: #f4f6fc;
border: 1px solid #f4f6fc;
cursor: move;
}
&:hover {
color: #409eff;
border: 1px dashed #409eff;
}
}
}
.widget-container {
border-right: 1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
.widget-container-header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
justify-content: space-between;
height: 46px ;
border-bottom: solid 2px #e4e7ed;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-box-align: center;
-ms-flex-align: center;
}
}
.d-groups {
position: relative;
z-index: 101;
min-height: 150px;
padding-bottom: 20px;
overflow: auto;
background: #fff;
border: 1px dashed #ccc;
}
}
//
.widget-form-container {
height: 100%;
> .ant-form {
height: 100%;
}
.edit-label {
width: 100%;
}
.widget-form-list {
height: 100%;
min-height: calc(100% - 45px);
padding-bottom: 50px;
overflow: hidden;
overflow-y: scroll;
.widget-form-item {
position: relative;
min-height: 55px;
margin: 0;
padding: 5px 10px 18px;
.widget-mask {
position: absolute;
top: 0;
z-index: 100;
width: 100%;
height: 100%;
}
.widget-action-clone {
position: absolute;
right: 80px;
bottom: -8px;
z-index: 102;
}
.widget-action-delete {
position: absolute;
right: 40px;
bottom: -8px;
z-index: 102;
}
}
.widget-form-item.active {
background: #ecf5ff;
border-left: 3px solid #409eff;
}
.widget-form-table {
position: relative;
float: left;
width: 100%;
padding: 2px;
&:hover {
background: #ecf8ff;
cursor: move;
}
}
.widget-form-table.active {
background: #ecf5ff;
border-left: 3px solid #409eff;
}
}
.widget-form-table__content {
width: 100%;
min-height: 103px;
padding: 10px 5px;
//height: 100%;
overflow-y: hidden;
outline: 1px dashed #ccc;
outline-offset: -1px;
.widget-action-clone {
position: absolute;
right: 75px;
bottom: -8px;
z-index: 102;
}
.widget-action-delete {
position: absolute;
right: 5px;
bottom: -8px;
z-index: 102;
}
.widget-action-clear {
position: absolute;
right: 40px;
bottom: -8px;
z-index: 102;
}
.widget-form-table__item {
position: relative;
height: 100%;
//min-width: 33.3%;
//width: 33.3%;
padding: 1px;
.ant-card {
margin-bottom: 0;
.ant-card-head {
padding: 0 0;
color: #909399;
font-weight: 500;
.ant-card-head-title {
padding: 12px 0;
}
}
.ant-card-body {
padding: 12px 10px;
}
}
.widget-mask {
position: absolute;
top: 0;
z-index: 100;
width: 100%;
height: 100%;
}
.widget-action-clone {
position: absolute;
right: 40px;
bottom: -8px;
z-index: 102;
}
.widget-action-delete {
position: absolute;
right: 5px;
bottom: -8px;
z-index: 102;
}
}
.widget-form-table__item.active {
outline: 1px solid #409eff;
outline-offset: -1px;
}
}
}
}
.widget-form-item-placeholder {
display: inline-block;
width: 100%;
min-height: 2px;
background-color: #8bbb11;
//background-color: rgba(0, 0, 0, 0.1);
}
// 渲染器样式
r-widget-form {
.formBordered .widget-form-list {
border: 1px solid rgba(0, 0, 0, 0.5);
.widget-form-item {
margin-bottom: 0;
}
}
.widget-form-list {
overflow: hidden;
.widget-form-item {
position: relative;
margin-bottom: 10px;
.ant-form-item-control:first-child:not([class^='ant-col-']):not([class*=' ant-col-']) {
width: 100%;
padding: 10px;
}
&.bordered {
.line-top {
position: absolute;
top: 0;
width: 10000px;
height: 0;
border-top: 1px solid rgba(0, 0, 0, 0.5);
transform: translateY(-50%);
}
.line-right {
position: absolute;
right: 0;
width: 1px;
height: 10000px;
border-left: 1px solid rgba(0, 0, 0, 0.5);
transform: translateX(-50%);
}
.line-bottom {
position: absolute;
bottom: 0;
width: 10000px;
height: 0;
border-top: 1px solid rgba(0, 0, 0, 0.5);
transform: translateY(-50%);
}
.line-left {
position: absolute;
left: 0;
width: 0;
height: 10000px;
border-left: 1px solid rgba(0, 0, 0, 0.5);
transform: translateX(-50%);
}
}
&.bordered.parentGroup::before {
border-color: transparent;
}
&.bordered.parentGroup::after {
border-color: transparent;
}
}
nz-form-control {
position: relative;
}
.r-d-groups {
position: relative;
background: #fff;
}
.r-d-title {
position: relative;
background: #fff;
}
.r-d-title.bordered {
background: none;
}
}
}