vue-antd-ui
Version:
An enterprise-class UI design language and Vue-based implementation
1,057 lines (1,056 loc) • 29.4 kB
CSS
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
/* stylelint-disable no-duplicate-selectors */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors */
.ant-btn {
line-height: 1.5;
display: inline-block;
font-weight: 400;
text-align: center;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 0 15px;
font-size: 14px;
border-radius: 4px;
height: 32px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
position: relative;
color: rgba(0, 0, 0, 0.65);
background-color: #fff;
border-color: #d9d9d9;
}
.ant-btn > .anticon {
line-height: 1;
}
.ant-btn,
.ant-btn:active,
.ant-btn:focus {
outline: 0;
}
.ant-btn:not([disabled]):hover {
text-decoration: none;
}
.ant-btn:not([disabled]):active {
outline: 0;
-webkit-transition: none;
transition: none;
}
.ant-btn.disabled,
.ant-btn[disabled] {
cursor: not-allowed;
}
.ant-btn.disabled > *,
.ant-btn[disabled] > * {
pointer-events: none;
}
.ant-btn-lg {
padding: 0 15px;
font-size: 16px;
border-radius: 4px;
height: 40px;
}
.ant-btn-sm {
padding: 0 7px;
font-size: 14px;
border-radius: 4px;
height: 24px;
}
.ant-btn > a:only-child {
color: currentColor;
}
.ant-btn > a:only-child:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: transparent;
}
.ant-btn:hover,
.ant-btn:focus {
color: #40a9ff;
background-color: #fff;
border-color: #40a9ff;
}
.ant-btn:hover > a:only-child,
.ant-btn:focus > a:only-child {
color: currentColor;
}
.ant-btn:hover > a:only-child:after,
.ant-btn:focus > a:only-child:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: transparent;
}
.ant-btn:active,
.ant-btn.active {
color: #096dd9;
background-color: #fff;
border-color: #096dd9;
}
.ant-btn:active > a:only-child,
.ant-btn.active > a:only-child {
color: currentColor;
}
.ant-btn:active > a:only-child:after,
.ant-btn.active > a:only-child:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: transparent;
}
.ant-btn.disabled,
.ant-btn[disabled],
.ant-btn.disabled:hover,
.ant-btn[disabled]:hover,
.ant-btn.disabled:focus,
.ant-btn[disabled]:focus,
.ant-btn.disabled:active,
.ant-btn[disabled]:active,
.ant-btn.disabled.active,
.ant-btn[disabled].active {
color: rgba(0, 0, 0, 0.25);
background-color: #f5f5f5;
border-color: #d9d9d9;
}
.ant-btn.disabled > a:only-child,
.ant-btn[disabled] > a:only-child,
.ant-btn.disabled:hover > a:only-child,
.ant-btn[disabled]:hover > a:only-child,
.ant-btn.disabled:focus > a:only-child,
.ant-btn[disabled]:focus > a:only-child,
.ant-btn.disabled:active > a:only-child,
.ant-btn[disabled]:active > a:only-child,
.ant-btn.disabled.active > a:only-child,
.ant-btn[disabled].active > a:only-child {
color: currentColor;
}
.ant-btn.disabled > a:only-child:after,
.ant-btn[disabled] > a:only-child:after,
.ant-btn.disabled:hover > a:only-child:after,
.ant-btn[disabled]:hover > a:only-child:after,
.ant-btn.disabled:focus > a:only-child:after,
.ant-btn[disabled]:focus > a:only-child:after,
.ant-btn.disabled:active > a:only-child:after,
.ant-btn[disabled]:active > a:only-child:after,
.ant-btn.disabled.active > a:only-child:after,
.ant-btn[disabled].active > a:only-child:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: transparent;
}
.ant-btn:hover,
.ant-btn:focus,
.ant-btn:active,
.ant-btn.active {
background: #fff;
text-decoration: none;
}
.ant-btn > i,
.ant-btn > span {
pointer-events: none;
}
.ant-btn-primary {
color: #fff;
background-color: #1890ff;
border-color: #1890ff;
}
.ant-btn-primary > a:only-child {
color: currentColor;
}
.ant-btn-primary > a:only-child:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: transparent;
}
.ant-btn-primary:hover,
.ant-btn-primary:focus {
color: #fff;
background-color: #40a9ff;
border-color: #40a9ff;
}
.ant-btn-primary:hover > a:only-child,
.ant-btn-primary:focus > a:only-child {
color: currentColor;
}
.ant-btn-primary:hover > a:only-child:after,
.ant-btn-primary:focus > a:only-child:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: transparent;
}
.ant-btn-primary:active,
.ant-btn-primary.active {
color: #fff;
background-color: #096dd9;
border-color: #096dd9;
}
.ant-btn-primary:active > a:only-child,
.ant-btn-primary.active > a:only-child {
color: currentColor;
}
.ant-btn-primary:active > a:only-child:after,
.ant-btn-primary.active > a:only-child:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: transparent;
}
.ant-btn-primary.disabled,
.ant-btn-primary[disabled],
.ant-btn-primary.disabled:hover,
.ant-btn-primary[disabled]:hover,
.ant-btn-primary.disabled:focus,
.ant-btn-primary[disabled]:focus,
.ant-btn-primary.disabled:active,
.ant-btn-primary[disabled]:active,
.ant-btn-primary.disabled.active,
.ant-btn-primary[disabled].active {
color: rgba(0, 0, 0, 0.25);
background-color: #f5f5f5;
border-color: #d9d9d9;
}
.ant-btn-primary.disabled > a:only-child,
.ant-btn-primary[disabled] > a:only-child,
.ant-btn-primary.disabled:hover > a:only-child,
.ant-btn-primary[disabled]:hover > a:only-child,
.ant-btn-primary.disabled:focus > a:only-child,
.ant-btn-primary[disabled]:focus > a:only-child,
.ant-btn-primary.disabled:active > a:only-child,
.ant-btn-primary[disabled]:active > a:only-child,
.ant-btn-primary.disabled.active > a:only-child,
.ant-btn-primary[disabled].active > a:only-child {
color: currentColor;
}
.ant-btn-primary.disabled > a:only-child:after,
.ant-btn-primary[disabled] > a:only-child:after,
.ant-btn-primary.disabled:hover > a:only-child:after,
.ant-btn-primary[disabled]:hover > a:only-child:after,
.ant-btn-primary.disabled:focus > a:only-child:after,
.ant-btn-primary[disabled]:focus > a:only-child:after,
.ant-btn-primary.disabled:active > a:only-child:after,
.ant-btn-primary[disabled]:active > a:only-child:after,
.ant-btn-primary.disabled.active > a:only-child:after,
.ant-btn-primary[disabled].active > a:only-child:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: transparent;
}
.ant-btn-group .ant-btn-primary:not(:first-child):not(:last-child) {
border-right-color: #40a9ff;
border-left-color: #40a9ff;
}
.ant-btn-group .ant-btn-primary:not(:first-child):not(:last-child):disabled {
border-color: #d9d9d9;
}
.ant-btn-group .ant-btn-primary:first-child:not(:last-child) {
border-right-color: #40a9ff;
}
.ant-btn-group .ant-btn-primary:first-child:not(:last-child)[disabled] {
border-right-color: #d9d9d9;
}
.ant-btn-group .ant-btn-primary:last-child:not(:first-child),
.ant-btn-group .ant-btn-primary + .ant-btn-primary {
border-left-color: #40a9ff;
}
.ant-btn-group .ant-btn-primary:last-child:not(:first-child)[disabled],
.ant-btn-group .ant-btn-primary + .ant-btn-primary[disabled] {
border-left-color: #d9d9d9;
}
.ant-btn-ghost {
color: rgba(0, 0, 0, 0.65);
background-color: transparent;
border-color: #d9d9d9;
}
.ant-btn-ghost > a:only-child {
color: currentColor;
}
.ant-btn-ghost > a:only-child:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: transparent;
}
.ant-btn-ghost:hover,
.ant-btn-ghost:focus {
color: #40a9ff;
background-color: transparent;
border-color: #40a9ff;
}
.ant-btn-ghost:hover > a:only-child,
.ant-btn-ghost:focus > a:only-child {
color: currentColor;
}
.ant-btn-ghost:hover > a:only-child:after,
.ant-btn-ghost:focus > a:only-child:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: transparent;
}
.ant-btn-ghost:active,
.ant-btn-ghost.active {
color: #096dd9;
background-color: transparent;
border-color: #096dd9;
}
.ant-btn-ghost:active > a:only-child,
.ant-btn-ghost.active > a:only-child {
color: currentColor;
}
.ant-btn-ghost:active > a:only-child:after,
.ant-btn-ghost.active > a:only-child:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: transparent;
}
.ant-btn-ghost.disabled,
.ant-btn-ghost[disabled],
.ant-btn-ghost.disabled:hover,
.ant-btn-ghost[disabled]:hover,
.ant-btn-ghost.disabled:focus,
.ant-btn-ghost[disabled]:focus,
.ant-btn-ghost.disabled:active,
.ant-btn-ghost[disabled]:active,
.ant-btn-ghost.disabled.active,
.ant-btn-ghost[disabled].active {
color: rgba(0, 0, 0, 0.25);
background-color: #f5f5f5;
border-color: #d9d9d9;
}
.ant-btn-ghost.disabled > a:only-child,
.ant-btn-ghost[disabled] > a:only-child,
.ant-btn-ghost.disabled:hover > a:only-child,
.ant-btn-ghost[disabled]:hover > a:only-child,
.ant-btn-ghost.disabled:focus > a:only-child,
.ant-btn-ghost[disabled]:focus > a:only-child,
.ant-btn-ghost.disabled:active > a:only-child,
.ant-btn-ghost[disabled]:active > a:only-child,
.ant-btn-ghost.disabled.active > a:only-child,
.ant-btn-ghost[disabled].active > a:only-child {
color: currentColor;
}
.ant-btn-ghost.disabled > a:only-child:after,
.ant-btn-ghost[disabled] > a:only-child:after,
.ant-btn-ghost.disabled:hover > a:only-child:after,
.ant-btn-ghost[disabled]:hover > a:only-child:after,
.ant-btn-ghost.disabled:focus > a:only-child:after,
.ant-btn-ghost[disabled]:focus > a:only-child:after,
.ant-btn-ghost.disabled:active > a:only-child:after,
.ant-btn-ghost[disabled]:active > a:only-child:after,
.ant-btn-ghost.disabled.active > a:only-child:after,
.ant-btn-ghost[disabled].active > a:only-child:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: transparent;
}
.ant-btn-dashed {
color: rgba(0, 0, 0, 0.65);
background-color: #fff;
border-color: #d9d9d9;
border-style: dashed;
}
.ant-btn-dashed > a:only-child {
color: currentColor;
}
.ant-btn-dashed > a:only-child:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: transparent;
}
.ant-btn-dashed:hover,
.ant-btn-dashed:focus {
color: #40a9ff;
background-color: #fff;
border-color: #40a9ff;
}
.ant-btn-dashed:hover > a:only-child,
.ant-btn-dashed:focus > a:only-child {
color: currentColor;
}
.ant-btn-dashed:hover > a:only-child:after,
.ant-btn-dashed:focus > a:only-child:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: transparent;
}
.ant-btn-dashed:active,
.ant-btn-dashed.active {
color: #096dd9;
background-color: #fff;
border-color: #096dd9;
}
.ant-btn-dashed:active > a:only-child,
.ant-btn-dashed.active > a:only-child {
color: currentColor;
}
.ant-btn-dashed:active > a:only-child:after,
.ant-btn-dashed.active > a:only-child:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: transparent;
}
.ant-btn-dashed.disabled,
.ant-btn-dashed[disabled],
.ant-btn-dashed.disabled:hover,
.ant-btn-dashed[disabled]:hover,
.ant-btn-dashed.disabled:focus,
.ant-btn-dashed[disabled]:focus,
.ant-btn-dashed.disabled:active,
.ant-btn-dashed[disabled]:active,
.ant-btn-dashed.disabled.active,
.ant-btn-dashed[disabled].active {
color: rgba(0, 0, 0, 0.25);
background-color: #f5f5f5;
border-color: #d9d9d9;
}
.ant-btn-dashed.disabled > a:only-child,
.ant-btn-dashed[disabled] > a:only-child,
.ant-btn-dashed.disabled:hover > a:only-child,
.ant-btn-dashed[disabled]:hover > a:only-child,
.ant-btn-dashed.disabled:focus > a:only-child,
.ant-btn-dashed[disabled]:focus > a:only-child,
.ant-btn-dashed.disabled:active > a:only-child,
.ant-btn-dashed[disabled]:active > a:only-child,
.ant-btn-dashed.disabled.active > a:only-child,
.ant-btn-dashed[disabled].active > a:only-child {
color: currentColor;
}
.ant-btn-dashed.disabled > a:only-child:after,
.ant-btn-dashed[disabled] > a:only-child:after,
.ant-btn-dashed.disabled:hover > a:only-child:after,
.ant-btn-dashed[disabled]:hover > a:only-child:after,
.ant-btn-dashed.disabled:focus > a:only-child:after,
.ant-btn-dashed[disabled]:focus > a:only-child:after,
.ant-btn-dashed.disabled:active > a:only-child:after,
.ant-btn-dashed[disabled]:active > a:only-child:after,
.ant-btn-dashed.disabled.active > a:only-child:after,
.ant-btn-dashed[disabled].active > a:only-child:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: transparent;
}
.ant-btn-danger {
color: #f5222d;
background-color: #f5f5f5;
border-color: #d9d9d9;
}
.ant-btn-danger > a:only-child {
color: currentColor;
}
.ant-btn-danger > a:only-child:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: transparent;
}
.ant-btn-danger:hover {
color: #fff;
background-color: #ff4d4f;
border-color: #ff4d4f;
}
.ant-btn-danger:hover > a:only-child {
color: currentColor;
}
.ant-btn-danger:hover > a:only-child:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: transparent;
}
.ant-btn-danger:focus {
color: #ff4d4f;
background-color: #fff;
border-color: #ff4d4f;
}
.ant-btn-danger:focus > a:only-child {
color: currentColor;
}
.ant-btn-danger:focus > a:only-child:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: transparent;
}
.ant-btn-danger:active,
.ant-btn-danger.active {
color: #fff;
background-color: #cf1322;
border-color: #cf1322;
}
.ant-btn-danger:active > a:only-child,
.ant-btn-danger.active > a:only-child {
color: currentColor;
}
.ant-btn-danger:active > a:only-child:after,
.ant-btn-danger.active > a:only-child:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: transparent;
}
.ant-btn-danger.disabled,
.ant-btn-danger[disabled],
.ant-btn-danger.disabled:hover,
.ant-btn-danger[disabled]:hover,
.ant-btn-danger.disabled:focus,
.ant-btn-danger[disabled]:focus,
.ant-btn-danger.disabled:active,
.ant-btn-danger[disabled]:active,
.ant-btn-danger.disabled.active,
.ant-btn-danger[disabled].active {
color: rgba(0, 0, 0, 0.25);
background-color: #f5f5f5;
border-color: #d9d9d9;
}
.ant-btn-danger.disabled > a:only-child,
.ant-btn-danger[disabled] > a:only-child,
.ant-btn-danger.disabled:hover > a:only-child,
.ant-btn-danger[disabled]:hover > a:only-child,
.ant-btn-danger.disabled:focus > a:only-child,
.ant-btn-danger[disabled]:focus > a:only-child,
.ant-btn-danger.disabled:active > a:only-child,
.ant-btn-danger[disabled]:active > a:only-child,
.ant-btn-danger.disabled.active > a:only-child,
.ant-btn-danger[disabled].active > a:only-child {
color: currentColor;
}
.ant-btn-danger.disabled > a:only-child:after,
.ant-btn-danger[disabled] > a:only-child:after,
.ant-btn-danger.disabled:hover > a:only-child:after,
.ant-btn-danger[disabled]:hover > a:only-child:after,
.ant-btn-danger.disabled:focus > a:only-child:after,
.ant-btn-danger[disabled]:focus > a:only-child:after,
.ant-btn-danger.disabled:active > a:only-child:after,
.ant-btn-danger[disabled]:active > a:only-child:after,
.ant-btn-danger.disabled.active > a:only-child:after,
.ant-btn-danger[disabled].active > a:only-child:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: transparent;
}
.ant-btn-circle,
.ant-btn-circle-outline {
width: 32px;
padding: 0;
font-size: 16px;
border-radius: 50%;
height: 32px;
}
.ant-btn-circle.ant-btn-lg,
.ant-btn-circle-outline.ant-btn-lg {
width: 40px;
padding: 0;
font-size: 18px;
border-radius: 50%;
height: 40px;
}
.ant-btn-circle.ant-btn-sm,
.ant-btn-circle-outline.ant-btn-sm {
width: 24px;
padding: 0;
font-size: 14px;
border-radius: 50%;
height: 24px;
}
.ant-btn:before {
position: absolute;
top: -1px;
left: -1px;
bottom: -1px;
right: -1px;
background: #fff;
opacity: 0.35;
content: '';
border-radius: inherit;
z-index: 1;
-webkit-transition: opacity .2s;
transition: opacity .2s;
pointer-events: none;
display: none;
}
.ant-btn .anticon {
-webkit-transition: margin-left 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: margin-left 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.ant-btn.ant-btn-loading:before {
display: block;
}
.ant-btn.ant-btn-loading:not(.ant-btn-circle):not(.ant-btn-circle-outline):not(.ant-btn-icon-only) {
padding-left: 29px;
pointer-events: none;
position: relative;
}
.ant-btn.ant-btn-loading:not(.ant-btn-circle):not(.ant-btn-circle-outline):not(.ant-btn-icon-only) .anticon {
margin-left: -14px;
}
.ant-btn-sm.ant-btn-loading:not(.ant-btn-circle):not(.ant-btn-circle-outline):not(.ant-btn-icon-only) {
padding-left: 24px;
}
.ant-btn-sm.ant-btn-loading:not(.ant-btn-circle):not(.ant-btn-circle-outline):not(.ant-btn-icon-only) .anticon {
margin-left: -17px;
}
.ant-btn-group {
position: relative;
display: inline-block;
}
.ant-btn-group > .ant-btn,
.ant-btn-group > span > .ant-btn {
position: relative;
line-height: 30px;
}
.ant-btn-group > .ant-btn:hover,
.ant-btn-group > span > .ant-btn:hover,
.ant-btn-group > .ant-btn:focus,
.ant-btn-group > span > .ant-btn:focus,
.ant-btn-group > .ant-btn:active,
.ant-btn-group > span > .ant-btn:active,
.ant-btn-group > .ant-btn.active,
.ant-btn-group > span > .ant-btn.active {
z-index: 2;
}
.ant-btn-group > .ant-btn:disabled,
.ant-btn-group > span > .ant-btn:disabled {
z-index: 0;
}
.ant-btn-group-lg > .ant-btn,
.ant-btn-group-lg > span > .ant-btn {
padding: 0 15px;
font-size: 16px;
border-radius: 0;
height: 40px;
line-height: 38px;
}
.ant-btn-group-sm > .ant-btn,
.ant-btn-group-sm > span > .ant-btn {
padding: 0 7px;
font-size: 14px;
border-radius: 0;
height: 24px;
line-height: 22px;
}
.ant-btn-group-sm > .ant-btn > .anticon,
.ant-btn-group-sm > span > .ant-btn > .anticon {
font-size: 14px;
}
.ant-btn-group .ant-btn + .ant-btn,
.ant-btn + .ant-btn-group,
.ant-btn-group span + .ant-btn,
.ant-btn-group .ant-btn + span,
.ant-btn-group > span + span,
.ant-btn-group + .ant-btn,
.ant-btn-group + .ant-btn-group {
margin-left: -1px;
}
.ant-btn-group .ant-btn-primary + .ant-btn:not(.ant-btn-primary):not([disabled]) {
border-left-color: transparent;
}
.ant-btn-group .ant-btn {
border-radius: 0;
}
.ant-btn-group > .ant-btn:first-child,
.ant-btn-group > span:first-child > .ant-btn {
margin-left: 0;
}
.ant-btn-group > .ant-btn:only-child {
border-radius: 4px;
}
.ant-btn-group > span:only-child > .ant-btn {
border-radius: 4px;
}
.ant-btn-group > .ant-btn:first-child:not(:last-child),
.ant-btn-group > span:first-child:not(:last-child) > .ant-btn {
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
}
.ant-btn-group > .ant-btn:last-child:not(:first-child),
.ant-btn-group > span:last-child:not(:first-child) > .ant-btn {
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
}
.ant-btn-group-sm > .ant-btn:only-child {
border-radius: 4px;
}
.ant-btn-group-sm > span:only-child > .ant-btn {
border-radius: 4px;
}
.ant-btn-group-sm > .ant-btn:first-child:not(:last-child),
.ant-btn-group-sm > span:first-child:not(:last-child) > .ant-btn {
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
}
.ant-btn-group-sm > .ant-btn:last-child:not(:first-child),
.ant-btn-group-sm > span:last-child:not(:first-child) > .ant-btn {
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
}
.ant-btn-group > .ant-btn-group {
float: left;
}
.ant-btn-group > .ant-btn-group:not(:first-child):not(:last-child) > .ant-btn {
border-radius: 0;
}
.ant-btn-group > .ant-btn-group:first-child:not(:last-child) > .ant-btn:last-child {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
padding-right: 8px;
}
.ant-btn-group > .ant-btn-group:last-child:not(:first-child) > .ant-btn:first-child {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
padding-left: 8px;
}
.ant-btn:not(.ant-btn-circle):not(.ant-btn-circle-outline).ant-btn-icon-only {
padding-left: 8px;
padding-right: 8px;
}
.ant-btn:focus > span,
.ant-btn:active > span {
position: relative;
}
.ant-btn > .anticon + span,
.ant-btn > span + .anticon {
margin-left: 8px;
}
.ant-btn-clicked:after {
content: '';
position: absolute;
top: -1px;
left: -1px;
bottom: -1px;
right: -1px;
border-radius: inherit;
border: 0 solid #1890ff;
opacity: 0.4;
-webkit-animation: buttonEffect .4s;
animation: buttonEffect .4s;
display: block;
}
.ant-btn-danger.ant-btn-clicked:after {
border-color: #f5222d;
}
.ant-btn-background-ghost {
background: transparent ;
border-color: #fff;
color: #fff;
}
.ant-btn-background-ghost.ant-btn-primary {
color: #1890ff;
background-color: transparent;
border-color: #1890ff;
}
.ant-btn-background-ghost.ant-btn-primary > a:only-child {
color: currentColor;
}
.ant-btn-background-ghost.ant-btn-primary > a:only-child:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: transparent;
}
.ant-btn-background-ghost.ant-btn-primary:hover,
.ant-btn-background-ghost.ant-btn-primary:focus {
color: #40a9ff;
background-color: transparent;
border-color: #40a9ff;
}
.ant-btn-background-ghost.ant-btn-primary:hover > a:only-child,
.ant-btn-background-ghost.ant-btn-primary:focus > a:only-child {
color: currentColor;
}
.ant-btn-background-ghost.ant-btn-primary:hover > a:only-child:after,
.ant-btn-background-ghost.ant-btn-primary:focus > a:only-child:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: transparent;
}
.ant-btn-background-ghost.ant-btn-primary:active,
.ant-btn-background-ghost.ant-btn-primary.active {
color: #096dd9;
background-color: transparent;
border-color: #096dd9;
}
.ant-btn-background-ghost.ant-btn-primary:active > a:only-child,
.ant-btn-background-ghost.ant-btn-primary.active > a:only-child {
color: currentColor;
}
.ant-btn-background-ghost.ant-btn-primary:active > a:only-child:after,
.ant-btn-background-ghost.ant-btn-primary.active > a:only-child:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: transparent;
}
.ant-btn-background-ghost.ant-btn-primary.disabled,
.ant-btn-background-ghost.ant-btn-primary[disabled],
.ant-btn-background-ghost.ant-btn-primary.disabled:hover,
.ant-btn-background-ghost.ant-btn-primary[disabled]:hover,
.ant-btn-background-ghost.ant-btn-primary.disabled:focus,
.ant-btn-background-ghost.ant-btn-primary[disabled]:focus,
.ant-btn-background-ghost.ant-btn-primary.disabled:active,
.ant-btn-background-ghost.ant-btn-primary[disabled]:active,
.ant-btn-background-ghost.ant-btn-primary.disabled.active,
.ant-btn-background-ghost.ant-btn-primary[disabled].active {
color: rgba(0, 0, 0, 0.25);
background-color: #f5f5f5;
border-color: #d9d9d9;
}
.ant-btn-background-ghost.ant-btn-primary.disabled > a:only-child,
.ant-btn-background-ghost.ant-btn-primary[disabled] > a:only-child,
.ant-btn-background-ghost.ant-btn-primary.disabled:hover > a:only-child,
.ant-btn-background-ghost.ant-btn-primary[disabled]:hover > a:only-child,
.ant-btn-background-ghost.ant-btn-primary.disabled:focus > a:only-child,
.ant-btn-background-ghost.ant-btn-primary[disabled]:focus > a:only-child,
.ant-btn-background-ghost.ant-btn-primary.disabled:active > a:only-child,
.ant-btn-background-ghost.ant-btn-primary[disabled]:active > a:only-child,
.ant-btn-background-ghost.ant-btn-primary.disabled.active > a:only-child,
.ant-btn-background-ghost.ant-btn-primary[disabled].active > a:only-child {
color: currentColor;
}
.ant-btn-background-ghost.ant-btn-primary.disabled > a:only-child:after,
.ant-btn-background-ghost.ant-btn-primary[disabled] > a:only-child:after,
.ant-btn-background-ghost.ant-btn-primary.disabled:hover > a:only-child:after,
.ant-btn-background-ghost.ant-btn-primary[disabled]:hover > a:only-child:after,
.ant-btn-background-ghost.ant-btn-primary.disabled:focus > a:only-child:after,
.ant-btn-background-ghost.ant-btn-primary[disabled]:focus > a:only-child:after,
.ant-btn-background-ghost.ant-btn-primary.disabled:active > a:only-child:after,
.ant-btn-background-ghost.ant-btn-primary[disabled]:active > a:only-child:after,
.ant-btn-background-ghost.ant-btn-primary.disabled.active > a:only-child:after,
.ant-btn-background-ghost.ant-btn-primary[disabled].active > a:only-child:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: transparent;
}
.ant-btn-background-ghost.ant-btn-danger {
color: #f5222d;
background-color: transparent;
border-color: #f5222d;
}
.ant-btn-background-ghost.ant-btn-danger > a:only-child {
color: currentColor;
}
.ant-btn-background-ghost.ant-btn-danger > a:only-child:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: transparent;
}
.ant-btn-background-ghost.ant-btn-danger:hover,
.ant-btn-background-ghost.ant-btn-danger:focus {
color: #ff4d4f;
background-color: transparent;
border-color: #ff4d4f;
}
.ant-btn-background-ghost.ant-btn-danger:hover > a:only-child,
.ant-btn-background-ghost.ant-btn-danger:focus > a:only-child {
color: currentColor;
}
.ant-btn-background-ghost.ant-btn-danger:hover > a:only-child:after,
.ant-btn-background-ghost.ant-btn-danger:focus > a:only-child:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: transparent;
}
.ant-btn-background-ghost.ant-btn-danger:active,
.ant-btn-background-ghost.ant-btn-danger.active {
color: #cf1322;
background-color: transparent;
border-color: #cf1322;
}
.ant-btn-background-ghost.ant-btn-danger:active > a:only-child,
.ant-btn-background-ghost.ant-btn-danger.active > a:only-child {
color: currentColor;
}
.ant-btn-background-ghost.ant-btn-danger:active > a:only-child:after,
.ant-btn-background-ghost.ant-btn-danger.active > a:only-child:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: transparent;
}
.ant-btn-background-ghost.ant-btn-danger.disabled,
.ant-btn-background-ghost.ant-btn-danger[disabled],
.ant-btn-background-ghost.ant-btn-danger.disabled:hover,
.ant-btn-background-ghost.ant-btn-danger[disabled]:hover,
.ant-btn-background-ghost.ant-btn-danger.disabled:focus,
.ant-btn-background-ghost.ant-btn-danger[disabled]:focus,
.ant-btn-background-ghost.ant-btn-danger.disabled:active,
.ant-btn-background-ghost.ant-btn-danger[disabled]:active,
.ant-btn-background-ghost.ant-btn-danger.disabled.active,
.ant-btn-background-ghost.ant-btn-danger[disabled].active {
color: rgba(0, 0, 0, 0.25);
background-color: #f5f5f5;
border-color: #d9d9d9;
}
.ant-btn-background-ghost.ant-btn-danger.disabled > a:only-child,
.ant-btn-background-ghost.ant-btn-danger[disabled] > a:only-child,
.ant-btn-background-ghost.ant-btn-danger.disabled:hover > a:only-child,
.ant-btn-background-ghost.ant-btn-danger[disabled]:hover > a:only-child,
.ant-btn-background-ghost.ant-btn-danger.disabled:focus > a:only-child,
.ant-btn-background-ghost.ant-btn-danger[disabled]:focus > a:only-child,
.ant-btn-background-ghost.ant-btn-danger.disabled:active > a:only-child,
.ant-btn-background-ghost.ant-btn-danger[disabled]:active > a:only-child,
.ant-btn-background-ghost.ant-btn-danger.disabled.active > a:only-child,
.ant-btn-background-ghost.ant-btn-danger[disabled].active > a:only-child {
color: currentColor;
}
.ant-btn-background-ghost.ant-btn-danger.disabled > a:only-child:after,
.ant-btn-background-ghost.ant-btn-danger[disabled] > a:only-child:after,
.ant-btn-background-ghost.ant-btn-danger.disabled:hover > a:only-child:after,
.ant-btn-background-ghost.ant-btn-danger[disabled]:hover > a:only-child:after,
.ant-btn-background-ghost.ant-btn-danger.disabled:focus > a:only-child:after,
.ant-btn-background-ghost.ant-btn-danger[disabled]:focus > a:only-child:after,
.ant-btn-background-ghost.ant-btn-danger.disabled:active > a:only-child:after,
.ant-btn-background-ghost.ant-btn-danger[disabled]:active > a:only-child:after,
.ant-btn-background-ghost.ant-btn-danger.disabled.active > a:only-child:after,
.ant-btn-background-ghost.ant-btn-danger[disabled].active > a:only-child:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: transparent;
}
.ant-btn-two-chinese-chars:first-letter {
letter-spacing: .34em;
}
.ant-btn-two-chinese-chars > * {
letter-spacing: .34em;
margin-right: -0.34em;
}
@-webkit-keyframes buttonEffect {
to {
opacity: 0;
top: -6px;
left: -6px;
bottom: -6px;
right: -6px;
border-width: 6px;
}
}
@keyframes buttonEffect {
to {
opacity: 0;
top: -6px;
left: -6px;
bottom: -6px;
right: -6px;
border-width: 6px;
}
}
a.ant-btn {
line-height: 30px;
}
a.ant-btn-lg {
line-height: 38px;
}
a.ant-btn-sm {
line-height: 22px;
}