Use <button> for menu bar (#523)

This commit is contained in:
Mario Nebl 2018-01-04 10:19:20 +01:00 committed by Michael Bryan
parent e74c376833
commit 7c81335c9a
4 changed files with 81 additions and 7 deletions

View File

@ -145,7 +145,8 @@ table thead td {
position: relative;
height: 50px;
}
.menu-bar i {
.menu-bar i,
.menu-bar .icon-button {
position: relative;
margin: 0 10px;
z-index: 10;
@ -156,7 +157,8 @@ table thead td {
-ms-transition: color 0.5s;
transition: color 0.5s;
}
.menu-bar i:hover {
.menu-bar i:hover,
.menu-bar .icon-button:hover {
cursor: pointer;
}
.menu-bar .left-buttons {
@ -322,10 +324,12 @@ table thead td {
.light .nav-chapters:visited,
.light .mobile-nav-chapters,
.light .mobile-nav-chapters:visited,
.light .menu-bar .icon-button,
.light .menu-bar a i {
color: #ccc;
}
.light .menu-bar i:hover,
.light .menu-bar .icon-button:hover,
.light .nav-chapters:hover,
.light .mobile-nav-chapters i:hover {
color: #333;
@ -405,6 +409,15 @@ table thead td {
.light pre > .result {
margin-top: 10px;
}
.light .icon-button {
border: none;
background: none;
padding: 0;
color: inherit;
}
.light .icon-button i {
margin: 0;
}
.coal {
color: #98a3ad;
background-color: #141617;
@ -443,10 +456,12 @@ table thead td {
.coal .nav-chapters:visited,
.coal .mobile-nav-chapters,
.coal .mobile-nav-chapters:visited,
.coal .menu-bar .icon-button,
.coal .menu-bar a i {
color: #43484d;
}
.coal .menu-bar i:hover,
.coal .menu-bar .icon-button:hover,
.coal .nav-chapters:hover,
.coal .mobile-nav-chapters i:hover {
color: #b3c0cc;
@ -526,6 +541,15 @@ table thead td {
.coal pre > .result {
margin-top: 10px;
}
.coal .icon-button {
border: none;
background: none;
padding: 0;
color: inherit;
}
.coal .icon-button i {
margin: 0;
}
.navy {
color: #bcbdd0;
background-color: #161923;
@ -564,10 +588,12 @@ table thead td {
.navy .nav-chapters:visited,
.navy .mobile-nav-chapters,
.navy .mobile-nav-chapters:visited,
.navy .menu-bar .icon-button,
.navy .menu-bar a i {
color: #737480;
}
.navy .menu-bar i:hover,
.navy .menu-bar .icon-button:hover,
.navy .nav-chapters:hover,
.navy .mobile-nav-chapters i:hover {
color: #b7b9cc;
@ -647,6 +673,15 @@ table thead td {
.navy pre > .result {
margin-top: 10px;
}
.navy .icon-button {
border: none;
background: none;
padding: 0;
color: inherit;
}
.navy .icon-button i {
margin: 0;
}
.rust {
color: #262625;
background-color: #e1e1db;
@ -685,10 +720,12 @@ table thead td {
.rust .nav-chapters:visited,
.rust .mobile-nav-chapters,
.rust .mobile-nav-chapters:visited,
.rust .menu-bar .icon-button,
.rust .menu-bar a i {
color: #737480;
}
.rust .menu-bar i:hover,
.rust .menu-bar .icon-button:hover,
.rust .nav-chapters:hover,
.rust .mobile-nav-chapters i:hover {
color: #262625;
@ -768,6 +805,15 @@ table thead td {
.rust pre > .result {
margin-top: 10px;
}
.rust .icon-button {
border: none;
background: none;
padding: 0;
color: inherit;
}
.rust .icon-button i {
margin: 0;
}
.ayu {
color: #c5c5c5;
background-color: #0f1419;
@ -806,10 +852,12 @@ table thead td {
.ayu .nav-chapters:visited,
.ayu .mobile-nav-chapters,
.ayu .mobile-nav-chapters:visited,
.ayu .menu-bar .icon-button,
.ayu .menu-bar a i {
color: #737480;
}
.ayu .menu-bar i:hover,
.ayu .menu-bar .icon-button:hover,
.ayu .nav-chapters:hover,
.ayu .mobile-nav-chapters i:hover {
color: #b7b9cc;
@ -889,6 +937,15 @@ table thead td {
.ayu pre > .result {
margin-top: 10px;
}
.ayu .icon-button {
border: none;
background: none;
padding: 0;
color: inherit;
}
.ayu .icon-button i {
margin: 0;
}
@media only print {
#sidebar,
#menu-bar,

View File

@ -78,15 +78,19 @@
{{> header}}
<div id="menu-bar" class="menu-bar">
<div class="left-buttons">
<i id="sidebar-toggle" class="fa fa-bars" title="Toggle sidebar"></i>
<i id="theme-toggle" class="fa fa-paint-brush" title="Change theme"></i>
<button id="sidebar-toggle" class="icon-button" type="button" title="Toggle sidebar">
<i class="fa fa-bars"></i>
</button>
<button id="theme-toggle" class="icon-button" type="button" title="Change theme">
<i class="fa fa-paint-brush"></i>
</button>
</div>
<h1 class="menu-title">{{ book_title }}</h1>
<div class="right-buttons">
<a href="print.html">
<i id="print-button" class="fa fa-print" title="Print this book"></i>
<a href="print.html" title="Print this book">
<i id="print-button" class="fa fa-print"></i>
</a>
</div>
</div>

View File

@ -2,7 +2,7 @@
position: relative
height: 50px
i {
i, .icon-button {
position: relative
margin: 0 10px
z-index: 10

View File

@ -39,11 +39,13 @@
.nav-chapters:visited,
.mobile-nav-chapters,
.mobile-nav-chapters:visited,
.menu-bar .icon-button,
.menu-bar a i {
color: $icons
}
.menu-bar i:hover,
.menu-bar .icon-button:hover,
.nav-chapters:hover,
.mobile-nav-chapters i:hover {
color: $icons-hover
@ -132,4 +134,15 @@
& > .result { margin-top: 10px; }
}
.icon-button {
border: none;
background: none;
padding: 0;
color: inherit;
i {
margin: 0;
}
}
}