Updated tab selectors

Doesn't change anything, except for the selectors used for styling tabs. Should make the CSS parsing and use a lot easier.
This commit is contained in:
Angelos Chalaris 2017-06-05 16:42:29 +03:00
parent 4495021488
commit 8e77b43c3a
9 changed files with 36 additions and 31 deletions

12
dist/mini-default.css vendored
View file

@ -1623,11 +1623,7 @@ table.striped tr:nth-of-type(2n) > td {
transition: -webkit-transform 0.3s, transform 0.3s;
}
.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 {
.tabs > label:not(:first-of-type) {
border-left: 0;
}
@ -1675,7 +1671,7 @@ table.striped tr:nth-of-type(2n) > td {
transform-origin: top;
}
.tabs.stacked > [type="radio"] + label + div + [type="radio"] + label, .tabs.stacked > [type="radio"] + label + div + [type="checkbox"] + label, .tabs.stacked > [type="checkbox"] + label + div + [type="radio"] + label, .tabs.stacked > [type="checkbox"] + label + div + [type="checkbox"] + label {
.tabs.stacked > label:not(:first-of-type) {
border: 1px solid #bdbdbd;
border-top: 0;
}
@ -1698,7 +1694,7 @@ table.striped tr:nth-of-type(2n) > td {
-webkit-order: initial;
order: initial;
}
.tabs > [type="radio"] + label + div + [type="radio"] + label {
.tabs > label:not(:first-of-type) {
border: 1px solid #bdbdbd;
border-top: 0;
}
@ -1842,7 +1838,7 @@ progress {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 1rem;
height: 0.625rem;
width: 90%;
width: calc(100% - 1rem);
margin: 0.5rem 0.5rem;

File diff suppressed because one or more lines are too long

2
dist/mini-lite.css vendored
View file

@ -1223,7 +1223,7 @@ progress {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 1rem;
height: 0.625rem;
width: 90%;
width: calc(100% - 1rem);
margin: 0.5rem 0.5rem;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -1197,3 +1197,17 @@
- http://www.flaticon.com/free-icon/bacteria_191004 (Bacteria)
- http://www.flaticon.com/free-icon/meteor_433944 (Meteor)
- Updated colors for `<pre>` and `<code>`, along with `<button>` and some other elements to better contrast colors on older and less bright displays. Updated both `mini-default` and `mini-lite` to fix issues with those colors.
- Altered default height of `<progress>` elements to `0.625rem` from `1rem`, should look more modern and sleek. Updated both core flavors.
- **State check for all modules and implemented components** (CSS variables - #19 - not included in features checked):
- `core` - Most likely **100% complete**, fluid type will *not* be enabled by default anytime soon. Everything else is fully nominal.
- `grid` - Everything works as expected, **no changes** to existing components. Possible addition of a couple of atomic css classes to make everything smoother.
- `input_control` - **Requires testing** for `.input-group` and other components. **New component**, `.switch`es must be added.
- `navigation` - **100% complete**, should be checked against the new additions to other modules to make sure everything works as expected.
- `table` - **New component**, `.scrollable` tables should be added. Everything else should be fine.
- `card` - Everything is fine, **no changes**, should check for compatibility with `grid`'s new atomic css and/or build in-module ones, too.
- `tab` - Most likely **no changes**, might test to see if more modern styling can be applied to the module's component.
- `contextual`- **New component**, `.modal` should be added. Nothing else of note here.
- `progress` - **100% complete**, some fancier components such as Android-styled spinner donuts might be coming later down the line, but they will be flavor-customized.
- `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.

View file

@ -455,7 +455,7 @@ $tooltip-bottom-name: 'bottom'; // Class name for bottom tooltip
// Variables for progress elements and spinners
$progress-back-color: #e0e0e0; // Background color for <progress>
$progress-fore-color: #0277bd; // Progress bar color for <progress>
$progress-height: 1rem; // Height of <progress>
$progress-height: 0.625rem; // Height of <progress>
$progress-max-value: 1000; // Arithmetic max value of <progress>
$progress-border-style: 0; // Border style for <progress>
$progress-border-radius: 2px; // Border radius for the <progress> container

View file

@ -347,7 +347,7 @@ $include-tooltip: false; // Should tooltips be included? (`true`/`f
// Variables for progress elements and spinners
$progress-back-color: #e0e0e0; // Background color for <progress>
$progress-fore-color: #0277bd; // Progress bar color for <progress>
$progress-height: 1rem; // Height of <progress>
$progress-height: 0.625rem; // Height of <progress>
$progress-max-value: 1000; // Arithmetic max value of <progress>
$progress-border-style: 0; // Border style for <progress>
$progress-border-radius: 2px; // Border radius for the <progress> container

View file

@ -95,19 +95,14 @@ $fore-color: black !default; // [External variable - core] Foreground
transform-origin: top;
transition: -webkit-transform 0.3s,
transform 0.3s;
// 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;
}
}
// Style for tab labels except the first
@if $tab-border-style != 0 {
&.stacked > [type="checkbox"] + label + div + [type="checkbox"] + label {
& > label:not(:first-of-type) {
border-left: 0;
}
}
@ -190,13 +185,13 @@ $fore-color: black !default; // [External variable - core] Foreground
@if $tab-border-radius != 0 {
border-radius: 0;
}
& + [type="radio"] + label, & + [type="checkbox"] + label {
}
& > label:not(:first-of-type) {
@if $tab-border-style != 0 {
border: $tab-border-style;
border-top: 0;
}
}
}
& > [type="radio"]:checked + label + div, & > [type="checkbox"]:checked + label + div {
height: auto;
}
@ -242,13 +237,13 @@ $fore-color: black !default; // [External variable - core] Foreground
@if $tab-border-radius != 0 {
border-radius: 0;
}
& + [type="radio"] + label {
}
& > label:not(:first-of-type) {
@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;