refactoring

This commit is contained in:
Devaev Maxim 2020-07-18 18:19:57 +03:00
parent b62271c112
commit faedb829b9
4 changed files with 10 additions and 10 deletions

View File

@ -1188,7 +1188,7 @@
</td> </td>
</tr> </tr>
</table><br> </table><br>
<div class="tabs"> <div class="tabs-box">
<input checked type="radio" name="about-tab-button" id="about-tab-meta-button"> <input checked type="radio" name="about-tab-button" id="about-tab-meta-button">
<label for="about-tab-meta-button">Meta</label> <label for="about-tab-meta-button">Meta</label>
<div class="tab"> <div class="tab">

View File

@ -20,7 +20,7 @@ mixin about_tab(name, title, checked=false)
tr #[td(colspan="2" class="title") Open Source &amp; Open Hardware IP-KVM] tr #[td(colspan="2" class="title") Open Source &amp; Open Hardware IP-KVM]
tr #[td(colspan="2" class="copyright") Copyright &copy; 2018 Pi-KVM Developers Team] tr #[td(colspan="2" class="copyright") Copyright &copy; 2018 Pi-KVM Developers Team]
br br
div(class="tabs") div(class="tabs-box")
+about_tab("meta", "Meta", true) +about_tab("meta", "Meta", true)
+about_tab("hw", "Hardware") +about_tab("hw", "Hardware")
+about_tab("version", "Version") +about_tab("version", "Version")

View File

@ -41,6 +41,6 @@ div#about td.copyright {
font-size: 0.8em; font-size: 0.8em;
} }
div#about div.tabs div.tab div.code { div#about div.tabs-box div.tab div.code {
height: 250px; height: 250px;
} }

View File

@ -20,16 +20,16 @@
*****************************************************************************/ *****************************************************************************/
div.tabs { div.tabs-box {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
div.tabs input[type="radio"] { div.tabs-box input[type="radio"] {
display: none; display: none;
} }
div.tabs div.tab { div.tabs-box div.tab {
order: 99; order: 99;
display: none; display: none;
border: var(--border-default-thin); border: var(--border-default-thin);
@ -37,7 +37,7 @@ div.tabs div.tab {
width: 100%; width: 100%;
} }
div.tabs label { div.tabs-box label {
order: 1; order: 1;
display: block; display: block;
text-align: center; text-align: center;
@ -51,14 +51,14 @@ div.tabs label {
top: 1px; top: 1px;
} }
div.tabs label:last-of-type { div.tabs-box label:last-of-type {
border-right: var(--border-default-thin); border-right: var(--border-default-thin);
} }
div.tabs input[type="radio"]:checked+label { div.tabs-box input[type="radio"]:checked+label {
background-color: var(--cs-control-default-bg); background-color: var(--cs-control-default-bg);
} }
div.tabs input[type="radio"]:checked+label+.tab { div.tabs-box input[type="radio"]:checked+label+.tab {
display: block; display: block;
} }