mirror of
https://github.com/ascribe/onion.git
synced 2024-06-30 21:52:08 +02:00
Fix Navbar and notification list styling
This commit is contained in:
parent
9ffa834ec0
commit
4fd0e0d99c
|
@ -97,7 +97,7 @@ let HeaderNotifications = React.createClass({
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Nav navbar pullRight>
|
<Nav navbar pullRight className="notification-menu">
|
||||||
<DropdownButton
|
<DropdownButton
|
||||||
ref='dropdownButton'
|
ref='dropdownButton'
|
||||||
id="header-notification-dropdown"
|
id="header-notification-dropdown"
|
||||||
|
@ -107,8 +107,7 @@ let HeaderNotifications = React.createClass({
|
||||||
<Glyphicon glyph='envelope' color="green"/>
|
<Glyphicon glyph='envelope' color="green"/>
|
||||||
<span className="notification-amount">({numNotifications})</span>
|
<span className="notification-amount">({numNotifications})</span>
|
||||||
</span>
|
</span>
|
||||||
}
|
}>
|
||||||
className="notification-menu">
|
|
||||||
{this.renderNotifications({ notifications: pieceListNotifications, isPiece: true })}
|
{this.renderNotifications({ notifications: pieceListNotifications, isPiece: true })}
|
||||||
{this.renderNotifications({ notifications: editionListNotifications, isPiece: false })}
|
{this.renderNotifications({ notifications: editionListNotifications, isPiece: false })}
|
||||||
</DropdownButton>
|
</DropdownButton>
|
||||||
|
|
|
@ -17,132 +17,6 @@ hr {
|
||||||
border-top: 1px solid $ascribe-blue-border;
|
border-top: 1px solid $ascribe-blue-border;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav .open > a,
|
|
||||||
.nav .open > a:hover,
|
|
||||||
.nav .open > a:focus {
|
|
||||||
border-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-default {
|
|
||||||
background-color: $ascribe--nav-bg-color;
|
|
||||||
box-shadow: 0 0 1px rgba(0,0,0,.1),
|
|
||||||
0 1px 2px rgba(0,0,0,.2);
|
|
||||||
|
|
||||||
.navbar-nav > li > a,
|
|
||||||
.navbar-nav > li > .active a {
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: $ascribe--font-weight-light;
|
|
||||||
color: $ascribe--nav-fg-prim-color;
|
|
||||||
border-bottom: 3px solid transparent;
|
|
||||||
}
|
|
||||||
.navbar-nav > li > a:hover {
|
|
||||||
color: $ascribe--nav-fg-sec-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-nav > .active a,
|
|
||||||
.navbar-nav > .active a:hover,
|
|
||||||
.navbar-nav > .active a:focus {
|
|
||||||
color: $ascribe--nav-fg-prim-color;
|
|
||||||
border-bottom-color: $ascribe--nav-fg-prim-color;
|
|
||||||
background-color: $ascribe--nav-bg-color;
|
|
||||||
font-weight: $ascribe--font-weight-light;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-nav > .active {
|
|
||||||
background-color: $ascribe--nav-bg-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-nav > .open > a,
|
|
||||||
.dropdown-menu > .active > a {
|
|
||||||
color: $ascribe--nav-fg-prim-color;
|
|
||||||
background-color: $ascribe--nav-bg-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-nav > .open > a:hover,
|
|
||||||
.navbar-nav > .open > a:focus,,
|
|
||||||
.dropdown-menu > .active > a:hover,
|
|
||||||
.dropdown-menu > .active > a:focus {
|
|
||||||
background-color: rgba($ascribe--button-default-color, .05);
|
|
||||||
}
|
|
||||||
.dropdown-menu {
|
|
||||||
background-color: $ascribe--nav-bg-color;
|
|
||||||
}
|
|
||||||
.navbar-nav > li > .dropdown-menu {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-menu > li > a {
|
|
||||||
color: $ascribe--nav-fg-prim-color;
|
|
||||||
font-weight: $ascribe--font-weight-light;
|
|
||||||
padding-bottom: 9px;
|
|
||||||
padding-top: 9px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-menu > li > a:hover,
|
|
||||||
.dropdown-menu > li > a:focus {
|
|
||||||
background-color: rgba($ascribe--button-default-color, .05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-menu > .divider {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notification-menu {
|
|
||||||
.dropdown-menu {
|
|
||||||
background-color: white;
|
|
||||||
li:hover {
|
|
||||||
background-color: $ascribe-white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.notification-action{
|
|
||||||
color: $ascribe-pink;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-brand {
|
|
||||||
font-size: 23px;
|
|
||||||
padding: 12px 15px;
|
|
||||||
|
|
||||||
.icon-ascribe-logo {
|
|
||||||
color: $ascribe--nav-fg-prim-color;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: $ascribe--nav-fg-sec-color;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
&:focus {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.img-brand {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.img-brand .navbar-brand {
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
padding-right: 120px;
|
|
||||||
padding-bottom: 36px;
|
|
||||||
padding-left: 30px;
|
|
||||||
background: transparent no-repeat center 4px;
|
|
||||||
background-size: 150px;
|
|
||||||
margin-bottom: 0;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-toggle .icon-bar {
|
|
||||||
background-color: $ascribe--nav-fg-prim-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-toggle:hover,
|
|
||||||
.navbar-toggle:focus {
|
|
||||||
background-color: $ascribe--nav-bg-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.ascribe-icon {
|
.ascribe-icon {
|
||||||
font-size: 1.2em;
|
font-size: 1.2em;
|
||||||
font-weight: $ascribe--font-weight-light;
|
font-weight: $ascribe--font-weight-light;
|
||||||
|
|
|
@ -1,4 +1,7 @@
|
||||||
.navbar-default {
|
.navbar-default {
|
||||||
|
background-color: $ascribe--nav-bg-color;
|
||||||
|
box-shadow: 0 0 1px rgba(0,0,0,.1),
|
||||||
|
0 1px 2px rgba(0,0,0,.2);
|
||||||
border: 0;
|
border: 0;
|
||||||
border-color: #ccc;
|
border-color: #ccc;
|
||||||
border-left: 0;
|
border-left: 0;
|
||||||
|
@ -6,6 +9,140 @@
|
||||||
border-top: 0;
|
border-top: 0;
|
||||||
font-size: .8em;
|
font-size: .8em;
|
||||||
margin-bottom: 1.5em;
|
margin-bottom: 1.5em;
|
||||||
|
|
||||||
|
// All Navbar buttons
|
||||||
|
.navbar-nav .dropdown .dropdown-toggle.btn,
|
||||||
|
.navbar-nav > li > a {
|
||||||
|
background-color: transparent;
|
||||||
|
border: none;
|
||||||
|
border-bottom: 3px solid transparent;
|
||||||
|
box-shadow: none;
|
||||||
|
color: $ascribe--nav-fg-prim-color;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: $ascribe--font-weight-light;
|
||||||
|
line-height: 20px;
|
||||||
|
padding: 15px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
|
||||||
|
&:focus,
|
||||||
|
&:hover {
|
||||||
|
background-color: transparent;
|
||||||
|
color: $ascribe--nav-fg-sec-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Currently active route
|
||||||
|
.navbar-nav > li.active > a {
|
||||||
|
background-color: transparent;
|
||||||
|
border-bottom-color: $ascribe--nav-fg-prim-color;
|
||||||
|
|
||||||
|
&:focus,
|
||||||
|
&:hover {
|
||||||
|
background-color: transparent;
|
||||||
|
color: $ascribe--nav-fg-prim-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Open dropdowns
|
||||||
|
.navbar-nav .open {
|
||||||
|
.dropdown-toggle.btn {
|
||||||
|
&:focus,
|
||||||
|
&:hover {
|
||||||
|
background-color: rgba($ascribe--button-default-color, .05);
|
||||||
|
color: $ascribe--nav-fg-prim-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu a {
|
||||||
|
color: $ascribe--nav-fg-prim-color;
|
||||||
|
font-weight: $ascribe--font-weight-light;
|
||||||
|
padding-bottom: 9px;
|
||||||
|
padding-top: 9px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu > .divider {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification-menu {
|
||||||
|
.dropdown-toggle.btn:focus,
|
||||||
|
.dropdown-toggle.btn:hover {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-brand {
|
||||||
|
font-size: 23px;
|
||||||
|
padding: 12px 15px;
|
||||||
|
|
||||||
|
.icon-ascribe-logo {
|
||||||
|
color: $ascribe--nav-fg-prim-color;
|
||||||
|
|
||||||
|
&:focus,
|
||||||
|
&:hover {
|
||||||
|
color: $ascribe--nav-fg-sec-color;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
&:focus {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-brand {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-toggle {
|
||||||
|
.icon-bar {
|
||||||
|
background-color: $ascribe--nav-fg-prim-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
background-color: $ascribe--nav-bg-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* For mobile toggled menu */
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
.navbar-collapse {
|
||||||
|
padding-left: 0;
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-nav {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-nav .dropdown .dropdown-toggle.btn,
|
||||||
|
.navbar-nav > li > a {
|
||||||
|
display: block;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
padding-top: 10px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-nav .open .dropdown-menu > li > a {
|
||||||
|
padding: 5px 15px 5px 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-nav .dropdown {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav .open > a,
|
||||||
|
.nav .open > a:hover,
|
||||||
|
.nav .open > a:focus {
|
||||||
|
border-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-right {
|
.navbar-right {
|
||||||
|
|
|
@ -1,7 +1,3 @@
|
||||||
$break-small: 764px;
|
|
||||||
$break-medium: 991px;
|
|
||||||
$break-medium: 1200px;
|
|
||||||
|
|
||||||
.notification-header, .notification-wrapper {
|
.notification-header, .notification-wrapper {
|
||||||
min-width: 350px;
|
min-width: 350px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -54,20 +50,19 @@ $break-medium: 1200px;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
.notification-action {
|
.notification-action {
|
||||||
color: $ascribe-dark-blue;
|
color: $ascribe-pink;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.notification-menu {
|
.notification-menu .dropdown-menu {
|
||||||
.dropdown-menu {
|
background-color: white;
|
||||||
padding: 0 !important;
|
|
||||||
li a {
|
|
||||||
padding-top: 0;
|
|
||||||
}
|
|
||||||
border-top: 0;
|
border-top: 0;
|
||||||
|
max-height: 70vh;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
max-height: 70vh;
|
|
||||||
|
li:hover {
|
||||||
|
background-color: $ascribe-white;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -86,21 +86,6 @@ $ikono--font: 'Helvetica Neue', 'Helvetica', sans-serif !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.img-brand.navbar-brand {
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
padding-right: 120px;
|
|
||||||
padding-bottom: 36px;
|
|
||||||
padding-left: 30px;
|
|
||||||
background-image: url($ikono--logo);
|
|
||||||
background-color: transparent;
|
|
||||||
background-position: center 4px;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: 150px;
|
|
||||||
margin-bottom: 0;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-toggle:hover,
|
.navbar-toggle:hover,
|
||||||
.navbar-toggle:focus {
|
.navbar-toggle:focus {
|
||||||
background-color: rgba(255, 255, 255, 0.1);
|
background-color: rgba(255, 255, 255, 0.1);
|
||||||
|
|
Loading…
Reference in New Issue
Block a user