bb5a16805b
Added certain helpful indicators as to the existence of the React/Preact libraries, updated docs just slightly.
200 lines
16 KiB
HTML
200 lines
16 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 - Tab</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, tab, tabs ">
|
|
<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="tab-title">
|
|
<div class="col-sm-12">
|
|
<h1>Tab</h1>
|
|
<p style="text-align:justify">The <strong>tab</strong> module aims to combine multiple components and design paradigms, like collapses, accordions, carousels and tabs, into one general-purpose component. Tabs are very simple in structure, responsive on mobile and they allow for layout customization so that you can turn them into accordions or collapses whenever you want.</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">Spoilers, collapses, accordions, tabs, carousels have been a staple of modern design for quite a long time. All of these elements are implemented using the <strong>tab</strong> module's single generic container. The tab container replaces all of these design paradigms with one component that is very flexible and responsive in order to let you present your website or app's content any way you like. Tabbed navigation is very easy to implement, while collapse, accordion and carousel components use the stacked architecture of tabs. As usual, the tab container is responsive and accessible, allowing you to deliver your content properly to all devices and users.</p><br>
|
|
</div>
|
|
<div class="section">
|
|
<h2>Quick start</h2>
|
|
<p style="text-align:justify">To customize the <strong>tab</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="tab-styling">
|
|
<div class="col-sm-12">
|
|
<div class="card fluid">
|
|
<div class="section"><h2>Tab styling</h2></div>
|
|
<div class="section">
|
|
<p style="text-align:justify">The <strong>tab</strong> module contains definitions for tab styling, using custom classes and structures.</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">$tab-container-name</td><td data-label="Type">String</td>
|
|
<td data-label="Description">Class name for tab components' containers</td><td data-label="Sample value">'tabs'</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$tab-container-box-shadow</td><td data-label="Type">Box shadow</td>
|
|
<td data-label="Description">Box shadow for tab components' containers</td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$tab-border-style</td><td data-label="Type">Border</td>
|
|
<td data-label="Description">Border style for tab components</td><td data-label="Sample value">1px solid #9e9e9e</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$tab-border-radius</td><td data-label="Type">Border radius</td>
|
|
<td data-label="Description">Border radius for tab components</td><td data-label="Sample value">2px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$$tab-selected-border-color</td><td data-label="Type">Border bottom color</td>
|
|
<td data-label="Description">Border bottom color for tab components' selected label</td><td data-label="Sample value">#0277bd</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$tab-label-back-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">Background color for tab components' labels (default)</td><td data-label="Sample value">#e0e0e0</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$tab-label-selected-back-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">Background color for tab components' labels (selected)</td><td data-label="Sample value">#eeeeee</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$tab-label-fore-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">Text color for tab components' labels (default)</td><td data-label="Sample value">$fore-color</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$tab-label-selected-fore-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">Text color for tab components' labels (selected)</td><td data-label="Sample value">$fore-color</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$tab-label-hover-opacity</td><td data-label="Type">Opaciy</td>
|
|
<td data-label="Description">Opacity for tab components' labels (hover)</td><td data-label="Sample value">0.8</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$tab-label-padding</td><td data-label="Type">Padding</td>
|
|
<td data-label="Description">Padding for tab components' labels</td><td data-label="Sample value">10px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$tab-label-height</td><td data-label="Type">Height</td>
|
|
<td data-label="Description">Height for tab components' labels</td><td data-label="Sample value">26px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$tab-panel-back-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">Background color for tab components' panels</td><td data-label="Sample value">#fafafa</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$tab-panel-fore-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">Text color for tab components' panels</td><td data-label="Sample value">$fore-color</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$tab-panel-padding</td><td data-label="Type">Padding</td>
|
|
<td data-label="Description">Padding for tab components' panels</td><td data-label="Sample value">8px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$tab-panel-height</td><td data-label="Type">Height</td>
|
|
<td data-label="Description">Height for tab components' panels</td><td data-label="Sample value">400px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$tab-stacked-breakpoint</td><td data-label="Type">Breakpoint</td>
|
|
<td data-label="Description">Breakpoint for tabs components' mobile view</td><td data-label="Sample value">767px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$tab-stacked-name</td><td data-label="Type">String</td>
|
|
<td data-label="Description">Class name for stacked tab components</td><td data-label="Sample value">'stacked'</td>
|
|
</tr>
|
|
</tbody>
|
|
</table><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>
|