2.3.7

2.3.6
🐛 fix - Resolved #107
2025-09-11 14:40:47 +02:00 · 2017-10-23 14:03:40 +03:00 · 2017-10-23 14:03:09 +03:00 · 2017-10-23 14:02:44 +03:00 · 2017-10-23 13:47:50 +03:00 · 2017-10-19 12:19:32 +03:00
37 changed files with 2286 additions and 179 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,36 @@
 # 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).
+- 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.
+
+## v2.3.2
+
+- Improved the styling of `select` to be a bit lighter in terms of size.
+- Added a condition allowing the `select` fix not to be applied.
+- Updated `mini-lite` to not include the `select` fix.
+
 ## v2.3.1

 - Fixed an issue with `<select>` elements on certain devices (#80, #82).
--- a/CODE_OF_CONDUCT.md
+++ b/CODE_OF_CONDUCT.md
@@ -0,0 +1,46 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at chalarangelo@gmail.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
+
+[homepage]: http://contributor-covenant.org
+[version]: http://contributor-covenant.org/version/1/4/
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -0,0 +1,11 @@
+## Contributing
+
+There are many ways you can contribute to the development of the **mini.css** framework:
+
+- If you encounter any **bugs**, please open an [issue](https://github.com/Chalarangelo/mini.css/issues/new). Try to include as much information possible, including but not limited to **detailed explanation, screenshots, operating system, browser and device**.
+- **Feature requests** are a bit more complicated to process, as we need to get some community feedback on what is worth adding to the framework, but feel free to open an [issue](https://github.com/Chalarangelo/mini.css/issues/new) and we'll have a nice discussion.
+- **Flavor files** are always welcome, even if they are just a simple palette change of the default flavor. Feel free to create a [pull request](https://github.com/Chalarangelo/mini.css/compare) if you are a flavor creator.
+- **New features** developed can also be submitted as a [pull request](https://github.com/Chalarangelo/mini.css/compare) and, after we receive some community feedback and there's some productive discussion, they might get added to the framework.
+- For **third-party-libraries** and other features (such as new modules, components or Javascript libraries) developed for **mini.css**, please feel free to email me (chalarangelo@gmail.com) and we'll take it from there.
+- If you create **content that uses or showcases the framework** (Codepens, tutorials, videos or even a cool website or app), email me (chalarangelo@gmail.com) a link to your content, so that I can help you share it with the world.
+- For anything **not included in this list**, either open an [issue](https://github.com/Chalarangelo/mini.css/issues/new) or send me an email (chalarangelo@gmail.com).
--- a/dist/mini-dark.css
+++ b/dist/mini-dark.css
@@ -3,10 +3,10 @@
  Flavor name: Dark (mini-dark)
  Author: Angelos Chalaris (chalarangelo@gmail.com)
  Maintainers: Angelos Chalaris
-  mini.css version: v2.3.1
+  mini.css version: v2.3.7
 */
 /*
-	Browsers resets and base typography.
+  Browsers resets and base typography.
 */
 html {
  font-size: 16px;
@@ -206,7 +206,7 @@ figcaption {
 }

 /*
-	Definitions for the grid system.
+  Definitions for the grid system.
 */
 .container {
  margin: 0 auto;
@@ -679,7 +679,7 @@ figcaption {
 }

 /*
-	Definitions for forms and input elements.
+  Definitions for forms and input elements.
 */
 form {
  background: #1c2529;
@@ -812,18 +812,26 @@ input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly], t
  border-color: #20292e;
 }

-select {
+select:not([multiple]):not([size]) {
  padding-right: 1.5rem;
-  background-image: 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>'), url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" style="background:%2339444a"/>');
-  background-position: right, left;
-  background-repeat: no-repeat, repeat;
-  -moz-appearance: none;
+  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;
  -webkit-appearance: none;
+  -moz-appearance: none;
  appearance: none;
 }

-select[readonly] {
-  background-image: 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>'), url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" style="background:%23263238"/>');
+select:not([multiple]):not([size])[readonly] {
+  background-color: #263238;
+}
+
+select {
+  max-width: 100%;
+}
+
+option {
+  overflow: hidden;
+  text-overflow: ellipsis;
 }

 ::-webkit-input-placeholder {
@@ -952,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;
 }
@@ -959,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;
@@ -999,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;
@@ -1024,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;
 }
@@ -1037,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;
 }
@@ -1106,7 +1115,7 @@ button.large, [type="button"].large, [type="submit"].large,
 }

 /*
-	Definitions for navigation elements.
+  Definitions for navigation elements.
 */
 header {
  display: block;
@@ -1293,7 +1302,7 @@ footer.sticky {
 }

 /*
-	Definitions for the responsive table component.
+  Definitions for the responsive table component.
 */
 table {
  border-collapse: separate;
@@ -1361,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);
@@ -1613,7 +1623,7 @@ table.striped tr:nth-of-type(2n) > td {
 }

 /*
-	Definitions for cards and containers.
+  Definitions for cards and containers.
 */
 .card {
  display: -webkit-box;
@@ -1630,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;
@@ -1723,7 +1734,7 @@ table.striped tr:nth-of-type(2n) > td {
 }

 /*
-	Definitions for tabs/horizontal accordions.
+  Definitions for tabs/horizontal accordions.
 */
 .tabs {
  width: 100%;
@@ -1867,7 +1878,7 @@ table.striped tr:nth-of-type(2n) > td {
  }
 }

-/*
+/*
  Definitions for contextual background elements, toasts and tooltips.
 */
 mark {
@@ -2030,7 +2041,7 @@ mark.inline-block {
  padding: 1.125rem 2.25rem;
 }

-/*
+/*
  Definitions for progress elements and spinners.
 */
 progress {
@@ -2151,7 +2162,7 @@ progress.tertiary::-moz-progress-bar {
  height: 2rem;
 }

-/*
+/*
  Definitions for utilities and helper classes.
 */
 .hidden {
--- a/dist/mini-dark.min.css
+++ b/dist/mini-dark.min.css
--- a/dist/mini-default.css
+++ b/dist/mini-default.css
@@ -3,10 +3,10 @@
  Flavor name: Default (mini-default)
  Author: Angelos Chalaris (chalarangelo@gmail.com)
  Maintainers: Angelos Chalaris
-  mini.css version: v2.3.1
+  mini.css version: v2.3.7
 */
 /*
-	Browsers resets and base typography.
+  Browsers resets and base typography.
 */
 html {
  font-size: 16px;
@@ -207,7 +207,7 @@ figcaption {
 }

 /*
-	Definitions for the grid system.
+  Definitions for the grid system.
 */
 .container {
  margin: 0 auto;
@@ -680,7 +680,7 @@ figcaption {
 }

 /*
-	Definitions for forms and input elements.
+  Definitions for forms and input elements.
 */
 form {
  background: #eeeeee;
@@ -811,18 +811,26 @@ input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly], t
  border-color: #c9c9c9;
 }

-select {
+select:not([multiple]):not([size]) {
  padding-right: 1.5rem;
-  background-image: 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>'), url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" style="background:%23fafafa"/>');
-  background-position: right, left;
-  background-repeat: no-repeat, repeat;
-  -moz-appearance: none;
+  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;
  -webkit-appearance: none;
+  -moz-appearance: none;
  appearance: none;
 }

-select[readonly] {
-  background-image: 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>'), url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" style="background:%23e5e5e5"/>');
+select:not([multiple]):not([size])[readonly] {
+  background-color: #e5e5e5;
+}
+
+select {
+  max-width: 100%;
+}
+
+option {
+  overflow: hidden;
+  text-overflow: ellipsis;
 }

 ::-webkit-input-placeholder {
@@ -951,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;
 }
@@ -958,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;
@@ -998,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;
@@ -1023,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;
 }
@@ -1036,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;
 }
@@ -1105,7 +1114,7 @@ button.large, [type="button"].large, [type="submit"].large,
 }

 /*
-	Definitions for navigation elements.
+  Definitions for navigation elements.
 */
 header {
  display: block;
@@ -1292,7 +1301,7 @@ footer.sticky {
 }

 /*
-	Definitions for the responsive table component.
+  Definitions for the responsive table component.
 */
 table {
  border-collapse: separate;
@@ -1361,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);
@@ -1613,7 +1623,7 @@ table.striped tr:nth-of-type(2n) > td {
 }

 /*
-	Definitions for cards and containers.
+  Definitions for cards and containers.
 */
 .card {
  display: -webkit-box;
@@ -1723,7 +1733,7 @@ table.striped tr:nth-of-type(2n) > td {
 }

 /*
-	Definitions for tabs/horizontal accordions.
+  Definitions for tabs/horizontal accordions.
 */
 .tabs {
  width: 100%;
@@ -1868,7 +1878,7 @@ table.striped tr:nth-of-type(2n) > td {
  }
 }

-/*
+/*
  Definitions for contextual background elements, toasts and tooltips.
 */
 mark {
@@ -2031,7 +2041,7 @@ mark.inline-block {
  padding: 1.125rem 2.25rem;
 }

-/*
+/*
  Definitions for progress elements and spinners.
 */
 progress {
@@ -2152,7 +2162,7 @@ progress.tertiary::-moz-progress-bar {
  height: 2rem;
 }

-/*
+/*
  Definitions for utilities and helper classes.
 */
 .hidden {
--- 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.1
+  mini.css version: v2.3.7
 */
 /*
  Browsers resets and base typography.
@@ -205,7 +205,7 @@ figcaption {
 }

 /*
-	Definitions for the grid system.
+  Definitions for the grid system.
 */
 .container {
  margin: 0 auto;
@@ -678,7 +678,7 @@ figcaption {
 }

 /*
-	Definitions for forms and input elements.
+  Definitions for forms and input elements.
 */
 form {
  background: #eeeeee;
@@ -757,17 +757,12 @@ input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly], t
 }

 select {
-  padding-right: 1.5rem;
-  background-image: 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>'), url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" style="background:%23fafafa"/>');
-  background-position: right, left;
-  background-repeat: no-repeat, repeat;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  appearance: none;
+  max-width: 100%;
 }

-select[readonly] {
-  background-image: 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>'), url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" style="background:%23e5e5e5"/>');
+option {
+  overflow: hidden;
+  text-overflow: ellipsis;
 }

 ::-webkit-input-placeholder {
@@ -859,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;
 }
@@ -866,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;
@@ -906,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;
@@ -964,7 +960,7 @@ button.large, [type="button"].large, [type="submit"].large,
 }

 /*
-	Definitions for navigation elements.
+  Definitions for navigation elements.
 */
 header {
  display: block;
@@ -1038,7 +1034,7 @@ footer.sticky {
 }

 /*
-	Definitions for the responsive table component.
+  Definitions for the responsive table component.
 */
 table {
  border-collapse: separate;
@@ -1107,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);
@@ -1119,7 +1116,7 @@ table th:first-child, table td:first-child {
 }

 /*
-	Definitions for cards and containers.
+  Definitions for cards and containers.
 */
 .card {
  display: -webkit-box;
@@ -1186,7 +1183,7 @@ table th:first-child, table td:first-child {
 }

 /*
-	Definitions for contextual background elements, toasts and tooltips.
+  Definitions for contextual background elements, toasts and tooltips.
 */
 mark {
  background: #0277bd;
@@ -1224,7 +1221,7 @@ mark.inline-block {
 }

 /*
-	Definitions for progress elements and spinners.
+  Definitions for progress elements and spinners.
 */
 progress {
  display: block;
@@ -1300,7 +1297,7 @@ progress.tertiary::-moz-progress-bar {
 }

 /*
-	Definitions for utilities and helper classes.
+  Definitions for utilities and helper classes.
 */
 .hidden {
  display: none !important;
--- a/dist/mini-lite.min.css
+++ b/dist/mini-lite.min.css
--- a/dist/mini-nord.css
+++ b/dist/mini-nord.css
@@ -1,12 +1,12 @@
@charset "UTF-8";
-/*
-  Flavor name: Nord (mini-nord)
-  Author: tphecca (https://github.com/tphecca)
-  Maintainers: tphecca
-  mini.css version: v2.3.1
+/*
+  Flavor name: Nord (mini-nord)
+  Author: tphecca (https://github.com/tphecca)
+  Maintainers: tphecca
+  mini.css version: v2.3.7
 */
 /*
-	Browsers resets and base typography.
+  Browsers resets and base typography.
 */
 html {
  font-size: 16px;
@@ -211,7 +211,7 @@ figcaption {
 }

 /*
-	Definitions for the grid system.
+  Definitions for the grid system.
 */
 .container {
  margin: 0 auto;
@@ -684,7 +684,7 @@ figcaption {
 }

 /*
-	Definitions for forms and input elements.
+  Definitions for forms and input elements.
 */
 form {
  border: 1px solid #D8DEE9;
@@ -820,18 +820,26 @@ input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly], t
  border-color: #bdbdbd;
 }

-select {
+select:not([multiple]):not([size]) {
  padding-right: 20px;
-  background-image: 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>'), url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" style="background:%23E5E9F0"/>');
-  background-position: right, left;
-  background-repeat: no-repeat, repeat;
-  -moz-appearance: none;
+  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;
  -webkit-appearance: none;
+  -moz-appearance: none;
  appearance: none;
 }

-select[readonly] {
-  background-image: 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>'), url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" style="background:%23e0e0e0"/>');
+select:not([multiple]):not([size])[readonly] {
+  background-color: #e0e0e0;
+}
+
+select {
+  max-width: 100%;
+}
+
+option {
+  overflow: hidden;
+  text-overflow: ellipsis;
 }

 ::-webkit-input-placeholder {
@@ -967,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;
 }
@@ -974,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;
@@ -1015,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;
@@ -1041,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;
@@ -1051,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 {
@@ -1122,7 +1131,7 @@ button.large, [type="button"].large, [type="submit"].large,
 }

 /*
-	Definitions for navigation elements.
+  Definitions for navigation elements.
 */
 header {
  display: block;
@@ -1312,7 +1321,7 @@ footer.sticky {
 }

 /*
-	Definitions for the responsive table component.
+  Definitions for the responsive table component.
 */
 table {
  border-collapse: separate;
@@ -1383,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);
@@ -1635,7 +1645,7 @@ table.striped tr:nth-of-type(2n) > td {
 }

 /*
-	Definitions for cards and containers.
+  Definitions for cards and containers.
 */
 .card {
  display: -webkit-box;
@@ -1652,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);
@@ -1685,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 {
@@ -1741,7 +1752,7 @@ table.striped tr:nth-of-type(2n) > td {
 }

 /*
-	Definitions for tabs/horizontal accordions.
+  Definitions for tabs/horizontal accordions.
 */
 .tabs {
  width: 100%;
@@ -1887,7 +1898,7 @@ table.striped tr:nth-of-type(2n) > td {
  }
 }

-/*
+/*
  Definitions for contextual background elements, toasts and tooltips.
 */
 mark {
@@ -2019,8 +2030,8 @@ mark.inline-block {
 :checked + .modal .card .close {
  z-index: 1211;
 }
-
-/*
+
+/*
  Custom contextual background elements and alerts.
 */
 mark.secondary {
@@ -2052,7 +2063,7 @@ mark.inline-block {
  padding: 18px 36px;
 }

-/*
+/*
  Definitions for progress elements and spinners.
 */
 progress {
@@ -2124,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 {
@@ -2174,7 +2185,7 @@ progress.tertiary::-moz-progress-bar {
  height: 32px;
 }

-/*
+/*
  Definitions for utilities and helper classes.
 */
 .hidden {
@@ -2276,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
--- a/dist/mini-pwa.min.css
+++ b/dist/mini-pwa.min.css
--- a/dist/mini-sucroa.css
+++ b/dist/mini-sucroa.css
@@ -3,11 +3,11 @@
  Flavor name: Sucroa (mini-sucroa)
  Author: Angeliki Daskalakis
  Maintainers: Angeliki Daskalakis, Angelos Chalaris (chalarangelo@gmail.com)
-  mini.css version: v2.3.1
+  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");
 /*
-	Browsers resets and base typography.
+  Browsers resets and base typography.
 */
 html {
  font-size: 16px;
@@ -213,7 +213,7 @@ figcaption {
 }

 /*
-	Definitions for the grid system.
+  Definitions for the grid system.
 */
 .container {
  margin: 0 auto;
@@ -686,7 +686,7 @@ figcaption {
 }

 /*
-	Definitions for forms and input elements.
+  Definitions for forms and input elements.
 */
 form {
  background: #e8deff;
@@ -824,18 +824,26 @@ input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly], t
  border-color: #a9a2ba;
 }

-select {
+select:not([multiple]):not([size]) {
  padding-right: 20px;
-  background-image: 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>'), url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" style="background:%23f2edff"/>');
-  background-position: right, left;
-  background-repeat: no-repeat, repeat;
-  -moz-appearance: none;
+  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;
  -webkit-appearance: none;
+  -moz-appearance: none;
  appearance: none;
 }

-select[readonly] {
-  background-image: 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>'), url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" style="background:%23eae1ff"/>');
+select:not([multiple]):not([size])[readonly] {
+  background-color: #eae1ff;
+}
+
+select {
+  max-width: 100%;
+}
+
+option {
+  overflow: hidden;
+  text-overflow: ellipsis;
 }

 ::-webkit-input-placeholder {
@@ -971,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;
 }
@@ -978,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;
@@ -1019,7 +1028,7 @@ input[type="file"] {
  background: #211423;
  content: '';
  margin-left: -20px;
-  bottom: 7px;
+  top: 7px;
  left: 4px;
  width: 10px;
  height: 10px;
@@ -1093,7 +1102,7 @@ button.large, [type="button"].large, [type="submit"].large,
 }

 /*
-	Definitions for navigation elements.
+  Definitions for navigation elements.
 */
 header {
  display: block;
@@ -1267,7 +1276,7 @@ footer.sticky {
 }

 /*
-	Definitions for the responsive table component.
+  Definitions for the responsive table component.
 */
 table {
  border-collapse: separate;
@@ -1341,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);
@@ -1363,7 +1373,7 @@ table.striped tr:nth-of-type(2n) > td {
 }

 /*
-	Definitions for cards and containers.
+  Definitions for cards and containers.
 */
 .card {
  display: -webkit-box;
@@ -1475,7 +1485,7 @@ table.striped tr:nth-of-type(2n) > td {
 }

 /*
-	Definitions for tabs/horizontal accordions.
+  Definitions for tabs/horizontal accordions.
 */
 .tabs {
  width: 100%;
@@ -1664,7 +1674,7 @@ table.striped tr:nth-of-type(2n) > td {
  }
 }

-/*
+/*
  Definitions for contextual background elements, toasts and tooltips.
 */
 mark {
@@ -1792,7 +1802,7 @@ mark.inline-block {
  padding: 18px 36px;
 }

-/*
+/*
  Definitions for progress elements and spinners.
 */
 progress {
@@ -1914,7 +1924,7 @@ progress.tertiary::-moz-progress-bar {
  height: 32px;
 }

-/*
+/*
  Definitions for utilities and helper classes.
 */
 .hidden {
--- 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.1/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>
@@ -92,6 +92,15 @@
              <p><strong>Size:</strong> 7 KB</p>
            </div>
          </li>
+          <li class="card fluid">
+            <h2 class="section double-padded">Progressive Web App <a href="http://codepen.io/chalarangelo/pen/KqEOjy" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a><small>mini-pwa</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-pwa.min.css&quot;</span>&gt;</pre>
+            <p class="section double-padded" style="text-align:justify">The Progressive Web App flavor follows the <a href="https://material.io/">Google Material Design Guidelines</a> and targets mobile devices and especially those based on the Android operating system. It uses mostly the default naming conventions (<code>.primary</code> etc.). The grid system has 12 columns and most components use rounded corners with soft shadows. To make the flavor lighter, button groups, horizontal and vertical tables, certain card styles, the entirety of the progress and tab modules, along with tooltips, navigation bars, modals and most style variants are not included. Finally, the card module's <code>.dark</code> class has been replaced by the <code>.accent</code> class.</p>
+            <div class="section double-padded">
+              <p><strong>Author:</strong> <a href="https://github.com/Chalarangelo">Chalarangelo</a></p>
+              <p><strong>Size:</strong> 5 KB</p>
+            </div>
+          </li>
        </ul>
        <p style="text-align:justify">If you would rather modify one of the pre-defined flavors or create your own, check out our <a href="customization">customization</a> page for instructions.</p>
        </div>
--- 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.1/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>
@@ -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>
--- a/docs/input_control.html
+++ b/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>
--- a/docs/mini-default.min.css
+++ b/docs/mini-default.min.css
--- a/docs/progress.html
+++ b/docs/progress.html
@@ -101,7 +101,7 @@
        </div>
      </div>
      <div class="row" id="basic-progress-bar">
-        <div class="col-sm-121">
+        <div class="col-sm-12">
          <div class="card fluid">
            <div class="section"><h2>Basic progress bar</h2></div>
            <div class="section row">
--- 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.1/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/templates.html
+++ b/docs/templates.html
@@ -47,7 +47,7 @@
 					<li class="card fluid" style="margin-bottom: 3rem;">
 						<a href="https://codepen.io/chalarangelo/project/editor/DzvxKa/" class="section media" style="height:480px; -o-object-fit: scale-down; object-fit:scale-down; text-align: center;"><img  src="project_thumbnail.png" style="height:480px; -o-object-fit: scale-down; object-fit:scale-down;"></a>
 						<h2 class="section double-padded">Full website template</h2>
-						<p class="section double-padded" style="text-align: justify;">A complete sample website created using the grid system of <strong>mini.css</strong>, cards, navigational elements and input contrls. The website consists of three pages, each showcasing different modules and patterns. The homepage and blog post showcase the typography styling and emphasize the importance of the grid system and the card module, while the contact form showcases the forms, buttons and other input controls. The sample website is fully responsive, changing layout based on screen size, while all of the code is carefully documented, implementing certain patterns and tricks that can be very useful when designing a website.</p>
+						<p class="section double-padded" style="text-align: justify;">A complete sample website created using the grid system of <strong>mini.css</strong>, cards, navigational elements and input controls. The website consists of three pages, each showcasing different modules and patterns. The homepage and blog post showcase the typography styling and emphasize the importance of the grid system and the card module, while the contact form showcases the forms, buttons and other input controls. The sample website is fully responsive, changing layout based on screen size, while all of the code is carefully documented, implementing certain patterns and tricks that can be very useful when designing a website.</p>
          </li>
          <li class="card fluid" style="margin-bottom: 3rem;">
 						<p data-height="480" data-theme-id="0" data-slug-hash="WpPqaj" data-default-tab="result" data-user="chalarangelo" data-embed-version="2" data-pen-title="Single Column Template (mini.css)" data-preview="true" class="codepen section">See the Pen <a href="http://codepen.io/chalarangelo/pen/WpPqaj/">Single Column Template (mini.css)</a> by Angelos Chalaris (<a href="http://codepen.io/chalarangelo">@chalarangelo</a>) on <a href="http://codepen.io">CodePen</a>.</p>
@@ -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>
--- a/docs/v2/DEVLOG.md
+++ b/docs/v2/DEVLOG.md
@@ -1266,3 +1266,64 @@
 - Used `svg` tricks to resolve the `select` issue, file size is now `6.90KB` gzipped, which is just below the maximum limit of the framework.
 - Updated flavor files and source code to use spaces instead of tabs. Should now look better on Github.
 - Released update to deal with bugs.
+
+# v2.3.2 Development Log
+
+## 20170629
+
+- Added `$apply-select-fix` to the `input_control` module, disabled the fix for `mini-lite` to make the flavor lighter.
+- Updated `select` styles to utilize some smart tricks, reducing size by a sliver (about `0.03KB` less when gzipped).
+- Released the **v2.3.2** hotfix.
+
+# v2.3.3 Development Log
+
+## 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.
+
+## 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.1",
+  "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.1
+  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.1
+  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.1
+  mini.css version: v2.3.7
 */
 //  Basic rules for body and typography
 $fore-color:            #212121;                  // Text and general foreground color
@@ -172,7 +172,7 @@ $input-disabled-opacity:      0.75;                // Opacity for disabled input
 $input-readonly-back-color:   #e5e5e5;             // Background color for readonly input
 $input-readonly-border-color: #c9c9c9;             // Border color for readonly input
 $input-placeholder-fore-color:#616161;             // Text color for input placeholder
-$select-padding-right:   1.5rem;                   // Right padding for select element
+$apply-select-fix:       false;                    // [Hidden flag override] Should the styles that fix <select> styling be applied? (`true`/`false`)
 $button-back-color:      #dcdcdc;                  // Back color for button elements
 $button-back-opacity:    0.75;                     // Background opacity for button elements
 $button-hover-back-opacity: 1;                     // Background opacity for button elements on hover or focus
--- 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.1
+  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
@@ -0,0 +1,468 @@
+//  This is a flavor file. Duplicate it and edit it to create your own flavor. Read instructions carefully.
+//  Single-line comments, starting with '//' will not be included in your final CSS file. Multiline comments,
+//  structured like the flavor description below, will be included in your final CSS file.
+//  Note: This flavor is not a full flavor, we strongly recommend you duplicate the mini-default flavor instead
+//  of this file, unless you know what you are doing.
+/*
+  Flavor name: Progressive Web App (mini-pw)
+  Author: Angelos Chalaris (chalarangelo@gmail.com)
+  Maintainers: Angelos Chalaris
+  mini.css version: v2.3.7
+*/
+//  Basic rules for body and typography
+$fore-color:            #212121;                  // Text and general foreground color
+$back-color:            #eeeeee;                  // Body background color
+$base-font-family:                                // Default font stack for all elements:
+  '-apple-system, BlinkMacSystemFont,\"Segoe UI\",\"Roboto\", \"Droid Sans\",\"Helvetica Neue\", Helvetica, Arial, sans-serif';
+// OS X and iOS system fonts (San Francisco) -> Windows system fonts -> Android system fonts (newer and older) -> Fallback fonts
+$base-root-font-size:   16px;                     // Root font sizing for all elements [1]
+$_1px:  (1px/$base-root-font-size) * 1rem;        // Calculated rem value of 1px [1]
+$base-font-size:        1rem;                     // Default font sizing for all elements [2]
+$base-line-height:      1.5;                      // Default line height for all elements.
+$use-fluid-typography:  false;                    // Should fluid typography be used at the root element? (`true`/`false`)
+$body-margin:           0;                        // Margin for the body
+$apply-defaults-to-all: true;                     // Should default values be applied to all elements? (`true` or `false`) [3]
+$h1-font-size:          2.4375rem;                // Font size of h1
+$h2-font-size:          1.935rem;                  // Font size for h2
+$h3-font-size:          1.5625rem;                // Font size for h3
+$h4-font-size:          1.25rem;                   // Font size for h4
+$h5-font-size:          1rem;                     // Font size for h5
+$h6-font-size:          0.8125rem;                // Font size for h6
+$heading-line-height:   1.25em;                   // Line height for all headings
+$heading-margin:        0.75rem 0.5rem;           // Margin for all headings
+$heading-font-weight:   500;                      // Font weight for all headings
+$heading-smalltext-fore-color:  #424242;          // <small> color in headings
+$make-heading-smalltext-block:  true;             // Should <small> elements in headings be displayed as blocks (`true`/`false`) [4]
+$heading-smalltext-b-font-size:  0.75em;          // Font size of block <small> elements in headings
+$heading-smalltext-b-top-margin:-0.25em;          // Top margin of block <small> elements in headings
+$paragraph-margin:       0.5rem;                  // Margin for <p> elements
+$list-margin:            0.5rem;                  // Margin for <ol> and <ul> elements
+$list-left-padding:      1.25rem;                 // Left padding for <ol> and <ul> elements
+$bold-font-weight:       600;                     // Font weight for <b> and <strong>
+$horizontal-rule-line-height:  1.25em;            // <hr> line height
+$horizontal-rule-margin:       0.5rem;            // <hr> margin
+$horizontal-rule-border-style: $_1px solid #757575; // Border style for horizontal rules (used in the <hr> element's border-top)
+$horizontal-rule-fancy-style:  false;             // Should a fancy styling be applied for the <hr> element (`true`/`false`) [5]
+$blockquote-back-color:      #e0e0e0;             // Background color for <blockquote>
+$blockquote-fore-color:      $fore-color;         // Text color for <blockquote>
+$blockquote-margin:          0.5rem;              // Margin for <blockquote>
+$blockquote-padding:         0.5rem 0.5rem 1.5rem;// Padding for <blockquote>
+$blockquote-sidebar-style:   4*$_1px solid #3f51b5;// Style for the sidebar of <blockquote>
+$blockquote-cite-font-size:  0.875rem;            // Font size for citation of <blockquote>
+$blockquote-cite-fore-color:       #616161;       // Text color for citation of <blockquote>
+$blockquote-cite-left-position:    0.625rem;      // Left padding for citation of <blockquote>
+$blockquote-cite-bottom-position:  0;             // Bottom padding for citation of <blockquote>
+$blockquote-border-style:          0;             // Border style for <blockquote>
+$blockquote-border-radius: 0 3*$_1px 3*$_1px 0;   // Border radius for <blockquote>
+$blockquote-box-shadow:                           // Box shadow for <blockquote>
+  0 2*$_1px 2*$_1px 0 rgba(0, 0, 0, 0.14), 0 1*$_1px 5*$_1px 0 rgba(0, 0, 0, 0.12), 0 3*$_1px 1*$_1px -2*$_1px rgba(0, 0, 0, 0.2);
+$use-default-code-fonts:       true;              // Should default font choice (monospace) be used for code elements? (`true`/`false`) [6]
+$code-element-padding:         0.125rem 0.25rem;  // Padding for <code>
+$code-element-fore-color:      $fore-color;       // Text color for <code>
+$code-element-back-color:      #e0e0e0;           // Background color for <code>
+$code-element-border-style:    0;                 // Border style for <code>
+$code-element-border-radius:   2*$_1px;           // Border radius for <code>
+$code-element-box-shadow:                         // Box shadow for <code>
+  0 2*$_1px 2*$_1px 0 rgba(0, 0, 0, 0.14), 0 1*$_1px 5*$_1px 0 rgba(0, 0, 0, 0.12), 0 3*$_1px 1*$_1px -2*$_1px rgba(0, 0, 0, 0.2);
+$pre-element-padding:          0.75rem;           // Padding for <pre>
+$pre-element-fore-color:  $code-element-fore-color; // Text color for <pre>
+$pre-element-back-color:  $code-element-back-color; // Background color for <pre>
+$pre-element-border-style:    0;                  // Border style for <pre>
+$pre-element-border-radius:   0 3*$_1px 3*$_1px 0;// Border radius for <pre>
+$pre-element-margin:          0.5rem;             // Margin for <pre>
+$pre-element-box-shadow:                          // Box shadow for <pre>
+  0 2*$_1px 2*$_1px 0 rgba(0, 0, 0, 0.14), 0 1*$_1px 5*$_1px 0 rgba(0, 0, 0, 0.12), 0 3*$_1px 1*$_1px -2*$_1px rgba(0, 0, 0, 0.2);
+$add-pre-element-sidebar:     true;               // Should a fancy sidebar be added to the left side of <pre> (`true`/`false`) [7]
+$pre-element-sidebar-style:   4*$_1px solid #303f9f;// Style of the sidebar of <pre>
+$kbd-element-padding:         $code-element-padding; // Padding for <kbd>
+$kbd-element-fore-color:      #fafafa;            // Text color for <kbd>
+$kbd-element-back-color:      #212121;            // Background color for <kbd>
+$kbd-element-border-style:    0;                  // Border style for <kbd>
+$kbd-element-border-radius:  $code-element-border-radius; // Border radius for <kbd>
+$kbd-element-box-shadow:  $code-element-box-shadow; // Box shadow for <kbd>
+$style-samp-element:      false;                  // Should styles for <samp> be included? (`true`/`false`) [8]
+$include-dfn-fix:      true;                      // Should the fix for Android 4.3 concerning <dfn> be included (`true`/`false`) [9]
+$small-font-size:      0.75em;                    // Font size for <small> elements
+$sup-font-size:        0.75em;                    // Font size for <sup> elements
+$sub-font-size:        0.75em;                    // Font size for <sub> elements
+$sup-top:              -0.5em;                    // <sup> top
+$sub-bottom:           -0.25em;                   // <sub> bottom
+$link-fore-color:          #3f51b5;               // Text color for <a>
+$link-visited-fore-color:  #3f51b5;               // Text color for visited <a>
+$link-font-weight:         500;                   // Font weight for <a>
+$apply-link-underline:     true;                  // Should an underline be applied to all <a> elements? (`true`/`false`) [10]
+$apply-link-hover-fade:    true;                  // Should the :hover and :focus state of <a> elements use fade-out instead of a different color (`true`/`false`) [11]
+$figcaption-font-size:     0.8125rem;             // Font size of <figcaption> elements
+$figcaption-fore-color:    #424242;               // Text color for <figcaption> elements
+//  Notes:
+// [1] - The value $base-root-font-size should be in `px` only! This rule is very important, as it will determine the root
+//  element's font sizing. The value of $_1px is calculated based on the value of $base-root-font-size, please do not alter
+//   the way that it's calculated.
+// [2] - The value of $base-font-size will only be used if the value of $apply-defaults-to-all is set to `true` (see [3]).
+//  This is due to the fact that applying the value of it on the root element again will overwrite the value of
+//  $base-root-font-size (see [1]). The value of this variable should be set in either `em` or `rem`.
+// [3] - It is recommended to set the value of $apply-defaults-to-all to `true`, unless you want to apply extra styling
+//  to elements manually.
+// [4] - If the value of $make-heading-smalltext-block is `true` the <small> elements in headings will be displayed below
+//  the main heading and the 2 values specified below will apply.
+// [5] - If $horizontal-rule-fancy-style is set to `true` the value of $horizontal-rule-border-style will not be used and
+//  a gradient with the style specified in $horizontal-rule-fancy-gradient will be applied instead.
+// [6] - If the value of $use-default-code-fonts is set to `false` the value of $code-font-family will be used. `true`
+//  will apply the proper fix to use monospace font without any problems on all browsers.
+// [7] - if the value of $add-pre-element-sidebar is set to true, the style specified in $pre-element-sidebar-style will
+//  be applied as a left border for the <pre> elements.
+// [8] - If the value of $style-samp-element is set to `false`, no styling will be included in the final CSS file for
+//  `samp` elements. Otherwise, the styling defined in the $samp-... variables will be applied.
+// [9] - If the value of $include-dfn-fix is set to `true` a styling fix will be applied, so that the <dfn> elements are
+//  displayed properly on older versions of Android (4.3-) in italics. Otherwise, said fix will not be included.
+// [10] - If the value of $apply-link-underline is set to `true`, an underline will be applied to the link in its normal
+//  color, as defined in $link-fore-color.
+// [11] - If `$apply-link-hover-fade` is set to `true`, a fading transition will be used for the link when hovered over or
+//  focused. Otherwise, the color specified in $link-hover-fore-color will be used.
+//  Variables for grid elements
+$use-four-step-grid:           false;             // Should the old 4-step grid system be used instead of the new (`true`/`false`) [1]
+$include-parent-layout:        true;              // Should the classes for rows defining the column layout of children be included (`true`/`false`) [2]
+$grid-container-name:          'container';       // Class name for the grid container
+$grid-container-side-padding:  0.75rem;           // Padding for the grid container (left and right only)
+$grid-row-name:                'row';             // Class name for the grid's rows
+$grid-row-parent-layout-prefix:'cols';            // Class name prefix for the grid's row parents [2]
+$grid-column-prefix:           'col';             // Class name prefix for the grid's columns
+$grid-column-offset-suffix:    'offset';          // Class name suffix for the grid's offsets
+$grid-order-normal-suffix:     'normal';          // Class name suffix for grid columns with normal priority
+$grid-order-first-suffix:      'first';           // Class name suffix for grid columns with highest priority
+$grid-order-last-suffix:       'last';            // Class name suffix for grid columns with lowest priorty
+$grid-column-count:            12;                // Number of columns in the grid (integer value only)
+$grid-column-padding:          0 0.25rem;         // Padding for the columns of the grid
+$grid-small-prefix:            'sm';              // Small screen class prefix for grid
+$grid-medium-breakpoint:        768px;            // Medium screen breakpoint for grid
+$grid-medium-prefix:           'md';              // Medium screen class prefix for grid
+$grid-large-breakpoint:        1280px;            // Large screen breakpoint for grid
+$grid-large-prefix:            'lg';              // Large screen class prefix for grid
+//  Notes:
+// [1] - If the value of $use-four-step-grid is `true`, the grid system will contain 4 breakpoints instead of 3, along with
+//  the needed styles. In this case, values should be specified for $grid-extra-small-prefix and $grid-small-breakpoint.
+// [2] - If the value of $include-parent-layout is `true`, the grid system will contain extra classes that will define the column
+//  layout of their children. In this case, a value should be specified for $grid-row-parent-layout-prefix.
+//  Variables for forms and inputs
+$form-back-color:        #eeeeee;                  // Background color for forms
+$form-fore-color:        $fore-color;              // Text color for forms
+$form-border-style:      $_1px solid #bdbdbd;      // Border style for forms
+$form-border-radius:     3*$_1px;                  // Border radius for forms
+$form-margin:            0.5rem;                   // Margin for forms
+$form-padding:           0.75rem 0.5rem 1.125rem;  // Padding for forms
+$form-box-shadow:                                  // Box shadow for forms
+  0 2*$_1px 2*$_1px 0 rgba(0, 0, 0, 0.14), 0 1*$_1px 5*$_1px 0 rgba(0, 0, 0, 0.12), 0 3*$_1px 1*$_1px -2*$_1px rgba(0, 0, 0, 0.2);
+$fieldset-back-color:    $form-back-color;         // Background color for fieldset
+$fieldset-border-style:  $_1px solid #e0e0e0;      // Border style for fieldset
+$fieldset-border-radius: 2*$_1px;                  // Border radius for fieldset
+$fieldset-margin:        0.125rem;                 // Margin for fieldset
+$fieldset-padding:       0.5rem;                   // Padding for fieldset
+$legend-font-weight:     600;                      // Font weight for legend
+$legend-font-size:       0.875rem;                 // Font size for legend
+$legend-fore-color:      $form-fore-color;         // Text color for legend
+$legend-padding:         0.125rem 0.25rem;         // Padding for legend
+$label-padding:          0.25rem 0.5rem;           // Padding for label
+$input-group-name:       'input-group';            // Class for input groups
+$include-fluid-input-group:    false;              // Should fluid input grooups be included? (`true`/`false`) [1]
+$include-vertical-input-group: true;               // Should vertical input grooups be included? (`true`/`false`) [1]
+$input-back-color:      #fafafa;                   // Background for input
+$input-fore-color:      $fore-color;               // Text color for input
+$input-border-style:    $_1px solid #bdbdbd;       // Border style for input
+$input-border-radius:   2*$_1px;                   // Border radius for input
+$input-margin:          0.25rem;                   // Margin for input
+$input-padding:         0.5rem 0.75rem;            // Padding for input
+$input-focus-border-color:    #0288d1;             // Border color for focused input
+$input-invalid-border-color:  #d32f2f;             // Border color for invalid input
+$input-disabled-opacity:      0.75;                // Opacity for disabled input
+$input-readonly-back-color:   #e0e0e0;             // Background color for readonly input
+$input-readonly-border-color: #bdbdbd;             // Border color for readonly input
+$input-placeholder-fore-color:#616161;             // Text color for input placeholder
+$apply-select-fix:       false;                    // [Hidden flag override] Should the styles that fix <select> styling be applied? (`true`/`false`)
+$button-back-color:      #e0e0e0;                  // Back color for button elements
+$button-back-opacity:    1;                        // Background opacity for button elements
+$button-hover-back-opacity: 1;                     // Background opacity for button elements on hover or focus
+$button-fore-color:      $fore-color;              // Text color for button elements
+$button-border-style:    0;                        // Border style for button elements
+$button-border-radius:   3*$_1px;                  // Border radius for button elements
+$button-padding:         0.625rem 0.875rem;        // Padding for button elements
+$button-margin:          0.5rem;                   // Margin for button elements
+$button-box-shadow:                                // Box shadow for buttons
+  0 2*$_1px 2*$_1px 0 rgba(0, 0, 0, 0.14), 0 1*$_1px 5*$_1px 0 rgba(0, 0, 0, 0.12), 0 3*$_1px 1*$_1px -2*$_1px rgba(0, 0, 0, 0.2);
+$button-disabled-opacity:0.75;                     // Disabled button elements opacity
+$button-class-name:      'button';                 // Class for custom button elements
+$include-button-group:   false;                    // [Hidden flag override] Should button groups be enabled? (`true`/`false`) [2]
+$hide-file-inputs:                      true;      // Should a style be added that makes all <input>s of type `file` hidden? (`true`/`false`) [3]
+$button-variant1-name:                  'primary'; // Class name for button variant 1
+$button-variant1-back-color:            #303f9f;   // Background color for button variant 1
+$button-variant1-back-opacity:          1;         // Background opacity for button variant 1
+$button-variant1-hover-back-opacity:    1;         // Background opacity for button variant 1 on hover or focus
+$button-variant1-fore-color:            #fafafa;   // Text color for button variant 1
+$checkbox-size:                  1rem;             // Size for checkbox/radio [4]
+$checkbox-back-color:            $input-back-color;// Background clor for checkbox/radio
+$checkbox-fore-color:            $input-fore-color;// Text/mark color for checkbox/radio
+$checkbox-border-thickness:      $_1px;            // Border thickness for checkbox/radio
+$checkbox-border-color:          #bdbdbd;          // Border color for checkbox/radio
+$checkbox-border-radius:      $input-border-radius;// Border radius for checkbox/radio
+$checkbox-focus-border-color: $input-focus-border-color;// Border color for checkbox/radio on focus
+$checkbox-bottom-spacing:        0.375rem;         // Bottom spacing for checkbox/radio
+$checkbox-disabled-opacity:  $input-disabled-opacity;// Opacity for disabled checkbox/radio
+$checkbox-box-shadow:            none;             // Box shadow for checkbox/radio
+$include-switch:                 false;            // Should switch components be included? (`true`/`false`) [5]
+//   Notes:
+// [1] - If the value of $include-fluid-input-group is `true`, fluid input groups will be included, using the values
+//  specified in the corresponding variables. The same applies for $include-vertical-input-group and vertical input groups.
+// [2] - Due to the fact that the value of $include-button-group is set to `false`, no button group styles will be created.
+//  If you wish to enable them, please refer to a full flavor for the required variables.
+// [3] - If the value of $hide-file-inputs is `true`, all <input type="file"> elements will be hidden and the only way
+//   to access them is via the use of <label> elements that are linked to them. This option is enabled by default to
+//  allow for universal button styles, even for file input buttons, but can be disabled if the base style is desired.
+//  If the value is `false`, some fixes will be applied to the <input type="file"> element.
+// [4] - The value of $checkbox-size will determine a few variables like some `margin` values, `height`, `width` etc.
+//  Variables for navigational elements
+// [5]  - Due to the fact that the value of $include-switch is set to `false`, no switch styles will be created.
+//  If you wish to enable them, please refer to a full flavor for the required variables.
+$header-height:            3rem;                   // Height for <header>
+$header-back-color:        #283593;                // Background color for <header>
+$header-fore-color:        #fafafa;                // Text color for <header>
+$header-border-style:      0;                      // Border style for <header>
+$header-margin:            0;                      // Margin for <header>
+$header-padding:           0.25rem 0.75rem;        // Padding for <header>
+$header-box-shadow:                                // Box shadow for <header>
+  0 2*$_1px 2*$_1px 0 rgba(0, 0, 0, 0.14), 0 1*$_1px 5*$_1px 0 rgba(0, 0, 0, 0.12), 0 3*$_1px 1*$_1px -2*$_1px rgba(0, 0, 0, 0.2);
+$header-logo-name:         'logo';                 // Class name for <header>'s logo
+$header-logo-font-size:    1.75rem;                // Font size for <header>'s logo
+$header-logo-line-height:  1.3125em;               // Line height for <header>'s logo
+$header-logo-margin:       0.0625rem 0.375rem 0.0625rem 0.0625rem; // Margin for <header>'s logo
+$header-logo-padding:      0;                      // Padding for <header>'s logo
+$header-link-hover-color:  #303f9f;                // Hover color for <header>'s links
+$header-link-margin:       0.125rem 0;             // Margin for <header>'s links
+$include-header-sticky:    true;                   // Should sticky <header> elements be included? (`true`/`false`) [1]
+$header-sticky-name:       'sticky';               // Class name for sticky <header>
+$include-nav-styles:       false;                  // [Hidden flag override] Should <nav> elements by stylized? (`true`/`false`) [2]
+$drawer-name:              'drawer';               // Class name for the drawer component
+$drawer-back-color:        #f5f5f5;                // Background color of the drawer component
+$drawer-border-style:      1px solid #bdbdbd;      // Border style of the drawer component
+$drawer-border-radius:     0;                      // Border radius of the drawer component
+$drawer-width:             320px;                  // Width of the drawer component
+$drawer-padding:           0;                      // Padding of the drawer component
+$drawer-box-shadow:                                // Box shadow for the drawer component
+  0 2*$_1px 2*$_1px 0 rgba(0, 0, 0, 0.14), 0 1*$_1px 5*$_1px 0 rgba(0, 0, 0, 0.12), 0 3*$_1px 1*$_1px -2*$_1px rgba(0, 0, 0, 0.2);
+$drawer-mobile-breakpoint: 768px;                  // Mobile breakpoint for the drawer component
+$drawer-normal-height:     calc(100vh - 3rem);     // Height of the drawer component when shown as normal menu
+$drawer-right-name:        'right';                // Class name for the right variant of the drawer component
+$drawer-persistent-name:   'drawer';               // Class name for the persisten variant of the drawer component
+$drawer-toggle-name:       'drawer-toggle';        // Class name for the drawer component's toggle
+$drawer-toggle-font-size:  2.5rem;                 // Font size for the drawer component's toggle icon
+$drawer-toggle-line-height:0.125;                  // Line height for the drawer component's toggle icon
+$drawer-toggle-top:        0.4375rem;              // Top position for the drawer component's toggle icon
+$drawer-close-name:        'close';                // Class name of the close element for the drawer component
+$drawer-close-top:         0.75rem;                // Top position of the drawer component's close icon
+$drawer-close-right:       0.25rem;                // Right position of the drawer component's close icon
+$footer-back-color:        #283593;                // Background color for <footer>
+$footer-fore-color:        #fafafa;                // Text color for <footer>
+$footer-border-style:      0;                      // Border stye for <footer>
+$footer-font-size:         0.875rem;               // Font size for <footer>
+$footer-margin:            1rem 0 0;               // Margin for <footer>
+$footer-padding:           1.5rem 0.5rem 0.75rem;  // Padding for <footer>
+$footer-link-fore-color:   #f5f5f5;                // Text color for links in <footer>
+$include-footer-sticky:    false;                  // Should sticky <footer> elements be included (`true`/`false`) [3]
+$footer-sticky-name:       'sticky';               // Class name for sticky <footer> elements
+//  Notes:
+// [1] - If the value of $include-header-sticky is `true`, a class will be created that will allow for sticky positioning
+//  of <header> elements, using the value of $header-sticky-name for the name of the class.
+// [2] - Due to the fact that the value of $include-nav-styles is set to `false`, <nav> elements
+//  will not be stylized. If you set it to `true`, please refer to a full flavor
+//  to find the required variable definitions.
+// [3] - If the value of $include-footer-bottom is `true`, a class will be created that will allow for sticky positioning
+//  of <footer> elements, using the value of $footer-sticky-name for the name of the class.
+//  Variables for responsive tables
+$table-border-style:      $_1px solid #bdbdbd;     // Border style for <table> and children
+$table-border-radius:     3*$_1px;                 // Border radius for <table> and children
+$table-margin:            0 auto;                  // Margin for <table>
+$table-box-shadow:                                 // Box shadow for <table>
+  0 2*$_1px 2*$_1px 0 rgba(0, 0, 0, 0.14), 0 1*$_1px 5*$_1px 0 rgba(0, 0, 0, 0.12), 0 3*$_1px 1*$_1px -2*$_1px rgba(0, 0, 0, 0.2);
+$table-caption-font-size:    1.5rem;               // Font size for <caption>
+$table-caption-margin:       0.5rem;               // Margin for <caption>
+$table-row-padding:          0.5rem;               // Padding for <tr> - both views
+$table-column-padding:       0.625rem;             // Padding for <td> and <th> - desktop view
+$table-head-back-color:      #f5f5f5;              // Background color for <th>
+$table-head-fore-color:      #424242;              // Text color for <th>
+$table-body-back-color:      #fafafa;              // Background color for <td>
+$table-body-fore-color:      $fore-color;          // Text color for <td>
+$table-mobile-breakpoint:    767px;                // Breakpoint for <table> mobile view
+$table-mobile-card-spacing:  0.625rem;             // Space between <tr> cards - mobile view
+$table-mobile-card-label:    'data-label';         // Attribute used to replace column headers in mobile view [1]
+$table-mobile-label-font-weight:$bold-font-weight; // Font weight for mobile headers
+$include-horizontal-table:    false;               // Should horizontal <table> elements be included? (`true`/`false`) [2]
+$include-scrollable-table:    false;               // Should scrollable <table> elements be included? (`true`/`false`) [2]
+$include-striped-table:        false;              // [Hidden flag override] Should striped <table> elements be included (`true`/`false`) [2]
+//  Notes:
+// [1] - The attribute specified in $table-mobile-card-label must be added manually to each and every element in the table
+//  in order for their mobile headers to display properly.
+// [2] - Due to the $include-horizontal-table, $include-scrollable-table and $include-striped-table flags being set to `false`,
+//  no styling will be provided for horizontal, scrollable and striped <table> elements. Please refer to a full fulavor to find
+//  the variables associated with these components, if you want to enable them.
+$card-name:              'card';                   // Class name for cards
+$card-back-color:        #fafafa;                  // Background color for cards
+$card-fore-color:        $fore-color;              // Text color for cards
+$card-border-style:      $_1px solid #bdbdbd;      // Border style for cards
+$card-border-radius:     3*$_1px;                  // Border radius for cards
+$card-margin:            0.5rem;                   // Margin for cards
+$card-box-shadow:                                  // Box shadow for cards
+  0 2*$_1px 2*$_1px 0 rgba(0, 0, 0, 0.14), 0 1*$_1px 5*$_1px 0 rgba(0, 0, 0, 0.12), 0 3*$_1px 1*$_1px -2*$_1px rgba(0, 0, 0, 0.2);
+$card-section-name:            'section';          // Class name for card sections
+$card-section-border-style:    $_1px solid #bdbdbd;// Border style for card sections
+$card-section-padding:         0.75rem;            // Padding for card sections
+$card-section-media-name:      'media';            // Class name for card media sections
+$card-section-media-height:    200px;              // Height for card media setions
+$card-normal-width:            320px;              // Width for normal cards
+$card-size1-name:              'fluid';            // Class name for fluid cards
+$card-size1-width:             100%;               // Width for fluid cards
+$card-section-style1-name:       'accent';         // Class name for card section style 1
+$card-section-style1-back-color: #303f9f;          // Background color for card section style 1
+$card-section-style1-border-style: $_1px solid #283593; // Border style for card section style 1
+$card-section-style1-fore-color: #fafafa;          // Text color for card section style 1
+//  Notes:
+// [1] - The cards module depends heavily on the grid system module.
+//  ---  ---  ---
+//  No variables specified for the tab module. This module is disabled by default.
+//  To re-enable it, please refer to a full flavor for variables and documentation.
+//  ---  ---  ---
+//  Variables for contextual background elements and alerts
+$mark-back-color:        #283593;                  // Background color for <mark>
+$mark-fore-color:        #fafafa;                  // Text color for <mark>
+$mark-font-size:         0.9375em;                 // Font size for <mark>
+$mark-line-height:       1em;                      // Line height for <mark>
+$mark-border-style:      0;                        // Border style for <mark>
+$mark-border-radius:     2*$_1px;                  // Border radius for <mark>
+$mark-padding:           0.25em 0.375em;           // Padding for <mark>
+$mark-margin:            0.125rem;                 // Margin for <mark>
+$mark-box-shadow:                                  // Box shadow for <mark>
+  0 2*$_1px 2*$_1px 0 rgba(0, 0, 0, 0.14), 0 1*$_1px 5*$_1px 0 rgba(0, 0, 0, 0.12), 0 3*$_1px 1*$_1px -2*$_1px rgba(0, 0, 0, 0.2);
+$mark-inline-block-name:    'inline-block';        // Class name for <mark> inline block styling
+$toast-name:                'toast';               // Class name for toast component
+$toast-bottom:              1.5rem;                // Bottom position for toasts
+$toast-back-color:          $fore-color;           // Background color for toasts
+$toast-fore-color:          #fafafa;               // Text color for toasts
+$toast-border-style:        0;                     // Border style for toasts
+$toast-border-radius:       2rem;                  // Border radius for toasts
+$toast-padding:             0.75rem 1.5rem;        // Padding for toasts
+$toast-box-shadow:                                 // Box shadow for toasts
+  0 2*$_1px 2*$_1px 0 rgba(0, 0, 0, 0.14), 0 1*$_1px 5*$_1px 0 rgba(0, 0, 0, 0.12), 0 3*$_1px 1*$_1px -2*$_1px rgba(0, 0, 0, 0.2);
+$include-tooltip:            false;                // Should tooltips be included? (`true`/`false`) [1]
+$include-modal:              false;                // Should modals be included? (`true`/`false`) [1]
+//   Notes:
+// [1] - Due to the values of $include-tooltip and $include-modal being set
+//  to `false`, no styling is provided for these elements. If you want to enable them, please
+//  refer to a full flavor file for variable definitions.
+//  ---  ---  ---
+//  No variables specified for the progress module. This module is disabled by default.
+//  To re-enable it, please refer to a full flavor for variables and documentation.
+//  ---  ---  ---
+//  Variables for utilities and helper classes
+$hidden-name:                  'hidden';           // Class name for hidden elements
+$visually-hidden-name:         'visually-hidden';  // Class name for visually hidden elements
+$include-breadcrumbs:          false;              // [Hidden flag override] Should breadcrumbs be included? (`true`/`false`) [1]
+$close-icon-name:              'close';            // Class name for close icon
+$close-icon-size:              1.5rem;             // Size of the close icon
+$close-icon-back-color:        #e0e0e0;            // Background color for the close icon
+$close-icon-fore-color:        #212121;            // Foreground color for the close icon
+//   Notes:
+// [1] - Due to the values of $include-breadcrumbs being set to `false`, this element will
+//  not be included. Refer to a full flavor file for help on how to enable them.
+@import '../mini/core';
+@import '../mini/grid';
+@import '../mini/input_control';
+/*
+  Custom elements for forms and input elements.
+*/
+@include make-button-alt-color ($button-variant1-name, $button-variant1-back-color,
+  $button-variant1-back-opacity, $button-variant1-hover-back-opacity, $button-variant1-fore-color);
+/*
+  Custom style fixes and tweaks for input elements.
+*/
+button, [type="button"], [type="submit"], [type="reset"],
+a.button, label.button, .button,
+a[role="button"], label[role="button"], [role="button"], label{
+  text-transform: uppercase;
+  font-weight: 600;
+  font-size: 0.875rem;
+}
+button:hover, button:focus, [type="button"]:hover, [type="button"]:focus, [type="submit"]:hover, [type="submit"]:focus, [type="reset"]:hover, [type="reset"]:focus,
+a.button:hover,
+a.button:focus, label.button:hover, label.button:focus, .button:hover, .button:focus,
+a[role="button"]:hover,
+a[role="button"]:focus, label[role="button"]:hover, label[role="button"]:focus, [role="button"]:hover, [role="button"]:focus {
+  background: #e5e5e5;
+  box-shadow: 0 3*$_1px 3*$_1px 0 rgba(0,0,0,0.14),0 1*$_1px 7*$_1px 0 rgba(0,0,0,0.12),0 3*$_1px 1*$_1px -1*$_1px rgba(0,0,0,0.2);
+}
+button.primary:hover, button.primary:focus, [type="button"].primary:hover, [type="button"].primary:focus, [type="submit"].primary:hover, [type="submit"].primary:focus,
+[type="reset"].primary:hover,
+[type="reset"].primary:focus, .button.primary:hover, .button.primary:focus, [role="button"].primary:hover, [role="button"].primary:focus {
+  background: #3f51b5;
+}
+@import '../mini/navigation';
+/*
+  Custom style fixes and tweaks for input elements.
+*/
+.drawer-toggle::before{
+  line-height: 0.3125;
+}
+@media screen and (min-width: 768px) {
+  .drawer-toggle:not(.drawer) {
+    display: inline-block;
+  }
+}
+.drawer {
+  button, [type="button"], [type="submit"], [type="reset"],
+  a, label:not(.close), [role="button"] {
+    display: block;
+    margin: 0;
+    background: #f5f5f5;
+    box-shadow: none;
+    border-bottom: 1px solid #bdbdbd;
+    border-radius: 0;
+    &:hover, &:focus {
+      background: #fafafa;
+      box-shadow: none;
+    }
+  }
+}
+@import '../mini/table';
+/*
+  Custom style fixes and tweaks for table elements.
+*/
+th, table:not(.preset) td:before {
+  text-transform: uppercase;
+  font-weight: 500;
+}
+table:not(.preset) td:before {
+  font-weight: 600;
+  color: #424242;
+}
+th, td {
+  font-size: 0.75rem;
+}
+@import '../mini/card';
+/*
+  Custom elements for cards and containers.
+*/
+@include make-card-alt-size ($card-size1-name, $card-size1-width);
+@include make-card-section-alt-color ($card-section-style1-name, $card-section-style1-back-color,
+  $card-section-style1-fore-color, $card-section-style1-border-style);
+//  ---  ---  ---
+// Tab module is disabled for this flavor.
+// @import '../mini/tab';
+//  ---  ---  ---
+@import '../mini/contextual';
+/*
+  Custom style fixes and tweaks for contextual elements.
+*/
+.toast {
+  font-size: 0.875rem;
+}
+//  ---  ---  ---
+// Progress module is disabled for this flavor.
+// @import '../mini/progress';
+//  ---  ---  ---
+@import '../mini/utility';
--- 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.1
+  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
@@ -10,6 +10,7 @@ $input-group-vertical-name:   'vertical' !default;    // Class name for vertical
 $button-class-name:           'button' !default;      // Class for custom button elements.
 $include-button-group:        true !default;          // [Hidden flag] Should button groups be enabled? (`true`/`false`)
 $button-group-name:           'button-group' !default;// Class for button groups.
+$apply-select-fix:            true !default;          // [Hidden flag] Should the styles that fix <select> styling be applied? (`true`/`false`)
 // The below option will use the legacy high specificity selectors for <input> element styling instead
 // of the less specific, yet less complicated and less bloated input selector. This only applies to
 // the pseudo-classes and states of the <input> controls and not the default styling of them.
@@ -49,12 +50,12 @@ $style-link-active-state: false !default;             // [External flag - core]
  $_input_fore_color: str-replace(#{$input-fore-color}, '#', '%23'); // Make sure it's all encoded properly
  @return 'data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1.5"><path fill="'+$_input_fore_color+'" d="M.25.75h.5L.5 1"/></svg>';
 }
-// Generate the rest of the background for the select element
+// [Obsolete as of v2.3.2] Generate the rest of the background for the select element
@function selectBackground() {
  $_input_back_color: str-replace(#{$input-back-color}, '#', '%23'); // Make sure it's all encoded properly
  @return 'data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" style="background:'+$_input-back-color+'"/>';
 }
-// Generate the rest of the background for the select element when readonly
+// [Obsolete as of v2.3.2] Generate the rest of the background for the select element when readonly
@function selectReadonlyBackground() {
  $_input-readonly-back-color: str-replace(#{$input-readonly-back-color}, '#', '%23'); // Make sure it's all encoded properly
  @return 'data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" style="background:'+$_input-readonly-back-color+'"/>';
@@ -266,18 +267,27 @@ input:not([type]), [type="text"], [type="email"], [type="number"], [type="search
  }
 }
 // Correct background styling in Safari
-select {
-  padding-right: $select-padding-right;
-  background-image: url(selectArrow()), url(selectBackground());
-  background-position: right, left;
-  background-repeat: no-repeat, repeat;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  appearance: none;
-  &[readonly]{
-    background-image: url(selectArrow()), url(selectReadonlyBackground());
+@if $apply-select-fix {
+  select:not([multiple]):not([size]) {
+    padding-right: $select-padding-right;
+    background: url(selectArrow()) no-repeat right;
+    background-color: $input-back-color;
+    -webkit-appearance: none;
+       -moz-appearance: none;
+            appearance: none;
+    &[readonly]{
+      background-color: $input-readonly-back-color;
+    }
  }
 }
+// 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;
@@ -491,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));
@@ -503,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;
@@ -558,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;
@@ -581,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;
@@ -619,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 {
@@ -650,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/_navigation.scss
+++ b/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;
  }
--- 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});
Author	SHA1	Message	Date
Angelos Chalaris	0c860ab60a	2.3.7	2017-10-23 14:03:40 +03:00
Angelos Chalaris	6d9db9e1c0	2.3.6	2017-10-23 14:03:09 +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	e28f291531	Resolves #104 Bug found and fixed. Should work as expected now.	2017-10-19 12:19:32 +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
Angelos Chalaris	930b613d29	2.3.4	2017-08-16 14:51:12 +03:00
Angelos Chalaris	099e6da216	Minor bug fixes and documentation updates Fixed a bug in header, added some more specificity to select selectors and updated documentation to include more links and other things.	2017-08-16 14:50:16 +03:00
Angelos Chalaris	e8cb973bde	2.3.3 Release	2017-07-15 23:01:07 +03:00
Angelos Chalaris	b36daa59fd	Added PWA flavor Added a flavor targeting Android and mobile devices in general.	2017-07-15 22:58:33 +03:00
Angelos Chalaris	f95f90a28d	2.3.2 Release Releasing the update.	2017-06-29 14:55:21 +03:00
Angelos Chalaris	9e7f555b80	Merge remote-tracking branch 'origin/master'	2017-06-29 14:54:45 +03:00
Angelos Chalaris	449862dc26	Updated select styling Cleanup in the code, making it take up less space, added condition to disable.	2017-06-29 14:54:31 +03:00
Angelos Chalaris	0ed75ca8ef	Fixed a typo that messed up the layout See #85	2017-06-22 16:41:03 +03:00
Angelos Chalaris	8a01c3198d	Merge pull request #84 from oliver-daniel/patch-1 Fix minor typo	2017-06-21 22:27:13 +03:00
Oliver Daniel	098174f5fe	Fix minor typo Just noticed a little typo on the site. If this is not the appropriate way to note this/fix it, I apologize. Cheers!	2017-06-21 15:21:37 -04:00
Angelos Chalaris	6b673fd528	Create CONTRIBUTING.md	2017-06-19 16:07:05 +03:00
Angelos Chalaris	7392730c2b	Create CODE_OF_CONDUCT.md	2017-06-19 15:57:05 +03:00