beenull/mini.css
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Tab cleanup

Browse source
This commit is contained in:
Angelos Chalaris 2016-11-10 11:17:22 +02:00
parent 99b5454a3a
commit 49a055e91d
4 changed files with 229 additions and 227 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
dist/mini-default.css vendored
View file

@ -906,7 +906,7 @@ th:first-child, td:first-child {
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px; }
@media only screen and (max-width: 800px) {
@media (max-width: 800px) {
.tabs {
-webkit-box-orient: vertical;
-webkit-flex-direction: column;

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

File diff suppressed because one or more lines are too long

3
docs/v2/DEVLOG.md
View file

@ -392,4 +392,5 @@
- Removed `spinner` file.
- Cleanup for `navigation`.
- Cleanup for `utility`.
- Cleanup for `card`. Changed loading order and variables to better reflect the new module system.
- Cleanup for `card`. Changed loading order and variables to better reflect the new module system. Updated media queries.
- Cleanup for `tab`, updated media queries.

449
src/mini/_tab.scss
View file

@ -6,241 +6,242 @@ $tab-stacked-name: 'stacked' !default; // Class name for stacked tabs
.#{$tab-container-name} {
width: 100%;
opacity: 1;
// Old syntax
// Old syntax
display: -webkit-box;
-webkit-box-pack: justify;
// New syntax
// New syntax
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
// Tab label styling
& > label {
// Old syntax
-webkit-box-flex: 1;
// New syntax
-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;
transition: background 0.3s ease 0s;
@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;
}
}
// Hover styling for tabs' labels
&:hover, &:active, &:focus {
background: rgba($tab-label-back-color, $tab-label-hover-opacity);
}
}
// Tab radio styling
& > [type="radio"], &.#{$tab-stacked-name} > [type="checkbox"] {
display: none;
visibility: hidden;
}
// Tab content styling
& > [type="radio"] + label + div, &.#{$tab-stacked-name} > [type="checkbox"] + label + div {
// 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;
overflow: hidden;
position: absolute;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
// Presentation
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: top;
transform-origin: top;
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{
border-left: 0;
}
}
@if $tab-border-radius != 0 {
border-bottom-left-radius: $tab-border-radius;
border-bottom-right-radius: $tab-border-radius;
}
}
@if $tab-border-style != 0 {
&.stacked > [type="checkbox"] + label + div + [type="checkbox"] + label {
border-left: 0;
}
}
// Tab label styling for open tab
& > [type="radio"]:checked + label, &.#{$tab-stacked-name} > [type="checkbox"]:checked + label {
@if $tab-label-selected-back-color != $tab-label-back-color {
background: $tab-label-selected-back-color;
&:hover, &:active, &:focus {
background: rgba($tab-label-selected-back-color, $tab-label-hover-opacity);
}
}
@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, &.#{$tab-stacked-name} > [type="checkbox"]:checked + label + div {
box-sizing: border-box;
position: relative;
height: $tab-panel-height;
width: 100%;
overflow: auto;
margin: 0;
-webkit-transform: scaleY(1);
transform: scaleY(1);
@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%);
}
justify-content: space-between;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
// Tab label styling
& > label {
// Old syntax
-webkit-box-flex: 1;
// New syntax
-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;
transition: background 0.3s ease 0s;
@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;
}
}
// Hover styling for tabs' labels
&:hover, &:active, &:focus {
background: rgba($tab-label-back-color, $tab-label-hover-opacity);
}
}
// Tab radio styling
& > [type="radio"], &.#{$tab-stacked-name} > [type="checkbox"] {
display: none;
visibility: hidden;
}
// Tab content styling
& > [type="radio"] + label + div, &.#{$tab-stacked-name} > [type="checkbox"] + label + div {
// 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;
overflow: hidden;
position: absolute;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
// Presentation
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: top;
transform-origin: top;
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 {
border-left: 0;
}
}
@if $tab-border-radius != 0 {
border-bottom-left-radius: $tab-border-radius;
border-bottom-right-radius: $tab-border-radius;
}
}
@if $tab-border-style != 0 {
&.stacked > [type="checkbox"] + label + div + [type="checkbox"] + label {
border-left: 0;
}
}
// Tab label styling for open tab
& > [type="radio"]:checked + label, &.#{$tab-stacked-name} > [type="checkbox"]:checked + label {
@if $tab-label-selected-back-color != $tab-label-back-color {
background: $tab-label-selected-back-color;
&:hover, &:active, &:focus {
background: rgba($tab-label-selected-back-color, $tab-label-hover-opacity);
}
}
@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, &.#{$tab-stacked-name} > [type="checkbox"]:checked + label + div {
box-sizing: border-box;
position: relative;
height: $tab-panel-height;
width: 100%;
overflow: auto;
margin: 0;
-webkit-transform: scaleY(1);
transform: scaleY(1);
@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%);
}
}
// Stacked tabs
.#{$tab-container-name}.#{$tab-stacked-name} {
// Old syntax
// Old syntax
-webkit-box-orient: vertical;
// New syntax
// 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;
}
}
& > 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;
}
}
}
// 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;
}
}
}
@media (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;
}
}
}
}