Skip to content

Commit ea57e81

Browse files
moyusmoyus
committed
Update pagination style
1 parent 712b5ad commit ea57e81

1 file changed

Lines changed: 117 additions & 56 deletions

File tree

‎scss/_components.pagination.scss‎

Lines changed: 117 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,113 +1,174 @@
11
/* ## Pagination
22
---------------------------------*/
3-
$pagination-border-width: 1px !default;
4-
$pagination-border-color: $grey-thin !default;
5-
$pagination-bg: $component-bg !default;
6-
$pagination-border-radius: $component-border-radius-md !default;
73
$pagination-font-size-sm: $text-size-sm !default;
84
$pagination-font-size-md: $text-size-md !default;
95
$pagination-font-size-lg: $text-size-lg !default;
6+
107
$pagination-padding-sm: $spacing-squish-xs !default;
118
$pagination-padding-md: $spacing-squish-sm !default;
129
$pagination-padding-lg: $spacing-squish-md !default;
10+
11+
$pagination-gutter: $spacing-stack-xs !default;
12+
$pagination-border-radius: $component-border-radius-md !default;
13+
$pagination-border-color: $grey-thin !default;
14+
$pagination-border-width: 1px !default;
15+
16+
$pagination-bg: transparent !default;
17+
$pagination-color: $grey-dark !default;
18+
$pagination-hover-bg: $grey-light !default;
19+
$pagination-hover-color: $grey-dark !default;
20+
$pagination-disabled-bg: transparent !default;
21+
$pagination-disabled-color: $grey-mute !default;
22+
$pagination-active-bg: $color-primary !default;
23+
$pagination-active-color: invert-color($color-primary) !default;
24+
25+
$pagination-bordered-bg: $component-bg !default;
26+
$pagination-bordered-hover-bg: $grey-light !default;
27+
$pagination-bordered-disabled-bg: $grey-shade !default;
28+
$pagination-bordered-disabled-color: $grey-mute !default;
29+
$pagination-bordered-active-bg: $color-primary !default;
30+
$pagination-bordered-active-color: invert-color($color-primary) !default;
31+
1332
$pagination-height-computed: $pagination-font-size-md * $line-height-normal + 2 * nth($pagination-padding-md, 1) + 2 * $pagination-border-width;
1433

1534
.pagination {
1635
display: flex;
1736
flex-wrap: wrap;
37+
align-items: center;
38+
margin-left: (0 - $pagination-gutter);
39+
margin-right: (0 - $pagination-gutter);
40+
}
41+
42+
.pagination__list {
43+
flex: 1 1 auto;
44+
display: flex;
45+
flex-wrap: wrap;
46+
margin: 0;
47+
padding: 0;
48+
list-style: none;
1849
}
1950

2051
.pagination__item {
21-
position: relative;
52+
flex: 0 0 auto;
53+
display: inline-block;
54+
margin: $pagination-gutter;
55+
}
56+
57+
.pagination__link,
58+
.pagination__gap {
2259
display: inline-block;
2360
height: $pagination-height-computed;
24-
min-width: $pagination-height-computed;;
25-
color: $grey-mute;
61+
min-width: $pagination-height-computed;
2662
font-size: $pagination-font-size-md;
63+
font-weight: normal;
64+
font-style: normal;
2765
line-height: $line-height-normal;
2866
padding: $pagination-padding-md;
2967
border-radius: $pagination-border-radius;
3068
border: $pagination-border-width solid transparent;
69+
background-color: $pagination-bg;
3170
white-space: nowrap;
3271
text-overflow: ellipsis;
3372
text-decoration: none;
3473
text-align: center;
35-
z-index: 5;
74+
box-shadow: none;
75+
appearance: none;
76+
}
77+
78+
.pagination__gap {
79+
color: rgba($pagination-color, 0.5);
80+
}
81+
82+
.pagination__link {
83+
color: $pagination-color;
84+
85+
&:focus {
86+
border-color: $color-primary;
87+
}
3688

3789
&:hover {
38-
color: $grey-dark;
39-
background-color: $grey-light;
90+
color: $pagination-hover-color;
91+
background-color: $pagination-hover-bg;
92+
}
93+
94+
&:active {
95+
color: $pagination-hover-color;
96+
border-color: transparent;
97+
background-color: darken($pagination-hover-bg, 2.5%);
4098
}
4199

42100
&.is-active {
43-
color: $white;
44-
border-color: $color-primary;
45-
background-color: $color-primary;
46-
z-index: 10;
101+
color: $pagination-active-color;
102+
font-weight: $font-weight-medium;
103+
border-color: $pagination-active-bg;
104+
background-color: $pagination-active-bg;
47105
}
48106

49-
&.is-disabled {
50-
color: $grey-thin;
107+
&.is-disabled,
108+
&[disabled] {
109+
opacity: 0.75;
110+
color: $pagination-disabled-color;
111+
background-color: $pagination-disabled-bg;
51112
cursor: not-allowed;
52113
}
53114
}
54115

116+
// modifier - variant
117+
.pagination--bordered {
118+
.pagination__link {
119+
border-color: $pagination-border-color;
120+
background-color: $pagination-bordered-bg;
121+
122+
&:focus {
123+
border-color: $color-primary;
124+
}
125+
126+
&:hover {
127+
background-color: $pagination-bordered-hover-bg;
128+
}
129+
130+
&:active {
131+
border-color: $pagination-border-color;
132+
background-color: darken($pagination-bordered-hover-bg, 2.5%);
133+
}
134+
135+
&.is-active {
136+
color: $pagination-bordered-active-color;
137+
border-color: $pagination-bordered-active-bg;
138+
background-color: $pagination-bordered-active-bg;
139+
}
140+
141+
&.is-disabled,
142+
&[disabled] {
143+
opacity: 0.75;
144+
color: $pagination-bordered-disabled-color;
145+
border-color: $pagination-bordered-disabled-bg;
146+
background-color: $pagination-bordered-disabled-bg;
147+
}
148+
}
149+
}
150+
151+
// modifier - sizing
55152
.pagination--sm {
56153
$pagination-height-computed: $pagination-font-size-sm * $line-height-normal + 2 * nth($pagination-padding-sm, 1) + 2 * $pagination-border-width;
57154

58-
.pagination__item {
155+
.pagination__link,
156+
.pagination__gap {
59157
height: $pagination-height-computed;
60158
min-width: $pagination-height-computed;
61159
font-size: $pagination-font-size-sm;
62160
padding: $pagination-padding-sm;
63-
border-radius: $pagination-border-radius;
64161
}
65162
}
66163

67164
.pagination--lg {
68165
$pagination-height-computed: $pagination-font-size-lg * $line-height-normal + 2 * nth($pagination-padding-lg, 1) + 2 * $pagination-border-width;
69166

70-
.pagination__item {
167+
.pagination__link,
168+
.pagination__gap {
71169
height: $pagination-height-computed;
72170
min-width: $pagination-height-computed;
73171
font-size: $pagination-font-size-lg;
74172
padding: $pagination-padding-lg;
75-
border-radius: $pagination-border-radius;
76-
}
77-
}
78-
79-
.pagination--bordered {
80-
.pagination__item {
81-
border-color: $pagination-border-color;
82-
margin-left: (0 - $pagination-border-width);
83-
background-color: $pagination-bg;
84-
85-
&:hover {
86-
background-color: $grey-light;
87-
}
88-
89-
&:first-child {
90-
border-top-right-radius: 0;
91-
border-bottom-right-radius: 0;
92-
}
93-
94-
&:last-child {
95-
border-top-left-radius: 0;
96-
border-bottom-left-radius: 0;
97-
}
98-
99-
&:nth-child(n+2):nth-last-child(n+2) {
100-
border-radius: 0;
101-
}
102-
103-
&.is-active {
104-
color: $white;
105-
border-color: darken($color-primary, 5%);
106-
background-color: $color-primary;
107-
}
108-
109-
&.is-disabled {
110-
background-color: $grey-shade;
111-
}
112173
}
113174
}

0 commit comments

Comments
 (0)