加入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默认样式(默认风格)的更多相关文章

  1. 新建一个基于vue.js+Mint UI的项目

    上篇文章里面讲到如何新建一个基于vue,js的项目(详细文章请戳用Vue创建一个新的项目). 该项目如果需要组件等都需要自己去写,今天就学习一下如何新建一个基于vue.js+Mint UI的项目,直接 ...

  2. vue修改Element的el-table样式

    修改Element中的el-table样式,可以使用以下几种方法: 1. row-style 行的 style 的回调方法,也可以使用一个固定的 Object 为所有行设置一样的 Style. 2. ...

  3. vue mint ui 手册文档对于墙的恐惧

    http://www.cnblogs.com/smallteeth/p/6901610.html npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm ...

  4. vue mint ui 手册文档

    npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i mint-ui -S CDN 目前可以通过 unpkg.com/mint-ui 获取到最新版本 ...

  5. vue mint UI

    vue 与mint  UI 结合开发手机app  html5页面 api  文档   http://mint-ui.github.io/#!/zh-cn

  6. webpack整合 vue-router 路由,模块嵌套,整合Mint UI,MUI

    webpack整合 vue-router 结构 各个文件内容,一共八个文件, 还有src components 目录 Login.vue <template> <div> &l ...

  7. Mint UI文档

    Mint UI文档:http://elemefe.github.io/mint-ui/#/ 一.Mint UI的安装和基本用法. 1.NPM :npm i mint-ui -S 建议使用npm进行安装 ...

  8. Vue——解决使用第三方组件库时无法修改默认样式的问题(使用 /deep/ )

    最近在开发一个基于Vue的后台管理系统,其中使用了element-ui第三方ui组件库.使用过组件库的人都知道,第三方组件往往会有一些默认的样式,而有些又是我们想要改变的. 一.基础(了解 <s ...

  9. element ui 修改默认样式

    修改element ui默认的样式 如果要组件内全局修改 首先在浏览器里F12找到element默认的UI类名 找到要修改的默认类名以后 在文件中修改代码,重写属性 <style> .el ...

  10. Vue中修改组件默认样式

    vue 中直接使用 class 修改组件的默认样式,在使用 scoped 之后,样式是没有效果. 此时可以使用div 包裹组件,deep 可以实现修改组件样式 .lxfix /deep/ .contr ...

随机推荐

  1. laravel连接多个不同数据库的单例类

    在連接多個不同數據庫時,需要寫多個連接,爲了簡化該操作,可以使用該基類,不同的數據庫只要建立好相對應的類繼承該類,就可以使用ORM模型進行操作了. class singletonInstance { ...

  2. sleep() 与 wait()的比较

    1.这两个方法来自不同的类分别是,sleep来自Thread类,和wait来自Object类. sleep是Thread的静态类方法,谁调用的谁去睡觉,即使在a线程里调用了b的sleep方法,实际上还 ...

  3. Web前端JQuery基础

    JQuery知识汇总 一.关于Jquery简介          jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaS ...

  4. BZOJ 1444 有趣的游戏(AC自动机+矩阵快速幂)

    真的是很有趣的游戏... 对每个单词构建好AC自动机后,由于单词都是相同长度的且不同,所以不会出现互相为子串的形式. 那么我们对AC自动机上的节点构建转移矩阵.对于每个单词末尾的节点.该节点的出边仅仅 ...

  5. C++解析(27):数组、智能指针与单例类模板

    0.目录 1.数组类模板 1.1 类模板高效率求和 1.2 数组类模板 1.3 堆数组类模板 2.智能指针类模板 2.1 使用智能指针 2.2 智能指针类模板 3.单例类模板 3.1 实现单例模式 3 ...

  6. P3469 [POI2008]BLO-Blockade

    题意翻译 在Byteotia有n个城镇. 一些城镇之间由无向边连接. 在城镇外没有十字路口,尽管可能有桥,隧道或者高架公路(反正不考虑这些).每两个城镇之间至多只有一条直接连接的道路.人们可以从任意一 ...

  7. 【刷题】洛谷 P4716 【模板】最小树形图

    题目背景 这是一道模板题. 题目描述 给定包含 \(n\) 个结点, \(m\) 条有向边的一个图.试求一棵以结点 \(r\) 为根的最小树形图,并输出最小树形图每条边的权值之和,如果没有以 \(r\ ...

  8. 【BZOJ5248】【九省联考2018】一双木棋(搜索,哈希)

    [BZOJ5248][九省联考2018]一双木棋(搜索,哈希) 题面 BZOJ Description 菲菲和牛牛在一块n行m列的棋盘上下棋,菲菲执黑棋先手,牛牛执白棋后手.棋局开始时,棋盘上没有任何 ...

  9. 使用Empire自动获取域管理员

    使用Empire自动获取域管理员  译:backlion 前言 自从Empire和BloodHound被应用来,对AD渗透已经可以获取到内网环境95%的信息量.作者发现自己一遍又一遍地在做同样重复的事 ...

  10. dorado重置按钮事件

    // @Bind #btnReset.onClick!function(self, arg) { var subNo = view.get("#dsQueryCriteria"). ...