mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-09 07:16:29 +02:00
Code Issues Releases Wiki Activity

Tabs module mostly complete

Browse Source
This commit is contained in:
Angelos Chalaris
2016-11-09 20:36:35 +02:00
parent 7364732ed2
commit 15f9f47c06
5 changed files with 184 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/v2/DEVLOG.md
View File

@@ -338,3 +338,7 @@
- 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.
- Tested `tab` system for a while, tried out a lot of things, hardcoded demo.
- Fixed a variable naming discrepancy with `$tab-container-name`/`$tabs-container-name`.
- Softcoded `tab` module with variables. Optimized.
- Added responsiveness to `tab` module.
- Tested `tab` module thoroughly on both Firefox and Chrome (PC), will test further on phone.

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

@@ -883,20 +883,29 @@ progress {
-webkit-flex-wrap: wrap;
flex-wrap: wrap; }
.tabs > label {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-order: 1;
order: 1;
display: inline-block;
height: 26px;
border: 1px solid #bdbdbd;
padding: 4px;
order: 1;
cursor: pointer;
-webkit-box-flex: 1;
flex-grow: 1; }
background: #e0e0e0;
border: 1px solid #9e9e9e;
padding: 4px 6px; }
.tabs > label:first-of-type {
border-top-left-radius: 2px; }
.tabs > label:last-of-type {
border-top-right-radius: 2px; }
.tabs > [type="radio"] {
display: none;
visibility: hidden; }
.tabs > [type="radio"] + label + div {
order: 2;
-webkit-flex-basis: auto;
flex-basis: auto;
-webkit-order: 2;
order: 2;
height: 1px;
width: 1px;
margin: -1px;
@@ -904,33 +913,55 @@ progress {
position: absolute;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%); }
clip-path: inset(100%);
transition: height 0.3s ease 0s;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px; }
.tabs > [type="radio"] + label + div + [type="radio"] + label {
border-left: 0; }
.tabs > [type="radio"]:checked + label {
background: blue; }
background: #bdbdbd; }
.tabs > [type="radio"]:checked + label + div {
box-sizing: border-box;
position: relative;
height: 400px;
width: 100%;
height: 320px;
overflow: auto;
margin: 0;
border: 1px solid #bdbdbd;
border: 1px solid #9e9e9e;
border-top: 0;
padding: 6px;
clip: auto;
-webkit-clip-path: inset(0%);
clip-path: inset(0%); }
@media (max-width: 800px) {
@media only screen and (max-width: 800px) {
.tabs {
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
flex-direction: column; }
.tabs > label {
-webkit-order: initial;
order: initial; }
.tabs > label:first-of-type {
border-top-right-radius: 2px; }
.tabs > label:last-of-type {
border-top-right-radius: 0;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px; }
.tabs > [type="radio"]:checked + label {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0; }
.tabs > [type="radio"] + label + div {
order: initial; }
-webkit-order: initial;
order: initial;
border-radius: 0; }
.tabs > [type="radio"] + label + div + [type="radio"] + label {
border: 1px solid #bdbdbd;
border-top: 0; } }
border: 1px solid #9e9e9e;
border-top: 0; }
.tabs > [type="radio"] + label + div:last-of-type {
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px; } }
@-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

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

@@ -360,7 +360,20 @@ $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
$tab-container-name: 'tabs'; // Class name for the tabs' container
$tab-label-back-color: #e0e0e0; // Background color for tabs' labels
$tab-label-fore-color: $fore-color; // Text color for tabs' labels
$tab-label-selected-back-color: #bdbdbd; // Background color for open tab's label
$tab-label-selected-fore-color: $fore-color; // Text color for open tab's label
$tab-label-padding: 4px 6px; // Padding for tabs' labels
$tab-label-height: 26px; // Height for tabs' labels
$tab-border-style: 1px solid #9e9e9e; // Border style for tabs
$tab-border-radius: 2px; // Border radius for tabs
$tab-panel-back-color: $back-color; // Background color for tabs' panels
$tab-panel-fore-color: $fore-color; // Text color for tabs' panels
$tab-panel-padding: 6px; // Padding for tabs' panels
$tab-panel-height: 400px; // Height for tabs' panels
$tab-stacked-breakpoint: $grid-medium-breakpoint; // Breakpoint for tabs layout (stacked/horizontal)
// Variables for spinners
$spinner-dot-name: 'spinner-dot'; // Class name for dot spinner
$spinner-dot-font-size: 1em; // Font size for dot spinner

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

@@ -1,7 +1,8 @@
// Definitions for tabs/horizontal accordions.
// Dependency: This module is somewhat dependent on the grid system.
// Tab styling
$tab-container-name: 'tabs' !default; // Class name for the tabs container
.#{$tabs-container-name} {
.#{$tab-container-name} {
width: 100%;
// Old syntax
display: -webkit-box;
@@ -15,16 +16,39 @@ $tab-container-name: 'tabs' !default; // Class name for the tabs contai
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;
-webkit-flex-grow: 1;
flex-grow: 1;
// Make tab labels stay at the top on large displays
-webkit-order: 1;
order: 1;
// Actual styling
display: inline-block;
height: $tab-label-height;
cursor: pointer;
@if $tab-label-back-color != $back-color {
background: $tab-label-back-color;
}
@if $tab-label-fore-color != $fore-color {
color: $tab-label-fore-color;
}
@if $tab-border-style != 0 {
border: $tab-border-style;
}
@if $tab-label-padding != 0 {
padding: $tab-label-padding;
}
@if $tab-border-radius != 0 { // Style first and last tabs' labels' top corners as needed
&:first-of-type {
border-top-left-radius: $tab-border-radius;
}
&:last-of-type {
border-top-right-radius: $tab-border-radius;
}
}
// TODO ADD HOVER STYLES HERE AND ON ACCORDION
}
// Tab radio styling
& > [type="radio"] {
@@ -33,9 +57,13 @@ $tab-container-name: 'tabs' !default; // Class name for the tabs contai
}
// Tab content styling
& > [type="radio"] + label + div {
order: 2;
flex-basis: auto;
// Hide content, while allowing accessibility
// New syntax
-webkit-flex-basis: auto;
flex-basis: auto;
// Make tab panels display after all the labels on larger displays
-webkit-order: 2;
order: 2;
// Hide content, while allowing accessibility
height: 1px;
width: 1px;
margin: -1px;
@@ -44,43 +72,100 @@ $tab-container-name: 'tabs' !default; // Class name for the tabs contai
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
+ [type="radio"] + label {
border-left: 0;
}
transition: height 0.3s ease 0s;
// Style for tab labels except the first
@if $tab-border-style != 0 {
+ [type="radio"] + label {
border-left: 0;
}
// Tab content styling (visible)
}
@if $tab-border-radius != 0 {
border-bottom-left-radius: $tab-border-radius;
border-bottom-right-radius: $tab-border-radius;
}
}
// Tab label styling for open tab
& > [type="radio"]:checked + label {
background: blue;
@if $tab-label-selected-back-color != $tab-label-back-color {
background: $tab-label-selected-back-color;
}
@if $tab-label-selected-fore-color != $tab-label-fore-color {
color: $tab-label-selected-fore-color;
}
}
// Tab content styling (open tab)
& > [type="radio"]:checked + label + div {
box-sizing: border-box;
position: relative;
height: $tab-panel-height;
width: 100%;
height: 320px;
overflow: auto;
margin: 0;
border: 1px solid #bdbdbd;
@if $tab-panel-back-color != $back-color {
background: $tab-panel-back-color;
}
@if $tab-panel-fore-color != $fore-color {
color: $tab-panel-fore-color;
}
@if $tab-border-style != 0 {
border: $tab-border-style;
border-top: 0;
}
@if $tab-panel-padding != 0 {
padding: $tab-panel-padding;
}
// Fix display for some browsers
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;
}
}
// Responsiveness
@media only screen and (max-width: #{$tab-stacked-breakpoint}) {
.#{$tab-container-name} {
// Old syntax
-webkit-box-orient: vertical;
// New syntax
-webkit-flex-direction: column;
flex-direction: column;
& > label {
-webkit-order: initial; // Reset order to show stacked tabs properly
order: initial;
@if $tab-border-radius != 0 { // Style first and last tabs' labels' corners as needed
&:first-of-type {
border-top-right-radius: $tab-border-radius;
}
&:last-of-type {
border-top-right-radius: 0;
border-bottom-left-radius: $tab-border-radius;
border-bottom-right-radius: $tab-border-radius;
}
}
}
@if $tab-border-radius != 0 { // Style the last tabs' label corners when it's open as needed
& > [type="radio"]:checked + label {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
}
& > [type="radio"] + label + div {
-webkit-order: initial; // Reset order to show stacked tabs properly
order: initial;
@if $tab-border-radius != 0 {
border-radius: 0;
}
& + [type="radio"] + label {
@if $tab-border-style != 0 {
border: $tab-border-style;
border-top: 0;
}
}
}
@if $tab-border-radius != 0 {
& > [type="radio"] + label + div:last-of-type {
border-bottom-left-radius: $tab-border-radius;
border-bottom-right-radius: $tab-border-radius;
}
}
}
}