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

fix: fixed basicButton style 

修正BasicButton的样式
pull/1082/head
无木 5 years ago
parent
cc46935a82
commit
beb4ae92c1
4 changed files with 127 additions and 30 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. 1
      CHANGELOG.zh_CN.md
  2. 121
      src/design/ant/btn.less
  3. 12
      src/design/color.less
  4. 23
      src/views/demo/comp/button/index.vue

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

Write Preview
Loading…
Cancel
Save