rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-18 10:52:19 +01:00
Code Issues Actions Packages Releases Activity

fixes #9879: add hover state to theme buttons

Browse Source
This commit is contained in:
Mark Otto 2013-08-23 10:36:37 -07:00
parent c4c87fede5
commit 5bbbdb399b
3 changed files with 96 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

132
dist/css/bootstrap-theme.css vendored
View File

@ -32,100 +32,136 @@
.btn-default { .btn-default {
text-shadow: 0 1px 0 #fff; text-shadow: 0 1px 0 #fff;
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#ffffff), to(#e6e6e6)); background-image: -webkit-gradient(linear, left 0%, left 100%, from(#ffffff), to(#e0e0e0));
background-image: -webkit-linear-gradient(top, #ffffff, 0%, #e6e6e6, 100%); background-image: -webkit-linear-gradient(top, #ffffff, 0%, #e0e0e0, 100%);
background-image: -moz-linear-gradient(top, #ffffff 0%, #e6e6e6 100%); background-image: -moz-linear-gradient(top, #ffffff 0%, #e0e0e0 100%);
background-image: linear-gradient(to bottom, #ffffff 0%, #e6e6e6 100%); background-image: linear-gradient(to bottom, #ffffff 0%, #e0e0e0 100%);
background-repeat: repeat-x; background-repeat: repeat-x;
border-color: #e0e0e0; border-color: #dbdbdb;
border-color: #ccc; border-color: #ccc;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0);
}
.btn-default:hover,
.btn-default:focus {
background-color: #e0e0e0;
background-position: 0 -15px;
} }
.btn-default:active, .btn-default:active,
.btn-default.active { .btn-default.active {
background-color: #e6e6e6; background-color: #e0e0e0;
border-color: #e0e0e0; border-color: #dbdbdb;
} }
.btn-primary { .btn-primary {
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#428bca), to(#3071a9)); background-image: -webkit-gradient(linear, left 0%, left 100%, from(#428bca), to(#2d6ca2));
background-image: -webkit-linear-gradient(top, #428bca, 0%, #3071a9, 100%); background-image: -webkit-linear-gradient(top, #428bca, 0%, #2d6ca2, 100%);
background-image: -moz-linear-gradient(top, #428bca 0%, #3071a9 100%); background-image: -moz-linear-gradient(top, #428bca 0%, #2d6ca2 100%);
background-image: linear-gradient(to bottom, #428bca 0%, #3071a9 100%); background-image: linear-gradient(to bottom, #428bca 0%, #2d6ca2 100%);
background-repeat: repeat-x; background-repeat: repeat-x;
border-color: #2d6ca2; border-color: #2b669a;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff3071a9', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff2d6ca2', GradientType=0);
}
.btn-primary:hover,
.btn-primary:focus {
background-color: #2d6ca2;
background-position: 0 -15px;
} }
.btn-primary:active, .btn-primary:active,
.btn-primary.active { .btn-primary.active {
background-color: #3071a9; background-color: #2d6ca2;
border-color: #2d6ca2; border-color: #2b669a;
} }
.btn-success { .btn-success {
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#5cb85c), to(#449d44)); background-image: -webkit-gradient(linear, left 0%, left 100%, from(#5cb85c), to(#419641));
background-image: -webkit-linear-gradient(top, #5cb85c, 0%, #449d44, 100%); background-image: -webkit-linear-gradient(top, #5cb85c, 0%, #419641, 100%);
background-image: -moz-linear-gradient(top, #5cb85c 0%, #449d44 100%); background-image: -moz-linear-gradient(top, #5cb85c 0%, #419641 100%);
background-image: linear-gradient(to bottom, #5cb85c 0%, #449d44 100%); background-image: linear-gradient(to bottom, #5cb85c 0%, #419641 100%);
background-repeat: repeat-x; background-repeat: repeat-x;
border-color: #419641; border-color: #3e8f3e;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff449d44', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff419641', GradientType=0);
}
.btn-success:hover,
.btn-success:focus {
background-color: #419641;
background-position: 0 -15px;
} }
.btn-success:active, .btn-success:active,
.btn-success.active { .btn-success.active {
background-color: #449d44; background-color: #419641;
border-color: #419641; border-color: #3e8f3e;
} }
.btn-warning { .btn-warning {
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#f0ad4e), to(#ec971f)); background-image: -webkit-gradient(linear, left 0%, left 100%, from(#f0ad4e), to(#eb9316));
background-image: -webkit-linear-gradient(top, #f0ad4e, 0%, #ec971f, 100%); background-image: -webkit-linear-gradient(top, #f0ad4e, 0%, #eb9316, 100%);
background-image: -moz-linear-gradient(top, #f0ad4e 0%, #ec971f 100%); background-image: -moz-linear-gradient(top, #f0ad4e 0%, #eb9316 100%);
background-image: linear-gradient(to bottom, #f0ad4e 0%, #ec971f 100%); background-image: linear-gradient(to bottom, #f0ad4e 0%, #eb9316 100%);
background-repeat: repeat-x; background-repeat: repeat-x;
border-color: #eb9316; border-color: #e38d13;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffec971f', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffeb9316', GradientType=0);
}
.btn-warning:hover,
.btn-warning:focus {
background-color: #eb9316;
background-position: 0 -15px;
} }
.btn-warning:active, .btn-warning:active,
.btn-warning.active { .btn-warning.active {
background-color: #ec971f; background-color: #eb9316;
border-color: #eb9316; border-color: #e38d13;
} }
.btn-danger { .btn-danger {
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#d9534f), to(#c9302c)); background-image: -webkit-gradient(linear, left 0%, left 100%, from(#d9534f), to(#c12e2a));
background-image: -webkit-linear-gradient(top, #d9534f, 0%, #c9302c, 100%); background-image: -webkit-linear-gradient(top, #d9534f, 0%, #c12e2a, 100%);
background-image: -moz-linear-gradient(top, #d9534f 0%, #c9302c 100%); background-image: -moz-linear-gradient(top, #d9534f 0%, #c12e2a 100%);
background-image: linear-gradient(to bottom, #d9534f 0%, #c9302c 100%); background-image: linear-gradient(to bottom, #d9534f 0%, #c12e2a 100%);
background-repeat: repeat-x; background-repeat: repeat-x;
border-color: #c12e2a; border-color: #b92c28;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc9302c', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc12e2a', GradientType=0);
}
.btn-danger:hover,
.btn-danger:focus {
background-color: #c12e2a;
background-position: 0 -15px;
} }
.btn-danger:active, .btn-danger:active,
.btn-danger.active { .btn-danger.active {
background-color: #c9302c; background-color: #c12e2a;
border-color: #c12e2a; border-color: #b92c28;
} }
.btn-info { .btn-info {
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#5bc0de), to(#31b0d5)); background-image: -webkit-gradient(linear, left 0%, left 100%, from(#5bc0de), to(#2aabd2));
background-image: -webkit-linear-gradient(top, #5bc0de, 0%, #31b0d5, 100%); background-image: -webkit-linear-gradient(top, #5bc0de, 0%, #2aabd2, 100%);
background-image: -moz-linear-gradient(top, #5bc0de 0%, #31b0d5 100%); background-image: -moz-linear-gradient(top, #5bc0de 0%, #2aabd2 100%);
background-image: linear-gradient(to bottom, #5bc0de 0%, #31b0d5 100%); background-image: linear-gradient(to bottom, #5bc0de 0%, #2aabd2 100%);
background-repeat: repeat-x; background-repeat: repeat-x;
border-color: #2aabd2; border-color: #28a4c9;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff31b0d5', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2aabd2', GradientType=0);
}
.btn-info:hover,
.btn-info:focus {
background-color: #2aabd2;
background-position: 0 -15px;
} }
.btn-info:active, .btn-info:active,
.btn-info.active { .btn-info.active {
background-color: #31b0d5; background-color: #2aabd2;
border-color: #2aabd2; border-color: #28a4c9;
} }
.thumbnail, .thumbnail,

2
dist/css/bootstrap-theme.min.css vendored
View File

File diff suppressed because one or more lines are too long

15
less/theme.less
View File

@ -32,13 +32,20 @@
// Mixin for generating new styles // Mixin for generating new styles
.btn-styles(@btn-color: #555;) { .btn-styles(@btn-color: #555;) {
#gradient > .vertical(@start-color: @btn-color; @end-color: darken(@btn-color, 10%)); #gradient > .vertical(@start-color: @btn-color; @end-color: darken(@btn-color, 12%));
border-color: darken(@btn-color, 12%); background-repeat: repeat-x;
border-color: darken(@btn-color, 14%);
&:hover,
&:focus {
background-color: darken(@btn-color, 12%);
background-position: 0 -15px;
}
&:active, &:active,
&.active { &.active {
background-color: darken(@btn-color, 10%); background-color: darken(@btn-color, 12%);
border-color: darken(@btn-color, 12%); border-color: darken(@btn-color, 14%);
} }
} }