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

Updated tab styling

Browse source 
Added a bottom border for selected tabs.
This commit is contained in:
Angelos Chalaris 2017-06-09 14:21:25 +03:00
parent b01be57873
commit 7af521f9a6
18 changed files with 75 additions and 138 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
dist/mini-dark.css vendored
View file

@ -1751,6 +1751,7 @@ table.striped tr:nth-of-type(2n) > td {
.tabs > :checked + label { .tabs > :checked + label {
background: #263238; background: #263238;
border-bottom-color: #0277bd;
} }
.tabs > :checked + label:hover, .tabs > :checked + label:focus { .tabs > :checked + label:hover, .tabs > :checked + label:focus {
@ -1785,6 +1786,10 @@ table.striped tr:nth-of-type(2n) > td {
order: initial; order: initial;
} }
.tabs.stacked > :checked + label {
border: 0.0625rem solid #757575;
}
.tabs.stacked > label + div { .tabs.stacked > label + div {
-webkit-order: initial; -webkit-order: initial;
order: initial; order: initial;
@ -1811,6 +1816,9 @@ table.striped tr:nth-of-type(2n) > td {
-webkit-order: initial; -webkit-order: initial;
order: initial; order: initial;
} }
.tabs > :checked + label {
border: 0.0625rem solid #757575;
}
.tabs > label + div { .tabs > label + div {
-webkit-order: initial; -webkit-order: initial;
order: initial; order: initial;

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

File diff suppressed because one or more lines are too long

8
dist/mini-default.css vendored
View file

@ -1751,6 +1751,7 @@ table.striped tr:nth-of-type(2n) > td {
.tabs > :checked + label { .tabs > :checked + label {
background: #eeeeee; background: #eeeeee;
border-bottom-color: #0277bd;
} }
.tabs > :checked + label:hover, .tabs > :checked + label:focus { .tabs > :checked + label:hover, .tabs > :checked + label:focus {
@ -1786,6 +1787,10 @@ table.striped tr:nth-of-type(2n) > td {
order: initial; order: initial;
} }
.tabs.stacked > :checked + label {
border: 0.0625rem solid #bdbdbd;
}
.tabs.stacked > label + div { .tabs.stacked > label + div {
-webkit-order: initial; -webkit-order: initial;
order: initial; order: initial;
@ -1812,6 +1817,9 @@ table.striped tr:nth-of-type(2n) > td {
-webkit-order: initial; -webkit-order: initial;
order: initial; order: initial;
} }
.tabs > :checked + label {
border: 0.0625rem solid #bdbdbd;
}
.tabs > label + div { .tabs > label + div {
-webkit-order: initial; -webkit-order: initial;
order: initial; order: initial;

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

File diff suppressed because one or more lines are too long

8
dist/mini-nord.css vendored
View file

@ -1771,6 +1771,7 @@ table.striped tr:nth-of-type(2n) > td {
.tabs > :checked + label { .tabs > :checked + label {
background: #4C566A; background: #4C566A;
color: #ECEFF4; color: #ECEFF4;
border-bottom-color: #5E81AC;
} }
.tabs > :checked + label:hover, .tabs > :checked + label:focus { .tabs > :checked + label:hover, .tabs > :checked + label:focus {
@ -1805,6 +1806,10 @@ table.striped tr:nth-of-type(2n) > td {
order: initial; order: initial;
} }
.tabs.stacked > :checked + label {
border: 1px solid #9e9e9e;
}
.tabs.stacked > label + div { .tabs.stacked > label + div {
-webkit-order: initial; -webkit-order: initial;
order: initial; order: initial;
@ -1831,6 +1836,9 @@ table.striped tr:nth-of-type(2n) > td {
-webkit-order: initial; -webkit-order: initial;
order: initial; order: initial;
} }
.tabs > :checked + label {
border: 1px solid #9e9e9e;
}
.tabs > label + div { .tabs > label + div {
-webkit-order: initial; -webkit-order: initial;
order: initial; order: initial;

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

File diff suppressed because one or more lines are too long

3
dist/mini-sucroa.css vendored
View file

@ -1514,6 +1514,7 @@ table.striped tr:nth-of-type(2n) > td {
.tabs > :checked + label { .tabs > :checked + label {
background: #e8deff; background: #e8deff;
border-bottom-color: #6979c6;
} }
.tabs > :checked + label:hover, .tabs > :checked + label:focus { .tabs > :checked + label:hover, .tabs > :checked + label:focus {
@ -1560,6 +1561,7 @@ table.striped tr:nth-of-type(2n) > td {
} }
.tabs.stacked > :checked + label { .tabs.stacked > :checked + label {
border: 1px solid #a9a2ba;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
@ -1605,6 +1607,7 @@ table.striped tr:nth-of-type(2n) > td {
border-bottom-right-radius: 2px; border-bottom-right-radius: 2px;
} }
.tabs > :checked + label { .tabs > :checked + label {
border: 1px solid #a9a2ba;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }

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

File diff suppressed because one or more lines are too long

4
docs/customization/tab.html
View file

@ -126,6 +126,10 @@
<td data-label="Variable">$tab-border-radius</td><td data-label="Type">Border radius</td> <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> <td data-label="Description">Border radius for tab components</td><td data-label="Sample value">2px</td>
</tr> </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> <tr>
<td data-label="Variable">$tab-label-back-color</td><td data-label="Type">Color</td> <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> <td data-label="Description">Background color for tab components' labels (default)</td><td data-label="Sample value">#e0e0e0</td>

147
docs/demo.html
View file

@ -77,133 +77,26 @@
<!-- Insert your page content here--> <!-- Insert your page content here-->
<main> <main>
<br /> <br />
<table class="scrollable"> <div class="tabs">
<caption>People</caption> <input type="radio" name="tab-group" id="tab1" checked aria-hidden="true">
<thead> <label for="tab1" aria-hidden="true">Tab 1</label>
<tr> <div>
<th>Name</th> <h3>Tab 1</h3>
<th>Surname</th> <p>This is the first tab's content.</p>
<th>Alias</th> </div>
</tr> <input type="radio" name="tab-group" id="tab2" aria-hidden="true">
</thead> <label for="tab2" aria-hidden="true">Tab 2</label>
<tbody> <div>
<tr> <h3>Tab 2</h3>
<td data-label="Name">Chad</td> <p>This is the second tab's content.</p>
<td data-label="Surname">Wilberts</td> </div>
<td data-label="Alias">MrOne</td> <input type="radio" name="tab-group" id="tab3" aria-hidden="true">
</tr> <label for="tab3" aria-hidden="true">Tab 3</label>
<tr> <div>
<td data-label="Name">Adam</td> <h3>Tab 3</h3>
<td data-label="Surname">Smith</td> <p>This is the third tab's content.</p>
<td data-label="Alias">TheSmith</td> </div>
</tr> </div>
<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>
</main> </main>
<!-- End of page content--> <!-- 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/> <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/>

3
docs/input_control.html
View file

@ -369,11 +369,12 @@
<div class="section row"> <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="col-sm-12 col-sm-last col-md-12 col-md-normal col-lg-4 col-lg-normal">
<div class="box-centered"> <div class="box-centered">
<br> <br />
<div class="input-group"> <div class="input-group">
<input type="checkbox" id="switch-box" tabindex="0"> <input type="checkbox" id="switch-box" tabindex="0">
<label for="switch-box" class="switch">Switch</label> <label for="switch-box" class="switch">Switch</label>
</div> </div>
<br/>
<br> <br>
</div> </div>
</div> </div>

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

File diff suppressed because one or more lines are too long

1
docs/v2/DEVLOG.md
View file

@ -1251,3 +1251,4 @@
- Updated all flavors to use (or not) `.scrollable` `table`s. - Updated all flavors to use (or not) `.scrollable` `table`s.
- Added customization documentation for `.scrollable` `table`s. - Added customization documentation for `.scrollable` `table`s.
- Documented `.scrollable` `table`s everywhere. - Documented `.scrollable` `table`s everywhere.
- Added `$tab-selected-border-color` to imbue `tabs` with a little extra style (applies only to non-`.stacked` tabs).

1
src/flavors/mini-dark.scss
View file

@ -416,6 +416,7 @@ $tab-label-padding: 0.75rem; // Padding for tabs' labels
$tab-label-height: 1.5rem; // Height for tabs' labels $tab-label-height: 1.5rem; // Height for tabs' labels
$tab-border-style: $_1px solid #757575;// Border style for tabs $tab-border-style: $_1px solid #757575;// Border style for tabs
$tab-border-radius: 0; // Border radius 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-back-color: #232e33; // Background color for tabs' panels
$tab-panel-fore-color: $fore-color; // Text color for tabs' panels $tab-panel-fore-color: $fore-color; // Text color for tabs' panels
$tab-panel-padding: 0.5rem; // Padding for tabs' panels $tab-panel-padding: 0.5rem; // Padding for tabs' panels

3
src/flavors/mini-default.scss
View file

@ -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-hover-opacity: 0.8; // Opacity of the tab's label on hover
$tab-label-padding: 0.75rem; // Padding for tabs' labels $tab-label-padding: 0.75rem; // Padding for tabs' labels
$tab-label-height: 1.5rem; // Height 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-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-back-color: #fafafa; // Background color for tabs' panels
$tab-panel-fore-color: $fore-color; // Text color for tabs' panels $tab-panel-fore-color: $fore-color; // Text color for tabs' panels
$tab-panel-padding: 0.5rem; // Padding for tabs' panels $tab-panel-padding: 0.5rem; // Padding for tabs' panels

1
src/flavors/mini-nord.scss
View file

@ -430,6 +430,7 @@ $tab-label-padding: 8px 12px; // Padding for tabs' labels
$tab-label-height: 26px; // Height for tabs' labels $tab-label-height: 26px; // Height for tabs' labels
$tab-border-style: 1px solid #9e9e9e; // Border style for tabs $tab-border-style: 1px solid #9e9e9e; // Border style for tabs
$tab-border-radius: 0; // Border radius 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-back-color: #ECEFF4; // Background color for tabs' panels
$tab-panel-fore-color: $fore-color; // Text color for tabs' panels $tab-panel-fore-color: $fore-color; // Text color for tabs' panels
$tab-panel-padding: 8px; // Padding for tabs' panels $tab-panel-padding: 8px; // Padding for tabs' panels

1
src/flavors/mini-sucroa.scss
View file

@ -405,6 +405,7 @@ $tab-label-padding: 10px 12px; // Padding for tabs' labels
$tab-label-height: 28px; // Height for tabs' labels $tab-label-height: 28px; // Height for tabs' labels
$tab-border-style: 1px solid #a9a2ba; // Border style for tabs $tab-border-style: 1px solid #a9a2ba; // Border style for tabs
$tab-border-radius: 2px; // Border radius 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-back-color: #eee7ff; // Background color for tabs' panels
$tab-panel-fore-color: $fore-color; // Text color for tabs' panels $tab-panel-fore-color: $fore-color; // Text color for tabs' panels
$tab-panel-padding: 10px; // Padding for tabs' panels $tab-panel-padding: 10px; // Padding for tabs' panels

15
src/mini/_tab.scss
View file

@ -117,6 +117,7 @@ $fore-color: black !default; // [External variable - core] Foreground
@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;
} }
border-bottom-color: $tab-selected-border-color;
} }
// Tab content styling (open tab) // Tab content styling (open tab)
& > :checked + label + div { & > :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-left-radius: 0;
border-bottom-right-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-left-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }