Use <button> for menu bar (#523)
This commit is contained in:
parent
e74c376833
commit
7c81335c9a
|
@ -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,
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
position: relative
|
||||
height: 50px
|
||||
|
||||
i {
|
||||
i, .icon-button {
|
||||
position: relative
|
||||
margin: 0 10px
|
||||
z-index: 10
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue