@sb1/ffe-pagination 1.1.0 → 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 (3) hide show
  1. package/less/pagination.less +83 -61
  2. package/less/theme.less +10 -0
  3. package/package.json +2 -2
package/less/pagination.less CHANGED
@@ -1,6 +1,9 @@
1
- @import '@sb1/ffe-buttons/less/base-button';
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);
@@ -16,84 +19,103 @@
16
19
  flex-direction: row;
17
20
  }
18
21
 
19
- &-per-page {
20
- display: flex;
21
- align-items: center;
22
- gap: var(--ffe-spacing-xs);
23
-
24
- &--label {
25
- padding-bottom: 0;
26
- width: 100%;
27
- color: var(--ffe-g-text-color);
28
- }
22
+ &:empty {
23
+ display: none;
24
+ }
25
+ }
29
26
 
30
- &--dropdown {
31
- min-width: fit-content;
32
- }
27
+ &__rows-item {
28
+ flex-grow: 1;
29
+ }
33
30
 
34
- &--text {
35
- white-space: nowrap;
36
- }
37
- }
31
+ &__buttons {
32
+ display: flex;
33
+ justify-content: center;
34
+ gap: var(--buttons-distance);
38
35
  }
39
36
 
40
- &__controls {
37
+ &__page-buttons {
38
+ list-style: none;
39
+ margin: 0;
40
+ padding: 0;
41
41
  display: flex;
42
- align-items: center;
43
- gap: var(--ffe-spacing-xs);
42
+ flex-wrap: wrap;
44
43
  justify-content: center;
44
+ align-items: center;
45
+ gap: var(--buttons-distance);
46
+ }
47
+ }
45
48
 
46
- &-navigation {
47
- width: fit-content;
49
+ .ffe-pagination-info {
50
+ margin: 0;
51
+ }
48
52
 
49
- @media (max-width: @breakpoint-sm) {
50
- padding: var(--ffe-spacing-xs);
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
+ }
51
62
 
52
- &-text {
53
- .ffe-screenreader-only();
54
- }
55
- }
63
+ .ffe-pagination-navigation-block {
64
+ display: flex;
65
+ align-items: center;
66
+ gap: var(--ffe-spacing-xs);
56
67
 
57
- &--icon-only {
58
- padding: var(--ffe-spacing-xs);
68
+ &--hidden {
69
+ visibility: hidden;
70
+ }
59
71
 
60
- .ffe-pagination__controls-navigation-text {
61
- .ffe-screenreader-only();
62
- }
63
- }
72
+ &--next {
73
+ .ffe-icons {
74
+ transform: rotate(180deg);
64
75
  }
76
+ }
65
77
 
66
- &-link-container {
67
- display: flex;
68
- align-items: center;
69
- list-style-type: none;
70
- gap: var(--ffe-spacing-xs);
71
- padding: 0;
72
- }
78
+ &__button-text {
79
+ display: none;
80
+ }
73
81
 
74
- &-link {
75
- padding: calc(var(--ffe-spacing-xs) + 2px);
76
- width: fit-content;
82
+ @media (min-width: @breakpoint-sm) {
83
+ &__button-text {
84
+ display: block;
85
+ }
86
+ }
77
87
 
78
- &--active,
79
- &--active:focus {
80
- background-color: var(--ffe-farge-vann);
81
- color: var(--ffe-farge-hvit);
82
- border-color: var(--ffe-farge-vann);
83
- }
88
+ &--prev,
89
+ &--next,
90
+ &--no-text {
91
+ .ffe-button {
92
+ width: var(--circular-button-size);
93
+ aspect-ratio: 1;
94
+ }
95
+ }
84
96
 
85
- .ffe-button__label {
86
- min-width: 24px;
87
- min-height: 24px;
88
- display: flex;
89
- justify-content: center;
90
- 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;
91
103
  }
92
104
  }
105
+ }
106
+ }
93
107
 
94
- &-dots {
95
- margin: 0 var(--ffe-spacing-xs) 0 var(--ffe-spacing-xs);
96
- fill: var(--ffe-farge-vann);
97
- }
108
+ .ffe-pagination-dots {
109
+ fill: var(--ffe-v-pagination-dots);
110
+ }
111
+
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);
98
120
  }
99
121
  }
package/less/theme.less ADDED
@@ -0,0 +1,10 @@
1
+ :root,
2
+ :host {
3
+ --ffe-v-pagination-dots: var(--ffe-farge-vann);
4
+
5
+ @media (prefers-color-scheme: dark) {
6
+ .native {
7
+ --ffe-v-pagination-dots: var(--ffe-farge-vann-70);
8
+ }
9
+ }
10
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sb1/ffe-pagination",
3
- "version": "1.1.0",
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": "02aef7ac0ad6825e8e3269864397440e56f2d5aa"
27
+ "gitHead": "810df40d675067eec815d4fceaf43c47d644a1fc"
28
28
  }