Files
zsxt_nbzs_h5/Web/src/assets/style/lib/form.less

235 lines
4.2 KiB
Plaintext

@import (reference) '~@/assets/style/extend.less';
.yo-form {
&--fixed {
width: 660px;
margin: 0 auto;
}
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
color: darken(@white, 40%);
}
h3,
.h3 {
font-size: 16px;
}
h4,
.h4 {
font-size: 15px;
}
.yo-form-group {
margin-bottom: @padding-md;
}
.ant-form-item {
display: flex;
justify-content: space-between;
margin-bottom: -1px;
padding: @padding-xs @padding-md;
border: @border-width-base @border-style-base @border-color-split;
background-color: @white;
@box-shadow-focused: 0 0 0 2px fade(@primary-color, 50%);
&::before,
&::after {
content: none;
}
.ant-form-item-control {
text-align: right;
}
.ant-input,
.ant-input-number,
.ant-mentions,
.ant-select-selection,
.ant-input-group-addon,
.ant-cascader-picker,
.ant-cascader-input.ant-input {
z-index: 1;
text-align: left;
color: lighten(@black, 10%);
border: 0;
background-color: lighten(@black, 95%) !important;
}
.ant-mentions {
textarea {
background-color: lighten(@black, 95%);
}
}
.focus {
z-index: 2 !important;
box-shadow: @box-shadow-focused;
}
.ant-input {
&:focus {
.focus();
}
}
.ant-input-number-focused,
.ant-mentions-focused {
.focus();
}
.ant-select-focused,
.ant-select-open {
z-index: 2;
.ant-select-selection {
.focus();
}
}
.ant-cascader-picker:focus {
.ant-cascader-input {
.focus();
}
}
.ant-input-group {
.ant-row-flex {
.ant-select {
width: 100%;
}
}
.ant-input-group-addon {
z-index: 0;
}
}
}
.ant-form-item-label {
overflow: hidden;
flex: 1 1 auto;
margin-right: @padding-md;
text-align: left;
text-overflow: ellipsis;
>label {
color: lighten(@black, 10%);
&::after {
content: none;
}
}
}
.ant-form-item-control-wrapper {
flex: 0 0 61.8%;
width: 61.8%;
min-width: 220px;
}
.yo-form--fluid {
.ant-form-item-control-wrapper {
flex: 0 0 100%;
width: 100%;
}
}
.ant-form-explain {
font-size: @font-size-base - 1px;
margin-top: @padding-xs;
margin-bottom: @padding-xxs;
margin-left: -61.8%;
transition: none;
animation: none;
text-align: left;
opacity: 1;
color: fade(darken(@primary-color, 38.2%), 61.8%);
}
.has-error {
.ant-form-explain {
color: @error-color;
}
}
// 上下布局
.yo-form--vertical {
display: block;
.ant-form-item-control {
text-align: left;
}
&-radio {
.ant-radio-wrapper {
line-height: @padding-lg;
display: block;
margin-right: 0;
+.ant-radio-wrapper {
margin-top: @padding-sm;
}
}
}
.ant-form-item-control-wrapper {
margin-left: @padding-lg;
}
.ant-form-explain {
margin-left: 0;
}
}
}
.yo-modal-form {
.ant-modal-body {
padding: 0;
}
.yo-form {
h1,
h2,
h3,
h4,
h5 {
margin-top: @padding-sm;
padding: 0 @padding-md;
}
.yo-form-group {
margin-bottom: 0;
}
.ant-form-item {
border-right: 0;
border-left: 0;
&:first-child {
margin-top: -1px;
}
}
}
}
.yo-drawer-form {
.ant-drawer-header {
position: absolute;
top: 0;
left: 0;
z-index: 7;
width: 100%;
}
.ant-drawer-body {
padding: @padding-lg + 56px @padding-lg;
}
.ant-drawer-footer {
position: absolute;
left: 0;
bottom: 0;
z-index: 7;
width: 100%;
padding: 10px @padding-md;
text-align: right;
border-top: @border-width-base @border-style-base @border-color-split;
background: @white;
button+button {
margin-left: @padding-xs;
}
}
}