diff --git a/components/css/buckyless/search.less b/components/css/buckyless/search.less index 030d86175..0b0ba6cd7 100644 --- a/components/css/buckyless/search.less +++ b/components/css/buckyless/search.less @@ -97,12 +97,15 @@ search { &.myuw-search__mobile { height: 56px; max-width: 100%; - width: 100%; + width: 0; + //opacity: 0; position: absolute; right: 0; top: 0; padding: 6px 4px; z-index: 80; + overflow: hidden; + transition: @transition-width; .md-button { min-height: 44px; @@ -126,9 +129,11 @@ search { md-input-container { margin: 0; padding: 0; + opacity: 0; height: 100%; background-color: @white; border-radius: 5px; + transition: @transition-opacity-fast; input.md-input { margin: 0 40px; @@ -141,6 +146,15 @@ search { } } } + + &.search-expanded { + opacity: 1; + width: 100%; + + md-input-container { + opacity: 1; + } + } } } } diff --git a/components/css/themes/common-variables.less b/components/css/themes/common-variables.less index 3e7d0c347..b7193e045 100644 --- a/components/css/themes/common-variables.less +++ b/components/css/themes/common-variables.less @@ -60,7 +60,9 @@ */ @background-transition: background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); @transition-height: height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); +@transition-width: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); @transition-opacity: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); +@transition-opacity-fast: opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); @transition-all: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); @transition-color: color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); diff --git a/components/portal/messages/controllers.js b/components/portal/messages/controllers.js index 8e852febf..c812946c1 100644 --- a/components/portal/messages/controllers.js +++ b/components/portal/messages/controllers.js @@ -153,6 +153,8 @@ define(['angular'], function(angular) { vm.notificationsUrl = MESSAGES.notificationsPageURL; vm.status = 'View notifications'; vm.isLoading = true; + vm.isNotificationsPage = + ($location.path() == MESSAGES.notificationsPageURL); // ////////////////// // Event listeners // diff --git a/components/portal/messages/partials/notifications-bell.html b/components/portal/messages/partials/notifications-bell.html index 118b69ea7..f54ec8295 100644 --- a/components/portal/messages/partials/notifications-bell.html +++ b/components/portal/messages/partials/notifications-bell.html @@ -21,7 +21,7 @@
+ ng-show="directiveMode === 'mobile-bell' && vm.notifications.length !== 0 && !vm.isNotificationsPage"> notifications
@@ -33,13 +33,14 @@ ng-click="vm.pushGAEvent('Mobile Menu', 'Click Link', 'Notifications');" layout="row" layout-align="start center"> notifications - Notifications ({{ vm.notifications.length }}) + Notifications + ({{ vm.notifications.length }}) -
+