Housekeeping for tab module
Added on hidden flag and cleaned flavor files as needed
This commit is contained in:
Angelos Chalaris
parent
95897a62d2
commit
eea0ea9421
8
dist/mini-default.css
vendored
8
dist/mini-default.css
vendored
|
|
@ -1243,8 +1243,8 @@ table.striped tr:nth-of-type(2n) > td {
|
|||
.card > .section.double-padded {
|
||||
padding: 10px 12px 10px; }
|
||||
|
||||
/*
|
||||
Definitions for tabs/horizontal accordions.
|
||||
/*
|
||||
Definitions for tabs/horizontal accordions.
|
||||
*/
|
||||
.tabs {
|
||||
width: 100%;
|
||||
|
|
@ -1294,8 +1294,8 @@ table.striped tr:nth-of-type(2n) > td {
|
|||
transform: scaleY(0);
|
||||
-webkit-transform-origin: top;
|
||||
transform-origin: top;
|
||||
-webkit-transition: -webkit-transform 0.3s ease 0s,
transform 0.3s ease 0s;
|
||||
transition: -webkit-transform 0.3s ease 0s,
transform 0.3s ease 0s; }
|
||||
-webkit-transition: -webkit-transform 0.3s ease 0s,
transform 0.3s ease 0s;
|
||||
transition: -webkit-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 {
|
||||
border-left: 0; }
|
||||
.tabs.stacked > [type="checkbox"] + label + div + [type="checkbox"] + label {
|
||||
|
|
|
|||
2
dist/mini-default.min.css
vendored
2
dist/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
8
dist/mini-sucroa.css
vendored
8
dist/mini-sucroa.css
vendored
|
|
@ -1122,8 +1122,8 @@ table.striped tr:nth-of-type(2n) > td {
|
|||
.card > .section.double-padded {
|
||||
padding: 12px 14px; }
|
||||
|
||||
/*
|
||||
Definitions for tabs/horizontal accordions.
|
||||
/*
|
||||
Definitions for tabs/horizontal accordions.
|
||||
*/
|
||||
.tabs {
|
||||
width: 100%;
|
||||
|
|
@ -1177,8 +1177,8 @@ table.striped tr:nth-of-type(2n) > td {
|
|||
transform: scaleY(0);
|
||||
-webkit-transform-origin: top;
|
||||
transform-origin: top;
|
||||
-webkit-transition: -webkit-transform 0.3s ease 0s,
transform 0.3s ease 0s;
|
||||
transition: -webkit-transform 0.3s ease 0s,
transform 0.3s ease 0s;
|
||||
-webkit-transition: -webkit-transform 0.3s ease 0s,
transform 0.3s ease 0s;
|
||||
transition: -webkit-transform 0.3s ease 0s,
transform 0.3s ease 0s;
|
||||
border-bottom-left-radius: 2px;
|
||||
border-bottom-right-radius: 2px; }
|
||||
.tabs > [type="radio"] + label + div + [type="radio"] + label, .tabs.stacked > [type="checkbox"] + label + div + [type="radio"] + label {
|
||||
|
|
|
|||
2
dist/mini-sucroa.min.css
vendored
2
dist/mini-sucroa.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -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.
|
||||
- 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 `tab` module, adding an extra **hidden flag** `$include-stacked-tabs` for toggling `.stacked` tabs on and off, cleanup of flavor files.
|
||||
|
|
|
|||
|
|
@ -364,24 +364,24 @@ $card-section-padding1-padding: 10px 12px 10px; // Padding for card section pa
|
|||
// Notes:
|
||||
// [1] - The cards module depends heavily on the grid system module.
|
||||
// Variables for tabs
|
||||
$tab-container-name: 'tabs'; // Class name for the tabs' container
|
||||
$tab-container-box-shadow: // Box shadow for the tabs' container
|
||||
$tab-container-name: 'tabs'; // Class name 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);
|
||||
$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: #eeeeee; // Background 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-padding: 8px 12px; // 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: 0; // Border radius for tabs
|
||||
$tab-panel-back-color: #fafafa; // Background 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-height: 400px; // Height for tabs' panels
|
||||
$tab-stacked-breakpoint: 767px; // Breakpoint for tabs layout (stacked/horizontal)
|
||||
$tab-stacked-name: 'stacked'; // Class name for stacked tabs
|
||||
$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: #eeeeee; // Background 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-padding: 8px 12px; // 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: 0; // Border radius for tabs
|
||||
$tab-panel-back-color: #fafafa; // Background 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-height: 400px; // Height for tabs' panels
|
||||
$tab-stacked-breakpoint: 767px; // Breakpoint for tabs layout (stacked/horizontal)
|
||||
$tab-stacked-name: 'stacked'; // Class name for stacked tabs
|
||||
// Variables for contextual background elements and alerts
|
||||
$mark-back-color: #0277bd; // Background color for <mark>
|
||||
$mark-fore-color: #fafafa; // Text color for <mark>
|
||||
|
|
|
|||
|
|
@ -359,24 +359,24 @@ $card-section-padding1-padding: 12px 14px; // Padding for card section paddi
|
|||
// Notes:
|
||||
// [1] - The cards module depends heavily on the grid system module.
|
||||
// Variables for tabs
|
||||
$tab-container-name: 'tabs'; // Class name for the tabs' container
|
||||
$tab-container-box-shadow: // Box shadow for the tabs' container
|
||||
$tab-container-name: 'tabs'; // Class name 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);
|
||||
$tab-label-back-color: #d3cae8; // Background 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-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-padding: 10px 12px; // Padding for tabs' labels
|
||||
$tab-label-height: 28px; // Height for tabs' labels
|
||||
$tab-border-style: 1px solid #a9a2ba; // Border style for tabs
|
||||
$tab-border-radius: 2px; // Border radius for tabs
|
||||
$tab-panel-back-color: #eee7ff; // Background 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-height: 400px; // Height for tabs' panels
|
||||
$tab-stacked-breakpoint: 767px; // Breakpoint for tabs layout (stacked/horizontal)
|
||||
$tab-stacked-name: 'stacked'; // Class name for stacked tabs
|
||||
$tab-label-back-color: #d3cae8; // Background 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-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-padding: 10px 12px; // Padding for tabs' labels
|
||||
$tab-label-height: 28px; // Height for tabs' labels
|
||||
$tab-border-style: 1px solid #a9a2ba; // Border style for tabs
|
||||
$tab-border-radius: 2px; // Border radius for tabs
|
||||
$tab-panel-back-color: #eee7ff; // Background 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-height: 400px; // Height for tabs' panels
|
||||
$tab-stacked-breakpoint: 767px; // Breakpoint for tabs layout (stacked/horizontal)
|
||||
$tab-stacked-name: 'stacked'; // Class name for stacked tabs
|
||||
// Variables for contextual background elements and alerts
|
||||
$mark-back-color: #6979c6; // Background color for <mark>
|
||||
$mark-fore-color: #fffddc; // Text color for <mark>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
/*
|
||||
Definitions for tabs/horizontal accordions.
|
||||
/*
|
||||
Definitions for tabs/horizontal accordions.
|
||||
*/
|
||||
// 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-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%;
|
||||
opacity: 1;
|
||||
// Old syntax
|
||||
|
|
@ -15,28 +16,28 @@ $tab-stacked-name: 'stacked' !default; // Class name for stacked tabs
|
|||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-justify-content: space-between;
|
||||
justify-content: space-between;
|
||||
justify-content: space-between;
|
||||
-webkit-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
@if $tab-container-box-shadow != none {
|
||||
box-shadow: $tab-container-box-shadow;
|
||||
}
|
||||
// Tab label styling
|
||||
& > label {
|
||||
& > label {
|
||||
// Old syntax
|
||||
-webkit-box-flex: 1;
|
||||
// New syntax
|
||||
-webkit-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
// Make tab labels stay at the top on large displays
|
||||
-webkit-order: 1;
|
||||
order: 1;
|
||||
// Actual styling
|
||||
order: 1;
|
||||
// Actual styling
|
||||
display: inline-block;
|
||||
height: $tab-label-height;
|
||||
cursor: pointer;
|
||||
cursor: pointer;
|
||||
-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 {
|
||||
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 {
|
||||
// New syntax
|
||||
-webkit-flex-basis: auto;
|
||||
flex-basis: auto;
|
||||
flex-basis: auto;
|
||||
// Make tab panels display after all the labels on larger displays
|
||||
-webkit-order: 2;
|
||||
order: 2;
|
||||
order: 2;
|
||||
// Hide content, while allowing accessibility
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
|
|
@ -83,16 +84,16 @@ $tab-stacked-name: 'stacked' !default; // Class name for stacked tabs
|
|||
position: absolute;
|
||||
clip: rect(0 0 0 0);
|
||||
-webkit-clip-path: inset(100%);
|
||||
clip-path: inset(100%);
|
||||
clip-path: inset(100%);
|
||||
// Presentation
|
||||
-webkit-transform: scaleY(0);
|
||||
transform: scaleY(0);
|
||||
transform: scaleY(0);
|
||||
-webkit-transform-origin: top;
|
||||
transform-origin: top;
|
||||
-webkit-transition: -webkit-transform 0.3s ease 0s,
|
||||
transform 0.3s ease 0s;
|
||||
transition: -webkit-transform 0.3s ease 0s,
|
||||
transform 0.3s ease 0s;
|
||||
transform-origin: top;
|
||||
-webkit-transition: -webkit-transform 0.3s ease 0s,
|
||||
transform 0.3s ease 0s;
|
||||
transition: -webkit-transform 0.3s ease 0s,
|
||||
transform 0.3s ease 0s;
|
||||
// Style for tab labels except the first
|
||||
@if $tab-border-style != 0 {
|
||||
& + [type="radio"] + label {
|
||||
|
|
@ -130,7 +131,7 @@ $tab-stacked-name: 'stacked' !default; // Class name for stacked tabs
|
|||
overflow: auto;
|
||||
margin: 0;
|
||||
-webkit-transform: scaleY(1);
|
||||
transform: scaleY(1);
|
||||
transform: scaleY(1);
|
||||
@if $tab-panel-back-color != $back-color {
|
||||
background: $tab-panel-back-color;
|
||||
}
|
||||
|
|
@ -147,62 +148,64 @@ $tab-stacked-name: 'stacked' !default; // Class name for stacked tabs
|
|||
// Fix display for some browsers
|
||||
clip: auto;
|
||||
-webkit-clip-path: inset(0%);
|
||||
clip-path: inset(0%);
|
||||
clip-path: inset(0%);
|
||||
}
|
||||
}
|
||||
// Stacked tabs
|
||||
.#{$tab-container-name}.#{$tab-stacked-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
|
||||
&:last-of-type {
|
||||
border-top-right-radius: 0;
|
||||
@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} {
|
||||
// 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
|
||||
&: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-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;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Responsiveness
|
||||
@media (max-width: #{$tab-stacked-breakpoint}) {
|
||||
|
|
@ -211,10 +214,10 @@ $tab-stacked-name: 'stacked' !default; // Class name for stacked tabs
|
|||
-webkit-box-orient: vertical;
|
||||
// New syntax
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
flex-direction: column;
|
||||
& > label {
|
||||
-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
|
||||
&:first-of-type {
|
||||
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 {
|
||||
-webkit-order: initial; // Reset order to show stacked tabs properly
|
||||
order: initial;
|
||||
order: initial;
|
||||
@if $tab-border-radius != 0 {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
|
@ -252,4 +255,4 @@ $tab-stacked-name: 'stacked' !default; // Class name for stacked tabs
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue