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

4
dist/mini-default.css vendored
View File

@@ -1294,8 +1294,8 @@ table.striped tr:nth-of-type(2n) > td {
transform: scaleY(0); transform: scaleY(0);
-webkit-transform-origin: top; -webkit-transform-origin: top;
transform-origin: top; transform-origin: top;
-webkit-transition: -webkit-transform 0.3s ease 0s, -webkit-transition: -webkit-transform 0.3s ease 0s,
transform 0.3s ease 0s; transform 0.3s ease 0s;
transition: -webkit-transform 0.3s ease 0s, transition: -webkit-transform 0.3s ease 0s,
transform 0.3s ease 0s; } transform 0.3s ease 0s; }
.tabs > [type="radio"] + label + div + [type="radio"] + label, .tabs.stacked > [type="checkbox"] + label + div + [type="radio"] + label { .tabs > [type="radio"] + label + div + [type="radio"] + label, .tabs.stacked > [type="checkbox"] + label + div + [type="radio"] + label {

2
dist/mini-default.min.css vendored
View File

File diff suppressed because one or more lines are too long

4
dist/mini-sucroa.css vendored
View File

@@ -1177,8 +1177,8 @@ table.striped tr:nth-of-type(2n) > td {
transform: scaleY(0); transform: scaleY(0);
-webkit-transform-origin: top; -webkit-transform-origin: top;
transform-origin: top; transform-origin: top;
-webkit-transition: -webkit-transform 0.3s ease 0s, -webkit-transition: -webkit-transform 0.3s ease 0s,
transform 0.3s ease 0s; transform 0.3s ease 0s;
transition: -webkit-transform 0.3s ease 0s, transition: -webkit-transform 0.3s ease 0s,
transform 0.3s ease 0s; transform 0.3s ease 0s;
border-bottom-left-radius: 2px; border-bottom-left-radius: 2px;

2
dist/mini-sucroa.min.css vendored
View File

File diff suppressed because one or more lines are too long

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.

34
src/flavors/mini-default.scss
View File

@@ -364,24 +364,24 @@ $card-section-padding1-padding: 10px 12px 10px; // Padding for card section pa
// Notes: // Notes:
// [1] - The cards module depends heavily on the grid system module. // [1] - The cards module depends heavily on the grid system module.
// Variables for tabs // Variables for tabs
$tab-container-name: 'tabs'; // Class name for the tabs' container $tab-container-name: 'tabs'; // Class name for the tabs' container
$tab-container-box-shadow: // Box shadow for the tabs' container $tab-container-box-shadow: // Box shadow for the tabs' container
0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26); 0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
$tab-label-back-color: #e0e0e0; // Background color for tabs' labels $tab-label-back-color: #e0e0e0; // Background color for tabs' labels
$tab-label-fore-color: $fore-color; // Text color for tabs' labels $tab-label-fore-color: $fore-color; // Text color for tabs' labels
$tab-label-selected-back-color: #eeeeee; // Background color for open tab's label $tab-label-selected-back-color: #eeeeee; // Background color for open tab's label
$tab-label-selected-fore-color: $fore-color; // Text color for open tab's label $tab-label-selected-fore-color: $fore-color; // Text color for open tab's label
$tab-label-hover-opacity: 0.8; // Opacity of the tab's label on hover $tab-label-hover-opacity: 0.8; // Opacity of the tab's label on hover
$tab-label-padding: 8px 12px; // Padding for tabs' labels $tab-label-padding: 8px 12px; // Padding for tabs' labels
$tab-label-height: 26px; // Height for tabs' labels $tab-label-height: 26px; // Height for tabs' labels
$tab-border-style: 1px solid #9e9e9e; // Border style for tabs $tab-border-style: 1px solid #9e9e9e; // Border style for tabs
$tab-border-radius: 0; // Border radius for tabs $tab-border-radius: 0; // Border radius for tabs
$tab-panel-back-color: #fafafa; // Background color for tabs' panels $tab-panel-back-color: #fafafa; // Background color for tabs' panels
$tab-panel-fore-color: $fore-color; // Text color for tabs' panels $tab-panel-fore-color: $fore-color; // Text color for tabs' panels
$tab-panel-padding: 8px; // Padding for tabs' panels $tab-panel-padding: 8px; // Padding for tabs' panels
$tab-panel-height: 400px; // Height for tabs' panels $tab-panel-height: 400px; // Height for tabs' panels
$tab-stacked-breakpoint: 767px; // Breakpoint for tabs layout (stacked/horizontal) $tab-stacked-breakpoint: 767px; // Breakpoint for tabs layout (stacked/horizontal)
$tab-stacked-name: 'stacked'; // Class name for stacked tabs $tab-stacked-name: 'stacked'; // Class name for stacked tabs
// Variables for contextual background elements and alerts // Variables for contextual background elements and alerts
$mark-back-color: #0277bd; // Background color for <mark> $mark-back-color: #0277bd; // Background color for <mark>
$mark-fore-color: #fafafa; // Text color for <mark> $mark-fore-color: #fafafa; // Text color for <mark>

34
src/flavors/mini-sucroa.scss
View File

@@ -359,24 +359,24 @@ $card-section-padding1-padding: 12px 14px; // Padding for card section paddi
// Notes: // Notes:
// [1] - The cards module depends heavily on the grid system module. // [1] - The cards module depends heavily on the grid system module.
// Variables for tabs // Variables for tabs
$tab-container-name: 'tabs'; // Class name for the tabs' container $tab-container-name: 'tabs'; // Class name for the tabs' container
$tab-container-box-shadow: // Box shadow for the tabs' container $tab-container-box-shadow: // Box shadow for the tabs' container
0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26); 0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
$tab-label-back-color: #d3cae8; // Background color for tabs' labels $tab-label-back-color: #d3cae8; // Background color for tabs' labels
$tab-label-fore-color: $fore-color; // Text color for tabs' labels $tab-label-fore-color: $fore-color; // Text color for tabs' labels
$tab-label-selected-back-color: #e8deff; // Background color for open tab's label $tab-label-selected-back-color: #e8deff; // Background color for open tab's label
$tab-label-selected-fore-color: $fore-color; // Text color for open tab's label $tab-label-selected-fore-color: $fore-color; // Text color for open tab's label
$tab-label-hover-opacity: 0.8; // Opacity of the tab's label on hover $tab-label-hover-opacity: 0.8; // Opacity of the tab's label on hover
$tab-label-padding: 10px 12px; // Padding for tabs' labels $tab-label-padding: 10px 12px; // Padding for tabs' labels
$tab-label-height: 28px; // Height for tabs' labels $tab-label-height: 28px; // Height for tabs' labels
$tab-border-style: 1px solid #a9a2ba; // Border style for tabs $tab-border-style: 1px solid #a9a2ba; // Border style for tabs
$tab-border-radius: 2px; // Border radius for tabs $tab-border-radius: 2px; // Border radius for tabs
$tab-panel-back-color: #eee7ff; // Background color for tabs' panels $tab-panel-back-color: #eee7ff; // Background color for tabs' panels
$tab-panel-fore-color: $fore-color; // Text color for tabs' panels $tab-panel-fore-color: $fore-color; // Text color for tabs' panels
$tab-panel-padding: 10px; // Padding for tabs' panels $tab-panel-padding: 10px; // Padding for tabs' panels
$tab-panel-height: 400px; // Height for tabs' panels $tab-panel-height: 400px; // Height for tabs' panels
$tab-stacked-breakpoint: 767px; // Breakpoint for tabs layout (stacked/horizontal) $tab-stacked-breakpoint: 767px; // Breakpoint for tabs layout (stacked/horizontal)
$tab-stacked-name: 'stacked'; // Class name for stacked tabs $tab-stacked-name: 'stacked'; // Class name for stacked tabs
// Variables for contextual background elements and alerts // Variables for contextual background elements and alerts
$mark-back-color: #6979c6; // Background color for <mark> $mark-back-color: #6979c6; // Background color for <mark>
$mark-fore-color: #fffddc; // Text color for <mark> $mark-fore-color: #fffddc; // Text color for <mark>

137
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;
@@ -15,9 +16,9 @@ $tab-stacked-name: 'stacked' !default; // Class name for stacked tabs
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
-webkit-justify-content: space-between; -webkit-justify-content: space-between;
justify-content: space-between; justify-content: space-between;
-webkit-flex-wrap: wrap; -webkit-flex-wrap: wrap;
flex-wrap: wrap; flex-wrap: wrap;
@if $tab-container-box-shadow != none { @if $tab-container-box-shadow != none {
box-shadow: $tab-container-box-shadow; box-shadow: $tab-container-box-shadow;
} }
@@ -27,16 +28,16 @@ $tab-stacked-name: 'stacked' !default; // Class name for stacked tabs
-webkit-box-flex: 1; -webkit-box-flex: 1;
// New syntax // New syntax
-webkit-flex-grow: 1; -webkit-flex-grow: 1;
flex-grow: 1; flex-grow: 1;
// Make tab labels stay at the top on large displays // Make tab labels stay at the top on large displays
-webkit-order: 1; -webkit-order: 1;
order: 1; order: 1;
// Actual styling // Actual styling
display: inline-block; display: inline-block;
height: $tab-label-height; height: $tab-label-height;
cursor: pointer; cursor: pointer;
-webkit-transition: background 0.3s ease 0s; -webkit-transition: background 0.3s ease 0s;
transition: background 0.3s ease 0s; transition: background 0.3s ease 0s;
@if $tab-label-back-color != $back-color { @if $tab-label-back-color != $back-color {
background: $tab-label-back-color; background: $tab-label-back-color;
} }
@@ -71,10 +72,10 @@ $tab-stacked-name: 'stacked' !default; // Class name for stacked tabs
& > [type="radio"] + label + div, &.#{$tab-stacked-name} > [type="checkbox"] + label + div { & > [type="radio"] + label + div, &.#{$tab-stacked-name} > [type="checkbox"] + label + div {
// New syntax // New syntax
-webkit-flex-basis: auto; -webkit-flex-basis: auto;
flex-basis: auto; flex-basis: auto;
// Make tab panels display after all the labels on larger displays // Make tab panels display after all the labels on larger displays
-webkit-order: 2; -webkit-order: 2;
order: 2; order: 2;
// Hide content, while allowing accessibility // Hide content, while allowing accessibility
height: 1px; height: 1px;
width: 1px; width: 1px;
@@ -83,16 +84,16 @@ $tab-stacked-name: 'stacked' !default; // Class name for stacked tabs
position: absolute; position: absolute;
clip: rect(0 0 0 0); clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%); -webkit-clip-path: inset(100%);
clip-path: inset(100%); clip-path: inset(100%);
// Presentation // Presentation
-webkit-transform: scaleY(0); -webkit-transform: scaleY(0);
transform: scaleY(0); transform: scaleY(0);
-webkit-transform-origin: top; -webkit-transform-origin: top;
transform-origin: top; transform-origin: top;
-webkit-transition: -webkit-transform 0.3s ease 0s, -webkit-transition: -webkit-transform 0.3s ease 0s,
transform 0.3s ease 0s; transform 0.3s ease 0s;
transition: -webkit-transform 0.3s ease 0s, transition: -webkit-transform 0.3s ease 0s,
transform 0.3s ease 0s; transform 0.3s ease 0s;
// Style for tab labels except the first // Style for tab labels except the first
@if $tab-border-style != 0 { @if $tab-border-style != 0 {
& + [type="radio"] + label { & + [type="radio"] + label {
@@ -130,7 +131,7 @@ $tab-stacked-name: 'stacked' !default; // Class name for stacked tabs
overflow: auto; overflow: auto;
margin: 0; margin: 0;
-webkit-transform: scaleY(1); -webkit-transform: scaleY(1);
transform: scaleY(1); transform: scaleY(1);
@if $tab-panel-back-color != $back-color { @if $tab-panel-back-color != $back-color {
background: $tab-panel-back-color; background: $tab-panel-back-color;
} }
@@ -147,60 +148,62 @@ $tab-stacked-name: 'stacked' !default; // Class name for stacked tabs
// Fix display for some browsers // Fix display for some browsers
clip: auto; clip: auto;
-webkit-clip-path: inset(0%); -webkit-clip-path: inset(0%);
clip-path: inset(0%); clip-path: inset(0%);
} }
} }
// Stacked tabs // Stacked tabs
.#{$tab-container-name}.#{$tab-stacked-name} { @if $include-stacked-tabs { // Turn off if you don't want stacked tabs enabled (except on smaller screens for responsiveness)
// Old syntax .#{$tab-container-name}.#{$tab-stacked-name} {
-webkit-box-orient: vertical; // Old syntax
// New syntax -webkit-box-orient: vertical;
-webkit-flex-direction: column; // New syntax
flex-direction: column; -webkit-flex-direction: column;
& > label { flex-direction: column;
-webkit-order: initial; // Reset order to show stacked tabs properly & > label {
order: initial; -webkit-order: initial; // Reset order to show stacked tabs properly
@if $tab-border-radius != 0 { // Style first and last tabs' labels' corners as needed order: initial;
&:last-of-type { @if $tab-border-radius != 0 { // Style first and last tabs' labels' corners as needed
border-top-right-radius: 0; &:last-of-type {
border-top-right-radius: 0;
border-bottom-left-radius: $tab-border-radius;
border-bottom-right-radius: $tab-border-radius;
}
// Keep :first-of-type below :last-of-type to make sure that single collapses get proper radiuses
&:first-of-type {
border-top-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, & > [type="checkbox"]:checked + label {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
}
& > [type="radio"] + label + div, & > [type="checkbox"] + label + div {
-webkit-order: initial; // Reset order to show stacked tabs properly
order: initial;
// Presentation
-webkit-transform-origin: top;
transform-origin: top;
@if $tab-border-radius != 0 {
border-radius: 0;
}
& + [type="radio"] + label, & + [type="checkbox"] + label {
@if $tab-border-style != 0 {
border: $tab-border-style;
border-top: 0;
}
}
}
& > [type="radio"]:checked + label + div, & > [type="checkbox"]:checked + label + div {
height: auto;
}
@if $tab-border-radius != 0 {
& > [type="radio"] + label + div:last-of-type, & > [type="checkbox"] + label + div:last-of-type {
border-bottom-left-radius: $tab-border-radius; border-bottom-left-radius: $tab-border-radius;
border-bottom-right-radius: $tab-border-radius; border-bottom-right-radius: $tab-border-radius;
} }
// Keep :first-of-type below :last-of-type to make sure that single collapses get proper radiuses
&:first-of-type {
border-top-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, & > [type="checkbox"]:checked + label {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
}
& > [type="radio"] + label + div, & > [type="checkbox"] + label + div {
-webkit-order: initial; // Reset order to show stacked tabs properly
order: initial;
// Presentation
-webkit-transform-origin: top;
transform-origin: top;
@if $tab-border-radius != 0 {
border-radius: 0;
}
& + [type="radio"] + label, & + [type="checkbox"] + label {
@if $tab-border-style != 0 {
border: $tab-border-style;
border-top: 0;
}
}
}
& > [type="radio"]:checked + label + div, & > [type="checkbox"]:checked + label + div {
height: auto;
}
@if $tab-border-radius != 0 {
& > [type="radio"] + label + div:last-of-type, & > [type="checkbox"] + label + div:last-of-type {
border-bottom-left-radius: $tab-border-radius;
border-bottom-right-radius: $tab-border-radius;
} }
} }
} }
@@ -211,10 +214,10 @@ $tab-stacked-name: 'stacked' !default; // Class name for stacked tabs
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
// New syntax // New syntax
-webkit-flex-direction: column; -webkit-flex-direction: column;
flex-direction: column; flex-direction: column;
& > label { & > label {
-webkit-order: initial; // Reset order to show stacked tabs properly -webkit-order: initial; // Reset order to show stacked tabs properly
order: initial; order: initial;
@if $tab-border-radius != 0 { // Style first and last tabs' labels' corners as needed @if $tab-border-radius != 0 { // Style first and last tabs' labels' corners as needed
&:first-of-type { &:first-of-type {
border-top-right-radius: $tab-border-radius; border-top-right-radius: $tab-border-radius;
@@ -234,7 +237,7 @@ $tab-stacked-name: 'stacked' !default; // Class name for stacked tabs
} }
& > [type="radio"] + label + div { & > [type="radio"] + label + div {
-webkit-order: initial; // Reset order to show stacked tabs properly -webkit-order: initial; // Reset order to show stacked tabs properly
order: initial; order: initial;
@if $tab-border-radius != 0 { @if $tab-border-radius != 0 {
border-radius: 0; border-radius: 0;
} }