mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-01-17 21:08:13 +01:00
Updated tab selectors
More updates on the tab selectors, making them lighter and easier to work with. Browser parsing should be a lot faster now.
This commit is contained in:
Angelos Chalaris
parent
8e77b43c3a
commit
826dab1ecd
16
dist/mini-default.css
vendored
16
dist/mini-default.css
vendored
@ -1598,12 +1598,12 @@ table.striped tr:nth-of-type(2n) > td {
|
||||
background: rgba(230, 230, 230, 0.8);
|
||||
}
|
||||
|
||||
.tabs > [type="radio"], .tabs.stacked > [type="checkbox"] {
|
||||
.tabs > [type="radio"], .tabs > [type="checkbox"] {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.tabs > [type="radio"] + label + div, .tabs.stacked > [type="checkbox"] + label + div {
|
||||
.tabs > label + div {
|
||||
-webkit-flex-basis: auto;
|
||||
flex-basis: auto;
|
||||
-webkit-order: 2;
|
||||
@ -1627,15 +1627,15 @@ table.striped tr:nth-of-type(2n) > td {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.tabs > [type="radio"]:checked + label, .tabs.stacked > [type="checkbox"]:checked + label {
|
||||
.tabs > :checked + label {
|
||||
background: #eeeeee;
|
||||
}
|
||||
|
||||
.tabs > [type="radio"]:checked + label:hover, .tabs > [type="radio"]:checked + label:focus, .tabs.stacked > [type="checkbox"]:checked + label:hover, .tabs.stacked > [type="checkbox"]:checked + label:focus {
|
||||
.tabs > :checked + label:hover, .tabs > :checked + label:focus {
|
||||
background: rgba(238, 238, 238, 0.8);
|
||||
}
|
||||
|
||||
.tabs > [type="radio"]:checked + label + div, .tabs.stacked > [type="checkbox"]:checked + label + div {
|
||||
.tabs > :checked + label + div {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
height: 400px;
|
||||
@ -1664,7 +1664,7 @@ table.striped tr:nth-of-type(2n) > td {
|
||||
order: initial;
|
||||
}
|
||||
|
||||
.tabs.stacked > [type="radio"] + label + div, .tabs.stacked > [type="checkbox"] + label + div {
|
||||
.tabs.stacked > label + div {
|
||||
-webkit-order: initial;
|
||||
order: initial;
|
||||
-webkit-transform-origin: top;
|
||||
@ -1676,7 +1676,7 @@ table.striped tr:nth-of-type(2n) > td {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.tabs.stacked > [type="radio"]:checked + label + div, .tabs.stacked > [type="checkbox"]:checked + label + div {
|
||||
.tabs.stacked > :checked + label + div {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@ -1690,7 +1690,7 @@ table.striped tr:nth-of-type(2n) > td {
|
||||
-webkit-order: initial;
|
||||
order: initial;
|
||||
}
|
||||
.tabs > [type="radio"] + label + div {
|
||||
.tabs > label + div {
|
||||
-webkit-order: initial;
|
||||
order: initial;
|
||||
}
|
||||
|
||||
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
@ -1211,3 +1211,4 @@
|
||||
- `utility` - **No changes** to existing components, however some additions might be required to make everything play as expected.
|
||||
- Refer to above list in regards to the #19 feature request.
|
||||
- Reworked complex `tab` module selectors to utilize the functionality of `:not(:first-of-type)` on `label` elements.
|
||||
- Updated `tab` selectors to use new, *loose* definitions, effectively making the module `0.04KB` lighter. Not a huge difference, but good enough due to the maintenance impact it has on the module, plus the consistency fixed for `.stacked`.
|
||||
|
||||
@ -67,12 +67,12 @@ $fore-color: black !default; // [External variable - core] Foreground
|
||||
}
|
||||
}
|
||||
// Tab radio styling
|
||||
& > [type="radio"], &.#{$tab-stacked-name} > [type="checkbox"] {
|
||||
& > [type="radio"], & > [type="checkbox"] {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
// Tab content styling
|
||||
& > [type="radio"] + label + div, &.#{$tab-stacked-name} > [type="checkbox"] + label + div {
|
||||
& > label + div {
|
||||
// New syntax
|
||||
-webkit-flex-basis: auto;
|
||||
flex-basis: auto;
|
||||
@ -107,7 +107,7 @@ $fore-color: black !default; // [External variable - core] Foreground
|
||||
}
|
||||
}
|
||||
// Tab label styling for open tab
|
||||
& > [type="radio"]:checked + label, &.#{$tab-stacked-name} > [type="checkbox"]:checked + label {
|
||||
& > :checked + label {
|
||||
@if $tab-label-selected-back-color != $tab-label-back-color {
|
||||
background: $tab-label-selected-back-color;
|
||||
&:hover, &:focus {
|
||||
@ -119,7 +119,7 @@ $fore-color: black !default; // [External variable - core] Foreground
|
||||
}
|
||||
}
|
||||
// Tab content styling (open tab)
|
||||
& > [type="radio"]:checked + label + div, &.#{$tab-stacked-name} > [type="checkbox"]:checked + label + div {
|
||||
& > :checked + label + div {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
height: $tab-panel-height;
|
||||
@ -171,12 +171,12 @@ $fore-color: black !default; // [External variable - core] Foreground
|
||||
}
|
||||
}
|
||||
@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 {
|
||||
& > :checked + label {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
& > [type="radio"] + label + div, & > [type="checkbox"] + label + div {
|
||||
& > label + div {
|
||||
-webkit-order: initial; // Reset order to show stacked tabs properly
|
||||
order: initial;
|
||||
// Presentation
|
||||
@ -192,11 +192,11 @@ $fore-color: black !default; // [External variable - core] Foreground
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
& > [type="radio"]:checked + label + div, & > [type="checkbox"]:checked + label + div {
|
||||
& > :checked + label + div {
|
||||
height: auto;
|
||||
}
|
||||
@if $tab-border-radius != 0 {
|
||||
& > [type="radio"] + label + div:last-of-type, & > [type="checkbox"] + label + div:last-of-type {
|
||||
& > label + div:last-of-type {
|
||||
border-bottom-left-radius: $tab-border-radius;
|
||||
border-bottom-right-radius: $tab-border-radius;
|
||||
}
|
||||
@ -226,12 +226,12 @@ $fore-color: black !default; // [External variable - core] Foreground
|
||||
}
|
||||
}
|
||||
@if $tab-border-radius != 0 { // Style the last tabs' label corners when it's open as needed
|
||||
& > [type="radio"]:checked + label {
|
||||
& > :checked + label {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
& > [type="radio"] + label + div {
|
||||
& > label + div {
|
||||
-webkit-order: initial; // Reset order to show stacked tabs properly
|
||||
order: initial;
|
||||
@if $tab-border-radius != 0 {
|
||||
@ -245,7 +245,7 @@ $fore-color: black !default; // [External variable - core] Foreground
|
||||
}
|
||||
}
|
||||
@if $tab-border-radius != 0 {
|
||||
& > [type="radio"] + label + div:last-of-type {
|
||||
& > label + div:last-of-type {
|
||||
border-bottom-left-radius: $tab-border-radius;
|
||||
border-bottom-right-radius: $tab-border-radius;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user