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);
    }
    
    
  • 相关阅读:
    3.默认参数的注意事项
    2.关键字global,nonlocal
    1.函数的结构,调用,传参,形参,实参,args,kwargs,名称空间,高阶函数
    19. 实现一个整数加法计算器(多个数相加):
    20.文件操作
    18.使用for循环计算+1-3+5-7+9-11+13...99的结果
    ubuntu docker更新镜像源
    虚拟环境的使用
    前端基础之HTML
    jQuery基本使用
  • 原文地址:https://www.cnblogs.com/whkl-m/p/9823993.html
Copyright © 2011-2022 走看看