// mixins for button // ------------------------ .button-size(@padding; @font-size; @border-radius) { padding: @padding; font-size: @font-size; border-radius: @border-radius; } .button-disabled() { &.disabled, &[disabled] { &, &:hover, &:focus, &:active, &.active { .button-color(@btn-disable-color; @btn-disable-bg; @btn-disable-border); } } } .button-variant-primary(@color; @background) { .button-color(@color; @background; @background); &:hover, &:focus { .button-color(@color; tint(@background, 20%); tint(@background, 20%)); } &:active, &.active { .button-color(@color; shade(@background, 5%); shade(@background, 5%)); } .button-disabled(); } .button-variant-other(@color; @background; @border) { .button-color(@color; @background; @border); &:hover, &:focus { .button-color(tint(@primary-color, 20%); @background; tint(@primary-color, 20%)); } &:active, &.active { .button-color(shade(@primary-color, 5%); @background; shade(@primary-color, 5%)); } .button-disabled(); } .button-color(@color; @background; @border) { color: @color; background-color: @background; border-color: @border; // a inside Button which only work in Chrome // http://stackoverflow.com/a/17253457 > a:only-child { color: currentColor; &:after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: transparent; } } } .button-group-base(@btnClassName) { position: relative; display: inline-block; > .@{btnClassName} { position: relative; &:hover, &:focus, &:active, &.active { z-index: 2; } } // size &-lg > .@{btnClassName} { .button-size(@btn-padding-lg; @btn-font-size-lg; @btn-border-radius-base); } &-sm > .@{btnClassName} { .button-size(@btn-padding-sm; @font-size-base; @btn-border-radius-sm); > .@{iconfont-css-prefix} { font-size: @font-size-base; } } } // Base styles of buttons // -------------------------------------------------- .btn() { display: inline-block; margin-bottom: 0; font-weight: @btn-font-weight; text-align: center; touch-action: manipulation; cursor: pointer; background-image: none; border: 1px solid transparent; white-space: nowrap; line-height: @line-height-base; .button-size(@btn-padding-base; @font-size-base; @btn-border-radius-base); user-select: none; transition: all .3s @ease-in-out; position: relative; > .@{iconfont-css-prefix} { line-height: 1; } &, &:active, &:focus { outline: 0; } &:not([disabled]):hover { text-decoration: none; } &:not([disabled]):active { outline: 0; transition: none; } &.disabled, &[disabled] { cursor: not-allowed; > * { pointer-events: none; } } &-lg { .button-size(@btn-padding-lg; @btn-font-size-lg; @btn-border-radius-base); } &-sm { .button-size(@btn-padding-sm; @font-size-base; @btn-border-radius-sm); } } // primary button style .btn-primary() { .button-variant-primary(@btn-primary-color; @btn-primary-bg); } // default button style .btn-default() { .button-variant-other(@btn-default-color; @btn-default-bg; @btn-default-border); &:hover, &:focus, &:active, &.active { background: #fff; } } // ghost button style .btn-ghost() { .button-variant-other(@btn-ghost-color, @btn-ghost-bg, @btn-ghost-border); } // ghost button style .btn-dashed() { .button-variant-other(@btn-ghost-color, @btn-ghost-bg, @btn-ghost-border); border-style: dashed; } // circle button: the content only contains icon .btn-circle(@btnClassName: btn) { .square(@btn-circle-size); .button-size(0; @font-size-base + 2; 50%); &.@{btnClassName}-lg { .square(@btn-circle-size-lg); .button-size(0; @btn-font-size-lg + 2; 50%); } &.@{btnClassName}-sm { .square(@btn-circle-size-sm); .button-size(0; @font-size-base; 50%); } } // Horizontal button groups styl // -------------------------------------------------- .btn-group(@btnClassName: btn) { .button-group-base(@btnClassName); .@{btnClassName} + .@{btnClassName}, .@{btnClassName} + &, & + .@{btnClassName}, & + & { margin-left: -1px; } .@{btnClassName}:not(:first-child):not(:last-child) { border-radius: 0; padding-left: 8px; padding-right: 8px; } > .@{btnClassName}:first-child { margin-left: 0; &:not(:last-child) { border-bottom-right-radius: 0; border-top-right-radius: 0; padding-right: 8px; } } > .@{btnClassName}:last-child:not(:first-child) { border-bottom-left-radius: 0; border-top-left-radius: 0; padding-left: 8px; } & > & { float: left; } & > &:not(:first-child):not(:last-child) > .@{btnClassName} { border-radius: 0; } & > &:first-child:not(:last-child) { > .@{btnClassName}:last-child { border-bottom-right-radius: 0; border-top-right-radius: 0; padding-right: 8px; } } & > &:last-child:not(:first-child) > .@{btnClassName}:first-child { border-bottom-left-radius: 0; border-top-left-radius: 0; padding-left: 8px; } }