Skip to content

Commit bb9649b

Browse files
AlexanderZhukCoherentAlexanderZhukCoherent
committed
Merge pull request #2 from angular-data-grid/pagination
implement pagination
2 parents 66295cf + 4814c55 commit bb9649b

File tree

19 files changed

+1360
-399
lines changed

19 files changed

+1360
-399
lines changed

‎demo/demo.css‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
:focus {
2+
outline: none; }
3+
4+
.pagination {
5+
display: inline-block;
6+
box-sizing: border-box; }
7+
8+
.pagination > li {
9+
display: inline-block;
10+
vertical-align: middle;
11+
width: auto;
12+
height: 30px;
13+
position: relative;
14+
border-radius: 2px;
15+
box-sizing: border-box; }
16+
17+
.pagination a {
18+
color: #444;
19+
font-size: 16px;
20+
padding: 0 10px;
21+
line-height: 30px;
22+
display: inline-block;
23+
text-decoration: none;
24+
box-sizing: border-box; }
25+
.pagination a .md-ripple-container {
26+
border-radius: 2px; }
27+
28+
.pagination-prev a,
29+
.pagination-next a,
30+
.pagination-first a,
31+
.pagination-last a {
32+
padding: 3px 5px; }
33+
34+
.pagination-prev svg,
35+
.pagination-next svg,
36+
.pagination-first svg,
37+
.pagination-last svg {
38+
width: 24px;
39+
height: 24px; }
40+
41+
.pagination-none-svg svg {
42+
display: none !important; }
43+
44+
.pagination-none-svg .pagination-prev a,
45+
.pagination-none-svg .pagination-next a,
46+
.pagination-none-svg .pagination-first a,
47+
.pagination-none-svg .pagination-last a {
48+
width: 30px;
49+
text-align: center;
50+
line-height: 24px; }
51+
52+
.pagination-page {
53+
transition: background .1s ease-out, color .1s ease-out; }
54+
.pagination-page.active {
55+
background: #106cc8; }
56+
.pagination-page.active a {
57+
color: #fff; }
58+
59+
.pagination {
60+
transition: background .1s ease-out, color .1s ease-out; }
61+
.pagination .active {
62+
background: #106cc8; }
63+
.pagination .active a {
64+
color: #fff; }
65+
66+
.grid-data-table td {
67+
border-bottom: 1px rgba(0, 0, 0, 0.12) solid;
68+
padding: 12px; }
69+
70+
.grid-data-table th {
71+
padding: 0 12px;
72+
border-bottom: 1px rgba(0, 0, 0, 0.12) solid; }
73+
74+
th.sortable {
75+
line-height: 24px;
76+
padding-right: 31px; }
77+
th.sortable svg {
78+
height: 18px;
79+
width: 18px;
80+
margin: 0 4px;
81+
transition: fill .25s,-webkit-transform .25s;
82+
transition: fill .25s,transform .25s;
83+
vertical-align: middle;
84+
display: none !important; }
85+
th.sortable.sort-descent {
86+
padding-right: 0; }
87+
th.sortable.sort-descent svg {
88+
display: inline-block !important; }
89+
th.sortable.sort-ascent {
90+
padding-right: 0; }
91+
th.sortable.sort-ascent svg {
92+
display: inline-block !important;
93+
-webkit-transform: rotate(180deg);
94+
transform: rotate(180deg); }
95+
96+
.items-per-page .active {
97+
background: #106cc8; }
98+
.items-per-page .active a {
99+
color: #fff; }
100+
101+
.items-per-page a {
102+
cursor: pointer; }

demo/app.js renamed to demo/demoApp.js

File renamed without changes.

‎dist/dataGrid.css‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
:focus {
2+
outline: none; }
3+
4+
.pagination {
5+
display: inline-block;
6+
box-sizing: border-box; }
7+
8+
.pagination > li {
9+
display: inline-block;
10+
vertical-align: middle;
11+
width: auto;
12+
height: 30px;
13+
position: relative;
14+
border-radius: 2px;
15+
box-sizing: border-box; }
16+
17+
.pagination a {
18+
color: #444;
19+
font-size: 16px;
20+
padding: 0 10px;
21+
line-height: 30px;
22+
display: inline-block;
23+
text-decoration: none;
24+
box-sizing: border-box; }
25+
.pagination a .md-ripple-container {
26+
border-radius: 2px; }
27+
28+
.pagination-prev a,
29+
.pagination-next a,
30+
.pagination-first a,
31+
.pagination-last a {
32+
padding: 3px 5px; }
33+
34+
.pagination-prev svg,
35+
.pagination-next svg,
36+
.pagination-first svg,
37+
.pagination-last svg {
38+
width: 24px;
39+
height: 24px; }
40+
41+
.pagination-none-svg svg {
42+
display: none !important; }
43+
44+
.pagination-none-svg .pagination-prev a,
45+
.pagination-none-svg .pagination-next a,
46+
.pagination-none-svg .pagination-first a,
47+
.pagination-none-svg .pagination-last a {
48+
width: 30px;
49+
text-align: center;
50+
line-height: 24px; }
51+
52+
.pagination-page {
53+
transition: background .1s ease-out, color .1s ease-out; }
54+
.pagination-page.active {
55+
background: #106cc8; }
56+
.pagination-page.active a {
57+
color: #fff; }
58+
59+
.pagination {
60+
transition: background .1s ease-out, color .1s ease-out; }
61+
.pagination .active {
62+
background: #106cc8; }
63+
.pagination .active a {
64+
color: #fff; }
65+
66+
.grid-data-table td {
67+
border-bottom: 1px rgba(0, 0, 0, 0.12) solid;
68+
padding: 12px; }
69+
70+
.grid-data-table th {
71+
padding: 0 12px;
72+
border-bottom: 1px rgba(0, 0, 0, 0.12) solid; }
73+
74+
th.sortable {
75+
line-height: 24px;
76+
padding-right: 31px; }
77+
th.sortable svg {
78+
height: 18px;
79+
width: 18px;
80+
margin: 0 4px;
81+
transition: fill .25s,-webkit-transform .25s;
82+
transition: fill .25s,transform .25s;
83+
vertical-align: middle;
84+
display: none !important; }
85+
th.sortable.sort-descent {
86+
padding-right: 0; }
87+
th.sortable.sort-descent svg {
88+
display: inline-block !important; }
89+
th.sortable.sort-ascent {
90+
padding-right: 0; }
91+
th.sortable.sort-ascent svg {
92+
display: inline-block !important;
93+
-webkit-transform: rotate(180deg);
94+
transform: rotate(180deg); }
95+
96+
.items-per-page .active {
97+
background: #106cc8; }
98+
.items-per-page .active a {
99+
color: #fff; }
100+
101+
.items-per-page a {
102+
cursor: pointer; }

0 commit comments

Comments
 (0)