Skip to content
Permalink
Browse files

Tables: Aligned pagination with Bootstrap pagination (fixes #5153)

  • Loading branch information...
Paul Jackson Paul Jackson
Paul Jackson authored and Paul Jackson committed May 7, 2014
1 parent 3e6ad27 commit 5bf62d05937208a1b90d85cbcddabd01fcda223f
Showing with 111 additions and 69 deletions.
  1. +69 −25 src/base/bootstrap-overrides/_base.scss
  2. +42 −44 src/plugins/tables/_base.scss
@@ -202,29 +202,6 @@ a {
}
}

[dir=rtl] {
.alert {
> {
:first-child {
margin-left: auto;
margin-right: 1.2em;

&:before {
margin-left: auto;
margin-right: -1.3em;
}
}
}
}

/*
* List unstyled RTL fix
*/
.list-unstyled {
padding-right: 0;
}
}

%label-alert-color-000 {
color: #000;
}
@@ -572,21 +549,38 @@ blockquote {
* * Add left/right arrows to previous/next buttons
* * Increase size of the pagination buttons
*/
%next-prev-icons {
content: " ";
display: inline-block;
font-family: "Glyphicons Halflings";
font-weight: 400;
}

.pagination,
.pager {
[rel="prev"] {
&:before {
content: "← ";
@extend %next-prev-icons;
content: "\e091";
margin-right: 0.5em;
}
}

[rel="next"] {
&:after {
content: " →";
@extend %next-prev-icons;
content: "\e092";
margin-left: 0.5em;
}
}

&.disabled {
background-color: $pagination-disabled-bg !important;
border-color: $pagination-disabled-border !important;
color: $pagination-disabled-color !important;
cursor: default;
}

> li {
> a,
> span {
@@ -616,6 +610,7 @@ blockquote {
}
}


/*
* Use button border style 'outset' to give buttons depth, except when disabled
*/
@@ -628,3 +623,52 @@ blockquote {
border-style: solid;
}
}


/*
* Right-to-left support
*/
[dir=rtl] {
.alert {
> {
:first-child {
margin-left: auto;
margin-right: 1.2em;

&:before {
margin-left: auto;
margin-right: -1.3em;
}
}
}
}

.list-unstyled {
padding-right: 0;
}

.pagination,
.pager {
[rel="prev"] {
@include border-left-radius(0);
@include border-right-radius($border-radius-base);

&:before {
content: "\e092";
margin-left: 0.5em;
margin-right: auto;
}
}

[rel="next"] {
@include border-left-radius($border-radius-base);
@include border-right-radius(0);

&:after {
content: "\e091";
margin-left: auto;
margin-right: 0.5em;
}
}
}
}
@@ -140,7 +140,7 @@
box-sizing: content-box;
}

%table_icons {
%table-icons {
content: " ";
display: inline-block;
font-family: "Glyphicons Halflings";
@@ -206,13 +206,13 @@ table {
margin-top: 2px;

&:before {
@extend %table_icons;
@extend %table-icons;
content: "\e093";
padding: 0 0.2em;
}

&:after {
@extend %table_icons;
@extend %table-icons;
content: "\e094";
padding: 0 0.2em;
}
@@ -913,70 +913,62 @@ table {
}

.dataTables_paginate {
@extend %tables-color-333;
padding-top: 0.75em;
padding-top: 1.25em;
text-align: center;

// Duplicating Bootstrap CSS
.paginate_button {
border: 1px solid transparent;
box-sizing: border-box;
color: #333 !important;
cursor: pointer;
display: inline-block;
margin-left: 2px;
min-width: 1.5em;
padding: 0.5em 1em;
text-align: center;
text-decoration: none !important;
background-color: $pagination-bg;
border: 1px solid $pagination-border;
color: $pagination-color;
line-height: $line-height-base;
margin-left: -1px;
padding: $padding-large-vertical $padding-large-horizontal;
position: relative;
text-decoration: none;

&.previous {
@include border-left-radius($border-radius-base);
margin-left: 0;

&:before {
@extend %table_icons;
@extend %table-icons;
content: "\e091";
margin-right: 0.5em;
}
}

&.next {
@include border-right-radius($border-radius-base);

&:after {
@extend %table_icons;
@extend %table-icons;
content: "\e092";
margin-left: 0.5em;
}
}

&.current {
@extend %tables-paginate-button-current;

&:hover {
@extend %tables-paginate-button-current;
}
background-color: $pagination-active-bg;
border-color: $pagination-active-border;
color: $pagination-active-color;
cursor: default;
z-index: 2;
}

&.disabled {
@extend %tables-paginate-button-disabled;

&:hover {
@extend %tables-paginate-button-disabled;
}

&:active {
@extend %tables-paginate-button-disabled;
}
}

&:hover {
background: linear-gradient(to bottom, #585858 0%, #111 100%);
background-color: #585858;
border: 1px solid #111;
color: #fff !important;
background-color: $pagination-disabled-bg !important;
border-color: $pagination-disabled-border !important;
color: $pagination-disabled-color !important;
cursor: default;
}

&:hover,
&:focus,
&:active {
background: linear-gradient(to bottom, #2b2b2b 0%, #0c0c0c 100%);
background-color: #2b2b2b;
box-shadow: inset 0 0 3px #111;
outline: none;
background-color: $pagination-hover-bg;
border-color: $pagination-hover-border;
color: $pagination-hover-color;
}
}
}
@@ -1087,12 +1079,15 @@ table {
}

.dataTables_paginate {
@extend %tables-color-333;
padding-top: 0.75em;
text-align: center;

.paginate_button {
display: inline-block;

&.previous {
@include border-left-radius(0);
@include border-right-radius($border-radius-base);

&:before {
content: "\e092";
margin-left: 0.5em;
@@ -1101,6 +1096,9 @@ table {
}

&.next {
@include border-left-radius($border-radius-base);
@include border-right-radius(0);

&:after {
content: "\e091";
margin-left: auto;

0 comments on commit 5bf62d0

Please sign in to comment.
You can’t perform that action at this time.