mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-18 10:52:19 +01:00
2b312bf3c1
Bootstrap is being relicensed from Apache 2.0 to MIT so that more of our community can use the free and open source software we lovely create together. As commits are copyright their original authors, the commits of any individual not agreeing to relicense their contributions are being removed to be later rewritten by the @twbs/team. This undoes the changes introduced by the following commits:7ea34ae0ef,7376eef378,303ba1326b,7d1c8c2a0c,11319f6da9,110fc88601,ced08f6935
156 lines
3.4 KiB
Plaintext
156 lines
3.4 KiB
Plaintext
//
|
|
// Buttons
|
|
// --------------------------------------------------
|
|
|
|
|
|
// Base styles
|
|
// --------------------------------------------------
|
|
|
|
.btn {
|
|
display: inline-block;
|
|
margin-bottom: 0; // For input.btn
|
|
font-weight: @btn-font-weight;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
cursor: pointer;
|
|
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
|
|
border: 1px solid transparent;
|
|
white-space: nowrap;
|
|
.button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @border-radius-base);
|
|
.user-select(none);
|
|
}
|
|
|
|
.btn:focus {
|
|
.tab-focus();
|
|
}
|
|
|
|
.btn:hover,
|
|
.btn:focus {
|
|
color: @btn-default-color;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.btn:active,
|
|
.btn.active {
|
|
outline: 0;
|
|
background-image: none;
|
|
.box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
|
|
}
|
|
|
|
.btn.disabled,
|
|
.btn[disabled],
|
|
fieldset[disabled] .btn {
|
|
cursor: not-allowed;
|
|
pointer-events: none; // Future-proof disabling of clicks
|
|
.opacity(.65);
|
|
.box-shadow(none);
|
|
}
|
|
|
|
|
|
// Alternate buttons
|
|
// --------------------------------------------------
|
|
|
|
.btn-default {
|
|
.button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
|
|
}
|
|
.btn-primary {
|
|
.button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
|
|
}
|
|
// Success appears as green
|
|
.btn-success {
|
|
.button-variant(@btn-success-color; @btn-success-bg; @btn-success-border);
|
|
}
|
|
// Warning appears as orange
|
|
.btn-warning {
|
|
.button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
|
|
}
|
|
// Danger and error appear as red
|
|
.btn-danger {
|
|
.button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
|
|
}
|
|
// Info appears as blue-green
|
|
.btn-info {
|
|
.button-variant(@btn-info-color; @btn-info-bg; @btn-info-border);
|
|
}
|
|
|
|
|
|
// Link buttons
|
|
// -------------------------
|
|
|
|
// Make a button look and behave like a link
|
|
.btn-link {
|
|
color: @link-color;
|
|
font-weight: normal;
|
|
cursor: pointer;
|
|
border-radius: 0;
|
|
|
|
&,
|
|
&:active,
|
|
&[disabled],
|
|
fieldset[disabled] & {
|
|
background-color: transparent;
|
|
.box-shadow(none);
|
|
}
|
|
&,
|
|
&:hover,
|
|
&:focus,
|
|
&:active {
|
|
border-color: transparent;
|
|
}
|
|
&:hover,
|
|
&:focus {
|
|
color: @link-hover-color;
|
|
text-decoration: underline;
|
|
background-color: transparent;
|
|
}
|
|
&[disabled],
|
|
fieldset[disabled] & {
|
|
&:hover,
|
|
&:focus {
|
|
color: @btn-link-disabled-color;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Button Sizes
|
|
// --------------------------------------------------
|
|
|
|
.btn-lg {
|
|
// line-height: ensure even-numbered height of button next to large input
|
|
.button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
|
|
}
|
|
.btn-sm {
|
|
// line-height: ensure proper height of button next to small input
|
|
.button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
|
|
}
|
|
.btn-xs {
|
|
.button-size(@padding-xs-vertical; @padding-xs-horizontal; @font-size-small; @line-height-small; @border-radius-small);
|
|
}
|
|
|
|
|
|
// Block button
|
|
// --------------------------------------------------
|
|
|
|
.btn-block {
|
|
display: block;
|
|
width: 100%;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
// Vertically space out multiple block buttons
|
|
.btn-block + .btn-block {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
// Specificity overrides
|
|
input[type="submit"],
|
|
input[type="reset"],
|
|
input[type="button"] {
|
|
&.btn-block {
|
|
width: 100%;
|
|
}
|
|
}
|