jvetrau-ds 0.2.36 → 0.2.39
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/components/course-outline/course-outline.css +93 -6
- package/components/index.d.ts +1 -1
- package/components/table/index.d.ts +1 -1
- package/components/table/table.cjs +28 -2
- package/components/table/table.cjs.map +1 -1
- package/components/table/table.css +141 -1
- package/components/table/table.d.ts +2 -0
- package/components/table/table.js +28 -2
- package/components/table/table.js.map +1 -1
- package/index.d.ts +1 -1
- package/package.json +1 -1
- package/styles.css +234 -7
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
/* color */
|
|
3
3
|
--course-outline-color: inherit;
|
|
4
4
|
--course-outline-meta-color: var(--color-text-note);
|
|
5
|
-
|
|
5
|
+
|
|
6
6
|
color: var(--course-outline-color);
|
|
7
7
|
|
|
8
8
|
/* typography */
|
|
@@ -18,15 +18,15 @@
|
|
|
18
18
|
var(--font-h3-letter-spacing);
|
|
19
19
|
|
|
20
20
|
--course-outline-item-title-font-family:
|
|
21
|
-
var(--font-
|
|
21
|
+
var(--font-lead-family);
|
|
22
22
|
--course-outline-item-title-font-size:
|
|
23
|
-
var(--font-
|
|
23
|
+
var(--font-lead);
|
|
24
24
|
--course-outline-item-title-font-weight:
|
|
25
|
-
var(--font-
|
|
25
|
+
var(--font-lead-weight);
|
|
26
26
|
--course-outline-item-title-line-height:
|
|
27
|
-
var(--font-
|
|
27
|
+
var(--font-lead-line);
|
|
28
28
|
--course-outline-item-title-letter-spacing:
|
|
29
|
-
var(--font-
|
|
29
|
+
var(--font-lead-letter-spacing);
|
|
30
30
|
|
|
31
31
|
--course-outline-body-font-family:
|
|
32
32
|
var(--font-body-family);
|
|
@@ -74,6 +74,55 @@
|
|
|
74
74
|
/* motion */
|
|
75
75
|
}
|
|
76
76
|
|
|
77
|
+
.layout-sidebar__side .course-outline {
|
|
78
|
+
/* color */
|
|
79
|
+
|
|
80
|
+
/* typography */
|
|
81
|
+
--course-outline-item-title-font-family:
|
|
82
|
+
var(--font-body-family);
|
|
83
|
+
--course-outline-item-title-font-size:
|
|
84
|
+
var(--font-body);
|
|
85
|
+
--course-outline-item-title-font-weight:
|
|
86
|
+
var(--font-body-weight);
|
|
87
|
+
--course-outline-item-title-line-height:
|
|
88
|
+
var(--font-body-line);
|
|
89
|
+
--course-outline-item-title-letter-spacing:
|
|
90
|
+
var(--font-body-letter-spacing);
|
|
91
|
+
|
|
92
|
+
/* size */
|
|
93
|
+
|
|
94
|
+
/* border */
|
|
95
|
+
|
|
96
|
+
/* depth */
|
|
97
|
+
|
|
98
|
+
/* motion */
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.layout-sidebar__side
|
|
102
|
+
.course-outline__action {
|
|
103
|
+
/* color */
|
|
104
|
+
|
|
105
|
+
/* typography */
|
|
106
|
+
font-family:
|
|
107
|
+
var(--course-outline-note-font-family);
|
|
108
|
+
font-size:
|
|
109
|
+
var(--course-outline-note-font-size);
|
|
110
|
+
font-weight:
|
|
111
|
+
var(--course-outline-note-font-weight);
|
|
112
|
+
line-height:
|
|
113
|
+
var(--course-outline-note-line-height);
|
|
114
|
+
letter-spacing:
|
|
115
|
+
var(--course-outline-note-letter-spacing);
|
|
116
|
+
|
|
117
|
+
/* size */
|
|
118
|
+
|
|
119
|
+
/* border */
|
|
120
|
+
|
|
121
|
+
/* depth */
|
|
122
|
+
|
|
123
|
+
/* motion */
|
|
124
|
+
}
|
|
125
|
+
|
|
77
126
|
.course-outline__groups {
|
|
78
127
|
/* color */
|
|
79
128
|
|
|
@@ -158,6 +207,44 @@
|
|
|
158
207
|
/* motion */
|
|
159
208
|
}
|
|
160
209
|
|
|
210
|
+
h2.course-outline__group-title {
|
|
211
|
+
/* color */
|
|
212
|
+
|
|
213
|
+
/* typography */
|
|
214
|
+
font-family: var(--font-h2-family);
|
|
215
|
+
font-size: var(--font-h2);
|
|
216
|
+
font-weight: var(--font-h2-weight);
|
|
217
|
+
line-height: var(--font-h2-line);
|
|
218
|
+
letter-spacing: var(--font-h2-letter-spacing);
|
|
219
|
+
|
|
220
|
+
/* size */
|
|
221
|
+
|
|
222
|
+
/* border */
|
|
223
|
+
|
|
224
|
+
/* depth */
|
|
225
|
+
|
|
226
|
+
/* motion */
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
h4.course-outline__group-title {
|
|
230
|
+
/* color */
|
|
231
|
+
|
|
232
|
+
/* typography */
|
|
233
|
+
font-family: var(--font-h4-family);
|
|
234
|
+
font-size: var(--font-h4);
|
|
235
|
+
font-weight: var(--font-h4-weight);
|
|
236
|
+
line-height: var(--font-h4-line);
|
|
237
|
+
letter-spacing: var(--font-h4-letter-spacing);
|
|
238
|
+
|
|
239
|
+
/* size */
|
|
240
|
+
|
|
241
|
+
/* border */
|
|
242
|
+
|
|
243
|
+
/* depth */
|
|
244
|
+
|
|
245
|
+
/* motion */
|
|
246
|
+
}
|
|
247
|
+
|
|
161
248
|
.course-outline__group-title a {
|
|
162
249
|
/* color */
|
|
163
250
|
color: inherit;
|
package/components/index.d.ts
CHANGED
|
@@ -61,4 +61,4 @@ export type { FlipListItem, FlipListProps, } from './flip-list/flip-list';
|
|
|
61
61
|
export { default as AvatarUpload } from './avatar-upload/avatar-upload';
|
|
62
62
|
export type { AvatarUploadProps, } from './avatar-upload/avatar-upload';
|
|
63
63
|
export { default as Table } from './table';
|
|
64
|
-
export type { TableBodyProps, TableCellProps, TableColumn, TableColumnWidth, TableProps, TableRowProps } from './table';
|
|
64
|
+
export type { TableBodyProps, TableCellProps, TableCellStatus, TableColumn, TableColumnWidth, TableProps, TableRowProps, } from './table';
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
export { default } from './table';
|
|
2
2
|
export { default as Table } from './table';
|
|
3
|
-
export type { TableBodyProps, TableCellProps, TableColumn, TableColumnWidth, TableProps, TableRowProps } from './table';
|
|
3
|
+
export type { TableBodyProps, TableCellProps, TableCellStatus, TableColumn, TableColumnWidth, TableProps, TableRowProps, } from './table';
|
|
@@ -69,19 +69,45 @@ const TableRow = ({
|
|
|
69
69
|
);
|
|
70
70
|
};
|
|
71
71
|
const TableCell = ({
|
|
72
|
+
status,
|
|
72
73
|
className = "",
|
|
74
|
+
children,
|
|
73
75
|
...props
|
|
74
76
|
}) => {
|
|
75
77
|
const classes = classnames.classnames(
|
|
76
78
|
"table__cell",
|
|
77
79
|
className,
|
|
78
|
-
{
|
|
80
|
+
{
|
|
81
|
+
"table__cell--status": status !== void 0
|
|
82
|
+
}
|
|
83
|
+
);
|
|
84
|
+
if (!status) {
|
|
85
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
86
|
+
"td",
|
|
87
|
+
{
|
|
88
|
+
className: classes,
|
|
89
|
+
...props,
|
|
90
|
+
children
|
|
91
|
+
}
|
|
92
|
+
);
|
|
93
|
+
}
|
|
94
|
+
const statusClasses = classnames.classnames(
|
|
95
|
+
"table__cell-status",
|
|
96
|
+
"",
|
|
97
|
+
{
|
|
98
|
+
"table__cell-status--good": status === "good",
|
|
99
|
+
"table__cell-status--semi-good": status === "semi-good",
|
|
100
|
+
"table__cell-status--med": status === "med",
|
|
101
|
+
"table__cell-status--semi-bad": status === "semi-bad",
|
|
102
|
+
"table__cell-status--bad": status === "bad"
|
|
103
|
+
}
|
|
79
104
|
);
|
|
80
105
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
81
106
|
"td",
|
|
82
107
|
{
|
|
83
108
|
className: classes,
|
|
84
|
-
...props
|
|
109
|
+
...props,
|
|
110
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: statusClasses, children })
|
|
85
111
|
}
|
|
86
112
|
);
|
|
87
113
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/table/table.tsx"],"names":["classnames","jsx","jsxs"],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"sources":["../../../src/components/table/table.tsx"],"names":["classnames","jsx","jsxs"],"mappings":";;;;;;AAqDA,MAAM,mBAAmB,CACvB,OAAA,KAEA,QAAQ,MAAA,CAAO,CAAC,OAAO,MAAA,KAAW;AAChC,EAAA,IACE,OAAO,KAAA,EAAO,IAAA,KAAS,cACvB,MAAA,CAAO,KAAA,CAAM,SAAS,CAAA,EACtB;AACA,IAAA,OAAO,KAAA;AAAA,EACT;AAEA,EAAA,OAAO,KAAA,GAAQ,OAAO,KAAA,CAAM,KAAA;AAC9B,CAAA,EAAG,CAAC,CAAA;AAEN,MAAM,qBAAA,GAAwB,CAC5B,KAAA,EACA,KAAA,KAEA,MAAA;AAAA,EAAA,CACI,KAAA,GAAQ,KAAA,GAAS,GAAA,EAAK,OAAA,CAAQ,CAAC;AACnC,CAAA;AAEF,MAAM,cAAA,GAAiB,CACrB,KAAA,EACA,aAAA,KACiC;AACjC,EAAA,IAAI,CAAC,KAAA,IAAS,KAAA,CAAM,IAAA,KAAS,MAAA,EAAQ;AACnC,IAAA,OAAO,MAAA;AAAA,EACT;AAEA,EAAA,IAAI,KAAA,CAAM,SAAS,KAAA,EAAO;AACxB,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,IAAI,KAAA,CAAM,SAAS,KAAA,EAAO;AACxB,IAAA,OAAO,MAAA;AAAA,EACT;AAEA,EAAA,IAAI,KAAA,CAAM,SAAS,OAAA,EAAS;AAC1B,IAAA,OAAO,KAAA,CAAM,KAAA;AAAA,EACf;AAEA,EAAA,IACE,KAAA,CAAM,KAAA,IAAS,CAAA,IACf,aAAA,IAAiB,CAAA,EACjB;AACA,IAAA,OAAO,MAAA;AAAA,EACT;AAEA,EAAA,OAAO,CAAA,EAAG,qBAAA;AAAA,IACR,KAAA,CAAM,KAAA;AAAA,IACN;AAAA,GACD,CAAA,CAAA,CAAA;AACH,CAAA;AAEA,MAAM,YAEF,CAAC;AAAA,EACH,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUA,qBAAA;AAAA,IACd,aAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAC,GACH;AAEA,EAAA,uBACEC,cAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG;AAAA;AAAA,GACN;AAEJ,CAAA;AAEA,MAAM,WAEF,CAAC;AAAA,EACH,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUD,qBAAA;AAAA,IACd,YAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAC,GACH;AAEA,EAAA,uBACEC,cAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG;AAAA;AAAA,GACN;AAEJ,CAAA;AAEA,MAAM,YAEF,CAAC;AAAA,EACH,MAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUD,qBAAA;AAAA,IACd,aAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,uBACE,MAAA,KAAW;AAAA;AACf,GACF;AAEA,EAAA,IAAI,CAAC,MAAA,EAAQ;AACX,IAAA,uBACEC,cAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,OAAA;AAAA,QACV,GAAG,KAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AAEA,EAAA,MAAM,aAAA,GAAgBD,qBAAA;AAAA,IACpB,oBAAA;AAAA,IACA,EAAA;AAAA,IACA;AAAA,MACE,4BACE,MAAA,KAAW,MAAA;AAAA,MACb,iCACE,MAAA,KAAW,WAAA;AAAA,MACb,2BACE,MAAA,KAAW,KAAA;AAAA,MACb,gCACE,MAAA,KAAW,UAAA;AAAA,MACb,2BACE,MAAA,KAAW;AAAA;AACf,GACF;AAEA,EAAA,uBACEC,cAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAAA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,aAAA,EACd,QAAA,EACH;AAAA;AAAA,GACF;AAEJ,CAAA;AASA,MAAM,QAAwB,CAAC;AAAA,EAC7B,OAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUD,qBAAA;AAAA,IACd,OAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAC,GACH;AAEA,EAAA,MAAM,aAAA,GACJ,iBAAiB,OAAO,CAAA;AAE1B,EAAA,uBACEE,eAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAAD,cAAA,CAAC,UAAA,EAAA,EACE,QAAA,EAAA,OAAA,CAAQ,GAAA,CAAI,CAAC,MAAA,qBACZA,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YAEC,KAAA,EAAO;AAAA,cACL,KAAA,EAAO,cAAA;AAAA,gBACL,MAAA,CAAO,KAAA;AAAA,gBACP;AAAA;AACF;AACF,WAAA;AAAA,UANK,MAAA,CAAO;AAAA,SAQf,CAAA,EACH,CAAA;AAAA,wBAEAA,cAAA,CAAC,OAAA,EAAA,EAAM,SAAA,EAAU,aAAA,EACf,QAAA,kBAAAA,cAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,YAAA,EACX,QAAA,EAAA,OAAA,CAAQ,GAAA,CAAI,CAAC,MAAA,qBACZA,cAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YAEC,SAAA,EAAU,eAAA;AAAA,YACV,KAAA,EAAM,KAAA;AAAA,YAEL,QAAA,EAAA,MAAA,CAAO;AAAA,WAAA;AAAA,UAJH,MAAA,CAAO;AAAA,SAMf,GACH,CAAA,EACF,CAAA;AAAA,QAEC;AAAA;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,KAAA,CAAM,IAAA,GAAO,SAAA;AACb,KAAA,CAAM,GAAA,GAAM,QAAA;AACZ,KAAA,CAAM,IAAA,GAAO,SAAA;AAEb,IAAO,aAAA,GAAQ","file":"table.cjs","sourcesContent":["import React from 'react';\n\nimport './table.css';\nimport { classnames } from '../helpers/classnames';\n\nexport type TableColumnWidth =\n | {\n type: 'auto';\n }\n | {\n type: 'max';\n }\n | {\n type: 'fraction';\n value: number;\n }\n | {\n type: 'min';\n }\n | {\n type: 'fixed';\n value: string;\n };\n\nexport type TableCellStatus =\n | 'good'\n | 'semi-good'\n | 'med'\n | 'semi-bad'\n | 'bad';\n\nexport interface TableColumn {\n id: React.Key;\n header: React.ReactNode;\n width?: TableColumnWidth;\n}\n\nexport interface TableProps\n extends React.TableHTMLAttributes<HTMLTableElement> {\n columns: TableColumn[];\n}\n\nexport interface TableBodyProps\n extends React.HTMLAttributes<HTMLTableSectionElement> {}\n\nexport interface TableRowProps\n extends React.HTMLAttributes<HTMLTableRowElement> {}\n\nexport interface TableCellProps\n extends React.TdHTMLAttributes<HTMLTableCellElement> {\n status?: TableCellStatus;\n}\n\nconst getFractionTotal = (\n columns: TableColumn[],\n) =>\n columns.reduce((total, column) => {\n if (\n column.width?.type !== 'fraction' ||\n column.width.value <= 0\n ) {\n return total;\n }\n\n return total + column.width.value;\n }, 0);\n\nconst getFractionPercentage = (\n value: number,\n total: number,\n) =>\n Number(\n ((value / total) * 100).toFixed(6),\n );\n\nconst getColumnWidth = (\n width: TableColumnWidth | undefined,\n fractionTotal: number,\n): React.CSSProperties['width'] => {\n if (!width || width.type === 'auto') {\n return undefined;\n }\n\n if (width.type === 'min') {\n return '1%';\n }\n\n if (width.type === 'max') {\n return '100%';\n }\n\n if (width.type === 'fixed') {\n return width.value;\n }\n\n if (\n width.value <= 0 ||\n fractionTotal <= 0\n ) {\n return undefined;\n }\n\n return `${getFractionPercentage(\n width.value,\n fractionTotal,\n )}%`;\n};\n\nconst TableBody: React.FC<\n TableBodyProps\n> = ({\n className = '',\n ...props\n}) => {\n const classes = classnames(\n 'table__body',\n className,\n {},\n );\n\n return (\n <tbody\n className={classes}\n {...props}\n />\n );\n};\n\nconst TableRow: React.FC<\n TableRowProps\n> = ({\n className = '',\n ...props\n}) => {\n const classes = classnames(\n 'table__row',\n className,\n {},\n );\n\n return (\n <tr\n className={classes}\n {...props}\n />\n );\n};\n\nconst TableCell: React.FC<\n TableCellProps\n> = ({\n status,\n className = '',\n children,\n ...props\n}) => {\n const classes = classnames(\n 'table__cell',\n className,\n {\n 'table__cell--status':\n status !== undefined,\n },\n );\n\n if (!status) {\n return (\n <td\n className={classes}\n {...props}\n >\n {children}\n </td>\n );\n }\n\n const statusClasses = classnames(\n 'table__cell-status',\n '',\n {\n 'table__cell-status--good':\n status === 'good',\n 'table__cell-status--semi-good':\n status === 'semi-good',\n 'table__cell-status--med':\n status === 'med',\n 'table__cell-status--semi-bad':\n status === 'semi-bad',\n 'table__cell-status--bad':\n status === 'bad',\n },\n );\n\n return (\n <td\n className={classes}\n {...props}\n >\n <span className={statusClasses}>\n {children}\n </span>\n </td>\n );\n};\n\ninterface TableComponent\n extends React.FC<TableProps> {\n Body: typeof TableBody;\n Row: typeof TableRow;\n Cell: typeof TableCell;\n}\n\nconst Table: TableComponent = ({\n columns,\n className = '',\n children,\n ...props\n}) => {\n const classes = classnames(\n 'table',\n className,\n {},\n );\n\n const fractionTotal =\n getFractionTotal(columns);\n\n return (\n <table\n className={classes}\n {...props}\n >\n <colgroup>\n {columns.map((column) => (\n <col\n key={column.id}\n style={{\n width: getColumnWidth(\n column.width,\n fractionTotal,\n ),\n }}\n />\n ))}\n </colgroup>\n\n <thead className=\"table__head\">\n <tr className=\"table__row\">\n {columns.map((column) => (\n <th\n key={column.id}\n className=\"table__header\"\n scope=\"col\"\n >\n {column.header}\n </th>\n ))}\n </tr>\n </thead>\n\n {children}\n </table>\n );\n};\n\nTable.Body = TableBody;\nTable.Row = TableRow;\nTable.Cell = TableCell;\n\nexport default Table;\n"]}
|
|
@@ -149,6 +149,147 @@
|
|
|
149
149
|
/* motion */
|
|
150
150
|
}
|
|
151
151
|
|
|
152
|
+
.table__cell--status {
|
|
153
|
+
/* color */
|
|
154
|
+
|
|
155
|
+
/* typography */
|
|
156
|
+
|
|
157
|
+
/* size */
|
|
158
|
+
padding: 0;
|
|
159
|
+
|
|
160
|
+
/* border */
|
|
161
|
+
|
|
162
|
+
/* depth */
|
|
163
|
+
|
|
164
|
+
/* motion */
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.table__cell--status:first-child {
|
|
168
|
+
/* color */
|
|
169
|
+
|
|
170
|
+
/* typography */
|
|
171
|
+
|
|
172
|
+
/* size */
|
|
173
|
+
padding-left: var(--padding-table-horz);
|
|
174
|
+
|
|
175
|
+
/* border */
|
|
176
|
+
|
|
177
|
+
/* depth */
|
|
178
|
+
|
|
179
|
+
/* motion */
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
.table__cell--status:last-child {
|
|
183
|
+
/* color */
|
|
184
|
+
|
|
185
|
+
/* typography */
|
|
186
|
+
|
|
187
|
+
/* size */
|
|
188
|
+
padding-right: var(--padding-table-horz);
|
|
189
|
+
|
|
190
|
+
/* border */
|
|
191
|
+
|
|
192
|
+
/* depth */
|
|
193
|
+
|
|
194
|
+
/* motion */
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
.table__cell-status {
|
|
198
|
+
/* color */
|
|
199
|
+
|
|
200
|
+
/* typography */
|
|
201
|
+
|
|
202
|
+
/* size */
|
|
203
|
+
display: block;
|
|
204
|
+
padding-block: var(--table-row-gap);
|
|
205
|
+
padding-inline: calc(
|
|
206
|
+
var(--table-column-gap) / 2
|
|
207
|
+
);
|
|
208
|
+
|
|
209
|
+
/* border */
|
|
210
|
+
|
|
211
|
+
/* depth */
|
|
212
|
+
|
|
213
|
+
/* motion */
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
.table__cell-status--good {
|
|
217
|
+
/* color */
|
|
218
|
+
background-color: var(--color-good);
|
|
219
|
+
color: var(--color-text-primary-1);
|
|
220
|
+
|
|
221
|
+
/* typography */
|
|
222
|
+
|
|
223
|
+
/* size */
|
|
224
|
+
|
|
225
|
+
/* border */
|
|
226
|
+
|
|
227
|
+
/* depth */
|
|
228
|
+
|
|
229
|
+
/* motion */
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
.table__cell-status--semi-good {
|
|
233
|
+
/* color */
|
|
234
|
+
background-color: var(--color-semi-good);
|
|
235
|
+
color: var(--color-text-primary-1);
|
|
236
|
+
|
|
237
|
+
/* typography */
|
|
238
|
+
|
|
239
|
+
/* size */
|
|
240
|
+
|
|
241
|
+
/* border */
|
|
242
|
+
|
|
243
|
+
/* depth */
|
|
244
|
+
|
|
245
|
+
/* motion */
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
.table__cell-status--med {
|
|
249
|
+
/* color */
|
|
250
|
+
background-color: var(--color-med);
|
|
251
|
+
|
|
252
|
+
/* typography */
|
|
253
|
+
|
|
254
|
+
/* size */
|
|
255
|
+
|
|
256
|
+
/* border */
|
|
257
|
+
|
|
258
|
+
/* depth */
|
|
259
|
+
|
|
260
|
+
/* motion */
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
.table__cell-status--semi-bad {
|
|
264
|
+
/* color */
|
|
265
|
+
background-color: var(--color-semi-bad);
|
|
266
|
+
|
|
267
|
+
/* typography */
|
|
268
|
+
|
|
269
|
+
/* size */
|
|
270
|
+
|
|
271
|
+
/* border */
|
|
272
|
+
|
|
273
|
+
/* depth */
|
|
274
|
+
|
|
275
|
+
/* motion */
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
.table__cell-status--bad {
|
|
279
|
+
/* color */
|
|
280
|
+
background-color: var(--color-bad);
|
|
281
|
+
|
|
282
|
+
/* typography */
|
|
283
|
+
|
|
284
|
+
/* size */
|
|
285
|
+
|
|
286
|
+
/* border */
|
|
287
|
+
|
|
288
|
+
/* depth */
|
|
289
|
+
|
|
290
|
+
/* motion */
|
|
291
|
+
}
|
|
292
|
+
|
|
152
293
|
.table__body
|
|
153
294
|
.table__row:last-child
|
|
154
295
|
.table__cell {
|
|
@@ -157,7 +298,6 @@
|
|
|
157
298
|
/* typography */
|
|
158
299
|
|
|
159
300
|
/* size */
|
|
160
|
-
padding-bottom: var(--padding-table-vert);
|
|
161
301
|
|
|
162
302
|
/* border */
|
|
163
303
|
border-bottom: 0;
|
|
@@ -13,6 +13,7 @@ export type TableColumnWidth = {
|
|
|
13
13
|
type: 'fixed';
|
|
14
14
|
value: string;
|
|
15
15
|
};
|
|
16
|
+
export type TableCellStatus = 'good' | 'semi-good' | 'med' | 'semi-bad' | 'bad';
|
|
16
17
|
export interface TableColumn {
|
|
17
18
|
id: React.Key;
|
|
18
19
|
header: React.ReactNode;
|
|
@@ -26,6 +27,7 @@ export interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionEle
|
|
|
26
27
|
export interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
|
|
27
28
|
}
|
|
28
29
|
export interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
|
|
30
|
+
status?: TableCellStatus;
|
|
29
31
|
}
|
|
30
32
|
declare const TableBody: React.FC<TableBodyProps>;
|
|
31
33
|
declare const TableRow: React.FC<TableRowProps>;
|
|
@@ -67,19 +67,45 @@ const TableRow = ({
|
|
|
67
67
|
);
|
|
68
68
|
};
|
|
69
69
|
const TableCell = ({
|
|
70
|
+
status,
|
|
70
71
|
className = "",
|
|
72
|
+
children,
|
|
71
73
|
...props
|
|
72
74
|
}) => {
|
|
73
75
|
const classes = classnames(
|
|
74
76
|
"table__cell",
|
|
75
77
|
className,
|
|
76
|
-
{
|
|
78
|
+
{
|
|
79
|
+
"table__cell--status": status !== void 0
|
|
80
|
+
}
|
|
81
|
+
);
|
|
82
|
+
if (!status) {
|
|
83
|
+
return /* @__PURE__ */ jsx(
|
|
84
|
+
"td",
|
|
85
|
+
{
|
|
86
|
+
className: classes,
|
|
87
|
+
...props,
|
|
88
|
+
children
|
|
89
|
+
}
|
|
90
|
+
);
|
|
91
|
+
}
|
|
92
|
+
const statusClasses = classnames(
|
|
93
|
+
"table__cell-status",
|
|
94
|
+
"",
|
|
95
|
+
{
|
|
96
|
+
"table__cell-status--good": status === "good",
|
|
97
|
+
"table__cell-status--semi-good": status === "semi-good",
|
|
98
|
+
"table__cell-status--med": status === "med",
|
|
99
|
+
"table__cell-status--semi-bad": status === "semi-bad",
|
|
100
|
+
"table__cell-status--bad": status === "bad"
|
|
101
|
+
}
|
|
77
102
|
);
|
|
78
103
|
return /* @__PURE__ */ jsx(
|
|
79
104
|
"td",
|
|
80
105
|
{
|
|
81
106
|
className: classes,
|
|
82
|
-
...props
|
|
107
|
+
...props,
|
|
108
|
+
children: /* @__PURE__ */ jsx("span", { className: statusClasses, children })
|
|
83
109
|
}
|
|
84
110
|
);
|
|
85
111
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/table/table.tsx"],"names":[],"mappings":";;;;
|
|
1
|
+
{"version":3,"sources":["../../../src/components/table/table.tsx"],"names":[],"mappings":";;;;AAqDA,MAAM,mBAAmB,CACvB,OAAA,KAEA,QAAQ,MAAA,CAAO,CAAC,OAAO,MAAA,KAAW;AAChC,EAAA,IACE,OAAO,KAAA,EAAO,IAAA,KAAS,cACvB,MAAA,CAAO,KAAA,CAAM,SAAS,CAAA,EACtB;AACA,IAAA,OAAO,KAAA;AAAA,EACT;AAEA,EAAA,OAAO,KAAA,GAAQ,OAAO,KAAA,CAAM,KAAA;AAC9B,CAAA,EAAG,CAAC,CAAA;AAEN,MAAM,qBAAA,GAAwB,CAC5B,KAAA,EACA,KAAA,KAEA,MAAA;AAAA,EAAA,CACI,KAAA,GAAQ,KAAA,GAAS,GAAA,EAAK,OAAA,CAAQ,CAAC;AACnC,CAAA;AAEF,MAAM,cAAA,GAAiB,CACrB,KAAA,EACA,aAAA,KACiC;AACjC,EAAA,IAAI,CAAC,KAAA,IAAS,KAAA,CAAM,IAAA,KAAS,MAAA,EAAQ;AACnC,IAAA,OAAO,MAAA;AAAA,EACT;AAEA,EAAA,IAAI,KAAA,CAAM,SAAS,KAAA,EAAO;AACxB,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,IAAI,KAAA,CAAM,SAAS,KAAA,EAAO;AACxB,IAAA,OAAO,MAAA;AAAA,EACT;AAEA,EAAA,IAAI,KAAA,CAAM,SAAS,OAAA,EAAS;AAC1B,IAAA,OAAO,KAAA,CAAM,KAAA;AAAA,EACf;AAEA,EAAA,IACE,KAAA,CAAM,KAAA,IAAS,CAAA,IACf,aAAA,IAAiB,CAAA,EACjB;AACA,IAAA,OAAO,MAAA;AAAA,EACT;AAEA,EAAA,OAAO,CAAA,EAAG,qBAAA;AAAA,IACR,KAAA,CAAM,KAAA;AAAA,IACN;AAAA,GACD,CAAA,CAAA,CAAA;AACH,CAAA;AAEA,MAAM,YAEF,CAAC;AAAA,EACH,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,aAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAC,GACH;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG;AAAA;AAAA,GACN;AAEJ,CAAA;AAEA,MAAM,WAEF,CAAC;AAAA,EACH,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,YAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAC,GACH;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG;AAAA;AAAA,GACN;AAEJ,CAAA;AAEA,MAAM,YAEF,CAAC;AAAA,EACH,MAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,aAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,uBACE,MAAA,KAAW;AAAA;AACf,GACF;AAEA,EAAA,IAAI,CAAC,MAAA,EAAQ;AACX,IAAA,uBACE,GAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,OAAA;AAAA,QACV,GAAG,KAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AAEA,EAAA,MAAM,aAAA,GAAgB,UAAA;AAAA,IACpB,oBAAA;AAAA,IACA,EAAA;AAAA,IACA;AAAA,MACE,4BACE,MAAA,KAAW,MAAA;AAAA,MACb,iCACE,MAAA,KAAW,WAAA;AAAA,MACb,2BACE,MAAA,KAAW,KAAA;AAAA,MACb,gCACE,MAAA,KAAW,UAAA;AAAA,MACb,2BACE,MAAA,KAAW;AAAA;AACf,GACF;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,aAAA,EACd,QAAA,EACH;AAAA;AAAA,GACF;AAEJ,CAAA;AASA,MAAM,QAAwB,CAAC;AAAA,EAC7B,OAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,OAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAC,GACH;AAEA,EAAA,MAAM,aAAA,GACJ,iBAAiB,OAAO,CAAA;AAE1B,EAAA,uBACE,IAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,UAAA,EAAA,EACE,QAAA,EAAA,OAAA,CAAQ,GAAA,CAAI,CAAC,MAAA,qBACZ,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YAEC,KAAA,EAAO;AAAA,cACL,KAAA,EAAO,cAAA;AAAA,gBACL,MAAA,CAAO,KAAA;AAAA,gBACP;AAAA;AACF;AACF,WAAA;AAAA,UANK,MAAA,CAAO;AAAA,SAQf,CAAA,EACH,CAAA;AAAA,wBAEA,GAAA,CAAC,OAAA,EAAA,EAAM,SAAA,EAAU,aAAA,EACf,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,YAAA,EACX,QAAA,EAAA,OAAA,CAAQ,GAAA,CAAI,CAAC,MAAA,qBACZ,GAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YAEC,SAAA,EAAU,eAAA;AAAA,YACV,KAAA,EAAM,KAAA;AAAA,YAEL,QAAA,EAAA,MAAA,CAAO;AAAA,WAAA;AAAA,UAJH,MAAA,CAAO;AAAA,SAMf,GACH,CAAA,EACF,CAAA;AAAA,QAEC;AAAA;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,KAAA,CAAM,IAAA,GAAO,SAAA;AACb,KAAA,CAAM,GAAA,GAAM,QAAA;AACZ,KAAA,CAAM,IAAA,GAAO,SAAA;AAEb,IAAO,aAAA,GAAQ","file":"table.js","sourcesContent":["import React from 'react';\n\nimport './table.css';\nimport { classnames } from '../helpers/classnames';\n\nexport type TableColumnWidth =\n | {\n type: 'auto';\n }\n | {\n type: 'max';\n }\n | {\n type: 'fraction';\n value: number;\n }\n | {\n type: 'min';\n }\n | {\n type: 'fixed';\n value: string;\n };\n\nexport type TableCellStatus =\n | 'good'\n | 'semi-good'\n | 'med'\n | 'semi-bad'\n | 'bad';\n\nexport interface TableColumn {\n id: React.Key;\n header: React.ReactNode;\n width?: TableColumnWidth;\n}\n\nexport interface TableProps\n extends React.TableHTMLAttributes<HTMLTableElement> {\n columns: TableColumn[];\n}\n\nexport interface TableBodyProps\n extends React.HTMLAttributes<HTMLTableSectionElement> {}\n\nexport interface TableRowProps\n extends React.HTMLAttributes<HTMLTableRowElement> {}\n\nexport interface TableCellProps\n extends React.TdHTMLAttributes<HTMLTableCellElement> {\n status?: TableCellStatus;\n}\n\nconst getFractionTotal = (\n columns: TableColumn[],\n) =>\n columns.reduce((total, column) => {\n if (\n column.width?.type !== 'fraction' ||\n column.width.value <= 0\n ) {\n return total;\n }\n\n return total + column.width.value;\n }, 0);\n\nconst getFractionPercentage = (\n value: number,\n total: number,\n) =>\n Number(\n ((value / total) * 100).toFixed(6),\n );\n\nconst getColumnWidth = (\n width: TableColumnWidth | undefined,\n fractionTotal: number,\n): React.CSSProperties['width'] => {\n if (!width || width.type === 'auto') {\n return undefined;\n }\n\n if (width.type === 'min') {\n return '1%';\n }\n\n if (width.type === 'max') {\n return '100%';\n }\n\n if (width.type === 'fixed') {\n return width.value;\n }\n\n if (\n width.value <= 0 ||\n fractionTotal <= 0\n ) {\n return undefined;\n }\n\n return `${getFractionPercentage(\n width.value,\n fractionTotal,\n )}%`;\n};\n\nconst TableBody: React.FC<\n TableBodyProps\n> = ({\n className = '',\n ...props\n}) => {\n const classes = classnames(\n 'table__body',\n className,\n {},\n );\n\n return (\n <tbody\n className={classes}\n {...props}\n />\n );\n};\n\nconst TableRow: React.FC<\n TableRowProps\n> = ({\n className = '',\n ...props\n}) => {\n const classes = classnames(\n 'table__row',\n className,\n {},\n );\n\n return (\n <tr\n className={classes}\n {...props}\n />\n );\n};\n\nconst TableCell: React.FC<\n TableCellProps\n> = ({\n status,\n className = '',\n children,\n ...props\n}) => {\n const classes = classnames(\n 'table__cell',\n className,\n {\n 'table__cell--status':\n status !== undefined,\n },\n );\n\n if (!status) {\n return (\n <td\n className={classes}\n {...props}\n >\n {children}\n </td>\n );\n }\n\n const statusClasses = classnames(\n 'table__cell-status',\n '',\n {\n 'table__cell-status--good':\n status === 'good',\n 'table__cell-status--semi-good':\n status === 'semi-good',\n 'table__cell-status--med':\n status === 'med',\n 'table__cell-status--semi-bad':\n status === 'semi-bad',\n 'table__cell-status--bad':\n status === 'bad',\n },\n );\n\n return (\n <td\n className={classes}\n {...props}\n >\n <span className={statusClasses}>\n {children}\n </span>\n </td>\n );\n};\n\ninterface TableComponent\n extends React.FC<TableProps> {\n Body: typeof TableBody;\n Row: typeof TableRow;\n Cell: typeof TableCell;\n}\n\nconst Table: TableComponent = ({\n columns,\n className = '',\n children,\n ...props\n}) => {\n const classes = classnames(\n 'table',\n className,\n {},\n );\n\n const fractionTotal =\n getFractionTotal(columns);\n\n return (\n <table\n className={classes}\n {...props}\n >\n <colgroup>\n {columns.map((column) => (\n <col\n key={column.id}\n style={{\n width: getColumnWidth(\n column.width,\n fractionTotal,\n ),\n }}\n />\n ))}\n </colgroup>\n\n <thead className=\"table__head\">\n <tr className=\"table__row\">\n {columns.map((column) => (\n <th\n key={column.id}\n className=\"table__header\"\n scope=\"col\"\n >\n {column.header}\n </th>\n ))}\n </tr>\n </thead>\n\n {children}\n </table>\n );\n};\n\nTable.Body = TableBody;\nTable.Row = TableRow;\nTable.Cell = TableCell;\n\nexport default Table;\n"]}
|
package/index.d.ts
CHANGED
|
@@ -69,7 +69,7 @@ export type { FlipListItem, FlipListProps, } from './components/flip-list';
|
|
|
69
69
|
export { default as AvatarUpload } from './components/avatar-upload';
|
|
70
70
|
export type { AvatarUploadProps, } from './components/avatar-upload';
|
|
71
71
|
export { default as Table } from './components/table';
|
|
72
|
-
export type { TableBodyProps, TableCellProps, TableColumn, TableColumnWidth, TableProps, TableRowProps } from './components/table';
|
|
72
|
+
export type { TableBodyProps, TableCellProps, TableCellStatus, TableColumn, TableColumnWidth, TableProps, TableRowProps, } from './components/table';
|
|
73
73
|
export { default as Header } from './patterns/header';
|
|
74
74
|
export type { HeaderProps } from './patterns/header';
|
|
75
75
|
export { default as Footer } from './patterns/footer';
|
package/package.json
CHANGED
package/styles.css
CHANGED
|
@@ -1630,7 +1630,7 @@
|
|
|
1630
1630
|
/* color */
|
|
1631
1631
|
--course-outline-color: inherit;
|
|
1632
1632
|
--course-outline-meta-color: var(--color-text-note);
|
|
1633
|
-
|
|
1633
|
+
|
|
1634
1634
|
color: var(--course-outline-color);
|
|
1635
1635
|
|
|
1636
1636
|
/* typography */
|
|
@@ -1646,15 +1646,15 @@
|
|
|
1646
1646
|
var(--font-h3-letter-spacing);
|
|
1647
1647
|
|
|
1648
1648
|
--course-outline-item-title-font-family:
|
|
1649
|
-
var(--font-
|
|
1649
|
+
var(--font-lead-family);
|
|
1650
1650
|
--course-outline-item-title-font-size:
|
|
1651
|
-
var(--font-
|
|
1651
|
+
var(--font-lead);
|
|
1652
1652
|
--course-outline-item-title-font-weight:
|
|
1653
|
-
var(--font-
|
|
1653
|
+
var(--font-lead-weight);
|
|
1654
1654
|
--course-outline-item-title-line-height:
|
|
1655
|
-
var(--font-
|
|
1655
|
+
var(--font-lead-line);
|
|
1656
1656
|
--course-outline-item-title-letter-spacing:
|
|
1657
|
-
var(--font-
|
|
1657
|
+
var(--font-lead-letter-spacing);
|
|
1658
1658
|
|
|
1659
1659
|
--course-outline-body-font-family:
|
|
1660
1660
|
var(--font-body-family);
|
|
@@ -1702,6 +1702,55 @@
|
|
|
1702
1702
|
/* motion */
|
|
1703
1703
|
}
|
|
1704
1704
|
|
|
1705
|
+
.layout-sidebar__side .course-outline {
|
|
1706
|
+
/* color */
|
|
1707
|
+
|
|
1708
|
+
/* typography */
|
|
1709
|
+
--course-outline-item-title-font-family:
|
|
1710
|
+
var(--font-body-family);
|
|
1711
|
+
--course-outline-item-title-font-size:
|
|
1712
|
+
var(--font-body);
|
|
1713
|
+
--course-outline-item-title-font-weight:
|
|
1714
|
+
var(--font-body-weight);
|
|
1715
|
+
--course-outline-item-title-line-height:
|
|
1716
|
+
var(--font-body-line);
|
|
1717
|
+
--course-outline-item-title-letter-spacing:
|
|
1718
|
+
var(--font-body-letter-spacing);
|
|
1719
|
+
|
|
1720
|
+
/* size */
|
|
1721
|
+
|
|
1722
|
+
/* border */
|
|
1723
|
+
|
|
1724
|
+
/* depth */
|
|
1725
|
+
|
|
1726
|
+
/* motion */
|
|
1727
|
+
}
|
|
1728
|
+
|
|
1729
|
+
.layout-sidebar__side
|
|
1730
|
+
.course-outline__action {
|
|
1731
|
+
/* color */
|
|
1732
|
+
|
|
1733
|
+
/* typography */
|
|
1734
|
+
font-family:
|
|
1735
|
+
var(--course-outline-note-font-family);
|
|
1736
|
+
font-size:
|
|
1737
|
+
var(--course-outline-note-font-size);
|
|
1738
|
+
font-weight:
|
|
1739
|
+
var(--course-outline-note-font-weight);
|
|
1740
|
+
line-height:
|
|
1741
|
+
var(--course-outline-note-line-height);
|
|
1742
|
+
letter-spacing:
|
|
1743
|
+
var(--course-outline-note-letter-spacing);
|
|
1744
|
+
|
|
1745
|
+
/* size */
|
|
1746
|
+
|
|
1747
|
+
/* border */
|
|
1748
|
+
|
|
1749
|
+
/* depth */
|
|
1750
|
+
|
|
1751
|
+
/* motion */
|
|
1752
|
+
}
|
|
1753
|
+
|
|
1705
1754
|
.course-outline__groups {
|
|
1706
1755
|
/* color */
|
|
1707
1756
|
|
|
@@ -1786,6 +1835,44 @@
|
|
|
1786
1835
|
/* motion */
|
|
1787
1836
|
}
|
|
1788
1837
|
|
|
1838
|
+
h2.course-outline__group-title {
|
|
1839
|
+
/* color */
|
|
1840
|
+
|
|
1841
|
+
/* typography */
|
|
1842
|
+
font-family: var(--font-h2-family);
|
|
1843
|
+
font-size: var(--font-h2);
|
|
1844
|
+
font-weight: var(--font-h2-weight);
|
|
1845
|
+
line-height: var(--font-h2-line);
|
|
1846
|
+
letter-spacing: var(--font-h2-letter-spacing);
|
|
1847
|
+
|
|
1848
|
+
/* size */
|
|
1849
|
+
|
|
1850
|
+
/* border */
|
|
1851
|
+
|
|
1852
|
+
/* depth */
|
|
1853
|
+
|
|
1854
|
+
/* motion */
|
|
1855
|
+
}
|
|
1856
|
+
|
|
1857
|
+
h4.course-outline__group-title {
|
|
1858
|
+
/* color */
|
|
1859
|
+
|
|
1860
|
+
/* typography */
|
|
1861
|
+
font-family: var(--font-h4-family);
|
|
1862
|
+
font-size: var(--font-h4);
|
|
1863
|
+
font-weight: var(--font-h4-weight);
|
|
1864
|
+
line-height: var(--font-h4-line);
|
|
1865
|
+
letter-spacing: var(--font-h4-letter-spacing);
|
|
1866
|
+
|
|
1867
|
+
/* size */
|
|
1868
|
+
|
|
1869
|
+
/* border */
|
|
1870
|
+
|
|
1871
|
+
/* depth */
|
|
1872
|
+
|
|
1873
|
+
/* motion */
|
|
1874
|
+
}
|
|
1875
|
+
|
|
1789
1876
|
.course-outline__group-title a {
|
|
1790
1877
|
/* color */
|
|
1791
1878
|
color: inherit;
|
|
@@ -5132,6 +5219,147 @@
|
|
|
5132
5219
|
/* motion */
|
|
5133
5220
|
}
|
|
5134
5221
|
|
|
5222
|
+
.table__cell--status {
|
|
5223
|
+
/* color */
|
|
5224
|
+
|
|
5225
|
+
/* typography */
|
|
5226
|
+
|
|
5227
|
+
/* size */
|
|
5228
|
+
padding: 0;
|
|
5229
|
+
|
|
5230
|
+
/* border */
|
|
5231
|
+
|
|
5232
|
+
/* depth */
|
|
5233
|
+
|
|
5234
|
+
/* motion */
|
|
5235
|
+
}
|
|
5236
|
+
|
|
5237
|
+
.table__cell--status:first-child {
|
|
5238
|
+
/* color */
|
|
5239
|
+
|
|
5240
|
+
/* typography */
|
|
5241
|
+
|
|
5242
|
+
/* size */
|
|
5243
|
+
padding-left: var(--padding-table-horz);
|
|
5244
|
+
|
|
5245
|
+
/* border */
|
|
5246
|
+
|
|
5247
|
+
/* depth */
|
|
5248
|
+
|
|
5249
|
+
/* motion */
|
|
5250
|
+
}
|
|
5251
|
+
|
|
5252
|
+
.table__cell--status:last-child {
|
|
5253
|
+
/* color */
|
|
5254
|
+
|
|
5255
|
+
/* typography */
|
|
5256
|
+
|
|
5257
|
+
/* size */
|
|
5258
|
+
padding-right: var(--padding-table-horz);
|
|
5259
|
+
|
|
5260
|
+
/* border */
|
|
5261
|
+
|
|
5262
|
+
/* depth */
|
|
5263
|
+
|
|
5264
|
+
/* motion */
|
|
5265
|
+
}
|
|
5266
|
+
|
|
5267
|
+
.table__cell-status {
|
|
5268
|
+
/* color */
|
|
5269
|
+
|
|
5270
|
+
/* typography */
|
|
5271
|
+
|
|
5272
|
+
/* size */
|
|
5273
|
+
display: block;
|
|
5274
|
+
padding-block: var(--table-row-gap);
|
|
5275
|
+
padding-inline: calc(
|
|
5276
|
+
var(--table-column-gap) / 2
|
|
5277
|
+
);
|
|
5278
|
+
|
|
5279
|
+
/* border */
|
|
5280
|
+
|
|
5281
|
+
/* depth */
|
|
5282
|
+
|
|
5283
|
+
/* motion */
|
|
5284
|
+
}
|
|
5285
|
+
|
|
5286
|
+
.table__cell-status--good {
|
|
5287
|
+
/* color */
|
|
5288
|
+
background-color: var(--color-good);
|
|
5289
|
+
color: var(--color-text-primary-1);
|
|
5290
|
+
|
|
5291
|
+
/* typography */
|
|
5292
|
+
|
|
5293
|
+
/* size */
|
|
5294
|
+
|
|
5295
|
+
/* border */
|
|
5296
|
+
|
|
5297
|
+
/* depth */
|
|
5298
|
+
|
|
5299
|
+
/* motion */
|
|
5300
|
+
}
|
|
5301
|
+
|
|
5302
|
+
.table__cell-status--semi-good {
|
|
5303
|
+
/* color */
|
|
5304
|
+
background-color: var(--color-semi-good);
|
|
5305
|
+
color: var(--color-text-primary-1);
|
|
5306
|
+
|
|
5307
|
+
/* typography */
|
|
5308
|
+
|
|
5309
|
+
/* size */
|
|
5310
|
+
|
|
5311
|
+
/* border */
|
|
5312
|
+
|
|
5313
|
+
/* depth */
|
|
5314
|
+
|
|
5315
|
+
/* motion */
|
|
5316
|
+
}
|
|
5317
|
+
|
|
5318
|
+
.table__cell-status--med {
|
|
5319
|
+
/* color */
|
|
5320
|
+
background-color: var(--color-med);
|
|
5321
|
+
|
|
5322
|
+
/* typography */
|
|
5323
|
+
|
|
5324
|
+
/* size */
|
|
5325
|
+
|
|
5326
|
+
/* border */
|
|
5327
|
+
|
|
5328
|
+
/* depth */
|
|
5329
|
+
|
|
5330
|
+
/* motion */
|
|
5331
|
+
}
|
|
5332
|
+
|
|
5333
|
+
.table__cell-status--semi-bad {
|
|
5334
|
+
/* color */
|
|
5335
|
+
background-color: var(--color-semi-bad);
|
|
5336
|
+
|
|
5337
|
+
/* typography */
|
|
5338
|
+
|
|
5339
|
+
/* size */
|
|
5340
|
+
|
|
5341
|
+
/* border */
|
|
5342
|
+
|
|
5343
|
+
/* depth */
|
|
5344
|
+
|
|
5345
|
+
/* motion */
|
|
5346
|
+
}
|
|
5347
|
+
|
|
5348
|
+
.table__cell-status--bad {
|
|
5349
|
+
/* color */
|
|
5350
|
+
background-color: var(--color-bad);
|
|
5351
|
+
|
|
5352
|
+
/* typography */
|
|
5353
|
+
|
|
5354
|
+
/* size */
|
|
5355
|
+
|
|
5356
|
+
/* border */
|
|
5357
|
+
|
|
5358
|
+
/* depth */
|
|
5359
|
+
|
|
5360
|
+
/* motion */
|
|
5361
|
+
}
|
|
5362
|
+
|
|
5135
5363
|
.table__body
|
|
5136
5364
|
.table__row:last-child
|
|
5137
5365
|
.table__cell {
|
|
@@ -5140,7 +5368,6 @@
|
|
|
5140
5368
|
/* typography */
|
|
5141
5369
|
|
|
5142
5370
|
/* size */
|
|
5143
|
-
padding-bottom: var(--padding-table-vert);
|
|
5144
5371
|
|
|
5145
5372
|
/* border */
|
|
5146
5373
|
border-bottom: 0;
|