.btn { outline: none; border: 1px solid transparent; margin-bottom: @base-padding; &.text-left { text-align: left; } &.text-right { text-align: right; } &:active, &:focus { outline: none !important; } // Active &:active, &.active { .box-shadow(inset 0 0 5px 2px fade(#000, 8%)); } // Spacing between buttons + .btn { margin-left: @base-padding/2; &.btn-block { margin-left: 0; } } // Single Button (no margin) &.btn-single { margin-bottom: 0; } // Icon &.btn-icon { line-height: 1; i { vertical-align: middle; display: inline-block; padding: 5px 0; } span { display: inline-block; } } // Standalone Icon &.btn-icon-standalone { padding: 0; border: 0; line-height: 1; i, span { display: block; padding: 12px @padding-base-horizontal; } i { border-right: 1px solid transparent; float: left; } span { padding-left: 45px + @base-padding; padding-right: @base-padding + 3; } &.btn-icon-standalone-right { i { float: right; border-left: 1px solid transparent; border-right: 0; } span { padding-left: @base-padding + 3; padding-right: 45px + @base-padding; } } // Sizes &.btn-lg { i, span { padding: 15px @padding-large-horizontal; } span { padding-left: @base-padding + 65; } &.btn-icon-standalone-right { span { padding-left: @base-padding + 7; padding-right: @base-padding + 65; } } } &.btn-sm { i, span { padding: 8px @padding-small-horizontal; } span { padding-left: @base-padding + 40; } &.btn-icon-standalone-right { span { padding-left: @base-padding + 2; padding-right: @base-padding + 40; } } } &.btn-xs { i, span { padding: 5px @padding-xs-horizontal; } span { padding-left: @base-padding + 24; } &.btn-icon-standalone-right { span { padding-left: @base-padding; padding-right: @base-padding + 24; } } } } // Colors &.btn-secondary { .xenon-btn-style(@secondary-color, #FFF); } &.btn-purple { .xenon-btn-style(@xe-purple, #FFF); } &.btn-orange { .xenon-btn-style(@xe-orange, #FFF); } &.btn-pink { .xenon-btn-style(@xe-pink, #FFF); } &.btn-turquoise { .xenon-btn-style(@xe-turquoise, #FFF); } &.btn-blue { .xenon-btn-style(@xe-blue, #FFF); } &.btn-red { .xenon-btn-style(@xe-red, #FFF); } &.btn-gray { .xenon-btn-style(@xe-gray, #333); } &.btn-black { .xenon-btn-style(@xe-black, #FFF); &:hover { background-color: lighten(@xe-black, 10%); } } &.btn-white { .xenon-btn-style(#FFF, #333); border: 1px solid @default-border-color; } // Standalone Styles &.btn-primary { .xenon-btn-icon-standalone(@main-color; -5%; -10%); } &.btn-secondary { .xenon-btn-icon-standalone(@secondary-color; 2%; 4%); } &.btn-info { .xenon-btn-icon-standalone(@brand-info; 4%; 8%); } &.btn-danger { .xenon-btn-icon-standalone(@brand-danger; 4%; 8%); } &.btn-warning { .xenon-btn-icon-standalone(@brand-warning; 3%; 5%); } &.btn-red { .xenon-btn-icon-standalone(@xe-red; 4%; 6%); } &.btn-purple { .xenon-btn-icon-standalone(@xe-purple; 4%; 11%, 9%); } &.btn-blue { .xenon-btn-icon-standalone(@xe-blue; 4%; 6%); } &.btn-white { .xenon-btn-icon-standalone(#FFF; 4%; 10%; 12%); } &.btn-gray { .xenon-btn-icon-standalone(@xe-gray; 4%; 10%; 12%); } &.btn-black { .xenon-btn-icon-standalone(@xe-black;-5%; -10%; -12%); } // Button Group .btn-group & { &.btn-purple:hover { border-color: darken(@xe-purple, 15%); } &.btn-red:hover { border-color: darken(@xe-red, 15%); } &.btn-blue:hover { border-color: darken(@xe-blue, 15%); } &.btn-white:hover { border-color: darken(#FFF, 15%); } &.btn-gray:hover { border-color: darken(@xe-gray, 15%); } &.btn-black:hover { border-color: lighten(@xe-black, 15%); } } } .btn-unstyled { margin: 0; padding: 0; background: none; border: 0; height: auto; line-height: 1; &:active, &:focus { background: none; .box-shadow(none); } }