22b730b987
Made spacing and margins more responsive, so that mobile devices will have an easier time reading the website.
384 lines
27 KiB
HTML
384 lines
27 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<link rel="stylesheet" href="../mini-default.min.css">
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
<title>mini.css - Progress</title>
|
|
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
|
<meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, module, progress ">
|
|
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
|
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
|
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
|
|
<meta property="og:type" content="website"/><meta property="og:image" content="../page_thumb.png">
|
|
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="../favicon.png">
|
|
<style>
|
|
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/erE3KsIWUumgD1j_Ca-V-xJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
|
|
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/LeFlHvsZjXu2c3ZRgBq9nFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; }
|
|
#header-logo { background: -webkit-linear-gradient(#07020d 20%, #150627 45%, #220a40 70%, #300d5a); background: linear-gradient(#07020d 20%, #150627 45%, #220a40 70%, #300d5a); line-height:1; font-size: 39px; width: 48px; height: 48px; padding: 8px; margin-left: -9px; }
|
|
.box-centered { text-align: center; }
|
|
.box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
|
|
.box-colored.red { background: #e53935; }
|
|
.box-centered > .card.fluid {-webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-self: auto; align-self: auto; } [class^='col-'] .card.fluid { margin: 2px 0 20px; }
|
|
[class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
|
|
.col-sm-12.col-sm-last.col-md-4.col-md-normal {box-sizing: border-box;border-right: 1px solid #c9c9c9;}
|
|
@media (max-width: 767px){.col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0;border-top: 1px solid #c9c9c9;}}
|
|
.box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
|
|
.box-colored {color: #f5f5f5;} @media (max-width: 767px){.container {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10{padding: 0 !important;}}
|
|
td:first-child, td:last-child { font-family: monospace, monospace; }
|
|
td:first-child::before, td:last-child::before { font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;} sup a { text-decoration: none; padding: 2px;}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header class="sticky">
|
|
<a href="../index.html" class="logo"><span id="header-logo">m</span></a>
|
|
<a href="../index.html" class="button">Introduction</a> <a href="../modules.html" class="button">Modules</a>
|
|
<a href="../flavors.html" class="button">Flavors</a> <a href="../templates.html" class="button">Templates</a> <a href="index.html" class="button">Customization</a>
|
|
<a href="../quick_reference.html" class="button">Quick Reference</a>
|
|
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i> Github</a>
|
|
</header>
|
|
<div class="container" style="padding-left: 0.25rem;">
|
|
<div class="row"> <div class="col-sm-12 col-md-4 col-lg-2 hidden-sm" style="padding: 0;"> <nav>
|
|
<h4 style="text-align: center">Customization</h4> <a href="core.html#core-title">Core</a>
|
|
<a href="core.html#typography-headings" class="sublink-1">Typography & headings</a>
|
|
<a href="core.html#common-elements" class="sublink-1">Common elements & fixes</a>
|
|
<br/> <a href="grid.html#grid-title">Grid</a>
|
|
<a href="grid.html#classes-breakpoints" class="sublink-1">Classes & breakpoints</a>
|
|
<br/> <a href="navigation.html#navigation-title">Navigation</a>
|
|
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
|
|
<a href="navigation.html#footer" class="sublink-1">Footer</a>
|
|
<br/> <a href="input_control.html#input-control-title">Input Control</a>
|
|
<a href="input_control.html#forms-input" class="sublink-1">Forms & input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes & radio buttons</a>
|
|
<a href="input_control.html#buttons" class="sublink-1">Buttons & button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button mixins</a>
|
|
<br/> <a href="table.html#table-title">Table</a>
|
|
<a href="table.html#table-styling" class="sublink-1">Table styling</a>
|
|
<br/> <a href="card.html#card-title">Card</a>
|
|
<a href="card.html#cards-sections" class="sublink-1">Cards and sections</a> <a href="card.html#card-mixins" class="sublink-1">Card mixins</a>
|
|
<br/> <a href="tab.html#tab-title">Tab</a>
|
|
<a href="tab.html#tab-styling" class="sublink-1">Tab styling</a>
|
|
<br/> <a href="contextual.html#contextual-title">Contextual</a>
|
|
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#alerts" class="sublink-1">Alerts</a>
|
|
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
|
|
<a href="contextual.html#alert-mixins" class="sublink-1">Alert mixins</a> <a href="contextual.html#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
|
|
<br/> <a href="progress.html#progress-title">Progress</a>
|
|
<a href="progress.html#progress-bar" class="sublink-1">Progress bar</a> <a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a>
|
|
<a href="progress.html#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress.html#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
|
|
<br/> <a href="utility.html#utility-title">Utility</a>
|
|
<a href="utility.html#visibility-legacy" class="sublink-1">Visibility helpers & legacy features</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
|
|
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
|
|
<a href="utility.html#borders-shadows-mixins" class="sublink-1">Generic border & shadow mixins</a>
|
|
<a href="utility.html#responsive-sizing-mixins" class="sublink-1">Responsive sizing & spacing mixins</a>
|
|
<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a><br/>
|
|
</nav> </div>
|
|
<div class="col-sm-12 col-md-8 col-lg-10"><main>
|
|
<div class="row" style="padding-top: 40px;" id="progress-title">
|
|
<div class="col-sm-12">
|
|
<h1>Progress</h1>
|
|
<p>The <strong>progress</strong> module gives you full control over the presentation of progress and loading on your pages. Apart from progress bars and color variants for them, spinner elements are provided to help communicate that something is loading.</p>
|
|
<p><small>All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.</small></p><br/>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<div class="card fluid">
|
|
<div class="section">
|
|
<h2>Quick overview</h2>
|
|
<p>Progress indicators are very common UI elements for almost any website and web app, as they help communicate vital information such as the fact that a process is being executed in the background, informing the user that they should wait for it to complete before proceeding. The <strong>progress</strong> module provides you with two essential tools to communicate this information: the <code><progress></code> HTML element, which is pre-styled and compatible with modern browsers to help you communicate information about the percentage of a task and the <code>.spinner-donut</code> class that allows you to create an animated spinner that communicates that something is loading currently and will continue doing so for an indefinite amount of time. Both elements come with their own color and size variants and are fully accessible.</p><br>
|
|
</div>
|
|
<div class="section">
|
|
<h2>Quick start</h2>
|
|
<p>To customize the <strong>progress</strong> module, duplicate an existing flavor file (we suggest you use the <code>mini-default.scss</code> flavor file) and use this page's variable tables and mixins as a reference to change only the values you need. Remember to compile your flavor file (not the module's partial file) using a Sass preprocessor (we highly recommend using <a href="https://atom.io/packages/sass-autocompile">sass-autocompile</a> if you are working with <a href="https://atom.io/">Atom</a>).</p><br>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" id="progress-bar">
|
|
<div class="col-sm-12">
|
|
<div class="card fluid">
|
|
<div class="section"><h2>Progress bar</h2></div>
|
|
<div class="section">
|
|
<p>The <strong>progress</strong> module's styling of <code><progress></code> elements is highly customizable.</p><br/>
|
|
<table style="width: 100%" class="striped">
|
|
<caption>Variables</caption>
|
|
<thead>
|
|
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td data-label="Variable">$progress-back-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">Background color for <code><progress></code> elements</td><td data-label="Sample value">#eeeeee</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$progress-fore-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">Progress bar color for <code><progress></code> elements</td><td data-label="Sample value">#01579b</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$progress-height</td><td data-label="Type">Height</td>
|
|
<td data-label="Description">Height for <code><progress></code> elements</td><td data-label="Sample value">14px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$progress-max-value</td><td data-label="Type">integer</td>
|
|
<td data-label="Description">Arithmetic max value for <code><progress></code> elements</td><td data-label="Sample value">1000</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$progress-border-style</td><td data-label="Type">Border</td>
|
|
<td data-label="Description">Border style for <code><progress></code> elements</td><td data-label="Sample value">1px solid #bdbdbd</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$progress-border-radius</td><td data-label="Type">Border radius</td>
|
|
<td data-label="Description">Border radius for <code><progress></code> elements</td><td data-label="Sample value">1px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$progress-top-bottom-margin</td><td data-label="Type">Margin (single value)</td>
|
|
<td data-label="Description">Top and bottom margin for <code><progress></code> elements</td><td data-label="Sample value">2px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$progress-left-right-margin</td><td data-label="Type">Margin (single value)</td>
|
|
<td data-label="Description">Left and right margin for <code><progress></code> elements</td><td data-label="Sample value">8px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$progress-box-shadow</td><td data-label="Type">Box shadow</td>
|
|
<td data-label="Description">Box shadow for <code><progress></code> elements</td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td>
|
|
</tr>
|
|
</tbody>
|
|
</table><br/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" id="donut-spinner">
|
|
<div class="col-sm-12">
|
|
<div class="card fluid">
|
|
<div class="section"><h2>Donut spinner</h2></div>
|
|
<div class="section">
|
|
<p>The <strong>progress</strong> module's donut spinner uses a custom class and a few variables for custmization.</p><br/>
|
|
<table style="width: 100%" class="striped">
|
|
<caption>Variables</caption>
|
|
<thead>
|
|
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td data-label="Variable">$spinner-donut-name</td><td data-label="Type">String</td>
|
|
<td data-label="Description">Class name for donut spinner components</td><td data-label="Sample value">'spinner-donut'</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$spinner-donut-back-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">Background color for donut spinner components</td><td data-label="Sample value">#e3f2fd</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$spinner-donut-fore-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">Foreground color for donut spinner components</td><td data-label="Sample value">#1565c0</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$spinner-donut-border-thickness</td><td data-label="Type">Border width</td>
|
|
<td data-label="Description">Border width for donut spinner components</td><td data-label="Sample value">4px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$spinner-donut-size</td><td data-label="Type">Size (single value, <code>px</code> preferred)</td>
|
|
<td data-label="Description">The size of donut spinner components (determines multiple values of the element)</td><td data-label="Sample value">20px</td>
|
|
</tr>
|
|
</tbody>
|
|
</table><br/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" id="progress-mixins">
|
|
<div class="col-sm-12">
|
|
<div class="card fluid">
|
|
<div class="section"><h2>Progress bar mixins</h2></div>
|
|
<div class="section">
|
|
<p>The <strong>progress</strong> module contains a couple of mixins for adding custom styles to <code><progress></code> elements (color and style variants), as well as a mixin for creating inline progress bars.</p><br/>
|
|
<table style="width: 100%" class="striped">
|
|
<caption>Mixin definitions</caption>
|
|
<thead>
|
|
<tr><th>Mixin</th><th>Description</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td data-label="Mixin">make-progress-alt-color (<span class="fore-primary">$progress-alt-name</span>, <span class="fore-primary">$progress-alt-fore-color</span>, <span class="fore-tertiary">$progress-alt-back-color</span>)</td>
|
|
<td data-label="Description">Creates a new <code><progress></code> color variant using the specified values.</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Mixin">make-progress-alt-style (<span class="fore-primary">$progress-alt-name</span>, <span class="fore-primary">$progress-alt-height</span>,<span class="fore-tertiary">$progress-alt-top-bottom-margin</span>,<span class="fore-tertiary">$progress-alt-left-right-margin</span>, <span class="fore-tertiary">$progress-alt-border-style</span>, <span class="fore-tertiary">$progress-alt-border-radius</span>, <span class="fore-tertiary">$progress-alt-box-shadow</span>)</td>
|
|
<td data-label="Description">Creates a new <code><progress></code> style variant using the specified values.</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Mixin">make-progress-inline (<span class="fore-primary">$progress-inline-name</span>, <span class="fore-primary">$progress-inline-width</span>)</td>
|
|
<td data-label="Description">Creates a new <code><progress></code> style variant using the specified values.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table><br/>
|
|
<table style="width: 100%" class="striped">
|
|
<caption style="font-family: monospace, monospace">make-progress-alt-color</caption>
|
|
<thead>
|
|
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td data-label="Parameter">$progress-alt-name</td><td data-label="Type">String</td>
|
|
<td data-label="Description">Class name for the <code><progress></code> color variant</td><td data-label="Sample value">'secondary'</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Parameter">$progress-alt-fore-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">Foreground color for the <code><progress></code> color variant</td><td data-label="Sample value">#e53935</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Parameter">$progress-alt-back-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">(Optional) Background color for the <code><progress></code> color variant</td><td data-label="Sample value">#eeeeee</td>
|
|
</tr>
|
|
</tbody>
|
|
</table><br/>
|
|
<h3>Sample usage</h3>
|
|
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-progress-alt-color</span> ('secondary', #e53935, #eeeeee);</pre>
|
|
<br/>
|
|
<table style="width: 100%" class="striped">
|
|
<caption style="font-family: monospace, monospace">make-progress-alt-style</caption>
|
|
<thead>
|
|
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td data-label="Parameter">$progress-alt-name</td><td data-label="Type">String</td>
|
|
<td data-label="Description">Class name for the <code><progress></code> style variant</td><td data-label="Sample value">'nano'</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Parameter">$progress-alt-height</td><td data-label="Type">Height</td>
|
|
<td data-label="Description">Height for the <code><progress></code> style variant</td><td data-label="Sample value">2px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$progress-alt-top-bottom-margin</td><td data-label="Type">Margin (single value)</td>
|
|
<td data-label="Description">(Optional) Top and bottom margin for the <code><progress></code> style variant</td><td data-label="Sample value">1px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$progress-alt-left-right-margin</td><td data-label="Type">Margin (single value)</td>
|
|
<td data-label="Description">(Optional) Left and right margin for the <code><progress></code> elements</td><td data-label="Sample value">1px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$progress-alt-border-style</td><td data-label="Type">Border</td>
|
|
<td data-label="Description">(Optional) Border style for the <code><progress></code> style variant</td><td data-label="Sample value">1px solid #bdbdbd</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$progress-alt-border-radius</td><td data-label="Type">Border radius</td>
|
|
<td data-label="Description">(Optional) Border radius for the <code><progress></code> style variant</td><td data-label="Sample value">1px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$progress-alt-box-shadow</td><td data-label="Type">Box shadow</td>
|
|
<td data-label="Description">(Optional) Box shadow for the <code><progress></code> style variant</td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td>
|
|
</tr>
|
|
</tbody>
|
|
</table><br/>
|
|
<h3>Sample usage</h3>
|
|
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-progress-alt-style</span> ('nano', 2px, 1px, 1px, 1px solid #bdbdbd, 1px, 0 1px 3px rgba(0,0,0, 0.1));</pre>
|
|
<br/>
|
|
<table style="width: 100%" class="striped">
|
|
<caption style="font-family: monospace, monospace">make-progress-inline</caption>
|
|
<thead>
|
|
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td data-label="Parameter">$progress-inline-name</td><td data-label="Type">String</td>
|
|
<td data-label="Description">Class name for the <code><progress></code> inline variant</td><td data-label="Sample value">'inline'</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Parameter">$progress-inline-width</td><td data-label="Type">Width (percentage preferred)</td>
|
|
<td data-label="Description">Width of the <code><progress></code> inline variant</td><td data-label="Sample value">60%</td>
|
|
</tr>
|
|
</tbody>
|
|
</table><br/>
|
|
<h3>Sample usage</h3>
|
|
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-progress-inline</span> ('inline', 60%);</pre>
|
|
<br/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" id="spinner-mixins">
|
|
<div class="col-sm-12">
|
|
<div class="card fluid">
|
|
<div class="section"><h2>Donut spinner mixins</h2></div>
|
|
<div class="section">
|
|
<p>The <strong>progress</strong> module contains a couple of mixins for adding custom styles to donut spinners (color and style variants).</p><br/>
|
|
<table style="width: 100%" class="striped">
|
|
<caption>Mixin definitions</caption>
|
|
<thead>
|
|
<tr><th>Mixin</th><th>Description</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td data-label="Mixin">make-spinner-donut-alt-color (<span class="fore-primary">$spinner-donut-alt-name</span>, <span class="fore-primary">$spinner-donut-alt-back-color</span>, <span class="fore-primary">$spinner-donut-alt-fore-color</span>)</td>
|
|
<td data-label="Description">Creates a new donut spinner color variant using the specified values.</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Mixin">make-spinner-donut-alt-style (<span class="fore-primary">$spinner-donut-alt-name</span>, <span class="fore-primary">$spinner-donut-alt-size</span>, <span class="fore-tertiary">$spinner-donut-alt-border-thickness</span>)</td>
|
|
<td data-label="Description">Creates a new donut spinner style variant using the specified values.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table><br/>
|
|
<table style="width: 100%" class="striped">
|
|
<caption style="font-family: monospace, monospace">make-spinner-donut-alt-color</caption>
|
|
<thead>
|
|
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td data-label="Parameter">$spinner-donut-alt-name</td><td data-label="Type">String</td>
|
|
<td data-label="Description">Class name for the donut spinner color variant</td><td data-label="Sample value">'secondary'</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Parameter">$spinner-donut-alt-back-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">Background color for the donut spinner color variant</td><td data-label="Sample value">#ffebee</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Parameter">$spinner-donut-alt-fore-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">(Optional) Text color for the donut spinner color variant</td><td data-label="Sample value">#c62828</td>
|
|
</tr>
|
|
</tbody>
|
|
</table><br/>
|
|
<h3>Sample usage</h3>
|
|
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-spinner-donut-alt-color</span> ('secondary', #ffebee, #c62828);</pre>
|
|
<br/>
|
|
<table style="width: 100%" class="striped">
|
|
<caption style="font-family: monospace, monospace">make-spinner-donut-alt-style</caption>
|
|
<thead>
|
|
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td data-label="Parameter">$spinner-donut-alt-name</td><td data-label="Type">String</td>
|
|
<td data-label="Description">Class name for the donut spinner style variant</td><td data-label="Sample value">'large'</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Parameter">$spinner-donut-alt-size</td><td data-label="Type">Size (single value, <code>px</code> preferred)</td>
|
|
<td data-label="Description">Size of the donut spinner style variant (determines multiple values of the element)</td><td data-label="Sample value">32px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Parameter">$spinner-donut-alt-border-thickness</td><td data-label="Type">Border width</td>
|
|
<td data-label="Description">(Optional) Border thickness for the donut spinner style variant</td><td data-label="Sample value">6px</td>
|
|
</tr>
|
|
</tbody>
|
|
</table><br/>
|
|
<h3>Sample usage</h3>
|
|
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-alert-alt-style</span> ('large', 32px, 6px);</pre>
|
|
<br/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
|
|
<div class="col-sm-12">
|
|
<p>If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="index.html">customization page</a> or choose a module from the top menu to see its documentation.</p>
|
|
</div>
|
|
</div>
|
|
</main></div></div></div>
|
|
<footer><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.</footer>
|
|
</body>
|
|
</html>
|