案例上一个 覆盖element-ui按钮 less
@primary: #3a70df;
@danger: #df3a25;
@success: #2fcd77;
@warning: #fba13b;
@white: #ffffff;
@black: #000000;
@textBlack: #383838;
@ccc: #cccccc;
@colorlist: @danger, @primary, @success, @warning;
@colorTypelist: danger, primary, success, warning;
/* 按钮样式开始 */
.setBtnColor(@type,@color) {
.el-button--@{type}.is-plain {
border-color: @color;
color: @color;
background: @white;
&:hover, &:focus {
border-color: mix(@white, @color, 20%);
color: mix(@white, @color, 20%);
background-color: mix(@white, @color, 90%);
}
&:active {
border-color: mix(@black, @color, 20%);
color: mix(@black, @color, 20%);
background-color: mix(@white, @color, 80%);
}
}
.el-button.is-disabled {
border-color: @ccc;
color: @white;
background: @ccc;
&:hover, &:focus {
border-color: @ccc;
color: @white;
background: @ccc;
}
&:active {
border-color: @ccc;
color: @white;
background: @ccc;
}
}
}
.loopBtnColor(@i) when (@i < (length(@colorlist)+1)) {
.setBtnColor(extract(@colorTypelist, @i), extract(@colorlist, @i));
.loopBtnColor(@i+1);
}
.loopBtnColor(1);