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 ...
随机推荐
- php过滤字符串
addslashes(); stripslashes(); //对数据库教程操作时,转义特殊字符 定义:addslashes() 函数在指定的预定义字符前添加反斜杠. 语法:addslashes(st ...
- APDU命令与响应格式【转】
本文转载自:http://map.im/apduintroduce 命令格式 APDU命令由命令头和命令体组成: CLA | INS | P1 | P2 | Lc | DATA | Le命令头: CL ...
- 【计算机基础】当你在浏览器中输入Google.com并且按下回车之后发生了什么?
本文转载自:https://github.com/skyline75489/what-happens-when-zh_CN#id9 按下"g"键 接下来的内容介绍了物理键盘和系统中 ...
- 第190天:js---String常用属性和方法(最全)
String常用属性和方法 一.string对象构造函数 /*string对象构造函数*/ console.log('字符串即对象');//字符串即对象 //传统方式 - 背后会自动将其转换成对象 / ...
- Python中int()函数的用法浅析
int()是Python的一个内部函数 Python系统帮助里面是这么说的 >>> help(int) Help on class int in module __builti ...
- 用CSS实现3D 滚动的立方体
用css3写3D立方体用到的属性不多,就那么几个:perspective,transform-style,以及transform. 目前来说能完美支持3D的浏览器有chrome.safari,火狐也支 ...
- 转:解决Python中文编码问题
Python 文本挖掘:解决Python中文编码问题 转于:http://rzcoding.blog.163.com/blog/static/2222810172013101785738166/ ...
- elasticsearch 第三篇(安装篇)
*nux下安装 在*nux下,es官方已提供编译的deb和rpm包,但是需要保证已安装安装Java虚拟环境(目前es1.6和1.7版本均可选择1.8版本java),安装步骤如下:1.下载ES deb/ ...
- [NOI2010] 能量采集 (数学)
[NOI2010] 能量采集 题目描述 栋栋有一块长方形的地,他在地上种了一种能量植物,这种植物可以采集太阳光的能量.在这些植物采集能量后,栋栋再使用一个能量汇集机器把这些植物采集到的能量汇集到一起. ...
- hihoCoder #1582 : Territorial Dispute 凸包
#1582 : Territorial Dispute 时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 In 2333, the C++ Empire and the Ja ...