Fix table

CHANGELOG.md

@@ -5,7 +5,10 @@
 # Use `rem` and `em`
 # Move variables to their own file
 # Remove small tag
+# Add :focus state
 # Fix Font Awesome icons in buttons
+# Fix table
+# Remove table .is-icon and .is-link
 
 ## 0.2.2
 

docs/css/bulma-docs.css

@@ -2052,6 +2052,52 @@ a.box:active {
   top: 0.75em;
 }
 
+.icon {
+  background: pink;
+  display: inline-block;
+  font-size: 21px;
+  height: 1.5rem;
+  line-height: 1.5rem;
+  text-align: center;
+  vertical-align: top;
+  width: 1.5rem;
+}
+
+.icon .fa {
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.icon.is-small {
+  display: inline-block;
+  font-size: 14px;
+  height: 1rem;
+  line-height: 1rem;
+  text-align: center;
+  vertical-align: top;
+  width: 1rem;
+}
+
+.icon.is-medium {
+  display: inline-block;
+  font-size: 28px;
+  height: 2rem;
+  line-height: 2rem;
+  text-align: center;
+  vertical-align: top;
+  width: 2rem;
+}
+
+.icon.is-large {
+  display: inline-block;
+  font-size: 42px;
+  height: 3rem;
+  line-height: 3rem;
+  text-align: center;
+  vertical-align: top;
+  width: 3rem;
+}
+
 .image {
   display: block;
   position: relative;
@@ -2318,7 +2364,7 @@ a.box:active {
 .table {
   background-color: white;
   color: #363636;
-  margin-bottom: 20px;
+  margin-bottom: 1.5rem;
   width: 100%;
 }
 
@@ -2326,56 +2372,10 @@ a.box:active {
 .table th {
   border: 1px solid #dbdbdb;
   border-width: 0 0 1px;
-  padding: 8px 10px;
+  padding: 0.5em 0.75em;
   vertical-align: top;
 }
 
-.table td.is-icon,
-.table th.is-icon {
-  padding: 5px;
-  text-align: center;
-  white-space: nowrap;
-  width: 1%;
-}
-
-.table td.is-icon .fa,
-.table th.is-icon .fa {
-  display: inline-block;
-  font-size: 21px;
-  height: 24px;
-  line-height: 24px;
-  text-align: center;
-  vertical-align: top;
-  width: 24px;
-}
-
-.table td.is-icon.is-link,
-.table th.is-icon.is-link {
-  padding: 0;
-}
-
-.table td.is-icon.is-link > a,
-.table th.is-icon.is-link > a {
-  padding: 5px;
-}
-
-.table td.is-link,
-.table th.is-link {
-  padding: 0;
-}
-
-.table td.is-link > a,
-.table th.is-link > a {
-  display: block;
-  padding: 8px 10px;
-}
-
-.table td.is-link > a:hover,
-.table th.is-link > a:hover {
-  background-color: #00d1b2;
-  color: #fff;
-}
-
 .table td.is-narrow,
 .table th.is-narrow {
   white-space: nowrap;
@@ -2388,7 +2388,7 @@ a.box:active {
 }
 
 .table tr:hover {
-  background-color: whitesmoke;
+  background-color: #fafafa;
 }
 
 .table thead td,
@@ -2420,32 +2420,7 @@ a.box:active {
 
 .table.is-narrow td,
 .table.is-narrow th {
-  padding: 5px 10px;
-}
-
-.table.is-narrow td.is-icon,
-.table.is-narrow th.is-icon {
-  padding: 2px;
-}
-
-.table.is-narrow td.is-icon.is-link,
-.table.is-narrow th.is-icon.is-link {
-  padding: 0;
-}
-
-.table.is-narrow td.is-icon.is-link > a,
-.table.is-narrow th.is-icon.is-link > a {
-  padding: 2px;
-}
-
-.table.is-narrow td.is-link,
-.table.is-narrow th.is-link {
-  padding: 0;
-}
-
-.table.is-narrow td.is-link > a,
-.table.is-narrow th.is-link > a {
-  padding: 5px 10px;
+  padding: 0.25em 0.5em;
 }
 
 .table.is-striped tbody tr:nth-child(even) {
@@ -2658,14 +2633,14 @@ a.box:active {
     max-width: 960px;
   }
   .container.is-fluid {
-    margin: 0 20px;
+    margin: 0 1.5rem;
     max-width: none;
   }
 }
 
 @media screen and (min-width: 1180px) {
   .container {
-    max-width: 1080px;
+    max-width: 1200px;
   }
 }
 
@@ -2734,51 +2709,6 @@ a.box:active {
   vertical-align: top;
 }
 
-.icon {
-  display: inline-block;
-  font-size: 21px;
-  height: 1.5rem;
-  line-height: 1.5rem;
-  text-align: center;
-  vertical-align: top;
-  width: 1.5rem;
-}
-
-.icon .fa {
-  font-size: inherit;
-  line-height: inherit;
-}
-
-.icon.is-small {
-  display: inline-block;
-  font-size: 14px;
-  height: 1rem;
-  line-height: 1rem;
-  text-align: center;
-  vertical-align: top;
-  width: 1rem;
-}
-
-.icon.is-medium {
-  display: inline-block;
-  font-size: 28px;
-  height: 2rem;
-  line-height: 2rem;
-  text-align: center;
-  vertical-align: top;
-  width: 2rem;
-}
-
-.icon.is-large {
-  display: inline-block;
-  font-size: 42px;
-  height: 3rem;
-  line-height: 3rem;
-  text-align: center;
-  vertical-align: top;
-  width: 3rem;
-}
-
 .heading {
   display: block;
   font-size: 11px;

docs/documentation/elements/content.html

@@ -19,13 +19,13 @@ doc-subtab: content
       <p>When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use <code>content</code> as container. It can handle almost any HTML tag:</p>
       <ul>
         <li><code>&lt;p&gt;</code> paragraphs</li>
-        <li><code>&lt;ul&gt; &lt;ol&gt; &lt;dl&gt;</code> lists</li>
+        <li><code>&lt;ul&gt;</code> <code>&lt;ol&gt;</code> <code>&lt;dl&gt;</code> lists</li>
         <li><code>&lt;h1&gt;</code> to <code>&lt;h6&gt;</code> headings</li>
         <li><code>&lt;blockquotes&gt;</code> quotes</li>
         <li><code>&lt;em&gt;</code> and <code>&lt;strong&gt;</code></li>
-        <li><code>&lt;table&gt; &lt;tr&gt; &lt;th&gt; &lt;td&gt;</code> tables</li>
+        <li><code>&lt;table&gt;</code> <code>&lt;tr&gt;</code> <code>&lt;th&gt;</code> <code>&lt;td&gt;</code> tables</li>
       </ul>
-      <p>This <code>content</code> class can be used in <em>any</em>, whenever you just want to write some <strong>text</strong>. For example, it's used for the paragraph you're currently reading.</p>
+      <p>This <code>content</code> class can be used in <em>any</em> context where you just want to (or can only) write some <strong>text</strong>. For example, it's used for the paragraph you're currently reading.</p>
     </div>
 
     <div class="example">

docs/documentation/elements/table.html

@@ -13,210 +13,312 @@ doc-subtab: table
 
     <hr>
 
-    <div class="example">
-      <table class="table">
-        <thead>
-          <tr>
-            <th></th>
-            <th>Open source projects</th>
-            <th>Year started</th>
-            <th colspan="3">Links</th>
-          </tr>
-        </thead>
-        <tfoot>
-          <tr>
-            <th></th>
-            <th>Open source projects</th>
-            <th>Year started</th>
-            <th colspan="3">Links</th>
-          </tr>
-        </tfoot>
-        <tbody>
-          <tr>
-            <td class="is-icon">
-              <i class="fa fa-android"></i>
-            </td>
-            <td>
-              <a href="#">Android</a>
-            </td>
-            <td>
-              2003
-            </td>
-            <td class="is-icon">
-              <a href="#">
-                <i class="fa fa-github"></i>
-              </a>
-            </td>
-            <td class="is-icon">
-              <a href="#">
-                <i class="fa fa-twitter"></i>
-              </a>
-            </td>
-            <td class="is-icon">
-              <a href="#">
-                <i class="fa fa-globe"></i>
-              </a>
-            </td>
-          </tr>
-          <tr>
-            <td class="is-icon">
-              <i class="fa fa-firefox"></i>
-            </td>
-            <td>
-              <a href="#">Firefox</a>
-            </td>
-            <td>
-              2003
-            </td>
-            <td class="is-icon">
-              <a href="#">
-                <i class="fa fa-github"></i>
-              </a>
-            </td>
-            <td class="is-icon">
-              <a href="#">
-                <i class="fa fa-twitter"></i>
-              </a>
-            </td>
-            <td class="is-icon">
-              <a href="#">
-                <i class="fa fa-globe"></i>
-              </a>
-            </td>
-          </tr>
-          <tr>
-            <td class="is-icon">
-              <i class="fa fa-linux"></i>
-            </td>
-            <td>
-              <a href="#">Linux</a>
-            </td>
-            <td>
-              2003
-            </td>
-            <td class="is-icon">
-              <a href="#">
-                <i class="fa fa-github"></i>
-              </a>
-            </td>
-            <td class="is-icon">
-              <a href="#">
-                <i class="fa fa-twitter"></i>
-              </a>
-            </td>
-            <td class="is-icon">
-              <a href="#">
-                <i class="fa fa-globe"></i>
-              </a>
-            </td>
-          </tr>
-          <tr>
-            <td class="is-icon">
-              <i class="fa fa-wordpress"></i>
-            </td>
-            <td>
-              <a href="#">WordPress</a>
-            </td>
-            <td>
-              2003
-            </td>
-            <td class="is-icon">
-              <a href="#">
-                <i class="fa fa-github"></i>
-              </a>
-            </td>
-            <td class="is-icon">
-              <a href="#">
-                <i class="fa fa-twitter"></i>
-              </a>
-            </td>
-            <td class="is-icon">
-              <a href="#">
-                <i class="fa fa-globe"></i>
-              </a>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-
-{% highlight html %}
+{% capture table_example %}
 <table class="table">
   <thead>
     <tr>
-      <th>Name</th>
-      <th>Instrument</th>
-      <th></th>
-      <th></th>
+      <th><abbr title="Position">Pos</abbr></th>
+      <th>Team</th>
+      <th><abbr title="Played">Pld</abbr></th>
+      <th><abbr title="Won">W</abbr></th>
+      <th><abbr title="Drawn">D</abbr></th>
+      <th><abbr title="Lost">L</abbr></th>
+      <th><abbr title="Goals for">GF</abbr></th>
+      <th><abbr title="Goals against">GA</abbr></th>
+      <th><abbr title="Goal difference">GD</abbr></th>
+      <th><abbr title="Points">Pts</abbr></th>
+      <th>Qualification or relegation</th>
     </tr>
   </thead>
   <tfoot>
     <tr>
-      <th>Name</th>
-      <th>Instrument</th>
-      <th></th>
-      <th></th>
+      <th><abbr title="Position">Pos</abbr></th>
+      <th>Team</th>
+      <th><abbr title="Played">Pld</abbr></th>
+      <th><abbr title="Won">W</abbr></th>
+      <th><abbr title="Drawn">D</abbr></th>
+      <th><abbr title="Lost">L</abbr></th>
+      <th><abbr title="Goals for">GF</abbr></th>
+      <th><abbr title="Goals against">GA</abbr></th>
+      <th><abbr title="Goal difference">GD</abbr></th>
+      <th><abbr title="Points">Pts</abbr></th>
+      <th>Qualification or relegation</th>
     </tr>
   </tfoot>
   <tbody>
     <tr>
-      <td>Misty Abbott</td>
-      <td>Bass Guitar</td>
-      <td class="is-icon">
-        <a href="#">
-          <i class="fa fa-twitter"></i>
-        </a>
-      </td>
-      <td class="is-icon">
-        <a href="#">
-          <i class="fa fa-instagram"></i>
-        </a>
+      <th>1</th>
+      <td><a href="https://en.wikipedia.org/wiki/Leicester_City_F.C." title="Leicester City F.C.">Leicester City</a> <strong>(C)</strong>
       </td>
+      <td>38</td>
+      <td>23</td>
+      <td>12</td>
+      <td>3</td>
+      <td>68</td>
+      <td>36</td>
+      <td>+32</td>
+      <td>81</td>
+      <td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Group_stage" title="2016–17 UEFA Champions League">Champions League group stage</a></td>
     </tr>
     <tr>
-      <td>John Smith</td>
-      <td>Rhythm Guitar</td>
-      <td class="is-icon">
-        <a href="#">
-          <i class="fa fa-twitter"></i>
-        </a>
-      </td>
-      <td class="is-icon">
-        <a href="#">
-          <i class="fa fa-instagram"></i>
-        </a>
-      </td>
+      <th>2</th>
+      <td><a href="https://en.wikipedia.org/wiki/Arsenal_F.C." title="Arsenal F.C.">Arsenal</a></td>
+      <td>38</td>
+      <td>20</td>
+      <td>11</td>
+      <td>7</td>
+      <td>65</td>
+      <td>36</td>
+      <td>+29</td>
+      <td>71</td>
+      <td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Group_stage" title="2016–17 UEFA Champions League">Champions League group stage</a></td>
     </tr>
     <tr>
-      <td>Robert Mikels</td>
-      <td>Lead Guitar</td>
-      <td class="is-icon">
-        <a href="#">
-          <i class="fa fa-twitter"></i>
-        </a>
-      </td>
-      <td class="is-icon">
-        <a href="#">
-          <i class="fa fa-instagram"></i>
-        </a>
+      <th>3</th>
+      <td><a href="https://en.wikipedia.org/wiki/Tottenham_Hotspur_F.C." title="Tottenham Hotspur F.C.">Tottenham Hotspur</a></td>
+      <td>38</td>
+      <td>19</td>
+      <td>13</td>
+      <td>6</td>
+      <td>69</td>
+      <td>35</td>
+      <td>+34</td>
+      <td>70</td>
+      <td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Group_stage" title="2016–17 UEFA Champions League">Champions League group stage</a></td>
+    </tr>
+    <tr>
+      <th>4</th>
+      <td><a href="https://en.wikipedia.org/wiki/Manchester_City_F.C." title="Manchester City F.C.">Manchester City</a></td>
+      <td>38</td>
+      <td>19</td>
+      <td>9</td>
+      <td>10</td>
+      <td>71</td>
+      <td>41</td>
+      <td>+30</td>
+      <td>66</td>
+      <td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Play-off_round" title="2016–17 UEFA Champions League">Champions League play-off round</a></td>
+    </tr>
+    <tr>
+      <th>5</th>
+      <td><a href="https://en.wikipedia.org/wiki/Manchester_United_F.C." title="Manchester United F.C.">Manchester United</a></td>
+      <td>38</td>
+      <td>19</td>
+      <td>9</td>
+      <td>10</td>
+      <td>49</td>
+      <td>35</td>
+      <td>+14</td>
+      <td>66</td>
+      <td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Europa_League#Group_stage" title="2016–17 UEFA Europa League">Europa League group stage</a></td>
+    </tr>
+    <tr>
+      <th>6</th>
+      <td><a href="https://en.wikipedia.org/wiki/Southampton_F.C." title="Southampton F.C.">Southampton</a></td>
+      <td>38</td>
+      <td>18</td>
+      <td>9</td>
+      <td>11</td>
+      <td>59</td>
+      <td>41</td>
+      <td>+18</td>
+      <td>63</td>
+      <td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Europa_League#Group_stage" title="2016–17 UEFA Europa League">Europa League group stage</a></td>
+    </tr>
+    <tr>
+      <th>7</th>
+      <td><a href="https://en.wikipedia.org/wiki/West_Ham_United_F.C." title="West Ham United F.C.">West Ham United</a></td>
+      <td>38</td>
+      <td>16</td>
+      <td>14</td>
+      <td>8</td>
+      <td>65</td>
+      <td>51</td>
+      <td>+14</td>
+      <td>62</td>
+      <td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Europa_League#Third_qualifying_round" title="2016–17 UEFA Europa League">Europa League third qualifying round</a></td>
+    </tr>
+    <tr>
+      <th>8</th>
+      <td><a href="https://en.wikipedia.org/wiki/Liverpool_F.C." title="Liverpool F.C.">Liverpool</a></td>
+      <td>38</td>
+      <td>16</td>
+      <td>12</td>
+      <td>10</td>
+      <td>63</td>
+      <td>50</td>
+      <td>+13</td>
+      <td>60</td>
+      <td></td>
+    </tr>
+    <tr>
+      <th>9</th>
+      <td><a href="https://en.wikipedia.org/wiki/Stoke_City_F.C." title="Stoke City F.C.">Stoke City</a></td>
+      <td>38</td>
+      <td>14</td>
+      <td>9</td>
+      <td>15</td>
+      <td>41</td>
+      <td>55</td>
+      <td>−14</td>
+      <td>51</td>
+      <td></td>
+    </tr>
+    <tr>
+      <th>10</th>
+      <td><a href="https://en.wikipedia.org/wiki/Chelsea_F.C." title="Chelsea F.C.">Chelsea</a></td>
+      <td>38</td>
+      <td>12</td>
+      <td>14</td>
+      <td>12</td>
+      <td>59</td>
+      <td>53</td>
+      <td>+6</td>
+      <td>50</td>
+      <td></td>
+    </tr>
+    <tr>
+      <th>11</th>
+      <td><a href="https://en.wikipedia.org/wiki/Everton_F.C." title="Everton F.C.">Everton</a></td>
+      <td>38</td>
+      <td>11</td>
+      <td>14</td>
+      <td>13</td>
+      <td>59</td>
+      <td>55</td>
+      <td>+4</td>
+      <td>47</td>
+      <td></td>
+    </tr>
+    <tr>
+      <th>12</th>
+      <td><a href="https://en.wikipedia.org/wiki/Swansea_City_A.F.C." title="Swansea City A.F.C.">Swansea City</a></td>
+      <td>38</td>
+      <td>12</td>
+      <td>11</td>
+      <td>15</td>
+      <td>42</td>
+      <td>52</td>
+      <td>−10</td>
+      <td>47</td>
+      <td></td>
+    </tr>
+    <tr>
+      <th>13</th>
+      <td><a href="https://en.wikipedia.org/wiki/Watford_F.C." title="Watford F.C.">Watford</a></td>
+      <td>38</td>
+      <td>12</td>
+      <td>9</td>
+      <td>17</td>
+      <td>40</td>
+      <td>50</td>
+      <td>−10</td>
+      <td>45</td>
+      <td></td>
+    </tr>
+    <tr>
+      <th>14</th>
+      <td><a href="https://en.wikipedia.org/wiki/West_Bromwich_Albion_F.C." title="West Bromwich Albion F.C.">West Bromwich Albion</a></td>
+      <td>38</td>
+      <td>10</td>
+      <td>13</td>
+      <td>15</td>
+      <td>34</td>
+      <td>48</td>
+      <td>−14</td>
+      <td>43</td>
+      <td></td>
+    </tr>
+    <tr>
+      <th>15</th>
+      <td><a href="https://en.wikipedia.org/wiki/Crystal_Palace_F.C." title="Crystal Palace F.C.">Crystal Palace</a></td>
+      <td>38</td>
+      <td>11</td>
+      <td>9</td>
+      <td>18</td>
+      <td>39</td>
+      <td>51</td>
+      <td>−12</td>
+      <td>42</td>
+      <td></td>
+    </tr>
+    <tr>
+      <th>16</th>
+      <td><a href="https://en.wikipedia.org/wiki/A.F.C._Bournemouth" title="A.F.C. Bournemouth">AFC Bournemouth</a></td>
+      <td>38</td>
+      <td>11</td>
+      <td>9</td>
+      <td>18</td>
+      <td>45</td>
+      <td>67</td>
+      <td>−22</td>
+      <td>42</td>
+      <td></td>
+    </tr>
+    <tr>
+      <th>17</th>
+      <td><a href="https://en.wikipedia.org/wiki/Sunderland_A.F.C." title="Sunderland A.F.C.">Sunderland</a></td>
+      <td>38</td>
+      <td>9</td>
+      <td>12</td>
+      <td>17</td>
+      <td>48</td>
+      <td>62</td>
+      <td>−14</td>
+      <td>39</td>
+      <td></td>
+    </tr>
+    <tr>
+      <th>18</th>
+      <td><a href="https://en.wikipedia.org/wiki/Newcastle_United_F.C." title="Newcastle United F.C.">Newcastle United</a> <strong>(R)</strong>
       </td>
+      <td>38</td>
+      <td>9</td>
+      <td>10</td>
+      <td>19</td>
+      <td>44</td>
+      <td>65</td>
+      <td>−21</td>
+      <td>37</td>
+      <td>Relegation to the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_Football_League_Championship" title="2016–17 Football League Championship">Football League Championship</a></td>
     </tr>
     <tr>
-      <td>Karyn Holmberg</td>
-      <td>Drums</td>
-      <td class="is-icon">
-        <a href="#">
-          <i class="fa fa-twitter"></i>
-        </a>
+      <th>19</th>
+      <td><a href="https://en.wikipedia.org/wiki/Norwich_City_F.C." title="Norwich City F.C.">Norwich City</a> <strong>(R)</strong>
       </td>
-      <td class="is-icon">
-        <a href="#">
-          <i class="fa fa-instagram"></i>
-        </a>
+      <td>38</td>
+      <td>9</td>
+      <td>7</td>
+      <td>22</td>
+      <td>39</td>
+      <td>67</td>
+      <td>−28</td>
+      <td>34</td>
+      <td>Relegation to the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_Football_League_Championship" title="2016–17 Football League Championship">Football League Championship</a></td>    </tr>
+    <tr>
+      <th>20</th>
+      <td><a href="https://en.wikipedia.org/wiki/Aston_Villa_F.C." title="Aston Villa F.C.">Aston Villa</a> <strong>(R)</strong>
       </td>
+      <td>38</td>
+      <td>3</td>
+      <td>8</td>
+      <td>27</td>
+      <td>27</td>
+      <td>76</td>
+      <td>−49</td>
+      <td>17</td>
+      <td>Relegation to the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_Football_League_Championship" title="2016–17 Football League Championship">Football League Championship</a></td>
     </tr>
   </tbody>
 </table>
+{% endcapture %}
+
+<div class="example">
+  {{table_example}}
+</div>
+
+{% highlight html %}
+{{table_example}}
 {% endhighlight %}
 
     <hr>
@@ -276,6 +378,14 @@ doc-subtab: table
               <td>Seven</td>
               <td>Eight</td>
             </tr>
+            <tr>
+              <td>Nine</td>
+              <td>Ten</td>
+            </tr>
+            <tr>
+              <td>Eleven</td>
+              <td>Twelve</td>
+            </tr>
           </tbody>
         </table>
       </div>
@@ -309,6 +419,14 @@ doc-subtab: table
               <td>Seven</td>
               <td>Eight</td>
             </tr>
+            <tr>
+              <td>Nine</td>
+              <td>Ten</td>
+            </tr>
+            <tr>
+              <td>Eleven</td>
+              <td>Twelve</td>
+            </tr>
           </tbody>
         </table>
       </div>
@@ -342,6 +460,14 @@ doc-subtab: table
               <td>Seven</td>
               <td>Eight</td>
             </tr>
+            <tr>
+              <td>Nine</td>
+              <td>Ten</td>
+            </tr>
+            <tr>
+              <td>Eleven</td>
+              <td>Twelve</td>
+            </tr>
           </tbody>
         </table>
       </div>

sass/elements/_all.sass

@@ -4,6 +4,7 @@
 @import "button.sass"
 @import "content.sass"
 @import "form.sass"
+@import "icon.sass"
 @import "image.sass"
 @import "notification.sass"
 @import "progress.sass"

sass/elements/icon.sass

@@ -0,0 +1,13 @@
+.icon
+  background: pink
+  +fa(21px, 1.5rem)
+  .fa
+    font-size: inherit
+    line-height: inherit
+  // Sizes
+  &.is-small
+    +fa(14px, 1rem)
+  &.is-medium
+    +fa(28px, 2rem)
+  &.is-large
+    +fa(42px, 3rem)

sass/elements/other.sass

@@ -8,10 +8,10 @@
     max-width: 960px
     // Modifiers
     &.is-fluid
-      margin: 0 20px
+      margin: 0 1.5rem
       max-width: none
   +widescreen
-    max-width: 1080px
+    max-width: 1200px
 
 .delete
   +delete
@@ -21,19 +21,6 @@
   text-align: center
   vertical-align: top
 
-.icon
-  +fa(21px, 1.5rem)
-  .fa
-    font-size: inherit
-    line-height: inherit
-  // Sizes
-  &.is-small
-    +fa(14px, 1rem)
-  &.is-medium
-    +fa(28px, 2rem)
-  &.is-large
-    +fa(42px, 3rem)
-
 .heading
   display: block
   font-size: 11px

sass/elements/table.sass

@@ -1,43 +1,25 @@
-$table: $text-strong !default
-$table-background: $white !default
-$table-border: $border !default
+$table:                           $grey-darker !default
+$table-background:                $white !default
+$table-border:                    $grey-lighter !default
 
-$table-head: $text-light !default
+$table-head:                      $grey !default
 
-$table-row-hover-background: $white-ter !default
-$table-row-even-background: $white-bis !default
+$table-row-hover-background:      $white-bis !default
+$table-row-even-background:       $white-bis !default
+$table-row-even-hover-background: $white-ter !default
 
 .table
   background-color: $table-background
   color: $table
-  margin-bottom: 20px
+  margin-bottom: 1.5rem
   width: 100%
   td,
   th
     border: 1px solid $table-border
     border-width: 0 0 1px
-    padding: 8px 10px
+    padding: 0.5em 0.75em
     vertical-align: top
     // Modifiers
-    &.is-icon
-      padding: 5px
-      text-align: center
-      white-space: nowrap
-      width: 1%
-      .fa
-        +fa(21px, 24px)
-      &.is-link
-        padding: 0
-        & > a
-          padding: 5px
-    &.is-link
-      padding: 0
-      & > a
-        display: block
-        padding: 8px 10px
-        &:hover
-          background-color: $link
-          color: $link-invert
     &.is-narrow
       white-space: nowrap
       width: 1%
@@ -76,22 +58,11 @@ $table-row-even-background: $white-bis !default
   &.is-narrow
     td,
     th
-      padding: 5px 10px
-      // Modifiers
-      &.is-icon
-        padding: 2px
-        &.is-link
-          padding: 0
-          & > a
-            padding: 2px
-      &.is-link
-        padding: 0
-        & > a
-          padding: 5px 10px
+      padding: 0.25em 0.5em
   &.is-striped
     tbody
       tr
         &:nth-child(even)
           background-color: $table-row-even-background
           &:hover
-            background-color: $table-row-hover-background
+            background-color: $table-row-even-hover-background