公共的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
本博客文章均为作者原创,转载请注明作者和原文链接。
公共的common.scss (覆盖部分element组件主题色)的更多相关文章
- element ui主题色跟换
node_modules\ element ui\ lib\ theme-dafault 下载的主题色替换掉改文件... ================== 但是会出现 搜索框iocon 样式换 ...
- python + web自动化,点击不生效,提示“selenium.common.exceptions.ElementClickInterceptedException: Message: element click intercepted: Element is not clickable at point (117, 674)”
前言: 在做web自动化时,遇到一个缩放了浏览器比例的操作,从100%缩小到80%,再进行点击的时候,弹出报错信息,无法点击 selenium.common.exceptions.ElementCli ...
- 【vue】vue使用Element组件时v-for循环里的表单项验证方法
转载至:https://www.jb51.net/article/142750.htm标题描述看起来有些复杂,有vue,Element,又有表单验证,还有v-for循环?是不是有点乱?不过我相信开发中 ...
- selenium.common.exceptions.ElementNotVisibleException: Message: element not visible处理方法:selenium针对下拉菜单事件的处理
使用Selenium爬虫时,可能会遇到一些下拉菜单,动态加载,如果直接使用find_element_by_函数会报错,显示selenium.common.exceptions.ElementNotVi ...
- element组件dialog关闭时Message消息提示抖动问题
在页面内容较多,出现滚动条时使用element组件里的dialog组件,当关闭dialog组件的同时弹出Message消息提示时,Message会抖动一下. 在页面有滚动条的情况先打开dialog时, ...
- 阻止element组件中的<el-input/>的粘贴功能
需求: 阻止element组件中的<el-input/>的粘贴功能 实现思路: <el-input/>组件是由外层<div>和内层的<input>组成的 ...
- vue2+element组件库开发
Vue2:https://cn.vuejs.org/v2/guide/single-file-components.html element组件库:http://element-cn.eleme.io ...
- vue+Elment-UI,修改element组件样式
在用vue开发项目过程中,我们总是避免不了的会使用到elementUI,它里面提供的一些组件都为我们的开发带来了很大的便利,但是,当有时候我们需要使用这些组件的同时又要修改下组件的UI样式的话,我们该 ...
- 解决vue中element组件样式修改无效
vue中element组件样式修改无效 <style> .detail{ .el-input__inner { height: 48px; } } </style> 直接写st ...
- 自定义Vue&Element组件,实现用户选择和显示
在我们很多前端业务开发中,往往为了方便,都需要自定义一些用户组件,一个是减少单一页面的代码,提高维护效率:二个也是方便重用.本篇随笔介绍在任务管理操作中,使用自定义Vue&Element组件, ...
随机推荐
- SpringBoot的使用
1. Spring Boot概述 目标:了解Spring Boot是什么,有什么作用 小结: Spring Boot是一个便捷搭建 基于spring工程的脚手架:作用是帮助开发人员快速搭建大型的spr ...
- JavaScript 静态方法
JavaScript 静态方法 静态方法是使用 static 关键字修饰的方法,又叫类方法,属于类的,但不属于对象,在实例化对象之前可以通过 类名.方法名 调用静态方法. 静态方法不能在对象上调用,只 ...
- 超级详细的Vue安装与配置教程
原文: https://www.jb51.net/article/251371.htm 超级详细的Vue安装与配置教程 Vue web前端三大主流框架之一,是一套用于构建用户界面的渐进式框架,下面 ...
- mysql8改密码
登录后执行语句 ALTER USER 'test'@'localhost' IDENTIFIED WITH MYSQL_NATIVE_PASSWORD BY '新密码'; 修改Host范围 updat ...
- boss直聘上看信息 但是不会显示已读
大家在boss直聘上看 想看的boss回你的信息但是又不想显示已读 可以按F12 打开控制台 查找标出文件 查看lastmsg文本里面就是最后一次发你的信息
- Ubuntu之docker搭建dvwa
前提,已经安装好docker. 首先,搜索DVWA镜像,
- springboot启动日志:Multiple Spring Data modules found, entering strict repository configuration mode
问题描述 最近启动springboot项目的时候,发现有一条日志:Multiple Spring Data modules found, entering strict repository conf ...
- 关于flex
flex 是 flex-grow.flex-shrink.flex-basis 的缩写. flex 的默认值是以上三个属性值的组合.假设以上三个属性同样取默认值,则 flex 的默认值是 0 1 au ...
- postgresql添加系统表报错
1.添加系统表后,执行make install报如下错误,未自动生成下面两个文件cp: cannot stat './catalog/ux_user_status_d_compatible.h': N ...
- vue vant3上传图片文件以流的形式上传
axios.post("/fjt_fast/sys/comm/upload", { file: param.file}, { headers: { 'Content-Type': ...