liz/wikijs-fork
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: improve table rendering + add markdown-it-decorate module

Browse Source
This commit is contained in:
NGPixel
2022-11-08 22:40:43 -05:00
parent d98e0b3cd0
commit 9fbc25adb8
7 changed files with 107 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
client/themes/default/scss/app.scss
View File

@@ -662,13 +662,40 @@
// ---------------------------------
table {
margin: .5rem 1.75rem;
margin: .5rem 0;
border-spacing: 0;
border-radius: 5px;
border: 1px solid mc('grey', '300');
@at-root .theme--dark & {
border-color: mc('grey', '600');
}
&.dense {
td, th {
font-size: .85rem;
padding: .5rem;
}
}
th {
padding: .75rem;
border-bottom: 2px solid mc('grey', '500');
color: mc('grey', '600');
background-color: mc('grey', '100');
@at-root .theme--dark & {
background-color: darken(mc('grey', '900'), 8%);
border-bottom-color: mc('grey', '600');
color: mc('grey', '500');
}
&:first-child {
border-top-left-radius: 7px;
}
&:last-child {
border-top-right-radius: 7px;
}
}
td {
@@ -677,7 +704,56 @@
tr {
td {
border-bottom: 1px solid mc('grey', '200');
border-bottom: 1px solid mc('grey', '300');
border-right: 1px solid mc('grey', '100');
@at-root .theme--dark & {
border-bottom-color: mc('grey', '700');
border-right-color: mc('grey', '800');
}
&:nth-child(even) {
background-color: mc('grey', '50');
@at-root .theme--dark & {
background-color: darken(mc('grey', '900'), 4%);
}
}
&:last-child {
border-right: none;
}
}
&:nth-child(even) {
td {
background-color: mc('grey', '50');
@at-root .theme--dark & {
background-color: darken(mc('grey', '800'), 8%);
}
&:nth-child(even) {
background-color: mc('grey', '100');
@at-root .theme--dark & {
background-color: darken(mc('grey', '800'), 10%);
}
}
}
}
&:last-child {
td {
border-bottom: none;
&:first-child {
border-bottom-left-radius: 7px;
}
&:last-child {
border-bottom-right-radius: 7px;
}
}
}
}
}
@@ -699,6 +775,7 @@
border: 1px solid mc('blue-grey', '100');
box-shadow: inset -1px -1px 0 0 #FFF, inset 1px 0 0 #FFF;
padding: .5rem .75rem;
border-radius: 0 !important;
@at-root .theme--dark & {
border-color: mc('grey', '700');
@@ -735,6 +812,12 @@
}
}
// -> Add horizontal scrollbar when table is too wide
.table-container {
width: 100%;
overflow-x: auto;
}
// ---------------------------------
// IMAGES
// ---------------------------------