@sb1/ffe-pagination 1.1.1 → 1.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/less/pagination.less +92 -75
  2. package/package.json +2 -2
package/less/pagination.less CHANGED
@@ -1,6 +1,9 @@
1
1
  @import 'theme';
2
2
 
3
3
  .ffe-pagination {
4
+ --circular-button-size: 2.5rem;
5
+ --buttons-distance: var(--ffe-spacing-xs);
6
+
4
7
  display: flex;
5
8
  flex-direction: column;
6
9
  gap: var(--ffe-spacing-md);
@@ -10,112 +13,126 @@
10
13
  flex-direction: column;
11
14
  justify-content: space-between;
12
15
  align-items: center;
13
- gap: var(--ffe-spacing-xs);
16
+ gap: var(--ffe-spacing-sm);
14
17
 
15
18
  @media (min-width: @breakpoint-sm) {
16
19
  flex-direction: row;
17
20
  }
21
+
22
+ &:empty {
23
+ display: none;
24
+ }
18
25
  }
19
26
 
20
27
  &__rows-item {
21
28
  flex-grow: 1;
22
29
  }
23
30
 
24
- &__controls {
31
+ &__buttons {
25
32
  display: flex;
26
33
  justify-content: center;
27
- gap: var(--ffe-spacing-xs);
34
+ gap: var(--buttons-distance);
35
+ }
28
36
 
29
- &-prev,
30
- &-pages,
31
- &-next {
32
- display: flex;
33
- align-items: center;
34
- }
37
+ &__page-buttons {
38
+ list-style: none;
39
+ margin: 0;
40
+ padding: 0;
41
+ display: flex;
42
+ flex-wrap: wrap;
43
+ justify-content: center;
44
+ align-items: center;
45
+ gap: var(--buttons-distance);
46
+ }
35
47
 
36
- &-prev {
37
- justify-content: end;
38
- }
39
- &-pages {
40
- gap: var(--ffe-spacing-xs);
41
- justify-content: center;
42
- flex-wrap: wrap;
43
- }
44
- &-next {
45
- justify-content: start;
46
- .ffe-icons {
47
- transform: rotate(180deg);
48
- }
49
- }
48
+ &__buttons-nav {
49
+ flex-shrink: 0;
50
+ }
51
+ }
50
52
 
51
- &-navigation {
52
- width: fit-content;
53
+ .ffe-pagination-info {
54
+ margin: 0;
55
+ width: 100%;
56
+ text-align: center;
53
57
 
54
- @media (max-width: @breakpoint-sm) {
55
- padding: var(--ffe-spacing-xs);
58
+ @media (min-width: @breakpoint-sm) {
59
+ text-align: left;
60
+ }
61
+ }
56
62
 
57
- &-text {
58
- .ffe-screenreader-only();
59
- }
60
- }
63
+ .ffe-pagination-rows-per-page {
64
+ display: flex;
65
+ align-items: center;
66
+ gap: var(--ffe-spacing-xs);
67
+ width: 100%;
68
+ justify-content: center;
61
69
 
62
- &--icon-only {
63
- padding: var(--ffe-spacing-xs);
70
+ @media (min-width: @breakpoint-sm) {
71
+ justify-content: end;
72
+ }
64
73
 
65
- .ffe-pagination__controls-navigation-text {
66
- .ffe-screenreader-only();
67
- }
68
- }
74
+ .ffe-dropdown {
75
+ max-width: 90px;
76
+ }
77
+ }
69
78
 
70
- &--hidden {
71
- visibility: hidden;
72
- }
73
- }
79
+ .ffe-pagination-navigation-block {
80
+ display: flex;
81
+ align-items: center;
82
+ gap: var(--ffe-spacing-xs);
74
83
 
75
- &-link-container {
76
- display: flex;
77
- align-items: center;
78
- list-style-type: none;
79
- gap: var(--ffe-spacing-xs);
80
- padding: 0;
84
+ &--hidden {
85
+ visibility: hidden;
86
+ }
87
+
88
+ &--next {
89
+ .ffe-icons {
90
+ transform: rotate(180deg);
81
91
  }
92
+ }
82
93
 
83
- &-page-button {
84
- padding: calc(var(--ffe-spacing-xs) + 2px);
85
- width: fit-content;
86
- &--active,
87
- &--active:focus {
88
- background-color: var(--ffe-farge-vann);
89
- color: var(--ffe-farge-hvit);
90
- border-color: var(--ffe-farge-vann);
91
- }
94
+ &__button-text {
95
+ display: none;
96
+ }
92
97
 
93
- .ffe-button__label {
94
- min-width: 24px;
95
- min-height: 24px;
96
- display: flex;
97
- justify-content: center;
98
- align-items: center;
99
- }
98
+ @media (min-width: @breakpoint-sm) {
99
+ &__button-text {
100
+ display: block;
100
101
  }
102
+ }
101
103
 
102
- &-dots {
103
- margin: 0 var(--ffe-spacing-xs);
104
- fill: var(--ffe-v-pagination-dots);
104
+ &--prev,
105
+ &--next,
106
+ &--no-text {
107
+ .ffe-button {
108
+ width: var(--circular-button-size);
109
+ aspect-ratio: 1;
110
+ }
111
+ }
112
+
113
+ &--prev:not(&--no-text),
114
+ &--next:not(&--no-text) {
115
+ @media (min-width: @breakpoint-sm) {
116
+ .ffe-button {
117
+ width: auto;
118
+ aspect-ratio: auto;
119
+ }
105
120
  }
106
121
  }
107
122
  }
108
123
 
109
- .ffe-pagination-info {
110
- margin: 0;
124
+ .ffe-pagination-dots {
125
+ fill: var(--ffe-v-pagination-dots);
111
126
  }
112
127
 
113
- .ffe-pagination-rows-per-page {
114
- display: flex;
115
- align-items: center;
116
- gap: var(--ffe-spacing-xs);
117
- justify-content: end;
118
- .ffe-dropdown {
119
- max-width: 90px;
128
+ .ffe-pagination-page-button {
129
+ width: var(--circular-button-size);
130
+ aspect-ratio: 1;
131
+ white-space: nowrap;
132
+ &--active,
133
+ &--active:focus {
134
+ background-color: var(--ffe-farge-vann);
135
+ color: var(--ffe-farge-hvit);
136
+ border-color: var(--ffe-farge-vann);
120
137
  }
121
138
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sb1/ffe-pagination",
3
- "version": "1.1.1",
3
+ "version": "1.1.3",
4
4
  "description": "Pagination in ffe",
5
5
  "license": "MIT",
6
6
  "author": "SpareBank 1",
@@ -24,5 +24,5 @@
24
24
  "publishConfig": {
25
25
  "access": "public"
26
26
  },
27
- "gitHead": "580413671131e6db2bddd427096813eb10818973"
27
+ "gitHead": "3409852afba427fc35a5638286af7dcfca1ef823"
28
28
  }