mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-01 19:40:35 +02:00
Code Issues Releases Wiki Activity

Accordion module full

Browse Source
This commit is contained in:
Angelos Chalaris
2016-11-09 14:16:05 +02:00
parent 83d598663f
commit 60d477eae3
7 changed files with 181 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
docs/v2/DEVLOG.md
View File

@@ -319,3 +319,15 @@
## 20161109
- Changed `checkbox` module a little bit to use `floor()` functions to fill the `:after` part, so that everything will look kinda tidier on most browsers. This has been modified after testing on more screens and noticing some minor discrepancies with the way `radio`s are presented.
- Created `mini-shell/accordion` for the `accordion/collapse` module (`accordion` from now on).
- Started styling the `accordion` component.
- *DESIGN DECISION* The `accordion` component will be used both for single collapses and multiple ones.
- Added accessibility to `accordion` component.
- Tweaked the way the `accordion` works to use `transform: scaleY()` so that the `transition` will work with it. Using `height` did not work due to the value of `auto` when content was shown.
- Fixed bug with `clip` and `clip-path` in Chrome for `accordion` module.
- Changed the way `accordion` works to use variables. Optimized code.
- Added demo for `accordion` to the `index` page.
- Tweaked values and colors of `accordion`. Tested in both Chrome and Firefox.
- Added support for `-webkit-` prefix for `transform` to support some browsers.
- Updated demo page for `accordion` with `radio`s as well.
- Added a small section about `tab`s and `carousel`s, just to allow me to test presentation a bit more.

15
docs/v2/index.html
View File

@@ -470,6 +470,21 @@
</div>
</div>
</div>
<h2>Content display <small>Present content any way you like</small></h2>
<p><strong>mini.css</strong> gives you some flexible components to show or hide the content you wish. These components are more generic than the ones found in other frameworks and aim to help you present any content the way you like. </p><br>
<h3>Accordion &amp; Collapse</h3>
<p>Use the <code>.accordion</code> class on a <code>&lt;input type=&quot;checkbox&quot;&gt;</code> or <code>&lt;input type=&quot;radio&quot;&gt;</code>, accompanied by a linked <code>&lt;label&gt;</code> and any content afterwards (use something like a <code>&lt;div&gt;</code> if you want to show/hide more than a paragraph of text or an image) to create a collapsible piece of content. Use multiple of these to create an accordion if you like. These components are accessible, although screen readers will read these as normal blocks of content, no distinctions made. Add <code>aria-hidden="true"</code> to the <code>&lt;label&gt;</code> to make sure there are no confusing elements. Below, you can see a couple of examples:</p>
<input type="checkbox" class="accordion" id="ac1" autocomplete="off"><label for="ac1">Toggle content</label>
<p>This is some content you can hide and show at will using the above label. Isn't that useful?</p>
<input type="checkbox" class="accordion" id="ac2" autocomplete="off"><label for="ac2">Toggle image</label>
<img src="catdemo.jpg">
<br>
<input type="radio" class="accordion" id="acr1" autocomplete="off" name="acr"><label for="acr1">Section 1</label>
<div><h4>Sample</h4> <p>This is the first piece of the accordion. These pieces are mutually exclusive.</p></div>
<input type="radio" class="accordion" id="acr2" autocomplete="off" name="acr"><label for="acr2">Section 2</label>
<div><h4>Demo</h4> <p>This is the second piece of the accordion. Notice how these samples use <code>&lt;div&gt;</code> to display more complex content.</p></div>
<h3>Tabs &amp; Carousels</h3>
<p>Tabbed navigation is a very common element for many websites and single page apps. <strong>mini.css</strong> supports both of these elements using one generic component. More coming soon...</p>
</div>
</div>
</div>

58
flavors/v2/mini-default.css
View File

@@ -741,12 +741,12 @@ input[type="file"] {
.input-group [type="checkbox"][disabled] + label:before, .input-group [type="checkbox"][disabled] + label:after, .input-group [type="radio"][disabled] + label:before, .input-group [type="radio"][disabled] + label:after {
opacity: 0.75; }
.input-group [type="checkbox"]:checked + label:after, .input-group [type="radio"]:checked + label:after {
margin-left: -21.25px;
margin-left: -21px;
position: absolute;
top: 3.825px;
left: 3.825px;
width: 9.35px;
height: 9.35px;
top: 4px;
left: 4px;
width: 9px;
height: 9px;
background: #212121;
content: ''; }
@@ -824,6 +824,54 @@ progress {
@media only screen and (min-width: 320px) {
.card {
max-width: 320px; } }
[type="checkbox"].accordion, [type="radio"].accordion {
display: none;
visibility: hidden; }
[type="checkbox"].accordion + label, [type="radio"].accordion + label {
display: block;
cursor: pointer;
background: #e0e0e0;
border: 1px solid #9e9e9e;
border-radius: 2px;
padding: 6px 10px 6px;
margin-bottom: 2px; }
[type="checkbox"].accordion + label + *, [type="radio"].accordion + label + * {
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
position: absolute;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: top;
transform-origin: top;
transition: transform 0.3s ease 0s; }
[type="checkbox"].accordion:checked + label, [type="radio"].accordion:checked + label {
margin-bottom: 0;
border-bottom: 1px solid #bdbdbd;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0; }
[type="checkbox"].accordion:checked + label + *, [type="radio"].accordion:checked + label + * {
box-sizing: border-box;
position: relative;
height: auto;
width: 100%;
margin: 0;
clip: auto;
-webkit-clip-path: inset(0%);
clip-path: inset(0%);
-webkit-transform: scaleY(1);
transform: scaleY(1);
border: 1px solid #9e9e9e;
border-top: 0;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
padding: 6px 10px 8px;
margin-bottom: 2px; }
button.primary, [type="button"].primary, [type="submit"].primary,
[type="reset"].primary, .button.primary {
background: #1565c0;

2
flavors/v2/mini-default.min.css vendored
View File

File diff suppressed because one or more lines are too long

13
flavors/v2/mini-default.scss
View File

@@ -346,6 +346,19 @@ $card-section-padding1-name: 'double-padded'; // Class name for card sect
$card-section-padding1-padding: 12px 16px 12px; // Padding for card section padding style 1
// Notes:
// [1] - The cards module depends heavily on the grid system module.
// Variables for accordions/collapses
$accordion-name: 'accordion'; // Class name for accordions/collapses
$accordion-label-back-color: #e0e0e0; // Background color for accordion label
$accordion-label-fore-color: $fore-color; // Text color for accordion label
$accordion-label-padding: 6px 10px 6px; // Padding for accordion label
$accordion-content-back-color: $back-color; // Background color for accordion content
$accordion-content-fore-color: $fore-color; // Text color for accordion content
$accordion-content-padding: 6px 10px 8px; // Padding for accordion content
$accordion-border-style: 1px solid #9e9e9e; // Border style for accordion
$accordion-border-radius: 2px; // Border radius for accordion
$accordion-margin-bottom: 2px; // Bottom margin for accordion
$accordion-separator-border-style: // Border style for the accordion's separators
1px solid #bdbdbd; // (border between label and content)
// Enable mini.css
@import '../../scss/v2/mini';
// Use mixins for button elements

1
scss/v2/_mini.scss
View File

@@ -369,4 +369,5 @@ a{
//===================================================
// You can comment out modules you do not want to use.
@import 'mini-shell/card';
@import 'mini-shell/accordion';
//===================================================

86
scss/v2/mini-shell/_accordion.scss Normal file
View File

@@ -0,0 +1,86 @@
// Definitions for vertical accordions/collapses.
// Accordion styling
$accordion-name: 'accordion' !default; // Class name for accordions/collapses
[type="checkbox"].#{$accordion-name}, [type="radio"].#{$accordion-name} {
display: none;
visibility: hidden;
// Style for the label (toggle)
+ label {
display: block;
cursor: pointer;
@if $accordion-label-back-color != $back-color {
background: $accordion-label-back-color;
}
@if $accordion-label-fore-color != $fore-color {
color: $accordion-label-fore-color;
}
@if $accordion-border-style != 0 {
border: $accordion-border-style;
}
@if $accordion-border-radius != 0 {
border-radius: $accordion-border-radius;
}
padding: $accordion-label-padding;
margin-bottom: $accordion-margin-bottom;
}
// Style for the content (not customizable)
+ label + * {
// Hide content, while allowing accessibility
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
position: absolute;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
// Presentation
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: top;
transform-origin: top;
transition: transform 0.3s ease 0s;
}
// Style for the label (toggle) when content is open
&:checked + label {
margin-bottom: 0; // Remove bottom margin
@if $accordion-separator-border-style != $accordion-border-style {
border-bottom: $accordion-separator-border-style;
}
@if $accordion-border-radius != 0 {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
}
// Style for the content when open
&:checked + label + * {
// Display content
box-sizing: border-box;
position: relative;
height: auto;
width: 100%;
margin: 0;
clip: auto;
-webkit-clip-path: inset(0%);
clip-path: inset(0%);
-webkit-transform: scaleY(1);
transform: scaleY(1);
// Content styling
@if $accordion-content-back-color != $back-color {
background: $accordion-content-back-color;
}
@if $accordion-content-fore-color != $fore-color {
color: $accordion-content-fore-color;
}
@if $accordion-border-style != 0 {
border: $accordion-border-style;
border-top: 0;
}
@if $accordion-border-radius != 0 {
border-bottom-right-radius: $accordion-border-radius;
border-bottom-left-radius: $accordion-border-radius;
}
padding: $accordion-content-padding;
margin-bottom: $accordion-margin-bottom;
}
}