Documented icons
This commit is contained in:
Angelos Chalaris
parent
c9a4651f33
commit
0d897060a1
8 changed files with 202 additions and 5 deletions
|
|
@ -79,6 +79,8 @@ fs.writeFile(indexOutputPath,
|
|||
var docFragments = require('./doc-fragments/docFragments'); // Gets all document fragments as a list.
|
||||
var docOutputPath = './docs/v3/docs.html'; // This path is relative to package.json.
|
||||
|
||||
const FEATHER_BANNER = `<a href="https://feathericons.com/" class="section double-padded" id="feather-banner" target="_blank" rel="noopener"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#f8f8f8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5z"></path><line x1="16" y1="8" x2="2" y2="22"></line><line x1="17" y1="15" x2="9" y2="15"></line></svg> Powered by Feather</a>`;
|
||||
|
||||
var documentStart = `<!DOCTYPE html><html lang="en"><head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700|Poppins:400,400i,500,700,700i&subset=latin-ext" rel="stylesheet">
|
||||
<link rel="stylesheet" href="./style.min.css">
|
||||
|
|
@ -156,6 +158,7 @@ var documentationSearch = `<script>
|
|||
function buildFragment(fragment){
|
||||
var fragmentHtml = `<div id="${fragment.id}" class="card fluid">
|
||||
<h2 class="section double-padded">${fragment.title}</h2>
|
||||
${fragment.id === 'icons'?FEATHER_BANNER:''}
|
||||
<div class="section">${fragment.description}</div>
|
||||
${fragment.example?`<div class="section"><h3>Example</h3>${fragment.example}</div>`:''}
|
||||
${fragment.samples.length?`<div class="section double-padded prefiller-example"><h3>Sample code</h3>${fragment.samples.join('')}</div>`:''}
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@ var modalDialogs = require('./modalDialogs');
|
|||
var spoilersAndAccordions = require('./spoilersAndAccordions');
|
||||
var progressBars = require('./progressBars');
|
||||
var donutSpinners = require('./donutSpinners');
|
||||
var icons = require('./icons');
|
||||
|
||||
module.exports = [
|
||||
gettingStarted,
|
||||
|
|
@ -31,5 +32,6 @@ module.exports = [
|
|||
header, navigationBar, footer, drawer,
|
||||
tables,
|
||||
textHighlighting, toasts, tooltips, modalDialogs, spoilersAndAccordions,
|
||||
progressBars, donutSpinners
|
||||
progressBars, donutSpinners,
|
||||
icons
|
||||
]
|
||||
|
|
|
|||
73
docs/doc-fragments/icons.js
Normal file
73
docs/doc-fragments/icons.js
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
module.exports = {
|
||||
id: 'icons',
|
||||
title: 'Icons',
|
||||
keywords: [`icon`, `svg`, `feather`, `icons`],
|
||||
description: `<p><strong>mini.css</strong> comes with a set of 20 commonly-used icons (courtesy of <a href="https://feathericons.com/" target="_blank" rel="noopener">Feather</a>) that you can use anywhere in your web apps, utilizing the appropriate class for each icon.</p>`,
|
||||
example: `<div class="row icon-row">
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-alert"></span> .icon-alert</p></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-bookmark"></span> .icon-bookmark</p></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-calendar"></span> .icon-calendar</p></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-cart"></span> .icon-cart</p></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-credit"></span> .icon-credit</p></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-edit"></span> .icon-edit</p></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-help"></span> .icon-help</p></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-home"></span> .icon-home</p></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-info"></span> .icon-info</p></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-link"></span> .icon-link</p></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-location"></span> .icon-location</p></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-lock"></span> .icon-lock</p></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-mail"></span> .icon-mail</p></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-phone"></span> .icon-phone</p></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-rss"></span> .icon-rss</p></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-search"></span> .icon-search</p></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-settings"></span> .icon-settings</p></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-share"></span> .icon-share</p></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-upload"></span> .icon-upload</p></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-user"></span> .icon-user</p></div>
|
||||
</div>`,
|
||||
samples: [`<pre><span class="code-line"><span class="highlight-a"><span</span> <span class="highlight-b">class</span>=<span class="highlight-c">"icon-alert"</span><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">"icon-bookmark"</span><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">"icon-calendar"</span><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">"icon-cart"</span><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">"icon-credit"</span><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">"icon-edit"</span><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">"icon-help"</span><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">"icon-home"</span><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">"icon-info"</span><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">"icon-link"</span><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">"icon-location"</span><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">"icon-lock"</span><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">"icon-mail"</span><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">"icon-phone"</span><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">"icon-rss"</span><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">"icon-search"</span><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">"icon-settings"</span><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">"icon-share"</span><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">"icon-upload"</span><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">"icon-user"</span><span class="highlight-a">></span></span></span></pre>`],
|
||||
notes: [`You can only use a <code><span></code> element to create an icon.`,
|
||||
`You can inline icons inside a paragraph or pretty much any other textual content. Icons scale relative to their parent element.`],
|
||||
customization: [
|
||||
`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 secondary or inverse (<code>.secondary</code>, <code>.inverse</code>) icons, simply by adding the appropriate color modifier.</p>`,
|
||||
example: `<p style="padding: 0.5rem;" class="doc">This is a <span class="icon-home secondary"></span> secondary icon, which has a lighter color.</p><p style="background: #111; color: #f8f8f8; padding: 0.5rem;" class="doc">This is an <span class="icon-home inverse"></span> inverse icon.</p>`,
|
||||
samples: [`<pre><span class="code-line"><span class="highlight-a"><span</span> <span class="highlight-b">class</span>=<span class="highlight-c">"icon-alert secondary"</span><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">"icon-alert inverse"</span><span class="highlight-a">></span></span></span></pre>`]
|
||||
}
|
||||
],
|
||||
dos: [],
|
||||
donts: [
|
||||
{
|
||||
description: `Avoid inserting text inside icon elements.`,
|
||||
sample: `<pre><span class="code-line"><span class="highlight-a"><span</span> <span class="highlight-b">class</span>=<span class="highlight-c">"icon-alert"</span><span class="highlight-a">></span>Don't place text here.<span class="highlight-a"></span></span></span></pre>`
|
||||
},
|
||||
{
|
||||
description: `Avoid applying two color modifiers on the same icon.`,
|
||||
sample: `<pre><span class="code-line"><span class="highlight-a"><span</span> <span class="highlight-b">class</span>=<span class="highlight-c">"icon-alert inverse secondary"</span><span class="highlight-a">></span></span></span></pre>`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -292,3 +292,8 @@
|
|||
- Added all icons.
|
||||
- Added `.inverse` and `.secondary` filters for icons.
|
||||
- Total size with icons is `8.17KB` gzipped.
|
||||
|
||||
## 20180123
|
||||
|
||||
- Updated `icon` module to have the variables definitions in comments (in case of standalone use).
|
||||
- Documented `icon` module in its entirety and retested everything. It's all good.
|
||||
|
|
|
|||
|
|
@ -23,9 +23,10 @@
|
|||
</header>
|
||||
<div class="row" id="doc-wrapper">
|
||||
<input id="doc-drawer-checkbox" class="drawer" value="on" type="checkbox">
|
||||
<nav class="col-md-4 col-lg-3" id="nav-drawer"><h3>Menu</h3><label for="doc-drawer-checkbox" class="button drawer-close"></label><div><input style="width: 100%; margin: 0px;" placeholder="Search..." type="search" id="search-bar" oninput="search()"></div><a href="#getting-started" id="link-to-getting-started">Getting started</a><a href="#common-textual-elements" id="link-to-common-textual-elements">Common textual elements</a><a href="#heading" id="link-to-heading">Headings</a><a href="#images-captions" id="link-to-images-captions">Images & captions</a><a href="#lists" id="link-to-lists">Lists</a><a href="#code-and-quotations" id="link-to-code-and-quotations">Code & quotations</a><a href="#grid" id="link-to-grid">Grid system</a><a href="#cards" id="link-to-cards">Cards</a><a href="#card-sections" id="link-to-card-sections">Card sections</a><a href="#forms-and-input" id="link-to-forms-and-input">Forms & input</a><a href="#buttons" id="link-to-buttons">Buttons</a><a href="#input-grouping" id="link-to-input-grouping">Input grouping</a><a href="#header" id="link-to-header">Header</a><a href="#navigation-bar" id="link-to-navigation-bar">Navigation bar</a><a href="#footer" id="link-to-footer">Footer</a><a href="#drawer" id="link-to-drawer">Menu drawer</a><a href="#tables" id="link-to-tables">Tables</a><a href="#text-highlighting" id="link-to-text-highlighting">Text highlighting</a><a href="#toasts" id="link-to-toasts">Toasts</a><a href="#tooltips" id="link-to-tooltips">Tooltips</a><a href="#modal-dialogs" id="link-to-modal-dialogs">Modal dialogs</a><a href="#spoilers-and-accordions" id="link-to-spoilers-and-accordions">Spoilers & accordions</a><a href="#progress-bars" id="link-to-progress-bars">Progress bars</a><a href="#donut-spinners" id="link-to-donut-spinners">Donut spinners</a><span id="no-results">No results found</span></nav>
|
||||
<nav class="col-md-4 col-lg-3" id="nav-drawer"><h3>Menu</h3><label for="doc-drawer-checkbox" class="button drawer-close"></label><div><input style="width: 100%; margin: 0px;" placeholder="Search..." type="search" id="search-bar" oninput="search()"></div><a href="#getting-started" id="link-to-getting-started">Getting started</a><a href="#common-textual-elements" id="link-to-common-textual-elements">Common textual elements</a><a href="#heading" id="link-to-heading">Headings</a><a href="#images-captions" id="link-to-images-captions">Images & captions</a><a href="#lists" id="link-to-lists">Lists</a><a href="#code-and-quotations" id="link-to-code-and-quotations">Code & quotations</a><a href="#grid" id="link-to-grid">Grid system</a><a href="#cards" id="link-to-cards">Cards</a><a href="#card-sections" id="link-to-card-sections">Card sections</a><a href="#forms-and-input" id="link-to-forms-and-input">Forms & input</a><a href="#buttons" id="link-to-buttons">Buttons</a><a href="#input-grouping" id="link-to-input-grouping">Input grouping</a><a href="#header" id="link-to-header">Header</a><a href="#navigation-bar" id="link-to-navigation-bar">Navigation bar</a><a href="#footer" id="link-to-footer">Footer</a><a href="#drawer" id="link-to-drawer">Menu drawer</a><a href="#tables" id="link-to-tables">Tables</a><a href="#text-highlighting" id="link-to-text-highlighting">Text highlighting</a><a href="#toasts" id="link-to-toasts">Toasts</a><a href="#tooltips" id="link-to-tooltips">Tooltips</a><a href="#modal-dialogs" id="link-to-modal-dialogs">Modal dialogs</a><a href="#spoilers-and-accordions" id="link-to-spoilers-and-accordions">Spoilers & accordions</a><a href="#progress-bars" id="link-to-progress-bars">Progress bars</a><a href="#donut-spinners" id="link-to-donut-spinners">Donut spinners</a><a href="#icons" id="link-to-icons">Icons</a><span id="no-results">No results found</span></nav>
|
||||
<main class="col-sm-12 col-md-8 col-lg-9" id="doc-content"><div id="getting-started" class="card fluid">
|
||||
<h2 class="section double-padded">Getting started</h2>
|
||||
|
||||
<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>
|
||||
<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><head></code> tag:</p>
|
||||
|
|
@ -36,7 +37,7 @@
|
|||
<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/>
|
||||
<figure class="container"><div class="row">
|
||||
<div class="col-sm" style="text-align:center; background: #35BCE6; padding: 1rem;"><img src="browser-logos/edge_128x128.png" alt="edge"><br/><h3><small> Edge<sup style="-0.675em"><i class="fa fa-lg fa-exclamation" aria-hidden="true" style="font-size: 80%;"></i></sup></small>15</h3></div>
|
||||
<div class="col-sm" style="text-align:center; background: #FF742E; padding: 1rem;"><img src="browser-logos/firefox_128x128.png" alt="firefox"><br/><h3><small> Firefox</small>31</h3></div>
|
||||
<div class="col-sm" style="text-align:center; background: #FF742E; padding: 1rem;"><img src="browser-logos/firefox_128x128.png" alt="firefox"><br/><h3><small> Firefox</small>35</h3></div>
|
||||
<div class="col-sm" style="text-align:center; background: #FFE270; padding: 1rem;"><img src="browser-logos/chrome_128x128.png" alt="chrome"><br/><h3><small> Chrome</small>49</h3></div>
|
||||
<div class="col-sm" style="text-align:center; background: #00D0FF; padding: 1rem;"><img src="browser-logos/safari_128x128.png" alt="safari"><br/><h3><small> Safari</small>9.1</h3></div>
|
||||
<div class="col-sm" style="text-align:center; background: #FF6E6E; padding: 1rem;"><img src="browser-logos/opera_128x128.png" alt="opera"><br/><h3><small> Opera</small>36</h3></div>
|
||||
|
|
@ -50,6 +51,7 @@
|
|||
|
||||
</div><br/><div id="common-textual-elements" class="card fluid">
|
||||
<h2 class="section double-padded">Common textual elements</h2>
|
||||
|
||||
<div class="section"><p><strong>mini.css</strong> utilizes the ruleset of <a href="http://necolas.github.io/normalize.css/" target="_blank">Normalize.css</a> v7.0.0 to reliably deal with inconsistencies between browsers, while applying some tasteful defaults on top, such as using <a href="https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/" target="_blank">native font stack</a> to figure out the best font for each device, setting the background and foreground colors, as well as the size of the text to <code>16px</code> and its line height to <code>1.5</code>.</p>
|
||||
<p>All of the most common HTML5 elements, such as paragraphs, links, bold, small and slanted text, have been styled by default using clean, modern typography to make your pages look cool and stand out from the rest of the internet.</p></div>
|
||||
<div class="section"><h3>Example</h3><p class="doc">This is a paragraph with some sample text. Did you know that the latest version of <strong class="doc">mini.css</strong> is codenamed <em class="doc">Gluon</em>? Well, now you do!</p><hr class="doc"/><p><small class="doc">Remember that <strong class="doc">mini.css</strong> is totally free, no fine print involved!</small></p></div>
|
||||
|
|
@ -68,6 +70,7 @@
|
|||
<div class="section double-padded"><h3>Customization</h3><ul><li>Text color can be changed globally by changing the value of the <code>--fore-color</code> variable.</li><li>Background color can be changed globally by changing the value of the <code>--back-color</code> variable.</li><li>Border color can be changed globally by changing the value of the <code>--border-color</code> variable. This affects the color of <code><hr></code> elements.</li><li>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.</li><li>Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.</li><li>You can change the color of links by changing the values of the <code>--a-link-color</code> and <code>--a-visited-color</code> variables.</li></ul></div>
|
||||
</div><br/><div id="heading" class="card fluid">
|
||||
<h2 class="section double-padded">Headings</h2>
|
||||
|
||||
<div class="section"><p>All of the HTML5 heading elements are styled, using a customizable ratio and simple rules, providing a clean base for your web app's titles. Apart from the headings themselves, customized rules are provided for displaying subheadings or explanatory text below your web app's headings.</p></div>
|
||||
<div class="section"><h3>Example</h3><div class="row"><div class="col-sm-12 col-md-6 col-md-first"><h1 class="doc">Heading 1<small class="doc">Subheading</small></h1></div>
|
||||
<div class="col-sm-12 col-md-6"><h2 class="doc">Heading 2<small class="doc">Subheading</small></h2></div>
|
||||
|
|
@ -88,6 +91,7 @@
|
|||
<div class="section double-padded"><h3>Customization</h3><ul><li>Text color can be changed globally by changing the value of the <code>--fore-color</code> variable. This will affect the color of the headings' main text.</li><li>Secondary text color can be changed globally by changing the value of the <code>--secondary-fore-color</code> variable. This will affect the color of subheadings.</li><li>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.</li><li>You can change the ratio of headings' size by chaning the value of the <code>--heading-ratio</code> variable. Bear in mind that the value of this variable must be unitless to work properly.</li></ul></div>
|
||||
</div><br/><div id="images-captions" class="card fluid">
|
||||
<h2 class="section double-padded">Images & captions</h2>
|
||||
|
||||
<div class="section"><p>Image elements are responsive by default, automatically scaling down as necessary to display properly on smaller devices. Images retain their original aspect ratio and they will never scale above their original size.</p>
|
||||
<p>If you want to add captions to images, you can use HTML5 figure elements, along with their related captions.</p></div>
|
||||
<div class="section"><h3>Example</h3><figure><img src="https://placehold.it/800x600" alt="placeholder"><figcaption class="doc">Image caption</figcaption></figure></div>
|
||||
|
|
@ -101,6 +105,7 @@
|
|||
<div class="section double-padded"><h3>Customization</h3><ul><li>You can change the text color of <code><figcaption></code> elements by changing the value of the <code>--secondary-fore-color</code> variable.</li><li>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.</li></ul></div>
|
||||
</div><br/><div id="lists" class="card fluid">
|
||||
<h2 class="section double-padded">Lists</h2>
|
||||
|
||||
<div class="section"><p>List elements, both unordered and ordered, are minimally styled to match with the rest of the framework's aesthetics. Their margins and padding are reset to properly align with the rest of the common HTML5 elements, providing a stable foundation for all of your web app's lists.</p></div>
|
||||
<div class="section"><h3>Example</h3><ul class="doc"><li class="doc">Apple</li><li class="doc">Orange</li><li class="doc">Strawberry</li></ul><br/>
|
||||
<ol class="doc"><li class="doc">Wake up</li><li class="doc">Eat breakfast</li><li class="doc">Go to work</li></ol></div>
|
||||
|
|
@ -120,6 +125,7 @@
|
|||
<div class="section double-padded"><h3>Customization</h3><ul><li>Text color can be changed globally by changing the value of the <code>--fore-color</code> variable.</li><li>Background color can be changed globally by changing the value of the <code>--back-color</code> variable.</li><li>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.</li><li>Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.</li></ul></div>
|
||||
</div><br/><div id="code-and-quotations" class="card fluid">
|
||||
<h2 class="section double-padded">Code & quotations</h2>
|
||||
|
||||
<div class="section"><p>Code blocks and quotation elements are styled using custom rules that help make them stand out from the rest of the text, while inline code and keyboard input tags are minimally styled, aiming not to break the flow of regular text.</p></div>
|
||||
<div class="section"><h3>Example</h3><p class="doc">This is some text with some inline <code class="doc">source code</code> and some keyboard <kbd class="doc">input</kbd>.</p>
|
||||
<pre class="doc">function sum(num1, num2){
|
||||
|
|
@ -137,6 +143,7 @@
|
|||
<div class="section double-padded"><h3>Customization</h3><ul><li>Text color can be changed globally by changing the value of the <code>--fore-color</code> variable. This will affect the text color of <code><code></code> and <code><pre></code> elements and background color of <code><kbd></code> elements.</li><li>Background color can be changed globally by changing the value of the <code>--back-color</code> variable. This will affect the background color of <code><blockquote></code> elements and text color of <code><kbd></code>.</li><li>You can change the background color of <code><code></code> and <code><pre></code> elements by changing the value of the <code>--secondary-back-color</code> variable.</li><li>You can change the text color of <code><blockquote></code> elements by changing the value of the <code>--secondary-fore-color</code> variable.</li><li>You can change the border color of <code><pre></code> and <code><blockquote></code> elements by changing the value of the <code>--secondary-border-color</code> variable.</li><li>You can change the border color of the left border of <code><pre></code> elements by changing the value of the <code>--pre-color</code> variable.</li><li>You can change the border color of the left border of <code><blockquote></code> elements by changing the value of the <code>--blockquote-color</code> variable.</li><li>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.</li><li>Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.</li><li>Universal border radius for elements can be changed globally by changing the value of the <code>--universal-border-radius</code> variable.</li></ul></div>
|
||||
</div><br/><div id="grid" class="card fluid">
|
||||
<h2 class="section double-padded">Grid system</h2>
|
||||
|
||||
<div class="section"><p>The grid system of <strong>mini.css</strong> utilizes the <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" target="_blank">Flexbox layout</a> to provide you with a simple, modern, responsive layout system for your web apps. Like most modern CSS frameworks' grid systems, it is composed of three main components - containers, rows and columns:</p>
|
||||
<ul><li>The container (<code>.container</code>) is the outermost layer of the grid system and serves as a fluid wrapper, which can be used as the basis for your layout.</li>
|
||||
<li>Inside the container, you can add one or more rows (<code>.row</code>), which will in turn house the columns.</li>
|
||||
|
|
@ -301,6 +308,7 @@
|
|||
<div class="section double-padded"><h3>Customization</h3><ul><li>Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable. This only affects the padding of the container.</li></ul></div>
|
||||
</div><br/><div id="cards" class="card fluid">
|
||||
<h2 class="section double-padded">Cards</h2>
|
||||
|
||||
<div class="section"><p><strong>mini.css</strong> provides you with cards (<code>.card</code>), general-purpose containers that help you organize the content of your web apps. Cards should be used in combination with the <a href="#grid">grid system</a>, meaning that they need to be placed inside a grid's rows to work properly. Layouts created with cards are responsive, realigning according to the available size on the screen.</p></div>
|
||||
<div class="section"><h3>Example</h3><div class="container" style="padding: 0.25rem"><div class="row">
|
||||
<div class="card"><div class="section"><h3 class="doc">Card 1</h3><p class="doc">This is a basic card with some sample content.</p></div></div>
|
||||
|
|
@ -345,6 +353,7 @@
|
|||
<div class="section double-padded"><h3>Customization</h3><ul><li>Text color for cards can be changed by changing the value of the <code>--card-fore-color</code> variable.</li><li>Background color for cards can be changed by changing the value of the <code>--card-back-color</code> variable.</li><li>Border color for cards can be changed by changing the value of the <code>--card-border-color</code> variable.</li><li>You can customize the colors of different color variants by changing the values of the related variables in their respective definitions.</li><li>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.</li><li>Universal border radius for elements can be changed globally by changing the value of the <code>--universal-border-radius</code> variable.</li></ul></div>
|
||||
</div><br/><div id="card-sections" class="card fluid">
|
||||
<h2 class="section double-padded">Card sections</h2>
|
||||
|
||||
<div class="section"><p>Card content is usually organized in smaller sections (<code>.section</code>) to be more easily digestible. A card section can be any valid HTML5 element with the appropriate class applied to it.</p></div>
|
||||
<div class="section"><h3>Example</h3><div class="container" style="padding: 0.25rem"><div class="row"><div class="col-sm-12">
|
||||
<div class="card fluid" style="margin: 0.5rem 0.25rem"><h3 class="doc section">Title section</h3><p class="doc section">This is a section with some textual content.</p></div>
|
||||
|
|
@ -376,6 +385,7 @@
|
|||
<div class="section double-padded"><h3>Customization</h3><ul><li>Text color for cards and card sections can be changed by changing the value of the <code>--card-fore-color</code> variable.</li><li>Background color for cards and card sections can be changed by changing the value of the <code>--card-back-color</code> variable.</li><li>Border color for cards and card sections can be changed by changing the value of the <code>--card-border-color</code> variable.</li><li>You can customize the colors of different color variants by changing the values of the related variables in their respective definitions.</li><li>Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.</li></ul></div>
|
||||
</div><br/><div id="forms-and-input" class="card fluid">
|
||||
<h2 class="section double-padded">Forms & input</h2>
|
||||
|
||||
<div class="section"><p>Forms, labels and common HTML5 input elements have been styled using clean, modern rules, improving the accessibility and usability of your web apps' forms.</p></div>
|
||||
<div class="section"><h3>Example</h3><form><fieldset><legend class="doc">Sample form</legend>
|
||||
<div class="row responsive-label"><div class="col-sm-12 col-md-3"><label for="sf1-text" class="doc">Text</label></div>
|
||||
|
|
@ -429,6 +439,7 @@
|
|||
<div class="section double-padded"><h3>Customization</h3><ul><li>Text color for forms and legend elements can be changed by changing the value of the <code>--form-fore-color</code> variable.</li><li>Background color for forms can be changed by changing the value of the <code>--form-back-color</code> variable.</li><li>Border color for forms and fieldset elements can be changed by changing the value of the <code>--form-border-color</code> variable.</li><li>Text color for input elements can be changed by changing the value of the <code>--input-fore-color</code> variable.</li><li>Background color for input elements can be changed by changing the value of the <code>--input-back-color</code> variable.</li><li>Border color for input elements can be changed by changing the value of the <code>--input-border-color</code> variable.</li><li>Border color for focused and invalid input elements can be changed by changing the value of the <code>--input-focus-color</code> and <code>--input-invalid-color</code> variables respectively.</li><li>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.</li><li>Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.</li><li>Universal border radius for elements can be changed globally by changing the value of the <code>--universal-border-radius</code> variable.</li></ul></div>
|
||||
</div><br/><div id="buttons" class="card fluid">
|
||||
<h2 class="section double-padded">Buttons</h2>
|
||||
|
||||
<div class="section"><p>Buttons and button-like input elements have been styled by default to be consistent across browsers. You can also style other elements, such as links or form labels, to look like buttons, using the appropriate class (<code>.button</code>) or the <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role" target="_blank">button</a> role.</p></div>
|
||||
<div class="section"><h3>Example</h3><button class="doc">Button</button><a href="#" class="button doc">Link</a><label class="button doc">Label</label><button disabled class="doc">Disabled</button></div>
|
||||
<div class="section double-padded prefiller-example"><h3>Sample code</h3><pre><span class="code-line"><span class="highlight-a"><button></span>Button<span class="highlight-a"></button></span></span>
|
||||
|
|
@ -452,6 +463,7 @@
|
|||
<div class="section double-padded"><h3>Customization</h3><ul><li>Text color for buttons can be changed by changing the value of the <code>--button-fore-color</code> variable.</li><li>Background color for buttons can be changed by changing the value of the <code>--button-back-color</code> variable.</li><li>Border color for buttons can be changed by changing the value of the <code>--button-border-color</code> variable.</li><li>Background and border color for focused buttons can be changed by changing the values of the <code>--button-hover-back-color</code> and <code>--button-hover-border-color</code> variables respectively.</li><li>You can customize the colors of different color variants by changing the values of the related variables in their respective definitions.</li><li>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.</li><li>Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.</li><li>Universal border radius for elements can be changed globally by changing the value of the <code>--universal-border-radius</code> variable.</li></ul></div>
|
||||
</div><br/><div id="input-grouping" class="card fluid">
|
||||
<h2 class="section double-padded">Input grouping</h2>
|
||||
|
||||
<div class="section"><p>You can ensure that input elements and labels display together on the same line, by grouping them together (<code>.input-group</code>). You can also group buttons together, using a different grouping class (<code>.button-group</code>).</p></div>
|
||||
<div class="section"><h3>Example</h3><form>
|
||||
<fieldset>
|
||||
|
|
@ -501,6 +513,7 @@
|
|||
|
||||
</div><br/><div id="header" class="card fluid">
|
||||
<h2 class="section double-padded">Header</h2>
|
||||
|
||||
<div class="section"><p>The header element has been minimally styled, allowing you to create modern headers for your web apps. A header can include a logo element (<code>.logo</code>), as well as buttons, links and labels, styled as buttons (<code>.button</code>).</p></div>
|
||||
<div class="section"><h3>Example</h3><header>
|
||||
<a href="#" class="logo" class="doc">Logo</a> <button class="doc">Home</button>
|
||||
|
|
@ -526,6 +539,7 @@
|
|||
<div class="section double-padded"><h3>Customization</h3><ul><li>Text color for the header can be changed by changing the value of the <code>--header-fore-color</code> variable.</li><li>Background color for the header can be changed by changing the value of the <code>--header-back-color</code> variable.</li><li>Border color for the header can be changed by changing the value of the <code>--header-border-color</code> variable.</li><li>Background color for focused buttons inside the header can be changed by changing the value of the <code>--header-hover-back-color</code> variable.</li></ul></div>
|
||||
</div><br/><div id="navigation-bar" class="card fluid">
|
||||
<h2 class="section double-padded">Navigation bar</h2>
|
||||
|
||||
<div class="section"><p>The navigation bar element has been minimally styled, allowing you to create simple vertical navigation menus for your web apps. Apart from styling from links, custom classes (<code>.sublink-1</code> and <code>.sublink-2</code>) are provided for creating navigation trees.</p></div>
|
||||
<div class="section"><h3>Example</h3><nav>
|
||||
<a href="#" class="doc">Home</a> <span class="doc">News</span>
|
||||
|
|
@ -547,6 +561,7 @@
|
|||
<div class="section double-padded"><h3>Customization</h3><ul><li>Text color for navigation bars can be changed by changing the value of the <code>--nav-fore-color</code> variable.</li><li>Background color for navigation bars can be changed by changing the value of the <code>--nav-back-color</code> variable.</li><li>Border color for navigation bars can be changed by changing the value of the <code>--nav-border-color</code> variable.</li><li>Background color for focused buttons inside navigation bars can be changed by changing the value of the <code>--nav-hover-back-color</code> variable.</li><li>Text color for links inside navigation bars can be changed by changing the value of the <code>--nav-link-color</code> variable.</li><li>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.</li><li>Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.</li><li>Universal border radius for elements can be changed globally by changing the value of the <code>--universal-border-radius</code> variable.</li></ul></div>
|
||||
</div><br/><div id="footer" class="card fluid">
|
||||
<h2 class="section double-padded">Footer</h2>
|
||||
|
||||
<div class="section"><p>The footer element has been minimally styled, aiming to provide you with a clean base to create your web apps' footers.</p></div>
|
||||
<div class="section"><h3>Example</h3><footer> <p class="doc">© 2016-2017 Web Corporation | <a href="#" class="doc">About</a> | <a href="#" class="doc">Terms of use</a></p> </footer></div>
|
||||
<div class="section double-padded prefiller-example"><h3>Sample code</h3><pre><span class="code-line"><span class="highlight-a"><footer></span></span>
|
||||
|
|
@ -561,6 +576,7 @@
|
|||
<div class="section double-padded"><h3>Customization</h3><ul><li>Text color for the footer can be changed by changing the value of the <code>--footer-fore-color</code> variable.</li><li>Background color for the footer can be changed by changing the value of the <code>--footer-back-color</code> variable.</li><li>Border color for the footer can be changed by changing the value of the <code>--footer-border-color</code> variable.</li><li>Text color for links inside the footer can be changed by changing the value of the <code>--footer-link-color</code> variable.</li><li>Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.</li></ul></div>
|
||||
</div><br/><div id="drawer" class="card fluid">
|
||||
<h2 class="section double-padded">Menu drawer</h2>
|
||||
|
||||
<div class="section"><p>The drawer component of <strong>mini.css</strong> is used to create responsive navigation menus for your web apps. It is composed of three components - the drawer, the toggle button and the close button:</p>
|
||||
<ul><li>To create a drawer, simply create a checkbox input, applying the appropriate class to it (<code>.drawer</code>), immediately followed by a container of your liking (e.g. a <code><div></code> or <code><nav></code>). The former serves as your drawer's control, while the latter is the actual drawer container.</li>
|
||||
<li>Create a label anywhere outside your drawer's container for the checkbox controlling your drawer, applying the appropriate class (<code>.drawer-toggle</code>). This will serve as the toggle button for your drawer menu.</li>
|
||||
|
|
@ -607,6 +623,7 @@
|
|||
<div class="section double-padded"><h3>Customization</h3><ul><li>Text color can be changed globally by changing the value of the <code>--fore-color</code> variable. This will affect the text color of the toggle button and items inside the drawer container.</li><li>Background color for the drawer container can be changed by changing the value of the <code>--drawer-back-color</code> variable.</li><li>Border color for the drawer container can be changed by changing the value of the <code>--drawer-border-color</code> variable.</li><li>Text color for the drawer close button can be changed by changing the values of the <code>--drawer-close-color</code>.</li><li>Background color for the drawer close button when focused or hovered over can be changed by changing the values of the <code>--drawer-hover-back-color</code>.</li><li>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.</li><li>Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.</li><li>Universal border radius for elements can be changed globally by changing the value of the <code>--universal-border-radius</code> variable.</li></ul></div>
|
||||
</div><br/><div id="tables" class="card fluid">
|
||||
<h2 class="section double-padded">Tables</h2>
|
||||
|
||||
<div class="section"><p>Tables are styled in a minimal, modern and responsive manner, allowing users on all devices to easily browse tabular data, taking advantage of the <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" target="_blank">Flexbox layout</a>'s capabilities. To make tabular data properly display on mobile devices, remember to specify a <code>data-label</code> attribute for each <code><></code> element (usually same as the heading of the column).</p></div>
|
||||
<div class="section"><h3>Example</h3><h6 style="text-align:center">Desktop view</h6>
|
||||
<table class="doc"><caption class="doc">People</caption>
|
||||
|
|
@ -776,6 +793,7 @@
|
|||
<div class="section double-padded"><h3>Customization</h3><ul><li>Text color for <code><th></code> and <code><td></code> elements can be changed by changing the values of the <code>--table-head-fore-color</code> and <code>--table-body-fore-color</code> variables respectively.</li><li>Background color for <code><th></code> and <code><td></code> elements can be changed by changing the values of the <code>--table-head-back-color</code> and <code>--table-body-back-color</code> variables respectively.</li><li>Border color for tables can be changed by changing the value of the <code>--table-border-color</code> variable.</li><li>Border color for the separator between a table's heading and a table's body can be changed by changing the value of the <code>--table-border-separator-color</code> variable.</li><li>Alternative background color for <code><td></code> elements in striped tables can be changed by changing the value of the <code>--table-body-alt-back-color</code> variable.</li><li>Hover background color for <code><tr></code> elements in hoverable tables can be changed by changing the value of the <code>--table-body-hover-back-color</code> variable.</li><li>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.</li><li>Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.</li><li>Universal border radius for elements can be changed globally by changing the value of the <code>--universal-border-radius</code> variable.</li></ul></div>
|
||||
</div><br/><div id="text-highlighting" class="card fluid">
|
||||
<h2 class="section double-padded">Text highlighting</h2>
|
||||
|
||||
<div class="section"><p>The native HTML5 mark element has been minimally styled to allow for easy text highlighting.</p></div>
|
||||
<div class="section"><h3>Example</h3><p class="doc">This is a paragraph with some <mark class="doc">highlighted text</mark>.</p></div>
|
||||
<div class="section double-padded prefiller-example"><h3>Sample code</h3><pre><span class="code-line"><span class="highlight-a"><p></span>This is some <span class="highlight-a"><mark></span>highlighted text<span class="highlight-a"></mark></span>.<span class="highlight-a"></p></span></span></pre></div>
|
||||
|
|
@ -788,6 +806,7 @@
|
|||
<div class="section double-padded"><h3>Customization</h3><ul><li>Text color for highlighted text can be changed by changing the value of the <code>--mark-fore-color</code> variable.</li><li>Background color for highlighted text can be changed by changing the value of the <code>--mark-back-color</code> variable.</li><li>Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.</li><li>Universal border radius for elements can be changed globally by changing the value of the <code>--universal-border-radius</code> variable.</li></ul></div>
|
||||
</div><br/><div id="toasts" class="card fluid">
|
||||
<h2 class="section double-padded">Toasts</h2>
|
||||
|
||||
<div class="section"><p><strong>mini.css</strong> provides you with toast messages (<code>.toast</code>), allowing you to display native-looking notifications on mobile devices.</p></div>
|
||||
<div class="section"><h3>Example</h3><div class="container" style="height: 8rem; position: relative;"><span class="toast doc" style="position: absolute;">This is a toast message!</span></div></div>
|
||||
<div class="section double-padded prefiller-example"><h3>Sample code</h3><pre><span class="code-line"><span class="highlight-a"><span</span> <span class="highlight-b">class</span>=<span class="highlight-c">"toast"</span><span class="highlight-a">></span>This is a toast message!<span class="highlight-a"></span></span></span></pre></div>
|
||||
|
|
@ -797,6 +816,7 @@
|
|||
<div class="section double-padded"><h3>Customization</h3><ul><li>Text color for toast messages can be changed by changing the value of the <code>--toast-fore-color</code> variable.</li><li>Background color for toast messages can be changed by changing the value of the <code>--toast-back-color</code> variable.</li><li>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.</li><li>Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.</li><li>Universal border radius for elements can be changed globally by changing the value of the <code>--universal-border-radius</code> variable.</li></ul></div>
|
||||
</div><br/><div id="tooltips" class="card fluid">
|
||||
<h2 class="section double-padded">Tooltips</h2>
|
||||
|
||||
<div class="section"><p>You can utilize the <code>aria-label</code> property to create accessible tooltips (<code>.tooltip</code>), allowing you to display explanatory text for different elements.</p></div>
|
||||
<div class="section"><h3>Example</h3><p class="tooltip" aria-label="This is a tooltip">Hover over this text to see a tooltip!</p></div>
|
||||
<div class="section double-padded prefiller-example"><h3>Sample code</h3><pre><span class="code-line"><span class="highlight-a"><span</span> <span class="highlight-b">class</span>=<span class="highlight-c">"tooltip"</span> <span class="highlight-b">aria-label</span>=<span class="highlight-c">"Tooltip text"</span><span class="highlight-a">></span>Hover over text to see tooltip<span class="highlight-a"></span></span></span></pre></div>
|
||||
|
|
@ -807,6 +827,7 @@
|
|||
<div class="section double-padded"><h3>Customization</h3><ul><li>Text color for tooltips can be changed by changing the value of the <code>--tooltip-fore-color</code> variable.</li><li>Background color for tooltips can be changed by changing the value of the <code>--tooltip-back-color</code> variable.</li><li>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.</li><li>Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.</li><li>Universal border radius for elements can be changed globally by changing the value of the <code>--universal-border-radius</code> variable.</li></ul></div>
|
||||
</div><br/><div id="modal-dialogs" class="card fluid">
|
||||
<h2 class="section double-padded">Modal dialogs</h2>
|
||||
|
||||
<div class="section"><p><strong>mini.css</strong> provides you with a modal dialog component to display messages to users. It is composed of three components - the modal dialog, the toggle button and the close button:</p>
|
||||
<ul><li>To create a modal dialog, simply create a checkbox input, applying the appropriate class to it (<code>.modal</code>), immediately followed by a <code><div></code> container. The former serves as your modal dialog's control, while the latter is the actual modal dialog container.</li>
|
||||
<li>Create a label anywhere outside your modal dialog's container for the checkbox controlling your modal dialog. This will serve as the toggle button for your modal dialog.</li>
|
||||
|
|
@ -844,6 +865,7 @@
|
|||
<div class="section double-padded"><h3>Customization</h3><ul><li>Background color for the modal dialog overlay can be changed by changing the value of <code>--modal-overlay-color</code>.</li><li>Text color for the modal dialog close button can be changed by changing the value of the <code>--modal-close-color</code>.</li><li>Background color for the modal dialog close button when focused or hovered over can be changed by changing the value of the <code>--modal-close-hover-color</code>.</li><li>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.</li><li>Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.</li><li>Universal border radius for elements can be changed globally by changing the value of the <code>--universal-border-radius</code> variable.</li></ul></div>
|
||||
</div><br/><div id="spoilers-and-accordions" class="card fluid">
|
||||
<h2 class="section double-padded">Spoilers & accordions</h2>
|
||||
|
||||
<div class="section"><p><strong>mini.css</strong> provides you with accessible spoilers and accordions. They are composed of two components - the wrapper, the toggle button and the content container:</p>
|
||||
<ul><li>To create a collapsible spoiler, simply create a <code><div></code>, applying the appropriate class to it (<code>.collapse</code>). This serves as the wrapper for the collapsible spoiler.</li>
|
||||
<li>Inside the wrapper, create a checkbox or radio input, immediately followed by a <code><label></code> for the checkbox. The former serves as your collapsible spoiler's control, while the latter is the toggle button for your collapsible spoiler.</li>
|
||||
|
|
@ -889,6 +911,7 @@
|
|||
<div class="section double-padded"><h3>Customization</h3><ul><li>Background color, text color and background color on hover for the collapsible spoiler's labels can be changed by changing the values of <code>--collapse-label-back-color</code>, <code>--collapse-label-fore-color</code> and <code>--collapse-label-hover-back-color</code> respectively.</li><li>Border color for the collapsible spoiler can be changed by changing the value of the <code>--collapse-border-color</code>.</li><li>Background color for the collapsible spoiler's content can be changed by changing the value of the <code>--collapse-content-back-color</code>.</li><li>Background color and border for the spoiler's content selected labels can be changed by changing the values of the <code>--collapse-selected-label-back-color</code> and <code>--collapse-selected-label-border-color</code> respectively.</li><li>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.</li><li>Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.</li><li>Universal border radius for elements can be changed globally by changing the value of the <code>--universal-border-radius</code> variable.</li></ul></div>
|
||||
</div><br/><div id="progress-bars" class="card fluid">
|
||||
<h2 class="section double-padded">Progress bars</h2>
|
||||
|
||||
<div class="section"><p>Progress bars are minimally styled to match with the rest of the framework's aesthetics and be consistent across all modern browsers.</p></div>
|
||||
<div class="section"><h3>Example</h3><progress value="450" max="1000"></progress></div>
|
||||
<div class="section double-padded prefiller-example"><h3>Sample code</h3><pre><span class="code-line"><span class="highlight-a"><progress</span> <span class="highlight-b">value</span>=<span class="highlight-c">"450"</span> <span class="highlight-b">max</span>=<span class="highlight-c">"1000"</span><span class="highlight-a">></progress></span></span></pre></div>
|
||||
|
|
@ -902,6 +925,7 @@
|
|||
<div class="section double-padded"><h3>Customization</h3><ul><li>Foreground color for progress bars can be changed by changing the value of the <code>--progress-fore-color</code> variable.</li><li>Background color for progress bars can be changed by changing the value of the <code>--progress-back-color</code> variable.</li><li>You can customize the colors of different color variants by changing the values of the related variables in their respective definitions.</li><li>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.</li><li>Universal border radius for elements can be changed globally by changing the value of the <code>--universal-border-radius</code> variable.</li></ul></div>
|
||||
</div><br/><div id="donut-spinners" class="card fluid">
|
||||
<h2 class="section double-padded">Donut spinners</h2>
|
||||
|
||||
<div class="section"><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></div>
|
||||
<div class="section"><h3>Example</h3><div class="spinner"></div></div>
|
||||
<div class="section double-padded prefiller-example"><h3>Sample code</h3><pre><span class="code-line"><span class="highlight-a"><div</span> <span class="highlight-b">class</span>=<span class="highlight-c">"spinner"</span><span class="highlight-a">></div></span></span></pre></div>
|
||||
|
|
@ -912,11 +936,63 @@
|
|||
<div class="section double-padded"><h3>Best practices</h3><div class="row dodos"><div class="col-sm-12 col-md-6"><pre><span class="code-line"><span class="highlight-a"><div</span> <span class="highlight-b">class</span>=<span class="highlight-c">"spinner"</span><span class="highlight-a">></span>Don't place text here.<span class="highlight-a"></div></span></span></pre></div><div class="col-sm-12 col-md-6"><p><mark class="dont">Don't:</mark> Avoid inserting text inside donut spinners.</p></div></div><br/><div class="row dodos"><div class="col-sm-12 col-md-6"><pre><span class="code-line"><span class="highlight-a"><div</span> <span class="highlight-b">class</span>=<span class="highlight-c">"spinner primary secondary"</span><span class="highlight-a">></div></span></span></pre></div><div class="col-sm-12 col-md-6"><p><mark class="dont">Don't:</mark> Avoid applying two color modifiers on the same donut spinner.</p></div></div></div>
|
||||
<div class="section double-padded"><h3>Notes</h3><ul><li>You can use either a <code><div></code> or a <code><span></code> element to create a donut spinner.</li><li>You can add the <code>role="progressbar"</code> attribute to spinner donut elements to increase accessibility.</li><li>You can inline donut spinners inside a paragraph or some other textual content.</li></ul></div>
|
||||
<div class="section double-padded"><h3>Customization</h3><ul><li>Foreground color for donut spinners can be changed by changing the value of the <code>--spinner-fore-color</code> variable.</li><li>Background color for donut spinners can be changed by changing the value of the <code>--spinner-back-color</code> variable.</li><li>You can customize the colors of different color variants by changing the values of the related variables in their respective definitions.</li><li>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.</li></ul></div>
|
||||
</div><br/><div id="icons" class="card fluid">
|
||||
<h2 class="section double-padded">Icons</h2>
|
||||
<a href="https://feathericons.com/" class="section double-padded" id="feather-banner" target="_blank" rel="noopener"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#f8f8f8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5z"></path><line x1="16" y1="8" x2="2" y2="22"></line><line x1="17" y1="15" x2="9" y2="15"></line></svg> Powered by Feather</a>
|
||||
<div class="section"><p><strong>mini.css</strong> comes with a set of 20 commonly-used icons (courtesy of <a href="https://feathericons.com/" target="_blank" rel="noopener">Feather</a>) that you can use anywhere in your web apps, utilizing the appropriate class for each icon.</p></div>
|
||||
<div class="section"><h3>Example</h3><div class="row icon-row">
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-alert"></span> .icon-alert</p></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-bookmark"></span> .icon-bookmark</p></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-calendar"></span> .icon-calendar</p></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-cart"></span> .icon-cart</p></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-credit"></span> .icon-credit</p></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-edit"></span> .icon-edit</p></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-help"></span> .icon-help</p></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-home"></span> .icon-home</p></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-info"></span> .icon-info</p></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-link"></span> .icon-link</p></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-location"></span> .icon-location</p></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-lock"></span> .icon-lock</p></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-mail"></span> .icon-mail</p></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-phone"></span> .icon-phone</p></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-rss"></span> .icon-rss</p></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-search"></span> .icon-search</p></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-settings"></span> .icon-settings</p></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-share"></span> .icon-share</p></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-upload"></span> .icon-upload</p></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-user"></span> .icon-user</p></div>
|
||||
</div></div>
|
||||
<div class="section double-padded prefiller-example"><h3>Sample code</h3><pre><span class="code-line"><span class="highlight-a"><span</span> <span class="highlight-b">class</span>=<span class="highlight-c">"icon-alert"</span><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">"icon-bookmark"</span><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">"icon-calendar"</span><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">"icon-cart"</span><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">"icon-credit"</span><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">"icon-edit"</span><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">"icon-help"</span><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">"icon-home"</span><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">"icon-info"</span><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">"icon-link"</span><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">"icon-location"</span><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">"icon-lock"</span><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">"icon-mail"</span><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">"icon-phone"</span><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">"icon-rss"</span><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">"icon-search"</span><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">"icon-settings"</span><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">"icon-share"</span><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">"icon-upload"</span><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">"icon-user"</span><span class="highlight-a">></span></span></span></pre></div>
|
||||
<div class="section double-padded prefiller-example"><h3>Modifiers</h3>
|
||||
<h4>Color variants</h4><p>You can create secondary or inverse (<code>.secondary</code>, <code>.inverse</code>) icons, simply by adding the appropriate color modifier.</p><h5>Example</h5><p style="padding: 0.5rem;" class="doc">This is a <span class="icon-home secondary"></span> secondary icon, which has a lighter color.</p><p style="background: #111; color: #f8f8f8; padding: 0.5rem;" class="doc">This is an <span class="icon-home inverse"></span> inverse icon.</p><h5>Sample code</h5><pre><span class="code-line"><span class="highlight-a"><span</span> <span class="highlight-b">class</span>=<span class="highlight-c">"icon-alert secondary"</span><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">"icon-alert inverse"</span><span class="highlight-a">></span></span></span></pre></div>
|
||||
<div class="section double-padded"><h3>Best practices</h3><div class="row dodos"><div class="col-sm-12 col-md-6"><pre><span class="code-line"><span class="highlight-a"><span</span> <span class="highlight-b">class</span>=<span class="highlight-c">"icon-alert"</span><span class="highlight-a">></span>Don't place text here.<span class="highlight-a"></span></span></span></pre></div><div class="col-sm-12 col-md-6"><p><mark class="dont">Don't:</mark> Avoid inserting text inside icon elements.</p></div></div><br/><div class="row dodos"><div class="col-sm-12 col-md-6"><pre><span class="code-line"><span class="highlight-a"><span</span> <span class="highlight-b">class</span>=<span class="highlight-c">"icon-alert inverse secondary"</span><span class="highlight-a">></span></span></span></pre></div><div class="col-sm-12 col-md-6"><p><mark class="dont">Don't:</mark> Avoid applying two color modifiers on the same icon.</p></div></div></div>
|
||||
<div class="section double-padded"><h3>Notes</h3><ul><li>You can only use a <code><span></code> element to create an icon.</li><li>You can inline icons inside a paragraph or pretty much any other textual content. Icons scale relative to their parent element.</li></ul></div>
|
||||
<div class="section double-padded"><h3>Customization</h3><ul><li>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.</li></ul></div>
|
||||
</div><footer><p><strong>mini.css</strong> was designed and built by <a href="https://github.com/Chalarangelo" target="_blank">@Chalarangelo</a>. Source code licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>.</p><p>Icons provided by <a href="https://feathericons.com/" target="_blank">Feather</a>. Search powered by <a href="http://fusejs.io/" target="_blank">Fuse.js</a>.</p></footer></main>
|
||||
</div></div>
|
||||
<script>
|
||||
// Search script
|
||||
var docs= [{id: "getting-started", keys: ["html","viewport","head","meta","getting started","introduction","browser support","installation","usage","setup","cdn","npm","yarn"] },{id: "common-textual-elements", keys: ["p","paragraph","text","textual elements","strong","bold","b","em","i","emphasis","italics","small","a","link","hr","horizontal rule","sub","subscript","sup","exponent","superscript","normalize","reset"] },{id: "heading", keys: ["heading","h1","h2","h3","h4","h5","h6","small","title","subtitle","subheading"] },{id: "images-captions", keys: ["img","image","responsive","responsiveness","caption","figure","figcaption"] },{id: "lists", keys: ["list","ul","ol","li"] },{id: "code-and-quotations", keys: ["code","pre","kbd","blockquote","quotation"] },{id: "grid", keys: ["grid","grid system","col","column","layout","row","container","small","medium","large","sm","md","lg","cols","predefined","offset","order","reorder","first","last","normal"] },{id: "cards", keys: ["card","row","section","container","col","column","small","large","fluid","warning","error"] },{id: "card-sections", keys: ["card","row","section","container","col","column","media","double-padded","dark"] },{id: "forms-and-input", keys: ["form","fieldset","legend","input","type","text","checkbox","radio","email","password","tel","input-group","input group","row","col","column","vertical","fluid","file","upload","select","textarea","option","label"] },{id: "buttons", keys: ["button","input","reset","submit","link","a","label","primary","secondary","tertiary","aria","small","large","inverse"] },{id: "input-grouping", keys: ["input group","input-group","vertical","fluid","input","button","button group","button-group"] },{id: "header", keys: ["navigation","header","sticky","button","logo","link"] },{id: "navigation-bar", keys: ["navigation","bar","nav","link"] },{id: "footer", keys: ["navigation","footer","sticky","link"] },{id: "drawer", keys: ["drawer","checkbox","toggle","close","drawer-toggle","drawer-close","menu","navigation","hamburger"] },{id: "tables", keys: ["table","caption","thead","tbody","tr","th","td","horizontal","striped","hoverable"] },{id: "text-highlighting", keys: ["mark","highlight","text highlighting","tag","primary","secondary","tertiary","inline-block"] },{id: "toasts", keys: ["span","toast","mobile","contextual","message"] },{id: "tooltips", keys: ["tooltip","aria-label","contextual","bottom","span"] },{id: "modal-dialogs", keys: ["modal","dialog","contextual","alert","notification"] },{id: "spoilers-and-accordions", keys: ["spoiler","collapse","accordion","contextual","vertical tabs"] },{id: "progress-bars", keys: ["progress","bar","primary","secondary","tertiary","inline"] },{id: "donut-spinners", keys: ["spinner","donut","loading","progress","primary","secondary","tertiary","inline","animation","animated"] }];
|
||||
var docs= [{id: "getting-started", keys: ["html","viewport","head","meta","getting started","introduction","browser support","installation","usage","setup","cdn","npm","yarn"] },{id: "common-textual-elements", keys: ["p","paragraph","text","textual elements","strong","bold","b","em","i","emphasis","italics","small","a","link","hr","horizontal rule","sub","subscript","sup","exponent","superscript","normalize","reset"] },{id: "heading", keys: ["heading","h1","h2","h3","h4","h5","h6","small","title","subtitle","subheading"] },{id: "images-captions", keys: ["img","image","responsive","responsiveness","caption","figure","figcaption"] },{id: "lists", keys: ["list","ul","ol","li"] },{id: "code-and-quotations", keys: ["code","pre","kbd","blockquote","quotation"] },{id: "grid", keys: ["grid","grid system","col","column","layout","row","container","small","medium","large","sm","md","lg","cols","predefined","offset","order","reorder","first","last","normal"] },{id: "cards", keys: ["card","row","section","container","col","column","small","large","fluid","warning","error"] },{id: "card-sections", keys: ["card","row","section","container","col","column","media","double-padded","dark"] },{id: "forms-and-input", keys: ["form","fieldset","legend","input","type","text","checkbox","radio","email","password","tel","input-group","input group","row","col","column","vertical","fluid","file","upload","select","textarea","option","label"] },{id: "buttons", keys: ["button","input","reset","submit","link","a","label","primary","secondary","tertiary","aria","small","large","inverse"] },{id: "input-grouping", keys: ["input group","input-group","vertical","fluid","input","button","button group","button-group"] },{id: "header", keys: ["navigation","header","sticky","button","logo","link"] },{id: "navigation-bar", keys: ["navigation","bar","nav","link"] },{id: "footer", keys: ["navigation","footer","sticky","link"] },{id: "drawer", keys: ["drawer","checkbox","toggle","close","drawer-toggle","drawer-close","menu","navigation","hamburger"] },{id: "tables", keys: ["table","caption","thead","tbody","tr","th","td","horizontal","striped","hoverable"] },{id: "text-highlighting", keys: ["mark","highlight","text highlighting","tag","primary","secondary","tertiary","inline-block"] },{id: "toasts", keys: ["span","toast","mobile","contextual","message"] },{id: "tooltips", keys: ["tooltip","aria-label","contextual","bottom","span"] },{id: "modal-dialogs", keys: ["modal","dialog","contextual","alert","notification"] },{id: "spoilers-and-accordions", keys: ["spoiler","collapse","accordion","contextual","vertical tabs"] },{id: "progress-bars", keys: ["progress","bar","primary","secondary","tertiary","inline"] },{id: "donut-spinners", keys: ["spinner","donut","loading","progress","primary","secondary","tertiary","inline","animation","animated"] },{id: "icons", keys: ["icon","svg","feather","icons"] }];
|
||||
var options = {threshold:0.4, keys:["keys"]};
|
||||
var fuse = new Fuse(docs,options);
|
||||
function search(){
|
||||
|
|
|
|||
2
docs/v3/style.min.css
vendored
2
docs/v3/style.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -127,6 +127,7 @@ $spinner-donut-tertiary-name: 'tertiary'; // Class name for tertiary spi
|
|||
$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';
|
||||
|
||||
// Custom elements for his flavor.
|
||||
|
|
@ -677,3 +678,28 @@ table.doc.cardized {
|
|||
font-weight: $table-mobile-label-font-weight;
|
||||
}
|
||||
}
|
||||
|
||||
a#feather-banner {
|
||||
background: #1976d2;
|
||||
color: #f8f8f8;
|
||||
font-size: 1.25rem;
|
||||
text-align:center;
|
||||
transition: background 0.3s;
|
||||
&:hover, &:focus {
|
||||
text-decoration: none;
|
||||
background: #1565c0;
|
||||
}
|
||||
svg {
|
||||
vertical-align: -0.25rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.row.icon-row {
|
||||
padding: 0.25rem;
|
||||
p {
|
||||
margin: 0.125rem;
|
||||
padding: 0.25rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,6 +37,18 @@ $icon-inverse-color-name: 'inverse' !default; // Class name for inverse color
|
|||
}
|
||||
@return $string;
|
||||
}
|
||||
// == Uncomment below code if this module is used on its own ==
|
||||
//
|
||||
// $universal-margin: 0.5rem !default; // Universal margin for the most elements
|
||||
// $fore-color: #111 !default; // Text & foreground color
|
||||
// $universal-margin-var: '--universal-margin' !default;
|
||||
// $fore-color-var: '--fore-color' !default;
|
||||
// :root {
|
||||
// #{$universal-margin-var}: $universal-margin;
|
||||
// #{$fore-color-var}: $fore-color;
|
||||
// }
|
||||
//
|
||||
// ============================================================
|
||||
// Base styling for icons.
|
||||
span[class^='#{$icon-prefix}-'] {
|
||||
display: inline-block;
|
||||
|
|
|
|||
Loading…
Reference in a new issue