dareway-rui
Version:
358 lines (317 loc) • 7.62 kB
CSS
.ant-advanced-search-form {
padding: 10px 10px 0 10px;
}
.ant-advanced-search-form .ant-form-item {
display: flex;
margin-bottom: 10px;
}
.ant-advanced-search-form .ant-form-item-control-wrapper {
flex: auto;
}
.rui-form-item-required:after {
content: '*';
font-family: SimSun;
line-height: 1;
font-size: 14px;
color: #f5222d ;
position: absolute;
top: 0;
right: -8px;
}
.ant-form-item-control::before,
.ant-form-item-control::after {
display: block;
}
/**
* 定制 antd 中 FormItem 的 label 展示部分
*
* 1. label 竖直居中
* 2. label 文字过长可以换行;
* 3. label 右侧对齐;
* 4. label 距离右侧 8px 外边距;
*/
.ant-form-item-label-4rui {
/* 想让 label 能够自动换行 */
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
text-align: right;
}
.ant-form-item-label-4rui label {
/* 去除label后面自带的星号 */
margin: 0 8px 0 2px;
color: black; /* 定制label区域颜色 */
}
/**
* FormTitle
*/
.rui-form-title {
padding-left: 16px;
padding-right: 12px;
display: block;
}
.rui-form-title-spliter {
background-color: #387ee7;
margin-right: 10px;
}
.rui-form-title-content {
font-weight: bold;
color: #387ee7;
}
.ant-select-disabled .ant-select-selection--multiple .ant-select-selection__choice {
background: #f5f5f5;
color: rgba(0, 0, 0, 0.25);
padding-right: 10px;
}
.rui-form-item-required:after {
top: 35%;
}
/**
* 定制 MultiSeelct
*/
.ant-select-allow-clear .ant-select-selection--multiple .ant-select-selection__rendered {
position: relative;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.ant-select-selection__rendered > span {
padding-right: 5px;
}
.ant-select-selection--multiple .ant-select-search--inline {
position: absolute;
left: 0;
top: 0;
}
.ant-select.ant-select-enabled.ant-select-allow-clear,
.ant-select.ant-select-disabled.ant-select-allow-clear {
display: block;
}
/**
* 定制编辑状态下的颜色
*/
.ant-input {
color: black;
}
.ant-cascader-picker {
color: black;
}
.ant-select {
color: black;
}
.ant-input-number-input {
color: black;
}
/**
* 定制只读状态下的颜色
*/
.ant-select-disabled {
color: rgba(0, 0, 0, 0.5);
}
.ant-input-disabled {
color: rgba(0, 0, 0, 0.5);
}
.ant-input-number-disabled {
color: rgba(0, 0, 0, 0.5);
}
.ant-select-disabled .ant-select-selection--multiple .ant-select-selection__choice {
color: rgba(0, 0, 0, 0.5);
}
.ant-cascader-picker-disabled {
color: rgba(0, 0, 0, 0.5);
}
.ant-select-dropdown-menu-item {
color: rgba(0, 0, 0, 0.85);
}
.ant-radio-wrapper {
color: rgba(0, 0, 0, 1);
}
.ant-input-search > .ant-input-suffix > .ant-input-search-button {
color: rgba(0, 0, 0, 0.38);
}
/**
* 定制文件上传样式
*/
.ant-upload-list {
overflow: hidden;
border: 1px solid #d9d9d9;
border-radius: 4px;
}
.rui-fileselector .ant-btn {
padding: 5px;
}
.rui-fileselector .ant-btn > .anticon + span {
margin-left: 0;
}
.rui-fileselector .ant-form-item-children > span {
display: flex;
flex-direction: row;
}
.rui-fileselector .ant-upload.ant-upload-select {
width: 86px;
flex-shrink: 0;
}
.rui-fileselector .ant-upload-list {
flex: 1 1 auto;
}
.rui-form-fileSelector-required:after {
content: '*';
font-family: SimSun;
line-height: 1;
font-size: 14px;
color: #f5222d ;
position: absolute;
top: 10px;
right: -8px;
}
.rui-fileselector .ant-upload-list-item {
margin-top: 4px;
}
.rui-fileselector .anticon.anticon-paper-clip {
display: none;
}
.rui-fileselector .ant-upload-list-item-name {
padding-left: 0;
}
.rui-fileselector .ant-btn.disabled,
.rui-fileselector .ant-btn[disabled] {
cursor: pointer;
}
/**
* 定制只读状态下的光标样式(允许用户选中)
*/
.ant-input-disabled {
cursor: text;
user-select: auto;
-webkit-user-select: auto;
-moz-user-select: auto;
-ms-user-select: auto;
}
.ant-select-disabled .ant-select-selection {
cursor: text;
}
.ant-select-selection {
user-select: auto;
-webkit-user-select: auto;
-moz-user-select: auto;
-ms-user-select: auto;
}
.ant-cascader-picker-disabled .ant-cascader-input {
cursor: text;
}
.ant-form-item-control.has-error.rui-form-item-required .rui-singleSelect-selection--single {
border-color: red;
}
/**
* 出现校验错误时错误提示查号,需要能接收提示
*/
.has-error.has-feedback .ant-form-item-children-icon {
pointer-events: auto;
}
.has-error.has-feedback .rui-singleSelect-arrow {
right: 28px;
}
.has-error.has-feedback .ant-input-search ~ .ant-form-item-children-icon {
right: 50px;
}
.has-error .ant-checkbox-inner,
.has-error .ant-radio-inner,
.has-error .ant-upload-list {
border-color: #f5222d;
}
/**
* 定制 checkbox radio 禁用状态下鼠标悬浮效果
*/
.ant-form input[type='radio'][disabled],
.ant-form input[type='checkbox'][disabled],
.ant-form input[type='radio'].disabled,
.ant-form input[type='checkbox'].disabled {
cursor: pointer;
}
.ant-form .ant-checkbox-disabled {
cursor: pointer;
}
.ant-form .ant-checkbox-disabled + span {
color: rgba(0, 0, 0, 0.25);
cursor: pointer;
}
.ant-form .ant-radio-disabled + span {
color: rgba(0, 0, 0, 0.25);
cursor: pointer;
}
.ant-form .ant-cascader-picker-disabled {
cursor: text;
}
.ant-form .ant-input-group-addon .ant-btn.disabled,
.ant-form .ant-input-group-addon .ant-btn[disabled] {
cursor: text;
}
/**
* 禁用样式定制
*/
.ant-form .ant-input[disabled] {
color: rgba(0, 0, 0, 0.5);
background-color: #f5f5f5;
cursor: text;
opacity: 1;
}
.ant-form .ant-input[disabled]:hover {
border-color: #e6d8d8;
border-right-width: 1px ;
}
/**
* compact mode
*/
/*common*/
.rui-form-compact .ant-input {
height: 26px;
font-size: 14px;
}
.rui-form-compact .ant-form-item-control {
line-height: 30px;
}
.rui-form-compact .ant-form-item {
margin-bottom: 3px;
}
.rui-form-compact label {
font-size: 14px;
}
.rui-form-compact .ant-btn {
height: 26px;
padding: 0px 6px;
}
/*DropDown*/
.rui-form-compact .rui-singleSelect-selection--single {
height: 26px;
}
.rui-form-compact .rui-singleSelect-selection__rendered {
line-height: 26px;
}
.rui-form-compact .rui-singleSelect {
font-size: 14px;
}
.rui-form-compact .ant-select-selection--multiple {
min-height: 26px;
padding-bottom: 0px;
margin-bottom: 3px;
}
.rui-form-compact .ant-select-selection__rendered {
line-height: 26px;
}
.rui-form-compact .ant-select-selection--multiple .ant-select-selection__clear,
.rui-form-compact .ant-select-selection--multiple .ant-select-arrow {
top: 13px;
}
.rui-form-compact textarea.ant-input {
height: auto;
}
.rui-form-compact .rui-fileselector .ant-upload-list-item {
margin-top: 2px;
}
.rui-form-compact .ant-collapse > .ant-collapse-item > .ant-collapse-header {
padding: 6px 16px 6px 40px;
}
.rui-form-compact .ant-collapse-content > .ant-collapse-content-box {
padding: 6px 16px;
}