ant-design/components/button/style/index.less

177 lines
3.3 KiB
Plaintext
Raw Normal View History

@import "../../style/themes/default";
@import "../../style/mixins/index";
@import "./mixin";
@btn-prefix-cls: ~"@{ant-prefix}-btn";
2015-06-09 15:21:44 +08:00
// for compatibile
2017-08-04 17:58:32 +08:00
@btn-ghost-color: @text-color;
@btn-ghost-bg: transparent;
@btn-ghost-border: @border-color-base;
2015-06-09 15:21:44 +08:00
// Button styles
// -----------------------------
2015-08-20 16:55:42 +08:00
.@{btn-prefix-cls} {
.reset-component;
2015-06-09 15:21:44 +08:00
.btn;
2015-06-11 17:16:32 +08:00
.btn-default;
2015-06-09 15:21:44 +08:00
// Make sure that the target of Button's click event always be `button`
// Ref: https://github.com/ant-design/ant-design/issues/7034
> i,
> span {
pointer-events: none;
}
2015-06-09 15:21:44 +08:00
&-primary {
.btn-primary;
2015-06-12 19:41:30 +08:00
2015-08-20 16:55:42 +08:00
.@{btn-prefix-cls}-group &:not(:first-child):not(:last-child) {
2015-07-09 10:56:28 +08:00
border-right-color: @btn-group-border;
border-left-color: @btn-group-border;
&:disabled {
border-color: @btn-default-border;
}
2015-06-09 15:21:44 +08:00
}
2015-08-20 16:55:42 +08:00
.@{btn-prefix-cls}-group &:first-child {
2015-06-09 15:21:44 +08:00
&:not(:last-child) {
2015-07-09 10:56:28 +08:00
border-right-color: @btn-group-border;
&[disabled] {
border-right-color: @btn-default-border;
}
2015-06-09 15:21:44 +08:00
}
}
.@{btn-prefix-cls}-group &:last-child:not(:first-child),
.@{btn-prefix-cls}-group & + & {
2015-07-09 10:56:28 +08:00
border-left-color: @btn-group-border;
&[disabled] {
border-left-color: @btn-default-border;
}
2015-07-08 16:21:04 +08:00
}
2015-06-09 15:21:44 +08:00
}
&-ghost {
.btn-ghost;
}
2015-11-30 18:26:44 +08:00
&-dashed {
.btn-dashed;
}
&-danger {
.btn-danger;
}
2015-11-26 19:32:55 +08:00
&-circle,
&-circle-outline {
2015-08-20 16:55:42 +08:00
.btn-circle(@btn-prefix-cls);
2015-06-09 15:21:44 +08:00
}
&:before {
position: absolute;
top: -1px;
left: -1px;
bottom: -1px;
right: -1px;
background: #fff;
opacity: 0.35;
content: '';
border-radius: inherit;
z-index: 1;
transition: opacity .2s;
pointer-events: none;
display: none;
}
2017-04-15 14:57:05 +08:00
.@{iconfont-css-prefix} {
transition: margin-left .3s @ease-in-out;
}
&&-loading:before {
display: block;
}
&&-loading:not(&-circle):not(&-circle-outline):not(&-icon-only) {
2015-12-28 13:49:58 +08:00
padding-left: 29px;
2015-07-30 11:15:03 +08:00
pointer-events: none;
position: relative;
.@{iconfont-css-prefix} {
2016-04-12 12:17:03 +08:00
margin-left: -14px;
2015-12-28 13:49:58 +08:00
}
2015-07-29 22:23:55 +08:00
}
&-sm&-loading:not(&-circle):not(&-circle-outline):not(&-icon-only) {
2015-12-28 13:49:58 +08:00
padding-left: 24px;
.@{iconfont-css-prefix} {
2016-04-12 12:17:03 +08:00
margin-left: -17px;
2015-07-29 22:23:55 +08:00
}
}
2015-06-09 15:21:44 +08:00
&-group {
2015-08-20 16:55:42 +08:00
.btn-group(@btn-prefix-cls);
2015-06-09 15:21:44 +08:00
}
2015-09-27 16:30:35 +08:00
&:not(&-circle):not(&-circle-outline)&-icon-only {
padding-left: 8px;
padding-right: 8px;
}
2017-03-05 20:12:36 +08:00
// http://stackoverflow.com/a/21281554/3040605
&:focus > span,
&:active > span {
position: relative;
}
2015-09-27 16:30:35 +08:00
// To ensure that a space will be placed between character and `Icon`.
2015-11-26 19:32:55 +08:00
> .@{iconfont-css-prefix} + span,
> span + .@{iconfont-css-prefix} {
2015-09-27 16:30:35 +08:00
margin-left: 0.5em;
}
2016-05-18 13:15:42 +08:00
&-clicked:after {
content: '';
position: absolute;
top: -1px;
left: -1px;
bottom: -1px;
right: -1px;
border-radius: inherit;
2017-02-26 02:18:20 +08:00
border: 0 solid @primary-color;
opacity: 0.4;
2017-02-26 02:18:20 +08:00
animation: buttonEffect .4s;
2016-04-19 13:40:58 +08:00
display: block;
}
2017-02-14 11:54:52 +08:00
&-danger&-clicked:after {
border-color: @btn-danger-color;
2017-02-14 11:54:52 +08:00
}
&-background-ghost {
2017-08-04 17:58:32 +08:00
background: transparent !important;
border-color: #fff;
color: #fff;
}
&-background-ghost&-primary {
2017-03-18 16:33:55 +08:00
.button-variant-ghost(@primary-color);
}
&-background-ghost&-danger {
.button-variant-ghost(@btn-danger-color);
}
}
@keyframes buttonEffect {
to {
opacity: 0;
2016-09-28 00:13:00 +08:00
top: -6px;
left: -6px;
bottom: -6px;
right: -6px;
2017-02-26 02:18:20 +08:00
border-width: 6px;
}
2015-06-09 16:40:16 +08:00
}