ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-12-22 17:33:14 +01:00
Code Issues Releases Wiki Activity

Fix Navbar and notification list styling

Browse Source
This commit is contained in:
Brett Sun 2016-06-08 17:43:07 +02:00
parent 9ffa834ec0
commit 4fd0e0d99c
5 changed files with 152 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
js/components/header_notifications.js
View File

@ -97,7 +97,7 @@ let HeaderNotifications = React.createClass({
}
return (
<Nav navbar pullRight>
<Nav navbar pullRight className="notification-menu">
<DropdownButton
ref='dropdownButton'
id="header-notification-dropdown"
@ -107,8 +107,7 @@ let HeaderNotifications = React.createClass({
<Glyphicon glyph='envelope' color="green"/>
<span className="notification-amount">({numNotifications})</span>
</span>
}
className="notification-menu">
}>
{this.renderNotifications({ notifications: pieceListNotifications, isPiece: true })}
{this.renderNotifications({ notifications: editionListNotifications, isPiece: false })}
</DropdownButton>

126
sass/ascribe_custom_style.scss
View File

@ -17,132 +17,6 @@ hr {
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 {
font-size: 1.2em;
font-weight: $ascribe--font-weight-light;

137
sass/ascribe_navbar.scss
View File

@ -1,4 +1,7 @@
.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-color: #ccc;
border-left: 0;
@ -6,6 +9,140 @@
border-top: 0;
font-size: .8em;
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 {

19
sass/ascribe_notification_list.scss
View File

@ -1,7 +1,3 @@
$break-small: 764px;
$break-medium: 991px;
$break-medium: 1200px;
.notification-header, .notification-wrapper {
min-width: 350px;
width: 100%;
@ -54,20 +50,19 @@ $break-medium: 1200px;
white-space: nowrap;
}
.notification-action {
color: $ascribe-dark-blue;
color: $ascribe-pink;
}
}
.notification-menu {
.dropdown-menu {
padding: 0 !important;
li a {
padding-top: 0;
}
.notification-menu .dropdown-menu {
background-color: white;
border-top: 0;
max-height: 70vh;
overflow-y: auto;
overflow-x: hidden;
max-height: 70vh;
li:hover {
background-color: $ascribe-white;
}
}

15
sass/whitelabel/wallet/ikonotv/ikonotv_custom_style.scss
View File

@ -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:focus {
background-color: rgba(255, 255, 255, 0.1);