Skip to content

B
basic-vue-admin
提交 c420174c 作者: 无木
操作

style: fix `basicButton` style

上级 b7487675
正在显示 包含 152 行增加 和 127 行删除
build/vite/plugin/theme.ts
...@@ -35,10 +35,11 @@ export function configThemePlugin(isBuild: boolean): Plugin[] { ...@@ -35,10 +35,11 @@ export function configThemePlugin(isBuild: boolean): Plugin[] {
return s; return s;
case '.ant-select-item-option-selected:not(.ant-select-item-option-disabled)': case '.ant-select-item-option-selected:not(.ant-select-item-option-disabled)':
return s; return s;
case '.ant-btn-primary': default:
case '.ant-btn:hover': if (s.indexOf('.ant-btn') >= -1) {
case '.ant-btn-primary:hover': // 按钮被重新定制过，需要过滤掉class防止覆盖
return s; return s;
}
} }
return s.startsWith('[data-theme') ? s : `[data-theme] ${s}`; return s.startsWith('[data-theme') ? s : `[data-theme] ${s}`;
}, },
......
src/design/ant/btn.less
...@@ -29,18 +29,23 @@ ...@@ -29,18 +29,23 @@
color: @white; color: @white;
background-color: @button-primary-hover-color; background-color: @button-primary-hover-color;
} }
//
&[disabled], //&[disabled],
&[disabled]:hover { //&[disabled]:hover {
color: fade(@button-cancel-color, 40%); // color: fade(@button-cancel-color, 40%) !important;
background-color: fade(@button-cancel-bg-color, 40%); // background-color: fade(@button-cancel-bg-color, 40%) !important;
} // border-color: fade(@button-cancel-border-color, 40%) !important;
//}
} }
&-primary:not(&-background-ghost) { &-primary:not(&-background-ghost):not([disabled]) {
border-width: 0; color: @white;
} }
//&-primary:not(&-background-ghost) {
// border-width: 0;
//}
&-default { &-default {
color: @button-cancel-color; color: @button-cancel-color;
background-color: @button-cancel-bg-color; background-color: @button-cancel-bg-color;
...@@ -52,13 +57,13 @@ ...@@ -52,13 +57,13 @@
background-color: @button-cancel-hover-bg-color; background-color: @button-cancel-hover-bg-color;
border-color: @button-cancel-hover-border-color; border-color: @button-cancel-hover-border-color;
} }
//
&[disabled], //&[disabled],
&[disabled]:hover { //&[disabled]:hover {
color: fade(@button-cancel-color, 40%); // color: fade(@button-cancel-color, 40%) !important;
background: fade(@button-cancel-bg-color, 40%); // background: fade(@button-cancel-bg-color, 40%) !important;
border-color: fade(@button-cancel-border-color, 40%); // border-color: fade(@button-cancel-border-color, 40%) !important;
} //}
} }
[data-theme='light'] &.ant-btn-link.is-disabled { [data-theme='light'] &.ant-btn-link.is-disabled {
...@@ -105,11 +110,11 @@ ...@@ -105,11 +110,11 @@
} }
} }
&-success:not(.ant-btn-link) { &-success:not(.ant-btn-link, .is-disabled) {
color: @white; color: @white;
background-color: @button-success-color; background-color: @button-success-color;
border-color: @button-success-color; border-color: @button-success-color;
border-width: 0; //border-width: 0;
&:hover, &:hover,
&:focus { &:focus {
...@@ -123,13 +128,12 @@ ...@@ -123,13 +128,12 @@
border-color: @button-success-active-color; border-color: @button-success-active-color;
} }
&[disabled], //&[disabled],
&[disabled]:hover { //&[disabled]:hover {
color: @white; // color: @white;
background-color: fade(@button-success-color, 40%); // background-color: fade(@button-success-color, 40%);
// background-color: @button-success-disabled-color; // border-color: fade(@button-success-color, 40%);
border-color: fade(@button-success-color, 40%); //}
}
} }
&-warning.ant-btn-link:not([disabled='disabled']) { &-warning.ant-btn-link:not([disabled='disabled']) {
...@@ -146,11 +150,11 @@ ...@@ -146,11 +150,11 @@
} }
} }
&-warning:not(.ant-btn-link) { &-warning:not(.ant-btn-link, .is-disabled) {
color: @white; color: @white;
background-color: @button-warn-color; background-color: @button-warn-color;
border-color: @button-warn-color; border-color: @button-warn-color;
border-width: 0; //border-width: 0;
&:hover, &:hover,
&:focus { &:focus {
...@@ -164,15 +168,12 @@ ...@@ -164,15 +168,12 @@
border-color: @button-warn-active-color; border-color: @button-warn-active-color;
} }
&[disabled], //&[disabled],
&[disabled]:hover { //&[disabled]:hover {
color: @white; // color: @white;
background-color: fade(@button-warn-color, 40%); // background-color: fade(@button-warn-color, 40%);
border-color: fade(@button-warn-color, 40%); // border-color: fade(@button-warn-color, 40%);
//}
// background-color: @button-warn-disabled-color;
// border-color: @button-warn-disabled-color ;
}
} }
&-error.ant-btn-link:not([disabled='disabled']) { &-error.ant-btn-link:not([disabled='disabled']) {
...@@ -189,11 +190,11 @@ ...@@ -189,11 +190,11 @@
} }
} }
&-error:not(.ant-btn-link) { &-error:not(.ant-btn-link, .is-disabled) {
color: @white; color: @white;
background-color: @button-error-color; background-color: @button-error-color;
border-color: @button-error-color; border-color: @button-error-color;
border-width: 0; //border-width: 0;
&:hover, &:hover,
&:focus { &:focus {
...@@ -207,22 +208,29 @@ ...@@ -207,22 +208,29 @@
border-color: @button-error-active-color; border-color: @button-error-active-color;
} }
&[disabled], //&[disabled],
&[disabled]:hover { //&[disabled]:hover {
color: @white; // color: @white;
background-color: fade(@button-error-color, 40%); // background-color: fade(@button-error-color, 40%);
border-color: fade(@button-error-color, 40%); // border-color: fade(@button-error-color, 40%);
} //}
} }
&-background-ghost { &-background-ghost {
border-width: 1px; border-width: 1px;
background-color: transparent !important;
&[disabled],
&[disabled]:hover {
color: fade(@white, 40%) !important;
background-color: transparent !important;
border-color: fade(@white, 40%) !important;
}
} }
&-dashed&-background-ghost, &-dashed&-background-ghost,
&-default&-background-ghost { &-default&-background-ghost {
color: @button-ghost-color; color: @button-ghost-color;
background-color: transparent;
border-color: @button-ghost-color; border-color: @button-ghost-color;
&:hover, &:hover,
...@@ -238,8 +246,8 @@ ...@@ -238,8 +246,8 @@
&[disabled], &[disabled],
&[disabled]:hover { &[disabled]:hover {
color: fade(@white, 40%); color: fade(@white, 40%) !important;
border-color: fade(@white, 40%); border-color: fade(@white, 40%) !important;
} }
} }
...@@ -261,7 +269,7 @@ ...@@ -261,7 +269,7 @@
} }
} }
&-background-ghost&-warn:not(.ant-btn-link) { &-background-ghost&-warning:not(.ant-btn-link) {
color: @button-warn-color; color: @button-warn-color;
background-color: transparent; background-color: transparent;
border-color: @button-warn-color; border-color: @button-warn-color;
......
src/views/demo/comp/button/index.vue
...@@ -4,93 +4,109 @@ ...@@ -4,93 +4,109 @@
title="基础组件" title="基础组件"
content=" 基础组件依赖于ant-design-vue,组件库已有的基础组件,项目中不会再次进行demo展示（二次封装组件除外）" content=" 基础组件依赖于ant-design-vue,组件库已有的基础组件,项目中不会再次进行demo展示（二次封装组件除外）"
> >
<template #rightFooter> <a-row :gutter="[20, 20]">
<a-button type="primary"> 确认 </a-button> <a-col :xl="10" :lg="24">
</template> <a-card title="BasicButton Color">
<div class="my-2">
<h3>success</h3>
<div class="py-2">
<a-button color="success"> 成功 </a-button>
<a-button color="success" class="ml-2" disabled> 禁用 </a-button>
<a-button color="success" class="ml-2" loading> loading </a-button>
<a-button color="success" type="link" class="ml-2"> link </a-button>
<a-button color="success" type="link" class="ml-2" loading> loading link </a-button>
<a-button color="success" type="link" class="ml-2" disabled> disabled link </a-button>
</div>
</div>
<div class="my-2"> <div class="my-2">
<h3>success</h3> <h3>warning</h3>
<a-button color="success"> 成功 </a-button> <a-button color="warning"> 警告 </a-button>
<a-button color="success" class="ml-2" disabled> 禁用 </a-button> <a-button color="warning" class="ml-2" disabled> 禁用 </a-button>
<a-button color="success" class="ml-2" loading> loading </a-button> <a-button color="warning" class="ml-2" loading> loading </a-button>
<a-button color="success" type="link" class="ml-2"> link </a-button> <a-button color="warning" type="link" class="ml-2"> link </a-button>
<a-button color="success" type="link" class="ml-2" loading> loading link </a-button> <a-button color="warning" type="link" class="ml-2" loading> loading link </a-button>
<a-button color="success" type="link" class="ml-2" disabled> disabled link </a-button> <a-button color="warning" type="link" class="ml-2" disabled> disabled link </a-button>
</div> </div>
<div class="my-2"> <div class="my-2">
<h3>warning</h3> <h3>error</h3>
<a-button color="warning"> 警告 </a-button> <a-button color="error"> 错误 </a-button>
<a-button color="warning" class="ml-2" disabled> 禁用 </a-button> <a-button color="error" class="ml-2" disabled> 禁用 </a-button>
<a-button color="warning" class="ml-2" loading> loading </a-button> <a-button color="error" class="ml-2" loading> loading </a-button>
<a-button color="warning" type="link" class="ml-2"> link </a-button> <a-button color="error" type="link" class="ml-2"> link </a-button>
<a-button color="warning" type="link" class="ml-2" loading> loading link </a-button> <a-button color="error" type="link" class="ml-2" loading> loading link </a-button>
<a-button color="warning" type="link" class="ml-2" disabled> disabled link </a-button> <a-button color="error" type="link" class="ml-2" disabled> disabled link </a-button>
</div> </div>
<div class="my-2"> <div class="my-2">
<h3>error</h3> <h3>ghost</h3>
<a-button color="error"> 错误 </a-button> <a-button ghost color="success" class="ml-2"> 幽灵成功 </a-button>
<a-button color="error" class="ml-2" disabled> 禁用 </a-button> <a-button ghost color="warning" class="ml-2"> 幽灵警告 </a-button>
<a-button color="error" class="ml-2" loading> loading </a-button> <a-button ghost color="error" class="ml-2"> 幽灵错误 </a-button>
<a-button color="error" type="link" class="ml-2"> link </a-button> <a-button ghost type="dashed" color="warning" class="ml-2"> 幽灵警告dashed </a-button>
<a-button color="error" type="link" class="ml-2" loading> loading link </a-button> <a-button ghost danger class="ml-2"> 幽灵危险 </a-button>
<a-button color="error" type="link" class="ml-2" disabled> disabled link </a-button> </div>
</div> </a-card>
</a-col>
<a-col :xl="14" :lg="24">
<a-card title="BasicButton Types">
<div class="my-2">
<h3>primary</h3>
<a-button type="primary" preIcon="mdi:page-next-outline"> 主按钮 </a-button>
<a-button type="primary" class="ml-2" disabled> 禁用 </a-button>
<a-button type="primary" class="ml-2" danger preIcon="mdi:page-next-outline">
危险
</a-button>
<a-button type="primary" class="ml-2" loading> loading </a-button>
<a-button type="link" class="ml-2"> link </a-button>
<a-button type="link" class="ml-2" loading> loading link </a-button>
<a-button type="link" class="ml-2" disabled> disabled link </a-button>
</div>
<div class="my-2"> <div class="my-2">
<h3>ghost</h3> <h3>default</h3>
<a-button ghost color="success" class="ml-2"> 幽灵成功 </a-button> <a-button type="default"> 默认 </a-button>
<a-button ghost color="warn" class="ml-2"> 幽灵警告 </a-button> <a-button type="default" class="ml-2" disabled> 禁用 </a-button>
<a-button ghost color="error" class="ml-2"> 幽灵错误 </a-button> <a-button type="default" class="ml-2" danger> 危险 </a-button>
<a-button ghost type="dashed" color="warn" class="ml-2"> 幽灵警告dashed </a-button> <a-button type="default" class="ml-2" loading> loading </a-button>
<a-button ghost type="danger" class="ml-2"> 幽灵危险 </a-button> <a-button type="link" class="ml-2"> link </a-button>
<div class="bg-gray-400 p-2 m-2"> <a-button type="link" class="ml-2" loading> loading link </a-button>
<h3 class="text-white">常规幽灵按钮通常用于有色背景下</h3> <a-button type="link" class="ml-2" disabled> disabled link </a-button>
<a-button ghost type="primary" class="ml-2"> 幽灵主要 </a-button> </div>
<a-button ghost type="dashed" class="ml-2"> 幽灵dashed </a-button>
<a-button ghost type="primary" class="ml-2" disabled> 禁用 </a-button>
<a-button ghost type="primary" class="ml-2" loading> loading </a-button>
<a-button ghost type="default" class="ml-2"> 幽灵默认 </a-button>
</div>
<!-- antd 按钮不能同时使用ghost和link -->
<!-- <a-button ghost type="link" class="ml-2"> link </a-button>-->
<!-- <a-button ghost type="link" class="ml-2" loading> loading link </a-button>-->
<!-- <a-button ghost type="link" class="ml-2" disabled> disabled link </a-button>-->
</div>
<div class="my-2"> <div class="my-2">
<h3>primary</h3> <h3>dashed</h3>
<a-button type="primary" preIcon="mdi:page-next-outline"> 主按钮 </a-button> <a-button type="dashed"> dashed </a-button>
<a-button type="primary" class="ml-2" disabled> 禁用 </a-button> <a-button type="dashed" class="ml-2" disabled> 禁用 </a-button>
<a-button type="primary" class="ml-2" loading> loading </a-button> <a-button type="dashed" class="ml-2" danger> 危险 </a-button>
<a-button type="link" class="ml-2"> link </a-button> <a-button type="dashed" class="ml-2" loading> loading </a-button>
<a-button type="link" class="ml-2" loading> loading link </a-button> </div>
<a-button type="link" class="ml-2" disabled> disabled link </a-button>
</div>
<div class="my-2"> <div class="my-2">
<h3>default</h3> <h3>ghost 常规幽灵按钮通常用于有色背景下</h3>
<a-button type="default"> 默认 </a-button> <div class="bg-gray-400 py-2">
<a-button type="default" class="ml-2" disabled> 禁用 </a-button> <a-button ghost type="primary" class="ml-2"> 幽灵主要 </a-button>
<a-button type="default" class="ml-2" loading> loading </a-button> <a-button ghost type="default" class="ml-2"> 幽灵默认 </a-button>
<a-button type="link" class="ml-2"> link </a-button> <a-button ghost type="dashed" class="ml-2"> 幽灵dashed </a-button>
<a-button type="link" class="ml-2" loading> loading link </a-button> <a-button ghost type="primary" class="ml-2" disabled> 禁用 </a-button>
<a-button type="link" class="ml-2" disabled> disabled link </a-button> <a-button ghost type="primary" class="ml-2" loading> loading </a-button>
</div> </div>
<!-- antd 按钮不能同时使用ghost和link -->
<div class="my-2"> <!-- <a-button ghost type="link" class="ml-2"> link </a-button>-->
<h3>dashed</h3> <!-- <a-button ghost type="link" class="ml-2" loading> loading link </a-button>-->
<a-button type="dashed"> dashed </a-button> <!-- <a-button ghost type="link" class="ml-2" disabled> disabled link </a-button>-->
<a-button type="dashed" class="ml-2" disabled> 禁用 </a-button> </div>
<a-button type="dashed" class="ml-2" loading> loading </a-button> </a-card>
</div> </a-col>
</a-row>
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import { PageWrapper } from '/@/components/Page'; import { PageWrapper } from '/@/components/Page';
import { Card, Row, Col } from 'ant-design-vue';
export default defineComponent({ export default defineComponent({
components: { PageWrapper }, components: { PageWrapper, ACard: Card, ARow: Row, ACol: Col },
}); });
</script> </script>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论