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

5
src/design/color.less
View File

@ -111,9 +111,10 @@ html {
@button-primary-hover-color: lighten(@primary-color, 5%);
@button-primary-active-color: darken(@primary-color, 5%);
@button-ghost-color: @primary-color;
@button-ghost-hover-color: lighten(@primary-color, 10%);
@button-ghost-color: @white;
@button-ghost-hover-color: lighten(@white, 10%);
@button-ghost-hover-bg-color: #e1ebf6;
@button-ghost-active-color: darken(@white, 10%);
@button-success-color: @success-color;
@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="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"> 幽灵warn-dashed </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>
@ -52,8 +52,8 @@
<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="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>-->