Commit 9480eb89 authored by Mark Otto's avatar Mark Otto
Browse files

Revamp button mixins and pseudo states

* 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
parent 2f7087ea
18 merge requests!7033Fix backdrop undefined bug in modal,!8635ignore Gruntfile.js in jekyll,!8339Fix broken links to navbar component in docs examples,!7329Fix for issue #7328,!7219Fix for mini typo mistake in css.html,!7674Clear float on all when navbar is collapsed - v3,!7344Fixed .spanX selector (*= instead of ^=),!7346Fix compilation error,!7775added some tests for tooltip title setter,!8157Close Me: Docs "Customize and Download" button fix,!7509Proposed fix for allowing Collapse events ('show'/'hide') to be cancelled,!7964commit fixes #7792,!8656Added rel="stylesheet" to CDN-Examples,!8527Inner properties move 1,!8245Interactive color picker - Closed: request against wrong branch,!7865Patch 2,!7651Drop the sizzle dependency to allow smaller builds targeting mobile devices,!6853typeahead: do not store item data in an attribute
Showing with 25 additions and 55 deletions
+25 -55
......@@ -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
// --------------------------------------------------
.btn {
color: @btn-color;
background-color: @btn-background;
border-color: @btn-border;
.darken-button-states(@btn-background, @btn-border)
.btn-pseudo-states(@btn-background, @btn-border);
}
.btn-primary {
background-color: @btn-background-primary;
border-color: @btn-border-primary;
.darken-button-states(@btn-background-primary, @btn-border-primary)
.btn-pseudo-states(@btn-background-primary, @btn-border-primary);
}
// Warning appears as orange
.btn-warning {
background-color: @btn-background-warning;
border-color: @btn-border-warning;
.darken-button-states(@btn-background-warning, @btn-border-warning)
.btn-pseudo-states(@btn-background-warning, @btn-border-warning);
}
// Danger and error appear as red
.btn-danger {
background-color: @btn-background-danger;
border-color: @btn-border-danger;
.darken-button-states(@btn-background-danger, @btn-border-danger)
.btn-pseudo-states(@btn-background-danger, @btn-border-danger);
}
// Success appears as green
.btn-success {
background-color: @btn-background-success;
border-color: @btn-border-success;
.darken-button-states(@btn-background-success, @btn-border-success)
.btn-pseudo-states(@btn-background-success, @btn-border-success);
}
// Info appears as blue-green
.btn-info {
background-color: @btn-background-info;
border-color: @btn-border-info;
.darken-button-states(@btn-background-info, @btn-border-info)
.btn-pseudo-states(@btn-background-info, @btn-border-info);
}
......
......@@ -383,31 +383,33 @@
border-bottom: 1px solid @bottom;
}
// Button backgrounds
// ------------------
.buttonBackground(@background-start, @background-end, @text-color: #fff, @text-shadow: 0 -1px 0 rgba(0,0,0,.25)) {
color: @text-color;
text-shadow: @text-shadow;
#gradient > .vertical(@background-start, @background-end);
border-color: darken(@background-end, 7.5%);
// Button psuedo states
// -------------------------
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons
.btn-pseudo-states(@background, @border) {
background-color: @background;
border-color: @border;
&:hover,
&:active,
&.active {
color: @text-color;
background-color: @background-end;
background-position: 0 -15px;
&:focus,
&:active {
background-color: darken(@background, 5%);
border-color: darken(@border, 10%);
}
&:active,
&.active,
&[disabled],
&.disabled,
&[disabled],
fieldset[disabled] & {
background-image: none;
&:hover,
&:focus,
&:active {
background-color: @background;
border-color: @border
}
}
}
// Navbar vertical align
// -------------------------
// Vertically center elements in the navbar.
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment