tsai
/
vue-vben-admin
mirror of https://github.com/vbenjs/vue-vben-admin
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

style: fix `basicButton` style

pull/1087/head
无木 5 years ago
parent
b7487675ce
commit
c420174c1d
3 changed files with 152 additions and 127 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 9
      build/vite/plugin/theme.ts
  2. 102
      src/design/ant/btn.less
  3. 168
      src/views/demo/comp/button/index.vue

9
build/vite/plugin/theme.ts
View File

@ -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}`;
},

102
src/design/ant/btn.less
View File

@ -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;

168
src/views/demo/comp/button/index.vue
View File

@ -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>

Write Preview
Loading…
Cancel
Save