Vue修改mint-ui默认样式(默认风格)
加入my-mint.css
我这里用的postcss的变量定义,如果亲们用的是其他预处理器,要改成其他处理器的定义方式
覆盖mint-ui的primary颜色,改为自己UI的主题色
--main-color: #f76349; /* 橙色 主色调 */
.mint-header {
background-color: var(--main-color);
}
.mint-button:not(.is-disabled):active::after {
opacity: .2 /* .6 */
}
.mint-button--primary {
background-color: var(--main-color);
}
.mint-button--primary.is-plain {
border: 1px solid var(--main-color);
color: var(--main-color)
}
.mint-badge.is-primary {
background-color: var(--main-color)
}
.mint-switch-input:checked + .mint-switch-core {
border-color: var(--main-color);
background-color: var(--main-color);
}
.mint-navbar .mint-tab-item.is-selected {
border-bottom: 3px solid var(--main-color);
color: var(--main-color);
}
.mint-tabbar > .mint-tab-item.is-selected {
color: var(--main-color);
}
.mint-searchbar-cancel {
color: var(--main-color);
}
.mint-checkbox-input:checked + .mint-checkbox-core {
background-color: var(--main-color);
border-color: var(--main-color);
}
.mint-radio-input:checked + .mint-radio-core {
background-color: var(--main-color);
border-color: var(--main-color);
}
.mt-range-progress {
background-color: var(--main-color);
}
.mt-progress-progress {
background-color: var(--main-color);
}
.mint-msgbox-confirm {
color: var(--main-color);
}
.mint-msgbox-confirm:active {
color: var(--main-color);
}
.mint-datetime-action {
color: var(--main-color);
}
Vue修改mint-ui默认样式(默认风格)的更多相关文章
- 新建一个基于vue.js+Mint UI的项目
上篇文章里面讲到如何新建一个基于vue,js的项目(详细文章请戳用Vue创建一个新的项目). 该项目如果需要组件等都需要自己去写,今天就学习一下如何新建一个基于vue.js+Mint UI的项目,直接 ...
- vue修改Element的el-table样式
修改Element中的el-table样式,可以使用以下几种方法: 1. row-style 行的 style 的回调方法,也可以使用一个固定的 Object 为所有行设置一样的 Style. 2. ...
- vue mint ui 手册文档对于墙的恐惧
http://www.cnblogs.com/smallteeth/p/6901610.html npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm ...
- vue mint ui 手册文档
npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i mint-ui -S CDN 目前可以通过 unpkg.com/mint-ui 获取到最新版本 ...
- vue mint UI
vue 与mint UI 结合开发手机app html5页面 api 文档 http://mint-ui.github.io/#!/zh-cn
- webpack整合 vue-router 路由,模块嵌套,整合Mint UI,MUI
webpack整合 vue-router 结构 各个文件内容,一共八个文件, 还有src components 目录 Login.vue <template> <div> &l ...
- Mint UI文档
Mint UI文档:http://elemefe.github.io/mint-ui/#/ 一.Mint UI的安装和基本用法. 1.NPM :npm i mint-ui -S 建议使用npm进行安装 ...
- Vue——解决使用第三方组件库时无法修改默认样式的问题(使用 /deep/ )
最近在开发一个基于Vue的后台管理系统,其中使用了element-ui第三方ui组件库.使用过组件库的人都知道,第三方组件往往会有一些默认的样式,而有些又是我们想要改变的. 一.基础(了解 <s ...
- element ui 修改默认样式
修改element ui默认的样式 如果要组件内全局修改 首先在浏览器里F12找到element默认的UI类名 找到要修改的默认类名以后 在文件中修改代码,重写属性 <style> .el ...
- Vue中修改组件默认样式
vue 中直接使用 class 修改组件的默认样式,在使用 scoped 之后,样式是没有效果. 此时可以使用div 包裹组件,deep 可以实现修改组件样式 .lxfix /deep/ .contr ...
随机推荐
- oracle impdp导入时 提示“ORA-39002: 操作无效 ORA-39070: 无法打开日志文件 ”
第一步:首先使用DBA权限的用户创建directory,我使用system ,可以在服务器本地创建,也可以远程连接sqlplus进行创建,使用的将是服务器上面的路径.要确保创建directory时,操 ...
- WebClient的使用
1.下载网页源码: private void button1_Click(object sender, EventArgs e) { string url = textBox1.Text; strin ...
- zookeeper应用实例
创建持久节点和临时节点 ZooKeeper zk=new ZooKeeper(HOST,CLIENT_SESSION_TIMEOUT,new Watcher(){ @Override public v ...
- 【转】ssh登录原理以及ssh免密码登陆
一.什么是SSH? 简单说,SSH是一种网络协议,用于计算机之间的加密登录. 如果一个用户从本地计算机,使用SSH协议登录另一台远程计算机,我们就可以认为,这种登录是安全的,即使被中途截获,密码也不会 ...
- P2762 太空飞行计划问题(网络流24题之一)
题目描述 W 教授正在为国家航天中心计划一系列的太空飞行.每次太空飞行可进行一系列商业性实验而获取利润.现已确定了一个可供选择的实验集合E={E1,E2,…,Em},和进行这些实验需要使用的全部仪器的 ...
- Fibsieve`s Fantabulous Birthday LightOJ - 1008(找规律。。)
Description 某只同学在生日宴上得到了一个N×N玻璃棋盘,每个单元格都有灯.每一秒钟棋盘会有一个单元格被点亮然后熄灭.棋盘中的单元格将以图中所示的顺序点亮.每个单元格上标记的是它在第几秒被点 ...
- 【刷题】洛谷 P2675 《瞿葩的数字游戏》T3-三角圣地
题目背景 国王1带大家到了数字王国的中心:三角圣地. 题目描述 不是说三角形是最稳定的图形嘛,数字王国的中心便是由一个倒三角构成.这个倒三角的顶端有一排数字,分别是1 ~ N.1 ~ N可以交换位置. ...
- docker基础学习
docker的定义: Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.容器是完全使用沙箱机 ...
- 【组合数学】【P4996】 咕咕咕
Description 小 F 注意到,自己总是在某些情况下会产生歉意.每当他要检查自己的任务表来决定下一项任务的时候,如果当前他干了某些事情,但是没干另一些事情,那么他就会产生一定量的歉意--比如, ...
- 洛谷P1937 [USACO10MAR]仓配置Barn Allocation
题目描述 Farmer John recently opened up a new barn and is now accepting stall allocation requests from t ...