Skip to content

B
bootstrap
Commit f9d2f9b6 authored by Mark Otto's avatar Mark Otto
Browse files
Options

improve pagination's active state so it looks less like the active state and... 

improve pagination's active state so it looks less like the active state and more like active nav items
parent 3d378331
Show whitespace changes
Inline Side-by-side
Showing with 54 additions and 29 deletions
dist/css/bootstrap.css
View file @ f9d2f9b6
...@@ -3938,18 +3938,19 @@ button.close { ...@@ -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 { ...@@ -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 { ...@@ -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 { ...@@ -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, ...@@ -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, ...@@ -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);
......
dist/css/bootstrap.min.css
View file @ f9d2f9b6
This source diff could not be displayed because it is too large. You can view the blob instead.
less/pagination.less
View file @ f9d2f9b6
...@@ -11,18 +11,19 @@ ...@@ -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,17 +35,26 @@ ...@@ -34,17 +35,26 @@
} }
} }
> 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 {
&,
&:hover,
&:focus {
z-index: 2;
color: @pagination-active-color; color: @pagination-active-color;
background-color: @pagination-active-bg;
border-color: @pagination-active-bg;
cursor: default; cursor: default;
} }
}
> .disabled { > .disabled {
> span, > span,
...@@ -53,6 +63,7 @@ ...@@ -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;
} }
} }
......
less/variables.less
View file @ f9d2f9b6
...@@ -326,10 +326,15 @@ ...@@ -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
// ------------------------- // -------------------------
......
Markdown is supported
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