Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
zuiqiangwanggong
vue-vben-admin
提交
3ba8a676
V
vue-vben-admin
项目概览
zuiqiangwanggong
/
vue-vben-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
2
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vue-vben-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
3ba8a676
编写于
8月 16, 2021
作者:
无
无木
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix: fixed basicButton ghost style
修正BasicButton幽灵状态的样式
上级
beb4ae92
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
44 addition
and
42 deletion
+44
-42
src/design/ant/btn.less
src/design/ant/btn.less
+38
-37
src/design/color.less
src/design/color.less
+3
-2
src/views/demo/comp/button/index.vue
src/views/demo/comp/button/index.vue
+3
-3
未找到文件。
src/design/ant/btn.less
浏览文件 @
3ba8a676
...
...
@@ -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%);
}
}
...
...
src/design/color.less
浏览文件 @
3ba8a676
...
...
@@ -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%);
...
...
src/views/demo/comp/button/index.vue
浏览文件 @
3ba8a676
...
...
@@ -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=
"da
shed"
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=
"da
nger"
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>-->
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录