refonte des styles des tableaux
This commit is contained in:
parent
8ed3ecdfc8
commit
ad3e11559d
5 changed files with 63 additions and 50 deletions
|
@ -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
|
||||||
|
|
|
@ -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
|
@ -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: (
|
||||||
|
|
|
@ -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;
|
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue