feat: button add global size
tangjinzhou
parent
c5e99040b3
commit
16b3b5fc36
|
|
@ -1,7 +1,7 @@
|
|||
export default class UnreachableException {
|
||||
error: Error;
|
||||
|
||||
constructor(value: never) {
|
||||
constructor(value: any) {
|
||||
this.error = new Error(`unreachable case: ${JSON.stringify(value)}`);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -5,6 +5,7 @@ import useConfigInject from '../_util/hooks/useConfigInject';
|
|||
|
||||
import type { ExtractPropTypes, PropType } from 'vue';
|
||||
import type { SizeType } from '../config-provider';
|
||||
import UnreachableException from '../_util/unreachableException';
|
||||
|
||||
const buttonGroupProps = {
|
||||
prefixCls: PropTypes.string,
|
||||
|
|
@ -34,7 +35,8 @@ export default defineComponent({
|
|||
sizeCls = 'sm';
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
// eslint-disable-next-line no-console
|
||||
console.warn(new UnreachableException(size).error);
|
||||
}
|
||||
return {
|
||||
[`${prefixCls.value}`]: true,
|
||||
|
|
|
|||
|
|
@ -23,7 +23,6 @@ type Loading = boolean | number;
|
|||
|
||||
const rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/;
|
||||
const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar);
|
||||
const props = buttonTypes();
|
||||
|
||||
function isUnborderedButtonType(type: ButtonType | undefined) {
|
||||
return type === 'text' || type === 'link';
|
||||
|
|
@ -33,11 +32,11 @@ export default defineComponent({
|
|||
name: 'AButton',
|
||||
inheritAttrs: false,
|
||||
__ANT_BUTTON: true,
|
||||
props,
|
||||
props: buttonTypes(),
|
||||
slots: ['icon'],
|
||||
emits: ['click', 'mousedown'],
|
||||
setup(props, { slots, attrs, emit }) {
|
||||
const { prefixCls, autoInsertSpaceInButton, direction } = useConfigInject('btn', props);
|
||||
const { prefixCls, autoInsertSpaceInButton, direction, size } = useConfigInject('btn', props);
|
||||
|
||||
const buttonNodeRef = ref<HTMLElement>(null);
|
||||
const delayTimeoutRef = ref(undefined);
|
||||
|
|
@ -73,25 +72,17 @@ export default defineComponent({
|
|||
);
|
||||
|
||||
const classes = computed(() => {
|
||||
const { type, shape, size, ghost, block, danger } = props;
|
||||
const { type, shape = 'default', ghost, block, danger } = props;
|
||||
const pre = prefixCls.value;
|
||||
// large => lg
|
||||
// small => sm
|
||||
let sizeCls = '';
|
||||
switch (size) {
|
||||
case 'large':
|
||||
sizeCls = 'lg';
|
||||
break;
|
||||
case 'small':
|
||||
sizeCls = 'sm';
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
const sizeClassNameMap = { large: 'lg', small: 'sm', middle: undefined };
|
||||
const sizeFullname = size.value;
|
||||
const sizeCls = sizeFullname ? sizeClassNameMap[sizeFullname] || '' : '';
|
||||
|
||||
return {
|
||||
[`${pre}`]: true,
|
||||
[`${pre}-${type}`]: type,
|
||||
[`${pre}-${shape}`]: shape,
|
||||
[`${pre}-${shape}`]: shape !== 'default' && shape,
|
||||
[`${pre}-${sizeCls}`]: sizeCls,
|
||||
[`${pre}-loading`]: innerLoading.value,
|
||||
[`${pre}-background-ghost`]: ghost && !isUnborderedButtonType(type),
|
||||
|
|
@ -206,7 +197,11 @@ export default defineComponent({
|
|||
return buttonNode;
|
||||
}
|
||||
|
||||
return <Wave ref="wave">{buttonNode}</Wave>;
|
||||
return (
|
||||
<Wave ref="wave" disabled={!!innerLoading.value}>
|
||||
{buttonNode}
|
||||
</Wave>
|
||||
);
|
||||
};
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import type { SizeType } from '../config-provider';
|
|||
|
||||
const ButtonTypes = tuple('default', 'primary', 'ghost', 'dashed', 'link', 'text');
|
||||
export type ButtonType = typeof ButtonTypes[number];
|
||||
const ButtonShapes = tuple('circle', 'round');
|
||||
const ButtonShapes = tuple('default', 'circle', 'round');
|
||||
export type ButtonShape = typeof ButtonShapes[number];
|
||||
|
||||
const ButtonHTMLTypes = tuple('submit', 'button', 'reset');
|
||||
|
|
|
|||
|
|
@ -21,6 +21,6 @@ title:
|
|||
<a-button type="primary" ghost>Primary</a-button>
|
||||
<a-button ghost>Default</a-button>
|
||||
<a-button type="dashed" ghost>Dashed</a-button>
|
||||
<a-button danger ghost>Danger</a-button>
|
||||
<a-button type="primary" danger ghost>Danger</a-button>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -49,6 +49,52 @@ If you want specific control over the positioning and placement of the `Icon`, t
|
|||
<template #icon><SearchOutlined /></template>
|
||||
Search
|
||||
</a-button>
|
||||
<a-button href="https://www.google.com">
|
||||
<template #icon><SearchOutlined /></template>
|
||||
</a-button>
|
||||
<br />
|
||||
<br />
|
||||
<a-tooltip title="search">
|
||||
<a-button type="primary" shape="circle" size="large">
|
||||
<template #icon><SearchOutlined /></template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-button type="primary" shape="circle" size="large">A</a-button>
|
||||
<a-button type="primary" size="large">
|
||||
<template #icon><SearchOutlined /></template>
|
||||
Search
|
||||
</a-button>
|
||||
<a-tooltip title="search">
|
||||
<a-button shape="circle" size="large">
|
||||
<template #icon><SearchOutlined /></template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-button size="large">
|
||||
<template #icon><SearchOutlined /></template>
|
||||
Search
|
||||
</a-button>
|
||||
<br />
|
||||
<a-tooltip title="search">
|
||||
<a-button shape="circle" size="large">
|
||||
<template #icon><SearchOutlined /></template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-button size="large">
|
||||
<template #icon><SearchOutlined /></template>
|
||||
Search
|
||||
</a-button>
|
||||
<a-tooltip title="search">
|
||||
<a-button type="dashed" shape="circle" size="large">
|
||||
<template #icon><SearchOutlined /></template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-button type="dashed" size="large">
|
||||
<template #icon><SearchOutlined /></template>
|
||||
Search
|
||||
</a-button>
|
||||
<a-button size="large" href="https://www.google.com">
|
||||
<template #icon><SearchOutlined /></template>
|
||||
</a-button>
|
||||
</template>
|
||||
<script>
|
||||
import { SearchOutlined } from '@ant-design/icons-vue';
|
||||
|
|
|
|||
|
|
@ -16,25 +16,34 @@ A loading indicator can be added to a button by setting the `loading` property o
|
|||
</docs>
|
||||
|
||||
<template>
|
||||
<a-button type="primary" loading>Loading</a-button>
|
||||
<a-button type="primary" size="small" loading>Loading</a-button>
|
||||
<br />
|
||||
<a-button type="primary" :loading="loading" @mouseenter="loading = true">mouseenter me!</a-button>
|
||||
<a-button type="primary" icon="poweroff" :loading="iconLoading" @click="enterIconLoading">
|
||||
延迟1s
|
||||
</a-button>
|
||||
<br />
|
||||
<a-button type="primary" loading />
|
||||
<a-button type="primary" shape="circle" loading />
|
||||
<a-button danger shape="round" loading />
|
||||
<a-space style="width: 100%">
|
||||
<a-button type="primary" loading>Loading</a-button>
|
||||
<a-button type="primary" size="small" loading>Loading</a-button>
|
||||
</a-space>
|
||||
<a-space style="width: 100%">
|
||||
<a-button type="primary" :loading="loading" @mouseenter="loading = true">
|
||||
mouseenter me!
|
||||
</a-button>
|
||||
<a-button type="primary" :loading="iconLoading" @click="enterIconLoading">
|
||||
<template #icon><PoweroffOutlined /></template>
|
||||
延迟1s
|
||||
</a-button>
|
||||
</a-space>
|
||||
<a-space style="width: 100%">
|
||||
<a-button type="primary" loading />
|
||||
<a-button type="primary" shape="circle" loading />
|
||||
<a-button danger shape="round" loading />
|
||||
</a-space>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue';
|
||||
import { PoweroffOutlined } from '@ant-design/icons-vue';
|
||||
|
||||
interface DelayLoading {
|
||||
delay: number;
|
||||
}
|
||||
export default defineComponent({
|
||||
components: { PoweroffOutlined },
|
||||
setup() {
|
||||
const iconLoading = ref<boolean | DelayLoading>(false);
|
||||
const enterIconLoading = () => {
|
||||
|
|
|
|||
|
|
@ -46,8 +46,8 @@ If a large or small button is desired, set the `size` property to either `large`
|
|||
<a-button type="primary" shape="round" :size="size">
|
||||
<template #icon>
|
||||
<DownloadOutlined />
|
||||
Download
|
||||
</template>
|
||||
Download
|
||||
</a-button>
|
||||
<a-button type="primary" shape="round" :size="size">
|
||||
<template #icon>
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ Different button styles can be generated by setting Button properties. The recom
|
|||
| htmlType | set the original html `type` of `button`, see: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` | |
|
||||
| icon | set the icon of button, see: Icon component | v-slot | - | |
|
||||
| loading | set the loading status of button | boolean \| { delay: number } | `false` | |
|
||||
| shape | can be set button shape | `circle` \| `round` | - | |
|
||||
| shape | Can be set button shape | `default` \| `circle` \| `round` | 'default' | |
|
||||
| size | set the size of button | `large` \| `middle` \| `small` | `middle` | |
|
||||
| target | same as target attribute of a, works when href is specified | string | - | |
|
||||
| type | can be set button type | `primary` \| `ghost` \| `dashed` \| `link` \| `text` \| `default` | `default` | |
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/fNUKzY1sk/Button.svg
|
|||
- 默认按钮：用于没有主次之分的一组行动点。
|
||||
- 虚线按钮：常用于添加操作。
|
||||
- 文本按钮：用于最次级的行动点。
|
||||
- 链接按钮：用于作为外链的行动点。
|
||||
- 链接按钮：一般用于链接，即导航至某位置。
|
||||
|
||||
以及四种状态属性与上面配合使用。
|
||||
|
||||
|
|
@ -43,7 +43,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/fNUKzY1sk/Button.svg
|
|||
| htmlType | 设置 `button` 原生的 `type` 值，可选值请参考 [HTML 标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` | |
|
||||
| icon | 设置按钮的图标类型 | v-slot | - | |
|
||||
| loading | 设置按钮载入状态 | boolean \| { delay: number } | `false` | |
|
||||
| shape | 设置按钮形状 | `circle` \| `round` | - | |
|
||||
| shape | 设置按钮形状 | `default` \| `circle` \| `round` | 'default' | |
|
||||
| size | 设置按钮大小 | `large` \| `middle` \| `small` | `middle` | |
|
||||
| target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - | |
|
||||
| type | 设置按钮类型 | `primary` \| `ghost` \| `dashed` \| `link` \| `text` \| `default` | `default` | |
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
// Fixing https://github.com/ant-design/ant-design/issues/18107
|
||||
// Fixing https://github.com/ant-design/ant-design/issues/13214
|
||||
// It is a render problem of chrome, which is only happened in the codesandbox demo
|
||||
// 0.001px solution works and I don't why
|
||||
// 0.001px solution works and I don't know why
|
||||
line-height: @btn-line-height;
|
||||
.btn();
|
||||
.btn-default();
|
||||
|
|
@ -101,7 +101,21 @@
|
|||
|
||||
&-icon-only {
|
||||
.btn-square(@btn-prefix-cls);
|
||||
vertical-align: -3px;
|
||||
|
||||
> .@{iconfont-css-prefix} {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/32365
|
||||
a&-icon-only {
|
||||
vertical-align: -1px;
|
||||
|
||||
> .@{iconfont-css-prefix} {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
&-round {
|
||||
|
|
@ -146,48 +160,32 @@
|
|||
|
||||
&&-loading {
|
||||
position: relative;
|
||||
&:not([disabled]) {
|
||||
pointer-events: none;
|
||||
}
|
||||
cursor: default;
|
||||
|
||||
&::before {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&&-loading:not(&-circle):not(&-circle-outline):not(&-icon-only) {
|
||||
padding-left: 29px;
|
||||
.@{iconfont-css-prefix}:not(:last-child) {
|
||||
margin-left: -14px;
|
||||
}
|
||||
}
|
||||
& > &-loading-icon {
|
||||
transition: width 0.3s @ease-in-out, opacity 0.3s @ease-in-out;
|
||||
|
||||
&-sm&-loading:not(&-circle):not(&-circle-outline):not(&-icon-only) {
|
||||
padding-left: 24px;
|
||||
.@{iconfont-css-prefix} {
|
||||
margin-left: -17px;
|
||||
padding-right: @padding-xs;
|
||||
animation: none;
|
||||
// for smooth button padding transition
|
||||
svg {
|
||||
animation: loadingCircle 1s infinite linear;
|
||||
}
|
||||
}
|
||||
|
||||
&:only-child {
|
||||
.@{iconfont-css-prefix} {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// & > &-loading-icon {
|
||||
// transition: all 0.3s @ease-in-out;
|
||||
|
||||
// .@{iconfont-css-prefix} {
|
||||
// padding-right: @padding-xs;
|
||||
// animation: none;
|
||||
// // for smooth button padding transition
|
||||
// svg {
|
||||
// animation: loadingCircle 1s infinite linear;
|
||||
// }
|
||||
// }
|
||||
|
||||
// &:only-child {
|
||||
// .@{iconfont-css-prefix} {
|
||||
// padding-right: 0;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
&-group {
|
||||
.btn-group(@btn-prefix-cls);
|
||||
}
|
||||
|
|
@ -204,26 +202,49 @@
|
|||
margin-left: @margin-xs;
|
||||
}
|
||||
|
||||
&-background-ghost {
|
||||
&&-background-ghost {
|
||||
color: @btn-default-ghost-color;
|
||||
background: @btn-default-ghost-bg !important;
|
||||
border-color: @btn-default-ghost-border;
|
||||
|
||||
&,
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
background: @btn-default-ghost-bg;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @primary-color-hover;
|
||||
border-color: @primary-color-hover;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: @primary-color-active;
|
||||
border-color: @primary-color-active;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
color: @disabled-color;
|
||||
background: @btn-default-ghost-bg;
|
||||
border-color: @btn-default-border;
|
||||
}
|
||||
}
|
||||
|
||||
&-background-ghost&-primary {
|
||||
.button-variant-ghost(@btn-primary-bg);
|
||||
.button-variant-ghost(@btn-primary-bg, @btn-primary-bg, @primary-color-hover, @primary-color-active);
|
||||
}
|
||||
|
||||
&-background-ghost&-danger {
|
||||
.button-variant-ghost(@btn-danger-border);
|
||||
.button-variant-ghost(@btn-danger-border, @btn-danger-border, @error-color-hover, @error-color-active);
|
||||
}
|
||||
|
||||
&-background-ghost&-dangerous {
|
||||
.button-variant-ghost(@btn-danger-border);
|
||||
.button-variant-ghost(@btn-danger-border, @btn-danger-border, @error-color-hover, @error-color-active);
|
||||
}
|
||||
|
||||
&-background-ghost&-dangerous&-link {
|
||||
.button-variant-ghost(@btn-danger-border, transparent);
|
||||
.button-variant-ghost(@btn-danger-border, transparent, @error-color-hover, @error-color-active);
|
||||
}
|
||||
|
||||
&-two-chinese-chars::first-letter {
|
||||
|
|
@ -235,7 +256,7 @@
|
|||
letter-spacing: 0.34em;
|
||||
}
|
||||
|
||||
&&-block {
|
||||
&-block {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -260,6 +281,7 @@ a.@{btn-prefix-cls} {
|
|||
&-lg {
|
||||
line-height: @btn-height-lg - 2px;
|
||||
}
|
||||
|
||||
&-sm {
|
||||
line-height: @btn-height-sm - 2px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,28 @@
|
|||
border-radius: @border-radius;
|
||||
}
|
||||
|
||||
.button-color(@color; @background; @border) {
|
||||
color: @color;
|
||||
border-color: @border; // a inside Button which only work in Chrome
|
||||
& when not(@background = null) {
|
||||
background: @background;
|
||||
}
|
||||
// http://stackoverflow.com/a/17253457
|
||||
> a:only-child {
|
||||
color: currentColor;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: transparent;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-disabled(@color: @btn-disable-color; @background: @btn-disable-bg; @border: @btn-disable-border) {
|
||||
&[disabled] {
|
||||
&,
|
||||
|
|
@ -25,7 +47,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.button-variant-primary(@color; @background) {
|
||||
.button-variant-primary(@color; @background; @backgroundHover: yellow; @backgroundActive: yellow) {
|
||||
.button-color(@color; @background; @background);
|
||||
|
||||
text-shadow: @btn-text-shadow;
|
||||
|
|
@ -38,11 +60,14 @@
|
|||
@color; ~`colorPalette('@{background}', 7) `; ~`colorPalette('@{background}', 7) `
|
||||
);
|
||||
}
|
||||
& when not (@theme = dark) {
|
||||
& when (not (@theme = dark) and not (@theme = variable)) {
|
||||
.button-color(
|
||||
@color; ~`colorPalette('@{background}', 5) `; ~`colorPalette('@{background}', 5) `
|
||||
);
|
||||
}
|
||||
& when (@theme = variable) {
|
||||
.button-color(@color; @backgroundHover; @backgroundHover);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
|
|
@ -51,11 +76,14 @@
|
|||
@color; ~`colorPalette('@{background}', 5) `; ~`colorPalette('@{background}', 5) `
|
||||
);
|
||||
}
|
||||
& when not (@theme = dark) {
|
||||
& when (not (@theme = dark) and not (@theme = variable)) {
|
||||
.button-color(
|
||||
@color; ~`colorPalette('@{background}', 7) `; ~`colorPalette('@{background}', 7) `
|
||||
);
|
||||
}
|
||||
& when (@theme = variable) {
|
||||
.button-color(@color; @backgroundActive; @backgroundActive);
|
||||
}
|
||||
}
|
||||
|
||||
.button-disabled();
|
||||
|
|
@ -69,105 +97,112 @@
|
|||
& when (@theme = dark) {
|
||||
.button-color(@primary-5; @background; @primary-5);
|
||||
}
|
||||
& when not (@theme = dark) {
|
||||
& when (not (@theme = dark) and not (@theme = variable)) {
|
||||
.button-color(
|
||||
~`colorPalette('@{btn-primary-bg}', 5) `; @background;
|
||||
~`colorPalette('@{btn-primary-bg}', 5) `
|
||||
);
|
||||
}
|
||||
& when (@theme = variable) {
|
||||
.button-color(@primary-color-hover; @background; @primary-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
& when (@theme = dark) {
|
||||
.button-color(@primary-7; @background; @primary-7);
|
||||
}
|
||||
& when not (@theme = dark) {
|
||||
& when (not (@theme = dark) and not (@theme = variable)) {
|
||||
.button-color(
|
||||
~`colorPalette('@{btn-primary-bg}', 7) `; @background;
|
||||
~`colorPalette('@{btn-primary-bg}', 7) `
|
||||
);
|
||||
}
|
||||
& when (@theme = variable) {
|
||||
.button-color(@primary-color-active; @background; @primary-color-active);
|
||||
}
|
||||
}
|
||||
.button-disabled();
|
||||
}
|
||||
.button-variant-ghost(@color; @border: @color) {
|
||||
.button-color(@color; transparent; @border);
|
||||
|
||||
.button-variant-ghost(@color; @border; @borderHover: yellow; @borderActive: yellow) {
|
||||
.button-color(@color; null; @border);
|
||||
text-shadow: none;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
& when (@border = transparent) {
|
||||
& when (@theme = dark) {
|
||||
.button-color(~`colorPalette('@{color}', 7) `; transparent; transparent);
|
||||
.button-color(~`colorPalette('@{color}', 7) `; null; transparent);
|
||||
}
|
||||
& when not (@theme = dark) {
|
||||
.button-color(~`colorPalette('@{color}', 5) `; transparent; transparent);
|
||||
& when (not (@theme = dark) and not (@theme = variable)) {
|
||||
.button-color(~`colorPalette('@{color}', 5) `; null; transparent);
|
||||
}
|
||||
& when (@theme = variable) {
|
||||
.button-color(@borderActive; transparent; transparent);
|
||||
}
|
||||
}
|
||||
& when not (@border = transparent) {
|
||||
& when (@theme = dark) {
|
||||
.button-color(
|
||||
~`colorPalette('@{color}', 7) `; transparent; ~`colorPalette('@{color}', 7) `
|
||||
~`colorPalette('@{color}', 7) `; null; ~`colorPalette('@{color}', 7) `
|
||||
);
|
||||
}
|
||||
& when not (@theme = dark) {
|
||||
& when (not (@theme = dark) and not (@theme = variable)) {
|
||||
.button-color(
|
||||
~`colorPalette('@{color}', 5) `; transparent; ~`colorPalette('@{color}', 5) `
|
||||
~`colorPalette('@{color}', 5) `; null; ~`colorPalette('@{color}', 5) `
|
||||
);
|
||||
}
|
||||
& when (@theme = variable) {
|
||||
.button-color(@borderHover; transparent; @borderHover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
& when (@border = transparent) {
|
||||
& when (@theme = dark) {
|
||||
.button-color(~`colorPalette('@{color}', 5) `; transparent; transparent);
|
||||
.button-color(~`colorPalette('@{color}', 5) `; null; transparent);
|
||||
}
|
||||
& when not (@theme = dark) {
|
||||
.button-color(~`colorPalette('@{color}', 7) `; transparent; transparent);
|
||||
& when (not (@theme = dark) and not (@theme = variable)) {
|
||||
.button-color(~`colorPalette('@{color}', 7) `; null; transparent);
|
||||
}
|
||||
& when (@theme = variable) {
|
||||
.button-color(@borderActive; transparent; transparent);
|
||||
}
|
||||
}
|
||||
& when not(@border = transparent) {
|
||||
& when not (@border = transparent) {
|
||||
& when (@theme = dark) {
|
||||
.button-color(
|
||||
~`colorPalette('@{color}', 5) `; transparent; ~`colorPalette('@{color}', 5) `
|
||||
~`colorPalette('@{color}', 5) `; null; ~`colorPalette('@{color}', 5) `
|
||||
);
|
||||
}
|
||||
& when not (@theme = dark) {
|
||||
& when (not (@theme = dark) and not (@theme = variable)) {
|
||||
.button-color(
|
||||
~`colorPalette('@{color}', 7) `; transparent; ~`colorPalette('@{color}', 7) `
|
||||
~`colorPalette('@{color}', 7) `; null; ~`colorPalette('@{color}', 7) `
|
||||
);
|
||||
}
|
||||
& when (@theme = variable) {
|
||||
.button-color(@borderActive; transparent; @borderActive);
|
||||
}
|
||||
}
|
||||
}
|
||||
.button-disabled();
|
||||
}
|
||||
.button-color(@color; @background; @border) {
|
||||
color: @color;
|
||||
background: @background;
|
||||
border-color: @border; // a inside Button which only work in Chrome
|
||||
// http://stackoverflow.com/a/17253457
|
||||
> a:only-child {
|
||||
color: currentColor;
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: transparent;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-group-base(@btnClassName) {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
> .@{btnClassName},
|
||||
> span > .@{btnClassName} {
|
||||
position: relative;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
z-index: 0;
|
||||
}
|
||||
|
|
@ -219,29 +254,36 @@
|
|||
> .@{iconfont-css-prefix} {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
&,
|
||||
&:active,
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&:not([disabled]):hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:not([disabled]):active {
|
||||
outline: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
cursor: not-allowed;
|
||||
|
||||
> * {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-lg {
|
||||
.button-size(
|
||||
@btn-height-lg; @btn-padding-horizontal-lg; @btn-font-size-lg; @btn-border-radius-base
|
||||
);
|
||||
}
|
||||
|
||||
&-sm {
|
||||
.button-size(
|
||||
@btn-height-sm; @btn-padding-horizontal-sm; @btn-font-size-sm; @btn-border-radius-sm
|
||||
|
|
@ -250,11 +292,12 @@
|
|||
}
|
||||
// primary button style
|
||||
.btn-primary() {
|
||||
.button-variant-primary(@btn-primary-color; @btn-primary-bg);
|
||||
.button-variant-primary(@btn-primary-color; @btn-primary-bg; @primary-color-hover; @primary-color-active);
|
||||
}
|
||||
// default button style
|
||||
.btn-default() {
|
||||
.button-variant-other(@btn-default-color; @btn-default-bg; @btn-default-border);
|
||||
.button-variant-other(@btn-default-color; @btn-default-bg; @btn-default-border; );
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
|
@ -273,11 +316,12 @@
|
|||
}
|
||||
// danger button style
|
||||
.btn-danger() {
|
||||
.button-variant-primary(@btn-danger-color, @btn-danger-bg);
|
||||
.button-variant-primary(@btn-danger-color, @btn-danger-bg, @error-color-hover, @error-color-active);
|
||||
}
|
||||
// danger default button style
|
||||
.btn-danger-default() {
|
||||
.button-color(@error-color, @btn-default-bg, @error-color);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
& when (@theme = dark) {
|
||||
|
|
@ -286,13 +330,17 @@
|
|||
`
|
||||
);
|
||||
}
|
||||
& when not (@theme = dark) {
|
||||
& when (not (@theme = dark) and not (@theme = variable)) {
|
||||
.button-color(
|
||||
~`colorPalette('@{error-color}', 5) `; @btn-default-bg; ~`colorPalette('@{error-color}', 5)
|
||||
`
|
||||
);
|
||||
}
|
||||
& when (@theme = variable) {
|
||||
.button-color(@error-color-hover, @btn-default-bg, @error-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
& when (@theme = dark) {
|
||||
.button-color(
|
||||
|
|
@ -300,12 +348,15 @@
|
|||
`
|
||||
);
|
||||
}
|
||||
& when not (@theme = dark) {
|
||||
& when (not (@theme = dark) and not (@theme = variable)) {
|
||||
.button-color(
|
||||
~`colorPalette('@{error-color}', 7) `; @btn-default-bg; ~`colorPalette('@{error-color}', 7)
|
||||
`
|
||||
);
|
||||
}
|
||||
& when (@theme = variable) {
|
||||
.button-color(@error-color-active, @btn-default-bg, @error-color-active);
|
||||
}
|
||||
}
|
||||
.button-disabled();
|
||||
}
|
||||
|
|
@ -313,22 +364,30 @@
|
|||
.btn-danger-link() {
|
||||
.button-variant-other(@error-color, transparent, transparent);
|
||||
box-shadow: none;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
& when (@theme = dark) {
|
||||
.button-color(~`colorPalette('@{error-color}', 7) `; transparent; transparent);
|
||||
}
|
||||
& when not (@theme = dark) {
|
||||
& when (not (@theme = dark) and not (@theme = variable)) {
|
||||
.button-color(~`colorPalette('@{error-color}', 5) `; transparent; transparent);
|
||||
}
|
||||
& when (@theme = variable) {
|
||||
.button-color(@error-color-hover; transparent; transparent);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
& when (@theme = dark) {
|
||||
.button-color(~`colorPalette('@{error-color}', 5) `; transparent; transparent);
|
||||
}
|
||||
& when not (@theme = dark) {
|
||||
& when (not (@theme = dark) and not (@theme = variable)) {
|
||||
.button-color(~`colorPalette('@{error-color}', 7) `; transparent; transparent);
|
||||
}
|
||||
& when (@theme = variable) {
|
||||
.button-color(@error-color-active; transparent; transparent);
|
||||
}
|
||||
}
|
||||
.button-disabled(@disabled-color; transparent; transparent);
|
||||
}
|
||||
|
|
@ -336,9 +395,11 @@
|
|||
.btn-link() {
|
||||
.button-variant-other(@link-color, transparent, transparent);
|
||||
box-shadow: none;
|
||||
|
||||
&:hover {
|
||||
background: @btn-link-hover-bg;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
|
@ -350,6 +411,7 @@
|
|||
.btn-text() {
|
||||
.button-variant-other(@text-color, transparent, transparent);
|
||||
box-shadow: none;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @text-color;
|
||||
|
|
@ -368,23 +430,30 @@
|
|||
.btn-danger-text() {
|
||||
.button-variant-other(@error-color, transparent, transparent);
|
||||
box-shadow: none;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
& when (@theme = dark) {
|
||||
.button-color(~`colorPalette('@{error-color}', 7) `; @btn-text-hover-bg; transparent);
|
||||
}
|
||||
& when not (@theme = dark) {
|
||||
& when (not (@theme = dark) and not (@theme = variable)) {
|
||||
.button-color(~`colorPalette('@{error-color}', 5) `; @btn-text-hover-bg; transparent);
|
||||
}
|
||||
& when (@theme = variable) {
|
||||
.button-color(@error-color-hover; @btn-text-hover-bg; transparent);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
& when (@theme = dark) {
|
||||
.button-color(~`colorPalette('@{error-color}', 5) `; fadein(@btn-text-hover-bg, 1%); transparent);
|
||||
}
|
||||
& when not (@theme = dark) {
|
||||
& when (not (@theme = dark) and not (@theme = variable)) {
|
||||
.button-color(~`colorPalette('@{error-color}', 7) `; fadein(@btn-text-hover-bg, 1%); transparent);
|
||||
}
|
||||
& when (@theme = variable) {
|
||||
.button-color(@error-color-active; fadein(@btn-text-hover-bg, 1%); transparent);
|
||||
}
|
||||
}
|
||||
.button-disabled(@disabled-color; transparent; transparent);
|
||||
}
|
||||
|
|
@ -406,12 +475,14 @@
|
|||
.btn-square(@btnClassName: btn) {
|
||||
.square(@btn-square-size);
|
||||
.button-size(@btn-square-size; 0; @btn-square-only-icon-size; @btn-border-radius-base);
|
||||
|
||||
& > * {
|
||||
font-size: @btn-square-only-icon-size;
|
||||
}
|
||||
&.@{btnClassName}-lg {
|
||||
.square(@btn-square-size-lg);
|
||||
.button-size(@btn-square-size-lg; 0; @btn-square-only-icon-size-lg; @btn-border-radius-base);
|
||||
|
||||
& > * {
|
||||
font-size: @btn-square-only-icon-size-lg;
|
||||
}
|
||||
|
|
@ -419,6 +490,7 @@
|
|||
&.@{btnClassName}-sm {
|
||||
.square(@btn-square-size-sm);
|
||||
.button-size(@btn-square-size-sm; 0; @btn-square-only-icon-size-sm; @btn-border-radius-base);
|
||||
|
||||
& > * {
|
||||
font-size: @btn-square-only-icon-size-sm;
|
||||
}
|
||||
|
|
@ -479,6 +551,7 @@
|
|||
border-top-right-radius: @btn-border-radius-base;
|
||||
border-bottom-right-radius: @btn-border-radius-base;
|
||||
}
|
||||
|
||||
&-sm {
|
||||
> .@{btnClassName}:only-child {
|
||||
border-radius: @btn-border-radius-sm;
|
||||
|
|
@ -497,12 +570,14 @@
|
|||
border-bottom-right-radius: @btn-border-radius-sm;
|
||||
}
|
||||
}
|
||||
|
||||
& > & {
|
||||
float: left;
|
||||
}
|
||||
& > &:not(:first-child):not(:last-child) > .@{btnClassName} {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
& > &:first-child:not(:last-child) {
|
||||
> .@{btnClassName}:last-child {
|
||||
padding-right: 8px;
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
border-right-color: @btn-group-border;
|
||||
border-left-color: @btn-default-border;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
.@{btn-prefix-cls}-group-rtl& {
|
||||
border-right-color: @btn-default-border;
|
||||
|
|
@ -67,20 +68,14 @@
|
|||
> .@{btnClassName}:first-child:not(:last-child),
|
||||
> span:first-child:not(:last-child) > .@{btnClassName} {
|
||||
.@{btnClassName}-group-rtl& {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: @btn-border-radius-base;
|
||||
border-bottom-right-radius: @btn-border-radius-base;
|
||||
border-bottom-left-radius: 0;
|
||||
border-radius: 0 @btn-border-radius-base @btn-border-radius-base 0;
|
||||
}
|
||||
}
|
||||
|
||||
> .@{btnClassName}:last-child:not(:first-child),
|
||||
> span:last-child:not(:first-child) > .@{btnClassName} {
|
||||
.@{btnClassName}-group-rtl& {
|
||||
border-top-left-radius: @btn-border-radius-base;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: @btn-border-radius-base;
|
||||
border-radius: @btn-border-radius-base 0 0 @btn-border-radius-base;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -88,20 +83,14 @@
|
|||
> .@{btnClassName}:first-child:not(:last-child),
|
||||
> span:first-child:not(:last-child) > .@{btnClassName} {
|
||||
.@{btnClassName}-group-rtl& {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: @btn-border-radius-sm;
|
||||
border-bottom-right-radius: @btn-border-radius-sm;
|
||||
border-bottom-left-radius: 0;
|
||||
border-radius: 0 @btn-border-radius-sm @btn-border-radius-sm 0;
|
||||
}
|
||||
}
|
||||
|
||||
> .@{btnClassName}:last-child:not(:first-child),
|
||||
> span:last-child:not(:first-child) > .@{btnClassName} {
|
||||
.@{btnClassName}-group-rtl& {
|
||||
border-top-left-radius: @btn-border-radius-sm;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: @btn-border-radius-sm;
|
||||
border-radius: @btn-border-radius-sm 0 0 @btn-border-radius-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue