github_mirrors/vben-admin-thin-next
1
0
Fork 0
mirror of https://github.com/vbenjs/vben-admin-thin-next.git synced 2025-01-23 09:40:22 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: fixed basicButton style

Browse Source 
修正BasicButton的样式
This commit is contained in:
无木 2021-08-16 07:35:47 +08:00
parent cc46935a82
commit beb4ae92c1
4 changed files with 127 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.zh_CN.md
View File

@ -17,6 +17,7 @@
- 修复在`editComponentProps`中为编辑组件提供的`size`属性无效的问题
- **Qrcode** 修复二维码组件在创建时未能及时绘制的问题
- **BasicModal** 修复`helpMessage`属性不起作用的问题
- **BasicButton** 修复按钮样式表现与 antd 官方不一致的问题
- **其它** 修复`useRedo`(重新加载当前路由)会丢失路由`params`数据的问题
## 2.7.0(2021-08-03)

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

@ -20,23 +20,23 @@
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;
// 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%);
// }
//}
&-default {
color: @button-cancel-color;
@ -86,6 +86,10 @@
color: @button-success-hover-color;
border-color: transparent;
}
&:active {
color: @button-success-active-color;
}
}
&-success.ant-btn-link.ant-btn-loading,
@ -111,6 +115,11 @@
border-color: @button-success-hover-color;
}
&:active {
background-color: @button-success-active-color;
border-color: @button-success-active-color;
}
&[disabled],
&[disabled]:hover {
color: @white;
@ -128,6 +137,10 @@
color: @button-warn-hover-color;
border-color: transparent;
}
&:active {
color: @button-warn-active-color;
}
}
&-warning:not(.ant-btn-link) {
@ -143,6 +156,11 @@
border-color: @button-warn-hover-color;
}
&:active {
background-color: @button-warn-active-color;
border-color: @button-warn-active-color;
}
&[disabled],
&[disabled]:hover {
color: @white;
@ -162,6 +180,10 @@
color: @button-error-hover-color;
border-color: transparent;
}
&:active {
color: @button-error-active-color;
}
}
&-error:not(.ant-btn-link) {
@ -177,6 +199,11 @@
border-color: @button-error-hover-color;
}
&:active {
background-color: @button-error-active-color;
border-color: @button-error-active-color;
}
&[disabled],
&[disabled]:hover {
color: @white;
@ -187,7 +214,7 @@
&-background-ghost.ant-btn-link,
&.ant-btn-dashed:not([disabled='disabled']) {
color: @text-color-call-out;
// color: @text-color-call-out;
&:hover {
color: @button-primary-color;
@ -209,9 +236,63 @@
&[disabled],
&[disabled]:hover {
color: @button-ghost-color;
color: fade(@white, 40%) !important;
background-color: fade(@white, 40%);
border-color: fade(@button-ghost-color, 40%);
border-color: fade(@white, 40%) !important;
}
}
&-background-ghost&-success:not(.ant-btn-link) {
color: @button-success-color;
background-color: transparent;
border-color: @button-success-color;
border-width: 1px;
&:hover,
&:focus {
color: @button-success-hover-color !important;
border-color: @button-success-hover-color;
}
&:active {
color: @button-success-active-color;
border-color: @button-success-active-color;
}
}
&-background-ghost&-warn:not(.ant-btn-link) {
color: @button-warn-color;
background-color: transparent;
border-color: @button-warn-color;
border-width: 1px;
&:hover,
&:focus {
color: @button-warn-hover-color !important;
border-color: @button-warn-hover-color;
}
&:active {
color: @button-warn-active-color;
border-color: @button-warn-active-color;
}
}
&-background-ghost&-error:not(.ant-btn-link) {
color: @button-error-color;
background-color: transparent;
border-color: @button-error-color;
border-width: 1px;
&:hover,
&:focus {
color: @button-error-hover-color !important;
border-color: @button-error-hover-color;
}
&:active {
color: @button-error-active-color;
border-color: @button-error-active-color;
}
}

12
src/design/color.less
View File

@ -108,20 +108,24 @@ html {
// =================================
@button-primary-color: @primary-color;
@button-primary-hover-color: darken(@primary-color, 5%);
@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-hover-bg-color: #e1ebf6;
@button-success-color: @success-color;
@button-success-hover-color: darken(@success-color, 10%);
@button-success-hover-color: lighten(@success-color, 10%);
@button-success-active-color: darken(@success-color, 10%);
@button-warn-color: @warning-color;
@button-warn-hover-color: darken(@warning-color, 10%);
@button-warn-hover-color: lighten(@warning-color, 10%);
@button-warn-active-color: darken(@warning-color, 10%);
@button-error-color: @error-color;
@button-error-hover-color: darken(@error-color, 10%);
@button-error-hover-color: lighten(@error-color, 10%);
@button-error-active-color: darken(@error-color, 10%);
@button-cancel-color: @text-color-call-out;
@button-cancel-bg-color: @white;

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

@ -40,12 +40,23 @@
<div class="my-2">
<h3>ghost</h3>
<a-button ghost> 幽灵 </a-button>
<a-button ghost class="ml-2" disabled> 禁用 </a-button>
<a-button ghost class="ml-2" loading> loading </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" disabled> disabled link </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="error" class="ml-2"> 幽灵错误 </a-button>
<a-button ghost type="dashed" color="warn" class="ml-2"> 幽灵warn-dashed </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="danger" class="ml-2"> 幽灵危险 </a-button>
</div>
<!-- <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">