mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-07-30 10:30:29 +02:00
28 lines
2.9 KiB
JavaScript
28 lines
2.9 KiB
JavaScript
module.exports = {
|
|
id: 'element-decorators',
|
|
title: 'Element decorators',
|
|
keywords: ['border','border-radius', 'bordered', 'rounded', 'circular', 'shadowed', 'utility'],
|
|
description: '<p>You can apply generic borders, shadows or border radiuses to any element, by using the appropriate class (<code>.bordered</code>, <code>.shadowed</code>, <code>.rounded</code> or <code>.circular</code>).</p>',
|
|
example: '<button class="bordered doc">Bordered button</button><button class="primary bordered doc">Bordered button</button><button class="shadowed doc">Shadowed button</button><br/><p><img src="https://placehold.it/200x200?text=rounded" alt="placeholder" class="rounded"> <img src="https://placehold.it/200x200?text=circular" alt="placeholder" class="circular"></p>',
|
|
samples: [`<pre><span class="code-line"><span class="highlight-a"><span</span> <span class="highlight-b">class</span>=<span class="highlight-c">"bordered"</span><span class="highlight-a">></span>Bordered element.<span class="highlight-a"></span></span></span>
|
|
<span class="code-line"><span class="highlight-a"><span</span> <span class="highlight-b">class</span>=<span class="highlight-c">"shadowed"</span><span class="highlight-a">></span>Shadowed element.<span class="highlight-a"></span></span></span>
|
|
<span class="code-line"><span class="highlight-a"><span</span> <span class="highlight-b">class</span>=<span class="highlight-c">"rounded"</span><span class="highlight-a">></span>Rounded element.<span class="highlight-a"></span></span></span>
|
|
<span class="code-line"><span class="highlight-a"><span</span> <span class="highlight-b">class</span>=<span class="highlight-c">"circular"</span><span class="highlight-a">></span>Circular element.<span class="highlight-a"></span></span></span></pre>`],
|
|
notes: [
|
|
'Element decorators use <code>!important</code> declarations to override any other styles, so exercise caution when using them.',
|
|
'Element decorators can be used with pretty much every element or component that is available.'
|
|
],
|
|
customization: [
|
|
`Boder color for the generic border decorator can be changed by changing the value of the <code>--generic-border-color</code> variable.`,
|
|
`Box shadow style for the generic shadow can be changed by changing the value of the <code>--generic-box-shadow</code> variable.`
|
|
],
|
|
modifiers: [],
|
|
dos: [],
|
|
donts: [
|
|
{
|
|
description: `Avoid applying the <code>.rounded</code> and <code>.circular</code> decorators on the same element.`,
|
|
sample: `<pre><span class="code-line"><span class="highlight-a"><span</span> <span class="highlight-b">class</span>=<span class="highlight-c">"rounded circular"</span><span class="highlight-a">></span>Do not do this.<span class="highlight-a"></span></span></span></pre>`
|
|
}
|
|
]
|
|
}
|