mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-09-01 09:22:55 +02:00
Code Issues Releases Wiki Activity

improve pagination's active state so it looks less like the active state and more like active nav items

Browse Source
This commit is contained in:
Mark Otto
2013-08-15 13:16:06 -07:00
parent 3d37833134
commit f9d2f9b6cd
4 changed files with 54 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
dist/css/bootstrap.css vendored
View File

@@ -3938,18 +3938,19 @@ button.close {
.pagination > li > a, .pagination > li > a,
.pagination > li > span { .pagination > li > span {
position: relative;
float: left; float: left;
padding: 6px 12px; padding: 6px 12px;
margin-left: -1px;
line-height: 1.428571429; line-height: 1.428571429;
text-decoration: none; text-decoration: none;
background-color: #ffffff; background-color: #ffffff;
border: 1px solid #dddddd; border: 1px solid #dddddd;
border-left-width: 0;
} }
.pagination > li:first-child > a, .pagination > li:first-child > a,
.pagination > li:first-child > span { .pagination > li:first-child > span {
border-left-width: 1px; margin-left: 0;
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
border-top-left-radius: 4px; border-top-left-radius: 4px;
} }
@@ -3961,16 +3962,23 @@ button.close {
} }
.pagination > li > a:hover, .pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus, .pagination > li > a:focus,
.pagination > .active > a, .pagination > li > span:focus {
.pagination > .active > span { background-color: #eeeeee;
background-color: #f5f5f5;
} }
.pagination > .active > a, .pagination > .active > a,
.pagination > .active > span { .pagination > .active > span,
color: #999999; .pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
z-index: 2;
color: #ffffff;
cursor: default; cursor: default;
background-color: #428bca;
border-color: #428bca;
} }
.pagination > .disabled > span, .pagination > .disabled > span,
@@ -3980,6 +3988,7 @@ button.close {
color: #999999; color: #999999;
cursor: not-allowed; cursor: not-allowed;
background-color: #ffffff; background-color: #ffffff;
border-color: #dddddd;
} }
.pagination-lg > li > a, .pagination-lg > li > a,
@@ -4061,7 +4070,7 @@ button.close {
.pager li > a:hover, .pager li > a:hover,
.pager li > a:focus { .pager li > a:focus {
text-decoration: none; text-decoration: none;
background-color: #f5f5f5; background-color: #428bca;
} }
.pager .next > a, .pager .next > a,
@@ -4833,22 +4842,22 @@ a.list-group-item.active > .badge,
animation: progress-bar-stripes 2s linear infinite; animation: progress-bar-stripes 2s linear infinite;
} }
.progress-bar-danger { .progress-bar-success {
background-color: #d9534f; background-color: #5cb85c;
} }
.progress-striped .progress-bar-danger { .progress-striped .progress-bar-success {
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
} }
.progress-bar-success { .progress-bar-info {
background-color: #5cb85c; background-color: #5bc0de;
} }
.progress-striped .progress-bar-success { .progress-striped .progress-bar-info {
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
@@ -4866,11 +4875,11 @@ a.list-group-item.active > .badge,
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
} }
.progress-bar-info { .progress-bar-danger {
background-color: #5bc0de; background-color: #d9534f;
} }
.progress-striped .progress-bar-info { .progress-striped .progress-bar-danger {
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);

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

File diff suppressed because one or more lines are too long

29
less/pagination.less
View File

@@ -11,18 +11,19 @@
display: inline; // Remove list-style and block-level defaults display: inline; // Remove list-style and block-level defaults
> a, > a,
> span { > span {
position: relative;
float: left; // Collapse white-space float: left; // Collapse white-space
padding: @padding-base-vertical @padding-base-horizontal; padding: @padding-base-vertical @padding-base-horizontal;
line-height: @line-height-base; line-height: @line-height-base;
text-decoration: none; text-decoration: none;
background-color: @pagination-bg; background-color: @pagination-bg;
border: 1px solid @pagination-border; border: 1px solid @pagination-border;
border-left-width: 0; margin-left: -1px;
} }
&:first-child { &:first-child {
> a, > a,
> span { > span {
border-left-width: 1px; margin-left: 0;
.border-left-radius(@border-radius-base); .border-left-radius(@border-radius-base);
} }
} }
@@ -34,16 +35,25 @@
} }
} }
> li > a:hover, > li > a,
> li > a:focus, > li > span {
> .active > a, &:hover,
> .active > span { &:focus {
background-color: @pagination-active-bg; background-color: @pagination-hover-bg;
}
} }
> .active > a, > .active > a,
> .active > span { > .active > span {
color: @pagination-active-color; &,
cursor: default; &:hover,
&:focus {
z-index: 2;
color: @pagination-active-color;
background-color: @pagination-active-bg;
border-color: @pagination-active-bg;
cursor: default;
}
} }
> .disabled { > .disabled {
@@ -53,6 +63,7 @@
> a:focus { > a:focus {
color: @pagination-disabled-color; color: @pagination-disabled-color;
background-color: @pagination-bg; background-color: @pagination-bg;
border-color: @pagination-border;
cursor: not-allowed; cursor: not-allowed;
} }
} }

9
less/variables.less
View File

@@ -326,10 +326,15 @@
@pagination-bg: #fff; @pagination-bg: #fff;
@pagination-border: #ddd; @pagination-border: #ddd;
@pagination-active-bg: #f5f5f5;
@pagination-active-color: @gray-light; @pagination-hover-bg: @gray-lighter;
@pagination-active-bg: @brand-primary;
@pagination-active-color: #fff;
@pagination-disabled-color: @gray-light; @pagination-disabled-color: @gray-light;
// Pager // Pager
// ------------------------- // -------------------------