summaryrefslogtreecommitdiffstats
path: root/ecomp-portal-FE-common/client/app/views/tabs
diff options
context:
space:
mode:
Diffstat (limited to 'ecomp-portal-FE-common/client/app/views/tabs')
-rw-r--r--ecomp-portal-FE-common/client/app/views/tabs/tabframe.html22
-rw-r--r--ecomp-portal-FE-common/client/app/views/tabs/tabs.controller.js314
-rw-r--r--ecomp-portal-FE-common/client/app/views/tabs/tabs.controller.spec.js81
-rw-r--r--ecomp-portal-FE-common/client/app/views/tabs/tabs.less660
4 files changed, 1077 insertions, 0 deletions
diff --git a/ecomp-portal-FE-common/client/app/views/tabs/tabframe.html b/ecomp-portal-FE-common/client/app/views/tabs/tabframe.html
new file mode 100644
index 00000000..0155592a
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/views/tabs/tabframe.html
@@ -0,0 +1,22 @@
+<!--
+ ================================================================================
+ eCOMP Portal
+ ================================================================================
+ Copyright (C) 2017 AT&T Intellectual Property
+ ================================================================================
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ ================================================================================
+ -->
+<iframe id= "tabframe-{{tab.title.split(' ').join('-')}}" scrolling='yes' frameBorder='0' width='100%' style='height: 90vh;'
+src='{{tab.content | trusted}}'
+></iframe> \ No newline at end of file
diff --git a/ecomp-portal-FE-common/client/app/views/tabs/tabs.controller.js b/ecomp-portal-FE-common/client/app/views/tabs/tabs.controller.js
new file mode 100644
index 00000000..5a5b7e49
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/views/tabs/tabs.controller.js
@@ -0,0 +1,314 @@
+/*-
+ * ================================================================================
+ * eCOMP Portal
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ================================================================================
+ */
+'use strict';
+(function () {
+ const HTTP_PROTOCOL_RGX = /https?:\/\//;
+ class TabsCtrl {
+ constructor(applicationsService, $log, $window, conf, userProfileService, userbarUpdateService, $scope,$cookies,$rootScope,confirmBoxService,auditLogService) {
+ // Tab counter
+ var counter = 1;
+ var tabLimit = 6;
+ this.conf = conf;
+ var cookieDomain = this.conf.cookieDomain;
+ // Array to store the tabs
+ $scope.tabs = [];
+ $scope.notificationShow=true;
+ $rootScope.showFooter = "";
+ $cookies.putObject('show_app_header', false,{domain: cookieDomain, path : '/'});
+
+
+ let noRefresh = function () {
+ window.onbeforeunload = function(e) {
+
+ var isQtoHref = false;
+ try{
+ isQtoHref = e.srcElement.activeElement.href.includes("to");
+ } catch(err) {
+
+ }
+
+ if ($scope.tabs.length > 1 && isQtoHref == false) {
+ return "Changes you made may not be saved. Are you sure you want to refresh?";
+ } else {
+ return null;
+ }
+ }
+ }
+ // Add tab to the end of the array
+ var addTab = function (title, content) {
+ if($scope.tabs.length===tabLimit){
+ //alert
+ confirmBoxService.showInformation('You have reached your maximum limit of tabs allowed.').then(isConfirmed => {});
+ } else {
+ // console.log(window.performance.memory);
+ // var usedperc = (window.performance.memory.usedJSHeapSize/window.performance.memory.jsHeapSizeLimit)*100;
+ // console.log('Current memory usage: '+usedperc+'%');
+ if(title!=='Home' && content.indexOf('https') == -1){
+ console.log('App URL: '+content+'. The application URL you are trying to open is not HTTPS. We recommend to use secured HTTPS URL while on-boarding the application.');
+ //confirmBoxService.showInformation('The application URL you are trying to open is not HTTPS. We recommend to use secured HTTPS URL while on-boarding the application.').then(isConfirmed => {});
+ }
+
+ $scope.tabs.push({ title: title, content: content });
+ counter++;
+ //$scope.tabs[$scope.tabs.length - 1].disabled = false;
+ $scope.selectedIndex = $scope.tabs.length - 1;
+ if ($scope.tabs.length > 1) {
+ noRefresh();
+ }
+ $cookies.putObject('cookieTabs', $scope.tabs,{domain: cookieDomain, path : '/'});
+ $cookies.putObject('visInVisCookieTabs', $scope.tabs,{domain: cookieDomain, path : '/'});
+ }
+ };
+
+ //with APP ID
+ var addTab = function (title, content, appId) {
+ if($scope.tabs.length===tabLimit){
+ //alert
+ confirmBoxService.showInformation('You have reached your maximum limit of tabs allowed.').then(isConfirmed => {});
+ } else {
+ if(title!=='Home' && content.indexOf('https') === -1){
+ console.log('App URL: '+content+'. The application URL you are trying to open is not HTTPS. We recommend to use secured HTTPS URL while on-boarding the application.');
+ }
+ $scope.tabs.push({ title: title, content: content, appId:appId });
+ counter++;
+ $scope.selectedIndex = $scope.tabs.length - 1;
+ if ($scope.tabs.length > 1) {
+ noRefresh();
+ }
+ $cookies.putObject('cookieTabs', $scope.tabs,{domain: cookieDomain, path : '/'});
+ $cookies.putObject('visInVisCookieTabs', $scope.tabs,{domain: cookieDomain, path : '/'});
+ }
+ };
+
+ // adjust title - trim the title and append ...
+ var adjustTitle = function (title) {
+ var index = 15;
+ var nonEmptyCharPattern = /(\s|\w)/;
+ var adjustedTitle = title.substring(0,index);
+ var ext = title.charAt(index).replace(nonEmptyCharPattern,'...');
+ return adjustedTitle.concat(ext);
+
+
+ };
+
+ //store audit log
+ $scope.auditLog = function(app) {
+ $log.debug('auditLog::auditLog: auditLog.ping() = ' + app);
+ var comment = '';
+ if(app.content==null || app.content=='')
+ comment= app.title;
+ else
+ comment = app.content;
+ auditLogService.storeAudit(app.appId, 'tab', comment);
+ };
+
+ // Remove tab by index
+ var removeTab = function (event, index) {
+ event.preventDefault();
+ event.stopPropagation();
+ $scope.tabs.splice(index, 1);
+ $cookies.putObject('cookieTabs', $scope.tabs,{domain: cookieDomain, path : '/'});
+ };
+
+ //adjust height of the tab due to the search popup being hidden
+ $scope.adjustTabStyle = function(title){
+ if(title=='Home'){
+ $(".w-ecomp-tabs").css('height',"50px");
+ }else{
+ $(".w-ecomp-tabs").css('height',"100%");
+ }
+ }
+
+ // select tab
+ var selectTab = function (title) {
+ $scope.adjustTabStyle(title);
+ if(title==='Home') {
+ $rootScope.ContentModel.IsVisible=true;
+ $rootScope.showFooter = true;
+ $rootScope.tabBottom = 75;
+ userbarUpdateService.setRefreshCount(userbarUpdateService.maxCount);
+ }
+ else {
+ $rootScope.ContentModel.IsVisible=false;
+ $rootScope.showFooter = false;
+ $rootScope.tabBottom = 0;
+ }
+ };
+
+ // Initialize the scope functions
+ $scope.addTab = addTab;
+ $scope.removeTab = removeTab;
+ $scope.selectTab = selectTab;
+ $scope.adjustTitle = adjustTitle;
+
+
+ $rootScope.ContentModel = {
+ IsVisible : false,
+ ViewUrl : null,
+ };
+
+
+ var sessionActive = applicationsService.ping()
+ .then(sessionActive => {
+ // $log.debug('TabsCtrl::addTab: applicationsService.ping() = ' + JSON.stringify(sessionActive));
+ // For demonstration add 5 tabs
+
+ var cookieTabs = $cookies.getObject('cookieTabs');
+ if(cookieTabs!=null){
+ for(var t in cookieTabs){
+ // console.log('TabsCtrl::addTab: cookieTabs title: '+cookieTabs[t].title);
+ if(cookieTabs[t].title!=null && cookieTabs[t].title==='Home'){
+ cookieTabs[t].content = "";
+ $rootScope.ContentModel.IsVisible=true;
+ addTab( cookieTabs[t].title, cookieTabs[t].content,1) ;
+ }else{
+ addTab( cookieTabs[t].title, cookieTabs[t].content,cookieTabs[t].appId) ;
+ }
+
+ }
+ } else {
+ for (var i = 0; i < 1; i++) {
+ var content="";
+ var title="";
+ var appId=""
+ if(i===0){
+ title="Home";
+ $rootScope.ContentModel.IsVisible=true;
+ addTab(title, content,1);
+ }else{
+ addTab(title, content,appId);
+ }
+ }
+ }
+
+
+
+ //$scope.tabs[$scope.tabs.length - 1].active = false;
+ //$scope.tabs[0].disabled = false;
+ $scope.selectedIndex = 0;
+ });
+
+ $scope.$watchCollection(function() { return $cookies.getObject('addTab'); }, function(newValue) {
+ // $log.log('Cookie string: ' + $cookies.get('test'))
+ var tabContent = $cookies.getObject('addTab');
+ if(tabContent!=null && tabContent.url!=null){
+ var tabExists = false;
+ for(var x in $scope.tabs){
+ // console.log($scope.tabs[x].content);
+ if($scope.tabs[x].title==tabContent.title){
+ tabExists = true;
+ //$scope.tabs[x].disabled = false;
+ $scope.selectedIndex = x;
+ // added dummy variable to get iframe reloded if tab is already opened.
+ if(tabContent.url.indexOf('?')===-1){
+ $scope.tabs[x].content=tabContent.url+'?dummyVar='+(new Date()).getTime();
+ }
+ else{
+ $scope.tabs[x].content=tabContent.url+'&dummyVar='+(new Date()).getTime();
+ }
+ }
+ }
+ if(!tabExists){
+ addTab( tabContent.title, tabContent.url,tabContent.appId) ;
+ }
+ $cookies.remove('addTab');
+ }
+ });
+ }
+ }
+ TabsCtrl.$inject = ['applicationsService', '$log', '$window', 'conf', 'userProfileService', 'userbarUpdateService', '$scope','$cookies','$rootScope','confirmBoxService','auditLogService'];
+ angular.module('ecompApp').controller('TabsCtrl', TabsCtrl);
+
+ angular.module('ecompApp').directive('mainArea', function() {
+ return {
+ restrict: "E",
+ templateUrl: 'app/views/tabs/tabframe.html',
+ link: function(scope, element) {
+
+ //var iframeId = "#tabframe-" + scope.$parent.tab.title.split(' ').join('-');
+ // jQuery(iframeId).load(function() {
+ // alert("hello");
+ // }); //.attr("src",'{{tab.content | trusted}}' ); //src='{{tab.content | trusted}}'
+ // jQuery(iframeId).attr('src', '{{tab.content | trusted}}');
+
+ //element.childNodes[0].on('load', function() {
+ // alert('hello');
+ //});
+ }
+ }
+ });
+
+
+
+ angular.module('ecompApp').directive('tabHighlight', [function () {
+ return {
+ restrict: 'A',
+ link: function (scope, element) {
+ // Here is the major jQuery usage where we add the event
+ // listeners mousemove and mouseout on the tabs to initalize
+ // the moving highlight for the inactive tabs
+ var x, y, initial_background = '#c3d5e6';
+
+ element
+ .removeAttr('style')
+ .mousemove(function (e) {
+ // Add highlight effect on inactive tabs
+ if(!element.hasClass('md-active'))
+ {
+ x = e.pageX - this.offsetLeft;
+ y = e.pageY - this.offsetTop;
+
+ // Set the background when mouse moves over inactive tabs
+ element
+ .css({ background: '-moz-radial-gradient(circle at ' + x + 'px ' + y + 'px, rgba(255,255,255,0.4) 0px, rgba(255,255,255,0.0) 45px), ' + initial_background })
+ .css({ background: '-webkit-radial-gradient(circle at ' + x + 'px ' + y + 'px, rgba(255,255,255,0.4) 0px, rgba(255,255,255,0.0) 45px), ' + initial_background })
+ .css({ background: 'radial-gradient(circle at ' + x + 'px ' + y + 'px, rgba(255,255,255,0.4) 0px, rgba(255,255,255,0.0) 45px), ' + initial_background });
+ }
+ })
+ .mouseout(function () {
+ // Return the inital background color of the tab
+ element.removeAttr('style');
+ });
+ }
+ };
+ }]);
+
+
+
+})();
+
+function getParameterByName(name, url) {
+ if (!url) url = window.location.href;
+ name = name.replace(/[\[\]]/g, "\\$&");
+ var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
+ results = regex.exec(url);
+ if (!results) return '';
+ if (!results[2]) return '';
+ return (results[2].replace(/\+/g, " "));
+}
+
+function isCascadeFrame(ref) {
+ // alert(ref.id);
+ if (self != top) {
+ var e = document.body;
+ e.parentNode.removeChild(e);
+ window.location = "unKnownError";
+ }
+}
diff --git a/ecomp-portal-FE-common/client/app/views/tabs/tabs.controller.spec.js b/ecomp-portal-FE-common/client/app/views/tabs/tabs.controller.spec.js
new file mode 100644
index 00000000..b9fd0acc
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/views/tabs/tabs.controller.spec.js
@@ -0,0 +1,81 @@
+/*-
+ * ================================================================================
+ * eCOMP Portal
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ================================================================================
+ */
+'use strict';
+
+describe('Controller: TabsCtrl ',() => {
+ beforeEach(module('ecompApp'));
+
+ //destroy $http default cache before starting to prevent the error 'default cache already exists'
+ beforeEach(inject((_CacheFactory_)=>{
+ _CacheFactory_.destroyAll();
+ }));
+
+ let TabsCtrl, $controller, $q, $rootScope, $log, $window, $cookies,$scope;
+
+ beforeEach(inject((_$controller_, _$q_, _$rootScope_, _$log_, _$window_, _$cookies_)=>{
+ [$controller, $q, $rootScope, $log, $window, $cookies] = [_$controller_, _$q_, _$rootScope_, _$log_, _$window_, _$cookies_];
+ }));
+
+ var deferredApps, deferredUserProfile;
+ beforeEach(()=>{
+ deferredApps = $q.defer();
+ deferredUserProfile = $q.defer();
+ let applicationsServiceMock = jasmine.createSpyObj('applicationsServiceMock', ['getUserApps']);
+ applicationsServiceMock.getUserApps.and.returnValue(deferredApps.promise);
+
+ let userProfileServiceMock = jasmine.createSpyObj('userProfileServiceMock',['getUserProfile']);
+ userProfileServiceMock.getUserProfile.and.returnValue(deferredUserProfile.promise);
+
+ $scope = $rootScope.$new();
+ TabsCtrl = $controller('TabsCtrl', {
+ applicationsService: applicationsServiceMock,
+ $log: $log,
+ $window: $window,
+ userProfileService: userProfileServiceMock,
+ $scope: $scope,
+ $cookies: $cookies,
+ $rootScope: $rootScope
+ });
+ });
+
+ it('should populate this.apps with data from portals service getUserApps', ()=>{
+ var profile = {roles:'superAdmin',userId:'userid'};
+ deferredUserProfile.resolve(profile);
+ deferredApps.resolve([{name: 'portal1'},{name: 'portal2'},{name: 'portal3'}]);
+ $rootScope.$apply();
+ expect($scope.appsViewData.length).toBe(3);
+ });
+
+ it('should call $log error when getAllPortals fail', ()=>{
+ spyOn($log, 'error');
+ deferredUserProfile.reject('something happened!');
+ $rootScope.$apply();
+ expect($log.error).toHaveBeenCalled();
+ });
+
+ it('should open link in a new window when clicking app thumbnail', () => {
+ spyOn($window, 'open');
+ let someUrl = 'http://some/url/';
+ TabsCtrl.goToPortal(someUrl);
+ expect($window.open).toHaveBeenCalledWith(someUrl, '_self');
+ });
+
+
+}); \ No newline at end of file
diff --git a/ecomp-portal-FE-common/client/app/views/tabs/tabs.less b/ecomp-portal-FE-common/client/app/views/tabs/tabs.less
new file mode 100644
index 00000000..9f90d610
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/views/tabs/tabs.less
@@ -0,0 +1,660 @@
+.w-ecomp-tabs {
+ //.bg_portalWhite;//white for 1702
+ .bg_portalGray; // gray for 1610
+
+ position: fixed;
+ left: 0;
+ right: 0;
+ bottom: @page-main-bottom;
+ overflow-y: hidden;
+ top: @header-height;
+ padding-left: 0;
+ height:50px;
+ z-index:101;
+ .go-button {
+ .btn-green;
+ width: 96px;
+ position: absolute;
+ border-radius: 0px;
+ }
+
+ .tabs-container {
+ .content_justify;
+ position: relative;
+ padding: 15px 0 32px 0;
+ width: 100%;
+
+ .tabs-title {
+ //.a24r;
+ .dBlue24r; // AT&T Dark Blue
+ margin: auto;
+ .content_justify;
+ }
+ .portals-list {
+ min-height: 70vh;
+ //display: flex;
+ justify-content: center;
+ flex-flow: row wrap;
+ width: 1170px;
+
+ margin: auto;
+ margin-bottom: 63px;
+
+ .app-gridster-header {
+ background-color: @portalWhite;
+ }
+
+ .app-gridster-footer {
+ background-color: @portalWhite;
+ }
+
+ .portals-list-item {
+ background-color: @portalWhite;
+ border-radius: 2px;
+ box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.1);
+ display: inline-block;
+ width: 360px;
+ height: 300px;
+ background-size: cover;
+ cursor: pointer;
+ margin: 15px;
+ overflow: hidden;
+
+ .portals-item-info {
+ background-color: @portalWhite;
+ height: 120px;
+ top: 180px;
+ position: relative;
+ box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.1);
+ padding: 16px;
+
+ .info-title {
+ //.a24r;
+ .dBlue24r; // AT&T Dark Blue
+ margin-bottom: 4px;
+
+ text-overflow: ellipsis;
+ overflow: hidden;
+ }
+ .info-description {
+ .portalDBlue16r;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ }
+ .info-button {
+ .btn-green;
+ width: 96px;
+ position: absolute;
+ bottom: 16px;
+ left: 16px;
+ }
+
+ &:hover {
+ opacity: .93;
+ z-index: 3;
+ }
+ }
+ }
+ }
+ }
+}
+
+.w-ecomp-main-disclaimer {
+ text-align: center;
+ .dGray14r;
+ bottom: -37px;
+ width: 100%;
+ line-height: 1.5em;
+
+}
+//.build-number {
+// .o12i;
+//}
+
+@keyframes fadein {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+
+
+.tab-container {
+ background: @portalLGray;
+ margin: 0;
+ padding: 0;
+ max-height: 40px;
+}
+.tab-container ul.nav-tabs {
+ margin: 0;
+ list-style-type: none;
+ line-height: 40px;
+ max-height: 40px;
+ overflow: hidden;
+ display: inline-block;
+ display: -webkit-flex;
+ display: flex;
+ padding-right: 20px;
+ border-bottom: 5px solid @funcBkgGray;
+}
+.tab-container ul.nav-tabs > li {
+ margin: 5px -14px 0;
+ -moz-border-radius-topleft: 28px 145px;
+ -webkit-border-top-left-radius: 28px 145px;
+ border-top-left-radius: 28px 145px;
+ -moz-border-radius-topright: 28px 145px;
+ -webkit-border-top-right-radius: 28px 145px;
+ border-top-right-radius: 28px 145px;
+ padding: 0 30px 0 25px;
+ height: 170px;
+ background: #c3d5e6;
+ position: relative;
+ -moz-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
+ -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
+ width: 200px;
+ max-width: 200px;
+ min-width: 20px;
+ border: 1px solid @portalGray;
+}
+.tab-container ul.nav-tabs > li:first-child {
+ margin-left: 0;
+}
+.tab-container ul.nav-tabs > li:last-of-type {
+ margin-right: 0;
+}
+.tab-container ul.nav-tabs > li > a {
+ display: block;
+ max-width: 100%;
+ text-decoration: none;
+ color: @portalBlack;
+ padding: 3px 7px;
+}
+.tab-container ul.nav-tabs > li > a span {
+ overflow: hidden;
+ white-space: nowrap;
+ display: block;
+}
+.tab-container ul.nav-tabs > li > a:focus, .tab-container ul.nav-tabs > li > a:hover {
+ background-color: transparent;
+ border-color: transparent;
+}
+.tab-container ul.nav-tabs > li > a .glyphicon-remove {
+ color: @portalDGray;
+ display: inline-block;
+ padding: 3px;
+ font-size: 10px;
+ position: absolute;
+ z-index: 10;
+ top: 7px;
+ right: -10px;
+ -moz-border-radius: 50%;
+ -webkit-border-radius: 50%;
+ border-radius: 50%;
+}
+.tab-container ul.nav-tabs > li > a .glyphicon-remove:hover {
+ background: @portalLPurple;
+ color: @portalWhite;
+ -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25);
+ -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25);
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25);
+ text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
+}
+.tab-container ul.nav-tabs > li.active {
+ z-index: 4;
+ background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Y3ZjdmNyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+ background-size: 100%;
+ background-image: -webkit-gradient(linear, 50% 0%, 50% 30, color-stop(0%, @portalWhite), color-stop(100%, @funcBkgGray));
+ background-image: -moz-linear-gradient(@portalWhite, @funcBkgGray 30px);
+ background-image: -webkit-linear-gradient(@portalWhite, @funcBkgGray 30px);
+ background-image: linear-gradient(@portalWhite, @funcBkgGray 30px);
+}
+.tab-container ul.nav-tabs > li.active > a {
+ background-color: transparent;
+ border-color: transparent;
+ border-bottom-color: transparent;
+}
+.tab-container ul.nav-tabs > li.active > a:focus, .tab-container ul.nav-tabs > li.active > a:hover {
+ background-color: transparent;
+ border-color: transparent;
+ border-bottom-color: transparent;
+}
+.tab-container ul.nav-tabs .btn {
+ float: left;
+ height: 20px;
+ width: 35px;
+ min-width: 35px;
+ max-width: 35px;
+ margin: 10px 0 0 0;
+ border-color: @portalLBlue;
+ outline: none;
+ -moz-transform: skew(30deg);
+ -ms-transform: skew(30deg);
+ -webkit-transform: skew(30deg);
+ transform: skew(30deg);
+}
+.tab-container ul.nav-tabs .btn.btn-default {
+ background: #c3d5e6;
+}
+.tab-container ul.nav-tabs .btn.btn-default:hover {
+ background: #d2deeb;
+}
+.tab-container ul.nav-tabs .btn.btn-default:active {
+ background: #9cb5cc;
+}
+.tab-container .tab-pane {
+ padding: 0px 0px;
+ text-align: center;
+}
+.tab-container .tab-pane.active {
+ border-top: 1px solid #ddd;
+}
+
+.tab-container md-content {
+ background-color: transparent !important; }
+ .tab-container md-content md-tabs {
+ border: 1px solid #e1e1e1; }
+ .tab-container md-content md-tabs md-tab-content {
+ background: #f6f6f6; }
+ .tab-container md-content md-tabs md-tabs-canvas {
+ background: white; }
+ .tab-container md-content h1:first-child {
+ margin-top: 0; }
+.tab-container md-input-container {
+ padding-bottom: 0; }
+.tab-container .remove-tab {
+ margin-bottom: 40px; }
+.tab-container .demo-tab > div > div {
+ padding: 25px;
+ box-sizing: border-box; }
+.tab-container .edit-form input {
+ width: 100%; }
+.tab-container md-tabs {
+ border-bottom: 1px solid rgba(0, 0, 0, 0.12); }
+.tab-container md-tab[disabled] {
+ opacity: 0.5; }
+.tab-container label {
+ text-align: left; }
+.tab-container .long > input {
+ width: 264px; }
+.tab-container .md-button.add-tab {
+ transform: translateY(5px); }
+
+.md-tab{
+ font-size: 13px;
+ line-height: 30px;
+ margin: 5px -3px 0;
+ border-top-left-radius: 88px 205px;
+ border-top-right-radius: 88px 205px;
+ padding: 0 30px 0 25px;
+ height: 40px;
+ background: @portalLGray;
+ position: relative;
+ box-shadow: 0 4px 6px rgba(0,0,0,.5);
+ width: 180px;
+ max-width: 200px;
+ min-width: 20px;
+ border: 1px solid #aaa;
+ text-transform: capitalize;
+ text-align: left;
+}
+
+md-tabs .md-tab {
+ color: #222;
+}
+
+md-tabs-canvas {
+ border-bottom: 5px solid #f7f7f7;
+ height: 40px;
+}
+.md-tab.md-active {
+ z-index: 4;
+ background-color: #f5f5f5 !important;
+}
+.md-tab:first-child{
+ margin-left: 10px;
+}
+md-ink-bar{
+ z-index: 5 !important;
+}
+
+.glyphicon {
+ position: fixed;
+ line-height: 4;
+}
+.close_button {
+ font-size: x-small;width: 10px;
+ margin-left: 130px;
+}
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+ .close_button {
+ font-size: x-small;width: 10px;margin-left: 130px;margin-top: 55px;
+ }
+}
+
+*,
+*:after,
+*:before
+{
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+
+.button-default
+{
+ .transition(@transitionDefault color);
+ background: transparent;
+ border: none;
+ cursor: pointer;
+ margin: 0;
+ outline: none;
+ position: relative;
+}
+
+.show-notifications
+{
+ position: relative;
+
+ &:hover,
+ &:focus,
+ &.active
+ {
+ #icon-bell
+ {
+ fill: @colorWetAsphalt;
+ }
+ }
+
+ #icon-bell
+ {
+ fill: @colorAsbestos;
+ }
+
+
+
+ &.active ~ .notifications
+ {
+ opacity: 1;
+ top: 35px;
+ }
+}
+.notifications_li{
+ border-top: 1px solid #bdc3c7;
+ color: #7f8c8d;
+ cursor: default;
+ display: block;
+ padding: 10px;
+ position: relative;
+ white-space: nowrap;
+ width: 350px;
+}
+.notifications_li:hover{
+ background:#eee;
+}
+.notifications_detail{
+ margin-left: 10px;
+ white-space: normal;
+ width: 280px;
+ display: inline-block;
+ vertical-align: middle;
+}
+
+.notifications_empty{
+ display: none;
+ text-align: center;
+}
+.notifications_title{
+ display: block;
+}
+
+.notifications_date{
+ color: #95a5a6;
+ font-size: .85em;
+ margin-top: 3px;
+}
+.notifications
+{
+ .border-radius(@borderRadius);
+ .transition(@transitionDefault opacity);
+ background: @colorClouds;
+ border: 1px solid @colorSilver;
+ left: 10px;
+ opacity: 0;
+ // position: absolute;
+ //top: -999px;
+
+ &:after
+ {
+ border: 10px solid transparent;
+ border-bottom-color: @colorPeterRiver;
+ content: '';
+ display: block;
+ height: 0;
+ left: 10px;
+ position: absolute;
+ top: -20px;
+ width: 0;
+ }
+
+ h3,
+ .show-all
+ {
+ background: @colorPeterRiver;
+ color: @colorWhite;
+ margin: 0;
+ padding: 10px;
+ width: 350px;
+ }
+
+ h3
+ {
+ cursor: default;
+ font-size: 1.05em;
+ font-weight: normal;
+ }
+
+ .show-all
+ {
+ display: block;
+ text-align: center;
+ text-decoration: none;
+
+ &:hover,
+ &:focus
+ {
+ text-decoration: underline;
+ }
+ }
+
+ .notifications-list
+ {
+ list-style: none;
+ margin: 0;
+ overflow: hidden;
+ padding: 0;
+
+ .item
+ {
+ .transition-transform(@transitionDefault);
+ border-top: 1px solid @colorSilver;
+ color: @colorAsbestos;
+ cursor: default;
+ display: block;
+ padding: 10px;
+ position: relative;
+ white-space: nowrap;
+ width: 350px;
+
+ &:before,
+ .details,
+ .button-dismiss
+ {
+ display: inline-block;
+ vertical-align: middle;
+ }
+
+ &:before
+ {
+ .border-radius(50%);
+ background: @colorPeterRiver;
+ content: '';
+ height: 8px;
+ width: 8px;
+ }
+
+ .details
+ {
+ margin-left: 10px;
+ white-space: normal;
+ width: 280px;
+
+ .title,
+ .date
+ {
+ display: block;
+ }
+
+ .date
+ {
+ color: @colorConcrete;
+ font-size: .85em;
+ margin-top: 3px;
+ }
+ }
+
+ .button-dismiss
+ {
+ color: @colorSilver;
+ font-size: 2.25em;
+
+ &:hover,
+ &:focus
+ {
+ color: @colorConcrete;
+ }
+ }
+
+ &.no-data
+ {
+ display: none;
+ text-align: center;
+
+ &:before
+ {
+ display: none;
+ }
+ }
+
+ &.expired
+ {
+ color: @colorSilver;
+
+ &:before
+ {
+ background: @colorSilver;
+ }
+
+ .details
+ {
+ .date
+ {
+ color: @colorSilver;
+ }
+ }
+ }
+
+ &.dismissed
+ {
+ .transform(translateX(100%));
+ }
+ }
+ }
+
+ &.empty
+ {
+ .notifications-list
+ {
+ .no-data
+ {
+ display: block;
+ padding: 10px;
+ }
+ }
+ }
+}
+
+/* variables */
+@colorClouds: #ecf0f1;
+@colorSilver: #bdc3c7;
+@colorWhite: #fefefe;
+@colorPeterRiver: #3498db;
+@colorConcrete: #95a5a6;
+@colorAsbestos: #7f8c8d;
+@colorWetAsphalt: #34495e;
+
+@borderRadius: 2px;
+
+@transitionDefault: 0.25s ease-out 0.10s;
+
+/* mixins */
+.background-clip(@value: border-box)
+{
+ -moz-background-clip: @value;
+ -webkit-background-clip: @value;
+ background-clip: @value;
+}
+
+.border-radius(@value: 5px)
+{
+ -moz-border-radius: @value;
+ -webkit-border-radius: @value;
+ border-radius: @value;
+ .background-clip(padding-box);
+}
+
+.transform(@value)
+{
+ -webkit-transform: @value;
+ -moz-transform: @value;
+ -ms-transform: @value;
+ -o-transform: @value;
+ transform: @value;
+}
+
+.transition(@value: all 0.25s ease-out)
+{
+ -webkit-transition: @value;
+ -moz-transition: @value;
+ -o-transition: @value;
+ transition: @value;
+}
+
+.transition-transform(@transition: 0.25s ease-out)
+{
+ -webkit-transition: -webkit-transform @transition;
+ -moz-transition: -moz-transform @transition;
+ -o-transition: -o-transform @transition;
+ transition: transform @transition;
+}
+
+.tab-cross-sign{
+ position:relative;
+ margin-left: 126px;
+ top:-70px;
+ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+ top:-70px;
+ }
+}
+
+#tab-cross-sign-icon{
+ margin: 48px 0px 0px 0px;
+ width: 16.1px;
+ border-bottom-width:0px;
+ padding: 6px 6px 6px 3px;
+}