/* Element UI 主题色变量 */
|
@theme-color: #009688;
|
|
/* Element UI 组件主题色覆盖 */
|
.el-button--primary {
|
background-color: @theme-color;
|
border-color: @theme-color;
|
|
&:hover,
|
&:focus {
|
background-color: mix(#fff, @theme-color, 20%);
|
border-color: mix(#fff, @theme-color, 20%);
|
}
|
|
&:active {
|
background-color: darken(@theme-color, 10%);
|
border-color: darken(@theme-color, 10%);
|
}
|
}
|
|
.el-radio__input.is-checked .el-radio__inner {
|
background-color: @theme-color;
|
border-color: @theme-color;
|
}
|
|
.el-radio__input.is-checked + .el-radio__label {
|
color: @theme-color;
|
}
|
|
.el-checkbox__input.is-checked .el-checkbox__inner,
|
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
|
background-color: @theme-color;
|
border-color: @theme-color;
|
}
|
|
.el-checkbox__input.is-checked + .el-checkbox__label {
|
color: @theme-color;
|
}
|
|
.el-input__inner:focus,
|
.el-textarea__inner:focus {
|
border-color: @theme-color;
|
}
|
|
.el-select .el-input__inner:focus {
|
border-color: @theme-color;
|
}
|
|
.el-select .el-input.is-focus .el-input__inner {
|
border-color: @theme-color;
|
}
|
|
.el-select-dropdown__item.selected {
|
color: @theme-color;
|
}
|
|
.el-switch.is-checked .el-switch__core {
|
border-color: @theme-color;
|
background-color: @theme-color;
|
}
|
|
.el-pagination.is-background .el-pager li:not(.disabled).active {
|
background-color: @theme-color;
|
}
|
|
.el-menu-item.is-active {
|
color: @theme-color;
|
}
|
|
.el-submenu.is-active .el-submenu__title {
|
border-bottom-color: @theme-color;
|
}
|
|
.el-tabs__item.is-active {
|
color: @theme-color;
|
}
|
|
.el-tabs__active-bar {
|
background-color: @theme-color;
|
}
|
|
/* 表单验证状态 */
|
.el-form-item.is-success .el-input__inner,
|
.el-form-item.is-success .el-textarea__inner,
|
.el-form-item.is-success .el-input__inner:focus,
|
.el-form-item.is-success .el-textarea__inner:focus {
|
border-color: @theme-color;
|
}
|
|
/* 链接和文字选中颜色 */
|
.el-link.el-link--primary {
|
color: @theme-color;
|
|
&:hover {
|
color: mix(#fff, @theme-color, 20%);
|
}
|
}
|
|
::selection {
|
background: fade(@theme-color, 20%);
|
}
|
