@sb1/ffe-pagination 1.1.1 → 1.1.2

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 +75 -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);
@@ -15,107 +18,104 @@
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
+ }
47
+ }
35
48
 
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
- }
49
+ .ffe-pagination-info {
50
+ margin: 0;
51
+ }
50
52
 
51
- &-navigation {
52
- width: fit-content;
53
+ .ffe-pagination-rows-per-page {
54
+ display: flex;
55
+ align-items: center;
56
+ gap: var(--ffe-spacing-xs);
57
+ justify-content: end;
58
+ .ffe-dropdown {
59
+ max-width: 90px;
60
+ }
61
+ }
53
62
 
54
- @media (max-width: @breakpoint-sm) {
55
- padding: var(--ffe-spacing-xs);
63
+ .ffe-pagination-navigation-block {
64
+ display: flex;
65
+ align-items: center;
66
+ gap: var(--ffe-spacing-xs);
56
67
 
57
- &-text {
58
- .ffe-screenreader-only();
59
- }
60
- }
68
+ &--hidden {
69
+ visibility: hidden;
70
+ }
61
71
 
62
- &--icon-only {
63
- padding: var(--ffe-spacing-xs);
72
+ &--next {
73
+ .ffe-icons {
74
+ transform: rotate(180deg);
75
+ }
76
+ }
64
77
 
65
- .ffe-pagination__controls-navigation-text {
66
- .ffe-screenreader-only();
67
- }
68
- }
78
+ &__button-text {
79
+ display: none;
80
+ }
69
81
 
70
- &--hidden {
71
- visibility: hidden;
72
- }
82
+ @media (min-width: @breakpoint-sm) {
83
+ &__button-text {
84
+ display: block;
73
85
  }
86
+ }
74
87
 
75
- &-link-container {
76
- display: flex;
77
- align-items: center;
78
- list-style-type: none;
79
- gap: var(--ffe-spacing-xs);
80
- padding: 0;
88
+ &--prev,
89
+ &--next,
90
+ &--no-text {
91
+ .ffe-button {
92
+ width: var(--circular-button-size);
93
+ aspect-ratio: 1;
81
94
  }
95
+ }
82
96
 
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
- }
92
-
93
- .ffe-button__label {
94
- min-width: 24px;
95
- min-height: 24px;
96
- display: flex;
97
- justify-content: center;
98
- align-items: center;
97
+ &--prev:not(&--no-text),
98
+ &--next:not(&--no-text) {
99
+ @media (min-width: @breakpoint-sm) {
100
+ .ffe-button {
101
+ width: auto;
102
+ aspect-ratio: auto;
99
103
  }
100
104
  }
101
-
102
- &-dots {
103
- margin: 0 var(--ffe-spacing-xs);
104
- fill: var(--ffe-v-pagination-dots);
105
- }
106
105
  }
107
106
  }
108
107
 
109
- .ffe-pagination-info {
110
- margin: 0;
108
+ .ffe-pagination-dots {
109
+ fill: var(--ffe-v-pagination-dots);
111
110
  }
112
111
 
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;
112
+ .ffe-pagination-page-button {
113
+ width: var(--circular-button-size);
114
+ aspect-ratio: 1;
115
+ &--active,
116
+ &--active:focus {
117
+ background-color: var(--ffe-farge-vann);
118
+ color: var(--ffe-farge-hvit);
119
+ border-color: var(--ffe-farge-vann);
120
120
  }
121
121
  }
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.2",
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": "810df40d675067eec815d4fceaf43c47d644a1fc"
28
28
  }