1. input ：
.el-input {
.el-input__inner {
&:focus {
border-color: @primaryColor;
}
&::selection{ // 时间选择器的样式 ==》 在时间选择器上移动时 对应的时分秒增加背景色
background-color: @primaryColor;
color: @btnPlainColor;
}
}
}
2. button ：
.el-button {
&:active {
color: @primaryColor;
border-color: @primaryColor;
outline: 0;
}
&:focus {
color: @primaryColor;
border-color: #f7dccc;
background-color: #f7dccc;
}
&:hover {
color: @primaryColor;
border-color: #f7dccc;
background-color: #f7dccc;
}
}
3. dropdown - select
.el-select-dropdown__item.selected {
color: @primaryColor;
font-weight: 700;
}
.el-select-dropdown.is-multiple{
.el-select-dropdown__item.selected {
color: @primaryColor;
background-color: @btnPlainColor;
}
}
4. button
.el-button--primary {
color: @btnPlainColor;
background-color: @primaryColor;
border-color: @primaryColor;
&:hover {
background: @primaryColor;
border-color: @primaryColor;
color: @btnPlainColor;
}
.el-button--primary {
&:active{
background: @primaryColor;
border-color: @primaryColor;
color: @btnPlainColor;
}
}
}
5. message-box
.el-message-box__headerbtn {
.el-message-box__close:hover {
color: @primaryColor;
}
}
6. el-picker
.el-picker-panel__icon-btn {
&:hover {
color: @primaryColor;
}
}
.el-date-picker__header-label {
&:hover {
color: @primaryColor;
}
}
7. el-button.is-active
.el-button.is-active, .el-button.is-plain {
&:active {
color: @primaryColor;
border-color: @primaryColor;
}
&:hover {
background: @btnPlainColor;
border-color: @primaryColor;
color: @primaryColor;
}
&:focus {
background: @btnPlainColor;
border-color: @primaryColor;
color: @primaryColor;
}
}
8. el-button--text
.el-button--text {
color: @primaryColor;
&:active {
color:@primaryColor;
background-color: transparent;
}
}
9. el-picker-panel__footer
.el-picker-panel__footer {
.el-button--text {
&:hover {
color: @primaryColor;
border-color: @btnPlainColor;
background-color: @btnPlainColor;
}
}
}
10. el-checkbox__input
.el-checkbox__input.is-checked, .el-checkbox__input.is-indeterminate {
.el-checkbox__inner {
background-color: @primaryColor;
border-color: @primaryColor;
}
}
11. el-pagination.is-background
.el-pagination.is-background {
.el-pager li:not(.disabled).active {
background-color: @primaryColor !important;
color: @btnPlainColor;
&:hover {
color: @btnPlainColor;
}
}
.el-pager li:not(.disabled) {
&:hover {
color: @primaryColor;
}
}
}
12. el-pagination__sizes
.el-pagination__sizes {
.el-input {
.el-input__inner:hover {
border-color: @primaryColor;
}
}
}
13. el-select
.el-select {
.el-input.is-focus {
.el-input__inner {
border-color: @primaryColor;
}
}
.el-input__inner {
&:focus {
border-color: @primaryColor;
}
}
}
.el-pagination__editor.el-input:focus {
border-color: @primaryColor;
width: 50px;
}
14. el-upload-list__item.is-success
.el-upload-list__item.is-success {
.el-upload-list__item-name{
&:hover {
color: @primaryColor;
cursor: pointer;
}
&:focus {
color: @primaryColor;
cursor: pointer;
}
}
}
15. el-time-panel__btn.confirm
.el-time-panel__btn.confirm {
font-weight: 800;
color: @primaryColor;
}
16. el-input.is-active
.el-input.is-active {
.el-input__inner {
&:focus {
border-color: @primaryColor;
outline: 0;
}
}
}
17. el-date-table
.el-date-table{
td.end-date span, td.start-date span {
background-color: @primaryColor;
}
td.available {
&:hover {
color: @primaryColor;
}
}
18. td.today
td.today {
span {
color: @primaryColor;
font-weight: 700;
}
}
td.current:not(.disabled) {
span {
color: @btnPlainColor;
background-color: @primaryColor;
}
}
}
19. el-time-spinner__arrow.el-icon-arrow-down:hover
.el-time-spinner__arrow.el-icon-arrow-down:hover {
color: @primaryColor;
}
.el-time-spinner__arrow {
&:hover {
color: @primaryColor;
}
&:focus {
color: @primaryColor;
}
}
20. el-range-editor.is-active
.el-range-editor.is-active, .el-range-editor.is-active:hover {
border-color: @primaryColor;
}
.el-input__inner {
&:hover {
border-color: @primaryColor;
}
&:focus {
border-color: @primaryColor;
}
}
21. el-dialog__headerbtn
.el-dialog__headerbtn {
.el-dialog__close {
&:hover {
color: @primaryColor;
}
&:focus {
color: @primaryColor;
}
}
}