beenull/mini.css
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Updated select styling

Browse source 
Cleanup in the code, making it take up less space, added condition to disable.
This commit is contained in:
Angelos Chalaris 2017-06-29 14:54:31 +03:00
parent 6b673fd528
commit 449862dc26
21 changed files with 111 additions and 113 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
CHANGELOG.md
View file

@ -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 `<select>` elements on certain devices (#80, #82).

31
dist/mini-dark.css vendored
View file

@ -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.2
*/
/*
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;
@ -814,16 +814,15 @@ 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="%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"/>');
background-color: #263238;
}
::-webkit-input-placeholder {
@ -1106,7 +1105,7 @@ button.large, [type="button"].large, [type="submit"].large,
}
/*
Definitions for navigation elements.
Definitions for navigation elements.
*/
header {
display: block;
@ -1293,7 +1292,7 @@ footer.sticky {
}
/*
Definitions for the responsive table component.
Definitions for the responsive table component.
*/
table {
border-collapse: separate;
@ -1613,7 +1612,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 +1722,7 @@ table.striped tr:nth-of-type(2n) > td {
}
/*
Definitions for tabs/horizontal accordions.
Definitions for tabs/horizontal accordions.
*/
.tabs {
width: 100%;
@ -1867,7 +1866,7 @@ table.striped tr:nth-of-type(2n) > td {
}
/*
Definitions for contextual background elements, toasts and tooltips.
Definitions for contextual background elements, toasts and tooltips.
*/
mark {
background: #0277bd;
@ -2030,7 +2029,7 @@ mark.inline-block {
}
/*
Definitions for progress elements and spinners.
Definitions for progress elements and spinners.
*/
progress {
display: block;
@ -2151,7 +2150,7 @@ progress.tertiary::-moz-progress-bar {
}
/*
Definitions for utilities and helper classes.
Definitions for utilities and helper classes.
*/
.hidden {
display: none !important;

2
dist/mini-dark.min.css vendored
View file

File diff suppressed because one or more lines are too long

31
dist/mini-default.css vendored
View file

@ -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.2
*/
/*
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;
@ -813,16 +813,15 @@ 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;
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"/>');
background-color: #e5e5e5;
}
::-webkit-input-placeholder {
@ -1105,7 +1104,7 @@ button.large, [type="button"].large, [type="submit"].large,
}
/*
Definitions for navigation elements.
Definitions for navigation elements.
*/
header {
display: block;
@ -1292,7 +1291,7 @@ footer.sticky {
}
/*
Definitions for the responsive table component.
Definitions for the responsive table component.
*/
table {
border-collapse: separate;
@ -1613,7 +1612,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 +1722,7 @@ table.striped tr:nth-of-type(2n) > td {
}
/*
Definitions for tabs/horizontal accordions.
Definitions for tabs/horizontal accordions.
*/
.tabs {
width: 100%;
@ -1868,7 +1867,7 @@ table.striped tr:nth-of-type(2n) > td {
}
/*
Definitions for contextual background elements, toasts and tooltips.
Definitions for contextual background elements, toasts and tooltips.
*/
mark {
background: #0277bd;
@ -2031,7 +2030,7 @@ mark.inline-block {
}
/*
Definitions for progress elements and spinners.
Definitions for progress elements and spinners.
*/
progress {
display: block;
@ -2152,7 +2151,7 @@ progress.tertiary::-moz-progress-bar {
}
/*
Definitions for utilities and helper classes.
Definitions for utilities and helper classes.
*/
.hidden {
display: none !important;

2
dist/mini-default.min.css vendored
View file

File diff suppressed because one or more lines are too long

32
dist/mini-lite.css vendored
View file

@ -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.2
*/
/*
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;
@ -756,20 +756,6 @@ 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;
@ -964,7 +950,7 @@ button.large, [type="button"].large, [type="submit"].large,
}
/*
Definitions for navigation elements.
Definitions for navigation elements.
*/
header {
display: block;
@ -1038,7 +1024,7 @@ footer.sticky {
}
/*
Definitions for the responsive table component.
Definitions for the responsive table component.
*/
table {
border-collapse: separate;
@ -1119,7 +1105,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 +1172,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 +1210,7 @@ mark.inline-block {
}
/*
Definitions for progress elements and spinners.
Definitions for progress elements and spinners.
*/
progress {
display: block;
@ -1300,7 +1286,7 @@ progress.tertiary::-moz-progress-bar {
}
/*
Definitions for utilities and helper classes.
Definitions for utilities and helper classes.
*/
.hidden {
display: none !important;

2
dist/mini-lite.min.css vendored
View file

File diff suppressed because one or more lines are too long

31
dist/mini-nord.css vendored
View file

@ -3,10 +3,10 @@
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
*/
/*
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;
@ -822,16 +822,15 @@ input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly], t
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;
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"/>');
background-color: #e0e0e0;
}
::-webkit-input-placeholder {
@ -1122,7 +1121,7 @@ button.large, [type="button"].large, [type="submit"].large,
}
/*
Definitions for navigation elements.
Definitions for navigation elements.
*/
header {
display: block;
@ -1312,7 +1311,7 @@ footer.sticky {
}
/*
Definitions for the responsive table component.
Definitions for the responsive table component.
*/
table {
border-collapse: separate;
@ -1635,7 +1634,7 @@ table.striped tr:nth-of-type(2n) > td {
}
/*
Definitions for cards and containers.
Definitions for cards and containers.
*/
.card {
display: -webkit-box;
@ -1741,7 +1740,7 @@ table.striped tr:nth-of-type(2n) > td {
}
/*
Definitions for tabs/horizontal accordions.
Definitions for tabs/horizontal accordions.
*/
.tabs {
width: 100%;
@ -1887,7 +1886,7 @@ table.striped tr:nth-of-type(2n) > td {
}
/*
Definitions for contextual background elements, toasts and tooltips.
Definitions for contextual background elements, toasts and tooltips.
*/
mark {
background: #5E81AC;
@ -2052,7 +2051,7 @@ mark.inline-block {
}
/*
Definitions for progress elements and spinners.
Definitions for progress elements and spinners.
*/
progress {
display: block;
@ -2174,7 +2173,7 @@ progress.tertiary::-moz-progress-bar {
}
/*
Definitions for utilities and helper classes.
Definitions for utilities and helper classes.
*/
.hidden {
display: none !important;

2
dist/mini-nord.min.css vendored
View file

File diff suppressed because one or more lines are too long

31
dist/mini-sucroa.css vendored
View file

@ -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.2
*/
@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;
@ -826,16 +826,15 @@ input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly], t
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;
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"/>');
background-color: #eae1ff;
}
::-webkit-input-placeholder {
@ -1093,7 +1092,7 @@ button.large, [type="button"].large, [type="submit"].large,
}
/*
Definitions for navigation elements.
Definitions for navigation elements.
*/
header {
display: block;
@ -1267,7 +1266,7 @@ footer.sticky {
}
/*
Definitions for the responsive table component.
Definitions for the responsive table component.
*/
table {
border-collapse: separate;
@ -1363,7 +1362,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 +1474,7 @@ table.striped tr:nth-of-type(2n) > td {
}
/*
Definitions for tabs/horizontal accordions.
Definitions for tabs/horizontal accordions.
*/
.tabs {
width: 100%;
@ -1664,7 +1663,7 @@ table.striped tr:nth-of-type(2n) > td {
}
/*
Definitions for contextual background elements, toasts and tooltips.
Definitions for contextual background elements, toasts and tooltips.
*/
mark {
background: #6979c6;
@ -1792,7 +1791,7 @@ mark.inline-block {
}
/*
Definitions for progress elements and spinners.
Definitions for progress elements and spinners.
*/
progress {
display: block;
@ -1914,7 +1913,7 @@ progress.tertiary::-moz-progress-bar {
}
/*
Definitions for utilities and helper classes.
Definitions for utilities and helper classes.
*/
.hidden {
display: none !important;

2
dist/mini-sucroa.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
docs/flavors.html
View file

@ -44,7 +44,7 @@
<h1>Flavors</h1>
<p style="text-align:justify">One of the core ideas behind <strong>mini.css</strong> is its flavor system. A flavor is the final compiled stylesheet a website or web app uses. When you start using <strong>mini.css</strong>, you usually try out the default flavor, using one of the following references inside your HTML page's <code>&lt;head&gt;</code> tag:</p>
<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-default.min.css&quot;</span>&gt;</pre>
<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/v2.3.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.2/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">

2
docs/index.html
View file

@ -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.2/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>

2
docs/quick_reference.html
View file

@ -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.2/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>

8
docs/v2/DEVLOG.md
View file

@ -1266,3 +1266,11 @@
- 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.

2
src/flavors/mini-dark.scss
View file

@ -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.2
*/
// Basic rules for body and typography
$fore-color: #d0d0d0; // Text and general foreground color

2
src/flavors/mini-default.scss
View file

@ -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.2
*/
// Basic rules for body and typography
$fore-color: #212121; // Text and general foreground color

4
src/flavors/mini-lite.scss
View file

@ -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.2
*/
// 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

2
src/flavors/mini-nord.scss
View file

@ -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

2
src/flavors/mini-sucroa.scss
View file

@ -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');

26
src/mini/_input_control.scss
View file

@ -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,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).