471 lines
11 KiB
HTML
471 lines
11 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
|
||
|
|
<title>Theming - Semantic</title>
|
||
|
|
|
||
|
|
<!--- Site CSS -->
|
||
|
|
<link rel="stylesheet" type="text/css" href="../../dist/components/reset.css">
|
||
|
|
<link rel="stylesheet" type="text/css" href="../../dist/components/site.css">
|
||
|
|
<link rel="stylesheet" type="text/css" href="../../dist/components/grid.css">
|
||
|
|
|
||
|
|
<!--- Component CSS -->
|
||
|
|
<link rel="stylesheet" type="text/css" href="../../dist/components/icon.css">
|
||
|
|
<link rel="stylesheet" type="text/css" href="../../dist/components/table.css">
|
||
|
|
<link rel="stylesheet" type="text/css" href="../../dist/components/button.css">
|
||
|
|
<link rel="stylesheet" type="text/css" href="../../dist/components/transition.css">
|
||
|
|
<link rel="stylesheet" type="text/css" href="../../dist/components/popup.css">
|
||
|
|
|
||
|
|
<!--- Component JS -->
|
||
|
|
<script src="../assets/library/jquery.min.js"></script>
|
||
|
|
<script src="../assets/library/iframe-content.js"></script>
|
||
|
|
<script type="text/javascript" src="../../dist/components/popup.js"></script>
|
||
|
|
<script type="text/javascript" src="../../dist/components/transition.js"></script>
|
||
|
|
|
||
|
|
<!--- Show Names -->
|
||
|
|
<script src="../assets/show-examples.js"></script>
|
||
|
|
|
||
|
|
<!--- Example CSS -->
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
padding: 1em;
|
||
|
|
}
|
||
|
|
.ui.table {
|
||
|
|
table-layout: fixed;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<!--- Example Javascript -->
|
||
|
|
<script>
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div class="ui two column relaxed grid">
|
||
|
|
<div class="column">
|
||
|
|
<table class="ui right aligned table">
|
||
|
|
<thead>
|
||
|
|
<th class="left aligned">Person</th>
|
||
|
|
<th>Calories</th>
|
||
|
|
<th>Fat</th>
|
||
|
|
<th>Protein</th>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td class="left aligned">Delmar</td>
|
||
|
|
<td>36</td>
|
||
|
|
<td>36g</td>
|
||
|
|
<td>2g</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="left aligned">Louise</td>
|
||
|
|
<td>24</td>
|
||
|
|
<td>24g</td>
|
||
|
|
<td>29g</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="left aligned">Terrell</td>
|
||
|
|
<td>22</td>
|
||
|
|
<td>11g</td>
|
||
|
|
<td>9g</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="left aligned">Marion</td>
|
||
|
|
<td>7</td>
|
||
|
|
<td>35g</td>
|
||
|
|
<td>3g</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="left aligned">Clayton</td>
|
||
|
|
<td>7</td>
|
||
|
|
<td>38g</td>
|
||
|
|
<td>20g</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
<div class="column">
|
||
|
|
<table class="ui right aligned celled table">
|
||
|
|
<thead>
|
||
|
|
<th class="left aligned">Person</th>
|
||
|
|
<th>Calories</th>
|
||
|
|
<th>Fat</th>
|
||
|
|
<th>Protein</th>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td class="left aligned">Drema</td>
|
||
|
|
<td class="positive">15</td>
|
||
|
|
<td class="negative">26g</td>
|
||
|
|
<td class="warning">8g</td>
|
||
|
|
</tr>
|
||
|
|
<tr class="positive">
|
||
|
|
<td class="left aligned">Nona</td>
|
||
|
|
<td>11</td>
|
||
|
|
<td>21g</td>
|
||
|
|
<td>16g</td>
|
||
|
|
</tr>
|
||
|
|
<tr class="negative">
|
||
|
|
<td class="left aligned">Isidra</td>
|
||
|
|
<td>34</td>
|
||
|
|
<td>43g</td>
|
||
|
|
<td>11g</td>
|
||
|
|
</tr>
|
||
|
|
<tr class="warning">
|
||
|
|
<td class="left aligned">Bart</td>
|
||
|
|
<td>41</td>
|
||
|
|
<td>40g</td>
|
||
|
|
<td>30g</td>
|
||
|
|
</tr>
|
||
|
|
<tr class="selected">
|
||
|
|
<td class="left aligned">Nguyet</td>
|
||
|
|
<td>41</td>
|
||
|
|
<td>44g</td>
|
||
|
|
<td>28g</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
<div class="column">
|
||
|
|
<table class="ui basic right aligned table">
|
||
|
|
<thead>
|
||
|
|
<th class="left aligned">Person</th>
|
||
|
|
<th>Calories</th>
|
||
|
|
<th>Fat</th>
|
||
|
|
<th>Protein</th>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td class="left aligned">Mirna</td>
|
||
|
|
<td>1</td>
|
||
|
|
<td>28g</td>
|
||
|
|
<td>29g</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="left aligned">Fernando</td>
|
||
|
|
<td>38</td>
|
||
|
|
<td>2g</td>
|
||
|
|
<td>48g</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="left aligned">Lisette</td>
|
||
|
|
<td>18</td>
|
||
|
|
<td>9g</td>
|
||
|
|
<td>23g</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="left aligned">Ahmad</td>
|
||
|
|
<td>42</td>
|
||
|
|
<td>26g</td>
|
||
|
|
<td>49g</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="left aligned">Laquanda</td>
|
||
|
|
<td>27</td>
|
||
|
|
<td>27g</td>
|
||
|
|
<td>49g</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
<div class="column">
|
||
|
|
<table class="ui very basic right aligned table">
|
||
|
|
<thead>
|
||
|
|
<th class="left aligned">Person</th>
|
||
|
|
<th>Calories</th>
|
||
|
|
<th>Fat</th>
|
||
|
|
<th>Protein</th>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td class="left aligned">Drema</td>
|
||
|
|
<td>15</td>
|
||
|
|
<td>26g</td>
|
||
|
|
<td>8g</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="left aligned">Nona</td>
|
||
|
|
<td>11</td>
|
||
|
|
<td>21g</td>
|
||
|
|
<td>16g</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="left aligned">Isidra</td>
|
||
|
|
<td>34</td>
|
||
|
|
<td>43g</td>
|
||
|
|
<td>11g</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="left aligned">Bart</td>
|
||
|
|
<td>41</td>
|
||
|
|
<td>40g</td>
|
||
|
|
<td>30g</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="left aligned">Nguyet</td>
|
||
|
|
<td>41</td>
|
||
|
|
<td>44g</td>
|
||
|
|
<td>28g</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
<div class="column">
|
||
|
|
<table class="ui celled selectable right aligned table">
|
||
|
|
<thead>
|
||
|
|
<th class="left aligned">Person</th>
|
||
|
|
<th>Calories</th>
|
||
|
|
<th>Fat</th>
|
||
|
|
<th>Protein</th>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td class="left aligned">Tasia</td>
|
||
|
|
<td>12</td>
|
||
|
|
<td>7g</td>
|
||
|
|
<td>21g</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="left aligned">Ronnie</td>
|
||
|
|
<td>38</td>
|
||
|
|
<td>37g</td>
|
||
|
|
<td>38g</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="left aligned">Gabriel</td>
|
||
|
|
<td>30</td>
|
||
|
|
<td>46g</td>
|
||
|
|
<td>46g</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="left aligned">Logan</td>
|
||
|
|
<td>12</td>
|
||
|
|
<td>21g</td>
|
||
|
|
<td>39g</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="left aligned">Clare</td>
|
||
|
|
<td>39</td>
|
||
|
|
<td>41g</td>
|
||
|
|
<td>2g</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
<div class="column">
|
||
|
|
<table class="ui striped right aligned table">
|
||
|
|
<thead>
|
||
|
|
<th class="left aligned">Person</th>
|
||
|
|
<th>Calories</th>
|
||
|
|
<th>Fat</th>
|
||
|
|
<th>Protein</th>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td class="left aligned">Rosaline</td>
|
||
|
|
<td>5</td>
|
||
|
|
<td>35g</td>
|
||
|
|
<td>6g</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="left aligned">Barrie</td>
|
||
|
|
<td>27</td>
|
||
|
|
<td>23g</td>
|
||
|
|
<td>28g</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="left aligned">Trinidad</td>
|
||
|
|
<td>14</td>
|
||
|
|
<td>50g</td>
|
||
|
|
<td>7g</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="left aligned">Jaqueline</td>
|
||
|
|
<td>31</td>
|
||
|
|
<td>30g</td>
|
||
|
|
<td>50g</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="left aligned">Tamala</td>
|
||
|
|
<td>18</td>
|
||
|
|
<td>6g</td>
|
||
|
|
<td>13g</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
<div class="column">
|
||
|
|
<table class="ui padded celled right aligned table">
|
||
|
|
<thead>
|
||
|
|
<th class="left aligned">Person</th>
|
||
|
|
<th>Calories</th>
|
||
|
|
<th>Fat</th>
|
||
|
|
<th>Protein</th>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td class="left aligned">Lianne</td>
|
||
|
|
<td>23</td>
|
||
|
|
<td>32g</td>
|
||
|
|
<td>43g</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="left aligned">Joette</td>
|
||
|
|
<td>21</td>
|
||
|
|
<td>13g</td>
|
||
|
|
<td>31g</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="left aligned">Le</td>
|
||
|
|
<td>28</td>
|
||
|
|
<td>39g</td>
|
||
|
|
<td>23g</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="left aligned">Sacha</td>
|
||
|
|
<td>46</td>
|
||
|
|
<td>43g</td>
|
||
|
|
<td>13g</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="left aligned">Bruna</td>
|
||
|
|
<td>9</td>
|
||
|
|
<td>47g</td>
|
||
|
|
<td>12g</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
<div class="column">
|
||
|
|
<table class="ui definition celled right aligned table">
|
||
|
|
<thead>
|
||
|
|
<th></th>
|
||
|
|
<th>Calories</th>
|
||
|
|
<th>Fat</th>
|
||
|
|
<th>Protein</th>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td class="left aligned">Lianne</td>
|
||
|
|
<td>23</td>
|
||
|
|
<td>32g</td>
|
||
|
|
<td>43g</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="left aligned">Joette</td>
|
||
|
|
<td>21</td>
|
||
|
|
<td>13g</td>
|
||
|
|
<td>31g</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="left aligned">Le</td>
|
||
|
|
<td>28</td>
|
||
|
|
<td>39g</td>
|
||
|
|
<td>23g</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="left aligned">Sacha</td>
|
||
|
|
<td>46</td>
|
||
|
|
<td>43g</td>
|
||
|
|
<td>13g</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="left aligned">Bruna</td>
|
||
|
|
<td>9</td>
|
||
|
|
<td>47g</td>
|
||
|
|
<td>12g</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
<div class="column">
|
||
|
|
<table class="ui inverted right aligned table">
|
||
|
|
<thead>
|
||
|
|
<th class="left aligned">Person</th>
|
||
|
|
<th>Calories</th>
|
||
|
|
<th>Fat</th>
|
||
|
|
<th>Protein</th>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td class="left aligned">Lianne</td>
|
||
|
|
<td>23</td>
|
||
|
|
<td>32g</td>
|
||
|
|
<td>43g</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="left aligned">Joette</td>
|
||
|
|
<td>21</td>
|
||
|
|
<td>13g</td>
|
||
|
|
<td>31g</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="left aligned">Le</td>
|
||
|
|
<td>28</td>
|
||
|
|
<td>39g</td>
|
||
|
|
<td>23g</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="left aligned">Sacha</td>
|
||
|
|
<td>46</td>
|
||
|
|
<td>43g</td>
|
||
|
|
<td>13g</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="left aligned">Bruna</td>
|
||
|
|
<td>9</td>
|
||
|
|
<td>47g</td>
|
||
|
|
<td>12g</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
<div class="column">
|
||
|
|
<table class="ui inverted blue selectable celled right aligned table">
|
||
|
|
<thead>
|
||
|
|
<th class="left aligned">Person</th>
|
||
|
|
<th>Calories</th>
|
||
|
|
<th>Fat</th>
|
||
|
|
<th>Protein</th>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td class="left aligned">Lianne</td>
|
||
|
|
<td>23</td>
|
||
|
|
<td>32g</td>
|
||
|
|
<td>43g</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="left aligned">Joette</td>
|
||
|
|
<td>21</td>
|
||
|
|
<td>13g</td>
|
||
|
|
<td>31g</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="left aligned">Le</td>
|
||
|
|
<td>28</td>
|
||
|
|
<td>39g</td>
|
||
|
|
<td>23g</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="left aligned">Sacha</td>
|
||
|
|
<td>46</td>
|
||
|
|
<td>43g</td>
|
||
|
|
<td>13g</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="left aligned">Bruna</td>
|
||
|
|
<td>9</td>
|
||
|
|
<td>47g</td>
|
||
|
|
<td>12g</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|