mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-11 08:23:58 +02:00
Code Issues Releases Wiki Activity

Documented spinner component

Browse Source
This commit is contained in:
Angelos Chalaris
2017-12-30 14:54:42 +02:00
parent 5e4281d546
commit d59be35ceb
5 changed files with 56 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
docs/doc-fragments/docFragments.js
View File

@@ -20,6 +20,7 @@ var tooltips = require('./tooltips');
var modalDialogs = require('./modalDialogs');
var spoilersAndAccordions = require('./spoilersAndAccordions');
var progressBars = require('./progressBars');
var donutSpinners = require('./donutSpinners');
module.exports = [
gettingStarted,
@@ -28,5 +29,5 @@ module.exports = [
formsAndInput, buttons, inputGrouping,
header, navigationBar, footer, drawer,
textHighlighting, toasts, tooltips, modalDialogs, spoilersAndAccordions,
progressBars
progressBars, donutSpinners
]

38
docs/doc-fragments/donutSpinners.js
View File

@@ -0,0 +1,38 @@
module.exports = {
id: 'donut-spinners',
title: 'Donut spinners',
keywords: [`spinner`, `donut`, `loading`, `progress`, `primary`, `secondary`, `tertiary`, `inline`, `animation`, `animated`],
description: `<p><strong>mini.css</strong> provides you with animated loading indicators (<code>.spinner</code>), which you can use to indicate that some content is loading.</p>`,
example: `<div class="spinner"></div>`,
samples: [`<pre><span class="code-line"><span class="highlight-a">&lt;div</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;spinner&quot;</span><span class="highlight-a">&gt;&lt;/div&gt;</span></span></pre>`],
notes: [`You can use either a <code>&lt;div&gt;</code> or a <code>&lt;span&gt;</code> element to create a donut spinner.`,
`You can add the <code>role="progressbar"</code> attribute to spinner donut elements to increase accessibility.`,
`You can inline donut spinners inside a paragraph or some other textual content.`],
customization: [
`Foreground color for donut spinners can be changed by changing the value of the <code>--spinner-fore-color</code> variable.`,
`Background color for donut spinners can be changed by changing the value of the <code>--spinner-back-color</code> variable.`,
`You can customize the colors of different color variants by changing the values of the related variables in their respective definitions.`,
`Universal margin for elements can be changed globally by changing the value of the <code>--universal-margin</code> variable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen.`
],
modifiers: [
{
title : 'Color variants',
description: `<p>You can create primary, secondary or tertiary (<code>.primary</code>, <code>.secondary</code>, <code>.tertiary</code>) donut spinners, simply by adding the appropriate color modifier.</p>`,
example: `<span class="spinner primary"></span><span class="spinner secondary"></span><span class="spinner tertiary"></span>`,
samples: [`<pre><span class="code-line"><span class="highlight-a">&lt;div</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;spinner primary&quot;</span><span class="highlight-a">&gt;&lt;/div&gt;</span></span>
<span class="code-line"><span class="highlight-a">&lt;div</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;spinner secondary&quot;</span><span class="highlight-a">&gt;&lt;/div&gt;</span></span>
<span class="code-line"><span class="highlight-a">&lt;div</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;spinner tertiary&quot;</span><span class="highlight-a">&gt;&lt;/div&gt;</span></span></pre>`]
}
],
dos: [],
donts: [
{
description: `Avoid inserting text inside donut spinners.`,
sample: `<pre><span class="code-line"><span class="highlight-a">&lt;div</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;spinner&quot;</span><span class="highlight-a">&gt;</span>Don't place text here.<span class="highlight-a">&lt;/div&gt;</span></span></pre>`
},
{
description: `Avoid applying two color modifiers on the same donut spinner.`,
sample: `<pre><span class="code-line"><span class="highlight-a">&lt;div</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;spinner primary secondary&quot;</span><span class="highlight-a">&gt;&lt;/div&gt;</span></span></pre>`
}
]
}

1
docs/doc-fragments/progressBars.js
View File

@@ -9,7 +9,6 @@ module.exports = {
customization: [
`Foreground color for progress bars can be changed by changing the value of the <code>--progress-fore-color</code> variable.`,
`Background color for progress bars can be changed by changing the value of the <code>--progress-back-color</code> variable.`,
`Border color for cards can be changed by changing the value of the <code>--card-border-color</code> variable.`,
`You can customize the colors of different color variants by changing the values of the related variables in their respective definitions.`,
`Universal margin for elements can be changed globally by changing the value of the <code>--universal-margin</code> variable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen.`,
`Universal border radius for elements can be changed globally by changing the value of the <code>--universal-border-radius</code> variable.`