402 lines
7.2 KiB
Plaintext
402 lines
7.2 KiB
Plaintext
@import (reference) '../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: @component-background;
|
|
|
|
@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-selector,
|
|
.ant-input-group-addon,
|
|
.ant-cascader-picker,
|
|
.ant-input-affix-wrapper,
|
|
.ant-picker {
|
|
z-index: 1;
|
|
|
|
text-align: left;
|
|
|
|
color: lighten(@black, 10%);
|
|
border: 0;
|
|
background-color: @control-background;
|
|
}
|
|
.ant-mentions {
|
|
textarea {
|
|
background-color: @control-background;
|
|
}
|
|
}
|
|
.focus {
|
|
z-index: 2 !important;
|
|
|
|
box-shadow: @box-shadow-focused;
|
|
}
|
|
.unfoucs {
|
|
z-index: 1 !important;
|
|
|
|
box-shadow: none;
|
|
}
|
|
.ant-input {
|
|
&:focus {
|
|
.focus();
|
|
}
|
|
}
|
|
.ant-input-affix-wrapper {
|
|
>.ant-input {
|
|
&:focus {
|
|
.unfoucs();
|
|
}
|
|
}
|
|
}
|
|
.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-affix-wrapper:focus,
|
|
.ant-input-affix-wrapper-focused {
|
|
.focus();
|
|
}
|
|
.ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) {
|
|
.ant-select-selector {
|
|
.focus();
|
|
}
|
|
}
|
|
.ant-picker-focused {
|
|
.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 {
|
|
flex: 0 0 61.8%;
|
|
|
|
width: 61.8%;
|
|
min-width: 220px;
|
|
}
|
|
.yo-form--fluid {
|
|
.ant-form-item-control {
|
|
flex: 0 0 100%;
|
|
|
|
width: 100%;
|
|
|
|
text-align: inherit;
|
|
}
|
|
}
|
|
.yo-form--short {
|
|
.ant-form-item-control {
|
|
flex: 0 0 38.2%;
|
|
|
|
width: 38.2%;
|
|
}
|
|
}
|
|
// 上下布局
|
|
.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-form-link {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
margin-bottom: -1px;
|
|
padding: @padding-md;
|
|
|
|
cursor: pointer;
|
|
|
|
border: @border-width-base @border-style-base @border-color-split;
|
|
background-color: @white;
|
|
&:hover {
|
|
background-color: darken(@white, 1%);
|
|
}
|
|
&:active {
|
|
background-color: darken(@white, 3%);
|
|
}
|
|
&--title {
|
|
font-size: @font-size-base + 1px;
|
|
|
|
flex: 1;
|
|
}
|
|
&--content {
|
|
flex: 1;
|
|
|
|
text-align: right;
|
|
|
|
color: fade(@black, 35%);
|
|
}
|
|
&--right-icon {
|
|
margin-left: @padding-xs;
|
|
|
|
color: fade(@black, 50%);
|
|
}
|
|
}
|
|
&.yo-form--no-border {
|
|
.ant-form-item {
|
|
padding: @padding-md 0;
|
|
|
|
border-right: 0;
|
|
border-left: 0;
|
|
&:first-child {
|
|
border-top: 0;
|
|
}
|
|
&:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
}
|
|
.yo-form-group {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
.yo-modal-form {
|
|
.ant-modal-body {
|
|
padding: 0;
|
|
}
|
|
.yo-form {
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5 {
|
|
margin: 0;
|
|
padding: @padding-sm @padding-md @padding-xs;
|
|
}
|
|
.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: @component-background;
|
|
button+button {
|
|
margin-left: @padding-xs;
|
|
}
|
|
}
|
|
}
|
|
.ant-form {
|
|
fieldset {
|
|
margin-bottom: @padding-lg;
|
|
padding: @padding-md;
|
|
|
|
border: @border-width-base @border-style-base @border-color-split;
|
|
}
|
|
legend {
|
|
display: inline-block;
|
|
|
|
width: auto;
|
|
margin-bottom: 0;
|
|
padding: 0 @padding-md;
|
|
|
|
border: 0;
|
|
border-radius: @border-radius-base;
|
|
}
|
|
}
|
|
.ant-form-horizontal {
|
|
.ant-form-item-label {
|
|
line-height: 1.5;
|
|
|
|
margin-right: @padding-xs;
|
|
|
|
white-space: normal;
|
|
}
|
|
}
|
|
.ant-form-vertical {
|
|
.ant-form-item-label {
|
|
>label {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
.ant-form-item-required {
|
|
&::before {
|
|
content: '' !important;
|
|
vertical-align: middle;
|
|
|
|
border-top: 4px solid transparent;
|
|
border-bottom: 4px solid transparent;
|
|
border-left: 5px solid @highlight-color;
|
|
background: none;
|
|
}
|
|
}
|
|
.yo-form-page {
|
|
.ant-form {
|
|
.ant-radio-button-wrapper {
|
|
margin-right: @padding-xs;
|
|
margin-bottom: @padding-xs;
|
|
|
|
border-left: @border-width-base @border-style-base @border-color-base;
|
|
&.ant-radio-button-wrapper-checked {
|
|
border-left-color: @primary-color;
|
|
}
|
|
&:not(:first-child) {
|
|
&::before {
|
|
content: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.yo-filter-item {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
|
|
margin-bottom: 0;
|
|
.ant-tag-checkable {
|
|
font-size: @font-size-base;
|
|
}
|
|
.ant-radio-button-wrapper {
|
|
border: 0 !important;
|
|
background-color: transparent;
|
|
&:hover {
|
|
color: @red-6;
|
|
}
|
|
}
|
|
.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
|
|
border-color: @red-6;
|
|
background-color: @red-6;
|
|
&:hover {
|
|
border-color: @red-5;
|
|
background-color: @red-5;
|
|
}
|
|
&:active {
|
|
border-color: @red-7;
|
|
background-color: @red-7;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|