bb5a16805b
Added certain helpful indicators as to the existence of the React/Preact libraries, updated docs just slightly.
584 lines
38 KiB
HTML
584 lines
38 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 - Contextual</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, contextual ">
|
|
<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;} @media screen and (min-width: 768px) { .drawer { margin-top: 4px;}}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header class="sticky">
|
|
<a href="../index" class="logo"><span id="header-logo">m</span></a>
|
|
<label class="drawer-toggle button" for="navigation-toggle"></label>
|
|
<a href="../index" class="button hidden-sm">Introduction</a> <a href="../modules" class="button hidden-sm">Modules</a>
|
|
<a href="../flavors" class="button hidden-sm">Flavors</a> <a href="../templates" class="button hidden-sm">Templates</a>
|
|
<a href="../customization" class="button hidden-sm">Customization</a> <a href="../quick_reference" class="button hidden-sm">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"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
|
|
<label class="close" for="navigation-toggle"></label>
|
|
<a href="../index"><h4 style="margin-left: 0;">Introduction</h4></a>
|
|
<a href="../modules"><h4 style="margin-left: 0;">Modules</h4></a>
|
|
<a href="../flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
|
|
<a href="../templates"><h4 style="margin-left: 0;">Templates</h4></a>
|
|
<h4 style="margin-left: 0;">Customization</h4> <a href="core#core-title">Core</a>
|
|
<a href="core#typography-headings" class="sublink-1">Typography & headings</a>
|
|
<a href="core#common-elements" class="sublink-1">Common elements & fixes</a>
|
|
<br/> <a href="grid#grid-title">Grid</a>
|
|
<a href="grid#classes-breakpoints" class="sublink-1">Classes & breakpoints</a>
|
|
<br/> <a href="input_control#input-control-title">Input Control</a>
|
|
<a href="input_control#forms-input" class="sublink-1">Forms & input</a> <a href="input_control#checkbox-radio" class="sublink-1">Checkboxes & radio buttons</a> <a href="input_control#switch" class="sublink-1">Switches</a>
|
|
<a href="input_control#buttons" class="sublink-1">Buttons & button groups</a> <a href="input_control#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control#switch-mixins" class="sublink-1">Switch mixins</a>
|
|
<br/> <a href="navigation#navigation-title">Navigation</a>
|
|
<a href="navigation#header" class="sublink-1">Header</a> <a href="navigation#navigation-bar" class="sublink-1">Navigation bar</a>
|
|
<a href="navigation#drawer" class="sublink-1">Drawer</a> <a href="navigation#footer" class="sublink-1">Footer</a>
|
|
<br/> <a href="table#table-title">Table</a>
|
|
<a href="table#table-styling" class="sublink-1">Table styling</a>
|
|
<br/> <a href="card#card-title">Card</a>
|
|
<a href="card#cards-sections" class="sublink-1">Cards and sections</a> <a href="card#card-mixins" class="sublink-1">Card mixins</a>
|
|
<br/> <a href="tab#tab-title">Tab</a>
|
|
<a href="tab#tab-styling" class="sublink-1">Tab styling</a>
|
|
<br/> <a href="contextual#contextual-title">Contextual</a>
|
|
<a href="contextual#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual#toasts" class="sublink-1">Toasts</a>
|
|
<a href="contextual#tooltips" class="sublink-1">Tooltips</a> <a href="contextual#modals" class="sublink-1">Modals</a>
|
|
<a href="contextual#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
|
|
<a href="contextual#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
|
|
<br/> <a href="progress#progress-title">Progress</a>
|
|
<a href="progress#progress-bar" class="sublink-1">Progress bar</a> <a href="progress#donut-spinner" class="sublink-1">Donut spinner</a>
|
|
<a href="progress#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
|
|
<br/> <a href="utility#utility-title">Utility</a>
|
|
<a href="utility#visibility-legacy" class="sublink-1">Visibility helpers & legacy features</a> <a href="utility#breadcrumbs" class="sublink-1">Breadcrumbs</a>
|
|
<a href="utility#close-icon" class="sublink-1">Close icon</a>
|
|
<a href="utility#borders-shadows-mixins" class="sublink-1">Generic border & shadow mixins</a>
|
|
<a href="utility#responsive-sizing-mixins" class="sublink-1">Responsive sizing & spacing mixins</a>
|
|
<a href="utility#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
|
|
<a href="../quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
|
|
</nav>
|
|
<div class="col-sm-12 col-md-8 col-lg-10"><main>
|
|
<div class="row" style="padding-top: 40px;" id="contextual-title">
|
|
<div class="col-sm-12">
|
|
<h1>Contextual</h1>
|
|
<p style="text-align:justify">The <strong>contextual</strong> module provides you with simple tags, marks and highlights for your pages, allowing you to easily emphasize parts of your text. Contextual toasts, tooltips and modals are also provided, aiming to help deliver important information to users. HTML5 elements and simple rules are used in order to make important messages and pieces of content stand out easily.</p><br/>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<div class="card fluid">
|
|
<div class="section">
|
|
<h2>Quick overview</h2>
|
|
<p style="text-align:justify">Almost every website present on the web has some sort of content that needs highlighting in one way or another. The <strong>contextual</strong> module provides you with simple semantic text highlighting that utilises the <code><mark></code> HTML element. Apart from that, this module contains styles and definitions for a simple <code>.toast</code> container, that you can use to display toast messages on your websites and web apps. Toasts mimic the native application notifications of certain devices, making them mobile friendly. Finally, a simple accessible <code>.tooltip</code> implementation is included. All components in this module are fully accessible, so that's another thing not to worry about.</p><br>
|
|
</div>
|
|
<div class="section">
|
|
<h2>Quick start</h2>
|
|
<p style="text-align:justify">To customize the <strong>contextual</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="text-highlighting">
|
|
<div class="col-sm-12">
|
|
<div class="card fluid">
|
|
<div class="section"><h2>Text highlighting</h2></div>
|
|
<div class="section">
|
|
<p style="text-align:justify">The <strong>contextual</strong> module's styling of <code><mark></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">$mark-back-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">Background color for <code><mark></code> elements</td><td data-label="Sample value">#0277bd</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$mark-fore-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">Text color for <code><mark></code> elements</td><td data-label="Sample value">#fafafa</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$mark-font-size</td><td data-label="Type">Font size</td>
|
|
<td data-label="Description">Font size for <code><mark></code> elements</td><td data-label="Sample value">95%</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$mark-line-height</td><td data-label="Type">Line height</td>
|
|
<td data-label="Description">Line height for <code><mark></code> elements</td><td data-label="Sample value">1</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$mark-border-style</td><td data-label="Type">Border</td>
|
|
<td data-label="Description">Border style for <code><mark></code> elements</td><td data-label="Sample value">1px solid #0277bd</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$mark-border-radius</td><td data-label="Type">Border radius</td>
|
|
<td data-label="Description">Border radius for <code><mark></code> elements</td><td data-label="Sample value">2px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$mark-padding</td><td data-label="Type">Padding</td>
|
|
<td data-label="Description">Padding for <code><mark></code> elements</td><td data-label="Sample value">2px 4px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$mark-margin</td><td data-label="Type">Margin</td>
|
|
<td data-label="Description">Margin for <code><mark></code> elements</td><td data-label="Sample value">2px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$mark-box-shadow</td><td data-label="Type">Box shadow</td>
|
|
<td data-label="Description">Box shadow for <code><mark></code> elements</td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$mark-inline-block-name</td><td data-label="Type">String</td>
|
|
<td data-label="Description">Class name for inline block <code><mark></code> elements</td><td data-label="Sample value">'inline-block'</td>
|
|
</tr>
|
|
</tbody>
|
|
</table><br/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" id="toasts">
|
|
<div class="col-sm-12">
|
|
<div class="card fluid">
|
|
<div class="section"><h2>Toasts</h2></div>
|
|
<div class="section">
|
|
<p style="text-align:justify">The <strong>contextual</strong> module contains custom classes and styles for defining toast messages.</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">$toast-name</td><td data-label="Type">String</td>
|
|
<td data-label="Description">Class name for toast components</td><td data-label="Sample value">'toast'</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$toast-back-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">Background color for toast components</td><td data-label="Sample value">#424242</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$toast-fore-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">Text color for toast components</td><td data-label="Sample value">$fore-color</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$toast-border-style</td><td data-label="Type">Border</td>
|
|
<td data-label="Description">Border style for toast components</td><td data-label="Sample value">1px solid #bdbdbd</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$toast-border-radius</td><td data-label="Type">Border radius</td>
|
|
<td data-label="Description">Border radius for toast components</td><td data-label="Sample value">8px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$toast-padding</td><td data-label="Type">Padding</td>
|
|
<td data-label="Description">Padding for toast components</td><td data-label="Sample value">12px 16px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$toast-box-shadow</td><td data-label="Type">Box shadow</td>
|
|
<td data-label="Description">Box shadow for toast components</td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$toast-bottom</td><td data-label="Type">Position bottom</td>
|
|
<td data-label="Description">Position bottom for toast components</td><td data-label="Sample value">20px</td>
|
|
</tr>
|
|
</tbody>
|
|
</table><br/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" id="tooltips">
|
|
<div class="col-sm-12">
|
|
<div class="card fluid">
|
|
<div class="section"><h2>Tooltips</h2></div>
|
|
<div class="section">
|
|
<p style="text-align:justify">The <strong>contextual</strong> module contains a flag to enable or disable tooltips, custom classes for creating them and other variables for style customization.</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">$include-tooltip</td><td data-label="Type">Logical</td>
|
|
<td data-label="Description">Enables tooltip components<sup><a href="#tooltip-note-one">1</a></sup></td><td data-label="Sample value">true</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$tooltip-name</td><td data-label="Type">String</td>
|
|
<td data-label="Description">Class name for tooltip components<sup><a href="#tooltip-note-one">1</a></sup></td><td data-label="Sample value">'tooltip'</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$tooltip-back-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">Background color for tooltip components<sup><a href="#tooltip-note-one">1</a></sup></td><td data-label="Sample value">$fore-color</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$tooltip-fore-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">Text color for tooltip components<sup><a href="#tooltip-note-one">1</a></sup></td><td data-label="Sample value">#fafafa</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$tooltip-border-radius</td><td data-label="Type">Border radius</td>
|
|
<td data-label="Description">Border radius for tooltip components<sup><a href="#tooltip-note-one">1</a></sup></td><td data-label="Sample value">2px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$tooltip-padding</td><td data-label="Type">Padding</td>
|
|
<td data-label="Description">Padding for tooltip components<sup><a href="#tooltip-note-one">1</a></sup></td><td data-label="Sample value">12px 16px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$tooltip-tail-size</td><td data-label="Type">Position left</td>
|
|
<td data-label="Description">Left position for tooltip components's tail (calculated from value)<sup><a href="#tooltip-note-one">1</a></sup></td><td data-label="Sample value">6px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$tooltip-box-shadow</td><td data-label="Type">Box shadow</td>
|
|
<td data-label="Description">Box shadow for tooltip components<sup><a href="#tooltip-note-one">1</a></sup></td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$tooltip-bottom-name</td><td data-label="Type">String</td>
|
|
<td data-label="Description">Class name for animated tooltip components<sup><a href="#tooltip-note-one">1</a></sup></td><td data-label="Sample value">'bottom'</td>
|
|
</tr>
|
|
</tbody>
|
|
</table><br/>
|
|
</div>
|
|
<div class="section">
|
|
<h3>Notes:</h3>
|
|
<ol style="text-align:justify">
|
|
<li id="tooltip-note-one">The values used in the tooltip components will only be used if <code>$include-tooltip</code> is set to <code class="fore-tertiary">true</code>.</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" id="modals">
|
|
<div class="col-sm-12">
|
|
<div class="card fluid">
|
|
<div class="section"><h2>Modals</h2></div>
|
|
<div class="section">
|
|
<p style="text-align:justify">The <strong>contextual</strong> module contains a flag to enable or disable modals, a custom class for creating them and other variables for style customization.</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">$include-modal</td><td data-label="Type">Logical</td>
|
|
<td data-label="Description">Enables modal components<sup><a href="#modal-note-one">1</a></sup></td><td data-label="Sample value">true</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$modal-name</td><td data-label="Type">String</td>
|
|
<td data-label="Description">Class name for modal components<sup><a href="#modal-note-one">1</a></sup></td><td data-label="Sample value">'modal'</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$modal-back-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">Background color for modal components<sup><a href="#modal-note-one">1</a></sup></td><td data-label="Sample value">black</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$modal-back-opacity</td><td data-label="Type">Opacity</td>
|
|
<td data-label="Description">Background opacity for modal components<sup><a href="#modal-note-one">1</a></sup></td><td data-label="Sample value">0.4</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$modal-close-name</td><td data-label="Type">String</td>
|
|
<td data-label="Description">Class name of the close button of the modal component<sup><a href="#modal-note-one">1</a></sup></td><td data-label="Sample value">'close'</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$modal-close-top</td><td data-label="Type">Position top</td>
|
|
<td data-label="Description">Top position of the close button of the modal component<sup><a href="#modal-note-one">1</a></sup></td><td data-label="Sample value">12px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$modal-close-right</td><td data-label="Type">Position right</td>
|
|
<td data-label="Description">Right position of the close button of the modal component<sup><a href="#modal-note-one">1</a></sup><td data-label="Sample value">4px</td>
|
|
</tr>
|
|
</tbody>
|
|
</table><br/>
|
|
</div>
|
|
<div class="section">
|
|
<h3>Notes:</h3>
|
|
<ol style="text-align:justify">
|
|
<li id="modal-note-one">The values used in the modal components will only be used if <code>$include-modal</code> is set to <code class="fore-tertiary">true</code>.</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" id="highlighting-mixins">
|
|
<div class="col-sm-12">
|
|
<div class="card fluid">
|
|
<div class="section"><h2>Text highlighting mixins</h2></div>
|
|
<div class="section">
|
|
<p style="text-align:justify">The <strong>contextual</strong> module contains a couple of mixins for adding custom styles to <code><mark></code> elements (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-mark-alt-color (<span class="fore-primary">$mark-alt-name</span>, <span class="fore-primary">$mark-alt-back-color</span>, <span class="fore-tertiary">$mark-alt-fore-color</span>)</td>
|
|
<td data-label="Description">Creates a new <code><mark></code> color variant using the specified values.</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Mixin">make-mark-alt-style (<span class="fore-primary">$mark-alt-name</span>, <span class="fore-primary">$mark-alt-border-style</span>, <span class="fore-primary">$mark-alt-border-radius</span>, <span class="fore-tertiary">$mark-alt-padding</span>, <span class="fore-tertiary">$mark-alt-font-size</span>, <span class="fore-tertiary">$mark-alt-line-height</span>, <span class="fore-tertiary">$mark-alt-box-shadow</span>)</td>
|
|
<td data-label="Description">Creates a new <code><mark></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-mark-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">$mark-alt-name</td><td data-label="Type">String</td>
|
|
<td data-label="Description">Class name for the <code><mark></code> color variant</td><td data-label="Sample value">'secondary'</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Parameter">$mark-alt-back-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">Background color for the <code><mark></code> color variant</td><td data-label="Sample value">#e53935</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Parameter">$mark-alt-fore-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">(Optional) Text color for the <code><mark></code> color variant</td><td data-label="Sample value">#fafafa</td>
|
|
</tr>
|
|
</tbody>
|
|
</table><br/>
|
|
<h3>Sample usage</h3>
|
|
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-mark-alt-color</span> ('secondary', #e53935, #fafafa);</pre>
|
|
<br/>
|
|
<table style="width: 100%" class="striped">
|
|
<caption style="font-family: monospace, monospace">make-mark-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">$mark-alt-name</td><td data-label="Type">String</td>
|
|
<td data-label="Description">Class name for the <code><mark></code> style variant</td><td data-label="Sample value">'tag'</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Parameter">$mark-alt-border-style</td><td data-label="Type">Border</td>
|
|
<td data-label="Description">Border style for the <code><mark></code> style variant</td><td data-label="Sample value">1px solid #0277bd</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Parameter">$mark-alt-border-radius</td><td data-label="Type">Border radius</td>
|
|
<td data-label="Description">Border radius for the <code><mark></code> style variant</td><td data-label="Sample value">200px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Parameter">$mark-alt-padding</td><td data-label="Type">Padding</td>
|
|
<td data-label="Description">Padding for the <code><mark></code> style variant</td><td data-label="Sample value">4px 8px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Parameter">$mark-alt-font-size</td><td data-label="Type">Font size</td>
|
|
<td data-label="Description">Font size for the <code><mark></code> style variant</td><td data-label="Sample value">95%</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Parameter">$mark-alt-line-height</td><td data-label="Type">Line height</td>
|
|
<td data-label="Description">Line height for the <code><mark></code> style variant</td><td data-label="Sample value">1</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Parameter">$mark-alt-box-shadow</td><td data-label="Type">Margin</td>
|
|
<td data-label="Description">Box shadow for the <code><mark></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-mark-alt-style</span> ('tag', 1px solid #0277bd, 200px, 4px 8px, 95%, 1, 0 1px 3px rgba(0,0,0, 0.1));</pre>
|
|
<br/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" id="toast-mixins">
|
|
<div class="col-sm-12">
|
|
<div class="card fluid">
|
|
<div class="section"><h2>Toast mixins</h2></div>
|
|
<div class="section">
|
|
<p style="text-align:justify">The <strong>contextual</strong> module contains a couple of mixins for adding custom styles to toasts (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-toast-alt-color (<span class="fore-primary">$toast-alt-name</span>, <span class="fore-primary">$toast-alt-back-color</span>, <span class="fore-tertiary">$toast-alt-fore-color</span>)</td>
|
|
<td data-label="Description">Creates a new toast color variant using the specified values.</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Mixin">make-toast-alt-style (<span class="fore-primary">$toast-alt-name</span>, <span class="fore-primary">$toast-alt-border-style</span>, <span class="fore-primary">$toast-alt-border-radius</span>, <span class="fore-tertiary">$toast-alt-padding</span>, <span class="fore-tertiary">$toast-alt-box-shadow</span>)</td>
|
|
<td data-label="Description">Creates a new toast style variant using the specified values.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table><br/>
|
|
<table style="width: 100%" class="striped">
|
|
<caption style="font-family: monospace, monospace">make-toast-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">$toast-alt-name</td><td data-label="Type">String</td>
|
|
<td data-label="Description">Class name for the toast color variant</td><td data-label="Sample value">'warning'</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Parameter">$toast-alt-back-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">Background color for the toast color variant</td><td data-label="Sample value">#ffca28</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Parameter">$toast-alt-fore-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">(Optional) Text color for the toast color variant</td><td data-label="Sample value">#212121</td>
|
|
</tr>
|
|
</tbody>
|
|
</table><br/>
|
|
<h3>Sample usage</h3>
|
|
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-toast-alt-color</span> ('warning', #ffca28, #212121);</pre>
|
|
<br/>
|
|
<table style="width: 100%" class="striped">
|
|
<caption style="font-family: monospace, monospace">make-toast-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">$toast-alt-name</td><td data-label="Type">String</td>
|
|
<td data-label="Description">Class name for the toast style variant</td><td data-label="Sample value">'small'</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Parameter">$toast-alt-border-style</td><td data-label="Type">Border</td>
|
|
<td data-label="Description">Border style for the toast style variant</td><td data-label="Sample value">1px solid #bdbdbd</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Parameter">$toast-alt-border-radius</td><td data-label="Type">Border radius</td>
|
|
<td data-label="Description">Border radius for the toast style variant</td><td data-label="Sample value">6px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Parameter">$toast-alt-padding</td><td data-label="Type">Padding</td>
|
|
<td data-label="Description">(Optional) Padding for the toast style variant</td><td data-label="Sample value">9px 12px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Parameter">$toast-alt-box-shadow</td><td data-label="Type">Box shadow</td>
|
|
<td data-label="Description">(Optional) Box shadow for the toast 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-toast-alt-style</span> ('small', 1px solid #bdbdbd, 6px, 9px 12px, 0 1px 3px rgba(0,0,0, 0.1));</pre>
|
|
<br/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" id="tooltip-mixins">
|
|
<div class="col-sm-12">
|
|
<div class="card fluid">
|
|
<div class="section"><h2>Tooltip mixins</h2></div>
|
|
<div class="section">
|
|
<p style="text-align:justify">The <strong>contextual</strong> module contains a couple of mixins for adding custom styles to tooltips (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-tooltip-alt-color (<span class="fore-primary">$tooltip-alt-name</span>, <span class="fore-primary">$tooltip-alt-back-color</span>, <span class="fore-tertiary">$tooltip-alt-fore-color</span>)</td>
|
|
<td data-label="Description">Creates a new tooltip color variant using the specified values.</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Mixin">make-tooltip-alt-style (<span class="fore-primary">$tooltip-alt-name</span>, <span class="fore-primary">$tooltip-alt-tail-size</span>, <span class="fore-primary">$tooltip-alt-border-radius</span>, <span class="fore-tertiary">$tooltip-alt-padding</span>, <span class="fore-tertiary">$tooltip-alt-box-shadow</span>)</td>
|
|
<td data-label="Description">Creates a new tooltip style variant using the specified values.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table><br/>
|
|
<table style="width: 100%" class="striped">
|
|
<caption style="font-family: monospace, monospace">make-tooltip-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">$tooltip-alt-name</td><td data-label="Type">String</td>
|
|
<td data-label="Description">Class name for the tooltip color variant</td><td data-label="Sample value">'primary'</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Parameter">$tooltip-alt-back-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">Background color for the tooltip color variant</td><td data-label="Sample value">#0277bd</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Parameter">$tooltip-alt-fore-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">(Optional) Text color for the tooltip color variant</td><td data-label="Sample value">#fafafa</td>
|
|
</tr>
|
|
</tbody>
|
|
</table><br/>
|
|
<h3>Sample usage</h3>
|
|
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-tooltip-alt-color</span> ('primary', #0277bd, #fafafa);</pre>
|
|
<br/>
|
|
<table style="width: 100%" class="striped">
|
|
<caption style="font-family: monospace, monospace">make-tooltip-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">$tooltip-alt-name</td><td data-label="Type">String</td>
|
|
<td data-label="Description">Class name for the tooltip style variant</td><td data-label="Sample value">'large'</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Parameter">$tooltip-alt-tail-size</td><td data-label="Type">Position left</td>
|
|
<td data-label="Description">Left position for tooltip style variant's tail (calculated from value)</td><td data-label="Sample value">8px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Parameter">$tooltip-alt-border-radius</td><td data-label="Type">Border radius</td>
|
|
<td data-label="Description">Border radius for the tooltip style variant</td><td data-label="Sample value">4px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Parameter">$tooltip-alt-padding</td><td data-label="Type">Padding</td>
|
|
<td data-label="Description">(Optional) Padding for the tooltip style variant</td><td data-label="Sample value">15px 20px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Parameter">$tooltip-alt-box-shadow</td><td data-label="Type">Box Shadow</td>
|
|
<td data-label="Description">(Optional) Box shadow for the tooltip 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-tooltip-alt-style</span> ('large', 8px, 4px, 15px 20px, 0 1px 3px rgba(0,0,0, 0.1));</pre>
|
|
<br/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
|
|
<div class="col-sm-12">
|
|
<p style="text-align:justify">If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="../customization">customization page</a> or choose a module from the top menu to see its documentation.</p>
|
|
</div>
|
|
</div>
|
|
</main></div></div></div>
|
|
<footer style="text-align:justify"><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>
|