diff --git a/client/views/notifications/notifications.html b/client/views/notifications/notifications.html
index f188e65a2..f9a4f3a29 100644
--- a/client/views/notifications/notifications.html
+++ b/client/views/notifications/notifications.html
@@ -2,7 +2,6 @@
{{#if currentUser}}
{{#if canPost}}
+ {{notification_count}}
{{/if}}
{{/if}}
\ No newline at end of file
diff --git a/packages/telescope-theme-hubble/lib/client/sass/modules/_header.scss b/packages/telescope-theme-hubble/lib/client/sass/modules/_header.scss
new file mode 100644
index 000000000..15c2d41d5
--- /dev/null
+++ b/packages/telescope-theme-hubble/lib/client/sass/modules/_header.scss
@@ -0,0 +1,183 @@
+// .header{
+// background:url("../images/bg-black.png") top center;
+// }
+// @media only screen and (-webkit-min-device-pixel-ratio: 1.5){
+// .header{
+// background:url("../images/bg-black@2x.png") top center;
+// background-size:10px 10px;
+// }
+// }
+.header{
+ background:$highlight-color url("/img/bg-header.png") top center;
+ background-color:$highlight-color;
+ margin-bottom:$grid-margin;
+ height:$grid-unit;
+ position:relative;
+ @include cf;
+ border-radius: 0 0 3px 3px;
+ .site-nav{
+ float:left;
+ margin-left:20px;
+ position:relative;
+ z-index:20;
+ }
+ .logo{
+ position:absolute;
+ display:inline-block;
+ text-align:center;
+ top:10px;
+ left:0px;
+ width:100%;
+ color:white;
+ font-size:24px;
+ a, a:visited{
+ color:white;
+ }
+ &.image{
+ position:absolute;
+ left:50%;
+ a{
+ display:block;
+ height:100%;
+ width:100%;
+ background: no-repeat center center;
+ font: 0/0 a;
+ text-shadow: none;
+ color: transparent;
+ }
+ }
+ }
+ .user-nav{
+ float:right;
+ margin-right:10px;
+ position:relative;
+ z-index:20;
+ .submit{
+ // background:$red;
+ // display:block;
+ // padding:0px 10px;
+ }
+ }
+}
+// @media only screen and (-webkit-min-device-pixel-ratio: 1.5){
+// .header{
+// // background-image:url("/img/bg-header@2x.png");
+// // background-size: 10px 10px;
+// .logo a{
+// background-image: url('/img/logo@2x.png');
+// background-size: 124px 37px;
+// }
+// }
+// }
+.auth-buttons{
+ position:relative;
+ z-index:20;
+ float:right;
+ margin:20px 10px 0 0;
+ #login-buttons{
+ position:relative;
+ line-height:26px;
+ .accounts-dialog{
+ @extend .popover;
+ }
+ .account-link{
+ display:block;
+ color:white !important;
+ margin-bottom:10px;
+ float:none;
+ }
+ a{
+ text-decoration:none;
+ color:$text;
+ }
+ a.login-link-text{
+ color:#fff;
+ font-weight:normal;
+ display:inline-block;
+ height:26px;
+ }
+ #login-buttons-password{
+ @extend .button;
+ float:none !important;
+ @include text-shadow(none);
+ width:auto;
+ line-height:1.5;
+ height:26px;
+ margin:10px 0 !important;
+ }
+ .login-header{
+ font-family:inherit;
+ height:26px;
+ margin-right:10px;
+ cursor:pointer;
+ color:white;
+ &:before{
+ color:white(0.5);
+ content:"Welcome, ";
+ }
+ }
+ #login-buttons-logout{
+ color:white;
+ // background:none;
+ border:none;
+ font-family:inherit;
+ font-size:inherit;
+ padding:0;
+ height:26px;
+ text-shadow:none;
+ }
+ }
+}
+.nav{
+ @include cf;
+ margin-top:20px;
+ >li{
+ @include horizontal-list-item;
+ margin-right:10px;
+
+ >a, >div >a{
+ color:white;
+ font-size:16px;
+ line-height:26px;
+ height:26px;
+ font-weight:normal;
+
+ &.intercom em{
+ &:before{
+ content:'(';
+ }
+ &:after{
+ content:')';
+ }
+ }
+ }
+ }
+}
+.search{
+ position: relative;
+ .search-field{
+ font-size: 14px;
+ padding: 4px 12px;
+ line-height: 1.3;
+ border-radius: 20px;
+ border: 0px;
+ width: 100px;
+ -webkit-transition: 0.2s all;
+ -moz-transition: 0.2s all;
+ background: white;
+ &:focus{
+ outline:none;
+ }
+ }
+ &.empty{
+ .search-field{
+ background: white(0.1);
+ &:focus{
+ background: white;
+ }
+ }
+ .search-clear{
+ display: none;
+ }
+ }
+}
diff --git a/packages/telescope-theme-hubble/lib/client/sass/modules/_notifications.scss b/packages/telescope-theme-hubble/lib/client/sass/modules/_notifications.scss
index 6dd89f11d..70fdae2ce 100644
--- a/packages/telescope-theme-hubble/lib/client/sass/modules/_notifications.scss
+++ b/packages/telescope-theme-hubble/lib/client/sass/modules/_notifications.scss
@@ -1,3 +1,5 @@
+$notifications-width: 260px;
+
.notifications{
@include small{
margin-bottom: 10px;
@@ -11,12 +13,12 @@
@include medium-large{
position:fixed;
height:100%;
- width:260px;
+ width:$notifications-width;
top:0px;
- left:-260px;
+ left:-$notifications-width;
}
background:#f3f3f3;
- @include single-transition(ease-out, left, 400ms, 0ms);
+ @include single-transition(left, 400ms, ease-out, 0ms);
z-index: 1000;
.mark-as-read{
display:block;
@@ -54,12 +56,13 @@
}
.notifications-toggle{
+ @include single-transition(left, 400ms, ease-out, 0ms);
@include small{
display: none;
}
display:block;
position:absolute;
- left:260px;
+ left:0px;
top:80px;
white-space:nowrap;
background:white;
@@ -74,6 +77,8 @@
color:$light-text;
}
.notifications-open &{
+ @include box-shadow(0 1px 1px black(0.15));
+ left: $notifications-width;
background: white;
color: $text;
}
diff --git a/packages/telescope-theme-hubble/lib/client/sass/partials/_dropdown.scss b/packages/telescope-theme-hubble/lib/client/sass/partials/_dropdown.scss
index e9975a22f..622a1735f 100644
--- a/packages/telescope-theme-hubble/lib/client/sass/partials/_dropdown.scss
+++ b/packages/telescope-theme-hubble/lib/client/sass/partials/_dropdown.scss
@@ -12,11 +12,11 @@
}
.dropdown-menu{
display:none;
- top:10px;
+ top:20px;
left:10px;
position:absolute;
- padding-top:20px;
- z-index: 1000;
+ padding-top:10px;
+ z-index: 10000;
ul{
background:white;
padding:10px;
diff --git a/packages/telescope-theme-hubble/lib/client/stylesheets/screen.css b/packages/telescope-theme-hubble/lib/client/stylesheets/screen.css
index 1577ee6db..fec2c1793 100644
--- a/packages/telescope-theme-hubble/lib/client/stylesheets/screen.css
+++ b/packages/telescope-theme-hubble/lib/client/stylesheets/screen.css
@@ -489,11 +489,11 @@ body.pageslide-open {
/* line 13, ../sass/partials/_dropdown.scss */
.has-dropdown .dropdown .dropdown-menu {
display: none;
- top: 10px;
+ top: 20px;
left: 10px;
position: absolute;
- padding-top: 20px;
- z-index: 1000; }
+ padding-top: 10px;
+ z-index: 10000; }
/* line 20, ../sass/partials/_dropdown.scss */
.has-dropdown .dropdown .dropdown-menu ul {
background: white;
@@ -1745,34 +1745,34 @@ table {
background: #f36c3d;
color: white; }
-/* line 1, ../sass/modules/_notifications.scss */
+/* line 3, ../sass/modules/_notifications.scss */
.notifications {
background: #f3f3f3;
- -moz-transition: ease-out left 400ms 0ms;
- -o-transition: ease-out left 400ms 0ms;
- -webkit-transition: ease-out left 400ms;
+ -moz-transition: left 400ms ease-out 0ms;
+ -o-transition: left 400ms ease-out 0ms;
+ -webkit-transition: left 400ms ease-out;
-webkit-transition-delay: 0ms;
- transition: ease-out left 400ms 0ms;
+ transition: left 400ms ease-out 0ms;
z-index: 1000; }
@media screen and (max-width: 30em) {
- /* line 1, ../sass/modules/_notifications.scss */
+ /* line 3, ../sass/modules/_notifications.scss */
.notifications {
margin-bottom: 10px; }
- /* line 4, ../sass/modules/_notifications.scss */
+ /* line 6, ../sass/modules/_notifications.scss */
.notifications.no-notifications {
display: none; }
- /* line 7, ../sass/modules/_notifications.scss */
+ /* line 9, ../sass/modules/_notifications.scss */
.notifications .read {
display: none; } }
@media screen and (min-width: 30em) {
- /* line 1, ../sass/modules/_notifications.scss */
+ /* line 3, ../sass/modules/_notifications.scss */
.notifications {
position: fixed;
height: 100%;
width: 260px;
top: 0px;
left: -260px; } }
- /* line 21, ../sass/modules/_notifications.scss */
+ /* line 23, ../sass/modules/_notifications.scss */
.notifications .mark-as-read {
display: block;
text-align: center;
@@ -1780,39 +1780,44 @@ table {
font-size: 13px;
border-bottom: 1px solid #dfdbdb;
background: #f3f3f3; }
- /* line 28, ../sass/modules/_notifications.scss */
+ /* line 30, ../sass/modules/_notifications.scss */
.notifications .mark-as-read:link, .notifications .mark-as-read:visited {
color: #7ac0e4; }
- /* line 32, ../sass/modules/_notifications.scss */
+ /* line 34, ../sass/modules/_notifications.scss */
.notifications ul {
height: 100%;
overflow: auto; }
- /* line 35, ../sass/modules/_notifications.scss */
+ /* line 37, ../sass/modules/_notifications.scss */
.notifications ul li {
padding: 10px;
border-bottom: 1px solid #dfdbdb;
font-size: 13px;
background: white; }
- /* line 40, ../sass/modules/_notifications.scss */
+ /* line 42, ../sass/modules/_notifications.scss */
.notifications ul li .notification-timestamp {
color: #b3c1c6;
font-size: 12px; }
- /* line 44, ../sass/modules/_notifications.scss */
+ /* line 46, ../sass/modules/_notifications.scss */
.notifications ul li.read {
color: #b3c1c6;
background: #f3f3f3; }
- /* line 50, ../sass/modules/_notifications.scss */
+ /* line 52, ../sass/modules/_notifications.scss */
.notifications-open .notifications {
left: 0px;
-moz-box-shadow: 1px 0px 1px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 1px 0px 1px rgba(0, 0, 0, 0.15);
box-shadow: 1px 0px 1px rgba(0, 0, 0, 0.15); }
-/* line 56, ../sass/modules/_notifications.scss */
+/* line 58, ../sass/modules/_notifications.scss */
.notifications-toggle {
+ -moz-transition: left 400ms ease-out 0ms;
+ -o-transition: left 400ms ease-out 0ms;
+ -webkit-transition: left 400ms ease-out;
+ -webkit-transition-delay: 0ms;
+ transition: left 400ms ease-out 0ms;
display: block;
position: absolute;
- left: 260px;
+ left: 0px;
top: 80px;
white-space: nowrap;
background: white;
@@ -1826,18 +1831,22 @@ table {
font-size: 13px;
z-index: 10; }
@media screen and (max-width: 30em) {
- /* line 56, ../sass/modules/_notifications.scss */
+ /* line 58, ../sass/modules/_notifications.scss */
.notifications-toggle {
display: none; } }
- /* line 71, ../sass/modules/_notifications.scss */
+ /* line 74, ../sass/modules/_notifications.scss */
.notifications-toggle.no-notifications {
background: rgba(255, 255, 255, 0.3);
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
color: #b3c1c6; }
- /* line 76, ../sass/modules/_notifications.scss */
+ /* line 79, ../sass/modules/_notifications.scss */
.notifications-open .notifications-toggle {
+ -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
+ -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
+ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
+ left: 260px;
background: white;
color: #4a4444; }