/* ------------------------------------------------------------------------------ * * # Buttons component * * Overrides for buttons bootstrap component * * Version: 1.0 * Latest update: May 25, 2015 * * ---------------------------------------------------------------------------- */ // Base styles // ------------------------- .btn { position: relative; border-radius: @border-radius-small; // Remove outline &, &:active, &.active { &:focus, &.focus { outline: 0; } } // Firefox fix &::-moz-focus-inner { border: 0; } // Hover state &:hover, &:focus, &.focus { .box-shadow(0 0 0 100px fade(#000, 5%) inset); // Use box shadow instead of color for all buttons - contextual and custom } // Active state &:active, &.active { .box-shadow(0 0 0 100px fade(#000, 10%) inset); // The same as above - no color changes, only box shadow } // Custom color buttons &[class*=bg-] { &:hover, &:focus, &.focus { color: #fff; } } // Correct line heights in smaller text sizes &.text-size-small { line-height: @line-height-small; } &.text-size-mini { line-height: @line-height-mini; } } // Button styling // ------------------------- // Default button .btn-default { // Hover/focus states &:hover, &:focus, &.focus { .box-shadow(0 0 0 100px fade(#000, 1%) inset); // Use box shadow instead of color for all buttons - contextual and custom } // Active state &:active, &.active { .box-shadow(0 0 0 100px fade(#000, 2%) inset); // The same as above - no color changes, only box shadow } } // Labeled button .btn-labeled { padding-left: (((@padding-base-horizontal * 3) + @icon-font-size) - 4); // Tripple horizontal padding + extra 5 pixels + border // Default button &.btn-default { > b { background-color: @brand-primary; color: #fff; } } // Icon > b { position: absolute; top: -1px; left: -1px; background-color: fade(#000, 15%); display: block; .button-size(@padding-base-vertical + 1; @padding-base-horizontal - 2; @font-size-base; @line-height-base; 0); } // Right icon &.btn-labeled-right { padding-left: @padding-base-horizontal; padding-right: (((@padding-base-horizontal * 3) + @icon-font-size) - 4); > b { left: auto; right: -1px; } } // Extra large &.btn-xlg { padding-left: (((@padding-xlarge-horizontal * 3) + @icon-font-size) - 6); > b { .button-size(@padding-xlarge-vertical + 1; @padding-xlarge-horizontal - 3; @font-size-large; @line-height-large; 0); } &.btn-labeled-right { padding-left: @padding-large-horizontal; padding-right: (((@padding-xlarge-horizontal * 3) + @icon-font-size) - 6); } } // Large &.btn-lg { padding-left: (((@padding-large-horizontal * 3) + @icon-font-size) - 6); > b { .button-size(@padding-large-vertical + 1; @padding-large-horizontal - 3; @font-size-large; @line-height-large; 0); } &.btn-labeled-right { padding-left: @padding-large-horizontal; padding-right: (((@padding-large-horizontal * 3) + @icon-font-size) - 6); } } // Small &.btn-sm { padding-left: (((@padding-small-horizontal * 3) + @icon-font-size) - 4); > b { .button-size(@padding-small-vertical + 1; @padding-small-horizontal - 2; @font-size-small; @line-height-small; 0); } &.btn-labeled-right { padding-left: @padding-small-horizontal; padding-right: (((@padding-small-horizontal * 3) + @icon-font-size) - 4); } } // Mini &.btn-xs { padding-left: (((@padding-xs-horizontal * 3) + @icon-font-size) - 4); > b { .button-size(@padding-xs-vertical + 1; @padding-xs-horizontal - 2; @font-size-small; @line-height-small; 0); } &.btn-labeled-right { padding-left: @padding-xs-horizontal; padding-right: (((@padding-xs-horizontal * 3) + @icon-font-size) - 4); } } } // Flat button .btn-flat { border-width: 2px; background-color: transparent; // Hover/focus states &:hover, &:focus { .opacity(0.8); .box-shadow(none); } // Active state &:active { .opacity(0.95); } // Remove shadow in open dropdown button .btn-group.open .dropdown-toggle& { .box-shadow(none); } } // Icon button .btn-icon { padding-left: @padding-base-vertical + 2; padding-right: @padding-base-vertical + 2; &.icon-2x { padding-left: @padding-base-vertical; padding-right: @padding-base-vertical; > i { font-size: (@icon-font-size * 2); top: 0; } // Sizing &.btn-xlg { padding-left: @padding-xlarge-vertical; padding-right: @padding-xlarge-vertical; } &.btn-lg { padding-left: @padding-large-vertical; padding-right: @padding-large-vertical; } &.btn-sm { padding-left: @padding-small-vertical; padding-right: @padding-small-vertical; } &.btn-xs { padding-left: @padding-xs-vertical; padding-right: @padding-xs-vertical; } } // Sizing &.btn-xlg, .input-group-xlg > .input-group-btn > & { padding-left: @padding-xlarge-vertical + 2; padding-right: @padding-xlarge-vertical + 2; } &.btn-lg, .input-group-lg > .input-group-btn > & { padding-left: @padding-large-vertical + 2; padding-right: @padding-large-vertical + 2; } &.btn-sm, .input-group-sm > .input-group-btn > & { padding-left: @padding-small-vertical + 2; padding-right: @padding-small-vertical + 2; } &.btn-xs, .input-group-xs > .input-group-btn > .btn& { padding-left: @padding-xs-vertical + 2; padding-right: @padding-xs-vertical + 2; } } // Float button .btn-float { padding: @btn-float-padding; white-space: normal; border-radius: @border-radius-base; // Transparent button &.btn-link { padding: (@btn-float-padding - 5); } // Icon i { display: block; margin: 0; top: 0; } // Text > span { display: block; padding-top: (@line-height-computed / 2); margin-bottom: -((@line-height-computed / 2) - 4); } // Double icon size in large button &.btn-float-lg i { font-size: (@icon-font-size * 2); } } // Link button .btn-link { color: @text-color; // Remove shadows &, &:hover, &:focus, &:active { .box-shadow(none); } } // Rounded button .btn-rounded { &, &.btn-labeled > b { border-radius: 100px; } } // Block button .btn-block + .btn-block { margin-top: (@line-height-computed / 2); } // Contextual classes. // Override all styles // to avoid BS mixin changes // ------------------------- // Default appears as lighter grey .btn-default { &:focus, &.focus, &:hover { background-color: @btn-default-bg; border-color: @btn-default-border; } &:active, &.active, .open > .dropdown-toggle& { background-color: @btn-default-bg; border-color: @btn-default-border; &:hover, &:focus, &.focus { background-color: @btn-default-bg; border-color: @btn-default-border; } } &.disabled { .box-shadow(none); } } // Primary appears as blue .btn-primary { &:focus, &.focus, &:hover { background-color: @btn-primary-bg; border-color: @btn-primary-border; } &:active, &.active, .open > .dropdown-toggle& { background-color: @btn-primary-bg; border-color: @btn-primary-border; &:hover, &:focus, &.focus { background-color: @btn-primary-bg; border-color: @btn-primary-border; } } &.disabled { .box-shadow(none); } } // Success appears as green .btn-success { &:focus, &.focus, &:hover { background-color: @btn-success-bg; border-color: @btn-success-border; } &:active, &.active, .open > .dropdown-toggle& { background-color: @btn-success-bg; border-color: @btn-success-border; &:hover, &:focus, &.focus { background-color: @btn-success-bg; border-color: @btn-success-border; } } &.disabled { .box-shadow(none); } } // Info appears as light blue .btn-info { &:focus, &.focus, &:hover { background-color: @btn-info-bg; border-color: @btn-info-border; } &:active, &.active, .open > .dropdown-toggle& { background-color: @btn-info-bg; border-color: @btn-info-border; &:hover, &:focus, &.focus { background-color: @btn-info-bg; border-color: @btn-info-border; } } &.disabled { .box-shadow(none); } } // Warning appears as orange .btn-warning { &:focus, &.focus, &:hover { background-color: @btn-warning-bg; border-color: @btn-warning-border; } &:active, &.active, .open > .dropdown-toggle& { background-color: @btn-warning-bg; border-color: @btn-warning-border; &:hover, &:focus, &.focus { background-color: @btn-warning-bg; border-color: @btn-warning-border; } } &.disabled { .box-shadow(none); } } // Danger and error appear as red .btn-danger { &:focus, &.focus, &:hover { background-color: @btn-danger-bg; border-color: @btn-danger-border; } &:active, &.active, .open > .dropdown-toggle& { background-color: @btn-danger-bg; border-color: @btn-danger-border; &:hover, &:focus, &.focus { background-color: @btn-danger-bg; border-color: @btn-danger-border; } } &.disabled { .box-shadow(none); } } // Button size overrides // ------------------------- // XLarge button .btn-xlg { .button-size(@padding-xlarge-vertical; @padding-xlarge-horizontal; @font-size-large; @line-height-large; @border-radius-base); &.btn-rounded { border-radius: 100px; } } // Large button .btn-lg { border-radius: @border-radius-base; &.btn-rounded { border-radius: 100px; } } // Small button .btn-sm { line-height: @line-height-base; font-size: @font-size-base; }