Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 8c2d7db

Browse files
smotornyuksmotornyuk
authored
Merge pull request #6848 from salsadigitalauorg/6840-fix-pagination-buttons
[6840]Fix-pagination-buttons
2 parents b3a9f5e + 4a20c47 commit 8c2d7db

3 files changed

Lines changed: 281 additions & 72 deletions

File tree

‎ckan/public/base/css/main-rtl.css‎

Lines changed: 79 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -4741,38 +4741,93 @@ textarea.form-control-lg {
47414741
color: #6c757d;
47424742
}
47434743

4744-
.pagination {
4745-
display: flex;
4746-
padding-left: 0;
4747-
list-style: none;
4744+
.pagination > li {
4745+
display: inline-flex;
47484746
}
4749-
4750-
.page-link {
4747+
.pagination > li > a, .pagination > li > span {
47514748
position: relative;
4752-
display: block;
4749+
float: left;
4750+
padding: 6px 12px;
4751+
margin-left: -1px;
4752+
line-height: 1.42857143;
47534753
color: #206b82;
4754+
text-decoration: none;
47544755
background-color: #fff;
4755-
border: 1px solid #dee2e6;
4756-
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
4757-
}
4758-
@media (prefers-reduced-motion: reduce) {
4759-
.page-link {
4760-
transition: none;
4761-
}
4756+
border: 1px solid #ddd;
47624757
}
4763-
.page-link:hover {
4758+
.pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus {
47644759
z-index: 2;
4765-
color: #1a5668;
4766-
text-decoration: none;
4767-
background-color: #e9ecef;
4768-
border-color: #dee2e6;
4760+
color: #113845;
4761+
background-color: #eeeeee;
4762+
border-color: #ddd;
4763+
}
4764+
.pagination > li:first-child > a, .pagination > li:first-child > span {
4765+
margin-left: 0;
4766+
border-top-left-radius: 4px;
4767+
border-bottom-left-radius: 4px;
4768+
}
4769+
.pagination > li:last-child > a, .pagination > li:last-child > span {
4770+
border-top-right-radius: 4px;
4771+
border-bottom-right-radius: 4px;
47694772
}
4770-
.page-link:focus {
4773+
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
47714774
z-index: 3;
4772-
color: #1a5668;
4773-
background-color: #e9ecef;
4774-
outline: 0;
4775-
box-shadow: 0 0 0 0.25rem rgba(32, 107, 130, 0.25);
4775+
color: #fff;
4776+
cursor: default;
4777+
background-color: #206b82;
4778+
border-color: #206b82;
4779+
}
4780+
.pagination > .disabled > span {
4781+
color: #777777;
4782+
cursor: not-allowed;
4783+
background-color: #fff;
4784+
border-color: #ddd;
4785+
}
4786+
.pagination > .disabled > span:hover, .pagination > .disabled > span:focus {
4787+
color: #777777;
4788+
cursor: not-allowed;
4789+
background-color: #fff;
4790+
border-color: #ddd;
4791+
}
4792+
.pagination > .disabled > a {
4793+
color: #777777;
4794+
cursor: not-allowed;
4795+
background-color: #fff;
4796+
border-color: #ddd;
4797+
}
4798+
.pagination > .disabled > a:hover, .pagination > .disabled > a:focus {
4799+
color: #777777;
4800+
cursor: not-allowed;
4801+
background-color: #fff;
4802+
border-color: #ddd;
4803+
}
4804+
4805+
.pagination-lg > li > a, .pagination-lg > li > span {
4806+
padding: 10px 16px;
4807+
font-size: 18px;
4808+
line-height: 1.3333333;
4809+
}
4810+
.pagination-lg > li:first-child > a, .pagination-lg > li:first-child > span {
4811+
border-top-left-radius: 6px;
4812+
border-bottom-left-radius: 6px;
4813+
}
4814+
.pagination-lg > li:last-child > a, .pagination-lg > li:last-child > span {
4815+
border-top-right-radius: 6px;
4816+
border-bottom-right-radius: 6px;
4817+
}
4818+
4819+
.pagination-sm > li > a, .pagination-sm > li > span {
4820+
padding: 5px 10px;
4821+
font-size: 12px;
4822+
line-height: 1.5;
4823+
}
4824+
.pagination-sm > li:first-child > a, .pagination-sm > li:first-child > span {
4825+
border-top-left-radius: 3px;
4826+
border-bottom-left-radius: 3px;
4827+
}
4828+
.pagination-sm > li:last-child > a, .pagination-sm > li:last-child > span {
4829+
border-top-right-radius: 3px;
4830+
border-bottom-right-radius: 3px;
47764831
}
47774832

47784833
.page-item:not(:first-child) .page-link {

‎ckan/public/base/css/main.css‎

Lines changed: 79 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -4741,38 +4741,93 @@ textarea.form-control-lg {
47414741
color: #6c757d;
47424742
}
47434743

4744-
.pagination {
4745-
display: flex;
4746-
padding-left: 0;
4747-
list-style: none;
4744+
.pagination > li {
4745+
display: inline-flex;
47484746
}
4749-
4750-
.page-link {
4747+
.pagination > li > a, .pagination > li > span {
47514748
position: relative;
4752-
display: block;
4749+
float: left;
4750+
padding: 6px 12px;
4751+
margin-left: -1px;
4752+
line-height: 1.42857143;
47534753
color: #206b82;
4754+
text-decoration: none;
47544755
background-color: #fff;
4755-
border: 1px solid #dee2e6;
4756-
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
4757-
}
4758-
@media (prefers-reduced-motion: reduce) {
4759-
.page-link {
4760-
transition: none;
4761-
}
4756+
border: 1px solid #ddd;
47624757
}
4763-
.page-link:hover {
4758+
.pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus {
47644759
z-index: 2;
4765-
color: #1a5668;
4766-
text-decoration: none;
4767-
background-color: #e9ecef;
4768-
border-color: #dee2e6;
4760+
color: #113845;
4761+
background-color: #eeeeee;
4762+
border-color: #ddd;
4763+
}
4764+
.pagination > li:first-child > a, .pagination > li:first-child > span {
4765+
margin-left: 0;
4766+
border-top-left-radius: 4px;
4767+
border-bottom-left-radius: 4px;
4768+
}
4769+
.pagination > li:last-child > a, .pagination > li:last-child > span {
4770+
border-top-right-radius: 4px;
4771+
border-bottom-right-radius: 4px;
47694772
}
4770-
.page-link:focus {
4773+
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
47714774
z-index: 3;
4772-
color: #1a5668;
4773-
background-color: #e9ecef;
4774-
outline: 0;
4775-
box-shadow: 0 0 0 0.25rem rgba(32, 107, 130, 0.25);
4775+
color: #fff;
4776+
cursor: default;
4777+
background-color: #206b82;
4778+
border-color: #206b82;
4779+
}
4780+
.pagination > .disabled > span {
4781+
color: #777777;
4782+
cursor: not-allowed;
4783+
background-color: #fff;
4784+
border-color: #ddd;
4785+
}
4786+
.pagination > .disabled > span:hover, .pagination > .disabled > span:focus {
4787+
color: #777777;
4788+
cursor: not-allowed;
4789+
background-color: #fff;
4790+
border-color: #ddd;
4791+
}
4792+
.pagination > .disabled > a {
4793+
color: #777777;
4794+
cursor: not-allowed;
4795+
background-color: #fff;
4796+
border-color: #ddd;
4797+
}
4798+
.pagination > .disabled > a:hover, .pagination > .disabled > a:focus {
4799+
color: #777777;
4800+
cursor: not-allowed;
4801+
background-color: #fff;
4802+
border-color: #ddd;
4803+
}
4804+
4805+
.pagination-lg > li > a, .pagination-lg > li > span {
4806+
padding: 10px 16px;
4807+
font-size: 18px;
4808+
line-height: 1.3333333;
4809+
}
4810+
.pagination-lg > li:first-child > a, .pagination-lg > li:first-child > span {
4811+
border-top-left-radius: 6px;
4812+
border-bottom-left-radius: 6px;
4813+
}
4814+
.pagination-lg > li:last-child > a, .pagination-lg > li:last-child > span {
4815+
border-top-right-radius: 6px;
4816+
border-bottom-right-radius: 6px;
4817+
}
4818+
4819+
.pagination-sm > li > a, .pagination-sm > li > span {
4820+
padding: 5px 10px;
4821+
font-size: 12px;
4822+
line-height: 1.5;
4823+
}
4824+
.pagination-sm > li:first-child > a, .pagination-sm > li:first-child > span {
4825+
border-top-left-radius: 3px;
4826+
border-bottom-left-radius: 3px;
4827+
}
4828+
.pagination-sm > li:last-child > a, .pagination-sm > li:last-child > span {
4829+
border-top-right-radius: 3px;
4830+
border-bottom-right-radius: 3px;
47764831
}
47774832

47784833
.page-item:not(:first-child) .page-link {

‎ckan/public/base/vendor/bootstrap/scss/_pagination.scss‎

Lines changed: 123 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,130 @@
1-
.pagination {
2-
display: flex;
3-
@include list-unstyled();
1+
.pagination > {
2+
li {
3+
display: inline-flex;
4+
5+
> {
6+
a, span {
7+
position: relative;
8+
float: left;
9+
padding: 6px 12px;
10+
margin-left: -1px;
11+
line-height: 1.42857143;
12+
color: #206b82;
13+
text-decoration: none;
14+
background-color: #fff;
15+
border: 1px solid #ddd;
16+
}
17+
18+
a:hover, span:hover, a:focus, span:focus {
19+
z-index: 2;
20+
color: #113845;
21+
background-color: #eeeeee;
22+
border-color: #ddd;
23+
}
24+
}
25+
26+
&:first-child > {
27+
a, span {
28+
margin-left: 0;
29+
border-top-left-radius: 4px;
30+
border-bottom-left-radius: 4px;
31+
}
32+
}
33+
34+
&:last-child > {
35+
a, span {
36+
border-top-right-radius: 4px;
37+
border-bottom-right-radius: 4px;
38+
}
39+
}
40+
}
41+
42+
.active > {
43+
a, span, a:hover, span:hover, a:focus, span:focus {
44+
z-index: 3;
45+
color: #fff;
46+
cursor: default;
47+
background-color: #206b82;
48+
border-color: #206b82;
49+
}
50+
}
51+
52+
.disabled > {
53+
span {
54+
color: #777777;
55+
cursor: not-allowed;
56+
background-color: #fff;
57+
border-color: #ddd;
58+
59+
&:hover, &:focus {
60+
color: #777777;
61+
cursor: not-allowed;
62+
background-color: #fff;
63+
border-color: #ddd;
64+
}
65+
}
66+
67+
a {
68+
color: #777777;
69+
cursor: not-allowed;
70+
background-color: #fff;
71+
border-color: #ddd;
72+
73+
&:hover, &:focus {
74+
color: #777777;
75+
cursor: not-allowed;
76+
background-color: #fff;
77+
border-color: #ddd;
78+
}
79+
}
80+
}
481
}
582

6-
.page-link {
7-
position: relative;
8-
display: block;
9-
color: $pagination-color;
10-
text-decoration: if($link-decoration == none, null, none);
11-
background-color: $pagination-bg;
12-
border: $pagination-border-width solid $pagination-border-color;
13-
@include transition($pagination-transition);
14-
15-
&:hover {
16-
z-index: 2;
17-
color: $pagination-hover-color;
18-
text-decoration: if($link-hover-decoration == underline, none, null);
19-
background-color: $pagination-hover-bg;
20-
border-color: $pagination-hover-border-color;
83+
.pagination-lg > li {
84+
> {
85+
a, span {
86+
padding: 10px 16px;
87+
font-size: 18px;
88+
line-height: 1.3333333;
89+
}
2190
}
2291

23-
&:focus {
24-
z-index: 3;
25-
color: $pagination-focus-color;
26-
background-color: $pagination-focus-bg;
27-
outline: $pagination-focus-outline;
28-
box-shadow: $pagination-focus-box-shadow;
92+
&:first-child > {
93+
a, span {
94+
border-top-left-radius: 6px;
95+
border-bottom-left-radius: 6px;
96+
}
97+
}
98+
99+
&:last-child > {
100+
a, span {
101+
border-top-right-radius: 6px;
102+
border-bottom-right-radius: 6px;
103+
}
104+
}
105+
}
106+
107+
.pagination-sm > li {
108+
> {
109+
a, span {
110+
padding: 5px 10px;
111+
font-size: 12px;
112+
line-height: 1.5;
113+
}
114+
}
115+
116+
&:first-child > {
117+
a, span {
118+
border-top-left-radius: 3px;
119+
border-bottom-left-radius: 3px;
120+
}
121+
}
122+
123+
&:last-child > {
124+
a, span {
125+
border-top-right-radius: 3px;
126+
border-bottom-right-radius: 3px;
127+
}
29128
}
30129
}
31130

0 commit comments

Comments
 (0)