@conduction/components 2.2.14 → 2.2.16

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 (4) hide show
  1. package/README.md +1 -0
  2. package/lib/components/Pagination/Pagination.module.css +41 -5
  3. package/package.json +1 -1
  4. package/src/components/Pagination/Pagination.module.css +41 -5
package/README.md CHANGED
@@ -4,6 +4,7 @@
4
4
 
5
5
  - **Version 2.2 (breaking changes from 2.1.x)**
6
6
 
7
+ - 2.2.15/2.2.16: Added more NLDS options to Pagination.
7
8
  - 2.2.13/2.2.14:
8
9
  - Updated Textarea and all Input components to allow aria-label.
9
10
  - Updated Select components.
package/lib/components/Pagination/Pagination.module.css CHANGED
@@ -20,13 +20,30 @@
20
20
  --conduction-pagination-item-border-style: unset;
21
21
  --conduction-pagination-item-border-color: unset;
22
22
 
23
+ /* --conduction-pagination-navigation-button-background-color: #4376fc; */
24
+ /* --conduction-pagination-navigation-button-color: #ffffff; */
25
+ /* --conduction-pagination-navigation-button-border-width: 1px; */
26
+ /* --conduction-pagination-navigation-button-border-style: solid; */
27
+ /* --conduction-pagination-navigation-button-border-color: #4376fc; */
28
+ /* --conduction-pagination-navigation-button-border-radius: 1px; */
23
29
  --conduction-pagination-navigation-button-padding-inline-start: 8px;
24
30
  --conduction-pagination-navigation-button-padding-inline-end: 8px;
25
31
  --conduction-pagination-navigation-button-padding-block-start: 0px;
26
32
  --conduction-pagination-navigation-button-padding-block-end: 0px;
27
33
 
28
- --conduction-pagination-disabled-color: #d1d1d1;
29
- --conduction-pagination-disabled-background-color: #fefefe;
34
+ --conduction-pagination-navigation-button-disabled-color: #d1d1d1;
35
+ --conduction-pagination-navigation-button-disabled-background-color: #fefefe;
36
+ /* --conduction-pagination-navigation-button-disabled-border-width: 1px; */
37
+ /* --conduction-pagination-navigation-button-disabled-border-style: solid; */
38
+ /* --conduction-pagination-navigation-button-disabled-border-color: #4376fc; */
39
+ /* --conduction-pagination-navigation-button-disabled-border-radius: 1px; */
40
+
41
+ --conduction-pagination-navigation-button-hover-color: #d1d1d1;
42
+ --conduction-pagination-navigation-button-hover-background-color: #fefefe;
43
+ /* --conduction-pagination-navigation-button-hover-border-width: 1px; */
44
+ /* --conduction-pagination-navigation-button-hover-border-style: solid; */
45
+ /* --conduction-pagination-navigation-button-hover-border-color: #4376fc; */
46
+ /* --conduction-pagination-navigation-button-hover-border-radius: 1px; */
30
47
 
31
48
  --conduction-pagination-current-page-background-color: #4376fc;
32
49
  --conduction-pagination-current-page-color: #ffffff;
@@ -97,9 +114,22 @@
97
114
  cursor: not-allowed;
98
115
  }
99
116
 
100
- .container > li.disabled > a {
101
- color: var(--conduction-pagination-disabled-color);
102
- background-color: var(--conduction-pagination-disabled-background-color);
117
+ .container > li.disabled > a > .button {
118
+ color: var(--conduction-pagination-navigation-button-disabled-color) !important;
119
+ background-color: var(--conduction-pagination-navigation-button-disabled-background-color) !important;
120
+ border-width: var(--conduction-pagination-navigation-button-disabled-border-width, var(--utrecht-button-border-width));
121
+ border-style: var(--conduction-pagination-navigation-button-disabled-border-style, var(--utrecht-button-border-style));
122
+ border-color: var(--conduction-pagination-navigation-button-disabled-border-color, var(--utrecht-button-border-color));
123
+ border-radius: var(--conduction-pagination-navigation-button-disabled-border-radius, var(--utrecht-button-border-radius));
124
+ }
125
+
126
+ .container > li:hover:not(.disabled) > a > .button {
127
+ color: var(--conduction-pagination-navigation-button-hover-color) !important;
128
+ background-color: var(--conduction-pagination-navigation-button-hover-background-color) !important;
129
+ border-width: var(--conduction-pagination-navigation-button-hover-border-width, var(--utrecht-button-border-width));
130
+ border-style: var(--conduction-pagination-navigation-button-hover-border-style, var(--utrecht-button-border-style));
131
+ border-color: var(--conduction-pagination-navigation-button-hover-border-color, var(--utrecht-button-border-color));
132
+ border-radius: var(--conduction-pagination-navigation-button-hover-border-radius, var(--utrecht-button-border-radius));
103
133
  }
104
134
 
105
135
  .container > li:hover:not(.disabled):not(.currentPage) {
@@ -115,6 +145,12 @@
115
145
  }
116
146
 
117
147
  .button {
148
+ background-color: var(--conduction-pagination-navigation-button-background-color, var(--utrecht-button-background-color)) !important;
149
+ color: var(--conduction-pagination-navigation-button-color, var(--utrecht-button-color)) !important;
150
+ border-width: var(--conduction-pagination-navigation-button-border-width, var(--utrecht-button-border-width)) !important;
151
+ border-style: var(--conduction-pagination-navigation-button-border-style, var(--utrecht-button-border-style)) !important;
152
+ border-color: var(--conduction-pagination-navigation-button-border-color, var(--utrecht-button-border-color)) !important;
153
+ border-radius: var(--conduction-pagination-navigation-button-border-radius, var(--utrecht-button-border-radius));
118
154
  padding-inline-start: var(--conduction-pagination-navigation-button-padding-inline-start) !important;
119
155
  padding-inline-end: var(--conduction-pagination-navigation-button-padding-inline-end) !important;
120
156
  padding-block-start: var(--conduction-pagination-navigation-button-padding-block-start) !important;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@conduction/components",
3
- "version": "2.2.14",
3
+ "version": "2.2.16",
4
4
  "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
5
5
  "main": "lib/index.js",
6
6
  "scripts": {
package/src/components/Pagination/Pagination.module.css CHANGED
@@ -20,13 +20,30 @@
20
20
  --conduction-pagination-item-border-style: unset;
21
21
  --conduction-pagination-item-border-color: unset;
22
22
 
23
+ /* --conduction-pagination-navigation-button-background-color: #4376fc; */
24
+ /* --conduction-pagination-navigation-button-color: #ffffff; */
25
+ /* --conduction-pagination-navigation-button-border-width: 1px; */
26
+ /* --conduction-pagination-navigation-button-border-style: solid; */
27
+ /* --conduction-pagination-navigation-button-border-color: #4376fc; */
28
+ /* --conduction-pagination-navigation-button-border-radius: 1px; */
23
29
  --conduction-pagination-navigation-button-padding-inline-start: 8px;
24
30
  --conduction-pagination-navigation-button-padding-inline-end: 8px;
25
31
  --conduction-pagination-navigation-button-padding-block-start: 0px;
26
32
  --conduction-pagination-navigation-button-padding-block-end: 0px;
27
33
 
28
- --conduction-pagination-disabled-color: #d1d1d1;
29
- --conduction-pagination-disabled-background-color: #fefefe;
34
+ --conduction-pagination-navigation-button-disabled-color: #d1d1d1;
35
+ --conduction-pagination-navigation-button-disabled-background-color: #fefefe;
36
+ /* --conduction-pagination-navigation-button-disabled-border-width: 1px; */
37
+ /* --conduction-pagination-navigation-button-disabled-border-style: solid; */
38
+ /* --conduction-pagination-navigation-button-disabled-border-color: #4376fc; */
39
+ /* --conduction-pagination-navigation-button-disabled-border-radius: 1px; */
40
+
41
+ --conduction-pagination-navigation-button-hover-color: #d1d1d1;
42
+ --conduction-pagination-navigation-button-hover-background-color: #fefefe;
43
+ /* --conduction-pagination-navigation-button-hover-border-width: 1px; */
44
+ /* --conduction-pagination-navigation-button-hover-border-style: solid; */
45
+ /* --conduction-pagination-navigation-button-hover-border-color: #4376fc; */
46
+ /* --conduction-pagination-navigation-button-hover-border-radius: 1px; */
30
47
 
31
48
  --conduction-pagination-current-page-background-color: #4376fc;
32
49
  --conduction-pagination-current-page-color: #ffffff;
@@ -97,9 +114,22 @@
97
114
  cursor: not-allowed;
98
115
  }
99
116
 
100
- .container > li.disabled > a {
101
- color: var(--conduction-pagination-disabled-color);
102
- background-color: var(--conduction-pagination-disabled-background-color);
117
+ .container > li.disabled > a > .button {
118
+ color: var(--conduction-pagination-navigation-button-disabled-color) !important;
119
+ background-color: var(--conduction-pagination-navigation-button-disabled-background-color) !important;
120
+ border-width: var(--conduction-pagination-navigation-button-disabled-border-width, var(--utrecht-button-border-width));
121
+ border-style: var(--conduction-pagination-navigation-button-disabled-border-style, var(--utrecht-button-border-style));
122
+ border-color: var(--conduction-pagination-navigation-button-disabled-border-color, var(--utrecht-button-border-color));
123
+ border-radius: var(--conduction-pagination-navigation-button-disabled-border-radius, var(--utrecht-button-border-radius));
124
+ }
125
+
126
+ .container > li:hover:not(.disabled) > a > .button {
127
+ color: var(--conduction-pagination-navigation-button-hover-color) !important;
128
+ background-color: var(--conduction-pagination-navigation-button-hover-background-color) !important;
129
+ border-width: var(--conduction-pagination-navigation-button-hover-border-width, var(--utrecht-button-border-width));
130
+ border-style: var(--conduction-pagination-navigation-button-hover-border-style, var(--utrecht-button-border-style));
131
+ border-color: var(--conduction-pagination-navigation-button-hover-border-color, var(--utrecht-button-border-color));
132
+ border-radius: var(--conduction-pagination-navigation-button-hover-border-radius, var(--utrecht-button-border-radius));
103
133
  }
104
134
 
105
135
  .container > li:hover:not(.disabled):not(.currentPage) {
@@ -115,6 +145,12 @@
115
145
  }
116
146
 
117
147
  .button {
148
+ background-color: var(--conduction-pagination-navigation-button-background-color, var(--utrecht-button-background-color)) !important;
149
+ color: var(--conduction-pagination-navigation-button-color, var(--utrecht-button-color)) !important;
150
+ border-width: var(--conduction-pagination-navigation-button-border-width, var(--utrecht-button-border-width)) !important;
151
+ border-style: var(--conduction-pagination-navigation-button-border-style, var(--utrecht-button-border-style)) !important;
152
+ border-color: var(--conduction-pagination-navigation-button-border-color, var(--utrecht-button-border-color)) !important;
153
+ border-radius: var(--conduction-pagination-navigation-button-border-radius, var(--utrecht-button-border-radius));
118
154
  padding-inline-start: var(--conduction-pagination-navigation-button-padding-inline-start) !important;
119
155
  padding-inline-end: var(--conduction-pagination-navigation-button-padding-inline-end) !important;
120
156
  padding-block-start: var(--conduction-pagination-navigation-button-padding-block-start) !important;