Fixes #101

Ready to release v2.3.5
Chalarangelo · Oct 15, 2017 · 49ffe76 · 49ffe76
1 parent d15d657
commit 49ffe76
Show file tree

Hide file tree

Showing 25 changed files with 61 additions and 37 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## v2.3.5
+
+- Fixes a bug caused by empty `<td>` elements, causing mobile tables to not display as intended.
+
 ## v2.3.4
 
 - Fixed an edge-case that could cause trouble with `<header>` elements (#94).

diff --git a/dist/mini-dark.css b/dist/mini-dark.css
@@ -3,7 +3,7 @@
   Flavor name: Dark (mini-dark)
   Author: Angelos Chalaris (chalarangelo@gmail.com)
   Maintainers: Angelos Chalaris
-  mini.css version: v2.3.4
+  mini.css version: v2.3.5
 */
 /*
   Browsers resets and base typography.
@@ -1360,6 +1360,7 @@ table th:first-child, table td:first-child {
     border: 0;
     border-bottom: 0.0625rem solid #1c2529;
     text-align: right;
+    min-height: 1.5rem;
   }
   table:not(.preset) td:before {
     content: attr(data-label);

diff --git a/dist/mini-dark.min.css b/dist/mini-dark.min.css
diff --git a/dist/mini-default.css b/dist/mini-default.css
@@ -3,7 +3,7 @@
   Flavor name: Default (mini-default)
   Author: Angelos Chalaris (chalarangelo@gmail.com)
   Maintainers: Angelos Chalaris
-  mini.css version: v2.3.4
+  mini.css version: v2.3.5
 */
 /*
   Browsers resets and base typography.
@@ -1360,6 +1360,7 @@ table th:first-child, table td:first-child {
     border: 0;
     border-bottom: 0.0625rem solid #c9c9c9;
     text-align: right;
+    min-height: 1.5rem;
   }
   table:not(.preset) td:before {
     content: attr(data-label);

diff --git a/dist/mini-default.min.css b/dist/mini-default.min.css
diff --git a/dist/mini-lite.css b/dist/mini-lite.css
@@ -3,7 +3,7 @@
   Flavor name: Lite (mini-lite)
   Author: Angelos Chalaris (chalarangelo@gmail.com)
   Maintainers: Angelos Chalaris
-  mini.css version: v2.3.4
+  mini.css version: v2.3.5
 */
 /*
   Browsers resets and base typography.
@@ -1093,6 +1093,7 @@ table th:first-child, table td:first-child {
     border: 0;
     border-bottom: 0.0625rem solid #c9c9c9;
     text-align: right;
+    min-height: 1.5rem;
   }
   table:not(.preset) td:before {
     content: attr(data-label);

diff --git a/dist/mini-lite.min.css b/dist/mini-lite.min.css
diff --git a/dist/mini-nord.css b/dist/mini-nord.css
@@ -1,9 +1,9 @@
 @charset "UTF-8";
-/*
-  Flavor name: Nord (mini-nord)
-  Author: tphecca (https://github.com/tphecca)
-  Maintainers: tphecca
-  mini.css version: v2.3.4
+/*
+  Flavor name: Nord (mini-nord)
+  Author: tphecca (https://github.com/tphecca)
+  Maintainers: tphecca
+  mini.css version: v2.3.5
 */
 /*
   Browsers resets and base typography.
@@ -1055,8 +1055,8 @@ input[type="file"] {
   background: #5E81AC;
 }
 
-/*
-  Custom elements for forms and input elements.
+/*
+  Custom elements for forms and input elements.
 */
 button.primary, [type="button"].primary, [type="submit"].primary,
 [type="reset"].primary, .button.primary, [role="button"].primary {
@@ -1382,6 +1382,7 @@ table th:first-child, table td:first-child {
     border: 0;
     border-bottom: 1px solid #D8DEE9;
     text-align: right;
+    min-height: 1.5rem;
   }
   table:not(.preset) td:before {
     content: attr(data-label);
@@ -1684,8 +1685,8 @@ table.striped tr:nth-of-type(2n) > td {
   }
 }
 
-/*
-  Custom elements for cards and containers.
+/*
+  Custom elements for cards and containers.
 */
 @media screen and (min-width: 480px) {
   .card.large {
@@ -2018,8 +2019,8 @@ mark.inline-block {
   z-index: 1211;
 }
 
-/*
-  Custom contextual background elements and alerts.
+/*
+  Custom contextual background elements and alerts.
 */
 mark.secondary {
   background: #BF616A;
@@ -2123,8 +2124,8 @@ progress[value="1000"]::-moz-progress-bar {
   animation: spinner-donut-anim 1.2s linear infinite;
 }
 
-/*
-  Custom elements for progress elements and spinners.
+/*
+  Custom elements for progress elements and spinners.
 */
 progress.inline {
   display: inline-block;
@@ -2275,8 +2276,8 @@ ul.breadcrumbs li:last-child:after {
   text-align: center;
 }
 
-/*
-  Custom elements for utilities and helper classes.
+/*
+  Custom elements for utilities and helper classes.
 */
 .bordered {
   border: 1px solid rgba(0, 0, 0, 0.25) !important;

diff --git a/dist/mini-nord.min.css b/dist/mini-nord.min.css
diff --git a/dist/mini-pwa.css b/dist/mini-pwa.css
@@ -3,7 +3,7 @@
   Flavor name: Progressive Web App (mini-pw)
   Author: Angelos Chalaris (chalarangelo@gmail.com)
   Maintainers: Angelos Chalaris
-  mini.css version: v2.3.4
+  mini.css version: v2.3.5
 */
 /*
   Browsers resets and base typography.
@@ -1215,6 +1215,7 @@ table th:first-child, table td:first-child {
     border: 0;
     border-bottom: 0.0625rem solid #bdbdbd;
     text-align: right;
+    min-height: 1.5rem;
   }
   table:not(.preset) td:before {
     content: attr(data-label);

diff --git a/dist/mini-pwa.min.css b/dist/mini-pwa.min.css
diff --git a/dist/mini-sucroa.css b/dist/mini-sucroa.css
@@ -3,7 +3,7 @@
   Flavor name: Sucroa (mini-sucroa)
   Author: Angeliki Daskalakis
   Maintainers: Angeliki Daskalakis, Angelos Chalaris (chalarangelo@gmail.com)
-  mini.css version: v2.3.4
+  mini.css version: v2.3.5
 */
 @import url("https://fonts.googleapis.com/css?family=Cousine:400,400i,700|Libre+Baskerville:400,400i,700&subset=latin-ext");
 /*
@@ -1340,6 +1340,7 @@ table th:first-child, table td:first-child {
     border: 0;
     border-bottom: 1px solid #a9a2ba;
     text-align: right;
+    min-height: 1.5rem;
   }
   table:not(.preset) td:before {
     content: attr(data-label);

diff --git a/dist/mini-sucroa.min.css b/dist/mini-sucroa.min.css
diff --git a/docs/flavors.html b/docs/flavors.html
@@ -44,7 +44,7 @@
           <h1>Flavors</h1>
           <p style="text-align:justify">One of the core ideas behind <strong>mini.css</strong> is its flavor system. A flavor is the final compiled stylesheet a website or web app uses. When you start using <strong>mini.css</strong>, you usually try out the default flavor, using one of the following references inside your HTML page's <code>&lt;head&gt;</code> tag:</p>
 					<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-default.min.css&quot;</span>&gt;</pre>
-        <pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/v2.3.4/dist/mini-default.min.css&quot;</span>&gt;</pre><br>
+        <pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/v2.3.5/dist/mini-default.min.css&quot;</span>&gt;</pre><br>
         <p style="text-align:justify">There are, however a handful of other flavors included with <strong>mini.css</strong>. Below, you can see a full list of them:</p><br>
         <ul style="margin-left:0px; padding-left: 4px">
           <li class="card fluid">

diff --git a/docs/index.html b/docs/index.html
@@ -120,7 +120,7 @@ <h2>Setup &amp; usage</h2>
 				<br/>
 				<p style="text-align:justify">Alternatively, you can use either <strong>GitCDN</strong> or <strong>RawGit</strong> to import the default flavor of <strong>mini.css</strong>. Simply add one of the following references inside your HTML page's <code>&lt;head&gt;</code> tag:</p>
 				<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-default.min.css&quot;</span>&gt;</pre>
-				<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/v2.3.4/dist/mini-default.min.css&quot;</span>&gt;</pre><br/>
+				<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/v2.3.5/dist/mini-default.min.css&quot;</span>&gt;</pre><br/>
 				<p style="text-align:justify">Finally, you can find <strong>mini.css</strong> on <a href="https://cdnjs.com/libraries/mini.css">cdnjs</a>, which you can use to include it in your projects.</p><br/>
 				<hr>
         </div>

diff --git a/docs/mini-default.min.css b/docs/mini-default.min.css
diff --git a/docs/quick_reference.html b/docs/quick_reference.html
@@ -67,7 +67,7 @@ <h1>Quick Reference</h1>
               </div><br>
               <p style="text-align:justify">You can import the default flavor of <strong>mini.css</strong> in your webpage by simply adding one of the following references inside your HTML page's <code>&lt;head&gt;</code> tag:</p>
 							<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-default.min.css&quot;</span>&gt;</pre>
-              <pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/v2.3.4/dist/mini-default.min.css&quot;</span>&gt;</pre><br>
+              <pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/v2.3.5/dist/mini-default.min.css&quot;</span>&gt;</pre><br>
 							<p style="text-align:justify">You can also find <strong>mini.css</strong> on <a href="https://cdnjs.com/libraries/mini.css">cdnjs</a>, which you can use to include it in your projects.</p><br/>
               <p style="text-align:justify">We strongly suggest you add the following line inside your HTML page's <code>&lt;head&gt;</code> to utilize the viewport meta tag:</p>
               <pre>&lt;<span class="fore-tertiary">meta</span> <span class="fore-secondary">name</span>=<span class="fore-primary">&quot;viewport&quot;</span> <span class="fore-secondary">content</span>=<span class="fore-primary">&quot;width=device-width, initial-scale=1&quot;</span>&gt;</pre>

diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md
@@ -1293,3 +1293,13 @@
 - Updated all flavors to the latest version.
 - Removed Scrimba screencast from `index.html`, now it's only in its respective module. Should make loading somewhat faster.
 - Released update.
+
+# v2.3.5 Development Log
+
+## 20171015
+
+- Merged PR #102 to fix #101.
+- Updated `table` to properly fix #101 and allow for customization.
+- Rebuilt flavors to latest version.
+- Updated docs.
+- Released patch.
diff --git a/src/flavors/mini-dark.scss b/src/flavors/mini-dark.scss
@@ -5,7 +5,7 @@
   Flavor name: Dark (mini-dark)
   Author: Angelos Chalaris (chalarangelo@gmail.com)
   Maintainers: Angelos Chalaris
-  mini.css version: v2.3.4
+  mini.css version: v2.3.5
 */
 //  Basic rules for body and typography
 $fore-color:            #d0d0d0;                  // Text and general foreground color

diff --git a/src/flavors/mini-default.scss b/src/flavors/mini-default.scss
@@ -5,7 +5,7 @@
   Flavor name: Default (mini-default)
   Author: Angelos Chalaris (chalarangelo@gmail.com)
   Maintainers: Angelos Chalaris
-  mini.css version: v2.3.4
+  mini.css version: v2.3.5
 */
 //  Basic rules for body and typography
 $fore-color:            #212121;                  // Text and general foreground color

diff --git a/src/flavors/mini-lite.scss b/src/flavors/mini-lite.scss
@@ -7,7 +7,7 @@
   Flavor name: Lite (mini-lite)
   Author: Angelos Chalaris (chalarangelo@gmail.com)
   Maintainers: Angelos Chalaris
-  mini.css version: v2.3.4
+  mini.css version: v2.3.5
 */
 //  Basic rules for body and typography
 $fore-color:            #212121;                  // Text and general foreground color

diff --git a/src/flavors/mini-nord.scss b/src/flavors/mini-nord.scss
@@ -5,7 +5,7 @@
   Flavor name: Nord (mini-nord)
   Author: tphecca (https://github.com/tphecca)
   Maintainers: tphecca
-  mini.css version: v2.3.4
+  mini.css version: v2.3.5
 */
 //  This flavor is based on the Nord color palette: https://github.com/arcticicestudio/nord
 //  Basic rules for body and typography

diff --git a/src/flavors/mini-pwa.scss b/src/flavors/mini-pwa.scss
@@ -7,7 +7,7 @@
   Flavor name: Progressive Web App (mini-pw)
   Author: Angelos Chalaris (chalarangelo@gmail.com)
   Maintainers: Angelos Chalaris
-  mini.css version: v2.3.4
+  mini.css version: v2.3.5
 */
 //  Basic rules for body and typography
 $fore-color:            #212121;                  // Text and general foreground color

diff --git a/src/flavors/mini-sucroa.scss b/src/flavors/mini-sucroa.scss
@@ -5,7 +5,7 @@
   Flavor name: Sucroa (mini-sucroa)
   Author: Angeliki Daskalakis
   Maintainers: Angeliki Daskalakis, Angelos Chalaris (chalarangelo@gmail.com)
-  mini.css version: v2.3.4
+  mini.css version: v2.3.5
 */
 // Google Fonts imports and usage
 @import url('https://fonts.googleapis.com/css?family=Cousine:400,400i,700|Libre+Baskerville:400,400i,700&subset=latin-ext');

diff --git a/src/mini/_table.scss b/src/mini/_table.scss
@@ -16,6 +16,8 @@ $table-striped-name:         'striped' !default;    // Class name for striped ta
 // External variables' defaults are used only if you import this module on its own, without the rest of the framework.
 $back-color:              white !default;           // [External variable - core] Background color for everything.
 $fore-color:              black !default;           // [External variable - core] Foreground color for everything.
+$base-font-size:          1rem;                     // [External variable - core] Default font sizing for all elements.
+$base-line-height:        1.5;                      // [External variable - core] Default line height for all elements.
 // Desktop view.
 table {
   border-collapse: separate;
@@ -48,7 +50,6 @@ table {
     @if $table-body-fore-color != $fore-color {
       color: $table-body-fore-color;
     }
-    min-height: 1.5rem;
   }
   thead th {
     border-top: 0;
@@ -108,6 +109,8 @@ table {
         border-bottom: $table-border-style;
       }
       text-align: right;
+      // Fixes empty <td> elements messing up the cards
+      min-height: $base-font-size * $base-line-height;
     }
     td:before {
       content: attr(#{$table-mobile-card-label});