csechet
/
publik-base-theme
forked from entrouvert/publik-base-theme
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

css: introduce .pk-table-wrapper & $table-wrapper-background (#46886) 

* add a x-axis scrollbar when table is too large
* add a shadow scroll indicator
This commit is contained in:
Thomas Jund 2020-09-22 16:40:11 +02:00
parent 652bc08154
commit a42984237a
2 changed files with 22 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
help/fr/misc-css-classes.page
View File

@ -153,6 +153,10 @@ de classes CSS réutilisables.
<td><p><code>pk-table-zebra</code></p></td>
<td><p>Alterne les couleurs de fond des lignes.</p></td>
</tr>
<tr>
<td><p><code>pk-table-wrapper</code></p></td>
<td><p>Permet aux usagers de mobiles de faire défiler le tableau horizontalement. Cette classe ne s’applique pas à la balise <table> elle-même, elle doit se poser sur une balise <div> englobant le tableau.</p></td>
</tr>
</table>
</section>

19
static/includes/_library.scss
View File

@ -4,6 +4,8 @@
//
// The classes are prefixed by pk-.
$table-wrapper-background: $cell-background !default; // need a solid color.
$table-caption-color: $title-color !default;
$table-caption-side: top !default;
@ -51,6 +53,21 @@ div.link-cell.pk-big-button {
}
}
.pk-table-wrapper {
overflow: auto;
max-width: 100%;
// scroll shadow
background:
linear-gradient(to right, $table-wrapper-background 30%, transparent),
linear-gradient(to right, transparent, $table-wrapper-background 70%) 0 100%,
radial-gradient(farthest-side at 0% 50%, rgba(0,0,0,0.25), transparent),
radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.25), transparent) 0 100%;
background-repeat: no-repeat;
background-color: $table-wrapper-background;
background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
background-position: 0 0, 100%, 0 0, 100%;
background-attachment: local, local, scroll, scroll;
}
table.pk-data-table {
border-collapse: collapse;
caption {
@ -100,7 +117,7 @@ table.pk-data-table {
.pk-table-zebra {
&.pk-data-table {
tbody tr:nth-child(2n+1) {
background: #eee;
background: rgba(0, 0, 0, 0.065);
}
}
}