mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-18 05:58:25 +01:00
Code Issues Releases Wiki Activity

Revamp button mixins and pseudo states

Browse Source 
* Remove .darken-button-states and .buttonBackground mixins (latter wasn't being used anyway)
* Create new .btn-pseudo-states mixin for setting button background and border colors for default and pseudo states
This commit is contained in:
Mark Otto 2013-02-02 19:16:15 -08:00
parent 2f7087eae9
commit 9480eb89cb
2 changed files with 25 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
less/buttons.less
View File

@ -109,64 +109,32 @@ input[type="button"] {
} }
} }
// Mixin for darkening only enabled buttons for link states
.darken-button-states (@background, @border) {
&:hover,
&:focus,
&:active {
background-color: darken(@background, 5%);
border-color: darken(@border, 10%);
}
&.disabled,
&[disabled],
fieldset[disabled] & {
&:hover,
&:focus,
&:active {
background-color: @background;
border-color: @border
}
}
}
// Alternate buttons // Alternate buttons
// -------------------------------------------------- // --------------------------------------------------
.btn { .btn {
color: @btn-color; color: @btn-color;
background-color: @btn-background; .btn-pseudo-states(@btn-background, @btn-border);
border-color: @btn-border;
.darken-button-states(@btn-background, @btn-border)
} }
.btn-primary { .btn-primary {
background-color: @btn-background-primary; .btn-pseudo-states(@btn-background-primary, @btn-border-primary);
border-color: @btn-border-primary;
.darken-button-states(@btn-background-primary, @btn-border-primary)
} }
// Warning appears as orange // Warning appears as orange
.btn-warning { .btn-warning {
background-color: @btn-background-warning; .btn-pseudo-states(@btn-background-warning, @btn-border-warning);
border-color: @btn-border-warning;
.darken-button-states(@btn-background-warning, @btn-border-warning)
} }
// Danger and error appear as red // Danger and error appear as red
.btn-danger { .btn-danger {
background-color: @btn-background-danger; .btn-pseudo-states(@btn-background-danger, @btn-border-danger);
border-color: @btn-border-danger;
.darken-button-states(@btn-background-danger, @btn-border-danger)
} }
// Success appears as green // Success appears as green
.btn-success { .btn-success {
background-color: @btn-background-success; .btn-pseudo-states(@btn-background-success, @btn-border-success);
border-color: @btn-border-success;
.darken-button-states(@btn-background-success, @btn-border-success)
} }
// Info appears as blue-green // Info appears as blue-green
.btn-info { .btn-info {
background-color: @btn-background-info; .btn-pseudo-states(@btn-background-info, @btn-border-info);
border-color: @btn-border-info;
.darken-button-states(@btn-background-info, @btn-border-info)
} }

36
less/mixins.less
View File

@ -383,31 +383,33 @@
border-bottom: 1px solid @bottom; border-bottom: 1px solid @bottom;
} }
// Button backgrounds // Button psuedo states
// ------------------ // -------------------------
.buttonBackground(@background-start, @background-end, @text-color: #fff, @text-shadow: 0 -1px 0 rgba(0,0,0,.25)) { // Easily pump out default styles, as well as :hover, :focus, :active,
color: @text-color; // and disabled options for all buttons
text-shadow: @text-shadow; .btn-pseudo-states(@background, @border) {
#gradient > .vertical(@background-start, @background-end); background-color: @background;
border-color: darken(@background-end, 7.5%); border-color: @border;
&:hover, &:hover,
&:active, &:focus,
&.active { &:active {
color: @text-color; background-color: darken(@background, 5%);
background-color: @background-end; border-color: darken(@border, 10%);
background-position: 0 -15px;
} }
&:active,
&.active,
&[disabled],
&.disabled, &.disabled,
&[disabled],
fieldset[disabled] & { fieldset[disabled] & {
background-image: none; &:hover,
&:focus,
&:active {
background-color: @background;
border-color: @border
}
} }
} }
// Navbar vertical align // Navbar vertical align
// ------------------------- // -------------------------
// Vertically center elements in the navbar. // Vertically center elements in the navbar.