Updated tab styling
Added a bottom border for selected tabs.
This commit is contained in:
parent
b01be57873
commit
7af521f9a6
8
dist/mini-dark.css
vendored
8
dist/mini-dark.css
vendored
|
@ -1751,6 +1751,7 @@ table.striped tr:nth-of-type(2n) > td {
|
|||
|
||||
.tabs > :checked + label {
|
||||
background: #263238;
|
||||
border-bottom-color: #0277bd;
|
||||
}
|
||||
|
||||
.tabs > :checked + label:hover, .tabs > :checked + label:focus {
|
||||
|
@ -1785,6 +1786,10 @@ table.striped tr:nth-of-type(2n) > td {
|
|||
order: initial;
|
||||
}
|
||||
|
||||
.tabs.stacked > :checked + label {
|
||||
border: 0.0625rem solid #757575;
|
||||
}
|
||||
|
||||
.tabs.stacked > label + div {
|
||||
-webkit-order: initial;
|
||||
order: initial;
|
||||
|
@ -1811,6 +1816,9 @@ table.striped tr:nth-of-type(2n) > td {
|
|||
-webkit-order: initial;
|
||||
order: initial;
|
||||
}
|
||||
.tabs > :checked + label {
|
||||
border: 0.0625rem solid #757575;
|
||||
}
|
||||
.tabs > label + div {
|
||||
-webkit-order: initial;
|
||||
order: initial;
|
||||
|
|
2
dist/mini-dark.min.css
vendored
2
dist/mini-dark.min.css
vendored
File diff suppressed because one or more lines are too long
8
dist/mini-default.css
vendored
8
dist/mini-default.css
vendored
|
@ -1751,6 +1751,7 @@ table.striped tr:nth-of-type(2n) > td {
|
|||
|
||||
.tabs > :checked + label {
|
||||
background: #eeeeee;
|
||||
border-bottom-color: #0277bd;
|
||||
}
|
||||
|
||||
.tabs > :checked + label:hover, .tabs > :checked + label:focus {
|
||||
|
@ -1786,6 +1787,10 @@ table.striped tr:nth-of-type(2n) > td {
|
|||
order: initial;
|
||||
}
|
||||
|
||||
.tabs.stacked > :checked + label {
|
||||
border: 0.0625rem solid #bdbdbd;
|
||||
}
|
||||
|
||||
.tabs.stacked > label + div {
|
||||
-webkit-order: initial;
|
||||
order: initial;
|
||||
|
@ -1812,6 +1817,9 @@ table.striped tr:nth-of-type(2n) > td {
|
|||
-webkit-order: initial;
|
||||
order: initial;
|
||||
}
|
||||
.tabs > :checked + label {
|
||||
border: 0.0625rem solid #bdbdbd;
|
||||
}
|
||||
.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
8
dist/mini-nord.css
vendored
8
dist/mini-nord.css
vendored
|
@ -1771,6 +1771,7 @@ table.striped tr:nth-of-type(2n) > td {
|
|||
.tabs > :checked + label {
|
||||
background: #4C566A;
|
||||
color: #ECEFF4;
|
||||
border-bottom-color: #5E81AC;
|
||||
}
|
||||
|
||||
.tabs > :checked + label:hover, .tabs > :checked + label:focus {
|
||||
|
@ -1805,6 +1806,10 @@ table.striped tr:nth-of-type(2n) > td {
|
|||
order: initial;
|
||||
}
|
||||
|
||||
.tabs.stacked > :checked + label {
|
||||
border: 1px solid #9e9e9e;
|
||||
}
|
||||
|
||||
.tabs.stacked > label + div {
|
||||
-webkit-order: initial;
|
||||
order: initial;
|
||||
|
@ -1831,6 +1836,9 @@ table.striped tr:nth-of-type(2n) > td {
|
|||
-webkit-order: initial;
|
||||
order: initial;
|
||||
}
|
||||
.tabs > :checked + label {
|
||||
border: 1px solid #9e9e9e;
|
||||
}
|
||||
.tabs > label + div {
|
||||
-webkit-order: initial;
|
||||
order: initial;
|
||||
|
|
2
dist/mini-nord.min.css
vendored
2
dist/mini-nord.min.css
vendored
File diff suppressed because one or more lines are too long
3
dist/mini-sucroa.css
vendored
3
dist/mini-sucroa.css
vendored
|
@ -1514,6 +1514,7 @@ table.striped tr:nth-of-type(2n) > td {
|
|||
|
||||
.tabs > :checked + label {
|
||||
background: #e8deff;
|
||||
border-bottom-color: #6979c6;
|
||||
}
|
||||
|
||||
.tabs > :checked + label:hover, .tabs > :checked + label:focus {
|
||||
|
@ -1560,6 +1561,7 @@ table.striped tr:nth-of-type(2n) > td {
|
|||
}
|
||||
|
||||
.tabs.stacked > :checked + label {
|
||||
border: 1px solid #a9a2ba;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
@ -1605,6 +1607,7 @@ table.striped tr:nth-of-type(2n) > td {
|
|||
border-bottom-right-radius: 2px;
|
||||
}
|
||||
.tabs > :checked + label {
|
||||
border: 1px solid #a9a2ba;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
|
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
|
@ -126,6 +126,10 @@
|
|||
<td data-label="Variable">$tab-border-radius</td><td data-label="Type">Border radius</td>
|
||||
<td data-label="Description">Border radius for tab components</td><td data-label="Sample value">2px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$$tab-selected-border-color</td><td data-label="Type">Border bottom color</td>
|
||||
<td data-label="Description">Border bottom color for tab components' selected label</td><td data-label="Sample value">#0277bd</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$tab-label-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Background color for tab components' labels (default)</td><td data-label="Sample value">#e0e0e0</td>
|
||||
|
|
147
docs/demo.html
147
docs/demo.html
|
@ -77,133 +77,26 @@
|
|||
<!-- Insert your page content here-->
|
||||
<main>
|
||||
<br />
|
||||
<table class="scrollable">
|
||||
<caption>People</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Surname</th>
|
||||
<th>Alias</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Name">Chad</td>
|
||||
<td data-label="Surname">Wilberts</td>
|
||||
<td data-label="Alias">MrOne</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Adam</td>
|
||||
<td data-label="Surname">Smith</td>
|
||||
<td data-label="Alias">TheSmith</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Adam</td>
|
||||
<td data-label="Surname">Smith</td>
|
||||
<td data-label="Alias">TheSmith</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Adam</td>
|
||||
<td data-label="Surname">Smith</td>
|
||||
<td data-label="Alias">TheSmith</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Adam</td>
|
||||
<td data-label="Surname">Smith</td>
|
||||
<td data-label="Alias">TheSmith</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Adam</td>
|
||||
<td data-label="Surname">Smith</td>
|
||||
<td data-label="Alias">TheSmith</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Adam</td>
|
||||
<td data-label="Surname">Smith</td>
|
||||
<td data-label="Alias">TheSmith</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Sophia</td>
|
||||
<td data-label="Surname">Canderson</td>
|
||||
<td data-label="Alias">Candee</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Chad</td>
|
||||
<td data-label="Surname">Wilberts</td>
|
||||
<td data-label="Alias">MrOne</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Chad</td>
|
||||
<td data-label="Surname">Wilberts</td>
|
||||
<td data-label="Alias">MrOne</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Chad</td>
|
||||
<td data-label="Surname">Wilberts</td>
|
||||
<td data-label="Alias">MrOne</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Chad</td>
|
||||
<td data-label="Surname">Wilberts</td>
|
||||
<td data-label="Alias">MrOne</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Chad</td>
|
||||
<td data-label="Surname">Wilberts</td>
|
||||
<td data-label="Alias">MrOne</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Chad</td>
|
||||
<td data-label="Surname">Wilberts</td>
|
||||
<td data-label="Alias">MrOne</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Chad</td>
|
||||
<td data-label="Surname">Wilberts</td>
|
||||
<td data-label="Alias">MrOneasdasdsada sdasdasdasdasdas dasdasdasasdas</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p>
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pulvinar diam eu nunc volutpat ultricies. Suspendisse id eleifend magna. Proin purus nisl, laoreet at libero eget, tincidunt feugiat ex. Suspendisse et dui sed erat maximus mattis nec vitae erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec non justo placerat, cursus magna et, posuere metus. Proin id pretium tortor, ut sollicitudin enim. Nulla gravida lorem euismod orci finibus vehicula.
|
||||
|
||||
Praesent orci turpis, dictum et elementum a, cursus sed libero. Sed maximus gravida maximus. Aenean tristique dui in lacus sollicitudin volutpat. Fusce lobortis at metus vitae ultricies. Sed pretium ante vitae metus convallis, in tincidunt urna blandit. Proin nec dui ac est tincidunt elementum. Etiam eu nisi leo. In pulvinar erat ut diam vulputate, a rhoncus libero dictum. Proin condimentum volutpat elementum. Morbi nec ultrices lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer consectetur aliquam nunc eu mollis. Duis pharetra lectus rhoncus feugiat ultrices. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc dictum erat orci, sed sodales sapien aliquam et.
|
||||
|
||||
Suspendisse in nulla nisi. Praesent vitae ornare sem. Nunc ornare eu ipsum sed mollis. Pellentesque mattis felis quis mauris feugiat lobortis. Fusce viverra eget neque eget ultricies. Cras a imperdiet nunc, sed malesuada augue. Sed blandit urna est, ut rutrum lorem tincidunt sit amet. Sed quam risus, rutrum at hendrerit eget, pharetra at ipsum. Nam nunc quam, semper non cursus at, lobortis fermentum ipsum.
|
||||
|
||||
Maecenas sed faucibus velit. Ut est risus, pulvinar in est iaculis, placerat mattis odio. Integer tincidunt eu lacus a mattis. Vivamus rutrum orci non augue eleifend, tincidunt viverra nibh vulputate. Nam sollicitudin, urna ac aliquet auctor, nibh neque hendrerit massa, sed blandit dolor mauris ut erat. Aliquam non arcu at ex dignissim viverra. Ut elit est, vulputate eu scelerisque eu, ultricies ac mi. Aenean vel consequat nulla. Nunc at nibh egestas, vestibulum enim a, luctus augue. Proin at urna at magna egestas aliquet sit amet non mi.
|
||||
|
||||
Vestibulum ex quam, tristique ac urna at, aliquam convallis turpis. Nunc malesuada, libero id egestas sodales, metus massa aliquam libero, quis dapibus turpis felis ut ligula. Curabitur at porta mi. Nullam laoreet efficitur quam, vel posuere odio tincidunt at. Nam augue lacus, tincidunt nec enim sed, feugiat vehicula enim. Vivamus faucibus hendrerit ipsum, eu tincidunt nunc ultrices vitae. Vestibulum vestibulum odio sed erat finibus, nec pretium enim eleifend. Praesent eget magna vel magna eleifend tempus ac eget dolor. Duis pretium arcu tincidunt nibh pretium, quis venenatis erat suscipit. Maecenas mattis mattis sem in rutrum. Nullam volutpat iaculis rhoncus. </p>
|
||||
<br/>
|
||||
<table class="horizontal">
|
||||
<caption>People</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Surname</th>
|
||||
<th>Alias</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Name">Chad</td>
|
||||
<td data-label="Surname">Wilberts</td>
|
||||
<td data-label="Alias">MrOne</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Adam</td>
|
||||
<td data-label="Surname">Smith</td>
|
||||
<td data-label="Alias">TheSmith</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Sophia</td>
|
||||
<td data-label="Surname">Canderson</td>
|
||||
<td data-label="Alias">Candee</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="tabs">
|
||||
<input type="radio" name="tab-group" id="tab1" checked aria-hidden="true">
|
||||
<label for="tab1" aria-hidden="true">Tab 1</label>
|
||||
<div>
|
||||
<h3>Tab 1</h3>
|
||||
<p>This is the first tab's content.</p>
|
||||
</div>
|
||||
<input type="radio" name="tab-group" id="tab2" aria-hidden="true">
|
||||
<label for="tab2" aria-hidden="true">Tab 2</label>
|
||||
<div>
|
||||
<h3>Tab 2</h3>
|
||||
<p>This is the second tab's content.</p>
|
||||
</div>
|
||||
<input type="radio" name="tab-group" id="tab3" aria-hidden="true">
|
||||
<label for="tab3" aria-hidden="true">Tab 3</label>
|
||||
<div>
|
||||
<h3>Tab 3</h3>
|
||||
<p>This is the third tab's content.</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- End of page content-->
|
||||
<footer style="text-align: justify;"><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.<br/>
|
||||
|
|
|
@ -369,11 +369,12 @@
|
|||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-md-12 col-md-normal col-lg-4 col-lg-normal">
|
||||
<div class="box-centered">
|
||||
<br>
|
||||
<br />
|
||||
<div class="input-group">
|
||||
<input type="checkbox" id="switch-box" tabindex="0">
|
||||
<label for="switch-box" class="switch">Switch</label>
|
||||
</div>
|
||||
<br/>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
|
2
docs/mini-default.min.css
vendored
2
docs/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
|
@ -1251,3 +1251,4 @@
|
|||
- Updated all flavors to use (or not) `.scrollable` `table`s.
|
||||
- Added customization documentation for `.scrollable` `table`s.
|
||||
- Documented `.scrollable` `table`s everywhere.
|
||||
- Added `$tab-selected-border-color` to imbue `tabs` with a little extra style (applies only to non-`.stacked` tabs).
|
||||
|
|
|
@ -416,6 +416,7 @@ $tab-label-padding: 0.75rem; // Padding for tabs' labels
|
|||
$tab-label-height: 1.5rem; // Height for tabs' labels
|
||||
$tab-border-style: $_1px solid #757575;// Border style for tabs
|
||||
$tab-border-radius: 0; // Border radius for tabs
|
||||
$tab-selected-border-color: #0277bd; // Selected tab's bottom border color
|
||||
$tab-panel-back-color: #232e33; // Background color for tabs' panels
|
||||
$tab-panel-fore-color: $fore-color; // Text color for tabs' panels
|
||||
$tab-panel-padding: 0.5rem; // Padding for tabs' panels
|
||||
|
|
|
@ -414,8 +414,9 @@ $tab-label-selected-fore-color: $fore-color; // Text color for open tab's lab
|
|||
$tab-label-hover-opacity: 0.8; // Opacity of the tab's label on hover
|
||||
$tab-label-padding: 0.75rem; // Padding for tabs' labels
|
||||
$tab-label-height: 1.5rem; // Height for tabs' labels
|
||||
$tab-border-style: $_1px solid #bdbdbd; // Border style for tabs
|
||||
$tab-border-style: $_1px solid #bdbdbd;// Border style for tabs
|
||||
$tab-border-radius: 0; // Border radius for tabs
|
||||
$tab-selected-border-color: #0277bd; // Selected tab's bottom border color
|
||||
$tab-panel-back-color: #fafafa; // Background color for tabs' panels
|
||||
$tab-panel-fore-color: $fore-color; // Text color for tabs' panels
|
||||
$tab-panel-padding: 0.5rem; // Padding for tabs' panels
|
||||
|
|
|
@ -430,6 +430,7 @@ $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-selected-border-color: #5E81AC; // Selected tab's bottom border color
|
||||
$tab-panel-back-color: #ECEFF4; // Background color for tabs' panels
|
||||
$tab-panel-fore-color: $fore-color; // Text color for tabs' panels
|
||||
$tab-panel-padding: 8px; // Padding for tabs' panels
|
||||
|
|
|
@ -405,6 +405,7 @@ $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-selected-border-color: #6979c6; // Selected tab's bottom border color
|
||||
$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
|
||||
|
|
|
@ -117,6 +117,7 @@ $fore-color: black !default; // [External variable - core] Foreground
|
|||
@if $tab-label-selected-fore-color != $tab-label-fore-color {
|
||||
color: $tab-label-selected-fore-color;
|
||||
}
|
||||
border-bottom-color: $tab-selected-border-color;
|
||||
}
|
||||
// Tab content styling (open tab)
|
||||
& > :checked + label + div {
|
||||
|
@ -170,8 +171,11 @@ $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
|
||||
& > :checked + label {
|
||||
& > :checked + label {
|
||||
@if $tab-border-style != 0 {
|
||||
border: $tab-border-style;
|
||||
}
|
||||
@if $tab-border-radius != 0 {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
@ -225,8 +229,11 @@ $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
|
||||
& > :checked + label {
|
||||
& > :checked + label {
|
||||
@if $tab-border-style != 0 {
|
||||
border: $tab-border-style;
|
||||
}
|
||||
@if $tab-border-radius != 0 {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue