add react版前端
This commit is contained in:
369
web-react/src/assets/style/lib/form.less
Normal file
369
web-react/src/assets/style/lib/form.less
Normal file
@@ -0,0 +1,369 @@
|
||||
@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: @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-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-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;
|
||||
}
|
||||
}
|
||||
}
|
||||
.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;
|
||||
padding-top: @padding-sm - 2px;
|
||||
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
.ant-form-item-required {
|
||||
&::before {
|
||||
margin-top: -4px;
|
||||
|
||||
content: '';
|
||||
vertical-align: middle;
|
||||
|
||||
border-top: 4px solid transparent;
|
||||
border-bottom: 4px solid transparent;
|
||||
border-left: 5px solid #f5222d;
|
||||
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 @normal-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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user