Updated and documented collapse
This commit is contained in:
Angelos Chalaris
parent
6af3ce713f
commit
e0b880f419
9 changed files with 138 additions and 16 deletions
8
dist/mini-default.css
vendored
8
dist/mini-default.css
vendored
|
|
@ -1543,11 +1543,15 @@ mark.inline-block {
|
|||
border-radius: var(--universal-border-radius) var(--universal-border-radius) 0 0;
|
||||
}
|
||||
|
||||
.collapse > label:last-of-type {
|
||||
.collapse > label:last-of-type:not(:first-of-type) {
|
||||
border-radius: 0 0 var(--universal-border-radius) var(--universal-border-radius);
|
||||
}
|
||||
|
||||
.collapse > :checked:last-of-type + label {
|
||||
.collapse > label:last-of-type:first-of-type {
|
||||
border-radius: var(--universal-border-radius);
|
||||
}
|
||||
|
||||
.collapse > :checked:last-of-type:not(:first-of-type) + label {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
2
dist/mini-default.min.css
vendored
2
dist/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -18,6 +18,7 @@ var textHighlighting = require('./textHighlighting');
|
|||
var toasts = require('./toasts');
|
||||
var tooltips = require('./tooltips');
|
||||
var modalDialogs = require('./modalDialogs');
|
||||
var spoilersAndAccordions = require('./spoilersAndAccordions');
|
||||
|
||||
module.exports = [
|
||||
gettingStarted,
|
||||
|
|
@ -25,5 +26,5 @@ module.exports = [
|
|||
grid, cards, cardSections,
|
||||
formsAndInput, buttons, inputGrouping,
|
||||
header, navigationBar, footer, drawer,
|
||||
textHighlighting, toasts, tooltips, modalDialogs
|
||||
textHighlighting, toasts, tooltips, modalDialogs, spoilersAndAccordions
|
||||
]
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ module.exports = {
|
|||
<li>Create a label anywhere outside your modal dialog's container for the checkbox controlling your modal dialog. This will serve as the toggle button for your modal dialog.</li>
|
||||
<li>Finally, inside your modal dialog's container, add another label for the checkbox controlling your modal dialog, applying the appropriate class (.modal-close). This will serve as the close button for your modal dialog.</li>
|
||||
</ul>`,
|
||||
example: `<input type="checkbox" class="modal" id="modal-example"><div class="modal"><div class="card"><label for="modal-example" class="modal-close"></label><h3 class="section double-padded">Modal</h3><p class="section double-padded">This is a modal dialog!</p></div></div><label for="modal-example" class="button">Show modal dialog</label>`,
|
||||
example: `<input type="checkbox" class="modal" id="modal-example"><div class="modal doc"><div class="card doc"><label for="modal-example" class="modal-close doc"></label><h3 class="section double-padded doc">Modal</h3><p class="section double-padded doc">This is a modal dialog!</p></div></div><label for="modal-example" class="button doc">Show modal dialog</label>`,
|
||||
samples: [`<pre><span class="code-line"><span class="highlight-a"><label</span> <span class="highlight-b">for</span>=<span class="highlight-c">"modal-control"</span><span class="highlight-a">></span>Show modal<span class="highlight-a"></label></span></span>
|
||||
<span class="code-line"></span>
|
||||
<span class="code-line"><span class="highlight-a"><input</span> <span class="highlight-b">type</span>=<span class="highlight-c">"checkbox"</span> <span class="highlight-b">id</span>=<span class="highlight-c">"modal-control"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"modal"</span><span class="highlight-a">></span></span>
|
||||
|
|
|
|||
68
docs/doc-fragments/spoilersAndAccordions.js
Normal file
68
docs/doc-fragments/spoilersAndAccordions.js
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
module.exports = {
|
||||
id: 'spoilers-and-accordions',
|
||||
title: 'Spoilers & accordions',
|
||||
keywords: [`spoiler`, `collapse`, `accordion`, `contextual`, `vertical tabs`],
|
||||
description: `<p><strong>mini.css</strong> provides you with accessible spoilers and accordions. They are composed of two components - the wrapper, the toggle button and the content container:</p>
|
||||
<ul><li>To create a collapsible spoiler, simply create a <code><div></code>, applying the appropriate class to it (<code>.collapse</code>). This serves as the wrapper for the collapsible spoiler.</li>
|
||||
<li>Inside the wrapper, create a checkbox or radio input, immediately followed by a <code><label></code> for the checkbox. The former serves as your collapsible spoiler's control, while the latter is the toggle button for your collapsible spoiler.</li>
|
||||
<li>Create a <code><div></code> right after the <code><label></code>. This will serve as the container for the collapsible content.</li>
|
||||
</ul>
|
||||
<p>If you want to create an accordion, simply repeat the last two steps above for each section of the accordion. In order to make collapsible spoilers and accordions fully accessible, it is highly recommended to add the <code>aria-hidden="true"</code> attribute to all labels and inputs that control the behavior of these components.</p>`,
|
||||
example: `<div class="collapse"><input type="checkbox" id="collapse-example1" checked aria-hidden="true"><label for="collapse-example1" aria-hidden="true">Collapse section 1</label><div><p>This is the first section of the collapse</p></div><input type="checkbox" id="collapse-example2" aria-hidden="true"><label for="collapse-example2" aria-hidden="true">Collapse section 2</label><div><p>This is the second section of the collapse</p></div></div><br/>
|
||||
<div class="collapse"><input type="radio" name="accordion" id="accordion-example1" checked aria-hidden="true"><label for="accordion-example1" aria-hidden="true">Accordion section 1</label><div><p>This is the first section of the accordion</p></div><input type="radio" name="accordion" id="accordion-example2" aria-hidden="true"><label for="accordion-example2" aria-hidden="true">Accordion section 2</label><div><p>This is the second section of the accordion</p></div></div>`,
|
||||
samples: [`<pre><span class="code-line"><span class="highlight-a"><div</span> <span class="highlight-b">class</span>=<span class="highlight-c">"collapse"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><input</span> <span class="highlight-b">type</span>=<span class="highlight-c">"checkbox"</span> <span class="highlight-b">id</span>=<span class="highlight-c">"collapse-section1"</span> <span class="highlight-b">checked</span> <span class="highlight-b">aria-hidden</span>=<span class="highlight-c">"true"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><label</span> <span class="highlight-b">for</span>=<span class="highlight-c">"collapse-section1"</span> <span class="highlight-b">aria-hidden</span>=<span class="highlight-c">"true"</span><span class="highlight-a">></span>Collapse section 1<span class="highlight-a"></label></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><div></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><p></span>This is the first section of the collapse<span class="highlight-a"></p></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"></div></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><input</span> <span class="highlight-b">type</span>=<span class="highlight-c">"checkbox"</span> <span class="highlight-b">id</span>=<span class="highlight-c">"collapse-section2"</span> <span class="highlight-b">aria-hidden</span>=<span class="highlight-c">"true"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><label</span> <span class="highlight-b">for</span>=<span class="highlight-c">"collapse-section2"</span> <span class="highlight-b">aria-hidden</span>=<span class="highlight-c">"true"</span><span class="highlight-a">></span>Collapse section 2<span class="highlight-a"></label></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><div></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><p></span>This is the second section of the collapse<span class="highlight-a"></p></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"></div></span></span>
|
||||
<span class="code-line"><span class="highlight-a"></div></span></span></pre>`,
|
||||
`<pre><span class="code-line"><span class="highlight-a"><div</span> <span class="highlight-b">class</span>=<span class="highlight-c">"collapse"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><input</span> <span class="highlight-b">type</span>=<span class="highlight-c">"radio"</span> <span class="highlight-b">id</span>=<span class="highlight-c">"accordion-section1"</span> <span class="highlight-b">checked</span> <span class="highlight-b">aria-hidden</span>=<span class="highlight-c">"true"</span> <span class="highlight-b">name</span>=<span class="highlight-c">"accordion"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><label</span> <span class="highlight-b">for</span>=<span class="highlight-c">"accordion-section1"</span> <span class="highlight-b">aria-hidden</span>=<span class="highlight-c">"true"</span><span class="highlight-a">></span>Accordion section 1<span class="highlight-a"></label></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><div></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><p></span>This is the first section of the accordion<span class="highlight-a"></p></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"></div></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><input</span> <span class="highlight-b">type</span>=<span class="highlight-c">"radio"</span> <span class="highlight-b">id</span>=<span class="highlight-c">"accordion-section2"</span> <span class="highlight-b">aria-hidden</span>=<span class="highlight-c">"true"</span> <span class="highlight-b">name</span>=<span class="highlight-c">"accordion"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><label</span> <span class="highlight-b">for</span>=<span class="highlight-c">"accordion-section2"</span> <span class="highlight-b">aria-hidden</span>=<span class="highlight-c">"true"</span><span class="highlight-a">></span>Accordion section 2<span class="highlight-a"></label></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><div></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><p></span>This is the second section of the accordion<span class="highlight-a"></p></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"></div></span></span>
|
||||
<span class="code-line"><span class="highlight-a"></div></span></span></pre>`],
|
||||
notes: [
|
||||
`Make sure all the radio buttons in the same accordion have the same <code>name</code>.`,
|
||||
`If you want a collapsible spoiler or an accordion section to be expanded by default, you can add the <code>checked</code> attribute to the respective collapsible spooiler's or section's control.`,
|
||||
`The <code>max-height</code> of the content container is <code>400px</code>.`,
|
||||
`Using the <code>aria-hidden="true"</code> attribute is highly recommended, as screen readers will ignore the controls of the collapsible spoiler or accordion and read all the contained content normally.`
|
||||
],
|
||||
customization: [
|
||||
`Background color, text color and background color on hover for the collapsible spoiler's labels can be changed by changing the values of <code>--collapse-label-back-color</code>, <code>--collapse-label-fore-color</code> and <code>--collapse-label-hover-back-color</code> respectively.`,
|
||||
`Border color for the collapsible spoiler can be changed by changing the value of the <code>--collapse-border-color</code>.`,
|
||||
`Background color for the collapsible spoiler's content can be changed by changing the value of the <code>--collapse-content-back-color</code>.`,
|
||||
`Background color and border for the spoiler's content selected labels can be changed by changing the values of the <code>--collapse-selected-label-back-color</code> and <code>--collapse-selected-label-border-color</code> respectively.`,
|
||||
`Universal margin for elements can be changed globally by changing the value of the <code>--universal-margin</code> variable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen.`,
|
||||
`Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.`,
|
||||
`Universal border radius for elements can be changed globally by changing the value of the <code>--universal-border-radius</code> variable.`
|
||||
],
|
||||
modifiers: [],
|
||||
dos: [],
|
||||
donts: [
|
||||
{
|
||||
description: `You should not place anything between the checkbox controlling the collapsible spoiler and its label or between the label and the content container.`,
|
||||
sample: `<pre><span class="code-line"><span class="highlight-a"><div</span> <span class="highlight-b">class</span>=<span class="highlight-c">"collapse"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><input</span> <span class="highlight-b">type</span>=<span class="highlight-c">"checkbox"</span> <span class="highlight-b">id</span>=<span class="highlight-c">"collapse-section1"</span> <span class="highlight-b">checked</span> <span class="highlight-b">aria-hidden</span>=<span class="highlight-c">"true"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"> <span class="highlight-c"><!-- Do not place other stuff between these --></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><label</span> <span class="highlight-b">for</span>=<span class="highlight-c">"collapse-section1"</span> <span class="highlight-b">aria-hidden</span>=<span class="highlight-c">"true"</span><span class="highlight-a">></span>Collapse section 1<span class="highlight-a"></label></span></span>
|
||||
<span class="code-line"> <span class="highlight-c"><!-- Do not place other stuff between these --></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><div></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><p></span>This is the first section of the collapse<span class="highlight-a"></p></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"></div></span></span>
|
||||
<span class="code-line"><span class="highlight-a"></div></span></span></pre>`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -238,3 +238,4 @@
|
|||
## 20171228
|
||||
|
||||
- Documented `.modal`.
|
||||
- Documented `.collapse`.
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
</header>
|
||||
<div class="row" id="doc-wrapper">
|
||||
<input id="doc-drawer-checkbox" class="drawer" value="on" type="checkbox">
|
||||
<nav class="col-md-4 col-lg-3" id="nav-drawer"><h3>Menu</h3><label for="doc-drawer-checkbox" class="button drawer-close"></label><div><input style="width: 100%; margin: 0px;" placeholder="Search..." type="search" id="search-bar" oninput="search()"></div><a href="#getting-started" id="link-to-getting-started">Getting started</a><a href="#common-textual-elements" id="link-to-common-textual-elements">Common textual elements</a><a href="#heading" id="link-to-heading">Headings</a><a href="#images-captions" id="link-to-images-captions">Images & captions</a><a href="#lists" id="link-to-lists">Lists</a><a href="#code-and-quotations" id="link-to-code-and-quotations">Code & quotations</a><a href="#grid" id="link-to-grid">Grid system</a><a href="#cards" id="link-to-cards">Cards</a><a href="#card-sections" id="link-to-card-sections">Card sections</a><a href="#forms-and-input" id="link-to-forms-and-input">Forms & input</a><a href="#buttons" id="link-to-buttons">Buttons</a><a href="#input-grouping" id="link-to-input-grouping">Input grouping</a><a href="#header" id="link-to-header">Header</a><a href="#navigation-bar" id="link-to-navigation-bar">Navigation bar</a><a href="#footer" id="link-to-footer">Footer</a><a href="#drawer" id="link-to-drawer">Menu drawer</a><a href="#text-highlighting" id="link-to-text-highlighting">Text highlighting</a><a href="#toasts" id="link-to-toasts">Toasts</a><a href="#tooltips" id="link-to-tooltips">Tooltips</a><a href="#modal-dialogs" id="link-to-modal-dialogs">Modal dialogs</a><span id="no-results">No results found</span></nav>
|
||||
<nav class="col-md-4 col-lg-3" id="nav-drawer"><h3>Menu</h3><label for="doc-drawer-checkbox" class="button drawer-close"></label><div><input style="width: 100%; margin: 0px;" placeholder="Search..." type="search" id="search-bar" oninput="search()"></div><a href="#getting-started" id="link-to-getting-started">Getting started</a><a href="#common-textual-elements" id="link-to-common-textual-elements">Common textual elements</a><a href="#heading" id="link-to-heading">Headings</a><a href="#images-captions" id="link-to-images-captions">Images & captions</a><a href="#lists" id="link-to-lists">Lists</a><a href="#code-and-quotations" id="link-to-code-and-quotations">Code & quotations</a><a href="#grid" id="link-to-grid">Grid system</a><a href="#cards" id="link-to-cards">Cards</a><a href="#card-sections" id="link-to-card-sections">Card sections</a><a href="#forms-and-input" id="link-to-forms-and-input">Forms & input</a><a href="#buttons" id="link-to-buttons">Buttons</a><a href="#input-grouping" id="link-to-input-grouping">Input grouping</a><a href="#header" id="link-to-header">Header</a><a href="#navigation-bar" id="link-to-navigation-bar">Navigation bar</a><a href="#footer" id="link-to-footer">Footer</a><a href="#drawer" id="link-to-drawer">Menu drawer</a><a href="#text-highlighting" id="link-to-text-highlighting">Text highlighting</a><a href="#toasts" id="link-to-toasts">Toasts</a><a href="#tooltips" id="link-to-tooltips">Tooltips</a><a href="#modal-dialogs" id="link-to-modal-dialogs">Modal dialogs</a><a href="#spoilers-and-accordions" id="link-to-spoilers-and-accordions">Spoilers & accordions</a><span id="no-results">No results found</span></nav>
|
||||
<main class="col-sm-12 col-md-8 col-lg-9" id="doc-content"><div id="getting-started" class="card fluid">
|
||||
<h2 class="section double-padded">Getting started</h2>
|
||||
<div class="section"><p>You can get started using <strong>mini.css</strong> in one of many ways. It is published on <strong>npm</strong> and <strong>yarn</strong>, so you can easily download it, using your preferred package manager:</p>
|
||||
|
|
@ -646,7 +646,7 @@
|
|||
<li>Create a label anywhere outside your modal dialog's container for the checkbox controlling your modal dialog. This will serve as the toggle button for your modal dialog.</li>
|
||||
<li>Finally, inside your modal dialog's container, add another label for the checkbox controlling your modal dialog, applying the appropriate class (.modal-close). This will serve as the close button for your modal dialog.</li>
|
||||
</ul></div>
|
||||
<div class="section"><h3>Example</h3><input type="checkbox" class="modal" id="modal-example"><div class="modal"><div class="card"><label for="modal-example" class="modal-close"></label><h3 class="section double-padded">Modal</h3><p class="section double-padded">This is a modal dialog!</p></div></div><label for="modal-example" class="button">Show modal dialog</label></div>
|
||||
<div class="section"><h3>Example</h3><input type="checkbox" class="modal" id="modal-example"><div class="modal doc"><div class="card doc"><label for="modal-example" class="modal-close doc"></label><h3 class="section double-padded doc">Modal</h3><p class="section double-padded doc">This is a modal dialog!</p></div></div><label for="modal-example" class="button doc">Show modal dialog</label></div>
|
||||
<div class="section double-padded prefiller-example"><h3>Sample code</h3><pre><span class="code-line"><span class="highlight-a"><label</span> <span class="highlight-b">for</span>=<span class="highlight-c">"modal-control"</span><span class="highlight-a">></span>Show modal<span class="highlight-a"></label></span></span>
|
||||
<span class="code-line"></span>
|
||||
<span class="code-line"><span class="highlight-a"><input</span> <span class="highlight-b">type</span>=<span class="highlight-c">"checkbox"</span> <span class="highlight-b">id</span>=<span class="highlight-c">"modal-control"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"modal"</span><span class="highlight-a">></span></span>
|
||||
|
|
@ -676,11 +676,56 @@
|
|||
<span class="code-line"><span class="highlight-a"></div></span></span></pre></div><div class="col-sm-12 col-md-6"><p><mark class="dont">Don't:</mark> You should not place anything between the checkbox controlling the modal dialog and the container.</p></div></div></div>
|
||||
<div class="section double-padded"><h3>Notes</h3><ul><li>Modal dialogs should be used in combination with the <a href="#card">card</a> component for best results.</li><li>Remember to apply the appropriate classes to any and all elements, as indicated in the examples. Failing to do so will result in the modal dialog not rendering or behaving properly.</li><li>You can omit the toggle for the modal dialog and use Javascript to show/hide it, instead. You can also use any correctly linked label inside the modal dialog to change its state.</li></ul></div>
|
||||
<div class="section double-padded"><h3>Customization</h3><ul><li>Background color for the modal dialog overlay can be changed by changing the value of <code>--modal-overlay-color</code>.</li><li>Text color for the modal dialog close button can be changed by changing the value of the <code>--modal-close-color</code>.</li><li>Background color for the modal dialog close button when focused or hovered over can be changed by changing the value of the <code>--modal-close-hover-color</code>.</li><li>Universal margin for elements can be changed globally by changing the value of the <code>--universal-margin</code> variable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen.</li><li>Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.</li><li>Universal border radius for elements can be changed globally by changing the value of the <code>--universal-border-radius</code> variable.</li></ul></div>
|
||||
</div><br/><div id="spoilers-and-accordions" class="card fluid">
|
||||
<h2 class="section double-padded">Spoilers & accordions</h2>
|
||||
<div class="section"><p><strong>mini.css</strong> provides you with accessible spoilers and accordions. They are composed of two components - the wrapper, the toggle button and the content container:</p>
|
||||
<ul><li>To create a collapsible spoiler, simply create a <code><div></code>, applying the appropriate class to it (<code>.collapse</code>). This serves as the wrapper for the collapsible spoiler.</li>
|
||||
<li>Inside the wrapper, create a checkbox or radio input, immediately followed by a <code><label></code> for the checkbox. The former serves as your collapsible spoiler's control, while the latter is the toggle button for your collapsible spoiler.</li>
|
||||
<li>Create a <code><div></code> right after the <code><label></code>. This will serve as the container for the collapsible content.</li>
|
||||
</ul>
|
||||
<p>If you want to create an accordion, simply repeat the last two steps above for each section of the accordion. In order to make collapsible spoilers and accordions fully accessible, it is highly recommended to add the <code>aria-hidden="true"</code> attribute to all labels and inputs that control the behavior of these components.</p></div>
|
||||
<div class="section"><h3>Example</h3><div class="collapse"><input type="checkbox" id="collapse-example1" checked aria-hidden="true"><label for="collapse-example1" aria-hidden="true">Collapse section 1</label><div><p>This is the first section of the collapse</p></div><input type="checkbox" id="collapse-example2" aria-hidden="true"><label for="collapse-example2" aria-hidden="true">Collapse section 2</label><div><p>This is the second section of the collapse</p></div></div><br/>
|
||||
<div class="collapse"><input type="radio" name="accordion" id="accordion-example1" checked aria-hidden="true"><label for="accordion-example1" aria-hidden="true">Accordion section 1</label><div><p>This is the first section of the accordion</p></div><input type="radio" name="accordion" id="accordion-example2" aria-hidden="true"><label for="accordion-example2" aria-hidden="true">Accordion section 2</label><div><p>This is the second section of the accordion</p></div></div></div>
|
||||
<div class="section double-padded prefiller-example"><h3>Sample code</h3><pre><span class="code-line"><span class="highlight-a"><div</span> <span class="highlight-b">class</span>=<span class="highlight-c">"collapse"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><input</span> <span class="highlight-b">type</span>=<span class="highlight-c">"checkbox"</span> <span class="highlight-b">id</span>=<span class="highlight-c">"collapse-section1"</span> <span class="highlight-b">checked</span> <span class="highlight-b">aria-hidden</span>=<span class="highlight-c">"true"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><label</span> <span class="highlight-b">for</span>=<span class="highlight-c">"collapse-section1"</span> <span class="highlight-b">aria-hidden</span>=<span class="highlight-c">"true"</span><span class="highlight-a">></span>Collapse section 1<span class="highlight-a"></label></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><div></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><p></span>This is the first section of the collapse<span class="highlight-a"></p></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"></div></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><input</span> <span class="highlight-b">type</span>=<span class="highlight-c">"checkbox"</span> <span class="highlight-b">id</span>=<span class="highlight-c">"collapse-section2"</span> <span class="highlight-b">aria-hidden</span>=<span class="highlight-c">"true"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><label</span> <span class="highlight-b">for</span>=<span class="highlight-c">"collapse-section2"</span> <span class="highlight-b">aria-hidden</span>=<span class="highlight-c">"true"</span><span class="highlight-a">></span>Collapse section 2<span class="highlight-a"></label></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><div></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><p></span>This is the second section of the collapse<span class="highlight-a"></p></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"></div></span></span>
|
||||
<span class="code-line"><span class="highlight-a"></div></span></span></pre><pre><span class="code-line"><span class="highlight-a"><div</span> <span class="highlight-b">class</span>=<span class="highlight-c">"collapse"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><input</span> <span class="highlight-b">type</span>=<span class="highlight-c">"radio"</span> <span class="highlight-b">id</span>=<span class="highlight-c">"accordion-section1"</span> <span class="highlight-b">checked</span> <span class="highlight-b">aria-hidden</span>=<span class="highlight-c">"true"</span> <span class="highlight-b">name</span>=<span class="highlight-c">"accordion"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><label</span> <span class="highlight-b">for</span>=<span class="highlight-c">"accordion-section1"</span> <span class="highlight-b">aria-hidden</span>=<span class="highlight-c">"true"</span><span class="highlight-a">></span>Accordion section 1<span class="highlight-a"></label></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><div></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><p></span>This is the first section of the accordion<span class="highlight-a"></p></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"></div></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><input</span> <span class="highlight-b">type</span>=<span class="highlight-c">"radio"</span> <span class="highlight-b">id</span>=<span class="highlight-c">"accordion-section2"</span> <span class="highlight-b">aria-hidden</span>=<span class="highlight-c">"true"</span> <span class="highlight-b">name</span>=<span class="highlight-c">"accordion"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><label</span> <span class="highlight-b">for</span>=<span class="highlight-c">"accordion-section2"</span> <span class="highlight-b">aria-hidden</span>=<span class="highlight-c">"true"</span><span class="highlight-a">></span>Accordion section 2<span class="highlight-a"></label></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><div></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><p></span>This is the second section of the accordion<span class="highlight-a"></p></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"></div></span></span>
|
||||
<span class="code-line"><span class="highlight-a"></div></span></span></pre></div>
|
||||
|
||||
<div class="section double-padded"><h3>Best practices</h3><div class="row dodos"><div class="col-sm-12 col-md-6"><pre><span class="code-line"><span class="highlight-a"><div</span> <span class="highlight-b">class</span>=<span class="highlight-c">"collapse"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><input</span> <span class="highlight-b">type</span>=<span class="highlight-c">"checkbox"</span> <span class="highlight-b">id</span>=<span class="highlight-c">"collapse-section1"</span> <span class="highlight-b">checked</span> <span class="highlight-b">aria-hidden</span>=<span class="highlight-c">"true"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"> <span class="highlight-c"><!-- Do not place other stuff between these --></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><label</span> <span class="highlight-b">for</span>=<span class="highlight-c">"collapse-section1"</span> <span class="highlight-b">aria-hidden</span>=<span class="highlight-c">"true"</span><span class="highlight-a">></span>Collapse section 1<span class="highlight-a"></label></span></span>
|
||||
<span class="code-line"> <span class="highlight-c"><!-- Do not place other stuff between these --></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><div></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><p></span>This is the first section of the collapse<span class="highlight-a"></p></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"></div></span></span>
|
||||
<span class="code-line"><span class="highlight-a"></div></span></span></pre></div><div class="col-sm-12 col-md-6"><p><mark class="dont">Don't:</mark> You should not place anything between the checkbox controlling the collapsible spoiler and its label or between the label and the content container.</p></div></div></div>
|
||||
<div class="section double-padded"><h3>Notes</h3><ul><li>Make sure all the radio buttons in the same accordion have the same <code>name</code>.</li><li>If you want a collapsible spoiler or an accordion section to be expanded by default, you can add the <code>checked</code> attribute to the respective collapsible spooiler's or section's control.</li><li>The <code>max-height</code> of the content container is <code>400px</code>.</li><li>Using the <code>aria-hidden="true"</code> attribute is highly recommended, as screen readers will ignore the controls of the collapsible spoiler or accordion and read all the contained content normally.</li></ul></div>
|
||||
<div class="section double-padded"><h3>Customization</h3><ul><li>Background color, text color and background color on hover for the collapsible spoiler's labels can be changed by changing the values of <code>--collapse-label-back-color</code>, <code>--collapse-label-fore-color</code> and <code>--collapse-label-hover-back-color</code> respectively.</li><li>Border color for the collapsible spoiler can be changed by changing the value of the <code>--collapse-border-color</code>.</li><li>Background color for the collapsible spoiler's content can be changed by changing the value of the <code>--collapse-content-back-color</code>.</li><li>Background color and border for the spoiler's content selected labels can be changed by changing the values of the <code>--collapse-selected-label-back-color</code> and <code>--collapse-selected-label-border-color</code> respectively.</li><li>Universal margin for elements can be changed globally by changing the value of the <code>--universal-margin</code> variable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen.</li><li>Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.</li><li>Universal border radius for elements can be changed globally by changing the value of the <code>--universal-border-radius</code> variable.</li></ul></div>
|
||||
</div><footer><p><strong>mini.css</strong> was designed and built by <a href="https://github.com/Chalarangelo" target="_blank">@Chalarangelo</a>. Source code licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>.</p><p>Icons provided by <a href="https://feathericons.com/" target="_blank">Feather</a>. Search powered by <a href="http://fusejs.io/" target="_blank">Fuse.js</a>.</p></footer></main>
|
||||
</div></div>
|
||||
<script>
|
||||
// Search script
|
||||
var docs= [{id: "getting-started", keys: ["html","viewport","head","meta","getting started","introduction","browser support","installation","usage","setup","cdn","npm","yarn"] },{id: "common-textual-elements", keys: ["p","paragraph","text","textual elements","strong","bold","b","em","i","emphasis","italics","small","a","link","hr","horizontal rule","sub","subscript","sup","exponent","superscript","normalize","reset"] },{id: "heading", keys: ["heading","h1","h2","h3","h4","h5","h6","small","title","subtitle","subheading"] },{id: "images-captions", keys: ["img","image","responsive","responsiveness","caption","figure","figcaption"] },{id: "lists", keys: ["list","ul","ol","li"] },{id: "code-and-quotations", keys: ["code","pre","kbd","blockquote","quotation"] },{id: "grid", keys: ["grid","grid system","col","column","layout","row","container","small","medium","large","sm","md","lg","cols","predefined","offset","order","reorder","first","last","normal"] },{id: "cards", keys: ["card","row","section","container","col","column","small","large","fluid","warning","error"] },{id: "card-sections", keys: ["card","row","section","container","col","column","media","double-padded","dark"] },{id: "forms-and-input", keys: ["form","fieldset","legend","input","type","text","checkbox","radio","email","password","tel","input-group","input group","row","col","column","vertical","fluid","file","upload","select","textarea","option","label"] },{id: "buttons", keys: ["button","input","reset","submit","link","a","label","primary","secondary","tertiary","aria","small","large","inverse"] },{id: "input-grouping", keys: ["input group","input-group","vertical","fluid","input","button","button group","button-group"] },{id: "header", keys: ["navigation","header","sticky","button","logo","link"] },{id: "navigation-bar", keys: ["navigation","bar","nav","link"] },{id: "footer", keys: ["navigation","footer","sticky","link"] },{id: "drawer", keys: ["drawer","checkbox","toggle","close","drawer-toggle","drawer-close","menu","navigation","hamburger"] },{id: "text-highlighting", keys: ["mark","highlight","text highlighting","tag","primary","secondary","tertiary","inline-block"] },{id: "toasts", keys: ["span","toast","mobile","contextual","message"] },{id: "tooltips", keys: ["tooltip","aria-label","contextual","bottom","span"] },{id: "modal-dialogs", keys: ["modal","dialog","contextual","alert","notification"] }];
|
||||
var docs= [{id: "getting-started", keys: ["html","viewport","head","meta","getting started","introduction","browser support","installation","usage","setup","cdn","npm","yarn"] },{id: "common-textual-elements", keys: ["p","paragraph","text","textual elements","strong","bold","b","em","i","emphasis","italics","small","a","link","hr","horizontal rule","sub","subscript","sup","exponent","superscript","normalize","reset"] },{id: "heading", keys: ["heading","h1","h2","h3","h4","h5","h6","small","title","subtitle","subheading"] },{id: "images-captions", keys: ["img","image","responsive","responsiveness","caption","figure","figcaption"] },{id: "lists", keys: ["list","ul","ol","li"] },{id: "code-and-quotations", keys: ["code","pre","kbd","blockquote","quotation"] },{id: "grid", keys: ["grid","grid system","col","column","layout","row","container","small","medium","large","sm","md","lg","cols","predefined","offset","order","reorder","first","last","normal"] },{id: "cards", keys: ["card","row","section","container","col","column","small","large","fluid","warning","error"] },{id: "card-sections", keys: ["card","row","section","container","col","column","media","double-padded","dark"] },{id: "forms-and-input", keys: ["form","fieldset","legend","input","type","text","checkbox","radio","email","password","tel","input-group","input group","row","col","column","vertical","fluid","file","upload","select","textarea","option","label"] },{id: "buttons", keys: ["button","input","reset","submit","link","a","label","primary","secondary","tertiary","aria","small","large","inverse"] },{id: "input-grouping", keys: ["input group","input-group","vertical","fluid","input","button","button group","button-group"] },{id: "header", keys: ["navigation","header","sticky","button","logo","link"] },{id: "navigation-bar", keys: ["navigation","bar","nav","link"] },{id: "footer", keys: ["navigation","footer","sticky","link"] },{id: "drawer", keys: ["drawer","checkbox","toggle","close","drawer-toggle","drawer-close","menu","navigation","hamburger"] },{id: "text-highlighting", keys: ["mark","highlight","text highlighting","tag","primary","secondary","tertiary","inline-block"] },{id: "toasts", keys: ["span","toast","mobile","contextual","message"] },{id: "tooltips", keys: ["tooltip","aria-label","contextual","bottom","span"] },{id: "modal-dialogs", keys: ["modal","dialog","contextual","alert","notification"] },{id: "spoilers-and-accordions", keys: ["spoiler","collapse","accordion","contextual","vertical tabs"] }];
|
||||
var options = {threshold:0.4, keys:["keys"]};
|
||||
var fuse = new Fuse(docs,options);
|
||||
function search(){
|
||||
|
|
|
|||
2
docs/v3/style.min.css
vendored
2
docs/v3/style.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -336,16 +336,19 @@ mark {
|
|||
border-top: 0;
|
||||
}
|
||||
& > label:first-of-type {
|
||||
border-radius: var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}) 0 0; // universalize
|
||||
border-radius: var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}) 0 0;
|
||||
}
|
||||
& > label:last-of-type {
|
||||
border-radius: 0 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}); // universalize
|
||||
& > label:last-of-type:not(:first-of-type) {
|
||||
border-radius: 0 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var});
|
||||
}
|
||||
& > :checked:last-of-type + label {
|
||||
& > label:last-of-type:first-of-type {
|
||||
border-radius: var(#{$universal-border-radius-var});
|
||||
}
|
||||
& > :checked:last-of-type:not(:first-of-type) + label {
|
||||
border-radius: 0;
|
||||
+ div {
|
||||
border-radius: 0 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}); // universalize
|
||||
}
|
||||
}
|
||||
& > :checked:last-of-type + label + div {
|
||||
border-radius: 0 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue