diff --git a/CHANGELOG.md b/CHANGELOG.md index f4c0d72..1c6ab5c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # Changelog +## 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 ` 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 diff --git a/src/flavors/mini-nord.scss b/src/flavors/mini-nord.scss index d640228..1f45006 100644 --- 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.2 */ // This flavor is based on the Nord color palette: https://github.com/arcticicestudio/nord // Basic rules for body and typography diff --git a/src/flavors/mini-sucroa.scss b/src/flavors/mini-sucroa.scss index a3faab0..8d71bdd 100644 --- 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.2 */ // 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'); diff --git a/src/mini/_input_control.scss b/src/mini/_input_control.scss index ed0fa5d..2087a5a 100644 --- 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 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 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, '; } -// 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, '; } -// 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, '; @@ -266,16 +267,17 @@ 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 { + 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; + } } } // Placeholder styling (keep browser-specific definitions separated, they do not play well together).