Skip to content

V
vue-vben-admin

zuiqiangwanggong / vue-vben-admin
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
V
vue-vben-admin

体验新版 GitCode，发现更多精彩内容 >>

提交 c420174c 编写于 作者: 无 无木
浏览文件
操作

style: fix `basicButton` style

上级 b7487675
隐藏空白更改
内联 并排
Showing with 152 addition and 127 deletion
build/vite/plugin/theme.ts
浏览文件 @ c420174c
......@@ -35,10 +35,11 @@ export function configThemePlugin(isBuild: boolean): Plugin[] {
return s;
case '.ant-select-item-option-selected:not(.ant-select-item-option-disabled)':
return s;
case '.ant-btn-primary':
case '.ant-btn:hover':
case '.ant-btn-primary:hover':
return s;
default:
if (s.indexOf('.ant-btn') >= -1) {
// 按钮被重新定制过，需要过滤掉class防止覆盖
return s;
}
}
return s.startsWith('[data-theme') ? s : `[data-theme] ${s}`;
},
......
src/design/ant/btn.less
浏览文件 @ c420174c
......@@ -29,18 +29,23 @@
color: @white;
background-color: @button-primary-hover-color;
}
&[disabled],
&[disabled]:hover {
color: fade(@button-cancel-color, 40%);
background-color: fade(@button-cancel-bg-color, 40%);
}
//
//&[disabled],
//&[disabled]:hover {
// color: fade(@button-cancel-color, 40%) !important;
// background-color: fade(@button-cancel-bg-color, 40%) !important;
// border-color: fade(@button-cancel-border-color, 40%) !important;
//}
}
&-primary:not(&-background-ghost) {
border-width: 0;
&-primary:not(&-background-ghost):not([disabled]) {
color: @white;
}
//&-primary:not(&-background-ghost) {
// border-width: 0;
//}
&-default {
color: @button-cancel-color;
background-color: @button-cancel-bg-color;
......@@ -52,13 +57,13 @@
background-color: @button-cancel-hover-bg-color;
border-color: @button-cancel-hover-border-color;
}
&[disabled],
&[disabled]:hover {
color: fade(@button-cancel-color, 40%);
background: fade(@button-cancel-bg-color, 40%);
border-color: fade(@button-cancel-border-color, 40%);
}
//
//&[disabled],
//&[disabled]:hover {
// color: fade(@button-cancel-color, 40%) !important;
// background: fade(@button-cancel-bg-color, 40%) !important;
// border-color: fade(@button-cancel-border-color, 40%) !important;
//}
}
[data-theme='light'] &.ant-btn-link.is-disabled {
......@@ -105,11 +110,11 @@
}
}
&-success:not(.ant-btn-link) {
&-success:not(.ant-btn-link, .is-disabled) {
color: @white;
background-color: @button-success-color;
border-color: @button-success-color;
border-width: 0;
//border-width: 0;
&:hover,
&:focus {
......@@ -123,13 +128,12 @@
border-color: @button-success-active-color;
}
&[disabled],
&[disabled]:hover {
color: @white;
background-color: fade(@button-success-color, 40%);
// background-color: @button-success-disabled-color;
border-color: fade(@button-success-color, 40%);
}
//&[disabled],
//&[disabled]:hover {
// color: @white;
// background-color: fade(@button-success-color, 40%);
// border-color: fade(@button-success-color, 40%);
//}
}
&-warning.ant-btn-link:not([disabled='disabled']) {
......@@ -146,11 +150,11 @@
}
}
&-warning:not(.ant-btn-link) {
&-warning:not(.ant-btn-link, .is-disabled) {
color: @white;
background-color: @button-warn-color;
border-color: @button-warn-color;
border-width: 0;
//border-width: 0;
&:hover,
&:focus {
......@@ -164,15 +168,12 @@
border-color: @button-warn-active-color;
}
&[disabled],
&[disabled]:hover {
color: @white;
background-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 ;
}
//&[disabled],
//&[disabled]:hover {
// color: @white;
// background-color: fade(@button-warn-color, 40%);
// border-color: fade(@button-warn-color, 40%);
//}
}
&-error.ant-btn-link:not([disabled='disabled']) {
......@@ -189,11 +190,11 @@
}
}
&-error:not(.ant-btn-link) {
&-error:not(.ant-btn-link, .is-disabled) {
color: @white;
background-color: @button-error-color;
border-color: @button-error-color;
border-width: 0;
//border-width: 0;
&:hover,
&:focus {
......@@ -207,22 +208,29 @@
border-color: @button-error-active-color;
}
&[disabled],
&[disabled]:hover {
color: @white;
background-color: fade(@button-error-color, 40%);
border-color: fade(@button-error-color, 40%);
}
//&[disabled],
//&[disabled]:hover {
// color: @white;
// background-color: fade(@button-error-color, 40%);
// border-color: fade(@button-error-color, 40%);
//}
}
&-background-ghost {
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,
&-default&-background-ghost {
color: @button-ghost-color;
background-color: transparent;
border-color: @button-ghost-color;
&:hover,
......@@ -238,8 +246,8 @@
&[disabled],
&[disabled]:hover {
color: fade(@white, 40%);
border-color: fade(@white, 40%);
color: fade(@white, 40%) !important;
border-color: fade(@white, 40%) !important;
}
}
......@@ -261,7 +269,7 @@
}
}
&-background-ghost&-warn:not(.ant-btn-link) {
&-background-ghost&-warning:not(.ant-btn-link) {
color: @button-warn-color;
background-color: transparent;
border-color: @button-warn-color;
......
src/views/demo/comp/button/index.vue
浏览文件 @ c420174c
......@@ -4,93 +4,109 @@
title="基础组件"
content=" 基础组件依赖于ant-design-vue,组件库已有的基础组件,项目中不会再次进行demo展示（二次封装组件除外）"
>
<template #rightFooter>
<a-button type="primary"> 确认 </a-button>
</template>
<a-row :gutter="[20, 20]">
<a-col :xl="10" :lg="24">
<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">
<h3>success</h3>
<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 class="my-2">
<h3>warning</h3>
<a-button color="warning"> 警告 </a-button>
<a-button color="warning" class="ml-2" disabled> 禁用 </a-button>
<a-button color="warning" class="ml-2" loading> loading </a-button>
<a-button color="warning" 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="warning" type="link" class="ml-2" disabled> disabled link </a-button>
</div>
<div class="my-2">
<h3>warning</h3>
<a-button color="warning"> 警告 </a-button>
<a-button color="warning" class="ml-2" disabled> 禁用 </a-button>
<a-button color="warning" class="ml-2" loading> loading </a-button>
<a-button color="warning" 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="warning" type="link" class="ml-2" disabled> disabled link </a-button>
</div>
<div class="my-2">
<h3>error</h3>
<a-button color="error"> 错误 </a-button>
<a-button color="error" class="ml-2" disabled> 禁用 </a-button>
<a-button color="error" class="ml-2" loading> loading </a-button>
<a-button color="error" type="link" class="ml-2"> link </a-button>
<a-button color="error" type="link" class="ml-2" loading> loading link </a-button>
<a-button color="error" type="link" class="ml-2" disabled> disabled link </a-button>
</div>
<div class="my-2">
<h3>error</h3>
<a-button color="error"> 错误 </a-button>
<a-button color="error" class="ml-2" disabled> 禁用 </a-button>
<a-button color="error" class="ml-2" loading> loading </a-button>
<a-button color="error" type="link" class="ml-2"> link </a-button>
<a-button color="error" type="link" class="ml-2" loading> loading link </a-button>
<a-button color="error" type="link" class="ml-2" disabled> disabled link </a-button>
</div>
<div class="my-2">
<h3>ghost</h3>
<a-button ghost color="success" class="ml-2"> 幽灵成功 </a-button>
<a-button ghost color="warning" class="ml-2"> 幽灵警告 </a-button>
<a-button ghost color="error" class="ml-2"> 幽灵错误 </a-button>
<a-button ghost type="dashed" color="warning" class="ml-2"> 幽灵警告dashed </a-button>
<a-button ghost danger class="ml-2"> 幽灵危险 </a-button>
</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">
<h3>ghost</h3>
<a-button ghost color="success" class="ml-2"> 幽灵成功 </a-button>
<a-button ghost color="warn" class="ml-2"> 幽灵警告 </a-button>
<a-button ghost color="error" class="ml-2"> 幽灵错误 </a-button>
<a-button ghost type="dashed" color="warn" class="ml-2"> 幽灵警告dashed </a-button>
<a-button ghost type="danger" class="ml-2"> 幽灵危险 </a-button>
<div class="bg-gray-400 p-2 m-2">
<h3 class="text-white">常规幽灵按钮通常用于有色背景下</h3>
<a-button ghost type="primary" class="ml-2"> 幽灵主要 </a-button>
<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">
<h3>default</h3>
<a-button type="default"> 默认 </a-button>
<a-button type="default" class="ml-2" disabled> 禁用 </a-button>
<a-button type="default" class="ml-2" danger> 危险 </a-button>
<a-button type="default" 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">
<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" 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">
<h3>dashed</h3>
<a-button type="dashed"> dashed </a-button>
<a-button type="dashed" class="ml-2" disabled> 禁用 </a-button>
<a-button type="dashed" class="ml-2" danger> 危险 </a-button>
<a-button type="dashed" class="ml-2" loading> loading </a-button>
</div>
<div class="my-2">
<h3>default</h3>
<a-button type="default"> 默认 </a-button>
<a-button type="default" class="ml-2" disabled> 禁用 </a-button>
<a-button type="default" 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">
<h3>dashed</h3>
<a-button type="dashed"> dashed </a-button>
<a-button type="dashed" class="ml-2" disabled> 禁用 </a-button>
<a-button type="dashed" class="ml-2" loading> loading </a-button>
</div>
<div class="my-2">
<h3>ghost 常规幽灵按钮通常用于有色背景下</h3>
<div class="bg-gray-400 py-2">
<a-button ghost type="primary" class="ml-2"> 幽灵主要 </a-button>
<a-button ghost type="default" class="ml-2"> 幽灵默认 </a-button>
<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>
</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>
</a-card>
</a-col>
</a-row>
</PageWrapper>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { PageWrapper } from '/@/components/Page';
import { Card, Row, Col } from 'ant-design-vue';
export default defineComponent({
components: { PageWrapper },
components: { PageWrapper, ACard: Card, ARow: Row, ACol: Col },
});
</script>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或