@import "../../style/themes/default"; @import "../../style/mixins/index"; @import "./mixin"; @btn-prefix-cls: ~"@{ant-prefix}-btn"; // for compatible @btn-ghost-color: @text-color; @btn-ghost-bg: transparent; @btn-ghost-border: @border-color-base; // Button styles // ----------------------------- .@{btn-prefix-cls} { line-height: @line-height-base; .btn; .btn-default; // 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; display: inline-block; } &-primary { .btn-primary; .@{btn-prefix-cls}-group &:not(:first-child):not(:last-child) { border-right-color: @btn-group-border; border-left-color: @btn-group-border; &:disabled { border-color: @btn-default-border; } } .@{btn-prefix-cls}-group &:first-child { &:not(:last-child) { border-right-color: @btn-group-border; &[disabled] { border-right-color: @btn-default-border; } } } .@{btn-prefix-cls}-group &:last-child:not(:first-child), .@{btn-prefix-cls}-group & + & { border-left-color: @btn-group-border; &[disabled] { border-left-color: @btn-default-border; } } } &-ghost { .btn-ghost; } &-dashed { .btn-dashed; } &-danger { .btn-danger; } &-circle, &-circle-outline { .btn-circle(@btn-prefix-cls); } &: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; } .@{iconfont-css-prefix} { transition: margin-left .3s @ease-in-out; } &&-loading:before { display: block; } &&-loading:not(&-circle):not(&-circle-outline):not(&-icon-only) { padding-left: 29px; pointer-events: none; position: relative; .@{iconfont-css-prefix} { margin-left: -14px; } } &-sm&-loading:not(&-circle):not(&-circle-outline):not(&-icon-only) { padding-left: 24px; .@{iconfont-css-prefix} { margin-left: -17px; } } &-group { .btn-group(@btn-prefix-cls); } &:not(&-circle):not(&-circle-outline)&-icon-only { padding-left: 8px; padding-right: 8px; } // http://stackoverflow.com/a/21281554/3040605 &:focus > span, &:active > span { position: relative; } // To ensure that a space will be placed between character and `Icon`. > .@{iconfont-css-prefix} + span, > span + .@{iconfont-css-prefix} { margin-left: 8px; } &-background-ghost { background: transparent !important; border-color: #fff; color: #fff; } &-background-ghost&-primary { .button-variant-ghost(@btn-primary-bg); } &-background-ghost&-danger { .button-variant-ghost(@btn-danger-color); } &-two-chinese-chars:first-letter { letter-spacing: .34em; } &-two-chinese-chars > *:not(.@{iconfont-css-prefix}) { letter-spacing: .34em; margin-right: -.34em; } &-block { width: 100%; } .christmas&-primary:before { content: ''; display: block; position: absolute; top: -6px; left: 0; right: 0; background: url(data:image/png;base64,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) no-repeat 50% 0; background-size: 64px; opacity: 1; } .christmas&-primary&-lg:before { background-size: 72px; } .christmas&-primary&-sm:before { background-size: 56px; } // https://github.com/ant-design/ant-design/issues/12681 &:empty { vertical-align: top; } } a.@{btn-prefix-cls} { line-height: @btn-height-base - 2px; &-lg { line-height: @btn-height-lg - 2px; } &-sm { line-height: @btn-height-sm - 2px; } }