Resolves #104

Bug found and fixed. Should work as expected now.
Chalarangelo · Oct 19, 2017 · e28f291 · e28f291
1 parent 6079f1c
commit e28f291
Show file tree

Hide file tree

Showing 21 changed files with 37 additions and 23 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Changelog
 
+## v2.3.6
+
+- Fixes a bug that caused transparency in `.modal`s that use `.card`s (#104).
+- Documentation update for `.modal`s.
+
 ## v2.3.5
 
 - Fixes a bug caused by empty `<td>` elements, causing mobile tables to not display as intended.

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.5
+  mini.css version: v2.3.6
 */
 /*
   Browsers resets and base typography.
@@ -1630,6 +1630,7 @@ table.striped tr:nth-of-type(2n) > td {
   align-self: center;
   position: relative;
   width: 100%;
+  background: #232e33;
   border: 0.0625rem solid #616161;
   margin: 0.5rem;
   overflow: hidden;

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.5
+  mini.css version: v2.3.6
 */
 /*
   Browsers resets and base typography.

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.5
+  mini.css version: v2.3.6
 */
 /*
   Browsers resets and base typography.

diff --git a/dist/mini-nord.css b/dist/mini-nord.css
@@ -3,7 +3,7 @@
   Flavor name: Nord (mini-nord)
   Author: tphecca (https://github.com/tphecca)
   Maintainers: tphecca
-  mini.css version: v2.3.5
+  mini.css version: v2.3.6
 */
 /*
   Browsers resets and base typography.
@@ -1652,6 +1652,7 @@ table.striped tr:nth-of-type(2n) > td {
   align-self: center;
   position: relative;
   width: 100%;
+  background: #ECEFF4;
   border: 1px solid #D8DEE9;
   margin: 2px 10px 20px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);

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.5
+  mini.css version: v2.3.6
 */
 /*
   Browsers resets and base typography.

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.5
+  mini.css version: v2.3.6
 */
 @import url("https://fonts.googleapis.com/css?family=Cousine:400,400i,700|Libre+Baskerville:400,400i,700&subset=latin-ext");
 /*

diff --git a/docs/contextual.html b/docs/contextual.html
@@ -272,8 +272,8 @@ <h3>Notes</h3>
 						</ul><hr>
 						<div class="row">
 							<div class="col-sm-12 col-md-6">
-								<pre>&lt;input id=&quot;modal-toggle&quot; type=&quot;checkbox&quot;/&gt;
-&lt;label for=&quot;modal-toggle&quot;&gt;Show modal&lt;/label&gt;
+								<pre>&lt;label for=&quot;modal-toggle&quot;&gt;Show modal&lt;/label&gt;
+&lt;input id=&quot;modal-toggle&quot; type=&quot;checkbox&quot;/&gt;
 &lt;div class=&quot;modal&quot; role=&quot;dialog&quot; aria-labelledby=&quot;dialogTitle&quot;&gt;
   &lt;div class=&quot;card&quot;&gt;
     &lt;label for=&quot;modal-toggle&quot; class=&quot;close&quot;&gt;&lt;/label&gt;

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.5/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.6/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.5/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.6/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/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.5/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.6/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
@@ -1307,3 +1307,12 @@
 ## 20171018
 
 - Fixed a typo in the `flavors` doc page.
+
+# v2.3.6 Development Log
+
+## 20171019
+
+- Fixed a documentation problem with `.modal`s. (#104)
+- 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.5
+  mini.css version: v2.3.6
 */
 //  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.5
+  mini.css version: v2.3.6
 */
 //  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.5
+  mini.css version: v2.3.6
 */
 //  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.5
+  mini.css version: v2.3.6
 */
 //  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.5
+  mini.css version: v2.3.6
 */
 //  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,15 +5,15 @@
   Flavor name: Sucroa (mini-sucroa)
   Author: Angeliki Daskalakis
   Maintainers: Angeliki Daskalakis, Angelos Chalaris (chalarangelo@gmail.com)
-  mini.css version: v2.3.5
+  mini.css version: v2.3.6
 */
 // 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');
 // font-family: 'Libre Baskerville', serif;
 // font-family: 'Cousine', monospace;
 //  Basic rules for body and typography
 $fore-color:            #211423;                    // Text and general foreground color
-$back-color:           #fffcc9;                     // Body background color
+$back-color:            #fffcc9;                    // Body background color
 $base-font-family:      'Libre Baskerville', serif; // Default font stack for all elements:
 $base-root-font-size:   16px;                       // Root font sizing for all elements [1]
 $base-font-size:        1em;                        // Default font sizing for all elements [2]

diff --git a/src/mini/_card.scss b/src/mini/_card.scss
@@ -30,9 +30,7 @@ $fore-color:               black !default;           // [External variable - cor
   position: relative;
   width: 100%;
   // Actual styling for the cards
-  @if $card-back-color != $back-color {
-    background: $card-back-color;
-  }
+  background: $card-back-color; // Do not use conditions on this, causes transparency issues
   @if $card-fore-color != $fore-color {
     color: $card-fore-color;
   }