mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-12 00:43:57 +02:00
Code Issues Releases Wiki Activity

Tab module proof of concept

Browse Source
This commit is contained in:
Angelos Chalaris
2016-11-09 19:18:18 +02:00
parent 7e9afb6bba
commit 7364732ed2
6 changed files with 178 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
docs/v2/DEVLOG.md
View File

@@ -336,4 +336,5 @@
- Created `spinner-dot` class and custom-tailored the `spinner` for that. *NOTE* This spinner does not work perfectly fine with many elements, some tweaking might be required.
- Created `spinner-donut` class and made styling for that `spinner`.
- Added mixin `make-spinner-donut-alt-color` to allow for custom `spinner` styles. No optimizations are applied to this mixin, due to the fact that overwriting the background might cause trouble with the foreground etc.
- Optimized and softcoded most of the `spinner` module's stuff.
- Optimized and softcoded most of the `spinner` module's stuff.
- Tested `tab` system for a while, tried out a lot of things, hardcoded demo.

33
docs/v2/index.html
View File

@@ -2,7 +2,7 @@
<html>
<head>
<!-- Live demo styled as of 20161109 -->
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/60d477eae3cf58281fd916e6733ecff5e6aaf20e/flavors/v2/mini-default.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/7e9afb6bba926b53849ad8d6bb8c8537a777e200/flavors/v2/mini-default.min.css">
<link rel="stylesheet" href="../../flavors/v2/mini-default.css">
<title>mini.css - A minimal Sass-y responsive mobile-first style-agnostic CSS framework</title>
<meta charset="utf-8">
@@ -473,7 +473,7 @@
<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>
<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=&quot;true&quot;</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>
@@ -484,8 +484,33 @@
<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>
<p>Tabbed navigation is a very common element for many websites and single page apps. Carousels provide similar functionality for image portfolios. <strong>mini.css</strong> supports both of these elements using one generic component. Simply create a container with the <code>.tabs</code> class, add a few <code>&lt;label&gt;</code>s inside it, add the complementary <code>&lt;input type=&quot;radio&quot;&gt;</code>s each followed by each tab's content inside a <code>&lt;div&gt;</code> or <code>&lt;section&gt;</code> and you are ready to go. Tabs are accessible, as screen readers will ignore the tab labels and only read the content. Remember to add <code>aria-hidden=&quot;true&quot;</code> to the <code>&lt;label&gt;</code>s. Oh, by the way, tabs are responsive on mobile and will display as a list on smaller displays, so that your users will not have any trouble navigating them. You can see examples of how tabs work below:</p>
<div class="tabs">
<input type="radio" name="tabdemo" id="tab1" checked>
<label for="tab1">Tab 1</label>
<div>
<h3>Tab 1</h3>
<p>This is the first tab's content.</p>
</div>
<input type="radio" name="tabdemo" id="tab2">
<label for="tab2">Tab 2</label>
<div>
<h3>Tab 2</h3>
<p>This is the second tab's content.</p>
</div>
<input type="radio" name="tabdemo" id="tab3">
<label for="tab3">Tab 3</label>
<div>
<h3>Tab 3</h3>
<p>This is the third tab's content.</p>
</div>
<input type="radio" name="tabdemo" id="tab4">
<label for="tab4">Tab 4</label>
<div>
<h3>Tab 4</h3>
<p>This is the fourth tab's content.</p>
</div>
</div>
<h2>Spinners<small>Loading with style</small></h2>
<p>Finally, <strong>mini.css</strong> provides you with a couple of spinner variations, <code>.spinner-dot</code> and <code>.spinner-donut</code>. Simply apply these to a <code>&lt;div&gt;</code> and you are ready to go. Both are showcased below:</p>
<p>This is some text with a <code>.spinner-dot</code> spinner. These spinners are designed with normal paragraphs in mind, so some tweaking of the component itself and/or the way it is presented might be requird. Loading looks like this <span class="spinner-dot"></span></p>

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

@@ -872,6 +872,65 @@ progress {
padding: 6px 10px 8px;
margin-bottom: 2px; }
.tabs {
width: 100%;
display: -webkit-box;
-webkit-box-pack: justify;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-flex-wrap: wrap;
flex-wrap: wrap; }
.tabs > label {
display: inline-block;
height: 26px;
border: 1px solid #bdbdbd;
padding: 4px;
order: 1;
cursor: pointer;
-webkit-box-flex: 1;
flex-grow: 1; }
.tabs > [type="radio"] {
display: none;
visibility: hidden; }
.tabs > [type="radio"] + label + div {
order: 2;
flex-basis: auto;
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%); }
.tabs > [type="radio"] + label + div + [type="radio"] + label {
border-left: 0; }
.tabs > [type="radio"]:checked + label {
background: blue; }
.tabs > [type="radio"]:checked + label + div {
box-sizing: border-box;
position: relative;
width: 100%;
height: 320px;
margin: 0;
border: 1px solid #bdbdbd;
border-top: 0;
clip: auto;
-webkit-clip-path: inset(0%);
clip-path: inset(0%); }
@media (max-width: 800px) {
.tabs {
flex-direction: column; }
.tabs > label {
order: initial; }
.tabs > [type="radio"] + label + div {
order: initial; }
.tabs > [type="radio"] + label + div + [type="radio"] + label {
border: 1px solid #bdbdbd;
border-top: 0; } }
@-webkit-keyframes spinner-dot-anim {
to {
-webkit-transform: translateY(-6em); } }

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

File diff suppressed because one or more lines are too long

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

@@ -360,7 +360,7 @@ $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)
// Variables for tabs
$tabs-container-name: 'tabs'; // Class name for the tabs' container
// Variables for spinners
$spinner-dot-name: 'spinner-dot'; // Class name for dot spinner
$spinner-dot-font-size: 1em; // Font size for dot spinner

87
scss/v2/mini-shell/_tab.scss
View File

@@ -1 +1,86 @@
// Definitions for tabs/horizontal accordions.
// Definitions for tabs/horizontal accordions.
// Tab styling
$tab-container-name: 'tabs' !default; // Class name for the tabs container
.#{$tabs-container-name} {
width: 100%;
// Old syntax
display: -webkit-box;
-webkit-box-pack: justify;
// New syntax
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
// Tab label styling
& > label {
display: inline-block;
height: 26px;
border: 1px solid #bdbdbd;
padding: 4px;
order: 1;
cursor: pointer;
// Old syntax
-webkit-box-flex: 1;
// New syntax
flex-grow: 1;
}
// Tab radio styling
& > [type="radio"] {
display: none;
visibility: hidden;
}
// Tab content styling
& > [type="radio"] + label + div {
order: 2;
flex-basis: auto;
// 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%);
+ [type="radio"] + label {
border-left: 0;
}
}
// Tab content styling (visible)
& > [type="radio"]:checked + label {
background: blue;
}
& > [type="radio"]:checked + label + div {
box-sizing: border-box;
position: relative;
width: 100%;
height: 320px;
margin: 0;
border: 1px solid #bdbdbd;
border-top: 0;
clip: auto;
-webkit-clip-path: inset(0%);
clip-path: inset(0%);
}
}
@media (max-width: 800px){
.tabs {
flex-direction: column;
& > label {
order: initial;
}
& > [type="radio"] + label + div {
order: initial;
+ [type="radio"] + label {
border: 1px solid #bdbdbd;
border-top: 0;
}
}
}
}