163 lines
3.2 KiB
CSS
Executable File
163 lines
3.2 KiB
CSS
Executable File
.no-select{
|
|
user-select: none;
|
|
-moz-user-select: none;
|
|
-webkit-user-select: none;
|
|
-ms-user-select: none;
|
|
-o-user-select: none;
|
|
}
|
|
|
|
|
|
|
|
|
|
/**********************/
|
|
/*** TABLEAU .BASIC ***/
|
|
/**********************/
|
|
|
|
/* STYLE "BASIC" DES TABLEAUX */
|
|
table.basic{
|
|
/* position */
|
|
/*width: calc( 100% - 2*1em );*/
|
|
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,
|
|
#DRAGNDROP> td,
|
|
#DRAGNDROP> 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; font-size: 1.05em; }
|
|
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;
|
|
}
|
|
|
|
|
|
|
|
/******************/
|
|
/*** PARAGRAPHS ***/
|
|
/******************/
|
|
#CONTAINER section > p{
|
|
/* position */
|
|
padding: 1em;
|
|
margin-left: 1em;
|
|
|
|
/* border */
|
|
border-radius: 3px;
|
|
border: 1px solid #ddd;
|
|
box-shadow: 1px 1px 3px #ddd;
|
|
|
|
/* background */
|
|
background-color: #fff;
|
|
}
|
|
|
|
#CONTAINER section > p:before{
|
|
content: '';
|
|
/* position */
|
|
display: block;
|
|
position: absolute;
|
|
top: calc( 2.7em - 3px );
|
|
left: calc( 1.1em - 5px );
|
|
|
|
/* border */
|
|
border: calc(1em + 3px) solid transparent;
|
|
border-right-color: #ddd;
|
|
|
|
/* Z */
|
|
z-index: -1;
|
|
}
|
|
|
|
#CONTAINER section > p:after{
|
|
content: '';
|
|
/* position */
|
|
display: block;
|
|
position: absolute;
|
|
top: 2.7em;
|
|
left: 1.1em;
|
|
|
|
/* border */
|
|
border: 1em solid transparent;
|
|
border-right-color: #fff;
|
|
|
|
/* Z */
|
|
z-index: 2;
|
|
} |