96 lines
2.2 KiB
CSS
96 lines
2.2 KiB
CSS
/* STYLE "BASIC" DES TABLEAUX */
|
|
table.basic{
|
|
/* position */
|
|
margin: 2em 1em;
|
|
|
|
/* border */
|
|
border-radius: 5px;
|
|
border-spacing: 0;
|
|
box-shadow: 0 0 4px #e3e3e3;
|
|
}
|
|
|
|
/* affichage du corps si tête activée */
|
|
table.basic thead + tbody td{ display: none; }
|
|
table.basic thead + tbody td.more{ display: block; }
|
|
table.basic thead.active + tbody td{
|
|
display: table-cell;
|
|
}
|
|
|
|
|
|
|
|
|
|
table.basic tr td,
|
|
table.basic tr th{
|
|
/* position */
|
|
padding: 1em 1.5em;
|
|
|
|
/* border */
|
|
border-width: 1px 1px 0 0;
|
|
border-style: solid;
|
|
border-color: #e0e1e3;
|
|
|
|
/* backgroud */
|
|
background-color: #fff;
|
|
|
|
/* foreground */
|
|
color: #4e4e4e;
|
|
|
|
/* animation */
|
|
transition: all .2s ease-in-out;
|
|
-moz-transition: all .2s ease-in-out;
|
|
-webkit-transition: all .2s ease-in-out;
|
|
-ms-transition: all .2s ease-in-out;
|
|
-o-transition: all .2s ease-in-out;
|
|
|
|
/* extra */
|
|
cursor: default;
|
|
}
|
|
|
|
/* la ligne "Voir plus" */
|
|
table.basic tr td.more{
|
|
/* background */
|
|
background: #f7f8fc url(../src/more.svg) right 1em center no-repeat;
|
|
background-size: auto 1.5em;
|
|
|
|
/* foreground */
|
|
color: #b7b7b7;
|
|
text-align: right;
|
|
padding-right: 3em;
|
|
|
|
/* extra */
|
|
cursor: pointer;
|
|
}
|
|
|
|
table.basic tr td.more:before{ content: 'Voir plus'; }
|
|
table.basic thead.active + tbody tr td.more:before{ content: 'Voir moins'; }
|
|
|
|
/* on cache "voir plus" quand le tableau est déroulé */
|
|
table.basic thead.active + td.more{ display: none; }
|
|
|
|
|
|
/* différence avec <thead> */
|
|
table.basic tr th{ background-color: #f7f8fc; }
|
|
table.basic tr th:first-letter{ text-transform: uppercase; }
|
|
|
|
|
|
/* on ajoute les rebords pour ceux à gauche */
|
|
table.basic tr td:first-child,
|
|
table.basic tr th:first-child{ border-left-width: 1px; }
|
|
/* on ajoute les rebords pour ceux en bas */
|
|
table.basic tr:last-child td { border-bottom-width: 1px; }
|
|
|
|
|
|
/* angle haut gauche */
|
|
table.basic tr:first-child th:first-child{ border-radius: 5px 0 0 0; }
|
|
/* angle haut droit */
|
|
table.basic tr:first-child th:last-child { border-radius: 0 5px 0 0; }
|
|
/* angle bas gauche */
|
|
table.basic tr:last-child td:first-child { border-radius: 0 0 0 5px; }
|
|
/* angle bas droit */
|
|
table.basic tr:last-child td:last-child { border-radius: 0 0 5px 0; }
|
|
|
|
/* @hover */
|
|
table.basic tr:hover td{
|
|
background-color: #f7f8fc;
|
|
color: #333;
|
|
} |