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.
This commit is contained in:
Angelos Chalaris
parent
e8cb973bde
commit
099e6da216
26 changed files with 72 additions and 38 deletions
|
|
@ -1,5 +1,11 @@
|
|||
# Changelog
|
||||
|
||||
## 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.
|
||||
|
|
|
|||
6
dist/mini-dark.css
vendored
6
dist/mini-dark.css
vendored
|
|
@ -3,7 +3,7 @@
|
|||
Flavor name: Dark (mini-dark)
|
||||
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
||||
Maintainers: Angelos Chalaris
|
||||
mini.css version: v2.3.3
|
||||
mini.css version: v2.3.4
|
||||
*/
|
||||
/*
|
||||
Browsers resets and base typography.
|
||||
|
|
@ -812,7 +812,7 @@ input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly], t
|
|||
border-color: #20292e;
|
||||
}
|
||||
|
||||
select {
|
||||
select:not([multiple]) {
|
||||
padding-right: 1.5rem;
|
||||
background: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1.5"><path fill="%23d0d0d0" d="M.25.75h.5L.5 1"/></svg>') no-repeat right;
|
||||
background-color: #39444a;
|
||||
|
|
@ -821,7 +821,7 @@ select {
|
|||
appearance: none;
|
||||
}
|
||||
|
||||
select[readonly] {
|
||||
select:not([multiple])[readonly] {
|
||||
background-color: #263238;
|
||||
}
|
||||
|
||||
|
|
|
|||
2
dist/mini-dark.min.css
vendored
2
dist/mini-dark.min.css
vendored
File diff suppressed because one or more lines are too long
6
dist/mini-default.css
vendored
6
dist/mini-default.css
vendored
|
|
@ -3,7 +3,7 @@
|
|||
Flavor name: Default (mini-default)
|
||||
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
||||
Maintainers: Angelos Chalaris
|
||||
mini.css version: v2.3.3
|
||||
mini.css version: v2.3.4
|
||||
*/
|
||||
/*
|
||||
Browsers resets and base typography.
|
||||
|
|
@ -811,7 +811,7 @@ input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly], t
|
|||
border-color: #c9c9c9;
|
||||
}
|
||||
|
||||
select {
|
||||
select:not([multiple]) {
|
||||
padding-right: 1.5rem;
|
||||
background: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1.5"><path fill="%23212121" d="M.25.75h.5L.5 1"/></svg>') no-repeat right;
|
||||
background-color: #fafafa;
|
||||
|
|
@ -820,7 +820,7 @@ select {
|
|||
appearance: none;
|
||||
}
|
||||
|
||||
select[readonly] {
|
||||
select:not([multiple])[readonly] {
|
||||
background-color: #e5e5e5;
|
||||
}
|
||||
|
||||
|
|
|
|||
2
dist/mini-default.min.css
vendored
2
dist/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
2
dist/mini-lite.css
vendored
2
dist/mini-lite.css
vendored
|
|
@ -3,7 +3,7 @@
|
|||
Flavor name: Lite (mini-lite)
|
||||
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
||||
Maintainers: Angelos Chalaris
|
||||
mini.css version: v2.3.3
|
||||
mini.css version: v2.3.4
|
||||
*/
|
||||
/*
|
||||
Browsers resets and base typography.
|
||||
|
|
|
|||
6
dist/mini-nord.css
vendored
6
dist/mini-nord.css
vendored
|
|
@ -3,7 +3,7 @@
|
|||
Flavor name: Nord (mini-nord)
|
||||
Author: tphecca (https://github.com/tphecca)
|
||||
Maintainers: tphecca
|
||||
mini.css version: v2.3.3
|
||||
mini.css version: v2.3.4
|
||||
*/
|
||||
/*
|
||||
Browsers resets and base typography.
|
||||
|
|
@ -820,7 +820,7 @@ input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly], t
|
|||
border-color: #bdbdbd;
|
||||
}
|
||||
|
||||
select {
|
||||
select:not([multiple]) {
|
||||
padding-right: 20px;
|
||||
background: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1.5"><path fill="%232E3440" d="M.25.75h.5L.5 1"/></svg>') no-repeat right;
|
||||
background-color: #E5E9F0;
|
||||
|
|
@ -829,7 +829,7 @@ select {
|
|||
appearance: none;
|
||||
}
|
||||
|
||||
select[readonly] {
|
||||
select:not([multiple])[readonly] {
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
|
||||
|
|
|
|||
2
dist/mini-nord.min.css
vendored
2
dist/mini-nord.min.css
vendored
File diff suppressed because one or more lines are too long
2
dist/mini-pwa.css
vendored
2
dist/mini-pwa.css
vendored
|
|
@ -3,7 +3,7 @@
|
|||
Flavor name: Progressive Web App (mini-pw)
|
||||
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
||||
Maintainers: Angelos Chalaris
|
||||
mini.css version: v2.3.3
|
||||
mini.css version: v2.3.4
|
||||
*/
|
||||
/*
|
||||
Browsers resets and base typography.
|
||||
|
|
|
|||
6
dist/mini-sucroa.css
vendored
6
dist/mini-sucroa.css
vendored
|
|
@ -3,7 +3,7 @@
|
|||
Flavor name: Sucroa (mini-sucroa)
|
||||
Author: Angeliki Daskalakis
|
||||
Maintainers: Angeliki Daskalakis, Angelos Chalaris (chalarangelo@gmail.com)
|
||||
mini.css version: v2.3.3
|
||||
mini.css version: v2.3.4
|
||||
*/
|
||||
@import url("https://fonts.googleapis.com/css?family=Cousine:400,400i,700|Libre+Baskerville:400,400i,700&subset=latin-ext");
|
||||
/*
|
||||
|
|
@ -824,7 +824,7 @@ input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly], t
|
|||
border-color: #a9a2ba;
|
||||
}
|
||||
|
||||
select {
|
||||
select:not([multiple]) {
|
||||
padding-right: 20px;
|
||||
background: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1.5"><path fill="%23211423" d="M.25.75h.5L.5 1"/></svg>') no-repeat right;
|
||||
background-color: #f2edff;
|
||||
|
|
@ -833,7 +833,7 @@ select {
|
|||
appearance: none;
|
||||
}
|
||||
|
||||
select[readonly] {
|
||||
select:not([multiple])[readonly] {
|
||||
background-color: #eae1ff;
|
||||
}
|
||||
|
||||
|
|
|
|||
2
dist/mini-sucroa.min.css
vendored
2
dist/mini-sucroa.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -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><head></code> tag:</p>
|
||||
<pre><<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">"stylesheet"</span> <span class="fore-secondary">href</span>=<span class="fore-primary">"https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-default.min.css"</span>></pre>
|
||||
<pre><<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">"stylesheet"</span> <span class="fore-secondary">href</span>=<span class="fore-primary">"https://cdn.rawgit.com/Chalarangelo/mini.css/v2.3.3/dist/mini-default.min.css"</span>></pre><br>
|
||||
<pre><<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">"stylesheet"</span> <span class="fore-secondary">href</span>=<span class="fore-primary">"https://cdn.rawgit.com/Chalarangelo/mini.css/v2.3.4/dist/mini-default.min.css"</span>></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">
|
||||
|
|
|
|||
|
|
@ -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><head></code> tag:</p>
|
||||
<pre><<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">"stylesheet"</span> <span class="fore-secondary">href</span>=<span class="fore-primary">"https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-default.min.css"</span>></pre>
|
||||
<pre><<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">"stylesheet"</span> <span class="fore-secondary">href</span>=<span class="fore-primary">"https://cdn.rawgit.com/Chalarangelo/mini.css/v2.3.3/dist/mini-default.min.css"</span>></pre><br/>
|
||||
<pre><<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">"stylesheet"</span> <span class="fore-secondary">href</span>=<span class="fore-primary">"https://cdn.rawgit.com/Chalarangelo/mini.css/v2.3.4/dist/mini-default.min.css"</span>></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> 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 & 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>
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@
|
|||
<div class="card fluid">
|
||||
<div class="section"><h2>Forms & 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><form></code> element and add your <code><input></code> elements inside. Link them to <code><label></code> elements for ease of access and you are pretty much set. We highly recommend using the <code><fieldset></code> and <code><legend></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><div></code> wrapping inside it an <code><input></code> and <code><label></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>
|
||||
|
|
|
|||
2
docs/mini-default.min.css
vendored
2
docs/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -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><head></code> tag:</p>
|
||||
<pre><<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">"stylesheet"</span> <span class="fore-secondary">href</span>=<span class="fore-primary">"https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-default.min.css"</span>></pre>
|
||||
<pre><<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">"stylesheet"</span> <span class="fore-secondary">href</span>=<span class="fore-primary">"https://cdn.rawgit.com/Chalarangelo/mini.css/v2.3.3/dist/mini-default.min.css"</span>></pre><br>
|
||||
<pre><<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">"stylesheet"</span> <span class="fore-secondary">href</span>=<span class="fore-primary">"https://cdn.rawgit.com/Chalarangelo/mini.css/v2.3.4/dist/mini-default.min.css"</span>></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><head></code> to utilize the viewport meta tag:</p>
|
||||
<pre><<span class="fore-tertiary">meta</span> <span class="fore-secondary">name</span>=<span class="fore-primary">"viewport"</span> <span class="fore-secondary">content</span>=<span class="fore-primary">"width=device-width, initial-scale=1"</span>></pre>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1280,3 +1280,16 @@
|
|||
## 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.
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
Flavor name: Dark (mini-dark)
|
||||
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
||||
Maintainers: Angelos Chalaris
|
||||
mini.css version: v2.3.3
|
||||
mini.css version: v2.3.4
|
||||
*/
|
||||
// Basic rules for body and typography
|
||||
$fore-color: #d0d0d0; // Text and general foreground color
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
Flavor name: Default (mini-default)
|
||||
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
||||
Maintainers: Angelos Chalaris
|
||||
mini.css version: v2.3.3
|
||||
mini.css version: v2.3.4
|
||||
*/
|
||||
// Basic rules for body and typography
|
||||
$fore-color: #212121; // Text and general foreground color
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
Flavor name: Lite (mini-lite)
|
||||
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
||||
Maintainers: Angelos Chalaris
|
||||
mini.css version: v2.3.3
|
||||
mini.css version: v2.3.4
|
||||
*/
|
||||
// Basic rules for body and typography
|
||||
$fore-color: #212121; // Text and general foreground color
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
Flavor name: Nord (mini-nord)
|
||||
Author: tphecca (https://github.com/tphecca)
|
||||
Maintainers: tphecca
|
||||
mini.css version: v2.3.3
|
||||
mini.css version: v2.3.4
|
||||
*/
|
||||
// This flavor is based on the Nord color palette: https://github.com/arcticicestudio/nord
|
||||
// Basic rules for body and typography
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
Flavor name: Progressive Web App (mini-pw)
|
||||
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
||||
Maintainers: Angelos Chalaris
|
||||
mini.css version: v2.3.3
|
||||
mini.css version: v2.3.4
|
||||
*/
|
||||
// Basic rules for body and typography
|
||||
$fore-color: #212121; // Text and general foreground color
|
||||
|
|
|
|||
|
|
@ -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.3
|
||||
mini.css version: v2.3.4
|
||||
*/
|
||||
// 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');
|
||||
|
|
|
|||
|
|
@ -268,7 +268,7 @@ input:not([type]), [type="text"], [type="email"], [type="number"], [type="search
|
|||
}
|
||||
// Correct background styling in Safari
|
||||
@if $apply-select-fix {
|
||||
select {
|
||||
select:not([multiple]) {
|
||||
padding-right: $select-padding-right;
|
||||
background: url(selectArrow()) no-repeat right;
|
||||
background-color: $input-back-color;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue