Path: blob/master/web-gui/buildyourownbotnet/assets/less/neon-less/buttons.less
1969 views
// Core styles
.btn {
outline: 0 !important;
&:active {
.box-shadow(none);
}
&.btn-icon {
position: relative;
i {
position: absolute;
right: 0;
top: 0;
height: 100%;
}
}
}
// Alternate buttons
// --------------------------------------------------
.btn-default {
.button-variant(@btn-default-color; @secondary_background_color; @btn-default-border);
}
.btn-primary {
.button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
}
.btn-blue {
.button-variant(#FFF, #0072bc, #0072bc);
}
.btn-red {
.button-variant(#FFF, #d42020, #d42020);
}
.btn-orange {
.button-variant(#FFF, #ff9600, #ff9600);
}
.btn-gold {
.button-variant(#846e20, #fcd036, #fcd036);
}
.btn-black {
.button-variant(#FFF, #000000, #000000);
}
.btn-white {
.button-variant(@main_color, #FFF, #FFF);
border-color: @default !important;
}
.btn-warning {
.button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
}
.btn-danger {
.button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
}
.btn-success, .btn-green {
.button-variant(@btn-success-color; @btn-success-bg; @btn-success-border);
}
.btn-info {
.button-variant(@btn-info-color; @btn-info-bg; @btn-info-border);
}
// Vertically space out multiple block buttons
.btn-block + .btn-block {
margin-top: 5px;
}
// Base styles
// --------------------------------------------------
.bs-example {
> .btn,
> .make-switch,
> .btn-group {
margin-top: 4px;
margin-bottom: 4px;
margin-right: 9px;
}
&.bs-baseline-top {
.btn, .btn-group {
vertical-align: top !important;
}
}
}
// Button Variant Exented
.button-variant(@color; @background; @border) {
&:hover,
&:focus,
&.focus {
color: @color !important;
}
&.btn-icon {
@padd: 39px;
position: relative;
padding-right: @padd;
border: none;
i {
background-color: darken(@background, 8%);
font-size: @font-size-base;
.button-size(@padding-base-vertical; 6px; @font-size-base; @line-height-base; @border-radius-base);
.rounded(0 @border-radius-base @border-radius-base 0);
}
&.icon-left {
padding-right: @padding-base-horizontal;
padding-left: @padd;
i {
float: left;
right: auto;
left: 0;
.rounded(~"@{border-radius-base} 0 0 @{border-radius-base} !important");
}
}
&.btn-lg {
@padd: 55px;
padding-right: @padd;
&.icon-left {
padding-right: @padding-large-horizontal;
padding-left: @padd;
}
i {
.button-size(@padding-large-vertical; 10px; @font-size-large; @line-height-large; @border-radius-large);
}
}
&.btn-sm {
@padd: 36px;
padding-right: @padd;
&.icon-left {
padding-right: @padding-small-horizontal;
padding-left: @padd;
}
i {
.button-size(@padding-small-vertical; 6px; @font-size-small; @line-height-small; @border-radius-small);
}
}
&.btn-xs {
@padd: 32px;
@padding-small-vertical: 2px;
padding-right: @padd;
&.icon-left {
padding-right: @padding-small-horizontal;
padding-left: @padd;
}
i {
.button-size(@padding-small-vertical; 6px; @font-size-small - 1; @line-height-small; @border-radius-small);
}
}
}
}