076fd2d9c7
The Sucroa flavor has been updated to the latest version. Alerts and the .nano progress bar have been removed, the .toast has been added using the color palette that the flavor uses, the alert colors have been moved to .card color variants, .drawer has been added using the colors of <nav>, generic shadows remain unchanged, based on the fact that the flavor still uses shadows, the .drawer component does not have a shadow by the way (I think it causes some problems, but this requires further testing). If anyone wants to update the flavor, please refer to this commit!
446 lines
31 KiB
HTML
446 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.html" class="logo"><span id="header-logo">m</span></a>
|
|
<label class="drawer-toggle button" for="navigation-toggle"></label>
|
|
<a href="../index.html" class="button hidden-sm">Introduction</a> <a href="../modules.html" class="button hidden-sm">Modules</a>
|
|
<a href="../flavors.html" class="button hidden-sm">Flavors</a> <a href="../templates.html" class="button hidden-sm">Templates</a>
|
|
<a href="index.html" class="button hidden-sm">Customization</a> <a href="../quick_reference.html" 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.html"><h4 style="margin-left: 0;">Introduction</h4></a>
|
|
<a href="../modules.html"><h4 style="margin-left: 0;">Modules</h4></a>
|
|
<a href="../flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
|
|
<a href="../templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
|
|
<h4 style="margin-left: 0;">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="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="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#drawer" class="sublink-1">Drawer</a> <a href="navigation.html#footer" class="sublink-1">Footer</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#toasts" class="sublink-1">Toasts</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#toast-mixins" class="sublink-1">Toast 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>
|
|
<a href="../quick_reference.html"><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>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>
|
|
<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>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>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>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>
|
|
<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>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>
|
|
<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>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>
|
|
<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>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>
|
|
<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>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>
|