mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-08-14 09:54:02 +02:00
Tab cleanup
This commit is contained in:
Angelos Chalaris
2
dist/mini-default.css
vendored
2
dist/mini-default.css
vendored
@@ -906,7 +906,7 @@ th:first-child, td:first-child {
|
|||||||
border-bottom-left-radius: 2px;
|
border-bottom-left-radius: 2px;
|
||||||
border-bottom-right-radius: 2px; }
|
border-bottom-right-radius: 2px; }
|
||||||
|
|
||||||
@media only screen and (max-width: 800px) {
|
@media (max-width: 800px) {
|
||||||
.tabs {
|
.tabs {
|
||||||
-webkit-box-orient: vertical;
|
-webkit-box-orient: vertical;
|
||||||
-webkit-flex-direction: column;
|
-webkit-flex-direction: column;
|
||||||
|
|||||||
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
@@ -392,4 +392,5 @@
|
|||||||
- Removed `spinner` file.
|
- Removed `spinner` file.
|
||||||
- Cleanup for `navigation`.
|
- Cleanup for `navigation`.
|
||||||
- Cleanup for `utility`.
|
- 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.
|
||||||
@@ -6,241 +6,242 @@ $tab-stacked-name: 'stacked' !default; // Class name for stacked tabs
|
|||||||
.#{$tab-container-name} {
|
.#{$tab-container-name} {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
// Old syntax
|
// Old syntax
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
-webkit-box-pack: justify;
|
-webkit-box-pack: justify;
|
||||||
// New syntax
|
// New syntax
|
||||||
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;
|
||||||
// Tab label styling
|
// Tab label styling
|
||||||
& > label {
|
& > label {
|
||||||
// Old syntax
|
// Old syntax
|
||||||
-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;
|
||||||
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;
|
||||||
}
|
}
|
||||||
@if $tab-label-fore-color != $fore-color {
|
@if $tab-label-fore-color != $fore-color {
|
||||||
color: $tab-label-fore-color;
|
color: $tab-label-fore-color;
|
||||||
}
|
}
|
||||||
@if $tab-border-style != 0 {
|
@if $tab-border-style != 0 {
|
||||||
border: $tab-border-style;
|
border: $tab-border-style;
|
||||||
}
|
}
|
||||||
@if $tab-label-padding != 0 {
|
@if $tab-label-padding != 0 {
|
||||||
padding: $tab-label-padding;
|
padding: $tab-label-padding;
|
||||||
}
|
}
|
||||||
@if $tab-border-radius != 0 { // Style first and last tabs' labels' top corners as needed
|
@if $tab-border-radius != 0 { // Style first and last tabs' labels' top corners as needed
|
||||||
&:first-of-type {
|
&:first-of-type {
|
||||||
border-top-left-radius: $tab-border-radius;
|
border-top-left-radius: $tab-border-radius;
|
||||||
}
|
}
|
||||||
&:last-of-type {
|
&:last-of-type {
|
||||||
border-top-right-radius: $tab-border-radius;
|
border-top-right-radius: $tab-border-radius;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Hover styling for tabs' labels
|
// Hover styling for tabs' labels
|
||||||
&:hover, &:active, &:focus {
|
&:hover, &:active, &:focus {
|
||||||
background: rgba($tab-label-back-color, $tab-label-hover-opacity);
|
background: rgba($tab-label-back-color, $tab-label-hover-opacity);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Tab radio styling
|
// Tab radio styling
|
||||||
& > [type="radio"], &.#{$tab-stacked-name} > [type="checkbox"] {
|
& > [type="radio"], &.#{$tab-stacked-name} > [type="checkbox"] {
|
||||||
display: none;
|
display: none;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
// Tab content styling
|
// Tab content styling
|
||||||
& > [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;
|
||||||
margin: -1px;
|
margin: -1px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
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;
|
||||||
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 {
|
||||||
border-left: 0;
|
border-left: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@if $tab-border-radius != 0 {
|
@if $tab-border-radius != 0 {
|
||||||
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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@if $tab-border-style != 0 {
|
@if $tab-border-style != 0 {
|
||||||
&.stacked > [type="checkbox"] + label + div + [type="checkbox"] + label {
|
&.stacked > [type="checkbox"] + label + div + [type="checkbox"] + label {
|
||||||
border-left: 0;
|
border-left: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Tab label styling for open tab
|
// Tab label styling for open tab
|
||||||
& > [type="radio"]:checked + label, &.#{$tab-stacked-name} > [type="checkbox"]:checked + label {
|
& > [type="radio"]:checked + label, &.#{$tab-stacked-name} > [type="checkbox"]:checked + label {
|
||||||
@if $tab-label-selected-back-color != $tab-label-back-color {
|
@if $tab-label-selected-back-color != $tab-label-back-color {
|
||||||
background: $tab-label-selected-back-color;
|
background: $tab-label-selected-back-color;
|
||||||
&:hover, &:active, &:focus {
|
&:hover, &:active, &:focus {
|
||||||
background: rgba($tab-label-selected-back-color, $tab-label-hover-opacity);
|
background: rgba($tab-label-selected-back-color, $tab-label-hover-opacity);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@if $tab-label-selected-fore-color != $tab-label-fore-color {
|
@if $tab-label-selected-fore-color != $tab-label-fore-color {
|
||||||
color: $tab-label-selected-fore-color;
|
color: $tab-label-selected-fore-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Tab content styling (open tab)
|
// Tab content styling (open tab)
|
||||||
& > [type="radio"]:checked + label + div, &.#{$tab-stacked-name} > [type="checkbox"]:checked + label + div {
|
& > [type="radio"]:checked + label + div, &.#{$tab-stacked-name} > [type="checkbox"]:checked + label + div {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
position: relative;
|
position: relative;
|
||||||
height: $tab-panel-height;
|
height: $tab-panel-height;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
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;
|
||||||
}
|
}
|
||||||
@if $tab-panel-fore-color != $fore-color {
|
@if $tab-panel-fore-color != $fore-color {
|
||||||
color: $tab-panel-fore-color;
|
color: $tab-panel-fore-color;
|
||||||
}
|
}
|
||||||
@if $tab-border-style != 0 {
|
@if $tab-border-style != 0 {
|
||||||
border: $tab-border-style;
|
border: $tab-border-style;
|
||||||
border-top: 0;
|
border-top: 0;
|
||||||
}
|
}
|
||||||
@if $tab-panel-padding != 0 {
|
@if $tab-panel-padding != 0 {
|
||||||
padding: $tab-panel-padding;
|
padding: $tab-panel-padding;
|
||||||
}
|
}
|
||||||
// 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} {
|
.#{$tab-container-name}.#{$tab-stacked-name} {
|
||||||
// Old syntax
|
// Old syntax
|
||||||
-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
|
||||||
&:last-of-type {
|
&:last-of-type {
|
||||||
border-top-right-radius: 0;
|
border-top-right-radius: 0;
|
||||||
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 {
|
// Keep :first-of-type below :last-of-type to make sure that single collapses get proper radiuses
|
||||||
border-top-right-radius: $tab-border-radius;
|
&: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 {
|
@if $tab-border-radius != 0 { // Style the last tabs' label corners when it's open as needed
|
||||||
border-bottom-left-radius: 0;
|
& > [type="radio"]:checked + label, & > [type="checkbox"]:checked + label {
|
||||||
border-bottom-right-radius: 0;
|
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
|
& > [type="radio"] + label + div, & > [type="checkbox"] + label + div {
|
||||||
order: initial;
|
-webkit-order: initial; // Reset order to show stacked tabs properly
|
||||||
// Presentation
|
order: initial;
|
||||||
-webkit-transform-origin: top;
|
// Presentation
|
||||||
transform-origin: top;
|
-webkit-transform-origin: top;
|
||||||
@if $tab-border-radius != 0 {
|
transform-origin: top;
|
||||||
border-radius: 0;
|
@if $tab-border-radius != 0 {
|
||||||
}
|
border-radius: 0;
|
||||||
& + [type="radio"] + label, & + [type="checkbox"] + label {
|
}
|
||||||
@if $tab-border-style != 0 {
|
& + [type="radio"] + label, & + [type="checkbox"] + label {
|
||||||
border: $tab-border-style;
|
@if $tab-border-style != 0 {
|
||||||
border-top: 0;
|
border: $tab-border-style;
|
||||||
}
|
border-top: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
& > [type="radio"]:checked + label + div, & > [type="checkbox"]:checked + label + div {
|
}
|
||||||
height: auto;
|
& > [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 {
|
@if $tab-border-radius != 0 {
|
||||||
border-bottom-left-radius: $tab-border-radius;
|
& > [type="radio"] + label + div:last-of-type, & > [type="checkbox"] + label + div:last-of-type {
|
||||||
border-bottom-right-radius: $tab-border-radius;
|
border-bottom-left-radius: $tab-border-radius;
|
||||||
}
|
border-bottom-right-radius: $tab-border-radius;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
// Responsiveness
|
// Responsiveness
|
||||||
@media only screen and (max-width: #{$tab-stacked-breakpoint}) {
|
@media (max-width: #{$tab-stacked-breakpoint}) {
|
||||||
.#{$tab-container-name} {
|
.#{$tab-container-name} {
|
||||||
// Old syntax
|
// Old syntax
|
||||||
-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;
|
||||||
}
|
}
|
||||||
&:last-of-type {
|
&:last-of-type {
|
||||||
border-top-right-radius: 0;
|
border-top-right-radius: 0;
|
||||||
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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@if $tab-border-radius != 0 { // Style the last tabs' label corners when it's open as needed
|
@if $tab-border-radius != 0 { // Style the last tabs' label corners when it's open as needed
|
||||||
& > [type="radio"]:checked + label {
|
& > [type="radio"]:checked + label {
|
||||||
border-bottom-left-radius: 0;
|
border-bottom-left-radius: 0;
|
||||||
border-bottom-right-radius: 0;
|
border-bottom-right-radius: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
& > [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;
|
||||||
}
|
}
|
||||||
& + [type="radio"] + label {
|
& + [type="radio"] + label {
|
||||||
@if $tab-border-style != 0 {
|
@if $tab-border-style != 0 {
|
||||||
border: $tab-border-style;
|
border: $tab-border-style;
|
||||||
border-top: 0;
|
border-top: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@if $tab-border-radius != 0 {
|
@if $tab-border-radius != 0 {
|
||||||
& > [type="radio"] + label + div:last-of-type {
|
& > [type="radio"] + 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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user