2.3.5

Ready to release v2.3.5

CHANGELOG.md

@@ -1,5 +1,15 @@
 # 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).
+- Fixes some issues in the documentation (#92, #93).
+- Added some more specificity to the custom styling for `<select>` elements.
+
 ## v2.3.3
 
 - Added a new `mini-pwa` flavor, targeting Android and mobile devices in general.

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.3
+  mini.css version: v2.3.5
 */
 /*
   Browsers resets and base typography.
@@ -812,7 +812,7 @@ input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly], t
   border-color: #20292e;
 }
 
-select {
+select:not([multiple]) {
   padding-right: 1.5rem;
   background: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1.5"><path fill="%23d0d0d0" d="M.25.75h.5L.5 1"/></svg>') no-repeat right;
   background-color: #39444a;
@@ -821,7 +821,7 @@ select {
   appearance: none;
 }
 
-select[readonly] {
+select:not([multiple])[readonly] {
   background-color: #263238;
 }
 
@@ -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);

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.3
+  mini.css version: v2.3.5
 */
 /*
   Browsers resets and base typography.
@@ -811,7 +811,7 @@ input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly], t
   border-color: #c9c9c9;
 }
 
-select {
+select:not([multiple]) {
   padding-right: 1.5rem;
   background: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1.5"><path fill="%23212121" d="M.25.75h.5L.5 1"/></svg>') no-repeat right;
   background-color: #fafafa;
@@ -820,7 +820,7 @@ select {
   appearance: none;
 }
 
-select[readonly] {
+select:not([multiple])[readonly] {
   background-color: #e5e5e5;
 }
 
@@ -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);

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.3
+  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);

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.3
+/*
+  Flavor name: Nord (mini-nord)
+  Author: tphecca (https://github.com/tphecca)
+  Maintainers: tphecca
+  mini.css version: v2.3.5
 */
 /*
   Browsers resets and base typography.
@@ -820,7 +820,7 @@ input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly], t
   border-color: #bdbdbd;
 }
 
-select {
+select:not([multiple]) {
   padding-right: 20px;
   background: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1.5"><path fill="%232E3440" d="M.25.75h.5L.5 1"/></svg>') no-repeat right;
   background-color: #E5E9F0;
@@ -829,7 +829,7 @@ select {
   appearance: none;
 }
 
-select[readonly] {
+select:not([multiple])[readonly] {
   background-color: #e0e0e0;
 }
 
@@ -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 {
 :checked + .modal .card .close {
   z-index: 1211;
 }
-
-/*
+
+/*
   Custom contextual background elements and alerts.
 */
 mark.secondary {
@@ -2123,8 +2124,8 @@ progress[value="1000"]::-moz-progress-bar {
   -webkit-animation: spinner-donut-anim 1.2s linear infinite;
   animation: spinner-donut-anim 1.2s linear infinite;
 }
-
-/*
+
+/*
   Custom elements for progress elements and spinners.
 */
 progress.inline {
@@ -2275,8 +2276,8 @@ ul.breadcrumbs li:last-child:after {
   display: block;
   text-align: center;
 }
-
-/*
+
+/*
   Custom elements for utilities and helper classes.
 */
 .bordered {

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.3
+  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);

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.3
+  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");
 /*
@@ -824,7 +824,7 @@ input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly], t
   border-color: #a9a2ba;
 }
 
-select {
+select:not([multiple]) {
   padding-right: 20px;
   background: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1.5"><path fill="%23211423" d="M.25.75h.5L.5 1"/></svg>') no-repeat right;
   background-color: #f2edff;
@@ -833,7 +833,7 @@ select {
   appearance: none;
 }
 
-select[readonly] {
+select:not([multiple])[readonly] {
   background-color: #eae1ff;
 }
 
@@ -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);

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.3/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">

docs/index.html

@@ -120,7 +120,7 @@
 				<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.3/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>
@@ -143,9 +143,10 @@
         <div class="col-sm-12 col-lg-10 col-lg-offset-1">
           <h2>Quick overview</h2>
 					<p>Take a couple of minutes to explore what makes <strong>mini.css</strong> different from all those other CSS frameworks and UI toolkits.</p>
-					<figure style="margin: 0;" class="hidden-sm"><div style="position: relative; padding: 0.5rem; padding-bottom: 42%; margin-bottom: 0.25rem; margin-right: 1rem;"><iframe style="display: none; border: 0; position: absolute; width: 100%; height: 100%;" onload="this.style.display='block';" src="https://scrimba.com/cast/cast-1949.embed"></iframe></div><figcaption style="padding: 0.5rem;">Intro to mini.css by <a href="https://scrimba.com/casts/cast-1949" style="font-size: 0.8125rem; text-decoration: none;">Per Harald Borgen</a></figcaption></figure><br/>
+          <br/>
 					<h3>Why should I use mini.css?</h3>
 					<p style="text-align: justify;"><strong>mini.css</strong> is a lot lighter than a lot of other full-featured CSS frameworks (e.g. Bootstrap, Semantic UI), but it is not a micro framework (e.g. Milligram, Pure.CSS). Instead, <strong>mini.css</strong> blurs the line between full-featured and micro frameworks by providing lots of modules and components in a very small file. All the things you expect to find in a CSS framework, such as grids, styling for common elements and typography, along with some more complex components such as tabs or cards are all present in <strong>mini.css</strong>.</p>
+          <p>Not convinced yet? Maybe you should read these <a href="https://hackernoon.com/5-reasons-to-try-out-mini-css-62ddb47b9370">5 reasons</a> to try out <strong>mini.css</strong>.</p>
 					<br/>
 					<h3>What exactly does mini.css provide?</h3>
 					<p style="text-align: justify;">Many CSS frameworks utilize modules to deliver more components and features, without making it necessary for all developers to include them. <strong>mini.css</strong> provides a handful of very powerful <a href="modules">modules</a> that can do many different things. This way, developers only have to learn a few different HTML structures and patterns, while having the ability to build a lot of interesting things with them. You can see an overview of the modules below:</p>
@@ -170,7 +171,7 @@
 					<div class="card fluid" style=" width: 100%;">
 						<h3 class="section double-padded" style="text-align: center;">Support mini.css!</h3>
 						<p class="section double-padded" style="text-align: center;">If you like <strong>mini.css</strong>, remember that you can show your support by starring it on Github.<br/> It means a lot to us and it only takes a couple of seconds!</p>
-						<a href="https://github.com/Chalarangelo/mini.css" target="_blank" class="section button primary large" style="text-align: center;">Star mini.css</a>
+						<a href="https://github.com/Chalarangelo/mini.css" target="_blank" class="section button primary large" style="text-align: center;"><i class="fa fa-star-o fa-fw" aria-hidden="true"></i>&nbsp;Star mini.css</a>
 					</div>
 				</div>
       </div>
@@ -181,6 +182,13 @@
             <ul>
             <li>For a quick guide on getting started, you might want to take a look at the available <a href="modules">modules</a> list and the tutorials provided for each one!</li>
 						<li>To get you started even faster, we have created a handful of <a href="templates">templates</a> that might fit your needs!</li>
+            <li>If you want a step-by-step guide on how to utilize the most commonly used modules, be sure to check out these articles on Medium:
+              <ol>
+                <li><a href="https://hackernoon.com/designing-a-simple-web-page-with-mini-css-f455e9f6403b">Designing a simple web page with <strong>mini.css</strong></a></li>
+                <li><a href="https://hackernoon.com/using-the-mini-css-card-module-and-media-object-3c5b5829d19c">Using the <strong>mini.css</strong> card module and media object</a></li>
+                <li><a href="https://hackernoon.com/creating-a-mobile-friendly-navigation-using-mini-css-8cea580c51ed">Creating a mobile-friendly navigation using <strong>mini.css</strong></a></li>
+              </ol>
+            </li>
             <li>If you are familiar with <strong>mini.css</strong> and want a cheat sheet or quick reference guide, check the <a href="quick_reference">quick reference</a> page!</li>
 						<li>If you want to develop a progressive web app or just utilize a virtual DOM, you should check out our <a href="https://github.com/Chalarangelo/react-mini.css">React &amp; Preact Libraries</a>, which will help you get started creating all kinds of custom components based on <strong>mini.css</strong>.
             <li><strong>mini.css</strong> comes with a few nice pre-built customizable <a href="flavors">flavors</a>. See which one of them better suits your needs!</li>

docs/input_control.html

@@ -107,7 +107,7 @@
           <div class="card fluid">
             <div class="section"><h2>Forms &amp; input</h2></div>
             <div class="section row">
-              <div class="col-sm-12 col-sm-last col-lg-4 col-md-normal">
+              <div class="col-sm-12 col-sm-last col-md-normal col-lg-8 col-lg-offset-2">
               <form>
               <fieldset>
                 <legend>Inline form (default style)</legend>
@@ -137,9 +137,18 @@
                     <label for="number">Number</label>
                   </div>
                   <div class="col-sm-12 col-md">
-                    <input type="number" value="4" id="number" style="width:85%;">
+                    <input type="number" value="42" id="number" style="width:85%;">
                   </div>
                 </div>
+                <div class="row responsive-label">
+                  <div class="col-sm-12 col-md-3">
+                    <label for="invalid">Invalid</label>
+                  </div>
+                  <div class="col-sm-12 col-md">
+                    <input value="invalid" id="invalid" style="width:85%;">
+                  </div>
+                  <script>document.getElementById("invalid").setCustomValidity("This field is invalid");</script>
+                </div>
                 <div class="row responsive-label">
                   <div class="col-sm-12 col-md-3">
                     <label for="disabled">Disabled</label>
@@ -167,7 +176,7 @@
               </fieldset>
               </form>
               </div>
-              <div class="col-sm-12 col-sm-first col-lg-8 col-md-normal">
+              <div class="col-sm-12 col-sm-first col-md-normal">
                 <p style="text-align: justify;">Forms are structured the same way you would structure a normal form in HTML5. Simply create a root <code>&lt;form&gt;</code> element and add your <code>&lt;input&gt;</code> elements inside. Link them to <code>&lt;label&gt;</code> elements for ease of access and you are pretty much set. We highly recommend using the <code>&lt;fieldset&gt;</code> and <code>&lt;legend&gt;</code> elements to annotate your forms as well, but you can skip them if you wish.</p>
                 <p style="text-align: justify;">Forms are inline by default. Use the <code>.input-group</code> class on a <code>&lt;div&gt;</code> wrapping inside it an <code>&lt;input&gt;</code> and <code>&lt;label&gt;</code> pair to make sure they always display together in one line. You can make your <code>.input-group</code>s respond to viewport changes, by adding the <code>.fluid</code> class to them or you can align them vertically by adding the <code>.vertical</code> class. Finally, if you want to create aligned forms with a preset layout, you can utilize the <a href="grid"><strong>grid</strong></a> module's rows and columns.</p>
                 <h3>Sample code</h3>

docs/quick_reference.html

@@ -67,7 +67,7 @@
               </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.3/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>

docs/templates.html

@@ -70,7 +70,7 @@
 						<p class="section double-padded" style="text-align: justify;">Card-based website layout templates are another common need, as many websites utilize a tile system to display lots of smaller pieces of content. Using the card and grid modules of <strong>mini.css</strong>, along with a couple of navigational elements, it's really easy to create a responsive website with lots of cards containing small pieces of content, such as a showcase for a website, a photo album or an article browser.</p>
           </li>
 					<li class="card fluid" style="margin-bottom: 3rem;">
-						<p data-height="480" data-theme-id="0" data-slug-hash="GmWrVv" data-default-tab="result" data-user="chalarangelo" data-embed-version="2" data-pen-title="Login Form Template (mini.css)" data-preview="true" class="codepen section">See the Pen <a href="http://codepen.io/chalarangelo/pen/xGmWrVv/">Login Form Template (mini.css)</a> by Angelos Chalaris (<a href="http://codepen.io/chalarangelo">@chalarangelo</a>) on <a href="http://codepen.io">CodePen</a>.</p>
+						<p data-height="480" data-theme-id="0" data-slug-hash="GmWrVv" data-default-tab="result" data-user="chalarangelo" data-embed-version="2" data-pen-title="Login Form Template (mini.css)" data-preview="true" class="codepen section">See the Pen <a href="http://codepen.io/chalarangelo/pen/GmWrVv/">Login Form Template (mini.css)</a> by Angelos Chalaris (<a href="http://codepen.io/chalarangelo">@chalarangelo</a>) on <a href="http://codepen.io">CodePen</a>.</p>
 						<h2 class="section double-padded">Login form template</h2>
 						<p class="section double-padded" style="text-align: justify;">Login forms are one of the most commonly used elements in any website design. Using the input_control and grid modules of <strong>mini.css</strong>, along with a couple of navigational elements and a couple of optional tricks, it's really easy to create a responsive login form with the required fields and buttons.</p>
           </li>

docs/v2/DEVLOG.md

@@ -1280,3 +1280,26 @@
 ## 20170715
 
 - Worked on the `mini-pwa` flavor. Updated everything and released `v2.3.3`.
+
+# v2.3.4 Development Log
+
+## 20170816
+
+- Resolved issue #94 by applying the suggested changes to the `navigation` module.
+- Resolved issue #93 by fixing the link, obviously.
+- Applied a new layout to the `Forms & input` card of `input_control`, should resolve a long-standing problem with layout on certain screens.
+- Added `:not([multiple])` to the custom `select` style, fixing a problem with multi-value `select` elements.
+- Added example for `:invalid` `input` in `input_control` as requested in #92.
+- 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.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mini.css",
-  "version": "2.3.3",
+  "version": "2.3.5",
   "description": "A minimal, responsive, style-agnostic CSS framework.",
   "main": "dist/mini-default.min.css",
   "directories": {

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.3
+  mini.css version: v2.3.5
 */
 //  Basic rules for body and typography
 $fore-color:            #d0d0d0;                  // Text and general foreground color

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.3
+  mini.css version: v2.3.5
 */
 //  Basic rules for body and typography
 $fore-color:            #212121;                  // Text and general foreground color

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.3
+  mini.css version: v2.3.5
 */
 //  Basic rules for body and typography
 $fore-color:            #212121;                  // Text and general foreground color

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.3
+  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

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.3
+  mini.css version: v2.3.5
 */
 //  Basic rules for body and typography
 $fore-color:            #212121;                  // Text and general foreground color

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.3
+  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');

src/mini/_input_control.scss

@@ -268,7 +268,7 @@ input:not([type]), [type="text"], [type="email"], [type="number"], [type="search
 }
 // Correct background styling in Safari
 @if $apply-select-fix {
-  select {
+  select:not([multiple]) {
     padding-right: $select-padding-right;
     background: url(selectArrow()) no-repeat right;
     background-color: $input-back-color;

src/mini/_navigation.scss

@@ -37,9 +37,7 @@ $button-border-style: 1px solid transparent !default;  // [External variable - i
 header {
   display: block;    // Correct display for older versions of IE.
   height: $header-height;
-  @if $header-back-color != $back-color {
-    background: $header-back-color;
-  }
+  background: $header-back-color; // Always apply background color to avoid shine through
   @if $header-fore-color != $fore-color {
     color: $header-fore-color;
   }

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;
@@ -107,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});