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

Housekeeping for tab module

Browse Source 
Added on hidden flag and cleaned flavor files as needed
This commit is contained in:
Angelos Chalaris
2017-03-30 16:33:32 +03:00
parent 95897a62d2
commit eea0ea9421
8 changed files with 123 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/v2/DEVLOG.md
View File

@@ -903,3 +903,4 @@
- Updated `table` module's definitions and variables, added **hidden flag** `$include-striped-table` in order to make sure `.striped` `table`s can be turned on and off. - Updated `table` module's definitions and variables, added **hidden flag** `$include-striped-table` in order to make sure `.striped` `table`s can be turned on and off.
- Cleanup of relevant variables and comments in flavor files. - Cleanup of relevant variables and comments in flavor files.
- Updated `card` module, splitting into main file and mixins, cleanup in flavor files for the module. - Updated `card` module, splitting into main file and mixins, cleanup in flavor files for the module.
- Updated `tab` module, adding an extra **hidden flag** `$include-stacked-tabs` for toggling `.stacked` tabs on and off, cleanup of flavor files.

7
src/mini/_tab.scss
View File

@@ -2,9 +2,10 @@
Definitions for tabs/horizontal accordions. Definitions for tabs/horizontal accordions.
*/ */
// Dependency: This module is somewhat dependent on the grid system. // Dependency: This module is somewhat dependent on the grid system.
$tab-container-name: 'tabs' !default; // Class name for the tabs container.
$include-stacked-tabs: true !default; // [Hidden flag] Should stacked tabs be included? (`true`/`false`).
$tab-stacked-name: 'stacked' !default; // Class name for stacked tabs container.
// Tab styling // Tab styling
$tab-container-name: 'tabs' !default; // Class name for the tabs container
$tab-stacked-name: 'stacked' !default; // Class name for stacked tabs container
.#{$tab-container-name} { .#{$tab-container-name} {
width: 100%; width: 100%;
opacity: 1; opacity: 1;
@@ -151,6 +152,7 @@ $tab-stacked-name: 'stacked' !default; // Class name for stacked tabs
} }
} }
// Stacked tabs // Stacked tabs
@if $include-stacked-tabs { // Turn off if you don't want stacked tabs enabled (except on smaller screens for responsiveness)
.#{$tab-container-name}.#{$tab-stacked-name} { .#{$tab-container-name}.#{$tab-stacked-name} {
// Old syntax // Old syntax
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
@@ -204,6 +206,7 @@ $tab-stacked-name: 'stacked' !default; // Class name for stacked tabs
} }
} }
} }
}
// Responsiveness // Responsiveness
@media (max-width: #{$tab-stacked-breakpoint}) { @media (max-width: #{$tab-stacked-breakpoint}) {
.#{$tab-container-name} { .#{$tab-container-name} {