mirror of
https://github.com/vbenjs/vben-admin-thin-next.git
synced 2025-01-23 09:40:22 +08:00
style: fix basicButton style
This commit is contained in:
无木
parent
b7487675ce
commit
c420174c1d
@ -35,11 +35,12 @@ 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':
|
||||
default:
|
||||
if (s.indexOf('.ant-btn') >= -1) {
|
||||
// 按钮被重新定制过，需要过滤掉class防止覆盖
|
||||
return s;
|
||||
}
|
||||
}
|
||||
return s.startsWith('[data-theme') ? s : `[data-theme] ${s}`;
|
||||
},
|
||||
colorVariables: [...getThemeColors(), ...colors],
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -4,12 +4,12 @@
|
||||
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>
|
||||
@ -17,6 +17,7 @@
|
||||
<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>warning</h3>
|
||||
@ -41,28 +42,22 @@
|
||||
<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="warning" 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>
|
||||
<a-button ghost type="dashed" color="warning" class="ml-2"> 幽灵警告dashed </a-button>
|
||||
<a-button ghost danger 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>
|
||||
|
||||
</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>
|
||||
@ -73,6 +68,7 @@
|
||||
<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>
|
||||
@ -83,14 +79,34 @@
|
||||
<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>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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user