zuaa
/
vue-vben-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: fixed basicButton ghost style 

修正BasicButton幽灵状态的样式
This commit is contained in:
无木 2021-08-16 08:47:45 +08:00
parent beb4ae92c1
commit 3ba8a67647
3 changed files with 44 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,23 +20,26 @@
border-color: transparent !important; border-color: transparent !important;
} }
//&-primary { &-primary {
// color: @white; color: @white;
// background-color: @button-primary-color; background-color: @button-primary-color;
// border-width: 0;
// &:hover,
// &:hover, &:focus {
// &:focus { color: @white;
// color: @white !important; 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: @white; background-color: fade(@button-cancel-bg-color, 40%);
// background-color: fade(@button-primary-color, 40%); }
// } }
//}
&-primary:not(&-background-ghost) {
border-width: 0;
}
&-default { &-default {
color: @button-cancel-color; color: @button-cancel-color;
@ -50,12 +53,12 @@
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%);
// background: fade(@button-cancel-bg-color, 40%); background: fade(@button-cancel-bg-color, 40%);
// border-color: fade(@button-cancel-border-color, 40%); border-color: fade(@button-cancel-border-color, 40%);
//} }
} }
[data-theme='light'] &.ant-btn-link.is-disabled { [data-theme='light'] &.ant-btn-link.is-disabled {
@ -212,33 +215,31 @@
} }
} }
&-background-ghost.ant-btn-link, &-background-ghost {
&.ant-btn-dashed:not([disabled='disabled']) { border-width: 1px;
// color: @text-color-call-out;
&:hover {
color: @button-primary-color;
}
} }
&-background-ghost { &-dashed&-background-ghost,
&-default&-background-ghost {
color: @button-ghost-color; color: @button-ghost-color;
background-color: transparent; background-color: transparent;
border-color: @button-ghost-color; border-color: @button-ghost-color;
border-width: 1px;
&:hover, &:hover,
&:focus { &:focus {
color: @button-ghost-hover-color !important; color: @button-ghost-hover-color;
background-color: @button-ghost-hover-bg-color;
border-color: @button-ghost-hover-color; border-color: @button-ghost-hover-color;
} }
&:active {
color: @button-ghost-active-color;
border-color: @button-ghost-active-color;
}
&[disabled], &[disabled],
&[disabled]:hover { &[disabled]:hover {
color: fade(@white, 40%) !important; color: fade(@white, 40%);
background-color: fade(@white, 40%); border-color: fade(@white, 40%);
border-color: fade(@white, 40%) !important;
} }
} }

5
src/design/color.less
View File

@ -111,9 +111,10 @@ html {
@button-primary-hover-color: lighten(@primary-color, 5%); @button-primary-hover-color: lighten(@primary-color, 5%);
@button-primary-active-color: darken(@primary-color, 5%); @button-primary-active-color: darken(@primary-color, 5%);
@button-ghost-color: @primary-color; @button-ghost-color: @white;
@button-ghost-hover-color: lighten(@primary-color, 10%); @button-ghost-hover-color: lighten(@white, 10%);
@button-ghost-hover-bg-color: #e1ebf6; @button-ghost-hover-bg-color: #e1ebf6;
@button-ghost-active-color: darken(@white, 10%);
@button-success-color: @success-color; @button-success-color: @success-color;
@button-success-hover-color: lighten(@success-color, 10%); @button-success-hover-color: lighten(@success-color, 10%);

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

@ -43,8 +43,8 @@
<a-button ghost color="success" class="ml-2"> 幽灵成功 </a-button> <a-button ghost color="success" class="ml-2"> 幽灵成功 </a-button>
<a-button ghost color="warn" 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 color="error" class="ml-2"> 幽灵错误 </a-button>
<a-button ghost type="dashed" color="warn" class="ml-2"> 幽灵警告dashed </a-button>
<a-button ghost type="dashed" color="warn" class="ml-2"> 幽灵warn-dashed </a-button> <a-button ghost type="danger" class="ml-2"> 幽灵危险 </a-button>
<div class="bg-gray-400 p-2 m-2"> <div class="bg-gray-400 p-2 m-2">
<h3 class="text-white">常规幽灵按钮通常用于有色背景下</h3> <h3 class="text-white">常规幽灵按钮通常用于有色背景下</h3>
<a-button ghost type="primary" class="ml-2"> 幽灵主要 </a-button> <a-button ghost type="primary" class="ml-2"> 幽灵主要 </a-button>
@ -52,8 +52,8 @@
<a-button ghost type="primary" class="ml-2" disabled> 禁用 </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="primary" class="ml-2" loading> loading </a-button>
<a-button ghost type="default" class="ml-2"> 幽灵默认 </a-button> <a-button ghost type="default" class="ml-2"> 幽灵默认 </a-button>
<a-button ghost type="danger" class="ml-2"> 幽灵危险 </a-button>
</div> </div>
<!-- antd 按钮不能同时使用ghost和link -->
<!-- <a-button ghost type="link" class="ml-2"> link </a-button>--> <!-- <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" loading> loading link </a-button>-->
<!-- <a-button ghost type="link" class="ml-2" disabled> disabled link </a-button>--> <!-- <a-button ghost type="link" class="ml-2" disabled> disabled link </a-button>-->