zoukankan      html  css  js  c++  java
  • 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);
    }
    
    
  • 相关阅读:
    如何在Oracle官网下载java的JDK最新版本和历史版本
    屏幕录制专家【Bandicam】
    Bandicam下载 + 破解
    华为荣耀7i手动更改DNS,提高网页加载速度
    SQL中使用GROUP BY注意事项
    JavaScript数据类型判断
    React.lazy和Suspense组合实现组件懒加载
    使用React+TypeScript构建自己的组件库
    leetcode-0101 对称二叉树
    leetcode-0543 二叉树的直径
  • 原文地址:https://www.cnblogs.com/whkl-m/p/9823993.html
Copyright © 2011-2022 走看看