@nl-rvo/css-table 1.2.2 → 1.3.0

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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # `@nl-rvo/css-table`
2
2
 
3
+ ## 1.3.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 6c75ec9: Improved Table styling
8
+
3
9
  ## 1.2.2
4
10
 
5
11
  ### Patch Changes
package/dist/index.css CHANGED
@@ -6,6 +6,7 @@
6
6
  .rvo-table {
7
7
  border-collapse: collapse;
8
8
  border-spacing: 0;
9
+ table-layout: fixed;
9
10
  width: 100%;
10
11
  }
11
12
 
@@ -22,6 +23,9 @@
22
23
 
23
24
  .rvo-table-header {
24
25
  background-color: var(--rvo-table-header-background-color);
26
+ border-bottom-color: var(--rvo-table-header-border-bottom-color);
27
+ border-bottom-style: var(--rvo-table-header-border-bottom-style);
28
+ border-bottom-width: var(--rvo-table-header-border-bottom-width);
25
29
  color: var(--rvo-table-header-color);
26
30
  font-weight: var(--rvo-table-header-font-weight);
27
31
  padding-block-end: var(--rvo-table-header-padding-block-end);
@@ -31,6 +35,26 @@
31
35
  text-align: start;
32
36
  }
33
37
 
38
+ .rvo-table-header__sortable-container {
39
+ align-items: center;
40
+ display: flex;
41
+ gap: var(--rvo-space-sm);
42
+ }
43
+
44
+ .rvo-table-header__sortable-button {
45
+ min-inline-size: 0;
46
+ padding-block-end: 0;
47
+ padding-block-start: 0;
48
+ padding-inline-end: 0;
49
+ padding-inline-start: 0;
50
+ }
51
+
52
+ .rvo--table-header__sorting-icon {
53
+ display: flex;
54
+ height: var(--rvo-icon-md-height);
55
+ width: var(--rvo-icon-md-width);
56
+ }
57
+
34
58
  .rvo-table-header--sortable:hover {
35
59
  background-color: var(--rvo-table-header-sortable-hover-background-color);
36
60
  cursor: pointer;
@@ -1 +1 @@
1
- .rvo-table{border-collapse:collapse;border-spacing:0;width:100%}.rvo-table--responsive{overflow-x:auto;width:100%}.rvo-caption{font-size:var(--rvo-caption-font-size);padding-block-end:var(--rvo-caption-padding-block-end);text-align:start}.rvo-table-header{background-color:var(--rvo-table-header-background-color);color:var(--rvo-table-header-color);font-weight:var(--rvo-table-header-font-weight);padding-block-end:var(--rvo-table-header-padding-block-end);padding-block-start:var(--rvo-table-header-padding-block-start);padding-inline-end:var(--rvo-table-header-padding-inline-end);padding-inline-start:var(--rvo-table-header-padding-inline-start);text-align:start}.rvo-table-header--sortable:hover{background-color:var(--rvo-table-header-sortable-hover-background-color);cursor:pointer}.rvo-table-header--sortable:focus{background-color:var(--rvo-table-header-sortable-focus-background-color)}.rvo-table-cell{border-bottom:var(--rvo-table-cell-border-bottom-width) var(--rvo-table-cell-border-bottom-style) var(--rvo-table-cell-border-bottom-color);padding-block-end:var(--rvo-table-cell-padding-block-end);padding-block-start:var(--rvo-table-cell-padding-block-start);padding-inline-end:var(--rvo-table-cell-padding-inline-end);padding-inline-start:var(--rvo-table-cell-padding-inline-start)}.rvo-table-cell--numeric,.rvo-table-header--numeric{text-align:end}
1
+ .rvo-table{border-collapse:collapse;border-spacing:0;table-layout:fixed;width:100%}.rvo-table--responsive{overflow-x:auto;width:100%}.rvo-caption{font-size:var(--rvo-caption-font-size);padding-block-end:var(--rvo-caption-padding-block-end);text-align:start}.rvo-table-header{background-color:var(--rvo-table-header-background-color);border-bottom:var(--rvo-table-header-border-bottom-width) var(--rvo-table-header-border-bottom-style) var(--rvo-table-header-border-bottom-color);color:var(--rvo-table-header-color);font-weight:var(--rvo-table-header-font-weight);padding-block-end:var(--rvo-table-header-padding-block-end);padding-block-start:var(--rvo-table-header-padding-block-start);padding-inline-end:var(--rvo-table-header-padding-inline-end);padding-inline-start:var(--rvo-table-header-padding-inline-start);text-align:start}.rvo-table-header__sortable-container{align-items:center;display:flex;gap:var(--rvo-space-sm)}.rvo-table-header__sortable-button{min-inline-size:0;padding-block-end:0;padding-block-start:0;padding-inline-end:0;padding-inline-start:0}.rvo--table-header__sorting-icon{display:flex;height:var(--rvo-icon-md-height);width:var(--rvo-icon-md-width)}.rvo-table-header--sortable:hover{background-color:var(--rvo-table-header-sortable-hover-background-color);cursor:pointer}.rvo-table-header--sortable:focus{background-color:var(--rvo-table-header-sortable-focus-background-color)}.rvo-table-cell{border-bottom:var(--rvo-table-cell-border-bottom-width) var(--rvo-table-cell-border-bottom-style) var(--rvo-table-cell-border-bottom-color);padding-block-end:var(--rvo-table-cell-padding-block-end);padding-block-start:var(--rvo-table-cell-padding-block-start);padding-inline-end:var(--rvo-table-cell-padding-inline-end);padding-inline-start:var(--rvo-table-cell-padding-inline-start)}.rvo-table-cell--numeric,.rvo-table-header--numeric{text-align:end}
package/dist/index.mjs CHANGED
@@ -1 +1 @@
1
- export default ".rvo-table{border-collapse:collapse;border-spacing:0;width:100%}.rvo-table--responsive{overflow-x:auto;width:100%}.rvo-caption{font-size:var(--rvo-caption-font-size);padding-block-end:var(--rvo-caption-padding-block-end);text-align:start}.rvo-table-header{background-color:var(--rvo-table-header-background-color);color:var(--rvo-table-header-color);font-weight:var(--rvo-table-header-font-weight);padding-block-end:var(--rvo-table-header-padding-block-end);padding-block-start:var(--rvo-table-header-padding-block-start);padding-inline-end:var(--rvo-table-header-padding-inline-end);padding-inline-start:var(--rvo-table-header-padding-inline-start);text-align:start}.rvo-table-header--sortable:hover{background-color:var(--rvo-table-header-sortable-hover-background-color);cursor:pointer}.rvo-table-header--sortable:focus{background-color:var(--rvo-table-header-sortable-focus-background-color)}.rvo-table-cell{border-bottom:var(--rvo-table-cell-border-bottom-width) var(--rvo-table-cell-border-bottom-style) var(--rvo-table-cell-border-bottom-color);padding-block-end:var(--rvo-table-cell-padding-block-end);padding-block-start:var(--rvo-table-cell-padding-block-start);padding-inline-end:var(--rvo-table-cell-padding-inline-end);padding-inline-start:var(--rvo-table-cell-padding-inline-start)}.rvo-table-cell--numeric,.rvo-table-header--numeric{text-align:end}";
1
+ export default ".rvo-table{border-collapse:collapse;border-spacing:0;table-layout:fixed;width:100%}.rvo-table--responsive{overflow-x:auto;width:100%}.rvo-caption{font-size:var(--rvo-caption-font-size);padding-block-end:var(--rvo-caption-padding-block-end);text-align:start}.rvo-table-header{background-color:var(--rvo-table-header-background-color);border-bottom:var(--rvo-table-header-border-bottom-width) var(--rvo-table-header-border-bottom-style) var(--rvo-table-header-border-bottom-color);color:var(--rvo-table-header-color);font-weight:var(--rvo-table-header-font-weight);padding-block-end:var(--rvo-table-header-padding-block-end);padding-block-start:var(--rvo-table-header-padding-block-start);padding-inline-end:var(--rvo-table-header-padding-inline-end);padding-inline-start:var(--rvo-table-header-padding-inline-start);text-align:start}.rvo-table-header__sortable-container{align-items:center;display:flex;gap:var(--rvo-space-sm)}.rvo-table-header__sortable-button{min-inline-size:0;padding-block-end:0;padding-block-start:0;padding-inline-end:0;padding-inline-start:0}.rvo--table-header__sorting-icon{display:flex;height:var(--rvo-icon-md-height);width:var(--rvo-icon-md-width)}.rvo-table-header--sortable:hover{background-color:var(--rvo-table-header-sortable-hover-background-color);cursor:pointer}.rvo-table-header--sortable:focus{background-color:var(--rvo-table-header-sortable-focus-background-color)}.rvo-table-cell{border-bottom:var(--rvo-table-cell-border-bottom-width) var(--rvo-table-cell-border-bottom-style) var(--rvo-table-cell-border-bottom-color);padding-block-end:var(--rvo-table-cell-padding-block-end);padding-block-start:var(--rvo-table-cell-padding-block-start);padding-inline-end:var(--rvo-table-cell-padding-inline-end);padding-inline-start:var(--rvo-table-cell-padding-inline-start)}.rvo-table-cell--numeric,.rvo-table-header--numeric{text-align:end}";
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.2.2",
2
+ "version": "1.3.0",
3
3
  "author": "Community for NL Design System",
4
4
  "license": "CC0-1.0",
5
5
  "name": "@nl-rvo/css-table",
package/src/index.scss CHANGED
@@ -5,6 +5,7 @@
5
5
  .rvo-table {
6
6
  border-collapse: collapse;
7
7
  border-spacing: 0;
8
+ table-layout: fixed;
8
9
  width: 100%;
9
10
  }
10
11
 
@@ -21,6 +22,9 @@
21
22
 
22
23
  .rvo-table-header {
23
24
  background-color: var(--rvo-table-header-background-color);
25
+ border-bottom-color: var(--rvo-table-header-border-bottom-color);
26
+ border-bottom-style: var(--rvo-table-header-border-bottom-style);
27
+ border-bottom-width: var(--rvo-table-header-border-bottom-width);
24
28
  color: var(--rvo-table-header-color);
25
29
  font-weight: var(--rvo-table-header-font-weight);
26
30
  padding-block-end: var(--rvo-table-header-padding-block-end);
@@ -30,6 +34,26 @@
30
34
  text-align: start;
31
35
  }
32
36
 
37
+ .rvo-table-header__sortable-container {
38
+ align-items: center;
39
+ display: flex;
40
+ gap: var(--rvo-space-sm);
41
+ }
42
+
43
+ .rvo-table-header__sortable-button {
44
+ min-inline-size: 0;
45
+ padding-block-end: 0;
46
+ padding-block-start: 0;
47
+ padding-inline-end: 0;
48
+ padding-inline-start: 0;
49
+ }
50
+
51
+ .rvo--table-header__sorting-icon {
52
+ display: flex;
53
+ height: var(--rvo-icon-md-height);
54
+ width: var(--rvo-icon-md-width);
55
+ }
56
+
33
57
  .rvo-table-header--sortable:hover {
34
58
  background-color: var(--rvo-table-header-sortable-hover-background-color);
35
59
  cursor: pointer;