fork-reap-design/src/styles/iview-rewrite-style.less

A high quality UI components Library with Vue.js

/**
 * @author jonasli
 * @module 重写iview样式
 * @date 2020-04-22
*/
// iviw 组件样式覆盖
.ivu-form label.ivu-form-item-label {
	font-size: 14px;
	white-space: nowrap;
	text-overflow: ellipsis;
    overflow: hidden;
}
.ivu-table {
	&:not(.ivu-table-small) {
		font-size: 14px;
	}
	&.ivu-table-small {
		font-size: 13px;
	}
}

// 重置 ivu-radio 行高
.ivu-radio {
    line-height: inherit !important;
}

a {
    color: @link-color;
}
a:hover {
    opacity: .8;
    color: @link-color;
}
a:active {
    color: @link-color;
}
// 普通input
.ivu-input:focus {
	box-shadow: none;
}
// 错误input
.ivu-form-item-error .ivu-input:focus {
	box-shadow: none;
}
// 错误input 选人组件
.ivu-form-item-error .aui-search-box {
	border: 1px solid #e54545;
}
// 分页
.ivu-page-options-elevator input:focus {
	box-shadow: none;
}
// 分页 每页10条
.ivu-select-visible .ivu-select-selection {
	box-shadow: none;
}
// slider input
.ivu-input-number-focused,
.ivu-input-number:focus {
	box-shadow: none;
}
// 进度条 颜色
.ivu-progress-bg {
	background-color: @success-color;
}
// 级联选择宽度 换行  高度
.ivu-cascader-menu{
	max-width: 150px;
	max-height: 220px;
	height: auto;
	border-right: none;
}
.ivu-cascader-menu:after{
	content: "";
    position: absolute;
	width: 1px;
	height: 100%;
	top: 0;
	bottom: 0;
	border-left: 1px solid #e9eaec;
}
.ivu-cascader .ivu-cascader-menu-item {
	white-space: initial;
}
// 下拉框 兼容到10个选项之后再出现滚动条
.ivu-select-dropdown {
    max-height: 310px;
}
// 回到顶部 采用腾讯视频首页样式 --- 真丑
// .ivu-back-top i {
// 	color: #999;
// 	font-size: 16px;
//     padding: 7px 8px;
// }
// .ivu-back-top-inner {
// 	box-shadow: none;
//     transition: unset;
//     border: 1px solid #dddee1;
//     &:after {
// 		content: '返回顶部';
// 	    font-size: 12px;
// 	    position: absolute;
// 	    width: 0;
// 	    top: 0;
// 	    left: 0;
// 	    background: #fff;
// 	    height: 32px;
// 	    border: 1px solid #dddee1;
// 	    text-align: center;
//         display: none;
// 	}
// 	&:hover {
// 		background-color: @success-color;
//     	border: 1px solid @success-color;
// 		i {
// 			color: #fff;
// 		}
// 		&:after {
// 		    width: 70px;
// 		    left: -61px;
// 		    border: 1px solid @success-color;
// 		    border-right: 0;
// 		    line-height: 30px;
// 		    color: #fff;
// 		    display: block;
// 		    background: @success-color;
// 		    border-radius: 2px;
// 		}
// 	}
// }

// .ivu-back-top i {
// 	color: #999;
// 	font-size: 16px;
//     padding: 7px 8px;
// }


// 提示语去掉超长...
.ivu-notice-title {
	white-space: initial;
}
// ivu 步骤导航
.ivu-steps .ivu-steps-title {
	position: relative;
    top: 2px;
}
.ivu-btn:not(.ivu-btn-small) {
	font-size: 14px;
	padding: 0 10px;
	height: 32px;
    line-height: 28px;
	& > span {
		vertical-align: top;
		.ivu-icon {
			position: relative;
			top: -2px;
			margin-right: 2px;
		}
    }
	& + .ivu-btn {
		margin-left: 10px;
	}
	& + .ivu-upload {
		margin-left: 10px;
    }
    & + .ivu-dropdown {
        margin-left: 10px;
    }
}
.ivu-btn-group {
	&.ivu-btn-group-small {
		> .ivu-btn {
			margin-left: 0;
			padding: 0 8px;
		}
	}
}
.ivu-upload {
	& + .ivu-btn {
		margin-left: 10px;
    }
    & + .ivu-dropdown {
        margin-left: 10px;
    }
}
.ivu-dropdown {
	& + .ivu-btn {
		margin-left: 10px;
	}
}
.ivu-btn-success {
    &:hover {
        background-color: @success-color-dark;
    }
}
// step手势变为手型
.ivu-steps-item {
	cursor: pointer;
}

// tooltip 英文字符换行
.ivu-tooltip-popper {
    word-break: break-all;
}

.ivu-table-tip {
    height: 100%;
}

// 输入框字体
.ivu-input {
    // font-size: 14px;
}

// tooltip
.ivu-tooltip-inner {
	// background-color: #444444;
}

// aui-tooltip-config 重置
.aui-poptip-config {
	// 1.包括页脚重置为 像ios的确认删除样式 start
    // .ivu-poptip-inner {
    //     overflow: hidden;
    // }
    // &.ivu-poptip-popper[x-placement^=top] .ivu-poptip-arrow {
    //     bottom: 2px;
    // }
    // .ivu-poptip-footer {
    //     display: flex;
    //     padding: 0px;
    //     text-align: center;
    //     justify-content: space-around;
    //     border-top: 1px solid @border-color-split;
    //     & > button {
    //         flex: 1;
    //         margin-left: 0px;
    //         border-radius: 0;
    //     }
	// }
	// end
	// 2.只优化页脚
    .ivu-poptip-footer {
        padding: 8px;
    }
}

.ivu-input-word-count {
    text-align: center;
    position: absolute;
    right: 7px;
    bottom: 8px;
    padding-left: 7px;
    background: #fff;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    color: #808695;
    font-size: 12px;
}
// modal
.ivu-modal {
	padding-bottom: 100px;
	.ivu-modal-body {
		.ivu-modal-confirm-head-icon {
			font-size: 23px;
			top: -3px;
		}
		.ivu-modal-confirm-head-title {
			margin-left: 5px;
			font-size: 14px;
			font-weight: 600;
		}
		.ivu-modal-confirm-body {
			font-size: 14px;
			padding-left: 27px;
			margin-top: 15px;
			.title {
				color: #444;
			}
			.extra {
				font-size: 12px;
				color: #999;
			}
		}
	}
}

.ivu-modal-mask {
	background-color: @mask-color;
}
.ivu-modal-confirm-head-title {
	color: @text-color;
}
.ivu-modal-footer {
    // padding: 20px;
}

// message
.ivu-message-notice-content {
	color: @notice-text-color;
}

// notice
.ivu-notice,.ivu-message {
	z-index: 9999999!important;
}

// breadcrumb
.ivu-breadcrumb {
	color: @text-color;
	&:a {
		color: @text-color;
	}
}

// drawer
.ivu-drawer-mask {
	background-color: @mask-color;
}

// dropdown
.ivu-select-dropdown {
	padding: 0;
	&.ivu-color-picker-transfer {
        width: 265px;
    }
}
.ivu-select-item {
    color: #000;
}
.ivu-select-selected-value {
    color: #000;
}
.ivu-select-item-selected, .ivu-select-item-selected:hover {
    background-color: @primary-color;
    color: #fff;
}
.ivu-select-disabled .ivu-select-selected-value {
    color: @text-color-light;
}

// table
.ivu-table-filter-list-single {
    max-height: 200px;
}


// 重置 iview form-item required
// 星式必填
.ivu-form label.ivu-form-item-label {
	position: relative;
	padding-right: 22px;
}
.ivu-form-item-required .ivu-form-item-label:before {
    content: "*";
    display: none;
    margin-right: 4px;
    line-height: 1;
    font-family: SimSun;
    font-size: 12px;
    color: #e54545
}

.ivu-form-item .ivu-form-item-label::after {
	position: absolute;
	top: 11px;
	right: 12px;
	content: "*";
    display: inline-block;
    margin-left: 4px;
    line-height: 1;
    font-family: SimSun;
    font-size: 12px;
    color: transparent;
}
.ivu-form-item-required .ivu-form-item-label::after {
	content: "*";
    color: #e54545;
}

// 文字必填
// .ivu-form label.ivu-form-item-label {
// 	position: relative;
// 	padding-right: 10px;
// }
// .ivu-form-item-required .ivu-form-item-label:before {
//     content: "(必填)";
//     display: none;
//     margin-right: 0;
//     line-height: 1;
//     font-size: 12px;
//     color: @text-color-light;
// }

// .ivu-form-item .ivu-form-item-label::after {
// 	content: "*";
//     display: inline-block;
// 	margin-left: 27px;
//     line-height: 1;
//     font-size: 12px;
//     color: transparent;
// }
// .ivu-form-item-required .ivu-form-item-label::after {
// 	content: "(必填)";
// 	font-size: 12px;
// 	margin-left: 5px;
//     color: @text-color-light;
// }

// loadding icon 定义全局动画
.ivu-icon-ios-loading {
	animation: rotate-frames 1s linear infinite;
}
@keyframes rotate-frames {
	from { transform: rotate(0deg);}
	50%  { transform: rotate(180deg);}
	to   { transform: rotate(360deg);}
}

// feat: zxd@前端配置三级tabs页样式，重置iview tabs 样式
.customTabs {
    .ivu-tabs-bar {
        margin: 5px 20px 0;
    }
    .ivu-tabs-tabpane {
        min-height: calc(~'100vh - 195px');
    }
}

.ivu-input[disabled],
fieldset[disabled] .ivu-input,
.ivu-select-disabled .ivu-select-selection {
	background-color: #fafafa;
}

.ivu-input,
.ivu-select-selection {
	border: 1px solid #f2f2f2;
}

.ivu-select-disabled .ivu-select-selected-value {
	color: #ccc;
}