Merge pull request #143 from jannschu/fermion.v2

Fix calculation syntax for some utilities
2025-09-18 09:51:36 +02:00 · 2018-10-27 10:13:51 +03:00 · 2018-08-01 15:27:06 +02:00 · 2017-10-24 13:07:48 +03:00 · 2017-10-24 13:06:15 +03:00 · 2017-10-24 13:05:10 +03:00
33 changed files with 242 additions and 92 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,9 @@
 prepros-6\.config
+
+docs/v3/index-splash-o2\.jpg
+
+docs/v3/index-splash-o1\.jpg
+
+dist/mini-doc\.min\.css
+
+dist/mini-doc\.css
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,20 @@
 # Changelog

+## v2.3.7
+
+- Fixes a couple of bugs with `checkbox` and `radio` elements.
+- Fixes a multitude of bugs with `select` and `option` elements.
+- Updated documentation to reflect the changes made.
+
+## 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.
+
 ## v2.3.4

 - Fixed an edge-case that could cause trouble with `<header>` elements (#94).
--- a/ISSUE_TEMPLATE.md
+++ b/ISSUE_TEMPLATE.md
@@ -0,0 +1,13 @@
+* Framework Version:
+* Flavor used:
+* Operating System/Browser:
+* Code to reproduce:
+* Screenshots:
+* Bug description:
+* Additional information (Optional):
+
+[Note]: # (Please describe what the bug is, what component/module causes it and how it differs from expected/intended behavior)
+[Note]: # (Include screenshots of the reported bug whenever possible to best clarify)
+[Note]: # (Always try to include code to reproduce the problem, as well as system specifications to make tracking easier)
+[Note]: # (Codepen links, additional information, suggestions, articles etc. are greatly appreciated)
+[Note]: # (If you want to suggest a feature or your issue doesn't classify as a bug report, please do not use this template)
--- 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.7
 */
 /*
  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:not([multiple]) {
+select:not([multiple]):not([size]) {
  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,10 +821,19 @@ select:not([multiple]) {
  appearance: none;
 }

-select:not([multiple])[readonly] {
+select:not([multiple]):not([size])[readonly] {
  background-color: #263238;
 }

+select {
+  max-width: 100%;
+}
+
+option {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 ::-webkit-input-placeholder {
  opacity: 1;
  color: #757575;
@@ -951,6 +960,7 @@ input[type="file"] {

 .input-group [type="checkbox"] + label, .input-group [type="radio"] + label {
  position: relative;
+  display: inline-block;
  margin-left: 1.25rem;
  cursor: pointer;
 }
@@ -958,7 +968,7 @@ input[type="file"] {
 .input-group [type="checkbox"] + label:before, .input-group [type="radio"] + label:before {
  display: inline-block;
  position: absolute;
-  bottom: 0.375rem;
+  top: 0.375rem;
  left: 0;
  width: 1rem;
  height: 1rem;
@@ -998,14 +1008,14 @@ input[type="file"] {
  background: #d0d0d0;
  content: '';
  margin-left: -1.25rem;
-  bottom: 0.625rem;
+  top: 0.625rem;
  left: 0.25rem;
  width: 0.625rem;
  height: 0.625rem;
 }

 .input-group [type="checkbox"] + label.switch:before, .input-group [type="radio"] + label.switch:before {
-  bottom: 0.5rem;
+  top: 0.5rem;
  width: 1.75rem;
  height: 0.875rem;
  border: 0;
@@ -1023,7 +1033,7 @@ input[type="file"] {
  height: 1.25rem;
  background: #39444a;
  border-radius: 100%;
-  bottom: 0.3125rem;
+  top: 0.3125rem;
  margin-left: -3rem;
  transition: left 0.3s;
 }
@@ -1036,7 +1046,7 @@ input[type="file"] {
  left: 1.75rem;
  width: 1.25rem;
  height: 1.25rem;
-  bottom: 0.3125rem;
+  top: 0.3125rem;
  margin-left: -3rem;
  background: #0277bd;
 }
@@ -1360,6 +1370,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);
@@ -1629,6 +1640,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;
--- a/dist/mini-dark.min.css
+++ b/dist/mini-dark.min.css
--- 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.7
 */
 /*
  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:not([multiple]) {
+select:not([multiple]):not([size]) {
  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,10 +820,19 @@ select:not([multiple]) {
  appearance: none;
 }

-select:not([multiple])[readonly] {
+select:not([multiple]):not([size])[readonly] {
  background-color: #e5e5e5;
 }

+select {
+  max-width: 100%;
+}
+
+option {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 ::-webkit-input-placeholder {
  opacity: 1;
  color: #616161;
@@ -950,6 +959,7 @@ input[type="file"] {

 .input-group [type="checkbox"] + label, .input-group [type="radio"] + label {
  position: relative;
+  display: inline-block;
  margin-left: 1.25rem;
  cursor: pointer;
 }
@@ -957,7 +967,7 @@ input[type="file"] {
 .input-group [type="checkbox"] + label:before, .input-group [type="radio"] + label:before {
  display: inline-block;
  position: absolute;
-  bottom: 0.375rem;
+  top: 0.375rem;
  left: 0;
  width: 1rem;
  height: 1rem;
@@ -997,14 +1007,14 @@ input[type="file"] {
  background: #212121;
  content: '';
  margin-left: -1.25rem;
-  bottom: 0.625rem;
+  top: 0.625rem;
  left: 0.25rem;
  width: 0.625rem;
  height: 0.625rem;
 }

 .input-group [type="checkbox"] + label.switch:before, .input-group [type="radio"] + label.switch:before {
-  bottom: 0.5rem;
+  top: 0.5rem;
  width: 1.75rem;
  height: 0.875rem;
  border: 0;
@@ -1022,7 +1032,7 @@ input[type="file"] {
  height: 1.25rem;
  background: #e0e0e0;
  border-radius: 100%;
-  bottom: 0.3125rem;
+  top: 0.3125rem;
  margin-left: -3rem;
  transition: left 0.3s;
 }
@@ -1035,7 +1045,7 @@ input[type="file"] {
  left: 1.75rem;
  width: 1.25rem;
  height: 1.25rem;
-  bottom: 0.3125rem;
+  top: 0.3125rem;
  margin-left: -3rem;
  background: #0277bd;
 }
@@ -1360,6 +1370,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);
--- a/dist/mini-default.min.css
+++ b/dist/mini-default.min.css
--- 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.7
 */
 /*
  Browsers resets and base typography.
@@ -756,6 +756,15 @@ input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly], t
  border-color: #c9c9c9;
 }

+select {
+  max-width: 100%;
+}
+
+option {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 ::-webkit-input-placeholder {
  opacity: 1;
  color: #616161;
@@ -845,6 +854,7 @@ input[type="file"] {

 .input-group [type="checkbox"] + label, .input-group [type="radio"] + label {
  position: relative;
+  display: inline-block;
  margin-left: 1.25rem;
  cursor: pointer;
 }
@@ -852,7 +862,7 @@ input[type="file"] {
 .input-group [type="checkbox"] + label:before, .input-group [type="radio"] + label:before {
  display: inline-block;
  position: absolute;
-  bottom: 0.375rem;
+  top: 0.375rem;
  left: 0;
  width: 1rem;
  height: 1rem;
@@ -892,7 +902,7 @@ input[type="file"] {
  background: #212121;
  content: '';
  margin-left: -1.25rem;
-  bottom: 0.625rem;
+  top: 0.625rem;
  left: 0.25rem;
  width: 0.625rem;
  height: 0.625rem;
@@ -1093,6 +1103,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);
--- a/dist/mini-lite.min.css
+++ b/dist/mini-lite.min.css
--- 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.7
 */
 /*
  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:not([multiple]) {
+select:not([multiple]):not([size]) {
  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,10 +829,19 @@ select:not([multiple]) {
  appearance: none;
 }

-select:not([multiple])[readonly] {
+select:not([multiple]):not([size])[readonly] {
  background-color: #e0e0e0;
 }

+select {
+  max-width: 100%;
+}
+
+option {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 ::-webkit-input-placeholder {
  opacity: 1;
  color: #616161;
@@ -966,6 +975,7 @@ input[type="file"] {

 .input-group [type="checkbox"] + label, .input-group [type="radio"] + label {
  position: relative;
+  display: inline-block;
  margin-left: 20px;
  cursor: pointer;
 }
@@ -973,7 +983,7 @@ input[type="file"] {
 .input-group [type="checkbox"] + label:before, .input-group [type="radio"] + label:before {
  display: inline-block;
  position: absolute;
-  bottom: 6px;
+  top: 6px;
  left: 0;
  width: 16px;
  height: 16px;
@@ -1014,14 +1024,14 @@ input[type="file"] {
  background: #2E3440;
  content: '';
  margin-left: -20px;
-  bottom: 10px;
+  top: 10px;
  left: 4px;
  width: 10px;
  height: 10px;
 }

 .input-group [type="checkbox"] + label.switch:before, .input-group [type="radio"] + label.switch:before {
-  bottom: 8px;
+  top: 8px;
  width: 28px;
  height: 14px;
  border: 0;
@@ -1040,7 +1050,7 @@ input[type="file"] {
  height: 20px;
  background: #ECEFF4;
  border-radius: 100%;
-  bottom: 5px;
+  top: 5px;
  margin-left: -48px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
  transition: left 0.3s;
@@ -1050,13 +1060,13 @@ input[type="file"] {
  left: 28px;
  width: 20px;
  height: 20px;
-  bottom: 5px;
+  top: 5px;
  margin-left: -48px;
  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 +1392,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);
@@ -1651,6 +1662,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);
@@ -1684,8 +1696,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 +2030,8 @@ mark.inline-block {
 :checked + .modal .card .close {
  z-index: 1211;
 }
-
-/*
+
+/*
  Custom contextual background elements and alerts.
 */
 mark.secondary {
@@ -2123,8 +2135,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 +2287,8 @@ ul.breadcrumbs li:last-child:after {
  display: block;
  text-align: center;
 }
-
-/*
+
+/*
  Custom elements for utilities and helper classes.
 */
 .bordered {
--- a/dist/mini-nord.min.css
+++ b/dist/mini-nord.min.css
--- 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.7
 */
 /*
  Browsers resets and base typography.
@@ -786,6 +786,15 @@ input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly], t
  border-color: #bdbdbd;
 }

+select {
+  max-width: 100%;
+}
+
+option {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 ::-webkit-input-placeholder {
  opacity: 1;
  color: #616161;
@@ -876,6 +885,7 @@ input[type="file"] {

 .input-group [type="checkbox"] + label, .input-group [type="radio"] + label {
  position: relative;
+  display: inline-block;
  margin-left: 1.25rem;
  cursor: pointer;
 }
@@ -883,7 +893,7 @@ input[type="file"] {
 .input-group [type="checkbox"] + label:before, .input-group [type="radio"] + label:before {
  display: inline-block;
  position: absolute;
-  bottom: 0.375rem;
+  top: 0.375rem;
  left: 0;
  width: 1rem;
  height: 1rem;
@@ -923,7 +933,7 @@ input[type="file"] {
  background: #212121;
  content: '';
  margin-left: -1.25rem;
-  bottom: 0.625rem;
+  top: 0.625rem;
  left: 0.25rem;
  width: 0.625rem;
  height: 0.625rem;
@@ -1215,6 +1225,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);
--- a/dist/mini-pwa.min.css
+++ b/dist/mini-pwa.min.css
--- 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.7
 */
@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:not([multiple]) {
+select:not([multiple]):not([size]) {
  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,10 +833,19 @@ select:not([multiple]) {
  appearance: none;
 }

-select:not([multiple])[readonly] {
+select:not([multiple]):not([size])[readonly] {
  background-color: #eae1ff;
 }

+select {
+  max-width: 100%;
+}
+
+option {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 ::-webkit-input-placeholder {
  opacity: 1;
  color: #493e4b;
@@ -970,6 +979,7 @@ input[type="file"] {

 .input-group [type="checkbox"] + label, .input-group [type="radio"] + label {
  position: relative;
+  display: inline-block;
  margin-left: 20px;
  cursor: pointer;
 }
@@ -977,7 +987,7 @@ input[type="file"] {
 .input-group [type="checkbox"] + label:before, .input-group [type="radio"] + label:before {
  display: inline-block;
  position: absolute;
-  bottom: 3px;
+  top: 3px;
  left: 0;
  width: 16px;
  height: 16px;
@@ -1018,7 +1028,7 @@ input[type="file"] {
  background: #211423;
  content: '';
  margin-left: -20px;
-  bottom: 7px;
+  top: 7px;
  left: 4px;
  width: 10px;
  height: 10px;
@@ -1340,6 +1350,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);
--- a/dist/mini-sucroa.min.css
+++ b/dist/mini-sucroa.min.css
--- a/docs/contextual.html
+++ b/docs/contextual.html
@@ -272,8 +272,8 @@
 						</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;
--- a/docs/customization/input_control.html
+++ b/docs/customization/input_control.html
@@ -314,8 +314,8 @@
 										<td data-label="Description">Border color for checkbox/radio elements (focused)</td><td data-label="Sample value">#0288d1</td>
 									</tr>
 									<tr>
-										<td data-label="Variable">$checkbox-bottom-spacing</td><td data-label="Type">Position bottom (<code>px</code> preferred)</td>
-										<td data-label="Description">Position bottom spacing for checkbox/radio elements</td><td data-label="Sample value">6px</td>
+										<td data-label="Variable">$checkbox-bottom-spacing</td><td data-label="Type">Position top (<code>px</code> preferred)</td>
+										<td data-label="Description">Position top spacing for checkbox/radio elements</td><td data-label="Sample value">6px</td>
 									</tr>
 									<tr>
 										<td data-label="Variable">$checkbox-disabled-opacity</td><td data-label="Type">Opacity</td>
--- a/docs/flavors.html
+++ b/docs/flavors.html
@@ -44,13 +44,13 @@
          <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.7/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">
            <h2 class="section double-padded">Default <small>mini-default</small></h2>
            <pre class="section double-padded" style="border-left:0; box-shadow: none;">&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>
-            <p class="section double-padded" style="text-align:justify">The default flavor for <strong>mini.css</strong> uses a light gray background and gray-black foreground color. Certain containers, such as cards and tabs use white-gray backgrounds. The grid system has 12 columns and most of the components and modules use sharp corners and light border colors. All of the colors used in this flavor are loosely based on <a href="https://material.google.com/style/color">Google's Material design color palette</a>.</p>
+            <p class="section double-padded" style="text-align:justify">The default flavor for <strong>mini.css</strong> uses a light gray background and gray-black foreground color. Certain containers, such as cards and tabs use white-gray backgrounds. The grid system has 12 columns and most of the components and modules use sharp corners and light border colors. All of the colors used in this flavor are loosely based on <a href="https://material.google.com/style/color.html">Google's Material design color palette</a>.</p>
            <div class="section double-padded">
              <p><strong>Author:</strong> <a href="https://github.com/Chalarangelo">Chalarangelo</a></p>
              <p><strong>Size:</strong> 7 KB</p>
--- a/docs/index.html
+++ b/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.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.7/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>
--- a/docs/mini-default.min.css
+++ b/docs/mini-default.min.css
--- a/docs/quick_reference.html
+++ b/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.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.7/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>
--- a/docs/v2/DEVLOG.md
+++ b/docs/v2/DEVLOG.md
@@ -1293,3 +1293,37 @@
 - 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.
+
+## 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.
+
+# v2.3.7 Development Log
+
+## 20171023
+
+- Fixed the bugs found due to #108. `select` elements should now be pretty decently stylized and work across all browsers and environments.
+- Fixed the bugs found due to #107. Custom checkboxes and radio buttons should now behave as expected. Also, updated the customization docs to reflect said changes.
+- Size has increased to a total of `6.9KB`, should look into optimizing to trim off some bytes.
+- Rebuilt flavors to latest version.
+- Updated docs.
+- Released patch.
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "mini.css",
-  "version": "2.3.4",
+  "version": "2.3.7",
  "description": "A minimal, responsive, style-agnostic CSS framework.",
  "main": "dist/mini-default.min.css",
  "directories": {
--- 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.7
 */
 //  Basic rules for body and typography
 $fore-color:            #d0d0d0;                  // Text and general foreground color
--- 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.7
 */
 //  Basic rules for body and typography
 $fore-color:            #212121;                  // Text and general foreground color
--- 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.7
 */
 //  Basic rules for body and typography
 $fore-color:            #212121;                  // Text and general foreground color
--- 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.7
 */
 //  This flavor is based on the Nord color palette: https://github.com/arcticicestudio/nord
 //  Basic rules for body and typography
--- 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.7
 */
 //  Basic rules for body and typography
 $fore-color:            #212121;                  // Text and general foreground color
--- 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.7
 */
 // 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');
@@ -13,7 +13,7 @@
 // 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]
--- 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;
  }
--- a/src/mini/_input_control.scss
+++ b/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:not([multiple]) {
+  select:not([multiple]):not([size]) {
    padding-right: $select-padding-right;
    background: url(selectArrow()) no-repeat right;
    background-color: $input-back-color;
@@ -280,6 +280,14 @@ input:not([type]), [type="text"], [type="email"], [type="number"], [type="search
    }
  }
 }
+// Make select respect parent width, stylize options
+select {
+  max-width: 100%;
+}
+option {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 // Placeholder styling (keep browser-specific definitions separated, they do not play well together).
 ::-webkit-input-placeholder {
  opacity: 1;
@@ -493,6 +501,7 @@ a[role="button"], label[role="button"], [role="button"] {
  // Label styling based on the specifics of the checkbox/radio variables.
  [type="checkbox"] + label, [type="radio"] + label {
    position: relative;
+    display: inline-block;
    $_unit: $checkbox-size*0 +1;    // Used to check if the unit is `px` or `rem/em`
    @if $_unit == 1px {
      margin-left: floor($checkbox-size + floor($checkbox-size * 0.25));
@@ -505,7 +514,7 @@ a[role="button"], label[role="button"], [role="button"] {
    &:before {
      display: inline-block;
      position: absolute;
-      bottom: $checkbox-bottom-spacing;
+      top: $checkbox-bottom-spacing;
      left: 0;
      width: $checkbox-size;
      height: $checkbox-size;
@@ -560,14 +569,14 @@ a[role="button"], label[role="button"], [role="button"] {
      $_unit: $checkbox-size*0 +1;    // Used to check if the unit is `px` or `rem/em`
      @if $_unit == 1px {
        margin-left: - floor($checkbox-size + floor($checkbox-size * 0.25));
-        bottom: floor($checkbox-size * 0.25) + $checkbox-bottom-spacing;
+        top: floor($checkbox-size * 0.25) + $checkbox-bottom-spacing;
        left: floor($checkbox-size * 0.25);
        width: floor($checkbox-size * 0.5) + floor($checkbox-border-thickness * 2);
        height: floor($checkbox-size * 0.5) + floor($checkbox-border-thickness * 2);
      }
      @else {
        margin-left: - ($checkbox-size * 1.25);
-        bottom: $checkbox-size * 0.25 + $checkbox-bottom-spacing;
+        top: $checkbox-size * 0.25 + $checkbox-bottom-spacing;
        left: $checkbox-size * 0.25;
        width: $checkbox-size * 0.5 + $checkbox-border-thickness * 2;
        height: $checkbox-size * 0.5 + $checkbox-border-thickness * 2;
@@ -583,7 +592,7 @@ a[role="button"], label[role="button"], [role="button"] {
      // Styling for the bar part of the switch
      &:before {
        @if $switch-bottom-spacing != $checkbox-bottom-spacing {
-          bottom: $switch-bottom-spacing;
+          top: $switch-bottom-spacing;
        }
        width: $switch-bar-width;
        height: $switch-bar-height;
@@ -621,11 +630,11 @@ a[role="button"], label[role="button"], [role="button"] {
        }
        $_unit: $switch-bar-width*0 +1;    // Used to check if the unit is `px` or `rem/em`
        @if $_unit == 1px {
-          bottom: floor((2*$switch-bottom-spacing + $switch-bar-height - $switch-knob-height)/2);
+          top: floor((2*$switch-bottom-spacing + $switch-bar-height - $switch-knob-height)/2);
          margin-left: - floor($switch-bar-width + $switch-knob-width);
        }
        @else {
-          bottom: (2*$switch-bottom-spacing + $switch-bar-height - $switch-knob-height)/2;
+          top: (2*$switch-bottom-spacing + $switch-bar-height - $switch-knob-height)/2;
          margin-left: - ($switch-bar-width + $switch-knob-width);
        }
        @if $switch-knob-box-shadow != none {
@@ -652,11 +661,11 @@ a[role="button"], label[role="button"], [role="button"] {
        height: $switch-knob-height;
        $_unit: $switch-bar-width*0 +1;    // Used to check if the unit is `px` or `rem/em`
        @if $_unit == 1px {
-          bottom: floor((2*$switch-bottom-spacing + $switch-bar-height - $switch-knob-height)/2);
+          top: floor((2*$switch-bottom-spacing + $switch-bar-height - $switch-knob-height)/2);
          margin-left: - floor($switch-bar-width + $switch-knob-width);
        }
        @else {
-          bottom: (2*$switch-bottom-spacing + $switch-bar-height - $switch-knob-height)/2;
+          top: (2*$switch-bottom-spacing + $switch-bar-height - $switch-knob-height)/2;
          margin-left: - ($switch-bar-width + $switch-knob-width);
        }
        @if $switch-on-knob-back-color != $switch-knob-back-color {
--- 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;
@@ -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});
--- a/src/mini/_utility_mixins.scss
+++ b/src/mini/_utility_mixins.scss
@@ -120,24 +120,24 @@
  $hidden-large-suffix : 'lg', $hidden-use-four-step-grid : false,
  $hidden-small-breakpoint : 480px, $hidden-extra-small-suffix : 'xs') {
  @if $hidden-use-four-step-grid {
-    @media screen and (max-width: #{$hidden-small-breakpoint}-1px) {
+    @media screen and (max-width: $hidden-small-breakpoint - 1px) {
      .#{$hidden-prefix}-#{$hidden-extra-small-suffix} {
        display: none !important;
      }
    }
-    @media screen and (min-width: #{$hidden-small-breakpoint}) and (max-width: #{$hidden-medium-breakpoint}-1px) {
+    @media screen and (min-width: #{$hidden-small-breakpoint}) and (max-width: $hidden-medium-breakpoint - 1px) {
      .#{$hidden-prefix}-#{$hidden-small-suffix} {
        display: none !important;
      }
    }
  }
  @else {
-    @media screen and (max-width: #{$hidden-medium-breakpoint}-1px) {
+    @media screen and (max-width: $hidden-medium-breakpoint - 1px) {
      .#{$hidden-prefix}-#{$hidden-small-suffix} {
        display: none !important;
      }
    }
-    @media screen and (min-width: #{$hidden-medium-breakpoint}) and (max-width: #{$hidden-large-breakpoint}-1px) {
+    @media screen and (min-width: #{$hidden-medium-breakpoint}) and (max-width: $hidden-large-breakpoint - 1px) {
      .#{$hidden-prefix}-#{$hidden-medium-suffix} {
        display: none !important;
      }
@@ -165,7 +165,7 @@
  $visually-hidden-large-suffix : 'lg', $visually-hidden-use-four-step-grid : false,
  $visually-hidden-small-breakpoint : 480px, $visually-hidden-extra-small-suffix : 'xs') {
  @if $visually-hidden-use-four-step-grid {
-    @media screen and (max-width: #{$visually-hidden-small-breakpoint}-1px) {
+    @media screen and (max-width: $visually-hidden-small-breakpoint - 1px) {
      .#{$visually-hidden-prefix}-#{$visually-hidden-extra-small-suffix} {
        position: absolute !important;
        width: 1px !important;
@@ -179,7 +179,7 @@
        overflow: hidden !important;
      }
    }
-    @media screen and (min-width: #{$visually-hidden-small-breakpoint}) and (max-width: #{$visually-hidden-medium-breakpoint}-1px) {
+    @media screen and (min-width: #{$visually-hidden-small-breakpoint}) and (max-width: $visually-hidden-medium-breakpoint - 1px) {
      .#{$visually-hidden-prefix}-#{$visually-hidden-small-suffix} {
        position: absolute !important;
        width: 1px !important;
@@ -195,7 +195,7 @@
    }
  }
  @else {
-    @media screen and (max-width: #{$visually-hidden-medium-breakpoint}-1px) {
+    @media screen and (max-width: $visually-hidden-medium-breakpoint - 1px) {
      .#{$visually-hidden-prefix}-#{$visually-hidden-small-suffix} {
        position: absolute !important;
        width: 1px !important;
@@ -209,7 +209,7 @@
        overflow: hidden !important;
      }
    }
-    @media screen and (min-width: #{$visually-hidden-medium-breakpoint}) and (max-width: #{$visually-hidden-large-breakpoint}-1px) {
+    @media screen and (min-width: #{$visually-hidden-medium-breakpoint}) and (max-width: $visually-hidden-large-breakpoint - 1px) {
      .#{$visually-hidden-prefix}-#{$visually-hidden-medium-suffix} {
        position: absolute !important;
        width: 1px !important;
Author	SHA1	Message	Date
Angelos Chalaris	e71e3bc00e	Merge pull request #143 from jannschu/fermion.v2 Fix calculation syntax for some utilities	2018-10-27 10:13:51 +03:00
Jannik Schürg	17504c4601	Fix calculation syntax for some utilities	2018-08-01 15:27:06 +02:00
Angelos Chalaris	7cf0125c06	Merge branch 'master' into fermion.v2	2017-10-24 13:07:48 +03:00
Angelos Chalaris	38a0b3cc5e	Update ISSUE_TEMPLATE.md Additional information for bug reports	2017-10-24 13:06:15 +03:00
Angelos Chalaris	e6b6515162	Merge pull request #109 from mariastervic/patch-1 Created an issue template	2017-10-24 13:05:10 +03:00
Maria Stervic	fe28915e46	Created an issue template I noticed that the repository lacked a issue template, so I decided to create a simple one based on what most bug reports look like. Feel free to modify it.	2017-10-24 02:06:39 +03:00
Angelos Chalaris	9223e7d676	Merge branch 'fermion.v2'	2017-10-23 14:21:26 +03:00
Angelos Chalaris	6e14ca7876	Update package.json	2017-10-23 14:06:55 +03:00
Angelos Chalaris	10b70885d9	🐛 fix - Resolved #107 Fixes problems with checkbox and radio elements.	2017-10-23 14:02:44 +03:00
Angelos Chalaris	532608e16e	🐛 fix - Resolved #108 Fixed the bugs related to the <select> element.	2017-10-23 13:47:50 +03:00
Angelos Chalaris	050b8b1b94	2.3.6	2017-10-19 12:23:03 +03:00
Angelos Chalaris	9811722d86	Merge branch 'fermion'	2017-10-19 12:21:48 +03:00
Angelos Chalaris	e28f291531	Resolves #104 Bug found and fixed. Should work as expected now.	2017-10-19 12:19:32 +03:00
Angelos Chalaris	90a2fdd564	Merge branch 'fermion'	2017-10-18 10:35:52 +03:00
Angelos Chalaris	6079f1c337	Fixes #100 Fixed a broken link.	2017-10-18 10:35:36 +03:00
Angelos Chalaris	41e78116d5	Merge branch 'master' into fermion.v2	2017-10-15 18:49:36 +03:00
Angelos Chalaris	787a66fdde	2.3.5	2017-10-15 18:47:20 +03:00
Angelos Chalaris	b880287faf	Merge branch 'fermion.v2'	2017-10-15 18:45:15 +03:00
Angelos Chalaris	49ffe7651f	Fixes #101 Ready to release v2.3.5	2017-10-15 18:44:13 +03:00
Angelos Chalaris	d15d6571a4	Merge pull request #102 from anselal/master 🐛 fix(table): Add <td> min-height	2017-10-15 18:13:56 +03:00
Anastasios Selalmazidis	7fb18b07c0	🐛 fix(table): Add <td> min-height Fixes #101	2017-10-15 16:11:33 +03:00