@gemeentenijmegen/semantic-html 0.0.2-alpha.53 → 0.0.2-alpha.55
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/README.md +1 -0
- package/dist/index.css +85 -0
- package/package.json +9 -3
- package/src/index.js +1 -0
- package/src/index.scss +2 -0
- package/src/table/_mixin.scss +31 -0
- package/src/table/index.js +19 -0
package/README.md
CHANGED
|
@@ -18,6 +18,7 @@ npm install --save-dev --save-exact @gemeentenijmegen/semantic-html
|
|
|
18
18
|
<link rel="stylesheet" href="node_modules/@gemeentenijmegen/design-tokens/dist/index.css'" />
|
|
19
19
|
<link rel="stylesheet" href="node_modules/@gemeentenijmegen/font/dist/index.css'" />
|
|
20
20
|
<link rel="stylesheet" href="node_modules/@gemeentenijmegen/semantic-html/dist/index.css" />
|
|
21
|
+
<script src="node_modules/@gemeentenijmegen/semantic-html/dist/index.js"></script>
|
|
21
22
|
</head>
|
|
22
23
|
<body class="nijmegen-html">
|
|
23
24
|
<h1>Home</h1>
|
package/dist/index.css
CHANGED
|
@@ -907,6 +907,91 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
907
907
|
--_utrecht-link-forced-colors-color: visitedtext;
|
|
908
908
|
--_utrecht-link-state-color: var(--utrecht-link-visited-color);
|
|
909
909
|
}
|
|
910
|
+
.nijmegen-html table {
|
|
911
|
+
border-collapse: collapse;
|
|
912
|
+
border-spacing: 0;
|
|
913
|
+
font-family: var(--nijmegen-table-font-family);
|
|
914
|
+
font-size: var(--nijmegen-table-font-size, 1.125rem);
|
|
915
|
+
line-height: var(--nijmegen-table-line-height, 150%);
|
|
916
|
+
width: 100%; /* stylelint-disable-line property-disallowed-list */
|
|
917
|
+
}
|
|
918
|
+
.nijmegen-html table caption {
|
|
919
|
+
color: var(--nijmegen-table-caption-color);
|
|
920
|
+
font-family: var(--nijmegen-table-caption-font-family);
|
|
921
|
+
font-size: var(--nijmegen-table-caption-font-size);
|
|
922
|
+
font-weight: var(--nijmegen-table-caption-font-weight);
|
|
923
|
+
line-height: var(--nijmegen-table-caption-line-height);
|
|
924
|
+
margin-block-end: var(--nijmegen-table-caption-margin-block-end);
|
|
925
|
+
text-align: start;
|
|
926
|
+
}
|
|
927
|
+
.nijmegen-html table tr {
|
|
928
|
+
border-block-end-color: var(--nijmegen-table-row-border-block-end-color);
|
|
929
|
+
border-block-end-style: solid;
|
|
930
|
+
border-block-end-width: var(--nijmegen-table-row-large-vw-border-block-end-width);
|
|
931
|
+
}
|
|
932
|
+
@media (width < 576px) {
|
|
933
|
+
.nijmegen-html table tr {
|
|
934
|
+
border-block-end-width: var(--nijmegen-table-row-border-block-end-width);
|
|
935
|
+
}
|
|
936
|
+
}
|
|
937
|
+
.nijmegen-html table thead {
|
|
938
|
+
background-color: var(--nijmegen-table-header-background-color);
|
|
939
|
+
border-block-end-color: var(--nijmegen-table-header-border-block-end-color);
|
|
940
|
+
border-block-end-width: var(--nijmegen-table-header-border-block-end-width);
|
|
941
|
+
break-inside: avoid;
|
|
942
|
+
color: var(--nijmegen-table-header-color);
|
|
943
|
+
font-weight: var(--nijmegen-table-header-cell-font-weight);
|
|
944
|
+
}
|
|
945
|
+
@media (width < 576px) {
|
|
946
|
+
.nijmegen-html table thead {
|
|
947
|
+
display: none;
|
|
948
|
+
}
|
|
949
|
+
}
|
|
950
|
+
.nijmegen-html table thead th {
|
|
951
|
+
text-align: start;
|
|
952
|
+
vertical-align: top;
|
|
953
|
+
padding-block-end: var(--nijmegen-table-header-cell-large-vw-padding-block-end);
|
|
954
|
+
padding-block-start: var(--nijmegen-table-header-cell-large-vw-padding-block-start);
|
|
955
|
+
padding-inline-end: var(--nijmegen-table-header-cell-large-vw-padding-inline-end);
|
|
956
|
+
padding-inline-start: var(--nijmegen-table-header-cell-large-vw-padding-inline-start);
|
|
957
|
+
}
|
|
958
|
+
@media (width >= 576px) {
|
|
959
|
+
.nijmegen-html table thead th.nijmegen-table__header-cell-end {
|
|
960
|
+
text-align: end;
|
|
961
|
+
}
|
|
962
|
+
}
|
|
963
|
+
.nijmegen-html table tbody td,
|
|
964
|
+
.nijmegen-html table tfoot td {
|
|
965
|
+
text-align: start;
|
|
966
|
+
vertical-align: top;
|
|
967
|
+
padding-block-end: var(--nijmegen-table-data-cell-large-vw-padding-block-end);
|
|
968
|
+
padding-block-start: var(--nijmegen-table-data-cell-large-vw-padding-block-start);
|
|
969
|
+
padding-inline-end: var(--nijmegen-table-data-cell-large-vw-padding-inline-end);
|
|
970
|
+
padding-inline-start: var(--nijmegen-table-data-cell-large-vw-padding-inline-start);
|
|
971
|
+
}
|
|
972
|
+
@media (width >= 576px) {
|
|
973
|
+
.nijmegen-html table tbody td.nijmegen-table__data-cell-end,
|
|
974
|
+
.nijmegen-html table tfoot td.nijmegen-table__data-cell-end {
|
|
975
|
+
text-align: end;
|
|
976
|
+
}
|
|
977
|
+
}
|
|
978
|
+
@media (width < 576px) {
|
|
979
|
+
.nijmegen-html table tbody td,
|
|
980
|
+
.nijmegen-html table tfoot td {
|
|
981
|
+
display: block;
|
|
982
|
+
padding-block-end: var(--nijmegen-table-data-cell-padding-block-end);
|
|
983
|
+
padding-block-start: var(--nijmegen-table-header-cell-padding-block-start);
|
|
984
|
+
padding-inline-end: var(--nijmegen-table-data-cell-padding-inline-end);
|
|
985
|
+
padding-inline-start: var(--nijmegen-table-data-cell-padding-inline-start);
|
|
986
|
+
}
|
|
987
|
+
.nijmegen-html table tbody td::before,
|
|
988
|
+
.nijmegen-html table tfoot td::before {
|
|
989
|
+
content: attr(data-label);
|
|
990
|
+
display: block;
|
|
991
|
+
font-weight: var(--nijmegen-table-header-cell-font-weight, 600);
|
|
992
|
+
padding-block-end: calc(var(--nijmegen-table-data-cell-padding-block-start) + var(--nijmegen-table-header-cell-padding-block-end));
|
|
993
|
+
}
|
|
994
|
+
}
|
|
910
995
|
.nijmegen-html h1:first-child {
|
|
911
996
|
--h1-margin-block-start: 0;
|
|
912
997
|
}
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "0.0.2-alpha.
|
|
2
|
+
"version": "0.0.2-alpha.55",
|
|
3
3
|
"author": "gemeente Nijmegen",
|
|
4
4
|
"description": "Default html element styling for the gemeente Nijmegen design system",
|
|
5
5
|
"license": "EUPL-1.2",
|
|
@@ -24,7 +24,13 @@
|
|
|
24
24
|
"clean": "rimraf dist"
|
|
25
25
|
},
|
|
26
26
|
"devDependencies": {
|
|
27
|
-
"@
|
|
27
|
+
"@babel/core": "7.24.0",
|
|
28
|
+
"@babel/preset-env": "7.24.0",
|
|
29
|
+
"@gemeentenijmegen/components-css": "0.0.1-alpha.48",
|
|
30
|
+
"@rollup/plugin-babel": "6.0.4",
|
|
31
|
+
"@rollup/plugin-commonjs": "25.0.7",
|
|
32
|
+
"@rollup/plugin-node-resolve": "15.2.3",
|
|
33
|
+
"@rollup/plugin-terser": "0.4.4",
|
|
28
34
|
"@utrecht/button-css": "2.3.0",
|
|
29
35
|
"@utrecht/document-css": "1.5.0",
|
|
30
36
|
"@utrecht/focus-ring-css": "2.3.0",
|
|
@@ -41,5 +47,5 @@
|
|
|
41
47
|
"rollup": "4.12.1",
|
|
42
48
|
"rollup-plugin-postcss": "4.0.2"
|
|
43
49
|
},
|
|
44
|
-
"gitHead": "
|
|
50
|
+
"gitHead": "86c4d8bb0f342ea5410c0067d8c736330a0235bd"
|
|
45
51
|
}
|
package/src/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import './table/index.js';
|
package/src/index.scss
CHANGED
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
@import "~@utrecht/link-css/src/html/mixin";
|
|
10
10
|
@import "~@utrecht/button-css/src/html/mixin";
|
|
11
11
|
@import "link-list/mixin";
|
|
12
|
+
@import "table/mixin";
|
|
12
13
|
@import "component-library-class-mapping/mixin";
|
|
13
14
|
@import "~@gemeentenijmegen/components-css/spacing/src/semantic/mixin";
|
|
14
15
|
|
|
@@ -29,6 +30,7 @@
|
|
|
29
30
|
@include utrecht-html-h6;
|
|
30
31
|
@include utrecht-html-a;
|
|
31
32
|
@include nijmegen-html-unordered-list;
|
|
33
|
+
@include nijmegen-html-table;
|
|
32
34
|
|
|
33
35
|
@include spacing-h1;
|
|
34
36
|
@include spacing-h2;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
@import "~@gemeentenijmegen/components-css/table/mixin";
|
|
2
|
+
@mixin nijmegen-html-table {
|
|
3
|
+
table {
|
|
4
|
+
@include nijmegen-table;
|
|
5
|
+
|
|
6
|
+
width: 100%; /* stylelint-disable-line property-disallowed-list */
|
|
7
|
+
|
|
8
|
+
caption {
|
|
9
|
+
@include nijmegen-table__caption;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
tr {
|
|
13
|
+
@include nijmegen-table__row;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
thead {
|
|
17
|
+
@include nijmegen-table__header;
|
|
18
|
+
|
|
19
|
+
th {
|
|
20
|
+
@include nijmegen-table__header-cell;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
tbody,
|
|
25
|
+
tfoot {
|
|
26
|
+
td {
|
|
27
|
+
@include nijmegen-table__data-cell;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
function responsiveTables() {
|
|
2
|
+
document.querySelectorAll('.nijmegen-html table').forEach((table) => {
|
|
3
|
+
const ths = table.querySelectorAll('thead th');
|
|
4
|
+
const headings = Array.from(ths).map((th) => th.textContent.trim());
|
|
5
|
+
|
|
6
|
+
if (headings.length === 0) return;
|
|
7
|
+
|
|
8
|
+
const tds = table.querySelectorAll('tbody td');
|
|
9
|
+
tds.forEach((td, idx) => {
|
|
10
|
+
td.setAttribute('data-label', headings[idx % headings.length]);
|
|
11
|
+
});
|
|
12
|
+
});
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
if (document.readyState === 'loading') {
|
|
16
|
+
document.addEventListener('DOMContentLoaded', responsiveTables);
|
|
17
|
+
} else {
|
|
18
|
+
responsiveTables();
|
|
19
|
+
}
|