@nl-rvo/css-table 1.9.0 → 1.9.1
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 +6 -0
- package/{README.md → README.mdx} +13 -3
- package/dist/index.css +16 -16
- package/dist/index.min.css +1 -1
- package/dist/index.mjs +1 -1
- package/package.json +1 -1
- package/src/index.scss +12 -12
package/CHANGELOG.md
CHANGED
package/{README.md → README.mdx}
RENAMED
|
@@ -36,7 +36,7 @@ Een tabel bestaat uit:
|
|
|
36
36
|
- Tekst in een cell begint met een hoofdletter
|
|
37
37
|
- Data in een cell bevat geen meeteenheid. Die zet je in de header.
|
|
38
38
|
- Wees consistent in het gebruik van decimalen.
|
|
39
|
-
- De sortering wordt toegepast op alle items en over alle pagina
|
|
39
|
+
- De sortering wordt toegepast op alle items en over alle pagina's als er paginering is
|
|
40
40
|
- Kolommen die gesorteerd kunnen worden hebben een sorteer icoon.
|
|
41
41
|
|
|
42
42
|
## Rijkshuisstijl
|
|
@@ -45,5 +45,15 @@ De Rijkshuisstijl kent geen specifieke voorschriften wat betreft tabellen.
|
|
|
45
45
|
|
|
46
46
|
## Bronnen
|
|
47
47
|
|
|
48
|
-
-
|
|
49
|
-
|
|
48
|
+
- <a
|
|
49
|
+
href="https://web.archive.org/web/20220315222659/https://inclusive-components.design/data-tables/"
|
|
50
|
+
className="rvo-link"
|
|
51
|
+
>
|
|
52
|
+
Data Tables
|
|
53
|
+
</a>
|
|
54
|
+
- <a
|
|
55
|
+
href="https://web.archive.org/web/20211221193450/https://www.uxmatters.com/mt/archives/2020/07/designing-mobile-tables.php"
|
|
56
|
+
className="rvo-link"
|
|
57
|
+
>
|
|
58
|
+
Designing Mobile Tables - Steven Hoober
|
|
59
|
+
</a>
|
package/dist/index.css
CHANGED
|
@@ -5,12 +5,12 @@
|
|
|
5
5
|
.rvo-table {
|
|
6
6
|
border-collapse: collapse;
|
|
7
7
|
border-spacing: 0;
|
|
8
|
+
inline-size: 100%;
|
|
8
9
|
table-layout: fixed;
|
|
9
|
-
width: 100%;
|
|
10
10
|
}
|
|
11
11
|
.rvo-table--responsive {
|
|
12
|
+
inline-size: 100%;
|
|
12
13
|
overflow-x: auto;
|
|
13
|
-
width: 100%;
|
|
14
14
|
}
|
|
15
15
|
.rvo-table .rvo-caption, .rvo-table__caption {
|
|
16
16
|
font-size: var(--rvo-caption-font-size);
|
|
@@ -19,9 +19,9 @@
|
|
|
19
19
|
}
|
|
20
20
|
.rvo-table-header, .rvo-table__header {
|
|
21
21
|
background-color: var(--rvo-table-header-background-color);
|
|
22
|
-
border-
|
|
23
|
-
border-
|
|
24
|
-
border-
|
|
22
|
+
border-block-end-color: var(--rvo-table-header-border-bottom-color);
|
|
23
|
+
border-block-end-style: var(--rvo-table-header-border-bottom-style);
|
|
24
|
+
border-block-end-width: var(--rvo-table-header-border-bottom-width);
|
|
25
25
|
color: var(--rvo-table-header-color);
|
|
26
26
|
font-weight: var(--rvo-table-header-font-weight);
|
|
27
27
|
padding-block-end: var(--rvo-table-header-padding-block-end);
|
|
@@ -44,19 +44,19 @@
|
|
|
44
44
|
background-color: var(--rvo-table-header-sortable-focus-background-color);
|
|
45
45
|
}
|
|
46
46
|
.rvo-table-header--xs, .rvo-table__header--xs {
|
|
47
|
-
|
|
47
|
+
inline-size: var(--rvo-table-header-size-xs);
|
|
48
48
|
}
|
|
49
49
|
.rvo-table-header--sm, .rvo-table__header--sm {
|
|
50
|
-
|
|
50
|
+
inline-size: var(--rvo-table-header-size-sm);
|
|
51
51
|
}
|
|
52
52
|
.rvo-table-header--md, .rvo-table__header--md {
|
|
53
|
-
|
|
53
|
+
inline-size: var(--rvo-table-header-size-md);
|
|
54
54
|
}
|
|
55
55
|
.rvo-table-header--lg, .rvo-table__header--lg {
|
|
56
|
-
|
|
56
|
+
inline-size: var(--rvo-table-header-size-lg);
|
|
57
57
|
}
|
|
58
58
|
.rvo-table-header--xl, .rvo-table__header--xl {
|
|
59
|
-
|
|
59
|
+
inline-size: var(--rvo-table-header-size-xl);
|
|
60
60
|
}
|
|
61
61
|
.rvo-table-header__sortable-container, .rvo-table__header__sortable-container {
|
|
62
62
|
align-items: center;
|
|
@@ -71,21 +71,21 @@
|
|
|
71
71
|
padding-inline: 0;
|
|
72
72
|
}
|
|
73
73
|
.rvo-table-header__sortable-container--numeric, .rvo-table__header__sortable-container--numeric {
|
|
74
|
-
float:
|
|
74
|
+
float: inline-end;
|
|
75
75
|
}
|
|
76
76
|
.rvo-table-header__sortable-button, .rvo-table__header__sortable-button {
|
|
77
77
|
min-inline-size: 0;
|
|
78
78
|
padding: 0;
|
|
79
79
|
}
|
|
80
80
|
.rvo-table-header__sorting-icon, .rvo-table__header__sorting-icon {
|
|
81
|
+
block-size: var(--rvo-icon-md-height);
|
|
81
82
|
display: flex;
|
|
82
|
-
|
|
83
|
-
width: var(--rvo-icon-md-width);
|
|
83
|
+
inline-size: var(--rvo-icon-md-width);
|
|
84
84
|
}
|
|
85
85
|
.rvo-table-cell, .rvo-table__cell {
|
|
86
|
-
border-
|
|
87
|
-
border-
|
|
88
|
-
border-
|
|
86
|
+
border-block-end-color: var(--rvo-table-cell-border-bottom-color);
|
|
87
|
+
border-block-end-style: var(--rvo-table-cell-border-bottom-style);
|
|
88
|
+
border-block-end-width: var(--rvo-table-cell-border-bottom-width);
|
|
89
89
|
overflow-wrap: break-word;
|
|
90
90
|
padding-block-end: var(--rvo-table-cell-padding-block-end);
|
|
91
91
|
padding-block-start: var(--rvo-table-cell-padding-block-start);
|
package/dist/index.min.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.rvo-table{border-collapse:collapse;border-spacing:0;table-layout:fixed
|
|
1
|
+
.rvo-table{border-collapse:collapse;border-spacing:0;inline-size:100%;table-layout:fixed}.rvo-table--responsive{inline-size:100%;overflow-x:auto}.rvo-table .rvo-caption,.rvo-table__caption{font-size:var(--rvo-caption-font-size);padding-block-end:var(--rvo-caption-padding-block-end);text-align:start}.rvo-table-header,.rvo-table__header{background-color:var(--rvo-table-header-background-color);border-block-end-color:var(--rvo-table-header-border-bottom-color);border-block-end-style:var(--rvo-table-header-border-bottom-style);border-block-end-width:var(--rvo-table-header-border-bottom-width);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--numeric,.rvo-table__header--numeric{text-align:end}.rvo-table-header--active-sort,.rvo-table__header--active-sort{text-decoration:var(--_rvo-table-header-color,underline);text-underline-offset:30%}.rvo-table-header--sortable:hover,.rvo-table__header--sortable:hover{background-color:var(--rvo-table-header-sortable-hover-background-color)}.rvo-table-header--sortable:focus,.rvo-table__header--sortable:focus{background-color:var(--rvo-table-header-sortable-focus-background-color)}.rvo-table-header--xs,.rvo-table__header--xs{inline-size:var(--rvo-table-header-size-xs)}.rvo-table-header--sm,.rvo-table__header--sm{inline-size:var(--rvo-table-header-size-sm)}.rvo-table-header--md,.rvo-table__header--md{inline-size:var(--rvo-table-header-size-md)}.rvo-table-header--lg,.rvo-table__header--lg{inline-size:var(--rvo-table-header-size-lg)}.rvo-table-header--xl,.rvo-table__header--xl{inline-size:var(--rvo-table-header-size-xl)}.rvo-table-header__sortable-container,.rvo-table__header__sortable-container{align-items:center;background:none;border:none;cursor:pointer;display:flex;font-family:inherit;font-size:inherit;font-weight:var(--rvo-table-header-font-weight);gap:var(--rvo-space-sm);padding-inline:0}.rvo-table-header__sortable-container--numeric,.rvo-table__header__sortable-container--numeric{float:inline-end}.rvo-table-header__sortable-button,.rvo-table__header__sortable-button{min-inline-size:0;padding:0}.rvo-table-header__sorting-icon,.rvo-table__header__sorting-icon{block-size:var(--rvo-icon-md-height);display:flex;inline-size:var(--rvo-icon-md-width)}.rvo-table-cell,.rvo-table__cell{border-block-end-color:var(--rvo-table-cell-border-bottom-color);border-block-end-style:var(--rvo-table-cell-border-bottom-style);border-block-end-width:var(--rvo-table-cell-border-bottom-width);overflow-wrap:break-word;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);vertical-align:baseline}.rvo-table-cell--numeric,.rvo-table__cell--numeric{text-align:end}
|
package/dist/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export default ".rvo-table{border-collapse:collapse;border-spacing:0;table-layout:fixed
|
|
1
|
+
export default ".rvo-table{border-collapse:collapse;border-spacing:0;inline-size:100%;table-layout:fixed}.rvo-table--responsive{inline-size:100%;overflow-x:auto}.rvo-table .rvo-caption,.rvo-table__caption{font-size:var(--rvo-caption-font-size);padding-block-end:var(--rvo-caption-padding-block-end);text-align:start}.rvo-table-header,.rvo-table__header{background-color:var(--rvo-table-header-background-color);border-block-end-color:var(--rvo-table-header-border-bottom-color);border-block-end-style:var(--rvo-table-header-border-bottom-style);border-block-end-width:var(--rvo-table-header-border-bottom-width);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--numeric,.rvo-table__header--numeric{text-align:end}.rvo-table-header--active-sort,.rvo-table__header--active-sort{text-decoration:var(--_rvo-table-header-color,underline);text-underline-offset:30%}.rvo-table-header--sortable:hover,.rvo-table__header--sortable:hover{background-color:var(--rvo-table-header-sortable-hover-background-color)}.rvo-table-header--sortable:focus,.rvo-table__header--sortable:focus{background-color:var(--rvo-table-header-sortable-focus-background-color)}.rvo-table-header--xs,.rvo-table__header--xs{inline-size:var(--rvo-table-header-size-xs)}.rvo-table-header--sm,.rvo-table__header--sm{inline-size:var(--rvo-table-header-size-sm)}.rvo-table-header--md,.rvo-table__header--md{inline-size:var(--rvo-table-header-size-md)}.rvo-table-header--lg,.rvo-table__header--lg{inline-size:var(--rvo-table-header-size-lg)}.rvo-table-header--xl,.rvo-table__header--xl{inline-size:var(--rvo-table-header-size-xl)}.rvo-table-header__sortable-container,.rvo-table__header__sortable-container{align-items:center;background:none;border:none;cursor:pointer;display:flex;font-family:inherit;font-size:inherit;font-weight:var(--rvo-table-header-font-weight);gap:var(--rvo-space-sm);padding-inline:0}.rvo-table-header__sortable-container--numeric,.rvo-table__header__sortable-container--numeric{float:inline-end}.rvo-table-header__sortable-button,.rvo-table__header__sortable-button{min-inline-size:0;padding:0}.rvo-table-header__sorting-icon,.rvo-table__header__sorting-icon{block-size:var(--rvo-icon-md-height);display:flex;inline-size:var(--rvo-icon-md-width)}.rvo-table-cell,.rvo-table__cell{border-block-end-color:var(--rvo-table-cell-border-bottom-color);border-block-end-style:var(--rvo-table-cell-border-bottom-style);border-block-end-width:var(--rvo-table-cell-border-bottom-width);overflow-wrap:break-word;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);vertical-align:baseline}.rvo-table-cell--numeric,.rvo-table__cell--numeric{text-align:end}";
|
package/package.json
CHANGED
package/src/index.scss
CHANGED
|
@@ -7,12 +7,12 @@
|
|
|
7
7
|
.rvo-table {
|
|
8
8
|
border-collapse: collapse;
|
|
9
9
|
border-spacing: 0;
|
|
10
|
+
inline-size: 100%;
|
|
10
11
|
table-layout: fixed;
|
|
11
|
-
width: 100%;
|
|
12
12
|
|
|
13
13
|
&--responsive {
|
|
14
|
+
inline-size: 100%;
|
|
14
15
|
overflow-x: auto;
|
|
15
|
-
width: 100%;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
.rvo-caption,
|
|
@@ -25,9 +25,9 @@
|
|
|
25
25
|
&-header,
|
|
26
26
|
&__header {
|
|
27
27
|
background-color: var(--rvo-table-header-background-color);
|
|
28
|
-
border-
|
|
29
|
-
border-
|
|
30
|
-
border-
|
|
28
|
+
border-block-end-color: var(--rvo-table-header-border-bottom-color);
|
|
29
|
+
border-block-end-style: var(--rvo-table-header-border-bottom-style);
|
|
30
|
+
border-block-end-width: var(--rvo-table-header-border-bottom-width);
|
|
31
31
|
color: var(--rvo-table-header-color);
|
|
32
32
|
font-weight: var(--rvo-table-header-font-weight);
|
|
33
33
|
padding-block-end: var(--rvo-table-header-padding-block-end);
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
|
|
56
56
|
@each $size in $rvo-sizes {
|
|
57
57
|
&--#{$size} {
|
|
58
|
-
|
|
58
|
+
inline-size: var(--rvo-table-header-size-#{$size});
|
|
59
59
|
}
|
|
60
60
|
}
|
|
61
61
|
|
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
padding-inline: 0;
|
|
73
73
|
|
|
74
74
|
&--numeric {
|
|
75
|
-
float:
|
|
75
|
+
float: inline-end;
|
|
76
76
|
}
|
|
77
77
|
}
|
|
78
78
|
|
|
@@ -82,17 +82,17 @@
|
|
|
82
82
|
}
|
|
83
83
|
|
|
84
84
|
&__sorting-icon {
|
|
85
|
+
block-size: var(--rvo-icon-md-height);
|
|
85
86
|
display: flex;
|
|
86
|
-
|
|
87
|
-
width: var(--rvo-icon-md-width);
|
|
87
|
+
inline-size: var(--rvo-icon-md-width);
|
|
88
88
|
}
|
|
89
89
|
}
|
|
90
90
|
|
|
91
91
|
&-cell,
|
|
92
92
|
&__cell {
|
|
93
|
-
border-
|
|
94
|
-
border-
|
|
95
|
-
border-
|
|
93
|
+
border-block-end-color: var(--rvo-table-cell-border-bottom-color);
|
|
94
|
+
border-block-end-style: var(--rvo-table-cell-border-bottom-style);
|
|
95
|
+
border-block-end-width: var(--rvo-table-cell-border-bottom-width);
|
|
96
96
|
overflow-wrap: break-word;
|
|
97
97
|
padding-block-end: var(--rvo-table-cell-padding-block-end);
|
|
98
98
|
padding-block-start: var(--rvo-table-cell-padding-block-start);
|