zoukankan      html  css  js  c++  java
  • ant vue a-button配色方案

    转自:https://blog.csdn.net/wwmmddz/article/details/85702807
    /* 扩展ant design pro按钮组件颜色 */
    .button-color-dust {
    background-color: #F5222D;
    border-color: #F5222D;

    &:hover, &:focus {
    background-color: #ff4d4f;
    border-color: #ff4d4f;
    }

    &:active, &.active {
    background-color: #cf1322;
    border-color: #cf1322;
    }
    }

    .button-color-volcano {
    background-color: #FA541C;
    border-color: #FA541C;

    &:hover, &:focus {
    background-color: #ff7a45;
    border-color: #ff7a45;
    }

    &:active, &.active {
    background-color: #d4380d;
    border-color: #d4380d;
    }
    }

    .button-color-sunset {
    background-color: #FAAD14;
    border-color: #FAAD14;

    &:hover, &:focus {
    background-color: #ffc53d;
    border-color: #ffc53d;
    }

    &:active, &.active {
    background-color: #d48806;
    border-color: #d48806;
    }
    }

    .button-color-cyan {
    background-color: #13C2C2;
    border-color: #13C2C2;

    &:hover, &:focus {
    background-color: #36cfc9;
    border-color: #36cfc9;
    }

    &:active, &.active {
    background-color: #08979c;
    border-color: #08979c;
    }
    }

    .button-color-green {
    background-color: #52C41A;
    border-color: #52C41A;

    &:hover, &:focus {
    background-color: #73d13d;
    border-color: #73d13d;
    }

    &:active, &.active {
    background-color: #389e0d;
    border-color: #389e0d;
    }
    }

    .button-color-daybreak {
    background-color: #1890FF;
    border-color: #1890FF;

    &:hover, &:focus {
    background-color: #096dd9;
    border-color: #096dd9;
    }

    &:active, &.active {
    background-color: #40a9ff;
    border-color: #40a9ff;
    }
    }

    .button-color-geekblue {
    background-color: #2F54EB;
    border-color: #2F54EB;

    &:hover, &:focus {
    background-color: #1d39c4;
    border-color: #1d39c4;
    }

    &:active, &.active {
    background-color: #597ef7;
    border-color: #597ef7;
    }
    }

    .button-color-purple {
    background-color: #722ED1;
    border-color: #722ED1;

    &:hover, &:focus {
    background-color: #9254de;
    border-color: #9254de;
    }

    &:active, &.active {
    background-color: #531dab;
    border-color: #531dab;
    }
    }
    ————————————————

  • 相关阅读:
    IMX6ULL开发板Ubuntu文件系统Ubuntu-base构建
    迅为3399开发板新增目标检测技术-RKSSD-编译程序
    国际化支持、activity生命周期、屏幕翻转的ui适配
    java调用第三方接口(转载)
    android基础控件的使用
    java并发框架--Fork-Join
    java并发框架--Executor
    多线程管理
    死锁问题
    java多线程信息共享
  • 原文地址:https://www.cnblogs.com/yaoshi641/p/15151171.html
Copyright © 2011-2022 走看看