parent
d1b5abf840
commit
b24e090421
@ -0,0 +1,2 @@
|
||||
*.map
|
||||
main.css
|
||||
|
After Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
Binary file not shown.
@ -0,0 +1,75 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Stocks</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<link rel="stylesheet" href="main.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main role="main">
|
||||
<h1>état des stocks</h1>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th class="left">produit</th><th>état du stock</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>café en grain</td>
|
||||
<td class="right"><i title="en stock" class="green"></i><span class="not-on-screen">haut</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>café soluble</td>
|
||||
<td class="right"><i class="orange"></i><span class="not-on-screen">délais à prévoir</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>café moulu</td>
|
||||
<td class="right"><i class="red"></i><span class="not-on-screen">indisponible</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>produit</th><th>état du stock</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>café en grain</td>
|
||||
<td class="right"><i class="icon-grin2"></i><span class="not-on-screen">haut</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>café soluble</td>
|
||||
<td class="right"><i class="icon-confused2"></i><span class="not-on-screen">délais à prévoir</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>café moulu</td>
|
||||
<td class="right"><i class="icon-angry2"></i><span class="not-on-screen">indisponible</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>produit</th><th>état du stock</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>café en grain</td>
|
||||
<td class="right"><i class="green"></i><span class="not-on-screen">haut</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>café soluble</td>
|
||||
<td class="right"><i class="icon-contrast"></i><span class="not-on-screen">délais à prévoir</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>café moulu</td>
|
||||
<td class="right"><i class="icon-blocked"></i><span class="not-on-screen">indisponible</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,65 @@
|
||||
body
|
||||
{
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.not-on-screen
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
|
||||
th,td
|
||||
{
|
||||
line-height: 22px;
|
||||
border:solid 1px #ccc;
|
||||
padding:5px;
|
||||
}
|
||||
|
||||
i
|
||||
{
|
||||
content:"\00a0";
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 20px;
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
vertical-align: middle;
|
||||
&.green
|
||||
{
|
||||
background-color:green;
|
||||
}
|
||||
&.red
|
||||
{
|
||||
background-color:red;
|
||||
}
|
||||
&.orange
|
||||
{
|
||||
background-color:orange;
|
||||
}
|
||||
|
||||
&.icon-grin2
|
||||
{
|
||||
color:green;
|
||||
}
|
||||
&.icon-angry2, &.icon-blocked
|
||||
{
|
||||
color:red;
|
||||
}
|
||||
&.icon-confused2, &.icon-contrast
|
||||
{
|
||||
color:orange;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.right
|
||||
{
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.left
|
||||
{
|
||||
text-align: left;
|
||||
}
|
||||
Binary file not shown.
@ -0,0 +1,53 @@
|
||||
@font-face {
|
||||
font-family: 'icomoon';
|
||||
src:
|
||||
url('fonts/icomoon.ttf?qrb5l6') format('truetype'),
|
||||
url('fonts/icomoon.woff?qrb5l6') format('woff'),
|
||||
url('fonts/icomoon.svg?qrb5l6#icomoon') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
}
|
||||
|
||||
[class^="icon-"], [class*=" icon-"] {
|
||||
/* use !important to prevent issues with browser extensions that change fonts */
|
||||
font-family: 'icomoon' !important;
|
||||
speak: never;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
|
||||
/* Better Font Rendering =========== */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-contrast:before {
|
||||
content: "\e9d5";
|
||||
}
|
||||
.icon-grin2:before {
|
||||
content: "\e9ea";
|
||||
}
|
||||
.icon-angry2:before {
|
||||
content: "\e9ee";
|
||||
}
|
||||
.icon-confused2:before {
|
||||
content: "\e9f6";
|
||||
}
|
||||
.icon-neutral2:before {
|
||||
content: "\e9f8";
|
||||
}
|
||||
.icon-notification:before {
|
||||
content: "\ea08";
|
||||
}
|
||||
.icon-question:before {
|
||||
content: "\ea09";
|
||||
}
|
||||
.icon-cancel-circle:before {
|
||||
content: "\ea0d";
|
||||
}
|
||||
.icon-blocked:before {
|
||||
content: "\ea0e";
|
||||
}
|
||||
Loading…
Reference in new issue