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);
    }
    
    
  • 相关阅读:
    如何作需求
    AS400如何将Spooled File 拷贝到源物理文件
    AS400 批量FTP
    Oracle和db2/400的差别
    CL内建函数
    visio如何扩大画布的大小
    如何把C/S架构较为平滑的切换到SOA架构
    关于DataTable里大批量查找的更快速的方法
    c#键值对容器
    什么是委托
  • 原文地址:https://www.cnblogs.com/whkl-m/p/9823993.html
Copyright © 2011-2022 走看看