refonte des styles des tableaux

This commit is contained in:
Raphael Goetter 2017-09-20 16:50:49 +02:00
parent 8ed3ecdfc8
commit ad3e11559d
5 changed files with 63 additions and 50 deletions

View file

@ -13,6 +13,7 @@
- ajout des onglets (tabs) - ajout des onglets (tabs)
- ajout des flèches courantes (haut, droit, bas, gauche) en SVG data-URI - ajout des flèches courantes (haut, droit, bas, gauche) en SVG data-URI
- refonte des styles de formulaires - refonte des styles de formulaires
- refonte des styles des tableaux
- autogrid object en Grid Layout - autogrid object en Grid Layout
- regroupement des styles des tableaux - regroupement des styles des tableaux
- suppression du namespace "kna-", ne devrait pas être problématique dès lors que Grillade sera devenu inutile dans KNACSS - suppression du namespace "kna-", ne devrait pas être problématique dès lors que Grillade sera devenu inutile dans KNACSS

View file

@ -1849,37 +1849,39 @@ table,
.table { .table {
display: table; display: table;
border: 1px solid #acb3c2;
background: transparent;
} }
#recaptcha_table, .table--zebra tbody tr:nth-child(odd) {
.table-auto { background: #e7e9ed;
table-layout: auto;
} }
td, .table caption {
th { caption-side: bottom;
vertical-align: top; padding: 1rem;
color: #727e96;
font-style: italic;
text-align: right;
}
.table td,
.table th {
padding: 0.3rem 0.6rem;
min-width: 2rem; min-width: 2rem;
vertical-align: top;
border: 1px #acb3c2 dotted;
text-align: left;
cursor: default; cursor: default;
} }
/* deco */ .table thead {
table, color: #000;
.table { background: transparent;
border: 1px solid #ccc;
} }
caption { .table--auto {
padding: 1rem; table-layout: auto;
color: #555;
font-style: italic;
}
td,
th {
padding: 0.3em 0.8em;
border: 1px #aaa dotted;
text-align: left;
} }
/* ----------------------------- */ /* ----------------------------- */

File diff suppressed because one or more lines are too long

View file

@ -60,6 +60,13 @@ $color-arrow : $color-dark;
// checkboxes, radios // checkboxes, radios
$color-checkbox : $color-gray3; $color-checkbox : $color-gray3;
// tables
$border-table : $color-gray4;
$color-table-caption : $color-gray3;
$color-table-head : $color-base;
$background-table : transparent;
$background-table-head : transparent;
// buttons, badges, alerts color variants list // buttons, badges, alerts color variants list
// name - background-color - color - border // name - background-color - color - border
$variants-list: ( $variants-list: (

View file

@ -14,35 +14,38 @@ table,
.table { .table {
display: table; display: table;
border: 1px solid $border-table;
background: $background-table;
&--zebra {
& tbody tr:nth-child(odd) {
background: $color-gray5;
}
} }
#recaptcha_table, & caption {
.table-auto { caption-side: bottom;
table-layout: auto; padding: $small-value;
color: $color-table-caption;
font-style: italic;
text-align: right;
} }
td, & td,
th { & th {
vertical-align: top; padding: 0.3rem 0.6rem;
min-width: $medium-value; min-width: $medium-value;
vertical-align: top;
border: 1px $border-table dotted;
text-align: left;
cursor: default; cursor: default;
} }
& thead {
/* deco */ color: $color-table-head;
table, background: $background-table-head;
.table { }
border: 1px solid #ccc;
} }
caption { .table--auto {
padding: $small-value; table-layout: auto;
color: #555;
font-style: italic;
}
td,
th {
padding: 0.3em 0.8em;
border: 1px #aaa dotted;
text-align: left;
} }