250 lines
4.6 KiB
Plaintext
250 lines
4.6 KiB
Plaintext
@import (reference) '~@/assets/style/extend.less';
|
|
.yo-form {
|
|
&--fixed {
|
|
width: 660px;
|
|
margin: 0 auto;
|
|
}
|
|
.h1,
|
|
.h2,
|
|
.h3,
|
|
.h4,
|
|
.h5,
|
|
.h6 {
|
|
color: darken(@white, 40%);
|
|
}
|
|
.h3 {
|
|
font-size: 16px;
|
|
}
|
|
.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%);
|
|
@control-background: lighten(@black, 95%) !important;
|
|
&::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: @control-background;
|
|
}
|
|
.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-cascader-picker-clear {
|
|
background-color: @control-background;
|
|
}
|
|
}
|
|
.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%;
|
|
}
|
|
}
|
|
.yo-form--short {
|
|
.ant-form-item-control-wrapper {
|
|
flex: 0 0 38.2%;
|
|
|
|
width: 38.2%;
|
|
}
|
|
}
|
|
.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-wrapper-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.ant-drawer-header {
|
|
flex: 0 0 auto;
|
|
}
|
|
.ant-drawer-body {
|
|
position: relative;
|
|
|
|
flex: 1 1 100%;
|
|
|
|
padding: 0;
|
|
}
|
|
.yo-drawer-form--body {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: @border-width-base + 20px + @padding-md * 2;
|
|
|
|
overflow: auto;
|
|
|
|
width: 100%;
|
|
padding: @padding-lg;
|
|
}
|
|
.ant-drawer-footer {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
|
|
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;
|
|
}
|
|
}
|
|
}
|