公共的common.scss （覆盖部分element组件主题色）

 

公共的 common.scss 

(包含主题色 覆盖部分element组件主题色)

 

$theme: #D50000;
$litterTheme:  #ec6059;

.text-theme {
    color: $theme;
}

.bg-theme {
    background-color: $theme;
}

::v-deep .el-button {
    border-radius: 0;
}

::v-deep .el-button--primary {
    background: $theme;
    border-color: $theme;
}

::v-deep .el-button--primary.is-disabled {
    background: $theme;
    border-color: $theme;
    &:active {
        background: $theme;
        border-color: $theme;
    }
    &:focus  {
        background: $theme;
        border-color: $theme;
    }
    &:hover  {
        background: $theme;
        border-color: $theme;
    }
}

::v-deep .el-input__inner {
    border-radius: 0;
}

// 分页样式

::v-deep .el-pagination {
    .el-pager {
        li {
            min-width: 35px;
            height: 35px;
            line-height: 35px;
            &:not(.disabled).active {
                background-color: $theme;
            }
        }
    }
    .btn-prev, .btn-next {
        min-width: 35px;
        height: 35px;
        line-height: 35px;
    }
}


// 单选按钮组
::v-deep .el-radio-group {
    .el-radio-button {margin-right: 10px; margin-bottom: 20px;}
    .el-radio-button__inner {
        border: none;
        border-radius: 20px;
        padding: 8px 20px;
        &:hover {
            color: $theme;
        }
    }
    .el-radio-button__orig-radio:focus{border: none;}
    .el-radio-button__orig-radio:checked+.el-radio-button__inner {
        background: $theme;
        box-shadow: none;
        &:hover {
            color: #fff;
        }
    }
}

::v-deep .el-dialog__wrapper {
    .el-dialog {
        width: 460px;
        border-radius: 0;
        .el-dialog__header {
            background: $theme;
            padding-top: 10px;
            .el-dialog__title {
                color: #fff;
            }
            .el-dialog__headerbtn {
                top: 11px;
                .el-dialog__close {
                    font-size: 24px;
                    color: #fff;
                }
            }
        }
    }
}
::v-deep .el-radio__input.is-checked+.el-radio__label {color: $theme;}
::v-deep .el-radio__input.is-checked {
    .el-radio__inner {
        border-color: $theme;
        background: $theme;
    }
}
        
::v-deep .el-checkbox__input.is-checked+.el-checkbox__label {color: $theme;}
::v-deep .el-checkbox__input.is-checked {
    .el-checkbox__inner {
        border-color: $theme;
        background: $theme;
    }
}

::v-deep .el-checkbox__inner:hover, ::v-deep .el-checkbox__inner:active, ::v-deep .el-radio__inner:hover, ::v-deep .el-radio__inner:active {border-color: $theme;}


// ::v-deep .el-loading-spinner .el-icon-loading , ::v-deep .el-loading-spinner .el-loading-text{color: $theme;}



.avatar-upload-preview {
    background-color: black;
    position: absolute;
    top: 50%;
    transform: translate(50%, -50%);
    width: 200px;
    height: 200px;
    border-radius: 50%;
    box-shadow: 0 0 4px #ccc;
    overflow: hidden;
}

 

 

 

 

 

作者：微微一笑绝绝子
出处：https://www.cnblogs.com/wwyxjjz/p/16473274.html
本博客文章均为作者原创，转载请注明作者和原文链接。