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

Generator updates

Browse source
This commit is contained in:
Angelos Chalaris 2018-05-28 12:01:52 +03:00
parent 906af26959
commit ad609410c5
25 changed files with 12111 additions and 4801 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
README.md
View file

@ -4,8 +4,7 @@ A minimal, responsive, style-agnostic CSS framework
[![npm](https://img.shields.io/npm/v/mini.css.svg)](https://www.npmjs.com/package/mini.css) [![npm](https://img.shields.io/npm/v/mini.css.svg)](https://www.npmjs.com/package/mini.css)
[![license](https://img.shields.io/badge/license-MIT-yellow.svg)](https://github.com/Chalarangelo/mini.css/blob/master/LICENSE) [![license](https://img.shields.io/badge/license-MIT-yellow.svg)](https://github.com/Chalarangelo/mini.css/blob/master/LICENSE)
[![website](https://img.shields.io/badge/website-online-green.svg)](https://chalarangelo.github.io/mini.css/) [![website](https://img.shields.io/badge/website-online-green.svg)](https://minicss.org)
[![Gitter](https://img.shields.io/gitter/room/minicss/Lobby.svg)](https://gitter.im/minicss/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
![Logo](/docs/page_thumb.png) ![Logo](/docs/page_thumb.png)
@ -30,9 +29,9 @@ npm install mini.css
yarn add mini.css yarn add mini.css
bower install mini.css bower install mini.css
``` ```
2. Pick one of the available [flavors](https://chalarangelo.github.io/mini.css/flavors.html) and use its CSS file. 2. Pick one of the available [flavors](https://minicss.org/flavors) and use its CSS file.
3. Start working on your project. Detailed documentation is available on the framework's [website](https://chalarangelo.github.io/mini.css/modules.html), so be sure to check it out. 3. Start working on your project. Detailed documentation is available on the framework's [website](https://minicss.org/docs), so be sure to check it out.
#### Method 2: Use GitCDN #### Method 2: Use GitCDN
@ -58,9 +57,9 @@ If you would rather use an older version of the framework, you should head over
## Flavors & customizaton ## Flavors & customizaton
*Flavors* are one of the key features of **mini.css**, allowing you to customize your website's design and make your project stand out. We provide you with a few pre-defined [flavors](https://chalarangelo.github.io/mini.css/flavors.html) that might suit your needs and will help you figure out how to use the framework and create websites and apps with it. *Flavors* are one of the key features of **mini.css**, allowing you to customize your website's design and make your project stand out. We provide you with a few pre-defined [flavors](https://minicss.org/flavors#prebuilt-flavors) that might suit your needs and will help you figure out how to use the framework and create websites and apps with it.
But you can easily build you own flavors by editing a flavor file and customizing almost everything. For more information, head over to the [Customization page](https://chalarangelo.github.io/mini.css/customization/index.html) and build your own flavor the way you like it. But you can easily build you own flavors by using our [flavor generator tool](https://minicss.org/flavors#build-your-own-flavor), which allows you to customize almost everything. Take your time and create the perfect flavo to suit your needs.
--- ---
@ -78,7 +77,6 @@ The team behind **mini.css** is as follows:
- Angelos Chalaris ([@chalarangelo](https://github.com/Chalarangelo)) - Sass archmage, project manager - Angelos Chalaris ([@chalarangelo](https://github.com/Chalarangelo)) - Sass archmage, project manager
Special thanks to these fine folks for helping in the development of **mini.css**: Special thanks to these fine folks for helping in the development of **mini.css**:
- Angeliki Daskalakis ([@angiedaskalakis](https://github.com/AngieDaskalakis)) - Author of the [Sucroa](https://github.com/Chalarangelo/mini.css/blob/master/dist/mini-sucroa.css) flavor
- [@tphecca](https://github.com/tphecca) - Author of the [Nord](https://github.com/Chalarangelo/mini.css/blob/master/dist/mini-nord.css) flavor - [@tphecca](https://github.com/tphecca) - Author of the [Nord](https://github.com/Chalarangelo/mini.css/blob/master/dist/mini-nord.css) flavor
- [Per Harald Borgen](https://scrimba.com/perborgen) - Introductory video creator - [Per Harald Borgen](https://scrimba.com/perborgen) - Introductory video creator
- Rory Primrose ([@roryprimrose](https://github.com/roryprimrose)) - Code restructure - Rory Primrose ([@roryprimrose](https://github.com/roryprimrose)) - Code restructure

2566
dist/mini-dark.css vendored
View file

File diff suppressed because it is too large Load diff

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

File diff suppressed because one or more lines are too long

2
dist/mini-default.css vendored
View file

@ -3,7 +3,7 @@
Flavor name: Default (mini-default) Flavor name: Default (mini-default)
Author: Angelos Chalaris (chalarangelo@gmail.com) Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris Maintainers: Angelos Chalaris
mini.css version: v3.0.0-alpha.3 mini.css version: v3.0.0
*/ */
/* /*
Browsers resets and base typography. Browsers resets and base typography.

2734
dist/mini-nord.css vendored
View file

File diff suppressed because it is too large Load diff

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

File diff suppressed because one or more lines are too long

12
docs/build-docs.js
View file

@ -251,3 +251,15 @@ fs.writeFile(custOutputPath,
${customizationEnd}`, ${customizationEnd}`,
function(err) { if(err) return console.log(err); console.log("Flavors file generated!"); } function(err) { if(err) return console.log(err); console.log("Flavors file generated!"); }
); );
var miniSassFiles = ['_contextual_mixins', '_contextual', '_core', '_icon', '_input_control_mixins', '_input_control', '_layout_mixins', '_layout', '_navigation', '_progress_mixins', '_progress', '_table', '_utility'];
miniSassFiles.forEach(f => fs.createReadStream(`./src/mini/${f}.scss`).pipe(fs.createWriteStream(`./docs/v3/mini/${f}.scss`)));
var flavorFiles = ['mini-default', 'mini-dark', 'mini-nord'];
flavorFiles.forEach(f => {
fs.createReadStream(`./src/flavors/${f}.scss`).pipe(fs.createWriteStream(`./docs/v3/flavors/${f}.scss`));
fs.createReadStream(`./dist/${f}.css`).pipe(fs.createWriteStream(`./docs/v3/flavors/${f}.css`));
fs.createReadStream(`./dist/${f}.min.css`).pipe(fs.createWriteStream(`./docs/v3/flavors/${f}.min.css`));
});

7
docs/doc-fragments/premadeFlavors.js
View file

@ -4,9 +4,8 @@ module.exports = {
title: 'Prebuilt flavors', title: 'Prebuilt flavors',
content: `<div class="section"><p><strong>mini.css</strong> comes with a few prebuild flavors out of the box, so you can get started without having to finetune every little aspect of your CSS framework:</p> content: `<div class="section"><p><strong>mini.css</strong> comes with a few prebuild flavors out of the box, so you can get started without having to finetune every little aspect of your CSS framework:</p>
<ul> <ul>
<li>Default</li> <li>Default: <a href="flavors/mini-default.scss" download>SCSS file</a> - <a href="flavors/mini-default.css" download>CSS file</a> - <a href="flavors/mini-default.min.css" download>CSS file (minified)</a></li>
<li>Lite</li> <li>Dark: <a href="flavors/mini-dark.scss" download>SCSS file</a> - <a href="flavors/mini-dark.css" download>CSS file</a> - <a href="flavors/mini-dark.min.css" download>CSS file (minified)</a></li>
<li>Dark</li> <li>Nord: <a href="flavors/mini-nord.scss" download>SCSS file</a> - <a href="flavors/mini-nord.css" download>CSS file</a> - <a href="flavors/mini-nord.min.css" download>CSS file (minified)</a></li>
<li>Nord</li>
</ul></div>` </ul></div>`
} }

3
docs/v3/DEVLOG.md
View file

@ -365,8 +365,6 @@
- Added `jszip`, `sass.js` and `file-saver` to `package.json`. - Added `jszip`, `sass.js` and `file-saver` to `package.json`.
- Used above tools and some code to finish up the `flavors` page generation process. - Used above tools and some code to finish up the `flavors` page generation process.
- *TODO* Add flavors.
- *TODO* Auto-compile SCSS to CSS when generating, copy all `src` to the `docs`.
- *TODO* Rebase and release. - *TODO* Rebase and release.
## 20180528 ## 20180528
@ -376,3 +374,4 @@
- Replied to issues on the repo. - Replied to issues on the repo.
- Updated the flavor generation to show the progress. - Updated the flavor generation to show the progress.
- Fixed documentation links. - Fixed documentation links.
- Updated generator, it now adds and updates the proper folders along with everything else.

6
docs/v3/docs.html
View file

@ -30,8 +30,8 @@
<div class="section"><p>You can get started using <strong>mini.css</strong> in one of many ways. It is published on <strong>npm</strong> and <strong>yarn</strong>, so you can easily download it, using your preferred package manager:</p> <div class="section"><p>You can get started using <strong>mini.css</strong> in one of many ways. It is published on <strong>npm</strong> and <strong>yarn</strong>, so you can easily download it, using your preferred package manager:</p>
<div class="row"><div class="col-sm-12 col-md"><pre>npm install mini.css</pre></div><div class="col-sm-12 col-md"><pre>yarn add mini.css</pre></div></div> <div class="row"><div class="col-sm-12 col-md"><pre>npm install mini.css</pre></div><div class="col-sm-12 col-md"><pre>yarn add mini.css</pre></div></div>
<br/><p>Alternatively, you can use either <strong>rawgit</strong> or <strong>cdnjs</strong> to import <strong>mini.css</strong> into your HTML page's <code>&lt;head&gt;</code> tag:</p> <br/><p>Alternatively, you can use either <strong>rawgit</strong> or <strong>cdnjs</strong> to import <strong>mini.css</strong> into your HTML page's <code>&lt;head&gt;</code> tag:</p>
<pre>&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/v3.0.0-alpha.3/dist/mini-default.min.css&quot;&gt;</pre> <pre>&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/v3.0.0/dist/mini-default.min.css&quot;&gt;</pre>
<pre>&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/mini.css/v3.0.0-alpha.3/mini-default.min.css&quot;&gt;</pre> <pre>&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/mini.css/v3.0.0/mini-default.min.css&quot;&gt;</pre>
<br/><p>After adding <strong>mini.css</strong> to your project, remember to also add the following line inside your HTML page's <code>&lt;head&gt;</code> tag to utilize the viewport meta tag:</p> <br/><p>After adding <strong>mini.css</strong> to your project, remember to also add the following line inside your HTML page's <code>&lt;head&gt;</code> tag to utilize the viewport meta tag:</p>
<pre>&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;</pre> <pre>&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;</pre>
<br/><p><strong>mini.css</strong> is crafted with long-term support in mind, so expect it to be compatible with all modern browsers, as well as their future versions. However, most legacy and proxy browsers, such as Internet Explorer, Opera Mini, IE Mobile and UC Browser are not officially supported, meaning certain features may not be displayed properly or behave exactly as expected.</p><br/> <br/><p><strong>mini.css</strong> is crafted with long-term support in mind, so expect it to be compatible with all modern browsers, as well as their future versions. However, most legacy and proxy browsers, such as Internet Explorer, Opera Mini, IE Mobile and UC Browser are not officially supported, meaning certain features may not be displayed properly or behave exactly as expected.</p><br/>
@ -1059,7 +1059,7 @@
el.forEach(e => e.innerHTML = '<form action="https://codepen.io/pen/define" method="POST" target="_blank" class="codepen-form">' + el.forEach(e => e.innerHTML = '<form action="https://codepen.io/pen/define" method="POST" target="_blank" class="codepen-form">' +
'<input type="hidden" name="data" value=\'' + JSON.stringify({ '<input type="hidden" name="data" value=\'' + JSON.stringify({
html : e.innerText, html : e.innerText,
css_external : "https://cdnjs.cloudflare.com/ajax/libs/mini.css/3.0.0-alpha.3/mini-default.css" css_external : "https://cdnjs.cloudflare.com/ajax/libs/mini.css/3.0.0/mini-default.css"
}).replace(/"/g, "&quot;") }).replace(/"/g, "&quot;")
.replace(/'/g, "&apos;") + '\'>' + .replace(/'/g, "&apos;") + '\'>' +
'<input type="image" class="codepen-link" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23424242%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolygon%20points%3D%2212%202%2022%208.5%2022%2015.5%2012%2022%202%2015.5%202%208.5%2012%202%22%3E%3C%2Fpolygon%3E%3Cline%20x1%3D%2212%22%20y1%3D%2222%22%20x2%3D%2212%22%20y2%3D%2215.5%22%3E%3C%2Fline%3E%3Cpolyline%20points%3D%2222%208.5%2012%2015.5%202%208.5%22%3E%3C%2Fpolyline%3E%3Cpolyline%20points%3D%222%2015.5%2012%208.5%2022%2015.5%22%3E%3C%2Fpolyline%3E%3Cline%20x1%3D%2212%22%20y1%3D%222%22%20x2%3D%2212%22%20y2%3D%228.5%22%3E%3C%2Fline%3E%3C%2Fsvg%3E" width="40" height="40" value="Open in Codepen">' + '<input type="image" class="codepen-link" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23424242%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolygon%20points%3D%2212%202%2022%208.5%2022%2015.5%2012%2022%202%2015.5%202%208.5%2012%202%22%3E%3C%2Fpolygon%3E%3Cline%20x1%3D%2212%22%20y1%3D%2222%22%20x2%3D%2212%22%20y2%3D%2215.5%22%3E%3C%2Fline%3E%3Cpolyline%20points%3D%2222%208.5%2012%2015.5%202%208.5%22%3E%3C%2Fpolyline%3E%3Cpolyline%20points%3D%222%2015.5%2012%208.5%2022%2015.5%22%3E%3C%2Fpolyline%3E%3Cline%20x1%3D%2212%22%20y1%3D%222%22%20x2%3D%2212%22%20y2%3D%228.5%22%3E%3C%2Fline%3E%3C%2Fsvg%3E" width="40" height="40" value="Open in Codepen">' +

9
docs/v3/flavors.html
View file

@ -29,10 +29,9 @@
<main class="col-sm-12 col-md-8 col-lg-9" id="doc-content"><div id="prebuilt-flavors" class="card fluid"> <main class="col-sm-12 col-md-8 col-lg-9" id="doc-content"><div id="prebuilt-flavors" class="card fluid">
<h2 class="section double-padded">Prebuilt flavors</h2><div class="section"><p><strong>mini.css</strong> comes with a few prebuild flavors out of the box, so you can get started without having to finetune every little aspect of your CSS framework:</p> <h2 class="section double-padded">Prebuilt flavors</h2><div class="section"><p><strong>mini.css</strong> comes with a few prebuild flavors out of the box, so you can get started without having to finetune every little aspect of your CSS framework:</p>
<ul> <ul>
<li>Default</li> <li>Default: <a href="flavors/mini-default.scss" download>SCSS file</a> - <a href="flavors/mini-default.css" download>CSS file</a> - <a href="flavors/mini-default.min.css" download>CSS file (minified)</a></li>
<li>Lite</li> <li>Dark: <a href="flavors/mini-dark.scss" download>SCSS file</a> - <a href="flavors/mini-dark.css" download>CSS file</a> - <a href="flavors/mini-dark.min.css" download>CSS file (minified)</a></li>
<li>Dark</li> <li>Nord: <a href="flavors/mini-nord.scss" download>SCSS file</a> - <a href="flavors/mini-nord.css" download>CSS file</a> - <a href="flavors/mini-nord.min.css" download>CSS file (minified)</a></li>
<li>Nord</li>
</ul></div> </ul></div>
</div><br/><div id="flavor-tools" class="card fluid"> </div><br/><div id="flavor-tools" class="card fluid">
<h2 class="section double-padded">Complementary tools</h2><div class="section"><p>Building a custom flavor can be complex, even with the amount of streamlining we have provided. We have hand-picked the following tools to assist you in creating the perfect flavor for your needs:</p> <h2 class="section double-padded">Complementary tools</h2><div class="section"><p>Building a custom flavor can be complex, even with the amount of streamlining we have provided. We have hand-picked the following tools to assist you in creating the perfect flavor for your needs:</p>
@ -1409,7 +1408,7 @@
flavorFile +='/*\n'; flavorFile +='/*\n';
flavorFile +=' Flavor name: Custom (mini-custom)\n'; flavorFile +=' Flavor name: Custom (mini-custom)\n';
flavorFile +=' Generated online - https://minicss.org/flavors\n'; flavorFile +=' Generated online - https://minicss.org/flavors\n';
flavorFile +=' mini.css version: v3.0.0-alpha.3\n'; flavorFile +=' mini.css version: v3.0.0\n';
flavorFile +='*/\n'; flavorFile +='*/\n';
flavorFile +='$base-root-font-size: '+flavorData.core.baseRootFontSize+'px; // Root font sizing for all elements (`px` only)\n'; flavorFile +='$base-root-font-size: '+flavorData.core.baseRootFontSize+'px; // Root font sizing for all elements (`px` only)\n';
flavorFile +='$base-line-height: '+flavorData.core.baseLineHeight+'; // Line height for most elements\n'; flavorFile +='$base-line-height: '+flavorData.core.baseLineHeight+'; // Line height for most elements\n';

2171
docs/v3/flavors/mini-dark.css Normal file
View file

File diff suppressed because it is too large Load diff

1
docs/v3/flavors/mini-dark.min.css vendored Normal file
View file

File diff suppressed because one or more lines are too long

276
docs/v3/flavors/mini-dark.scss Normal file
View file

@ -0,0 +1,276 @@
// 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.
/*
Flavor name: Dark (mini-dark)
Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris
mini.css version: v3.0.0
*/
$base-root-font-size: 16px; // Root font sizing for all elements (`px` only)
$base-line-height: 1.5; // Line height for most elements
$fore-color: #fdfdfd; // Text & foreground color
$secondary-fore-color: #f0f0f0; // Secondary text & foreground color
$back-color: #111; // Background color
$secondary-back-color: #222; // Secondary background color
$blockquote-color: #f57c00; // <blockquote> sidebar and quotation color
$pre-color: #1565c0; // <pre> sidebar color
$border-color: #ddd; // Border color
$secondary-border-color: #aaa; // Secondary border color
$heading-line-height: 1.2; // Line height for headings
$heading-ratio: 1.19; // Ratio for headings (strictly unitless)
$subheading-font-size:0.75em; // Font sizing for <small> elements in headings
$subheading-top-margin: -0.25rem; // Top margin of <small> elements in headings
$heading-font-weight: 500; // Font weight for headings
$horizontal-rule-line-height: 1.25em; // <hr> line height
$universal-margin: 0.5rem; // Universal margin for the most elements
$universal-padding: 0.5rem; // Universal padding for the most elements
$universal-border-radius: 0.125rem; // Universal border-radius for most elements
$universal-box-shadow: none; // Universal box-shadow for most elements
$small-element-font-size: 0.75em; // Font size for <small>, <sub>, <sup>
$small-font-size: 0.75em; // Font sizing for <small> elements
$blockquote-quotation-size: 3rem; // Font size for the quotation of <blockquote>
$blockquote-cite-size: 0.75em; // Font size for the [cite] of <blockquote>
$code-font-size: 0.85em; // Font size for <code>, <kbd>
$sup-top: -0.5em; // <sup> top
$sub-bottom: -0.25em; // <sub> bottom
$a-link-color: #0277bd; // Color for <a>:link
$a-visited-color: #01579b; // Color for <a>:visited
$bold-font-weight: 700; // Font weight for <b> and <strong>
$mobile-breakpoint: 768px; // Breakpoint between small and medium screens (px)
$large-screen-breakpoint: 1280px; // Breakpoint between medium and large screens (px)
@import '../mini/core';
$grid-column-count: 12; // Number of columns in the grid (integer value only).
$grid-medium-breakpoint: $mobile-breakpoint; // Medium screen breakpoint for grid.
$grid-large-breakpoint: $large-screen-breakpoint; // Large screen breakpoint for grid.
$card-normal-width: 320px; // Width for normal cards.
$card-section-media-height: 200px; // Height for cards' media sections.
$card-fore-color: #fdfdfd; // Text color for the cards.
$card-back-color: #111; // Background color for the cards.
$card-border-color: #aaa; // Border color for the cards.
@import '../mini/layout';
/*
Custom elements for card elements.
*/
$card-small-name: 'small'; // Class name for small cards.
$card-small-width: 240px; // Width for small cards.
@include make-card-alt-size ($card-small-name, $card-small-width);
$card-large-name: 'large'; // Class name for large cards.
$card-large-width: 480px; // Width for large cards.
@include make-card-alt-size ($card-large-name, $card-large-width);
$card-fluid-name: 'fluid'; // Class name for fluid cards.
$card-fluid-width: 100%; // Width for fluid cards.
@include make-card-alt-size ($card-fluid-name, $card-fluid-width);
$card-warning-name: 'warning'; // Class name for card warnging color variant.
$card-warning-back-color: #ffca28; // Background color for card warnging color variant.
$card-warning-fore-color: #111; // Text color for card warnging color variant.
$card-warning-border-color: #e8b825; // Border style for card warnging color variant.
@include make-card-alt-color ($card-warning-name, $card-warning-back-color, $card-warning-fore-color, $card-warning-border-color);
$card-error-name: 'error'; // Class name for card error color variant.
$card-error-back-color: #b71c1c; // Background color for card error color variant.
$card-error-fore-color: #f8f8f8; // Text color for card error color variant.
$card-error-border-color: #a71a1a; // Border style for card error color variant.
@include make-card-alt-color ($card-error-name, $card-error-back-color, $card-error-fore-color, $card-error-border-color);
$card-section-dark-name: 'dark'; // Class name for card dark section variant.
$card-section-dark-back-color: #e0e0e0; // Background color for card dark section variant.
$card-section-dark-fore-color: #111; // Text color for card dark section variant.
@include make-card-section-alt-color ($card-section-dark-name, $card-section-dark-back-color, $card-section-dark-fore-color);
$card-section-double-padded-name: 'double-padded'; // Class name for card double-padded section variant.
$card-section-double-padded-padding: calc(1.5 * var(#{$universal-padding-var})); // Padding for card sectiondouble-padded section variant.
@include make-card-section-alt-style ($card-section-double-padded-name, $card-section-double-padded-padding);
$input-group-mobile-breakpoint: $mobile-breakpoint - 1px; // Breakpoint for fluid input group mobile view.
$form-back-color: #222; // Background color for forms.
$form-fore-color: #fdfdfd; // Text color for forms.
$form-border-color: #aaa; // Border color for forms.
$input-back-color: #111; // Background color for input elements.
$input-fore-color: #fdfdfd; // Text color for input elements.
$input-border-color: #aaa; // Border color for input elements.
$input-focus-color: #0288d1; // Border color for focused input elements.
$input-invalid-color: #d32f2f; // Border color for invalid input elements.
$button-back-color: #212121; // Background color for buttons.
$button-hover-back-color: #444; // Background color for buttons (hover).
$button-fore-color: #e2e2e2; // Text color for buttons.
$button-border-color: transparent; // Border color for buttons.
$button-hover-border-color: transparent; // Border color for buttons (hover).
$button-group-border-color: rgba(124,124,124,0.54); // Border color for button groups.
@import '../mini/input_control';
/*
Custom elements for forms and input elements.
*/
$button-primary-name: 'primary'; // Class name for primary button color variant.
$button-primary-back-color: #1976d2;// Background color for primary button color variant.
$button-primary-hover-back-color: #1565c0;// Background color for primary button color variant (hover).
$button-primary-fore-color: #f8f8f8;// Text color for primary button color variant.
@include make-button-alt-color ($button-primary-name, $button-primary-back-color, $button-primary-hover-back-color, $button-primary-fore-color);
$button-secondary-name: 'secondary'; // Class name for secondary button color variant.
$button-secondary-back-color: #d32f2f;// Background color for secondary button color variant.
$button-secondary-hover-back-color: #c62828;// Background color for secondary button color variant (hover).
$button-secondary-fore-color: #f8f8f8;// Text color for secondary button color variant.
@include make-button-alt-color ($button-secondary-name, $button-secondary-back-color, $button-secondary-hover-back-color, $button-secondary-fore-color);
$button-tertiary-name: 'tertiary'; // Class name for tertiary button color variant.
$button-tertiary-back-color: #308732;// Background color for tertiary button color variant.
$button-tertiary-hover-back-color: #277529;// Background color for tertiary button color variant (hover).
$button-tertiary-fore-color: #f8f8f8;// Text color for tertiary button color variant.
@include make-button-alt-color ($button-tertiary-name, $button-tertiary-back-color, $button-tertiary-hover-back-color, $button-tertiary-fore-color);
$button-inverse-name: 'inverse'; // Class name for inverse button color variant.
$button-inverse-back-color: #f8f8f8;// Background color for inverse button color variant.
$button-inverse-hover-back-color: #f0f0f0;// Background color for inverse button color variant (hover).
$button-inverse-fore-color: #212121;// Text color for inverse button color variant.
@include make-button-alt-color ($button-inverse-name, $button-inverse-back-color, $button-inverse-hover-back-color, $button-inverse-fore-color);
$button-small-name: 'small'; // Class name, padding and margin for small button size variant.
$button-small-padding: calc(0.5 * var(#{$universal-padding-var})) calc(0.75 * var(#{$universal-padding-var}));
$button-small-margin: var(#{$universal-margin-var});
@include make-button-alt-size ($button-small-name, $button-small-padding, $button-small-margin);
$button-large-name: 'large'; // Class name, padding and margin for large button size variant.
$button-large-padding: calc(1.5 * var(#{$universal-padding-var})) calc(2 * var(#{$universal-padding-var}));
$button-large-margin: var(#{$universal-margin-var});
@include make-button-alt-size ($button-large-name, $button-large-padding, $button-large-margin);
$header-height: 3.1875rem; // Height of the header element.
$header-back-color: #111; // Background color for the header element.
$header-hover-back-color: #222; // Background color for the header element (hover).
$header-fore-color: #f0f0f0; // Text color for the header element.
$header-border-color: #aaa; // Border color for the header element.
$nav-back-color: #111; // Background color for the nav element.
$nav-hover-back-color: #222; // Background color for the nav element (hover).
$nav-fore-color: #f0f0f0; // Text color for the nav element.
$nav-border-color: #aaa; // Border color for the nav element.
$nav-link-color: #0277bd; // Color for link in the nav element.
$footer-fore-color: #f0f0f0; // Text color for the footer element.
$footer-back-color: #111; // Background color for footer nav element.
$footer-border-color: #aaa; // Border color for the footer element.
$footer-link-color: #0277bd; // Color for link in the footer element.
$drawer-back-color: #111; // Background color for the drawer component.
$drawer-border-color: #aaa; // Border color for the drawer component.
$drawer-hover-back-color: #222; // Background color for the drawer component's close (hover).
$drawer-close-color: #f0f0f0; // Color of the close element for the drawer component.
$header-logo-font-size: 1.75rem; // Font size for the header logo element.
$nav-sublink-depth: 2; // Amount of subcategory classes to add.
$footer-font-size: 0.875rem; // Font size for text in footer element.
$drawer-toggle-font-size: 1.5em; // Font size for the drawer component's toggle. (prefer em units)
$drawer-width: 320px; // Width of the drawer component.
$drawer-close-size: 2rem; // Size of the close element for the drawer component.
$drawer-mobile-breakpoint: $mobile-breakpoint; // Mobile breakpoint for the drawer component.
@import '../mini/navigation';
$table-mobile-breakpoint: $mobile-breakpoint; // Breakpoint for <table> mobile view.
$table-max-height: 400px; // Maximum height of <table> elements (non-horizontal).
$table-caption-font-size: 1.5rem; // Font size for <caption> elements.
$table-mobile-card-label: 'data-label'; // Attribute used to replace column headers in mobile view.
$table-mobile-label-font-weight: 600; // Font weight for column header labels in mobile view.
$table-border-color: #ddd; // Border color for <table> elements.
$table-border-separator-color: #666; // Border color for the border between <thead> and <tbody>.
$table-th-back-color: #212121; // Background color for <th> elements.
$table-th-fore-color: #fdfdfd; // Text color for <th> elements.
$table-td-back-color: #111; // Background color for <td> elements.
$table-td-fore-color: #fdfdfd; // Text color for <td> elements.
$table-td-alt-back-color: #444; // Alternative background color for <td> elements in striped tables.
$table-td-hover-back-color: #5c819f; // Hover background color for <td> elements in hoverable tables.
@import '../mini/table';
$mark-back-color: #0277bd; // Background color for <mark>
$mark-fore-color: #fafafa; // Text color for <mark>
$mark-font-size: 0.95em; // Font size for <mark>
$mark-line-height: 1em; // Line height for <mark>
$toast-back-color: #424242; // Background color for toast component
$toast-fore-color: #fafafa; // Text color for toast component
$tooltip-back-color: #fafafa; // Background color for tooltip component
$tooltip-fore-color: #212121; // Text color for tooltip component
$modal-overlay-color: rgba(0,0,0,0.45); // Overlay color for modal dialog component
$modal-close-color: #f0f0f0; // Text color for the close button of the modal dialog component
$modal-close-hover-back-color: #222; // Background color for the close button of the modal dialog component (on hover/focus)
$modal-close-size: 1.75rem; // Font size for the close button of the modal dialog component
$collapse-label-height: 1.5rem; // Height for the labels in the collapse component
$collapse-content-max-height: 400px; // Max height for the content panes in the collapse component
$collapse-label-back-color: #111; // Background color for labels in the collapse component
$collapse-label-fore-color: #fafafa; // Text color for labels in the collapse component
$collapse-label-hover-back-color: #222; // Background color for labels in the collapse component (hover)
$collapse-selected-label-back-color: #444; // Background color for selected labels in the collapse component
$collapse-border-color: #aaa; // Border color for collapse component
$collapse-selected-label-border-color: #0277bd; // Border color for collapse component's selected labels
$collapse-content-back-color: #212121; // Background color for collapse component's content panes
@import '../mini/contextual';
/*
Custom elements for contextual background elements, toasts and tooltips.
*/
$mark-secondary-name: 'secondary'; // Class name for secondary <mark> color variant.
$mark-secondary-back-color: #d32f2f; // Background color for secondary <mark> color variant.
@include make-mark-alt-color ($mark-secondary-name, $mark-secondary-back-color);
$mark-tertiary-name: 'tertiary'; // Class name for tertiary <mark> color variant.
$mark-tertiary-back-color: #308732; // Background color for tertiary <mark> color variant.
@include make-mark-alt-color ($mark-tertiary-name, $mark-tertiary-back-color);
$mark-tag-name: 'tag'; // Class name, padding and border radius for tag <mark> size variant.
$mark-tag-padding: calc(var(#{$universal-padding-var})/2) var(#{$universal-padding-var});
$mark-tag-border-radius: 1em;
@include make-mark-alt-size ($mark-tag-name, $mark-tag-padding, $mark-tag-border-radius);
$progress-back-color: #aaa; // Background color of <progress>.
$progress-fore-color: #555; // Foreground color of <progress>.
$progress-height: 0.75rem; // Height of <progress>.
$progress-max-value: 1000; // Arithmetic max value of <progress> - use integer values.
$progress-inline-width: 60%; // Width of inline <progress> elements.
$spinner-donut-size: 1.25rem; // Size of the spinner donuts
$spinner-donut-border-thickness: 0.25rem; // Border thickness for spinner donuts
$spinner-donut-back-color: #ddd; // Background color for spinner donuts
$spinner-donut-fore-color: #555; // Foreground color for spinner donuts
@import '../mini/progress';
/*
Custom elements for progress bars and spinners.
*/
$progress-primary-name: 'primary'; // Class name for primary <progress> color variant.
$progress-primary-fore-color: #1976d2; // Foreground color for primary <progress> color variant.
@include make-progress-alt-color ($progress-primary-name, $progress-primary-fore-color);
$progress-secondary-name: 'secondary'; // Class name for secondary <progress> color variant.
$progress-secondary-fore-color: #d32f2f; // Foreground color for secondary <progress> color variant.
@include make-progress-alt-color ($progress-secondary-name, $progress-secondary-fore-color);
$progress-tertiary-name: 'tertiary'; // Class name for tertiary <progress> color variant.
$progress-tertiary-fore-color: #308732; // Foreground color for tertiary <progress> color variant.
@include make-progress-alt-color ($progress-tertiary-name, $progress-tertiary-fore-color);
$spinner-donut-primary-name: 'primary'; // Class name for primary spinner donut color variant.
$spinner-donut-primary-fore-color: #1976d2; // Foreground color for primary spinner donut color variant.
@include make-spinner-donut-alt-color ($spinner-donut-primary-name, $spinner-donut-primary-fore-color);
$spinner-donut-secondary-name: 'secondary'; // Class name for secondary spinner donut color variant.
$spinner-donut-secondary-fore-color: #d32f2f; // Foreground color for secondary spinner donut color variant.
@include make-spinner-donut-alt-color ($spinner-donut-secondary-name, $spinner-donut-secondary-fore-color);
$spinner-donut-tertiary-name: 'tertiary'; // Class name for tertiary spinner donut color variant.
$spinner-donut-tertiary-fore-color: #308732; // Foreground color for tertiary spinner donut color variant.
@include make-spinner-donut-alt-color ($spinner-donut-tertiary-name, $spinner-donut-tertiary-fore-color);
@import '../mini/icon';
$box-shadow-generic: 0 4*$__1px 4*$__1px 0 rgba(0,0,0,0.125), 0 2*$__1px 2*$__1px -2*$__1px rgba(0,0,0,0.125);
$border-generic-color: rgba(0,0,0,0.3); // Border color for bordered elements.
@import '../mini/utility';

2169
docs/v3/flavors/mini-default.css Normal file
View file

File diff suppressed because it is too large Load diff

1
docs/v3/flavors/mini-default.min.css vendored Normal file
View file

File diff suppressed because one or more lines are too long

138
docs/v3/flavors/mini-default.scss Normal file
View file

@ -0,0 +1,138 @@
// 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.
/*
Flavor name: Default (mini-default)
Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris
mini.css version: v3.0.0-alpha.3
*/
@import '../mini/core';
@import '../mini/layout';
/*
Custom elements for card elements.
*/
$card-small-name: 'small'; // Class name for small cards.
$card-small-width: 240px; // Width for small cards.
@include make-card-alt-size ($card-small-name, $card-small-width);
$card-large-name: 'large'; // Class name for large cards.
$card-large-width: 480px; // Width for large cards.
@include make-card-alt-size ($card-large-name, $card-large-width);
$card-fluid-name: 'fluid'; // Class name for fluid cards.
$card-fluid-width: 100%; // Width for fluid cards.
@include make-card-alt-size ($card-fluid-name, $card-fluid-width);
$card-warning-name: 'warning'; // Class name for card warnging color variant.
$card-warning-back-color: #ffca28; // Background color for card warnging color variant.
$card-warning-fore-color: #111; // Text color for card warnging color variant.
$card-warning-border-color: #e8b825; // Border style for card warnging color variant.
@include make-card-alt-color ($card-warning-name, $card-warning-back-color, $card-warning-fore-color, $card-warning-border-color);
$card-error-name: 'error'; // Class name for card error color variant.
$card-error-back-color: #b71c1c; // Background color for card error color variant.
$card-error-fore-color: #f8f8f8; // Text color for card error color variant.
$card-error-border-color: #a71a1a; // Border style for card error color variant.
@include make-card-alt-color ($card-error-name, $card-error-back-color, $card-error-fore-color, $card-error-border-color);
$card-section-dark-name: 'dark'; // Class name for card dark section variant.
$card-section-dark-back-color: #e0e0e0; // Background color for card dark section variant.
$card-section-dark-fore-color: #111; // Text color for card dark section variant.
@include make-card-section-alt-color ($card-section-dark-name, $card-section-dark-back-color, $card-section-dark-fore-color);
$card-section-double-padded-name: 'double-padded'; // Class name for card double-padded section variant.
$card-section-double-padded-padding: calc(1.5 * var(#{$universal-padding-var})); // Padding for card sectiondouble-padded section variant.
@include make-card-section-alt-style ($card-section-double-padded-name, $card-section-double-padded-padding);
@import '../mini/input_control';
/*
Custom elements for forms and input elements.
*/
$button-primary-name: 'primary'; // Class name for primary button color variant.
$button-primary-back-color: #1976d2; // Background color for primary button color variant.
$button-primary-hover-back-color:#1565c0; // Background color for primary button color variant (hover).
$button-primary-fore-color: #f8f8f8; // Text color for primary button color variant.
@include make-button-alt-color ($button-primary-name, $button-primary-back-color, $button-primary-hover-back-color, $button-primary-fore-color);
$button-secondary-name: 'secondary'; // Class name for secondary button color variant.
$button-secondary-back-color: #d32f2f; // Background color for secondary button color variant.
$button-secondary-hover-back-color:#c62828; // Background color for secondary button color variant (hover).
$button-secondary-fore-color: #f8f8f8; // Text color for secondary button color variant.
@include make-button-alt-color ($button-secondary-name, $button-secondary-back-color, $button-secondary-hover-back-color, $button-secondary-fore-color);
$button-tertiary-name: 'tertiary'; // Class name for tertiary button color variant.
$button-tertiary-back-color: #308732; // Background color for tertiary button color variant.
$button-tertiary-hover-back-color:#277529; // Background color for tertiary button color variant (hover).
$button-tertiary-fore-color: #f8f8f8; // Text color for tertiary button color variant.
@include make-button-alt-color ($button-tertiary-name, $button-tertiary-back-color, $button-tertiary-hover-back-color, $button-tertiary-fore-color);
$button-inverse-name: 'inverse'; // Class name for inverse button color variant.
$button-inverse-back-color: #212121; // Background color for inverse button color variant.
$button-inverse-hover-back-color:#111; // Background color for inverse button color variant (hover).
$button-inverse-fore-color: #f8f8f8; // Text color for inverse button color variant.
@include make-button-alt-color ($button-inverse-name, $button-inverse-back-color, $button-inverse-hover-back-color, $button-inverse-fore-color);
$button-small-name: 'small'; // Class name, padding and margin for small button size variant.
$button-small-padding: calc(0.5 * var(#{$universal-padding-var})) calc(0.75 * var(#{$universal-padding-var}));
$button-small-margin: var(#{$universal-margin-var});
@include make-button-alt-size ($button-small-name, $button-small-padding, $button-small-margin);
$button-large-name: 'large'; // Class name, padding and margin for large button size variant.
$button-large-padding: calc(1.5 * var(#{$universal-padding-var})) calc(2 * var(#{$universal-padding-var}));
$button-large-margin: var(#{$universal-margin-var});
@include make-button-alt-size ($button-large-name, $button-large-padding, $button-large-margin);
@import '../mini/navigation';
@import '../mini/table';
@import '../mini/contextual';
/*
Custom elements for contextual background elements, toasts and tooltips.
*/
$mark-secondary-name: 'secondary'; // Class name for secondary <mark> color variant.
$mark-secondary-back-color: #d32f2f; // Background color for secondary <mark> color variant.
@include make-mark-alt-color ($mark-secondary-name, $mark-secondary-back-color);
$mark-tertiary-name: 'tertiary'; // Class name for tertiary <mark> color variant.
$mark-tertiary-back-color: #308732; // Background color for tertiary <mark> color variant.
@include make-mark-alt-color ($mark-tertiary-name, $mark-tertiary-back-color);
$mark-tag-name: 'tag'; // Class name, padding and border radius for tag <mark> size variant.
$mark-tag-padding: calc(var(#{$universal-padding-var})/2) var(#{$universal-padding-var});
$mark-tag-border-radius: 1em;
@include make-mark-alt-size ($mark-tag-name, $mark-tag-padding, $mark-tag-border-radius);
@import '../mini/progress';
/*
Custom elements for progress bars and spinners.
*/
$progress-primary-name: 'primary'; // Class name for primary <progress> color variant.
$progress-primary-fore-color: #1976d2; // Foreground color for primary <progress> color variant.
@include make-progress-alt-color ($progress-primary-name, $progress-primary-fore-color);
$progress-secondary-name: 'secondary'; // Class name for secondary <progress> color variant.
$progress-secondary-fore-color: #d32f2f; // Foreground color for secondary <progress> color variant.
@include make-progress-alt-color ($progress-secondary-name, $progress-secondary-fore-color);
$progress-tertiary-name: 'tertiary'; // Class name for tertiary <progress> color variant.
$progress-tertiary-fore-color: #308732; // Foreground color for tertiary <progress> color variant.
@include make-progress-alt-color ($progress-tertiary-name, $progress-tertiary-fore-color);
$spinner-donut-primary-name: 'primary'; // Class name for primary spinner donutcolor variant.
$spinner-donut-primary-fore-color: #1976d2; // Foreground color for primary spinner donut color variant.
@include make-spinner-donut-alt-color ($spinner-donut-primary-name, $spinner-donut-primary-fore-color);
$spinner-donut-secondary-name: 'secondary'; // Class name for secondary spinner donut color variant.
$spinner-donut-secondary-fore-color: #d32f2f; // Foreground color for secondary spinner donut color variant.
@include make-spinner-donut-alt-color ($spinner-donut-secondary-name, $spinner-donut-secondary-fore-color);
$spinner-donut-tertiary-name: 'tertiary'; // Class name for tertiary spinner donut color variant.
$spinner-donut-tertiary-fore-color: #308732; // Foreground color for tertiary spinner donut color variant.
@include make-spinner-donut-alt-color ($spinner-donut-tertiary-name, $spinner-donut-tertiary-fore-color);
@import '../mini/icon';
@import '../mini/utility';

2168
docs/v3/flavors/mini-nord.css Normal file
View file

File diff suppressed because it is too large Load diff

1
docs/v3/flavors/mini-nord.min.css vendored Normal file
View file

File diff suppressed because one or more lines are too long

277
docs/v3/flavors/mini-nord.scss Normal file
View file

@ -0,0 +1,277 @@
// 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.
/*
Flavor name: Nord (mini-nord)
Author: tphecca (https://github.com/tphecca)
Maintainers: tphecca
mini.css version: v3.0.0
*/
// This flavor is based on the Nord color palette: https://github.com/arcticicestudio/nord
$base-root-font-size: 16px; // Root font sizing for all elements (`px` only)
$base-line-height: 1.5; // Line height for most elements
$fore-color: #2e3440; // Text & foreground color
$secondary-fore-color: #3b4252; // Secondary text & foreground color
$back-color: #eceff4; // Background color
$secondary-back-color: #e5e9f0; // Secondary background color
$blockquote-color: #d08770; // <blockquote> sidebar and quotation color
$pre-color: #b48ead; // <pre> sidebar color
$border-color: #d8dee9; // Border color
$secondary-border-color: #e5e9f0; // Secondary border color
$heading-line-height: 1.2; // Line height for headings
$heading-ratio: 1.19; // Ratio for headings (strictly unitless)
$subheading-font-size:0.75em; // Font sizing for <small> elements in headings
$subheading-top-margin: -0.25rem; // Top margin of <small> elements in headings
$heading-font-weight: 500; // Font weight for headings
$horizontal-rule-line-height: 1.25em; // <hr> line height
$universal-margin: 0.5rem; // Universal margin for the most elements
$universal-padding: 0.5rem; // Universal padding for the most elements
$universal-border-radius: 0.125rem; // Universal border-radius for most elements
$universal-box-shadow: none; // Universal box-shadow for most elements
$small-element-font-size: 0.75em; // Font size for <small>, <sub>, <sup>
$small-font-size: 0.75em; // Font sizing for <small> elements
$blockquote-quotation-size: 3rem; // Font size for the quotation of <blockquote>
$blockquote-cite-size: 0.75em; // Font size for the [cite] of <blockquote>
$code-font-size: 0.85em; // Font size for <code>, <kbd>
$sup-top: -0.5em; // <sup> top
$sub-bottom: -0.25em; // <sub> bottom
$a-link-color: #88c0d0; // Color for <a>:link
$a-visited-color: #5e81ac; // Color for <a>:visited
$bold-font-weight: 700; // Font weight for <b> and <strong>
$mobile-breakpoint: 768px; // Breakpoint between small and medium screens (px)
$large-screen-breakpoint: 1280px; // Breakpoint between medium and large screens (px)
@import '../mini/core';
$grid-column-count: 12; // Number of columns in the grid (integer value only).
$grid-medium-breakpoint: $mobile-breakpoint; // Medium screen breakpoint for grid.
$grid-large-breakpoint: $large-screen-breakpoint; // Large screen breakpoint for grid.
$card-normal-width: 320px; // Width for normal cards.
$card-section-media-height: 200px; // Height for cards' media sections.
$card-fore-color: #2e3440; // Text color for the cards.
$card-back-color: #eceff4; // Background color for the cards.
$card-border-color: #e5e9f0; // Border color for the cards.
@import '../mini/layout';
/*
Custom elements for card elements.
*/
$card-small-name: 'small'; // Class name for small cards.
$card-small-width: 240px; // Width for small cards.
@include make-card-alt-size ($card-small-name, $card-small-width);
$card-large-name: 'large'; // Class name for large cards.
$card-large-width: 480px; // Width for large cards.
@include make-card-alt-size ($card-large-name, $card-large-width);
$card-fluid-name: 'fluid'; // Class name for fluid cards.
$card-fluid-width: 100%; // Width for fluid cards.
@include make-card-alt-size ($card-fluid-name, $card-fluid-width);
$card-warning-name: 'warning'; // Class name for card warnging color variant.
$card-warning-back-color: #ebcb8b; // Background color for card warnging color variant.
$card-warning-fore-color: #2e3440; // Text color for card warnging color variant.
$card-warning-border-color: #d08770; // Border style for card warnging color variant.
@include make-card-alt-color ($card-warning-name, $card-warning-back-color, $card-warning-fore-color, $card-warning-border-color);
$card-error-name: 'error'; // Class name for card error color variant.
$card-error-back-color: #bf616a; // Background color for card error color variant.
$card-error-fore-color: #2e3440; // Text color for card error color variant.
$card-error-border-color: #434c5e; // Border style for card error color variant.
@include make-card-alt-color ($card-error-name, $card-error-back-color, $card-error-fore-color, $card-error-border-color);
$card-section-dark-name: 'dark'; // Class name for card dark section variant.
$card-section-dark-back-color: #d8dee9; // Background color for card dark section variant.
$card-section-dark-fore-color: #2e3440; // Text color for card dark section variant.
@include make-card-section-alt-color ($card-section-dark-name, $card-section-dark-back-color, $card-section-dark-fore-color);
$card-section-double-padded-name: 'double-padded'; // Class name for card double-padded section variant.
$card-section-double-padded-padding: calc(1.5 * var(#{$universal-padding-var})); // Padding for card sectiondouble-padded section variant.
@include make-card-section-alt-style ($card-section-double-padded-name, $card-section-double-padded-padding);
$input-group-mobile-breakpoint: $mobile-breakpoint - 1px; // Breakpoint for fluid input group mobile view.
$form-back-color: #e5e9f0; // Background color for forms.
$form-fore-color: #2e3440; // Text color for forms.
$form-border-color: #e5e9f0; // Border color for forms.
$input-back-color: #eceff4; // Background color for input elements.
$input-fore-color: #2e3440; // Text color for input elements.
$input-border-color: #e5e9f0; // Border color for input elements.
$input-focus-color: #88c0d0; // Border color for focused input elements.
$input-invalid-color: #bf616a; // Border color for invalid input elements.
$button-back-color: #e5e9f0; // Background color for buttons.
$button-hover-back-color: #d8dee9; // Background color for buttons (hover).
$button-fore-color: #2e3440; // Text color for buttons.
$button-border-color: transparent; // Border color for buttons.
$button-hover-border-color: transparent; // Border color for buttons (hover).
$button-group-border-color: rgba(124,124,124,0.54); // Border color for button groups.
@import '../mini/input_control';
/*
Custom elements for forms and input elements.
*/
$button-primary-name: 'primary'; // Class name for primary button color variant.
$button-primary-back-color: #5e81ac;// Background color for primary button color variant.
$button-primary-hover-back-color: #5e81ac;// Background color for primary button color variant (hover).
$button-primary-fore-color: #eceff4;// Text color for primary button color variant.
@include make-button-alt-color ($button-primary-name, $button-primary-back-color, $button-primary-hover-back-color, $button-primary-fore-color);
$button-secondary-name: 'secondary'; // Class name for secondary button color variant.
$button-secondary-back-color: #bf616a;// Background color for secondary button color variant.
$button-secondary-hover-back-color: #bf616a;// Background color for secondary button color variant (hover).
$button-secondary-fore-color: #eceff4;// Text color for secondary button color variant.
@include make-button-alt-color ($button-secondary-name, $button-secondary-back-color, $button-secondary-hover-back-color, $button-secondary-fore-color);
$button-tertiary-name: 'tertiary'; // Class name for tertiary button color variant.
$button-tertiary-back-color: #a3be8c;// Background color for tertiary button color variant.
$button-tertiary-hover-back-color: #a3be8c;// Background color for tertiary button color variant (hover).
$button-tertiary-fore-color: #434c5e;// Text color for tertiary button color variant.
@include make-button-alt-color ($button-tertiary-name, $button-tertiary-back-color, $button-tertiary-hover-back-color, $button-tertiary-fore-color);
$button-inverse-name: 'inverse'; // Class name for inverse button color variant.
$button-inverse-back-color: #3b4252;// Background color for inverse button color variant.
$button-inverse-hover-back-color: #2e3440;// Background color for inverse button color variant (hover).
$button-inverse-fore-color: #eceff4;// Text color for inverse button color variant.
@include make-button-alt-color ($button-inverse-name, $button-inverse-back-color, $button-inverse-hover-back-color, $button-inverse-fore-color);
$button-small-name: 'small'; // Class name, padding and margin for small button size variant.
$button-small-padding: calc(0.5 * var(#{$universal-padding-var})) calc(0.75 * var(#{$universal-padding-var}));
$button-small-margin: var(#{$universal-margin-var});
@include make-button-alt-size ($button-small-name, $button-small-padding, $button-small-margin);
$button-large-name: 'large'; // Class name, padding and margin for large button size variant.
$button-large-padding: calc(1.5 * var(#{$universal-padding-var})) calc(2 * var(#{$universal-padding-var}));
$button-large-margin: var(#{$universal-margin-var});
@include make-button-alt-size ($button-large-name, $button-large-padding, $button-large-margin);
$header-height: 3.1875rem; // Height of the header element.
$header-back-color: #eceff4; // Background color for the header element.
$header-hover-back-color: #e5e9f0; // Background color for the header element (hover).
$header-fore-color: #3b4252; // Text color for the header element.
$header-border-color: #e5e9f0; // Border color for the header element.
$nav-back-color: #eceff4; // Background color for the nav element.
$nav-hover-back-color: #e5e9f0; // Background color for the nav element (hover).
$nav-fore-color: #3b4252; // Text color for the nav element.
$nav-border-color: #e5e9f0; // Border color for the nav element.
$nav-link-color: #88c0d0; // Color for link in the nav element.
$footer-fore-color: #3b4252; // Text color for the footer element.
$footer-back-color: #eceff4; // Background color for footer nav element.
$footer-border-color: #e5e9f0; // Border color for the footer element.
$footer-link-color: #88c0d0; // Color for link in the footer element.
$drawer-back-color: #eceff4; // Background color for the drawer component.
$drawer-border-color: #e5e9f0; // Border color for the drawer component.
$drawer-hover-back-color: #e5e9f0; // Background color for the drawer component's close (hover).
$drawer-close-color: #3b4252; // Color of the close element for the drawer component.
$header-logo-font-size: 1.75rem; // Font size for the header logo element.
$nav-sublink-depth: 2; // Amount of subcategory classes to add.
$footer-font-size: 0.875rem; // Font size for text in footer element.
$drawer-toggle-font-size: 1.5em; // Font size for the drawer component's toggle. (prefer em units)
$drawer-width: 320px; // Width of the drawer component.
$drawer-close-size: 2rem; // Size of the close element for the drawer component.
$drawer-mobile-breakpoint: $mobile-breakpoint; // Mobile breakpoint for the drawer component.
@import '../mini/navigation';
$table-mobile-breakpoint: $mobile-breakpoint; // Breakpoint for <table> mobile view.
$table-max-height: 400px; // Maximum height of <table> elements (non-horizontal).
$table-caption-font-size: 1.5rem; // Font size for <caption> elements.
$table-mobile-card-label: 'data-label'; // Attribute used to replace column headers in mobile view.
$table-mobile-label-font-weight: 600; // Font weight for column header labels in mobile view.
$table-border-color: #d8dee9; // Border color for <table> elements.
$table-border-separator-color: #434c5e; // Border color for the border between <thead> and <tbody>.
$table-th-back-color: #e5e9f0; // Background color for <th> elements.
$table-th-fore-color: #2e3440; // Text color for <th> elements.
$table-td-back-color: #eceff4; // Background color for <td> elements.
$table-td-fore-color: #2e3440; // Text color for <td> elements.
$table-td-alt-back-color: #e5e9f0; // Alternative background color for <td> elements in striped tables.
$table-td-hover-back-color: #88c0d0; // Hover background color for <td> elements in hoverable tables.
@import '../mini/table';
$mark-back-color: #5e81ac; // Background color for <mark>
$mark-fore-color: #fafafa; // Text color for <mark>
$mark-font-size: 0.95em; // Font size for <mark>
$mark-line-height: 1em; // Line height for <mark>
$toast-back-color: #2e3440; // Background color for toast component
$toast-fore-color: #eceff4; // Text color for toast component
$tooltip-back-color: #2e3440; // Background color for tooltip component
$tooltip-fore-color: #eceff4; // Text color for tooltip component
$modal-overlay-color: rgba(0,0,0,0.45); // Overlay color for modal dialog component
$modal-close-color: #3b4252; // Text color for the close button of the modal dialog component
$modal-close-hover-back-color: #e5e9f0; // Background color for the close button of the modal dialog component (on hover/focus)
$modal-close-size: 1.75rem; // Font size for the close button of the modal dialog component
$collapse-label-height: 1.5rem; // Height for the labels in the collapse component
$collapse-content-max-height: 400px; // Max height for the content panes in the collapse component
$collapse-label-back-color: #e5e9f0; // Background color for labels in the collapse component
$collapse-label-fore-color: #2e3440; // Text color for labels in the collapse component
$collapse-label-hover-back-color: #e5e9f0; // Background color for labels in the collapse component (hover)
$collapse-selected-label-back-color: #e5e9f0; // Background color for selected labels in the collapse component
$collapse-border-color: #e5e9f0; // Border color for collapse component
$collapse-selected-label-border-color: #88c0d0; // Border color for collapse component's selected labels
$collapse-content-back-color: #fafafa; // Background color for collapse component's content panes
@import '../mini/contextual';
/*
Custom elements for contextual background elements, toasts and tooltips.
*/
$mark-secondary-name: 'secondary'; // Class name for secondary <mark> color variant.
$mark-secondary-back-color: #bf616a; // Background color for secondary <mark> color variant.
@include make-mark-alt-color ($mark-secondary-name, $mark-secondary-back-color);
$mark-tertiary-name: 'tertiary'; // Class name for tertiary <mark> color variant.
$mark-tertiary-back-color: #a3be8c; // Background color for tertiary <mark> color variant.
@include make-mark-alt-color ($mark-tertiary-name, $mark-tertiary-back-color);
$mark-tag-name: 'tag'; // Class name, padding and border radius for tag <mark> size variant.
$mark-tag-padding: calc(var(#{$universal-padding-var})/2) var(#{$universal-padding-var});
$mark-tag-border-radius: 1em;
@include make-mark-alt-size ($mark-tag-name, $mark-tag-padding, $mark-tag-border-radius);
$progress-back-color: #e5e9f0; // Background color of <progress>.
$progress-fore-color: #434c5e; // Foreground color of <progress>.
$progress-height: 0.75rem; // Height of <progress>.
$progress-max-value: 1000; // Arithmetic max value of <progress> - use integer values.
$progress-inline-width: 60%; // Width of inline <progress> elements.
$spinner-donut-size: 1.25rem; // Size of the spinner donuts
$spinner-donut-border-thickness: 0.25rem; // Border thickness for spinner donuts
$spinner-donut-back-color: #d8dee9; // Background color for spinner donuts
$spinner-donut-fore-color: #434c5e; // Foreground color for spinner donuts
@import '../mini/progress';
/*
Custom elements for progress bars and spinners.
*/
$progress-primary-name: 'primary'; // Class name for primary <progress> color variant.
$progress-primary-fore-color: #5e81ac; // Foreground color for primary <progress> color variant.
@include make-progress-alt-color ($progress-primary-name, $progress-primary-fore-color);
$progress-secondary-name: 'secondary'; // Class name for secondary <progress> color variant.
$progress-secondary-fore-color: #bf616a; // Foreground color for secondary <progress> color variant.
@include make-progress-alt-color ($progress-secondary-name, $progress-secondary-fore-color);
$progress-tertiary-name: 'tertiary'; // Class name for tertiary <progress> color variant.
$progress-tertiary-fore-color: #a3be8c; // Foreground color for tertiary <progress> color variant.
@include make-progress-alt-color ($progress-tertiary-name, $progress-tertiary-fore-color);
$spinner-donut-primary-name: 'primary'; // Class name for primary spinner donut color variant.
$spinner-donut-primary-fore-color: #5e81ac; // Foreground color for primary spinner donut color variant.
@include make-spinner-donut-alt-color ($spinner-donut-primary-name, $spinner-donut-primary-fore-color);
$spinner-donut-secondary-name: 'secondary'; // Class name for secondary spinner donut color variant.
$spinner-donut-secondary-fore-color: #bf616a; // Foreground color for secondary spinner donut color variant.
@include make-spinner-donut-alt-color ($spinner-donut-secondary-name, $spinner-donut-secondary-fore-color);
$spinner-donut-tertiary-name: 'tertiary'; // Class name for tertiary spinner donut color variant.
$spinner-donut-tertiary-fore-color: #a3be8c; // Foreground color for tertiary spinner donut color variant.
@include make-spinner-donut-alt-color ($spinner-donut-tertiary-name, $spinner-donut-tertiary-fore-color);
@import '../mini/icon';
$box-shadow-generic: 0 4*$__1px 4*$__1px 0 rgba(0,0,0,0.125), 0 2*$__1px 2*$__1px -2*$__1px rgba(0,0,0,0.125);
$border-generic-color: rgba(0,0,0,0.3); // Border color for bordered elements.
@import '../mini/utility';

2
docs/v3/index.html
View file

@ -19,7 +19,7 @@
<div class="index-splash-image"></div> <div class="index-splash-image"></div>
<h1 class="splash">mini<small>.css</small></h1> <h1 class="splash">mini<small>.css</small></h1>
<p class="splash">minimal, responsive, style-agnostic <br>CSS framework</p> <p class="splash">minimal, responsive, style-agnostic <br>CSS framework</p>
<p id="version-info">v3.0.0-alpha.3</p> <p id="version-info">v3.0.0</p>
<a class="button splash" href="docs">Get started</a> <a class="button splash" href="docs">Get started</a>
</div> </div>
<header class="row sticky"> <header class="row sticky">

BIN
docs/v3/mini.zip
View file

Binary file not shown.

2
docs/vinf.js
View file

@ -1,4 +1,4 @@
// Get the current version of the Gluon branch. // Get the current version of the Gluon branch.
module.exports = { module.exports = {
version: 'v3.0.0-alpha.3' version: 'v3.0.0'
} }

276
src/flavors/mini-dark.scss Normal file
View file

@ -0,0 +1,276 @@
// 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.
/*
Flavor name: Dark (mini-dark)
Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris
mini.css version: v3.0.0
*/
$base-root-font-size: 16px; // Root font sizing for all elements (`px` only)
$base-line-height: 1.5; // Line height for most elements
$fore-color: #fdfdfd; // Text & foreground color
$secondary-fore-color: #f0f0f0; // Secondary text & foreground color
$back-color: #111; // Background color
$secondary-back-color: #222; // Secondary background color
$blockquote-color: #f57c00; // <blockquote> sidebar and quotation color
$pre-color: #1565c0; // <pre> sidebar color
$border-color: #ddd; // Border color
$secondary-border-color: #aaa; // Secondary border color
$heading-line-height: 1.2; // Line height for headings
$heading-ratio: 1.19; // Ratio for headings (strictly unitless)
$subheading-font-size:0.75em; // Font sizing for <small> elements in headings
$subheading-top-margin: -0.25rem; // Top margin of <small> elements in headings
$heading-font-weight: 500; // Font weight for headings
$horizontal-rule-line-height: 1.25em; // <hr> line height
$universal-margin: 0.5rem; // Universal margin for the most elements
$universal-padding: 0.5rem; // Universal padding for the most elements
$universal-border-radius: 0.125rem; // Universal border-radius for most elements
$universal-box-shadow: none; // Universal box-shadow for most elements
$small-element-font-size: 0.75em; // Font size for <small>, <sub>, <sup>
$small-font-size: 0.75em; // Font sizing for <small> elements
$blockquote-quotation-size: 3rem; // Font size for the quotation of <blockquote>
$blockquote-cite-size: 0.75em; // Font size for the [cite] of <blockquote>
$code-font-size: 0.85em; // Font size for <code>, <kbd>
$sup-top: -0.5em; // <sup> top
$sub-bottom: -0.25em; // <sub> bottom
$a-link-color: #0277bd; // Color for <a>:link
$a-visited-color: #01579b; // Color for <a>:visited
$bold-font-weight: 700; // Font weight for <b> and <strong>
$mobile-breakpoint: 768px; // Breakpoint between small and medium screens (px)
$large-screen-breakpoint: 1280px; // Breakpoint between medium and large screens (px)
@import '../mini/core';
$grid-column-count: 12; // Number of columns in the grid (integer value only).
$grid-medium-breakpoint: $mobile-breakpoint; // Medium screen breakpoint for grid.
$grid-large-breakpoint: $large-screen-breakpoint; // Large screen breakpoint for grid.
$card-normal-width: 320px; // Width for normal cards.
$card-section-media-height: 200px; // Height for cards' media sections.
$card-fore-color: #fdfdfd; // Text color for the cards.
$card-back-color: #111; // Background color for the cards.
$card-border-color: #aaa; // Border color for the cards.
@import '../mini/layout';
/*
Custom elements for card elements.
*/
$card-small-name: 'small'; // Class name for small cards.
$card-small-width: 240px; // Width for small cards.
@include make-card-alt-size ($card-small-name, $card-small-width);
$card-large-name: 'large'; // Class name for large cards.
$card-large-width: 480px; // Width for large cards.
@include make-card-alt-size ($card-large-name, $card-large-width);
$card-fluid-name: 'fluid'; // Class name for fluid cards.
$card-fluid-width: 100%; // Width for fluid cards.
@include make-card-alt-size ($card-fluid-name, $card-fluid-width);
$card-warning-name: 'warning'; // Class name for card warnging color variant.
$card-warning-back-color: #ffca28; // Background color for card warnging color variant.
$card-warning-fore-color: #111; // Text color for card warnging color variant.
$card-warning-border-color: #e8b825; // Border style for card warnging color variant.
@include make-card-alt-color ($card-warning-name, $card-warning-back-color, $card-warning-fore-color, $card-warning-border-color);
$card-error-name: 'error'; // Class name for card error color variant.
$card-error-back-color: #b71c1c; // Background color for card error color variant.
$card-error-fore-color: #f8f8f8; // Text color for card error color variant.
$card-error-border-color: #a71a1a; // Border style for card error color variant.
@include make-card-alt-color ($card-error-name, $card-error-back-color, $card-error-fore-color, $card-error-border-color);
$card-section-dark-name: 'dark'; // Class name for card dark section variant.
$card-section-dark-back-color: #e0e0e0; // Background color for card dark section variant.
$card-section-dark-fore-color: #111; // Text color for card dark section variant.
@include make-card-section-alt-color ($card-section-dark-name, $card-section-dark-back-color, $card-section-dark-fore-color);
$card-section-double-padded-name: 'double-padded'; // Class name for card double-padded section variant.
$card-section-double-padded-padding: calc(1.5 * var(#{$universal-padding-var})); // Padding for card sectiondouble-padded section variant.
@include make-card-section-alt-style ($card-section-double-padded-name, $card-section-double-padded-padding);
$input-group-mobile-breakpoint: $mobile-breakpoint - 1px; // Breakpoint for fluid input group mobile view.
$form-back-color: #222; // Background color for forms.
$form-fore-color: #fdfdfd; // Text color for forms.
$form-border-color: #aaa; // Border color for forms.
$input-back-color: #111; // Background color for input elements.
$input-fore-color: #fdfdfd; // Text color for input elements.
$input-border-color: #aaa; // Border color for input elements.
$input-focus-color: #0288d1; // Border color for focused input elements.
$input-invalid-color: #d32f2f; // Border color for invalid input elements.
$button-back-color: #212121; // Background color for buttons.
$button-hover-back-color: #444; // Background color for buttons (hover).
$button-fore-color: #e2e2e2; // Text color for buttons.
$button-border-color: transparent; // Border color for buttons.
$button-hover-border-color: transparent; // Border color for buttons (hover).
$button-group-border-color: rgba(124,124,124,0.54); // Border color for button groups.
@import '../mini/input_control';
/*
Custom elements for forms and input elements.
*/
$button-primary-name: 'primary'; // Class name for primary button color variant.
$button-primary-back-color: #1976d2;// Background color for primary button color variant.
$button-primary-hover-back-color: #1565c0;// Background color for primary button color variant (hover).
$button-primary-fore-color: #f8f8f8;// Text color for primary button color variant.
@include make-button-alt-color ($button-primary-name, $button-primary-back-color, $button-primary-hover-back-color, $button-primary-fore-color);
$button-secondary-name: 'secondary'; // Class name for secondary button color variant.
$button-secondary-back-color: #d32f2f;// Background color for secondary button color variant.
$button-secondary-hover-back-color: #c62828;// Background color for secondary button color variant (hover).
$button-secondary-fore-color: #f8f8f8;// Text color for secondary button color variant.
@include make-button-alt-color ($button-secondary-name, $button-secondary-back-color, $button-secondary-hover-back-color, $button-secondary-fore-color);
$button-tertiary-name: 'tertiary'; // Class name for tertiary button color variant.
$button-tertiary-back-color: #308732;// Background color for tertiary button color variant.
$button-tertiary-hover-back-color: #277529;// Background color for tertiary button color variant (hover).
$button-tertiary-fore-color: #f8f8f8;// Text color for tertiary button color variant.
@include make-button-alt-color ($button-tertiary-name, $button-tertiary-back-color, $button-tertiary-hover-back-color, $button-tertiary-fore-color);
$button-inverse-name: 'inverse'; // Class name for inverse button color variant.
$button-inverse-back-color: #f8f8f8;// Background color for inverse button color variant.
$button-inverse-hover-back-color: #f0f0f0;// Background color for inverse button color variant (hover).
$button-inverse-fore-color: #212121;// Text color for inverse button color variant.
@include make-button-alt-color ($button-inverse-name, $button-inverse-back-color, $button-inverse-hover-back-color, $button-inverse-fore-color);
$button-small-name: 'small'; // Class name, padding and margin for small button size variant.
$button-small-padding: calc(0.5 * var(#{$universal-padding-var})) calc(0.75 * var(#{$universal-padding-var}));
$button-small-margin: var(#{$universal-margin-var});
@include make-button-alt-size ($button-small-name, $button-small-padding, $button-small-margin);
$button-large-name: 'large'; // Class name, padding and margin for large button size variant.
$button-large-padding: calc(1.5 * var(#{$universal-padding-var})) calc(2 * var(#{$universal-padding-var}));
$button-large-margin: var(#{$universal-margin-var});
@include make-button-alt-size ($button-large-name, $button-large-padding, $button-large-margin);
$header-height: 3.1875rem; // Height of the header element.
$header-back-color: #111; // Background color for the header element.
$header-hover-back-color: #222; // Background color for the header element (hover).
$header-fore-color: #f0f0f0; // Text color for the header element.
$header-border-color: #aaa; // Border color for the header element.
$nav-back-color: #111; // Background color for the nav element.
$nav-hover-back-color: #222; // Background color for the nav element (hover).
$nav-fore-color: #f0f0f0; // Text color for the nav element.
$nav-border-color: #aaa; // Border color for the nav element.
$nav-link-color: #0277bd; // Color for link in the nav element.
$footer-fore-color: #f0f0f0; // Text color for the footer element.
$footer-back-color: #111; // Background color for footer nav element.
$footer-border-color: #aaa; // Border color for the footer element.
$footer-link-color: #0277bd; // Color for link in the footer element.
$drawer-back-color: #111; // Background color for the drawer component.
$drawer-border-color: #aaa; // Border color for the drawer component.
$drawer-hover-back-color: #222; // Background color for the drawer component's close (hover).
$drawer-close-color: #f0f0f0; // Color of the close element for the drawer component.
$header-logo-font-size: 1.75rem; // Font size for the header logo element.
$nav-sublink-depth: 2; // Amount of subcategory classes to add.
$footer-font-size: 0.875rem; // Font size for text in footer element.
$drawer-toggle-font-size: 1.5em; // Font size for the drawer component's toggle. (prefer em units)
$drawer-width: 320px; // Width of the drawer component.
$drawer-close-size: 2rem; // Size of the close element for the drawer component.
$drawer-mobile-breakpoint: $mobile-breakpoint; // Mobile breakpoint for the drawer component.
@import '../mini/navigation';
$table-mobile-breakpoint: $mobile-breakpoint; // Breakpoint for <table> mobile view.
$table-max-height: 400px; // Maximum height of <table> elements (non-horizontal).
$table-caption-font-size: 1.5rem; // Font size for <caption> elements.
$table-mobile-card-label: 'data-label'; // Attribute used to replace column headers in mobile view.
$table-mobile-label-font-weight: 600; // Font weight for column header labels in mobile view.
$table-border-color: #ddd; // Border color for <table> elements.
$table-border-separator-color: #666; // Border color for the border between <thead> and <tbody>.
$table-th-back-color: #212121; // Background color for <th> elements.
$table-th-fore-color: #fdfdfd; // Text color for <th> elements.
$table-td-back-color: #111; // Background color for <td> elements.
$table-td-fore-color: #fdfdfd; // Text color for <td> elements.
$table-td-alt-back-color: #444; // Alternative background color for <td> elements in striped tables.
$table-td-hover-back-color: #5c819f; // Hover background color for <td> elements in hoverable tables.
@import '../mini/table';
$mark-back-color: #0277bd; // Background color for <mark>
$mark-fore-color: #fafafa; // Text color for <mark>
$mark-font-size: 0.95em; // Font size for <mark>
$mark-line-height: 1em; // Line height for <mark>
$toast-back-color: #424242; // Background color for toast component
$toast-fore-color: #fafafa; // Text color for toast component
$tooltip-back-color: #fafafa; // Background color for tooltip component
$tooltip-fore-color: #212121; // Text color for tooltip component
$modal-overlay-color: rgba(0,0,0,0.45); // Overlay color for modal dialog component
$modal-close-color: #f0f0f0; // Text color for the close button of the modal dialog component
$modal-close-hover-back-color: #222; // Background color for the close button of the modal dialog component (on hover/focus)
$modal-close-size: 1.75rem; // Font size for the close button of the modal dialog component
$collapse-label-height: 1.5rem; // Height for the labels in the collapse component
$collapse-content-max-height: 400px; // Max height for the content panes in the collapse component
$collapse-label-back-color: #111; // Background color for labels in the collapse component
$collapse-label-fore-color: #fafafa; // Text color for labels in the collapse component
$collapse-label-hover-back-color: #222; // Background color for labels in the collapse component (hover)
$collapse-selected-label-back-color: #444; // Background color for selected labels in the collapse component
$collapse-border-color: #aaa; // Border color for collapse component
$collapse-selected-label-border-color: #0277bd; // Border color for collapse component's selected labels
$collapse-content-back-color: #212121; // Background color for collapse component's content panes
@import '../mini/contextual';
/*
Custom elements for contextual background elements, toasts and tooltips.
*/
$mark-secondary-name: 'secondary'; // Class name for secondary <mark> color variant.
$mark-secondary-back-color: #d32f2f; // Background color for secondary <mark> color variant.
@include make-mark-alt-color ($mark-secondary-name, $mark-secondary-back-color);
$mark-tertiary-name: 'tertiary'; // Class name for tertiary <mark> color variant.
$mark-tertiary-back-color: #308732; // Background color for tertiary <mark> color variant.
@include make-mark-alt-color ($mark-tertiary-name, $mark-tertiary-back-color);
$mark-tag-name: 'tag'; // Class name, padding and border radius for tag <mark> size variant.
$mark-tag-padding: calc(var(#{$universal-padding-var})/2) var(#{$universal-padding-var});
$mark-tag-border-radius: 1em;
@include make-mark-alt-size ($mark-tag-name, $mark-tag-padding, $mark-tag-border-radius);
$progress-back-color: #aaa; // Background color of <progress>.
$progress-fore-color: #555; // Foreground color of <progress>.
$progress-height: 0.75rem; // Height of <progress>.
$progress-max-value: 1000; // Arithmetic max value of <progress> - use integer values.
$progress-inline-width: 60%; // Width of inline <progress> elements.
$spinner-donut-size: 1.25rem; // Size of the spinner donuts
$spinner-donut-border-thickness: 0.25rem; // Border thickness for spinner donuts
$spinner-donut-back-color: #ddd; // Background color for spinner donuts
$spinner-donut-fore-color: #555; // Foreground color for spinner donuts
@import '../mini/progress';
/*
Custom elements for progress bars and spinners.
*/
$progress-primary-name: 'primary'; // Class name for primary <progress> color variant.
$progress-primary-fore-color: #1976d2; // Foreground color for primary <progress> color variant.
@include make-progress-alt-color ($progress-primary-name, $progress-primary-fore-color);
$progress-secondary-name: 'secondary'; // Class name for secondary <progress> color variant.
$progress-secondary-fore-color: #d32f2f; // Foreground color for secondary <progress> color variant.
@include make-progress-alt-color ($progress-secondary-name, $progress-secondary-fore-color);
$progress-tertiary-name: 'tertiary'; // Class name for tertiary <progress> color variant.
$progress-tertiary-fore-color: #308732; // Foreground color for tertiary <progress> color variant.
@include make-progress-alt-color ($progress-tertiary-name, $progress-tertiary-fore-color);
$spinner-donut-primary-name: 'primary'; // Class name for primary spinner donut color variant.
$spinner-donut-primary-fore-color: #1976d2; // Foreground color for primary spinner donut color variant.
@include make-spinner-donut-alt-color ($spinner-donut-primary-name, $spinner-donut-primary-fore-color);
$spinner-donut-secondary-name: 'secondary'; // Class name for secondary spinner donut color variant.
$spinner-donut-secondary-fore-color: #d32f2f; // Foreground color for secondary spinner donut color variant.
@include make-spinner-donut-alt-color ($spinner-donut-secondary-name, $spinner-donut-secondary-fore-color);
$spinner-donut-tertiary-name: 'tertiary'; // Class name for tertiary spinner donut color variant.
$spinner-donut-tertiary-fore-color: #308732; // Foreground color for tertiary spinner donut color variant.
@include make-spinner-donut-alt-color ($spinner-donut-tertiary-name, $spinner-donut-tertiary-fore-color);
@import '../mini/icon';
$box-shadow-generic: 0 4*$__1px 4*$__1px 0 rgba(0,0,0,0.125), 0 2*$__1px 2*$__1px -2*$__1px rgba(0,0,0,0.125);
$border-generic-color: rgba(0,0,0,0.3); // Border color for bordered elements.
@import '../mini/utility';

277
src/flavors/mini-nord.scss Normal file
View file

@ -0,0 +1,277 @@
// 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.
/*
Flavor name: Nord (mini-nord)
Author: tphecca (https://github.com/tphecca)
Maintainers: tphecca
mini.css version: v3.0.0
*/
// This flavor is based on the Nord color palette: https://github.com/arcticicestudio/nord
$base-root-font-size: 16px; // Root font sizing for all elements (`px` only)
$base-line-height: 1.5; // Line height for most elements
$fore-color: #2e3440; // Text & foreground color
$secondary-fore-color: #3b4252; // Secondary text & foreground color
$back-color: #eceff4; // Background color
$secondary-back-color: #e5e9f0; // Secondary background color
$blockquote-color: #d08770; // <blockquote> sidebar and quotation color
$pre-color: #b48ead; // <pre> sidebar color
$border-color: #d8dee9; // Border color
$secondary-border-color: #e5e9f0; // Secondary border color
$heading-line-height: 1.2; // Line height for headings
$heading-ratio: 1.19; // Ratio for headings (strictly unitless)
$subheading-font-size:0.75em; // Font sizing for <small> elements in headings
$subheading-top-margin: -0.25rem; // Top margin of <small> elements in headings
$heading-font-weight: 500; // Font weight for headings
$horizontal-rule-line-height: 1.25em; // <hr> line height
$universal-margin: 0.5rem; // Universal margin for the most elements
$universal-padding: 0.5rem; // Universal padding for the most elements
$universal-border-radius: 0.125rem; // Universal border-radius for most elements
$universal-box-shadow: none; // Universal box-shadow for most elements
$small-element-font-size: 0.75em; // Font size for <small>, <sub>, <sup>
$small-font-size: 0.75em; // Font sizing for <small> elements
$blockquote-quotation-size: 3rem; // Font size for the quotation of <blockquote>
$blockquote-cite-size: 0.75em; // Font size for the [cite] of <blockquote>
$code-font-size: 0.85em; // Font size for <code>, <kbd>
$sup-top: -0.5em; // <sup> top
$sub-bottom: -0.25em; // <sub> bottom
$a-link-color: #88c0d0; // Color for <a>:link
$a-visited-color: #5e81ac; // Color for <a>:visited
$bold-font-weight: 700; // Font weight for <b> and <strong>
$mobile-breakpoint: 768px; // Breakpoint between small and medium screens (px)
$large-screen-breakpoint: 1280px; // Breakpoint between medium and large screens (px)
@import '../mini/core';
$grid-column-count: 12; // Number of columns in the grid (integer value only).
$grid-medium-breakpoint: $mobile-breakpoint; // Medium screen breakpoint for grid.
$grid-large-breakpoint: $large-screen-breakpoint; // Large screen breakpoint for grid.
$card-normal-width: 320px; // Width for normal cards.
$card-section-media-height: 200px; // Height for cards' media sections.
$card-fore-color: #2e3440; // Text color for the cards.
$card-back-color: #eceff4; // Background color for the cards.
$card-border-color: #e5e9f0; // Border color for the cards.
@import '../mini/layout';
/*
Custom elements for card elements.
*/
$card-small-name: 'small'; // Class name for small cards.
$card-small-width: 240px; // Width for small cards.
@include make-card-alt-size ($card-small-name, $card-small-width);
$card-large-name: 'large'; // Class name for large cards.
$card-large-width: 480px; // Width for large cards.
@include make-card-alt-size ($card-large-name, $card-large-width);
$card-fluid-name: 'fluid'; // Class name for fluid cards.
$card-fluid-width: 100%; // Width for fluid cards.
@include make-card-alt-size ($card-fluid-name, $card-fluid-width);
$card-warning-name: 'warning'; // Class name for card warnging color variant.
$card-warning-back-color: #ebcb8b; // Background color for card warnging color variant.
$card-warning-fore-color: #2e3440; // Text color for card warnging color variant.
$card-warning-border-color: #d08770; // Border style for card warnging color variant.
@include make-card-alt-color ($card-warning-name, $card-warning-back-color, $card-warning-fore-color, $card-warning-border-color);
$card-error-name: 'error'; // Class name for card error color variant.
$card-error-back-color: #bf616a; // Background color for card error color variant.
$card-error-fore-color: #2e3440; // Text color for card error color variant.
$card-error-border-color: #434c5e; // Border style for card error color variant.
@include make-card-alt-color ($card-error-name, $card-error-back-color, $card-error-fore-color, $card-error-border-color);
$card-section-dark-name: 'dark'; // Class name for card dark section variant.
$card-section-dark-back-color: #d8dee9; // Background color for card dark section variant.
$card-section-dark-fore-color: #2e3440; // Text color for card dark section variant.
@include make-card-section-alt-color ($card-section-dark-name, $card-section-dark-back-color, $card-section-dark-fore-color);
$card-section-double-padded-name: 'double-padded'; // Class name for card double-padded section variant.
$card-section-double-padded-padding: calc(1.5 * var(#{$universal-padding-var})); // Padding for card sectiondouble-padded section variant.
@include make-card-section-alt-style ($card-section-double-padded-name, $card-section-double-padded-padding);
$input-group-mobile-breakpoint: $mobile-breakpoint - 1px; // Breakpoint for fluid input group mobile view.
$form-back-color: #e5e9f0; // Background color for forms.
$form-fore-color: #2e3440; // Text color for forms.
$form-border-color: #e5e9f0; // Border color for forms.
$input-back-color: #eceff4; // Background color for input elements.
$input-fore-color: #2e3440; // Text color for input elements.
$input-border-color: #e5e9f0; // Border color for input elements.
$input-focus-color: #88c0d0; // Border color for focused input elements.
$input-invalid-color: #bf616a; // Border color for invalid input elements.
$button-back-color: #e5e9f0; // Background color for buttons.
$button-hover-back-color: #d8dee9; // Background color for buttons (hover).
$button-fore-color: #2e3440; // Text color for buttons.
$button-border-color: transparent; // Border color for buttons.
$button-hover-border-color: transparent; // Border color for buttons (hover).
$button-group-border-color: rgba(124,124,124,0.54); // Border color for button groups.
@import '../mini/input_control';
/*
Custom elements for forms and input elements.
*/
$button-primary-name: 'primary'; // Class name for primary button color variant.
$button-primary-back-color: #5e81ac;// Background color for primary button color variant.
$button-primary-hover-back-color: #5e81ac;// Background color for primary button color variant (hover).
$button-primary-fore-color: #eceff4;// Text color for primary button color variant.
@include make-button-alt-color ($button-primary-name, $button-primary-back-color, $button-primary-hover-back-color, $button-primary-fore-color);
$button-secondary-name: 'secondary'; // Class name for secondary button color variant.
$button-secondary-back-color: #bf616a;// Background color for secondary button color variant.
$button-secondary-hover-back-color: #bf616a;// Background color for secondary button color variant (hover).
$button-secondary-fore-color: #eceff4;// Text color for secondary button color variant.
@include make-button-alt-color ($button-secondary-name, $button-secondary-back-color, $button-secondary-hover-back-color, $button-secondary-fore-color);
$button-tertiary-name: 'tertiary'; // Class name for tertiary button color variant.
$button-tertiary-back-color: #a3be8c;// Background color for tertiary button color variant.
$button-tertiary-hover-back-color: #a3be8c;// Background color for tertiary button color variant (hover).
$button-tertiary-fore-color: #434c5e;// Text color for tertiary button color variant.
@include make-button-alt-color ($button-tertiary-name, $button-tertiary-back-color, $button-tertiary-hover-back-color, $button-tertiary-fore-color);
$button-inverse-name: 'inverse'; // Class name for inverse button color variant.
$button-inverse-back-color: #3b4252;// Background color for inverse button color variant.
$button-inverse-hover-back-color: #2e3440;// Background color for inverse button color variant (hover).
$button-inverse-fore-color: #eceff4;// Text color for inverse button color variant.
@include make-button-alt-color ($button-inverse-name, $button-inverse-back-color, $button-inverse-hover-back-color, $button-inverse-fore-color);
$button-small-name: 'small'; // Class name, padding and margin for small button size variant.
$button-small-padding: calc(0.5 * var(#{$universal-padding-var})) calc(0.75 * var(#{$universal-padding-var}));
$button-small-margin: var(#{$universal-margin-var});
@include make-button-alt-size ($button-small-name, $button-small-padding, $button-small-margin);
$button-large-name: 'large'; // Class name, padding and margin for large button size variant.
$button-large-padding: calc(1.5 * var(#{$universal-padding-var})) calc(2 * var(#{$universal-padding-var}));
$button-large-margin: var(#{$universal-margin-var});
@include make-button-alt-size ($button-large-name, $button-large-padding, $button-large-margin);
$header-height: 3.1875rem; // Height of the header element.
$header-back-color: #eceff4; // Background color for the header element.
$header-hover-back-color: #e5e9f0; // Background color for the header element (hover).
$header-fore-color: #3b4252; // Text color for the header element.
$header-border-color: #e5e9f0; // Border color for the header element.
$nav-back-color: #eceff4; // Background color for the nav element.
$nav-hover-back-color: #e5e9f0; // Background color for the nav element (hover).
$nav-fore-color: #3b4252; // Text color for the nav element.
$nav-border-color: #e5e9f0; // Border color for the nav element.
$nav-link-color: #88c0d0; // Color for link in the nav element.
$footer-fore-color: #3b4252; // Text color for the footer element.
$footer-back-color: #eceff4; // Background color for footer nav element.
$footer-border-color: #e5e9f0; // Border color for the footer element.
$footer-link-color: #88c0d0; // Color for link in the footer element.
$drawer-back-color: #eceff4; // Background color for the drawer component.
$drawer-border-color: #e5e9f0; // Border color for the drawer component.
$drawer-hover-back-color: #e5e9f0; // Background color for the drawer component's close (hover).
$drawer-close-color: #3b4252; // Color of the close element for the drawer component.
$header-logo-font-size: 1.75rem; // Font size for the header logo element.
$nav-sublink-depth: 2; // Amount of subcategory classes to add.
$footer-font-size: 0.875rem; // Font size for text in footer element.
$drawer-toggle-font-size: 1.5em; // Font size for the drawer component's toggle. (prefer em units)
$drawer-width: 320px; // Width of the drawer component.
$drawer-close-size: 2rem; // Size of the close element for the drawer component.
$drawer-mobile-breakpoint: $mobile-breakpoint; // Mobile breakpoint for the drawer component.
@import '../mini/navigation';
$table-mobile-breakpoint: $mobile-breakpoint; // Breakpoint for <table> mobile view.
$table-max-height: 400px; // Maximum height of <table> elements (non-horizontal).
$table-caption-font-size: 1.5rem; // Font size for <caption> elements.
$table-mobile-card-label: 'data-label'; // Attribute used to replace column headers in mobile view.
$table-mobile-label-font-weight: 600; // Font weight for column header labels in mobile view.
$table-border-color: #d8dee9; // Border color for <table> elements.
$table-border-separator-color: #434c5e; // Border color for the border between <thead> and <tbody>.
$table-th-back-color: #e5e9f0; // Background color for <th> elements.
$table-th-fore-color: #2e3440; // Text color for <th> elements.
$table-td-back-color: #eceff4; // Background color for <td> elements.
$table-td-fore-color: #2e3440; // Text color for <td> elements.
$table-td-alt-back-color: #e5e9f0; // Alternative background color for <td> elements in striped tables.
$table-td-hover-back-color: #88c0d0; // Hover background color for <td> elements in hoverable tables.
@import '../mini/table';
$mark-back-color: #5e81ac; // Background color for <mark>
$mark-fore-color: #fafafa; // Text color for <mark>
$mark-font-size: 0.95em; // Font size for <mark>
$mark-line-height: 1em; // Line height for <mark>
$toast-back-color: #2e3440; // Background color for toast component
$toast-fore-color: #eceff4; // Text color for toast component
$tooltip-back-color: #2e3440; // Background color for tooltip component
$tooltip-fore-color: #eceff4; // Text color for tooltip component
$modal-overlay-color: rgba(0,0,0,0.45); // Overlay color for modal dialog component
$modal-close-color: #3b4252; // Text color for the close button of the modal dialog component
$modal-close-hover-back-color: #e5e9f0; // Background color for the close button of the modal dialog component (on hover/focus)
$modal-close-size: 1.75rem; // Font size for the close button of the modal dialog component
$collapse-label-height: 1.5rem; // Height for the labels in the collapse component
$collapse-content-max-height: 400px; // Max height for the content panes in the collapse component
$collapse-label-back-color: #e5e9f0; // Background color for labels in the collapse component
$collapse-label-fore-color: #2e3440; // Text color for labels in the collapse component
$collapse-label-hover-back-color: #e5e9f0; // Background color for labels in the collapse component (hover)
$collapse-selected-label-back-color: #e5e9f0; // Background color for selected labels in the collapse component
$collapse-border-color: #e5e9f0; // Border color for collapse component
$collapse-selected-label-border-color: #88c0d0; // Border color for collapse component's selected labels
$collapse-content-back-color: #fafafa; // Background color for collapse component's content panes
@import '../mini/contextual';
/*
Custom elements for contextual background elements, toasts and tooltips.
*/
$mark-secondary-name: 'secondary'; // Class name for secondary <mark> color variant.
$mark-secondary-back-color: #bf616a; // Background color for secondary <mark> color variant.
@include make-mark-alt-color ($mark-secondary-name, $mark-secondary-back-color);
$mark-tertiary-name: 'tertiary'; // Class name for tertiary <mark> color variant.
$mark-tertiary-back-color: #a3be8c; // Background color for tertiary <mark> color variant.
@include make-mark-alt-color ($mark-tertiary-name, $mark-tertiary-back-color);
$mark-tag-name: 'tag'; // Class name, padding and border radius for tag <mark> size variant.
$mark-tag-padding: calc(var(#{$universal-padding-var})/2) var(#{$universal-padding-var});
$mark-tag-border-radius: 1em;
@include make-mark-alt-size ($mark-tag-name, $mark-tag-padding, $mark-tag-border-radius);
$progress-back-color: #e5e9f0; // Background color of <progress>.
$progress-fore-color: #434c5e; // Foreground color of <progress>.
$progress-height: 0.75rem; // Height of <progress>.
$progress-max-value: 1000; // Arithmetic max value of <progress> - use integer values.
$progress-inline-width: 60%; // Width of inline <progress> elements.
$spinner-donut-size: 1.25rem; // Size of the spinner donuts
$spinner-donut-border-thickness: 0.25rem; // Border thickness for spinner donuts
$spinner-donut-back-color: #d8dee9; // Background color for spinner donuts
$spinner-donut-fore-color: #434c5e; // Foreground color for spinner donuts
@import '../mini/progress';
/*
Custom elements for progress bars and spinners.
*/
$progress-primary-name: 'primary'; // Class name for primary <progress> color variant.
$progress-primary-fore-color: #5e81ac; // Foreground color for primary <progress> color variant.
@include make-progress-alt-color ($progress-primary-name, $progress-primary-fore-color);
$progress-secondary-name: 'secondary'; // Class name for secondary <progress> color variant.
$progress-secondary-fore-color: #bf616a; // Foreground color for secondary <progress> color variant.
@include make-progress-alt-color ($progress-secondary-name, $progress-secondary-fore-color);
$progress-tertiary-name: 'tertiary'; // Class name for tertiary <progress> color variant.
$progress-tertiary-fore-color: #a3be8c; // Foreground color for tertiary <progress> color variant.
@include make-progress-alt-color ($progress-tertiary-name, $progress-tertiary-fore-color);
$spinner-donut-primary-name: 'primary'; // Class name for primary spinner donut color variant.
$spinner-donut-primary-fore-color: #5e81ac; // Foreground color for primary spinner donut color variant.
@include make-spinner-donut-alt-color ($spinner-donut-primary-name, $spinner-donut-primary-fore-color);
$spinner-donut-secondary-name: 'secondary'; // Class name for secondary spinner donut color variant.
$spinner-donut-secondary-fore-color: #bf616a; // Foreground color for secondary spinner donut color variant.
@include make-spinner-donut-alt-color ($spinner-donut-secondary-name, $spinner-donut-secondary-fore-color);
$spinner-donut-tertiary-name: 'tertiary'; // Class name for tertiary spinner donut color variant.
$spinner-donut-tertiary-fore-color: #a3be8c; // Foreground color for tertiary spinner donut color variant.
@include make-spinner-donut-alt-color ($spinner-donut-tertiary-name, $spinner-donut-tertiary-fore-color);
@import '../mini/icon';
$box-shadow-generic: 0 4*$__1px 4*$__1px 0 rgba(0,0,0,0.125), 0 2*$__1px 2*$__1px -2*$__1px rgba(0,0,0,0.125);
$border-generic-color: rgba(0,0,0,0.3); // Border color for bordered elements.
@import '../mini/utility';