Vue修改mint-ui默认样式（默认风格）
2024-08-24 10:51:16
加入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);
}
最新文章
- html5 与视频
- Open-Test 测试驱动模式与版本号管理机制
- zepto/jQuery、AngularJS、React、Nuclear的演化
- 吐个槽：bose的售后真心差劲！愧对这个顶级音响产品！
- es6学习笔记2-解构赋值
- NYOJ题目806HEIHEI的心情
- php curl向远程服务器上传文件
- javaweb学习总结十七(web应用组织结构、web.xml作用以及配置虚拟主机搭建网站)
- Intellij Idea/Webstorm/Phpstorm
- 测试工具——JMeter
- 如何构建Android MVVM 应用框架
- iOS开发的10个知识点
- javascript数据基本类型和引用数据类型区别
- java实现支付宝支付及退款（一）
- SDN+DPI文献阅读（2）
- 《JavaScript Dom 编程艺术》读书笔记-第6章
- 经典算法分析：n与lgn
- pyhanlp python 脚本的demo补充
- Eclipse发布的Dynamical web项目在Tomacat文件夹下显示
- AndroidArchitecture