bb5a16805b
Added certain helpful indicators as to the existence of the React/Preact libraries, updated docs just slightly.
445 lines
31 KiB
HTML
445 lines
31 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 - Navigation</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, navigation ">
|
|
<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-lg-4.col-lg-normal {box-sizing: border-box; border-right: 1px solid #c9c9c9;}
|
|
@media (max-width: 1279px){.col-sm-12.col-sm-last.col-lg-4.col-lg-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="navigation-title">
|
|
<div class="col-sm-121">
|
|
<h1>Navigation</h1>
|
|
<p style="text-align:justify">The <strong>navigation</strong> module seeks to remedy the problems of vertical and horizontal navigation design paradigms, by combining the two for a better presentational effect. HTML5 navigational elements are at the heart of the module, allowing you to quickly build your navigation menus.</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">Menus and navigation are some of the most important elements for any website or web app and their design and ease-of-use are key factors that can determine a page's bounce rates. The <strong>navigation</strong> module takes a step back from the complicated menu and navigation design paradigms of the modern web, using HTML5 elements (i.e. <code>header</code>, <code>nav</code> and <code>footer</code>) for basic navigation, while providing fully accessibility for screen readers. Apart from the simple horizontal navigation (headers) and vertical menus (sidebars), we opted to add a responsive slide-in drawer menu that works well with any page layout. Finally, footers are also part of the <strong>navigation</strong> module, as they can often provide the user with useful information and/or links that are very important to enhancing their experience.</p><br>
|
|
</div>
|
|
<div class="section">
|
|
<h2>Quick start</h2>
|
|
<p style="text-align:justify">To customize the <strong>navigation</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="header">
|
|
<div class="col-sm-12">
|
|
<div class="card fluid">
|
|
<div class="section"><h2>Header</h2></div>
|
|
<div class="section">
|
|
<p style="text-align:justify">The <strong>navigation</strong> module contains definitions for styling the <code><header></code> element, along with its contents (logo and links).</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">$header-height</td><td data-label="Type">Height</td>
|
|
<td data-label="Description">The height of the <code><header></code> element</td><td data-label="Sample value">44px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$header-back-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">Background color for the <code><header></code> element</td><td data-label="Sample value">#263238</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$header-fore-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">Text color for the <code><header></code> element</td><td data-label="Sample value">#fafafa</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$header-border-style</td><td data-label="Type">Border</td>
|
|
<td data-label="Description">Border style for the <code><header></code> element</td><td data-label="Sample value">1px solid #424242</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$header-margin</td><td data-label="Type">Margin</td>
|
|
<td data-label="Description">Margin for the <code><header></code> element</td><td data-label="Sample value">0</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$header-padding</td><td data-label="Type">Padding</td>
|
|
<td data-label="Description">Padding for the <code><header></code> element</td><td data-label="Sample value">2px 8px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$header-box-shadow</td><td data-label="Type">Box shadow</td>
|
|
<td data-label="Description">Box shadow for the <code><header></code> element</td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$header-logo-name</td><td data-label="Type">String</td>
|
|
<td data-label="Description">Class name for the <code><header></code> element's logo</td><td data-label="Sample value">'logo'</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$header-logo-font-size</td><td data-label="Type">Font size</td>
|
|
<td data-label="Description">Font size for the <code><header></code> element's logo</td><td data-label="Sample value">1.75em</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$header-logo-line-height</td><td data-label="Type">Line height</td>
|
|
<td data-label="Description">Line height for the <code><header></code> element's logo</td><td data-label="Sample value">1.2</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$header-logo-margin</td><td data-label="Type">Margin</td>
|
|
<td data-label="Description">Margin for the <code><header></code> element's logo</td><td data-label="Sample value">1px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$header-logo-padding</td><td data-label="Type">Padding</td>
|
|
<td data-label="Description">Padding for the <code><header></code> element's logo</td><td data-label="Sample value">3px 0 0</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$header-link-hover-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">Hover color for the <code><header></code> element's links</td><td data-label="Sample value">#37474f</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$header-link-margin</td><td data-label="Type">Margin</td>
|
|
<td data-label="Description">Margin for the <code><header></code> element's links</td><td data-label="Sample value">2px 0 0</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$include-header-sticky</td><td data-label="Type">Logical</td>
|
|
<td data-label="Description">Enables sticky <code><header></code> elements<sup><a href="#header-note-one">1</a></sup></td><td data-label="Sample value">true</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$header-sticky-name</td><td data-label="Type">String</td>
|
|
<td data-label="Description">Class name for the sticky <code><header></code> element<sup><a href="#header-note-one">1</a></sup></td><td data-label="Sample value">'sticky'</td>
|
|
</tr>
|
|
</tbody>
|
|
</table><br/>
|
|
</div>
|
|
<div class="section">
|
|
<h3>Notes:</h3>
|
|
<ol style="text-align:justify">
|
|
<li id="header-note-one">The value of <code>$header-sticky-name</code> will only be used if <code>$include-header-sticky</code> is set to <code class="fore-tertiary">true</code>.</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" id="navigation-bar">
|
|
<div class="col-sm-12">
|
|
<div class="card fluid">
|
|
<div class="section"><h2>Navigation bar</h2></div>
|
|
<div class="section">
|
|
<p style="text-align:justify">The <strong>navigation</strong> module contains definitions for styling <code><nav></code> elements, along with the links they contain.</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">$nav-back-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">Background color for <code><nav></code> elements</td><td data-label="Sample value">#eceff1</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$nav-fore-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">Text color for <code><nav></code> elements</td><td data-label="Sample value">$fore-color</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$nav-border-style</td><td data-label="Type">Border</td>
|
|
<td data-label="Description">Border style for <code><nav></code> elements</td><td data-label="Sample value">1px solid #bdbdbd</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$nav-border-radius</td><td data-label="Type">Border radius</td>
|
|
<td data-label="Description">Border radius for <code><nav></code> elements</td><td data-label="Sample value">2px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$nav-margin</td><td data-label="Type">Margin</td>
|
|
<td data-label="Description">Margin for <code><nav></code> elements</td><td data-label="Sample value">2px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$nav-padding</td><td data-label="Type">Padding</td>
|
|
<td data-label="Description">Padding for <code><nav></code> elements</td><td data-label="Sample value">8px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$nav-box-shadow</td><td data-label="Type">Box shadow</td>
|
|
<td data-label="Description">Box shadow for <code><nav></code> elements</td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$nav-link-fore-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">Text color for <code><nav></code> elements' links</td><td data-label="Sample value">#1565c0</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$nav-sublink-prefix</td><td data-label="Type">String</td>
|
|
<td data-label="Description">Class prefix for <code><nav></code> elements' subcategories</td><td data-label="Sample value">'sublink'</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$nav-sublink-depth</td><td data-label="Type">Integer</td>
|
|
<td data-label="Description">Amount of <code><nav></code> elements' subcategories</td><td data-label="Sample value">2</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$nav-sublink-padding-left</td><td data-label="Type">Padding left</td>
|
|
<td data-label="Description">Left padding for <code><nav></code> elements' subcategories</td><td data-label="Sample value">12px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$nav-include-sublink-bar</td><td data-label="Type">Logical</td>
|
|
<td data-label="Description">Enables the sidebar for <code><nav></code> elements' subcategories<sup><a href="#nav-note-one">1</a></sup></td><td data-label="Sample value">true</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$nav-sublink-bar-left-position</td><td data-label="Type">Position left</td>
|
|
<td data-label="Description">Left position of the sidebar for <code><nav></code> elements' subcategories<sup><a href="#nav-note-one">1</a></sup></td><td data-label="Sample value">3px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$nav-sublink-bar-width</td><td data-label="Type">Border width</td>
|
|
<td data-label="Description">Width of the sidebar for <code><nav></code> elements' subcategories<sup><a href="#nav-note-one">1</a></sup></td><td data-label="Sample value">1px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$nav-sublink-bar-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">Color of the sidebar for <code><nav></code> elements' subcategories<sup><a href="#nav-note-one">1</a></sup></td><td data-label="Sample value">#263238</td>
|
|
</tr>
|
|
</tbody>
|
|
</table><br/>
|
|
</div>
|
|
<div class="section">
|
|
<h3>Notes:</h3>
|
|
<ol style="text-align:justify">
|
|
<li id="nav-note-one">The values of <code>$nav-sublink-bar-left-position</code>, <code>$nav-sublink-bar-width</code> and <code>$nav-sublink-bar-color</code> will only be used if <code>$nav-include-sublink-bar</code> is set to <code class="fore-tertiary">true</code>.</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" id="drawer">
|
|
<div class="col-sm-12">
|
|
<div class="card fluid">
|
|
<div class="section"><h2>Drawer</h2></div>
|
|
<div class="section">
|
|
<p style="text-align:justify">The <strong>navigation</strong> module contains custom classes and definitions for creating and styling a responsive drawer component.</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">$drawer-name</td><td data-label="Type">String</td>
|
|
<td data-label="Description">Class name for the drawer component</td><td data-label="Sample value">'drawer'</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$drawer-back-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">Background color for the drawer component</td><td data-label="Sample value">#eceff1</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$drawer-border-style</td><td data-label="Type">Border</td>
|
|
<td data-label="Description">Border style for the drawer component</td><td data-label="Sample value">1px solid #bdbdbd</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$drawer-border-radius</td><td data-label="Type">Border radius</td>
|
|
<td data-label="Description">Border radius for the drawer component</td><td data-label="Sample value">2px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$drawer-border-radius</td><td data-label="Type">Border radius</td>
|
|
<td data-label="Description">Border radius for the drawer component</td><td data-label="Sample value">2px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$drawer-width</td><td data-label="Type">Width</td>
|
|
<td data-label="Description">Width for the drawer component</td><td data-label="Sample value">320px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$drawer-padding</td><td data-label="Type">Padding</td>
|
|
<td data-label="Description">Padding for the drawer component</td><td data-label="Sample value">4px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$drawer-box-shadow</td><td data-label="Type">Box shadow</td>
|
|
<td data-label="Description">Box shadow for the drawer component</td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$drawer-mobile-breakpoint</td><td data-label="Type">Breakpoint</td>
|
|
<td data-label="Description">Breakpoint for the drawer component on mobile devices</td><td data-label="Sample value">768px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$drawer-normal-height</td><td data-label="Type">Height</td>
|
|
<td data-label="Description">height of the drawer component on medium-sized and larger screens<sup><a href="#drawer-note-one">1</a></sup></td><td data-label="Sample value">calc(100vh - 48px)</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$drawer-right-name</td><td data-label="Type">String</td>
|
|
<td data-label="Description">Class name of the right-aligned variant of the drawer component</td><td data-label="Sample value">'right'</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$drawer-peristent-name</td><td data-label="Type">String</td>
|
|
<td data-label="Description">Class name of the non-responsive variant of the drawer component</td><td data-label="Sample value">'persistent'</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$drawer-toggle-name</td><td data-label="Type">String</td>
|
|
<td data-label="Description">Class name of the toggle button of the drawer component</td><td data-label="Sample value">'drawer-toggle'</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$drawer-toggle-font-size</td><td data-label="Type">Font size</td>
|
|
<td data-label="Description">Font size of the toggle button of the drawer component</td><td data-label="Sample value">2.5em</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$drawer-toggle-line-height</td><td data-label="Type">Line height</td>
|
|
<td data-label="Description">Line height of the toggle button of the drawer component</td><td data-label="Sample value">0.125</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$drawer-toggle-top</td><td data-label="Type">Position top</td>
|
|
<td data-label="Description">Top position of the toggle button of the drawer component</td><td data-label="Sample value">6px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$drawer-close-name</td><td data-label="Type">String</td>
|
|
<td data-label="Description">Class name of the close button of the drawer component</td><td data-label="Sample value">'close'</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$drawer-close-top</td><td data-label="Type">Position top</td>
|
|
<td data-label="Description">Top position of the close button of the drawer component</td><td data-label="Sample value">12px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$drawer-close-right</td><td data-label="Type">Position right</td>
|
|
<td data-label="Description">Right position of the close button of the drawer component<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="drawer-note-one">The values of <code>$drawer-normal-height</code> <em>should be</em> the calculated value of the screen height minus the total height of the <code><header></code> element for best results.</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" id="footer">
|
|
<div class="col-sm-12">
|
|
<div class="card fluid">
|
|
<div class="section"><h2>Footer</h2></div>
|
|
<div class="section">
|
|
<p style="text-align:justify">The <strong>navigation</strong> module contains various definitions for customizing the appearance of the <code><footer></code> element.</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">$footer-back-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">Background color for the <code><footer></code> element</td><td data-label="Sample value">#263238</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$footer-fore-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">Text color for the <code><footer></code> element</td><td data-label="Sample value">#fafafa</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$footer-border-style</td><td data-label="Type">Border</td>
|
|
<td data-label="Description">Border style for the <code><footer></code> element</td><td data-label="Sample value">1px solid #424242</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$footer-font-size</td><td data-label="Type">Font size</td>
|
|
<td data-label="Description">Font size for the <code><footer></code> element</td><td data-label="Sample value">85%</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$footer-margin</td><td data-label="Type">Margin</td>
|
|
<td data-label="Description">Margin for the <code><footer></code> element</td><td data-label="Sample value">18px 0 0</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$footer-padding</td><td data-label="Type">Padding</td>
|
|
<td data-label="Description">Padding for the <code><footer></code> element</td><td data-label="Sample value">10px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$footer-link-fore-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">Text color for the <code><footer></code> element's links</td><td data-label="Sample value">#039be5</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$include-footer-sticky</td><td data-label="Type">Logical</td>
|
|
<td data-label="Description">Enables sticky <code><footer></code> elements<sup><a href="#footer-note-one">1</a></sup></td><td data-label="Sample value">true</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$footer-sticky-name</td><td data-label="Type">String</td>
|
|
<td data-label="Description">Class name for the sticky <code><footer></code> element<sup><a href="#footer-note-one">1</a></sup></td><td data-label="Sample value">'sticky'</td>
|
|
</tr>
|
|
</tbody>
|
|
</table><br/>
|
|
</div>
|
|
<div class="section">
|
|
<h3>Notes:</h3>
|
|
<ol style="text-align:justify">
|
|
<li id="footer-note-one">The value of <code>$footer-sticky-name</code> will only be used if <code>$include-footer-sticky</code> is set to <code class="fore-tertiary">true</code>.</li>
|
|
</ol>
|
|
</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>
|