OpenSourceArk/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-06-14 11:52:32 +03:00
Code Issues Packages Projects Releases Wiki Activity

Slight facelift of data tables

Browse Source
This commit is contained in:
squidfunk 2021-08-07 17:55:17 +02:00
parent 8a8d5742c0
commit f0615fe1e0
9 changed files with 31 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
material/assets/javascripts/bundle.8fb3741f.min.js → material/assets/javascripts/bundle.29db7785.min.js vendored
View File

File diff suppressed because one or more lines are too long

4
material/assets/javascripts/bundle.8fb3741f.min.js.map → material/assets/javascripts/bundle.29db7785.min.js.map
View File

File diff suppressed because one or more lines are too long

2
material/assets/stylesheets/main.1118c9be.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/main.1118c9be.min.css.map
View File

File diff suppressed because one or more lines are too long

2
material/assets/stylesheets/main.75c97395.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/main.75c97395.min.css.map Normal file
View File

File diff suppressed because one or more lines are too long

4
material/base.html
View File

@ -39,7 +39,7 @@
{% endif %}
{% endblock %}
{% block styles %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.1118c9be.min.css' | url }}">
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.75c97395.min.css' | url }}">
{% if config.theme.palette %}
{% set palette = config.theme.palette %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.ba0d045b.min.css' | url }}">
@ -223,7 +223,7 @@
</script>
{% endblock %}
{% block scripts %}
<script src="{{ 'assets/javascripts/bundle.8fb3741f.min.js' | url }}"></script>
<script src="{{ 'assets/javascripts/bundle.29db7785.min.js' | url }}"></script>
{% for path in config["extra_javascript"] %}
<script src="{{ path | url }}"></script>
{% endfor %}

3
src/assets/stylesheets/main/_colors.scss
View File

@ -90,6 +90,9 @@
--md-typeset-kbd-accent-color: hsla(0, 100%, 100%, 1);
--md-typeset-kbd-border-color: hsla(0, 0%, 72%, 1);
// Typeset `table` color shades
--md-typeset-table-color: hsla(0, 0%, 0%, 0.12);
// Admonition color shades
--md-admonition-fg-color: var(--md-default-fg-color);
--md-admonition-bg-color: var(--md-default-bg-color);

40
src/assets/stylesheets/main/_typeset.scss
View File

@ -57,8 +57,9 @@ kbd {
// Icon definitions
:root {
--md-typeset-table--ascending: svg-load("material/arrow-down.svg");
--md-typeset-table--descending: svg-load("material/arrow-up.svg");
--md-typeset-table-sort-icon: svg-load("material/sort.svg");
--md-typeset-table-sort-icon--asc: svg-load("material/sort-ascending.svg");
--md-typeset-table-sort-icon--desc: svg-load("material/sort-descending.svg");
}
// ----------------------------------------------------------------------------
@ -496,10 +497,8 @@ kbd {
overflow: auto;
font-size: px2rem(12.8px);
background-color: var(--md-default-bg-color);
border-radius: px2rem(2px);
box-shadow:
0 px2rem(4px) px2rem(10px) hsla(0, 0%, 0%, 0.05),
0 0 px2rem(1px) hsla(0, 0%, 0%, 0.1);
border: px2rem(1px) solid var(--md-typeset-table-color);
border-radius: px2rem(4px);
touch-action: auto;
// [print]: Reset display mode so table header wraps when printing
@ -544,9 +543,8 @@ kbd {
th {
min-width: px2rem(100px);
padding: px2em(12px, 12.8px) px2em(16px, 12.8px);
color: var(--md-default-bg-color);
font-weight: 700;
vertical-align: top;
background-color: var(--md-default-fg-color--light);
// Links in table headings
a {
@ -558,11 +556,11 @@ kbd {
td {
padding: px2em(12px, 12.8px) px2em(16px, 12.8px);
vertical-align: top;
border-top: px2rem(1px) solid var(--md-default-fg-color--lightest);
border-top: px2rem(1px) solid var(--md-typeset-table-color);
}
// Table row
tr {
// Table body row
tbody tr {
transition: background-color 125ms;
// Table row on hover
@ -570,11 +568,6 @@ kbd {
background-color: rgba(0, 0, 0, 0.035);
box-shadow: 0 px2rem(1px) 0 var(--md-default-bg-color) inset;
}
// Hide border on first table row
&:first-child td {
border-top: 0;
}
}
// Text link in table
@ -594,21 +587,28 @@ kbd {
height: 1.2em;
margin-left: 0.5em;
vertical-align: sub;
mask-image: var(--md-typeset-table-sort-icon);
mask-repeat: no-repeat;
mask-size: contain;
transition: background-color 125ms;
content: "";
}
// Sort ascending
&:hover::after {
background-color: var(--md-default-fg-color--lighter);
}
// Sort ascending
&[aria-sort="ascending"]::after {
background-color: currentColor;
mask-image: var(--md-typeset-table--ascending);
background-color: var(--md-default-fg-color--light);
mask-image: var(--md-typeset-table-sort-icon--asc);
}
// Sort descending
&[aria-sort="descending"]::after {
background-color: currentColor;
mask-image: var(--md-typeset-table--descending);
background-color: var(--md-default-fg-color--light);
mask-image: var(--md-typeset-table-sort-icon--desc);
}
}