Extra component: tab system
This commit is contained in:
Angelos Chalaris
parent
84d5f92ed5
commit
d400b0846b
6 changed files with 196 additions and 5 deletions
|
|
@ -14,10 +14,10 @@ A minimal, responsive pure CSS framework to get you started.
|
||||||
## Extra Components
|
## Extra Components
|
||||||
|
|
||||||
- **label**: label and badge styles `GZIPPED SIZE`: 208 bytes
|
- **label**: label and badge styles `GZIPPED SIZE`: 208 bytes
|
||||||
|
- **tab**: tabbed navigation `GZIPPED SIZE`: 347 bytes
|
||||||
|
|
||||||
TODO:
|
TODO:
|
||||||
- Tabbed navigation (radio button based)
|
- Dropdowns (checkbox based?)
|
||||||
- Dropdowns (checkbox based)
|
|
||||||
- Modals (checkbox based)
|
- Modals (checkbox based)
|
||||||
- Pure css progress bars
|
- Pure css progress bars
|
||||||
- Maybe breadcrumbs
|
- Maybe breadcrumbs
|
||||||
|
|
@ -30,6 +30,7 @@ TODO:
|
||||||
- Buttons with states (implemented using a checkbox)
|
- Buttons with states (implemented using a checkbox)
|
||||||
- Checbox collapses
|
- Checbox collapses
|
||||||
- Is a Pure CSS Carousel even possible?
|
- Is a Pure CSS Carousel even possible?
|
||||||
|
- Material design theme and module
|
||||||
|
|
||||||
ON A MORE SERIOUS NOTE:
|
ON A MORE SERIOUS NOTE:
|
||||||
- Make a set of pages for the live version like base-modules, customization, extra-modules to showcase the modules and not clutter the main page
|
- Make a set of pages for the live version like base-modules, customization, extra-modules to showcase the modules and not clutter the main page
|
||||||
|
|
|
||||||
|
|
@ -1118,3 +1118,69 @@ img.thumb {
|
||||||
.bdg.red {
|
.bdg.red {
|
||||||
color: #eeeeee;
|
color: #eeeeee;
|
||||||
background: #ea4848; }
|
background: #ea4848; }
|
||||||
|
|
||||||
|
/*
|
||||||
|
Mixin for tab system.
|
||||||
|
Parameters:
|
||||||
|
- $tabs-name : The class name for the tab system's container.
|
||||||
|
- $tabs-label-spacing : The spacing between tab labels.
|
||||||
|
- $tabs-label-height : The height of the tab labels.
|
||||||
|
- $tabs-label-padding : The padding of the tab labels.
|
||||||
|
- $tabs-label-color : The text color of the tab labels.
|
||||||
|
- $tabs-label-bg-color : The background color of the tab labels.
|
||||||
|
- $tabs-active-label-color : The text color of the active tab's label.
|
||||||
|
- $tabs-active-label-bg-color : The background color of the active tab's label.
|
||||||
|
- $tabs-border-color : Border color for the tab system. [1]
|
||||||
|
- $tabs-label-border-radius : Border radius for the tab labels.
|
||||||
|
- $tabs-active-label-stripe : The style of the colored stripe that appears on the active tab's label. [2]
|
||||||
|
- $tabs-inactive-label-hover-style : Hover/active/focus style of the tab labels. [3]
|
||||||
|
- $tabs-inactive-label-hover-style-percentage : Hover/active/focus style of the tab labels percentage modifier.
|
||||||
|
- $tabs-content-bg-color : The background color of the active tab's content.
|
||||||
|
- $tabs-content-padding : The padding of the active tab's content.
|
||||||
|
Notes:
|
||||||
|
- [1] : The color specified in $tabs-border-color applies to all borders in the tab system. This
|
||||||
|
includes borders in the tab labels and active tab's content.
|
||||||
|
- [2] : The style of the colored stripe is a border style so you should specify it as such.
|
||||||
|
- [3] : The values that $tabs-hover-style can take are `lighten` and `darken`. The inside condition only
|
||||||
|
checks if the value is `lighten` and acts accordingly. Invalid values are treated as `darken`.
|
||||||
|
*/
|
||||||
|
.tabs {
|
||||||
|
position: relative;
|
||||||
|
min-height: 250px;
|
||||||
|
width: 100%; }
|
||||||
|
.tabs input[type="radio"] {
|
||||||
|
display: none; }
|
||||||
|
.tabs input[type="radio"] + div {
|
||||||
|
display: inline; }
|
||||||
|
.tabs input[type="radio"] + div > label {
|
||||||
|
position: reative;
|
||||||
|
float: left;
|
||||||
|
margin-right: 3px;
|
||||||
|
left: 1px;
|
||||||
|
height: 40px;
|
||||||
|
padding: 8px 14px;
|
||||||
|
color: #2678b3;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 4px 4px 0 0;
|
||||||
|
cursor: pointer; }
|
||||||
|
.tabs input[type="radio"] + div > label:hover, .tabs input[type="radio"] + div > label:active, .tabs input[type="radio"] + div > label:focus {
|
||||||
|
background: gainsboro; }
|
||||||
|
.tabs input[type="radio"] + div > label + div {
|
||||||
|
position: absolute;
|
||||||
|
z-index: -2;
|
||||||
|
left: 0;
|
||||||
|
top: 39px;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
padding: 20px;
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #ccc; }
|
||||||
|
.tabs input[type="radio"]:checked + div > label {
|
||||||
|
color: #222;
|
||||||
|
background: #fff;
|
||||||
|
border-top: 3px solid #2678b3;
|
||||||
|
border-bottom: 1px solid #fff; }
|
||||||
|
.tabs input[type="radio"]:checked + div > label + div {
|
||||||
|
position: absolute;
|
||||||
|
z-index: -1; }
|
||||||
|
|
|
||||||
2
flavors/mini-default.min.css
vendored
2
flavors/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -262,4 +262,23 @@ $badge-class-name: bdg; // Name for the base badges class
|
||||||
@include make-lbl($badge-class-name, $lbl-default-bg-color, $lbl-default-color, 8px, 3px 8px, hide);
|
@include make-lbl($badge-class-name, $lbl-default-bg-color, $lbl-default-color, 8px, 3px 8px, hide);
|
||||||
@include make-lbl-style($badge-class-name, $lbl-style1-name, $lbl-default-color, $lbl-b-bg-color);
|
@include make-lbl-style($badge-class-name, $lbl-style1-name, $lbl-default-color, $lbl-b-bg-color);
|
||||||
@include make-lbl-style($badge-class-name, $lbl-style2-name, $lbl-default-color, $lbl-g-bg-color);
|
@include make-lbl-style($badge-class-name, $lbl-style2-name, $lbl-default-color, $lbl-g-bg-color);
|
||||||
@include make-lbl-style($badge-class-name, $lbl-style3-name, $lbl-default-color, $lbl-r-bg-color);
|
@include make-lbl-style($badge-class-name, $lbl-style3-name, $lbl-default-color, $lbl-r-bg-color);
|
||||||
|
//====================================================================
|
||||||
|
// Variable definitions for the Tab module (_tab.scss)
|
||||||
|
//====================================================================
|
||||||
|
// Tab class names.
|
||||||
|
$tabs-class-name: tabs; // Name for the tab system container class
|
||||||
|
// Colors and styles (you can remove things you don't need or define more
|
||||||
|
// colors if you need them).
|
||||||
|
$tabs-border-color: #ccc; // Border color for the tabs system
|
||||||
|
$tabs-content-bg-color: #fff; // Background for the active tab's content
|
||||||
|
$tabs-color: $a-color; // Color for the text in the tab labels
|
||||||
|
$tabs-bg-color: $body-bg-color; // Background color for the tab labels
|
||||||
|
$tabs-active-color: $body-color; // Color for the text in the active tab's label
|
||||||
|
$tabs-active-bg-color: $tabs-content-bg-color; // Background color for the active tab's label
|
||||||
|
$tabs-active-stripe-style: 3px solid $a-color; // Style for the active tab label's stripe
|
||||||
|
// Enable tabs (_tab.scss). (Use individual mixins below to use.)
|
||||||
|
@import '../scss/mini-extra/tab';
|
||||||
|
// Use tabs mixin to create tab system with given specs. For more information
|
||||||
|
// refer to the _tab.scss file to check the definitions.
|
||||||
|
@include make-tabs($tabs-class-name, 250px, 3px, 40px, 8px 14px, $tabs-color, $tabs-bg-color, $tabs-active-color, $tabs-active-bg-color, $tabs-border-color, 4px 4px 0 0, $tabs-active-stripe-style, 'darken', 10%, $tabs-content-bg-color, 20px);
|
||||||
|
|
@ -262,4 +262,23 @@ $badge-class-name: bdg; // Name for the base badges class
|
||||||
@include make-lbl($badge-class-name, $lbl-default-bg-color, $lbl-default-color, 8px, 3px 8px, hide);
|
@include make-lbl($badge-class-name, $lbl-default-bg-color, $lbl-default-color, 8px, 3px 8px, hide);
|
||||||
@include make-lbl-style($badge-class-name, $lbl-style1-name, $lbl-default-color, $lbl-b-bg-color);
|
@include make-lbl-style($badge-class-name, $lbl-style1-name, $lbl-default-color, $lbl-b-bg-color);
|
||||||
@include make-lbl-style($badge-class-name, $lbl-style2-name, $lbl-default-color, $lbl-g-bg-color);
|
@include make-lbl-style($badge-class-name, $lbl-style2-name, $lbl-default-color, $lbl-g-bg-color);
|
||||||
@include make-lbl-style($badge-class-name, $lbl-style3-name, $lbl-default-color, $lbl-r-bg-color);
|
@include make-lbl-style($badge-class-name, $lbl-style3-name, $lbl-default-color, $lbl-r-bg-color);
|
||||||
|
//====================================================================
|
||||||
|
// Variable definitions for the Tab module (_tab.scss)
|
||||||
|
//====================================================================
|
||||||
|
// Tab class names.
|
||||||
|
$tabs-class-name: tabs; // Name for the tab system container class
|
||||||
|
// Colors and styles (you can remove things you don't need or define more
|
||||||
|
// colors if you need them).
|
||||||
|
$tabs-border-color: #ccc; // Border color for the tabs system
|
||||||
|
$tabs-content-bg-color: #fff; // Background for the active tab's content
|
||||||
|
$tabs-color: $a-color; // Color for the text in the tab labels
|
||||||
|
$tabs-bg-color: $body-bg-color; // Background color for the tab labels
|
||||||
|
$tabs-active-color: $body-color; // Color for the text in the active tab's label
|
||||||
|
$tabs-active-bg-color: $tabs-content-bg-color; // Background color for the active tab's label
|
||||||
|
$tabs-active-stripe-style: 3px solid $a-color; // Style for the active tab label's stripe
|
||||||
|
// Enable tabs (_tab.scss). (Use individual mixins below to use.)
|
||||||
|
@import 'mini-extra/tab';
|
||||||
|
// Use tabs mixin to create tab system with given specs. For more information
|
||||||
|
// refer to the _tab.scss file to check the definitions.
|
||||||
|
@include make-tabs($tabs-class-name, 250px, 3px, 40px, 8px 14px, $tabs-color, $tabs-bg-color, $tabs-active-color, $tabs-active-bg-color, $tabs-border-color, 4px 4px 0 0, $tabs-active-stripe-style, 'darken', 10%, $tabs-content-bg-color, 20px);
|
||||||
86
scss/mini-extra/_tab.scss
Normal file
86
scss/mini-extra/_tab.scss
Normal file
|
|
@ -0,0 +1,86 @@
|
||||||
|
/*
|
||||||
|
Mixin for tab system.
|
||||||
|
Parameters:
|
||||||
|
- $tabs-name : The class name for the tab system's container.
|
||||||
|
- $tabs-label-spacing : The spacing between tab labels.
|
||||||
|
- $tabs-label-height : The height of the tab labels.
|
||||||
|
- $tabs-label-padding : The padding of the tab labels.
|
||||||
|
- $tabs-label-color : The text color of the tab labels.
|
||||||
|
- $tabs-label-bg-color : The background color of the tab labels.
|
||||||
|
- $tabs-active-label-color : The text color of the active tab's label.
|
||||||
|
- $tabs-active-label-bg-color : The background color of the active tab's label.
|
||||||
|
- $tabs-border-color : Border color for the tab system. [1]
|
||||||
|
- $tabs-label-border-radius : Border radius for the tab labels.
|
||||||
|
- $tabs-active-label-stripe : The style of the colored stripe that appears on the active tab's label. [2]
|
||||||
|
- $tabs-inactive-label-hover-style : Hover/active/focus style of the tab labels. [3]
|
||||||
|
- $tabs-inactive-label-hover-style-percentage : Hover/active/focus style of the tab labels percentage modifier.
|
||||||
|
- $tabs-content-bg-color : The background color of the active tab's content.
|
||||||
|
- $tabs-content-padding : The padding of the active tab's content.
|
||||||
|
Notes:
|
||||||
|
- [1] : The color specified in $tabs-border-color applies to all borders in the tab system. This
|
||||||
|
includes borders in the tab labels and active tab's content.
|
||||||
|
- [2] : The style of the colored stripe is a border style so you should specify it as such.
|
||||||
|
- [3] : The values that $tabs-hover-style can take are `lighten` and `darken`. The inside condition only
|
||||||
|
checks if the value is `lighten` and acts accordingly. Invalid values are treated as `darken`.
|
||||||
|
*/
|
||||||
|
@mixin make-tabs( $tabs-name, $tabs-min-height, $tabs-label-spacing, $tabs-label-height,
|
||||||
|
$tabs-label-padding, $tabs-label-color, $tabs-label-bg-color,
|
||||||
|
$tabs-active-label-color, $tabs-active-label-bg-color,
|
||||||
|
$tabs-border-color, $tabs-label-border-radius, $tabs-active-label-stripe,
|
||||||
|
$tabs-inactive-label-hover-style, $tabs-inactive-label-hover-style-percentage,
|
||||||
|
$tabs-content-bg-color, $tabs-content-padding ){
|
||||||
|
.#{$tabs-name}{
|
||||||
|
position: relative;
|
||||||
|
min-height: $tabs-min-height;
|
||||||
|
width: 100%;
|
||||||
|
& input[type="radio"]{
|
||||||
|
display: none;
|
||||||
|
& + div{
|
||||||
|
display: inline;
|
||||||
|
& > label{
|
||||||
|
position: reative;
|
||||||
|
float: left;
|
||||||
|
margin-right: $tabs-label-spacing;
|
||||||
|
left: 1px;
|
||||||
|
height: $tabs-label-height;
|
||||||
|
padding: $tabs-label-padding;
|
||||||
|
color: $tabs-label-color;
|
||||||
|
background-color: $tabs-label-bg-color;
|
||||||
|
border: 1px solid $tabs-border-color;
|
||||||
|
border-radius: $tabs-label-border-radius;
|
||||||
|
cursor: pointer;
|
||||||
|
&:hover, &:active, &:focus{
|
||||||
|
@if $tabs-inactive-label-hover-style == 'lighten'{
|
||||||
|
background: lighten($tabs-label-bg-color, $tabs-inactive-label-hover-style-percentage);
|
||||||
|
}
|
||||||
|
@else{
|
||||||
|
background: darken($tabs-label-bg-color, $tabs-inactive-label-hover-style-percentage);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
& + div{
|
||||||
|
position: absolute;
|
||||||
|
z-index: -2;
|
||||||
|
left: 0;
|
||||||
|
top: ($tabs-label-height - 1px);
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
padding: $tabs-content-padding;
|
||||||
|
background: $tabs-content-bg-color;
|
||||||
|
border: 1px solid $tabs-border-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:checked + div > label{
|
||||||
|
color: $tabs-active-label-color;
|
||||||
|
background: $tabs-active-label-bg-color;
|
||||||
|
// border: 1px solid #ccc;
|
||||||
|
border-top: $tabs-active-label-stripe;
|
||||||
|
border-bottom: 1px solid $tabs-content-bg-color;
|
||||||
|
& + div{
|
||||||
|
position: absolute;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue