Updated fixes provided by wad3g

Also started updating codebase to spaces from tabs. Shouldn't be long until it's all ready and clean.

dist/mini-dark.css

@@ -3,7 +3,7 @@
 	Flavor name: Dark (mini-dark)
 	Author: Angelos Chalaris (chalarangelo@gmail.com)
 	Maintainers: Angelos Chalaris
-	mini.css version: v2.3.0
+	mini.css version: v2.3.1
 */
 /*
 	Browsers resets and base typography.
@@ -731,8 +731,8 @@ label {
   max-width: 100%;
   -webkit-flex-grow: 1;
   flex-grow: 1;
-  -webkit-flex-basis: 0;
-  flex-basis: 0;
+  -webkit-flex-basis: 0px;
+  flex-basis: 0px;
 }
 
 @media screen and (max-width: 767px) {
@@ -764,8 +764,8 @@ label {
   max-width: 100%;
   -webkit-flex-grow: 1;
   flex-grow: 1;
-  -webkit-flex-basis: 0;
-  flex-basis: 0;
+  -webkit-flex-basis: 0px;
+  flex-basis: 0px;
 }
 
 [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
@@ -812,6 +812,20 @@ input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly], t
   border-color: #20292e;
 }
 
+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="%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;
+  -webkit-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"/>');
+}
+
 ::-webkit-input-placeholder {
   opacity: 1;
   color: #757575;

dist/mini-default.css

@@ -3,7 +3,7 @@
 	Flavor name: Default (mini-default)
 	Author: Angelos Chalaris (chalarangelo@gmail.com)
 	Maintainers: Angelos Chalaris
-	mini.css version: v2.3.0
+	mini.css version: v2.3.1
 */
 /*
 	Browsers resets and base typography.
@@ -730,8 +730,8 @@ label {
   max-width: 100%;
   -webkit-flex-grow: 1;
   flex-grow: 1;
-  -webkit-flex-basis: 0;
-  flex-basis: 0;
+  -webkit-flex-basis: 0px;
+  flex-basis: 0px;
 }
 
 @media screen and (max-width: 767px) {
@@ -763,8 +763,8 @@ label {
   max-width: 100%;
   -webkit-flex-grow: 1;
   flex-grow: 1;
-  -webkit-flex-basis: 0;
-  flex-basis: 0;
+  -webkit-flex-basis: 0px;
+  flex-basis: 0px;
 }
 
 [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
@@ -811,6 +811,20 @@ input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly], t
   border-color: #c9c9c9;
 }
 
+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;
+}
+
+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"/>');
+}
+
 ::-webkit-input-placeholder {
   opacity: 1;
   color: #616161;

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.0
+	mini.css version: v2.3.1
 */
 /*
 	Browsers resets and base typography.
@@ -756,6 +756,20 @@ input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly], t
   border-color: #c9c9c9;
 }
 
+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;
+}
+
+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"/>');
+}
+
 ::-webkit-input-placeholder {
   opacity: 1;
   color: #616161;

dist/mini-nord.css

@@ -1,9 +1,9 @@
 @charset "UTF-8";
 /*
-	Flavor name: Nord (mini-nord)
-	Author: tphecca (https://github.com/tphecca)
-	Maintainers: tphecca
-	mini.css version: v2.3.0
+  Flavor name: Nord (mini-nord)
+  Author: tphecca (https://github.com/tphecca)
+  Maintainers: tphecca
+  mini.css version: v2.3.1
 */
 /*
 	Browsers resets and base typography.
@@ -734,8 +734,8 @@ label {
   max-width: 100%;
   -webkit-flex-grow: 1;
   flex-grow: 1;
-  -webkit-flex-basis: 0;
-  flex-basis: 0;
+  -webkit-flex-basis: 0px;
+  flex-basis: 0px;
 }
 
 @media screen and (max-width: 767px) {
@@ -767,8 +767,8 @@ label {
   max-width: 100%;
   -webkit-flex-grow: 1;
   flex-grow: 1;
-  -webkit-flex-basis: 0;
-  flex-basis: 0;
+  -webkit-flex-basis: 0px;
+  flex-basis: 0px;
 }
 
 [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
@@ -820,6 +820,20 @@ input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly], t
   border-color: #bdbdbd;
 }
 
+select {
+  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;
+  -webkit-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"/>');
+}
+
 ::-webkit-input-placeholder {
   opacity: 1;
   color: #616161;
@@ -1043,7 +1057,7 @@ input[type="file"] {
 }
 
 /*
-	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 {
@@ -1672,7 +1686,7 @@ 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 {
@@ -2006,7 +2020,7 @@ mark.inline-block {
 }
 
 /*
-	Custom contextual background elements and alerts.
+  Custom contextual background elements and alerts.
 */
 mark.secondary {
   background: #BF616A;
@@ -2111,7 +2125,7 @@ progress[value="1000"]::-moz-progress-bar {
 }
 
 /*
-	Custom elements for progress elements and spinners.
+  Custom elements for progress elements and spinners.
 */
 progress.inline {
   display: inline-block;
@@ -2263,7 +2277,7 @@ ul.breadcrumbs li:last-child:after {
 }
 
 /*
-	Custom elements for utilities and helper classes.
+  Custom elements for utilities and helper classes.
 */
 .bordered {
   border: 1px solid rgba(0, 0, 0, 0.25) !important;

dist/mini-sucroa.css

@@ -1,9 +1,9 @@
 @charset "UTF-8";
 /*
-	Flavor name: Sucroa (mini-sucroa)
-	Author: Angeliki Daskalakis
-	Maintainers: Angeliki Daskalakis, Angelos Chalaris (chalarangelo@gmail.com)
-	mini.css version: v2.3.0
+  Flavor name: Sucroa (mini-sucroa)
+  Author: Angeliki Daskalakis
+  Maintainers: Angeliki Daskalakis, Angelos Chalaris (chalarangelo@gmail.com)
+  mini.css version: v2.3.1
 */
 @import url("https://fonts.googleapis.com/css?family=Cousine:400,400i,700|Libre+Baskerville:400,400i,700&subset=latin-ext");
 /*
@@ -738,8 +738,8 @@ label {
   max-width: 100%;
   -webkit-flex-grow: 1;
   flex-grow: 1;
-  -webkit-flex-basis: 0;
-  flex-basis: 0;
+  -webkit-flex-basis: 0px;
+  flex-basis: 0px;
 }
 
 @media screen and (max-width: 767px) {
@@ -771,8 +771,8 @@ label {
   max-width: 100%;
   -webkit-flex-grow: 1;
   flex-grow: 1;
-  -webkit-flex-basis: 0;
-  flex-basis: 0;
+  -webkit-flex-basis: 0px;
+  flex-basis: 0px;
 }
 
 [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
@@ -824,6 +824,20 @@ input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly], t
   border-color: #a9a2ba;
 }
 
+select {
+  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;
+  -webkit-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"/>');
+}
+
 ::-webkit-input-placeholder {
   opacity: 1;
   color: #493e4b;
@@ -1012,7 +1026,7 @@ input[type="file"] {
 }
 
 /*
-	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 {
@@ -1402,7 +1416,7 @@ 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 {
@@ -1746,7 +1760,7 @@ mark.inline-block {
 }
 
 /*
-	Custom contextual background elements and alerts.
+  Custom contextual background elements and alerts.
 */
 mark.secondary {
   background: #d2405f;
@@ -1851,7 +1865,7 @@ progress[value="1000"]::-moz-progress-bar {
 }
 
 /*
-	Custom elements for progress elements and spinners.
+  Custom elements for progress elements and spinners.
 */
 progress.inline {
   display: inline-block;
@@ -2004,7 +2018,7 @@ ul.breadcrumbs li:last-child:after {
 }
 
 /*
-	Custom elements for utilities and helper classes.
+  Custom elements for utilities and helper classes.
 */
 .bordered {
   border: 1px solid rgba(0, 0, 0, 0.25) !important;

docs/v2/DEVLOG.md

@@ -1255,3 +1255,13 @@
 - Altered `$label-padding` from `0.25rem` to `0.25rem 0.5rem` to make it align properly with everything else.
 - Added code for `.vertical` `.input-group`, documented it, updated flavors. Everything is ready, size is `6.70KB`, which is pretty good I might add.
 - Updated `CHANGELOG` and doc pages (new tag etc.), released **v2.3.0**.
+
+
+# v2.3.1 Development Log
+
+## 20170619
+
+- Merged two PRs resolving two issues that have been reported.
+- Added a lot of code in `input_control` module, some exotic functions included. Also added `$select-padding-right` to help solve an issue and update changes.
+- 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.

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.0
+	mini.css version: v2.3.1
 */
 //	Basic rules for body and typography
 $fore-color:						#d0d0d0;									// Text and general foreground color
@@ -184,6 +184,7 @@ $input-disabled-opacity:			0.75;									// Opacity for disabled input
 $input-readonly-back-color:		#263238;							// Background color for readonly input
 $input-readonly-border-color:	#20292e;							// Border color for readonly input
 $input-placeholder-fore-color:#757575;							// Text color for input placeholder
+$select-padding-right: 1.5rem;                      // Right padding for select element
 $button-back-color:			#39444a;										// 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

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

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

src/mini/_input_control.scss

@@ -28,6 +28,37 @@ $fore-color:							black !default;						// [External variable - core] Foreground
 // Policy for below external flag is `ALWAYS_TRUE`. This is done due to links being underlined by default.
 $apply-link-underline:		true !default;						// [External flag - core] Should underlining be applied to <a> elements? (`true`/`false`)
 $style-link-active-state:			false !default;				// [External flag - core] Should the :active state of <a> elements be stylized, same as the :hover state (`true`/`false`).
+// Necessary functions for certain elements (select)
+/// Courtesy of: https://css-tricks.com/snippets/sass/str-replace-function/
+/// -----------------------------------------------------------------------
+/// Replace `$search` with `$replace` in `$string`
+/// @author Hugo Giraudel
+/// @param {String} $string - Initial string
+/// @param {String} $search - Substring to replace
+/// @param {String} $replace ('') - New value
+/// @return {String} - Updated string
+@function str-replace($string, $search, $replace: '') {
+  $index: str-index($string, $search);
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  }
+  @return $string;
+}
+// Generate the arrow for the select element
+@function selectArrow() {
+  $_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
+@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
+@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+'"/>';
+}
 // Check the `_input_control_mixins.scss` file to find this module's mixins.
 @import 'input_control_mixins';
 // Base form styling.
@@ -166,13 +197,6 @@ legend {
 textarea {
 	overflow: auto;
 }
-// Correct background styling in Safari
-select {
-	background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 95% 50%;
-	-moz-appearance: none;
-	-webkit-appearance: none;
-	appearance: none;
-}
 // Correct style in Chrome and Safari.
 [type="search"] {
 	-webkit-appearance: textfield;
@@ -241,6 +265,19 @@ 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());
+  }
+}
 // Placeholder styling (keep browser-specific definitions separated, they do not play well together).
 ::-webkit-input-placeholder {
 	opacity: 1;