Remove some !important declarations

Relates to b071548

- Fixes an issue where the menu button would be the wrong colour

The navigation was using `!important` in a few places. I've changed the CSS a bit to no longer need these, but that means I've made some selectors slightly more specific.

The use of `!important` was to get around the hover state being persisted when the menu was opened but the mouse hadn't moved, which meant the menu button kept its white background when it should be black.
iMaking the hover state only apply when the nav is closed, gets around that.
This commit is contained in:
Paul Adam Davis 2015-03-23 22:26:11 +00:00
parent b071548965
commit 4f1c76f2e7

View File

@ -689,7 +689,7 @@ body.nav-opened .nav {
right: 30px; right: 30px;
height: 38px; height: 38px;
padding: 0 20px; padding: 0 20px;
color: #111 !important; color: #111 !important; /* Overides `.nav a:link, .nav a:visited` colour */
text-align: center; text-align: center;
font-size: 12px; font-size: 12px;
font-family: "Open Sans", sans-serif; font-family: "Open Sans", sans-serif;
@ -757,12 +757,12 @@ body.nav-opened .nav {
display: none display: none
} }
/* Appears in the top right corner of your home page */ /* Appears in the top left corner of your home page */
.blog-logo { .blog-logo {
display: block; display: block;
float: left; float: left;
background: none !important; background: none !important; /* Makes sure there is never a background */
border: none !important; border: none !important; /* Makes sure there is never a border */
} }
.blog-logo img { .blog-logo img {
@ -783,42 +783,63 @@ body.nav-opened .nav {
float: right; float: right;
height: 38px; height: 38px;
padding: 0 15px; padding: 0 15px;
border: #bfc8cd 1px solid; border-style: solid;
border-width: 1px;
opacity: 1; opacity: 1;
color: #9EABB3;
text-align: center; text-align: center;
font-size: 12px; font-size: 12px;
text-transform: uppercase; text-transform: uppercase;
line-height: 35px; line-height: 35px;
white-space: nowrap; white-space: nowrap;
border-radius: 3px; border-radius: 3px;
background: rgba(0,0,0,0.1);
transition: all 0.5s ease; transition: all 0.5s ease;
} }
.menu-button:before { .menu-button:before {
font-size: 12px; font-size: 12px;
font-weight: bold; font-weight: bold;
margin-right: 6px; margin-right: 6px;
color: #fff !important;
position: relative; position: relative;
top: 1px; top: 1px;
transition: all 0.5s ease; }
.menu-button:hover {
background: #fff;
} }
.menu-button:focus { .menu-button:focus {
outline: 0; outline: 0;
} }
body.nav-opened .menu-button { /* When the navigation is closed */
.nav-closed .menu-button {
color: #fff;
border-color: rgba(255, 255, 255, 0.6);
}
.nav-closed .menu-button:hover {
color: #222;
}
/* When the navigation is closed and there is no cover image */
.nav-closed .no-cover .menu-button {
border-color: #BFC8CD;
color: #9EABB3;
}
.nav-closed .no-cover .menu-button:hover {
border-color: #555;
color: #555;
}
/* When the navigation is opened */
.nav-opened .menu-button {
padding: 0 12px; padding: 0 12px;
background: #111 !important; background: #111;
border-color: #111 !important; border-color: #111;
color: #fff !important; color: #fff;
-webkit-transform: translate3D(94px, 0, 0); -webkit-transform: translate3D(94px, 0, 0);
-ms-transform: translate3D(94px, 0, 0); -ms-transform: translate3D(94px, 0, 0);
transform: translate3D(94px, 0, 0); transform: translate3D(94px, 0, 0);
transition: all 0.3s ease; transition: all 0.3s ease;
} }
body.nav-opened .menu-button .word {
.nav-opened .menu-button .word {
opacity: 0; opacity: 0;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
@ -833,34 +854,10 @@ body.nav-opened .menu-button .word {
border: none; border: none;
background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 100%);
} }
.no-cover .main-nav.overlay, .no-cover .main-nav.overlay {
.no-cover .menu-button {
background: none; background: none;
} }
.main-nav.overlay a {
color: #fff;
}
.main-nav.overlay .menu-button {
border-color: rgba(255,255,255,0.6);
}
.main-nav.overlay a:hover {
color: #222;
border-color: #fff;
background: #fff;
}
.main-nav.overlay a:hover:before {
color: #222;
}
/* Add a border to the buttons on hover */
.menu-button:hover {
border-color: #555;
color: #555;
}
/* The details of your blog. Defined in ghost/settings/ */ /* The details of your blog. Defined in ghost/settings/ */
.page-title { .page-title {
margin: 10px 0 10px 0; margin: 10px 0 10px 0;
@ -895,11 +892,6 @@ body.nav-opened .menu-button .word {
color: rgba(0,0,0,0.5); color: rgba(0,0,0,0.5);
} }
.no-cover .main-nav.overlay .menu-button {
color: rgba(0,0,0,0.4);
border-color: rgba(0,0,0,0.3);
}
/* Add subtle load-in animation for content on the home page */ /* Add subtle load-in animation for content on the home page */
.home-template .page-title { .home-template .page-title {
-webkit-animation: fade-in-down 0.6s; -webkit-animation: fade-in-down 0.6s;
@ -1637,8 +1629,8 @@ body:not(.post-template) .post-title {
background: none; background: none;
} }
body.nav-opened .menu-button { body.nav-opened .menu-button {
background: none !important; background: none;
border: transparent !important; border: transparent;
} }
.main-nav.overlay a:hover { .main-nav.overlay a:hover {