atlas-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From yhema...@apache.org
Subject [5/5] incubator-atlas git commit: ATLAS-802 New look UI to show Business Catalog functionalities (kevalbhatt18 via yhemanth)
Date Thu, 19 May 2016 17:46:02 GMT
ATLAS-802 New look UI to show Business Catalog functionalities (kevalbhatt18 via yhemanth)


Project: http://git-wip-us.apache.org/repos/asf/incubator-atlas/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-atlas/commit/440bd2ae
Tree: http://git-wip-us.apache.org/repos/asf/incubator-atlas/tree/440bd2ae
Diff: http://git-wip-us.apache.org/repos/asf/incubator-atlas/diff/440bd2ae

Branch: refs/heads/master
Commit: 440bd2ae42c4f2ef02df7387392a1a29d98f3bc9
Parents: a05107a
Author: Hemanth Yamijala <hyamijala@hortonworks.com>
Authored: Thu May 19 23:15:39 2016 +0530
Committer: Hemanth Yamijala <hyamijala@hortonworks.com>
Committed: Thu May 19 23:15:39 2016 +0530

----------------------------------------------------------------------
 dashboardv2/gruntfile.js                        |  94 +--
 dashboardv2/package.json                        |   3 +
 dashboardv2/public/css/bootstrap-sidebar.css    |  64 +-
 dashboardv2/public/css/business-catlog.css      | 206 -----
 .../public/css/fonts/fontawesome-webfont.svg    |   2 +-
 .../css/fonts/glyphicons-halflings-regular.svg  |   2 +-
 dashboardv2/public/css/override.css             | 204 -----
 dashboardv2/public/css/scss/breadcrumb.scss     |  43 ++
 .../public/css/scss/business-catlog.scss        |  97 +++
 dashboardv2/public/css/scss/form.scss           | 186 +++++
 dashboardv2/public/css/scss/graph.scss          |  76 ++
 dashboardv2/public/css/scss/loader.scss         |  57 ++
 dashboardv2/public/css/scss/login.scss          |  71 ++
 dashboardv2/public/css/scss/main.scss           | 147 ++++
 dashboardv2/public/css/scss/nav.scss            |  50 ++
 dashboardv2/public/css/scss/old-style.scss      | 161 ++++
 dashboardv2/public/css/scss/override.scss       |  72 ++
 dashboardv2/public/css/scss/panel.scss          |  25 +
 dashboardv2/public/css/scss/search.scss         |  75 ++
 dashboardv2/public/css/scss/style.scss          |  34 +
 dashboardv2/public/css/scss/tab.scss            | 133 ++++
 dashboardv2/public/css/scss/tag.scss            | 205 +++++
 dashboardv2/public/css/scss/theme.scss          | 114 +++
 dashboardv2/public/css/scss/tree.scss           | 286 +++++++
 dashboardv2/public/css/style.css                | 773 -------------------
 dashboardv2/public/index.html                   |  33 +-
 .../public/js/collection/BaseCollection.js      |  20 +
 .../public/js/collection/VCatalogList.js        |  65 ++
 .../public/js/collection/VLineageList.js        |   2 +-
 dashboardv2/public/js/collection/VSchemaList.js |   2 +-
 dashboardv2/public/js/main.js                   |  10 +-
 dashboardv2/public/js/models/VCatalog.js        |  42 +
 dashboardv2/public/js/models/VSchema.js         |   2 +-
 dashboardv2/public/js/modules/atlasLogin.js     | 129 ++++
 dashboardv2/public/js/router/Router.js          | 181 +++--
 .../asset/AssetPageLayoutView_tmpl.html         |  32 -
 .../audit/AuditTableLayoutView_tmpl.html        |  17 +
 .../audit/CreateAuditTableLayoutView_tmpl.html  |  26 +
 .../business_catalog/AddTermView_tmpl.html      |  25 +
 .../BusinessCatalogDetailLayoutView_tmpl.html   |  75 ++
 .../business_catalog/BusinessCatalogHeader.html |  32 +
 .../BusinessCatalogLayoutView_tmpl.html         |  29 +
 .../MoveTermLayoutView_tmpl.html                |  19 +
 .../SideNavLayoutView_tmpl.html                 |  37 +
 .../js/templates/common/aboutAtlas_tmpl.html    |   2 +-
 .../public/js/templates/common/modal.html       |  16 +-
 .../detail_page/DetailPageLayoutView_tmpl.html  |  91 ++-
 .../templates/graph/LineageLayoutView_tmpl.html |   4 +-
 .../search/SearchDetailLayoutView_tmpl.html     |  25 +
 .../templates/search/SearchLayoutView_tmpl.html |  37 +-
 .../search/SearchResultLayoutView_tmpl.html     |  22 +
 .../public/js/templates/site/header.html        |  48 +-
 .../templates/tag/AddTagAttributeView_tmpl.html |  23 +
 .../tag/TagAttributeDetailLayoutView_tmpl.html  |  30 +
 .../templates/tag/TagDetailLayoutView_tmpl.html |  27 +
 .../tag/TagDetailTableLayoutView_tmpl.html      |   2 +-
 .../js/templates/tag/TagLayoutView_tmpl.html    |  29 +-
 .../tag/addTagAttributeItemView_tmpl.html       |  23 -
 .../js/templates/tag/addTagModalView_tmpl.html  |   8 +-
 .../templates/tag/createTagLayoutView_tmpl.html |  55 +-
 .../public/js/utils/CommonViewFunction.js       |   5 +-
 dashboardv2/public/js/utils/Globals.js          |   6 +
 dashboardv2/public/js/utils/Overrides.js        |   1 -
 dashboardv2/public/js/utils/Utils.js            |  95 ++-
 .../js/views/asset/AssetPageLayoutView.js       | 381 ---------
 .../js/views/audit/AuditTableLayoutView.js      | 156 ++++
 .../views/audit/CreateAuditTableLayoutView.js   | 131 ++++
 .../views/business_catalog/AddTermLayoutView.js |  58 ++
 .../BusinessCatalogDetailLayoutView.js          | 197 +++++
 .../business_catalog/BusinessCatalogHeader.js   | 100 +++
 .../BusinessCatalogLayoutView.js                | 362 +++++++++
 .../business_catalog/MoveTermLayoutView.js      |  75 ++
 .../views/business_catalog/SideNavLayoutView.js | 117 +++
 .../views/detail_page/DetailPageLayoutView.js   | 223 ++++--
 .../views/entity/EntityDetailTableLayoutView.js |   3 +-
 .../public/js/views/graph/LineageLayoutView.js  |  21 +-
 .../public/js/views/schema/SchemaLayoutView.js  |  45 +-
 .../js/views/search/SearchDetailLayoutView.js   |  67 ++
 .../public/js/views/search/SearchLayoutView.js  | 221 +++++-
 .../js/views/search/SearchResultLayoutView.js   | 382 +++++++++
 dashboardv2/public/js/views/site/Header.js      |  25 +-
 .../public/js/views/tag/AddTagAttributeView.js  |  55 ++
 .../public/js/views/tag/CreateTagLayoutView.js  |  79 ++
 .../views/tag/TagAttributeDetailLayoutView.js   | 144 ++++
 .../public/js/views/tag/TagDetailLayoutView.js  |  79 ++
 .../js/views/tag/TagDetailTableLayoutView.js    |  10 +-
 .../public/js/views/tag/TagLayoutView.js        | 243 ++++--
 .../js/views/tag/addTagAttributeItemView.js     |  69 --
 .../public/js/views/tag/addTagModalView.js      |  28 +-
 .../public/js/views/tag/createTagsLayoutView.js | 153 ----
 pom.xml                                         |   1 +
 release-log.txt                                 |   1 +
 92 files changed, 5484 insertions(+), 2449 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/gruntfile.js
----------------------------------------------------------------------
diff --git a/dashboardv2/gruntfile.js b/dashboardv2/gruntfile.js
index e5bcc2f..08000a4 100644
--- a/dashboardv2/gruntfile.js
+++ b/dashboardv2/gruntfile.js
@@ -19,18 +19,13 @@
 'use strict';
 
 var git = require('git-rev');
-var LIVERELOAD_PORT = 3010;
-var lrSnippet = require('connect-livereload')({ port: LIVERELOAD_PORT });
-var mountFolder = function(connect, dir) {
-    return connect.static(require('path').resolve(dir));
-};
 module.exports = function(grunt) {
     var classPathSep = (process.platform === "win32") ? ';' : ':',
         gitHash = '',
         pkg = grunt.file.readJSON('package.json'),
         distPath = 'dist',
         publicPath = 'public',
-        libPath =  distPath + '/js/libs',
+        libPath = distPath + '/js/libs',
         isDashboardDirectory = grunt.file.isDir('public'),
         modulesPath = 'public/';
     if (!isDashboardDirectory) {
@@ -42,20 +37,17 @@ module.exports = function(grunt) {
 
     grunt.initConfig({
         watch: {
-            options: {
-                livereload: 35729
-            },
             js: {
                 files: ['public/**/*.js'],
-                tasks: ['shell']
+                tasks: ['copy:dist']
             },
             html: {
                 files: ['public/**/*.html'],
                 tasks: ['copy:dist']
             },
             css: {
-                files: ['public/**/*.css'],
-                tasks: ['copy:dist']
+                files: ['public/**/*.scss', 'public/**/*.css'],
+                tasks: ['sass', 'copy:dist']
             },
             image: {
                 files: ['public/**/*.{ico,gif,png}'],
@@ -66,10 +58,7 @@ module.exports = function(grunt) {
             server: {
                 options: {
                     port: 9999,
-                    base: 'public',
-                    keepalive: true,
-                    //logger: 'dev',
-                    //debug: true,
+                    base: distPath,
                     // change this to '0.0.0.0' to access the server from outside
                     hostname: '0.0.0.0',
                     middleware: function(connect, options, defaultMiddleware) {
@@ -93,55 +82,6 @@ module.exports = function(grunt) {
                     //xforward: false
                 }],
             },
-            livereload: {
-                options: {
-                    middleware: function(connect) {
-                        return [
-                            require('grunt-connect-proxy/lib/utils').proxyRequest,
-                            mountFolder(connect, 'public')
-                        ];
-                    }
-                }
-            },
-            dist: {
-                options: {
-                    middleware: function(connect) {
-                        return [
-                            mountFolder(connect, publicPath)
-                        ];
-                    }
-                }
-            }
-        },
-        concurrent: {
-            tasks: ['watch', 'connect'],
-            options: {
-                logConcurrentOutput: true
-            }
-        },
-        dist: distPath + '/js/app.min.js',
-        modules: grunt.file.expand(
-            modulesPath + 'js/app.js',
-            modulesPath + 'js/config.js',
-            modulesPath + 'js/routes.js',
-            modulesPath + 'js/init.js'
-        ).join(' '),
-        shell: {
-            min: {
-                command: ''
-                    /*command: 'java ' +
-                    '-cp ' + distPath + '/lib/closure-compiler/compiler.jar' + classPathSep +
-                    '' + distPath + '/lib/ng-closure-runner/ngcompiler.jar ' +
-                    'org.angularjs.closurerunner.NgClosureRunner ' +
-                    '--compilation_level SIMPLE_OPTIMIZATIONS ' +
-                    //'--formatting PRETTY_PRINT ' +
-                    '--language_in ECMASCRIPT5_STRICT ' +
-                    '--angular_pass ' +
-                    '--manage_closure_dependencies ' +
-                    '--js <%= modules %> ' +
-                    '--js_output_file <%= dist %>'
-        */
-            }
         },
         devUpdate: {
             main: {
@@ -186,7 +126,9 @@ module.exports = function(grunt) {
                     'd3': 'd3/d3.min.js',
                     'd3/': 'd3-tip/index.js',
                     'noty/js': 'noty/js/noty/packaged/jquery.noty.packaged.min.js',
-                    'dagre-d3': 'dagre-d3/dist/dagre-d3.min.js'
+                    'dagre-d3': 'dagre-d3/dist/dagre-d3.min.js',
+                    'jstree': 'jstree/dist/jstree.min.js',
+                    'select2': 'select2/dist/js/select2.min.js'
                 }
             },
             css: {
@@ -202,16 +144,23 @@ module.exports = function(grunt) {
                     'backgrid-paginator/css': 'backgrid-paginator/backgrid-paginator.css',
                     'backgrid-sizeable-columns/css': 'backgrid-sizeable-columns/backgrid-sizeable-columns.css',
                     'jquery-asBreadcrumbs/css': 'jquery-asBreadcrumbs/css/asBreadcrumbs.css',
-                    'noty/css': 'noty/js/noty/packaged/jquery.noty.packaged.min.js'
+                    'select2/css': 'select2/dist/css/select2.min.css'
                 }
 
             }
         },
+        sass: {
+            dist: {
+                files: {
+                    'dist/css/style.css': 'dist/css/scss/style.scss'
+                }
+            }
+        },
         copy: {
             dist: {
                 expand: true,
                 cwd: modulesPath,
-                src: ['**', 'js/**/*.js', '!modules/**/*.js'],
+                src: ['**', '!**/*.sass'],
                 dest: distPath
             }
         },
@@ -225,6 +174,7 @@ module.exports = function(grunt) {
 
     grunt.loadNpmTasks('grunt-connect-proxy');
     grunt.loadNpmTasks('grunt-contrib-connect');
+    grunt.loadNpmTasks('grunt-contrib-watch');
     grunt.loadNpmTasks('grunt-npmcopy');
 
 
@@ -243,17 +193,19 @@ module.exports = function(grunt) {
         'npmcopy:js',
         'npmcopy:css',
         'copy:dist',
+        'sass',
         'configureProxies:server',
         'connect:server',
-        'concurrent',
+        /* 'concurrent',*/
         'watch',
-        'connect:livereload'
+        /*'connect:livereload'*/
     ]);
 
     grunt.registerTask('build', [
         'npmcopy:js',
         'npmcopy:css',
-        'copy:dist'
+        'copy:dist',
+        'sass'
     ]);
 
     grunt.registerTask('minify', 'Minify the all js', function() {

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/package.json
----------------------------------------------------------------------
diff --git a/dashboardv2/package.json b/dashboardv2/package.json
index 9564566..dc92d3d 100644
--- a/dashboardv2/package.json
+++ b/dashboardv2/package.json
@@ -34,9 +34,11 @@
     "jquery": "^2.2.2",
     "jquery-asBreadcrumbs": "git+https://github.com/amazingSurge/jquery-asBreadcrumbs.git",
     "jquery-ui": "^1.10.4",
+    "jstree": "^3.3.0",
     "noty": "^2.3.8",
     "requirejs": "^2.1.16",
     "requirejs-text": "^2.0.12",
+    "select2": "^4.0.2",
     "underscore": "^1.8.3"
   },
   "devDependencies": {
@@ -57,6 +59,7 @@
     "grunt-nginx": "~0.2.2",
     "grunt-nodemon": "^0.4.0",
     "grunt-npmcopy": "^0.1.0",
+    "grunt-sass": "^1.1.0",
     "grunt-shell": "^1.1.1",
     "load-grunt-tasks": "^3.1.0",
     "proxit": "~0.6.4"

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/css/bootstrap-sidebar.css
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/bootstrap-sidebar.css b/dashboardv2/public/css/bootstrap-sidebar.css
index 788466b..5f9d5c3 100644
--- a/dashboardv2/public/css/bootstrap-sidebar.css
+++ b/dashboardv2/public/css/bootstrap-sidebar.css
@@ -21,10 +21,10 @@
 #sidebar-wrapper {
     z-index: 1000;
     position: fixed;
-    left: 300px;
+    left: 350px;
     width: 0;
     height: 100%;
-    margin-left: -300px;
+    margin-left: -350px;
     overflow-y: auto;
     background: #323544;
     -webkit-transition: all 0.5s ease;
@@ -34,7 +34,7 @@
 }
 
 #wrapper.toggled #sidebar-wrapper {
-    width: 300px;}
+    width: 350px;}
 
 #page-content-wrapper {
     width: 100%;
@@ -43,51 +43,40 @@
 
 #wrapper.toggled #page-content-wrapper {
     position: absolute;
-    margin-right: -300px;
+    margin-right: -350px;
 }
 
 /* Sidebar Styles */
-
-.sidebar-nav, .sidebar-components {
+.sidebar-nav {
     margin: 0;
     padding: 0;
     list-style: none;
 }
 
-.sidebar-nav li {
+.sidebar-nav > li {
     line-height: 50px;
     padding: 0 20px;
     border-bottom: 1px #1c1e2a solid;
 }
-.sidebar-components li {
-    line-height: 40px;
-    padding: 0 20px;
-}
-.sidebar-components li:hover {
-    background-color: #1d1f2b;
-}
-
-.sidebar-nav li a ,
-.sidebar-components li a {
+.sidebar-nav > li a {
     display: block;
     text-decoration: none;
     color: #fff;
 }
 
-.sidebar-nav li a:hover {
+.sidebar-nav > li a:hover {
     text-decoration: none;
     color: #fff;
 }
 
-.sidebar-nav li a:active,
-.sidebar-nav li a:focus {
+.sidebar-nav > li a:active,
+.sidebar-nav > li a:focus {
     text-decoration: none;
 }
 
 .sidebar-nav > .sidebar-brand {
     font-size: 18px;
-    line-height: 35px;
-    padding: 10px;
+    line-height: 60px;
 }
 
 .sidebar-nav > .sidebar-brand a {
@@ -100,18 +89,7 @@
     background: none;
 }
 
-/* Extended Eleemnts */
-.sidebar-actions a {
-    display: inline-block !important;
-    margin-right: 20px;
-    color: #359f89 !important;
-}
-.sidebar-actions a i {
-    color: #fff;
-}
-.sidebar-actions a:hover {
-    background-color: transparent;
-}
+/* Extended Elements */
 .sidebar-input .input-group {
     margin: 10px 0px;
 }
@@ -131,24 +109,10 @@
 .sidebar-input .form-control:focus + .input-group-addon {
     border-color: #66afe9;
 }
-.sidebar-item:hover,
-.sidebar-item.active {
-    background-color: #1d1f2b;
-}
-.component-badge {
-    float: right;
-    margin-top: 8px;
-    padding: 0px 10px 2px 10px;
-    background-color: #4990e2;
-    color: #fff;
-    font-size: 12px;
-    line-height: 22px;
-    border-radius: 12px;
-}
 
 @media(min-width:768px) {
     #wrapper {
-        padding-left: 300px;
+        padding-left: 350px;
     }
 
     #wrapper.toggled {
@@ -156,7 +120,7 @@
     }
 
     #sidebar-wrapper {
-        width: 300px;    }
+        width: 350px;    }
 
     #wrapper.toggled #sidebar-wrapper {
         width: 0;

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/css/business-catlog.css
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/business-catlog.css b/dashboardv2/public/css/business-catlog.css
deleted file mode 100644
index 780fa1a..0000000
--- a/dashboardv2/public/css/business-catlog.css
+++ /dev/null
@@ -1,206 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you 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.
- */
-
-body {
-    font-family: 'Raleway', sans-serif;
-    background-color: #E6E6E6;
-    /* color: #686868;*/
-}
-
-a {
-    color: #359f89;
-}
-
-header {
-    background-color: #fff;
-    border-bottom: 1px #e7e8ed solid;
-}
-
-textarea:focus,
-button:focus {
-    outline: none !important;
-}
-
-textarea {
-    resize: none;
-}
-
-
-/* Bootstrap Extended */
-
-.form-control:focus {
-    box-shadow: none;
-}
-
-.breadcrumb {
-    padding: 8px 25px;
-    background-color: transparent;
-    margin-bottom: 0px;
-    font-weight: 600;
-    line-height: 44px;
-}
-
-.breadcrumb>li+li:before {
-    padding: 0 10px;
-    font-family: FontAwesome;
-    color: #686868;
-    content: "\f105";
-}
-
-.well {
-    background-color: #f6f7fa;
-    border: 1px solid #e8e9ef;
-}
-
-
-/* Header */
-
-.main-search .form-control {
-    border: none;
-    border-left: 1px #e7e8ed solid;
-    border-radius: 0px;
-    box-shadow: none;
-    height: 60px;
-    font-size: 18px;
-    font-style: italic;
-    -webkit-font-smoothing: antialiased;
-}
-
-.main-search .input-group-addon {
-    font-size: 20px;
-    color: #b5b9bc;
-    background: none;
-    border: none;
-}
-
-.page-title {
-    background-color: #fff;
-    padding: 50px;
-}
-
-.page-title h1 {
-    margin-top: 0px;
-    margin-bottom: 20px;
-    font-weight: 600;
-    -webkit-font-smoothing: antialiased;
-}
-
-.page-title h1 small {
-    position: relative;
-    bottom: 5px;
-    margin-left: 15px;
-    padding-left: 15px;
-    border-left: 1px #e8e9ef solid;
-    color: #b4b7bc;
-    font-size: 40%;
-    font-weight: 600;
-    text-transform: uppercase;
-}
-
-.page-title .sub-title {
-    margin-bottom: 40px;
-}
-
-
-/* Atlas Specific */
-
-.atlast-tabbable {
-    margin: 50px 0px;
-}
-
-.atlast-tabbable .nav-tabs {
-    border-bottom: 1px solid #e8e9ee;
-}
-
-.atlast-tabbable .nav-tabs>li>a {
-    padding: 15px 30px;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    border-radius: 2px 2px 0 0;
-}
-
-.atlast-tabbable .nav-tabs>li.active>a,
-.atlast-tabbable .nav-tabs>li.active>a:focus,
-.atlast-tabbable .nav-tabs>li.active>a:hover {
-    border: 1px solid #e8e9ee;
-    border-bottom-color: transparent;
-}
-
-.atlast-tabbable .tab-content {
-    background-color: #fff;
-    padding: 35px;
-    border: 1px solid #e8e9ee;
-    border-top: none;
-}
-
-.btn-atlas {
-    padding: 10px 20px;
-    background-color: #fff;
-    color: #37bb9b;
-    border: 1px #37bb9b solid;
-    border-radius: 4px;
-    -webkit-transition: all .3s ease;
-    -moz-transition: all .3s ease;
-    transition: all .3s ease;
-}
-
-.btn-atlas:hover {
-    background-color: #37bb9b;
-    color: #fff;
-}
-
-.btn-tag {
-    color: #4a90e2;
-    border: 1px #4a90e2 solid;
-    background-color: #fff;
-    border-radius: 4px;
-    -webkit-transition: all .3s ease;
-    -moz-transition: all .3s ease;
-    transition: all .3s ease;
-}
-
-.btn-tag:hover {
-    color: #fff;
-    background-color: #4a90e2;
-}
-
-.breadcrumb > li {
-    display: inline-block;
-}
-
-.breadcrumb-dropdown + li:before,
-.breadcrumb-ellipsis + li:before {
-    display: none;
-}
-
-.breadcrumb-menu {
-    display: none
-}
-
-.sidebar-item.active i {
-    display: block !important;
-}
-
-.arrowPosition {
-    left: -75px;
-}
-
-.dropdown-menu>li>a {
-    color: #359f89;
-    padding: 6px 20px;
-}

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/css/fonts/fontawesome-webfont.svg
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/fonts/fontawesome-webfont.svg b/dashboardv2/public/css/fonts/fontawesome-webfont.svg
index 5603c72..d05688e 100644
--- a/dashboardv2/public/css/fonts/fontawesome-webfont.svg
+++ b/dashboardv2/public/css/fonts/fontawesome-webfont.svg
@@ -652,4 +652,4 @@
 <glyph unicode="&#xf29e;" horiz-adv-x="1792" />
 <glyph unicode="&#xf500;" horiz-adv-x="1792" />
 </font>
-</defs></svg>
\ No newline at end of file
+</defs></svg> 
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/css/fonts/glyphicons-halflings-regular.svg
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/fonts/glyphicons-halflings-regular.svg b/dashboardv2/public/css/fonts/glyphicons-halflings-regular.svg
index f155876..94fb549 100644
--- a/dashboardv2/public/css/fonts/glyphicons-halflings-regular.svg
+++ b/dashboardv2/public/css/fonts/glyphicons-halflings-regular.svg
@@ -285,4 +285,4 @@
 <glyph unicode="&#x1f511;" d="M250 1200h600q21 0 35.5 -14.5t14.5 -35.5v-400q0 -21 -14.5 -35.5t-35.5 -14.5h-150v-500l-255 -178q-19 -9 -32 -1t-13 29v650h-150q-21 0 -35.5 14.5t-14.5 35.5v400q0 21 14.5 35.5t35.5 14.5zM400 1100v-100h300v100h-300z" />
 <glyph unicode="&#x1f6aa;" d="M250 1200h750q39 0 69.5 -40.5t30.5 -84.5v-933l-700 -117v950l600 125h-700v-1000h-100v1025q0 23 15.5 49t34.5 26zM500 525v-100l100 20v100z" />
 </font>
-</defs></svg>
\ No newline at end of file
+</defs></svg> 
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/css/override.css
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/override.css b/dashboardv2/public/css/override.css
deleted file mode 100644
index e3ebb10..0000000
--- a/dashboardv2/public/css/override.css
+++ /dev/null
@@ -1,204 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you 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.
- */
-
-#old header a.mainLogo {
-    color: #FFF;
-    font-size: 16px;
-    line-height: 40px;
-    padding: 2px 5px 0 15px;
-    text-shadow: 0 1px 0 #555;
-}
-
-#old footer.navbar-bottom {
-    background-color: #fafafa;
-    border-top: solid 4px #444;
-    position: absolute;
-    bottom: 0px;
-    width: 100%;
-    height: 60px;
-}
-
-#old .footer {
-    padding: 7px;
-}
-
-#old .tab a {
-    color: #000;
-}
-
-#old .backgrid th {
-    text-align: left;
-}
-
-#old .backgrid a,
-#old table a {
-    color: #428bca;
-}
-
-.backgrid th {
-    text-transform: capitalize;
-}
-
-#old .fa-refresh {
-    color: #333;
-}
-
-#old .tagList a {
-    display: inline-block;
-    text-transform: capitalize;
-    background: #ADD8E6 !important;
-    color: #333 !important;
-    padding: 3px 6px;
-    margin: 0px 3px 3px 0px;
-    cursor: pointer;
-    float: left;
-}
-
-#old .tagList a i.fa[data-id="delete"] {
-    margin-left: 5px;
-}
-
-#old .scrollTagList .list-group-item {
-    word-break: break-all;
-}
-
-
-/*
-#old .tagList a {
-    max-width: 100px;
-    display: list-item;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    -o-text-overflow: ellipsis;
-    white-space: nowrap;
-    text-transform: capitalize;
-    float: left;
-    background: #ADD8E6 !important;
-    color: #000 !important;
-    margin: 4px !important;
-    padding-left: 7px !important;
-    padding-right: 7px !important;
-    cursor: pointer;
-}*/
-
-#new footer {
-    display: none;
-}
-
-.nav-tabs > li.active > a,
-.nav-tabs > li.active > a:focus,
-.nav-tabs > li.active > a:hover {
-    border-width: 0;
-}
-
-.nav-tabs > li > a {
-    border: none;
-    color: #666;
-}
-
-.nav-tabs > li.active > a,
-.nav-tabs > li > a:hover {
-    border: none;
-    color: #359f89 !important;
-}
-
-.nav-tabs > li > a:after {
-    content: "";
-    background: #359f89;
-    height: 2px;
-    position: absolute;
-    width: 100%;
-    left: 0px;
-    top: -1px;
-    transition: all 250ms ease 0s;
-    transform: scale(0);
-}
-
-.nav-tabs > li > a:hover:after {
-    background: #359f89;
-}
-
-.nav-tabs > li.active > a:after,
-.nav-tabs > li:hover > a:after {
-    transform: scale(1);
-}
-
-.tab-nav > li > a:after {
-    background: #21527d none repeat scroll 0% 0%;
-    color: #fff;
-}
-
-.tab-pane {
-    padding: 15px 0;
-}
-
-.sidebar-nav .dropdown-menu li {
-    border-bottom: none;
-    color: #323544;
-}
-
-.sidebar-nav .dropdown-menu li a:hover,
-.sidebar-nav .dropdown-menu li a {
-    color: #323544;
-}
-
-.sidebar-nav .dropdown-menu li:hover {
-    background: #E4E4E4;
-}
-
-.sidebar-nav .dropdown-menu:after {
-    position: absolute;
-    top: -6px;
-    left: 10px;
-    display: inline-block;
-    border-right: 6px solid transparent;
-    border-bottom: 6px solid #ffffff;
-    border-left: 6px solid transparent;
-    content: '';
-}
-
-.breadcrumb-ellipsis {
-    color: #359f89;
-    cursor: pointer;
-    display: none !important;
-}
-
-.breadcrumb>li:last-child a {
-    color: #b4b7bc;
-}
-
-.atlas-tag .select2-selection__choice {
-    padding: 3px 6px !important;
-    background-color: #4a90e2 !important;
-    color: #fff !important;
-    font-size: 12px;
-    text-transform: uppercase;
-    border-radius: 4px;
-}
-
-.atlas-tag .select2-selection__choice__remove {
-    font-size: 17px;
-    line-height: 14px;
-    margin: 0px 6px !important;
-    color: #fff !important;
-    float: right;
-}
-
-.breadcrumb-dropdown .popover.bottom {
-    margin-top: 35px;
-}

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/css/scss/breadcrumb.scss
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/scss/breadcrumb.scss b/dashboardv2/public/css/scss/breadcrumb.scss
new file mode 100644
index 0000000..eaa89e7
--- /dev/null
+++ b/dashboardv2/public/css/scss/breadcrumb.scss
@@ -0,0 +1,43 @@
+/*  breadcrumb.scss */
+
+.breadcrumb {
+    padding: 8px 25px;
+    background-color: transparent;
+    margin-bottom: 0;
+    font-weight: 600;
+    line-height: 44px;
+    > li {
+        display: inline-block;
+        + li:before {
+            padding: 0 10px;
+            font-family: $font_2;
+            color: $color_ironside_gray_approx;
+            content: "\f105";
+        }
+    }
+}
+
+.breadcrumb-menu,
+.breadcrumb-dropdown + li:before,
+.breadcrumb-ellipsis + li:before {
+    display: none;
+}
+
+.dropdown .fa-ellipsis-h {
+    position: relative;
+    top: 4px;
+}
+
+.breadcrumb-ellipsis {
+    color: #359f89;
+    cursor: pointer;
+    display: none !important;
+}
+
+.breadcrumb-dropdown .popover.bottom {
+    margin-top: 45px;
+}
+
+.breadcrumb>li:last-child a {
+    color: #b4b7bc;
+}

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/css/scss/business-catlog.scss
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/scss/business-catlog.scss b/dashboardv2/public/css/scss/business-catlog.scss
new file mode 100644
index 0000000..d00a32b
--- /dev/null
+++ b/dashboardv2/public/css/scss/business-catlog.scss
@@ -0,0 +1,97 @@
+/* business-catlog.scss */
+.main-search {
+    .form-control {
+        border: none;
+        border-left: 1px $color_mystic_approx solid;
+        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+        border-radius: 0;
+        //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
+        box-shadow: none;
+        height: 60px;
+        font-size: 18px;
+        font-style: italic;
+    }
+    .input-group-addon {
+        font-size: 20px;
+        color: $color_bombay_approx;
+        background: none;
+        border: none;
+    }
+}
+
+.page-title {
+    background-color: $white;
+    padding: 50px;
+    h1 {
+        margin-top: 0;
+        margin-bottom: 20px;
+        font-weight: 600;
+        small {
+            position: relative;
+            bottom: 5px;
+            margin-left: 15px;
+            padding-left: 15px;
+            border-left: 1px $color_mystic_approx solid;
+            color: $color_bombay_approx;
+            font-size: 40%;
+            font-weight: 600;
+            text-transform: uppercase;
+        }
+    }
+    .sub-title {
+        margin-bottom: 40px;
+    }
+}
+
+.arrowPosition {
+    left: -75px;
+}
+
+.sidebar-item.active i {
+    display: block !important;
+}
+
+.dropdown-menu > li > a {
+    color: $color_jungle_green_approx;
+    padding: 6px 20px;
+}
+
+.branchListParent {
+    .parentActive {
+        background: none;
+    }
+    .fa {
+        line-height: 40px;
+    }
+}
+
+ul[data-id=branchList] {
+    .fa {
+        line-height: 40px;
+    }
+    li {
+        padding-left: 50px;
+    }
+}
+
+.branchChildDiv {
+    padding-left: 15px;
+}
+
+.branchListParentInput {
+    padding-bottom: 18px;
+    display: list-item;
+    .form-control {
+        border-right: none;
+        //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
+        box-shadow: none;
+        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+        border-radius: 4px;
+    }
+    .input-group-addon {
+        background-color: $white;
+    }
+}
+.listTerm{
+    padding-bottom:5px;
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/css/scss/form.scss
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/scss/form.scss b/dashboardv2/public/css/scss/form.scss
new file mode 100644
index 0000000..f5f9672
--- /dev/null
+++ b/dashboardv2/public/css/scss/form.scss
@@ -0,0 +1,186 @@
+/* form.scss */
+
+.form-control {
+    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+    background-color: $color_white_lilac_approx;
+    border: 1px $color_mystic_approx solid;
+    &:focus {
+        border-color: $color_bali_hai_approx;
+        outline: 0;
+        //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
+        box-shadow: inset 0 1px 1px $black_7_5, 0 0 2px $color_bali_hai_approx;
+    }
+}
+
+.sidebar-wrapper .form-control {
+    background-color: $white;
+    border: 1px $white solid;
+}
+
+.well {
+    background-color: $color_whisper_approx;
+    border: 1px solid $color_mystic_approx;
+}
+
+textarea {
+    resize: none;
+    &:focus {
+        outline: none !important;
+    }
+}
+
+button:focus {
+    outline: none !important;
+}
+
+.btn {
+    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+    border-radius: 0;
+}
+
+.btn-primary {
+    color: $white;
+    background-color: $color_blue_bayoux_approx;
+    border-color: $color_blue_bayoux_approx;
+    &:hover {
+        color: $white;
+        background-color: $color_pickled_bluewood_approx;
+        border-color: $color_pickled_bluewood_approx;
+    }
+}
+
+.btn-success {
+    color: $white;
+    background-color: $color_jungle_green_approx;
+    border-color: $color_jungle_green_approx;
+    &:hover {
+        color: $white;
+        background-color: $color_jungle_green_approx;
+        border-color: $color_jungle_green_approx;
+    }
+}
+
+.btn-info {
+    color: $white;
+    background-color: $color_picton_blue_approx;
+    border-color: $color_picton_blue_approx;
+    &:hover {
+        color: $white;
+        background-color: $color_curious_blue_approx;
+        border-color: $color_curious_blue_approx;
+    }
+}
+
+.btn-warning {
+    color: $white;
+    background-color: $color_yellow_sea_approx;
+    border-color: $color_yellow_sea_approx;
+    &:hover {
+        color: $white;
+        background-color: $color_gamboge_approx;
+        border-color: $color_gamboge_approx;
+    }
+}
+
+.btn-danger {
+    color: $white;
+    background-color: $color_trinidad_approx;
+    border-color: $color_trinidad_approx;
+    &:hover {
+        color: $white;
+        background-color: $color_grenadier_approx;
+        border-color: $color_grenadier_approx;
+    }
+}
+
+.btn-atlas {
+    padding: 10px 20px;
+    background-color: $color_keppel_approx;
+    color: $white;
+    border: 1px $color_keppel_approx solid;
+    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+    border-radius: 4px;
+    //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
+    transition: all .3s ease;
+    margin:2px;
+    &.cancel {
+        background-color: $transparent;
+        color: $color_keppel_approx;
+        &:hover {
+            color: $color_keppel_approx;
+            background-color: $transparent;
+        }
+        &:focus {
+            background-color: $transparent;
+            color: $color_keppel_approx;
+        }
+    }
+    &:focus {
+        background-color: $color_keppel_approx;
+        color: $white;
+    }
+    &:hover {
+        color: $white;
+    }
+}
+
+.btn-tag {
+    color: $color_havelock_blue_approx;
+    border: 1px $color_havelock_blue_approx solid;
+    background-color: $white;
+    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+    border-radius: 4px;
+    //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
+    transition: all .3s ease;
+    &:hover {
+        color: $white;
+        background-color: $color_havelock_blue_approx;
+    }
+}
+
+.btn-taxanomyBack {
+    background-color: $transparent;
+    color: $color_keppel_approx;
+    margin-bottom: 10px;
+    &:hover {
+        color: $color_keppel_approx;
+    }
+    &:focus {
+        background-color: $transparent;
+        color: $color_keppel_approx;
+    }
+}
+
+.input-spacing {
+    padding-bottom: 10px!important;
+}
+.input-group-btn .glyphicon {
+    top: 2px;
+}
+.pagination > .active {
+    > a {
+        background-color: $color_curious_blue_approx;
+        border-color: $color_curious_blue_approx;
+        &:focus {
+            background-color: $color_curious_blue_approx;
+            border-color: $color_curious_blue_approx;
+        }
+        &:hover {
+            background-color: $color_curious_blue_approx;
+            border-color: $color_curious_blue_approx;
+        }
+    }
+    
+    > span {
+        background-color: $color_curious_blue_approx;
+        border-color: $color_curious_blue_approx;
+        &:focus {
+            background-color: $color_curious_blue_approx;
+            border-color: $color_curious_blue_approx;
+        }
+        &:hover {
+            background-color: $color_curious_blue_approx;
+            border-color: $color_curious_blue_approx;
+        }
+    }
+}

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/css/scss/graph.scss
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/scss/graph.scss b/dashboardv2/public/css/scss/graph.scss
new file mode 100644
index 0000000..ec6df2d
--- /dev/null
+++ b/dashboardv2/public/css/scss/graph.scss
@@ -0,0 +1,76 @@
+/* graph.scss */
+/* .graph-bg svg {
+    background-image: linear-gradient(to right, $black -10px, rgba(0, 0, 0, 0) 1px), linear-gradient($black -10px, $color_cararra_approx 1px);
+    background-size: 10px 10px;
+    position: relative;
+} */
+
+.node {
+    cursor: pointer;
+    circle {
+        fill: $white;
+        stroke: $steel_blue;
+        stroke-width: 1.5px;
+    }
+    text {
+        font-size: 10px;
+        font-family: $font_1;
+    }
+    rect {
+        stroke: $color_mountain_mist_approx;
+        fill: $white;
+        stroke-width: 1.5px;
+    }
+    .label {
+        fill: $color_suva_gray_approx;
+    }
+}
+
+.overlay {}
+
+.link {
+    fill: none;
+    stroke: $color_celeste_approx;
+    stroke-width: 1.5px;
+}
+
+.d3-tip {
+    line-height: 1;
+    font-weight: bold;
+    padding: 12px;
+    background: $black_80;
+    color: $white;
+    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+    border-radius: 2px;
+    &:after {
+        //Instead of the line below you could use @include box-sizing($bs)
+        box-sizing: border-box;
+        display: inline;
+        font-size: 10px;
+        width: 100%;
+        line-height: 1;
+        color: $black_80;
+        content: "\25BC";
+        position: absolute;
+        text-align: center;
+    }
+    &.n:after {
+        margin: -1px 0 0;
+        top: 100%;
+        left: 0;
+    }
+}
+
+g.type-TK > rect {
+    fill: $color_bright_turquoise_approx;
+}
+
+.edgePath path {
+    stroke: $black;
+}
+
+.zoomButtonGroup {
+    position: absolute;
+    top: 4px;
+    right: 5px;
+}

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/css/scss/loader.scss
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/scss/loader.scss b/dashboardv2/public/css/scss/loader.scss
new file mode 100644
index 0000000..6c255c6
--- /dev/null
+++ b/dashboardv2/public/css/scss/loader.scss
@@ -0,0 +1,57 @@
+/* loader.scss */
+
+.fa-spin-custom {
+    animation: spin 1000ms infinite linear;
+}
+
+.glyphicon-spin {
+    animation: spin 1000ms infinite linear;
+}
+
+@-webkit-keyframes spin {
+    0% {
+        //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
+        transform: rotate(0deg);
+    }
+    100% {
+        //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
+        transform: rotate(359deg);
+    }
+}
+
+@keyframes spin {
+    0% {
+        //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
+        transform: rotate(0deg);
+    }
+    100% {
+        //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
+        transform: rotate(359deg);
+    }
+}
+
+.loader {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    text-align: center;
+    z-index: 9;
+    background: $white_80 $url_0 no-repeat center center;
+}
+
+.fontLoader {
+    top: 50%;
+    left: 50%;
+    position: absolute;
+    display: none;
+}
+
+.initialLoading {
+    display: block;
+    position: absolute;
+    margin-top: 30%;
+    right: 50%;
+    height: 60px;
+}

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/css/scss/login.scss
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/scss/login.scss b/dashboardv2/public/css/scss/login.scss
new file mode 100644
index 0000000..c7237cc
--- /dev/null
+++ b/dashboardv2/public/css/scss/login.scss
@@ -0,0 +1,71 @@
+/* login.scss */
+
+//colors
+.errorBox {
+    position: absolute;
+    right: 36px;
+    display: none;
+    top: 26px;
+    width: 251px;
+    .alert {
+        //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
+        box-shadow: 4px 3px 8px -2px $gray;
+    }
+}
+.close {
+    padding: 6px;
+    font-size: 15px;
+}
+.login-pane {
+    margin-top: 50px;
+    margin-top: 35%;
+    background: $color_tuna_approx;
+    color: $color_gallery_approx;
+    padding: 15px;
+    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+    border-radius: 5px;
+    h2 {
+        margin-bottom: 40px;
+    }
+    .input-group {
+        margin: 20px 0;
+    }
+    .form-control {
+        background-color: transparent;
+        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+        border-radius: 0;
+        border-left: none;
+        color: $color_gallery_approx;
+        &:focus {
+            border-color: $color_celeste_approx;
+            + .input-group-addon {
+                border-color: $color_cornflower_blue_approx;
+            }
+        }
+    }
+    .input-group-addon {
+        background-color: transparent;
+        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+        border-radius: 0;
+        border-right: none;
+        color: $color_celeste_approx;
+    }
+    .btn-atlas {
+        padding: 10px 20px;
+        background-color: $color_keppel_approx;
+        color: $white;
+        border: 1px $color_keppel_approx solid;
+        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+        border-radius: 4px;
+        //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
+        transition: all .3s ease;
+    }
+}
+button:focus {
+    outline: none !important;
+}
+.form-control:focus {
+    //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
+    box-shadow: none;
+}
+ 

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/css/scss/main.scss
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/scss/main.scss b/dashboardv2/public/css/scss/main.scss
new file mode 100644
index 0000000..9ee1640
--- /dev/null
+++ b/dashboardv2/public/css/scss/main.scss
@@ -0,0 +1,147 @@
+/* main.scss */
+
+//common color 
+$white: #fff;
+$action_gray:#ccc;
+$color_keppel_approx: #37bb9b;
+$color_gallery_approx: #eee;
+$gray: #808080;
+$color_tuna_approx: #323544;
+$color_celeste_approx: #ccc;
+$color_cornflower_blue_approx: #66afe9;
+$color_mystic_approx: #e8e9ee;
+$color_jungle_green_approx: #38BB9B;
+$color_froly_approx: #ee6e73;
+$color_manatee_approx: #9398a0;
+$black: #000;
+$color_havelock_blue_approx: #4a90e2;
+$color_ironside_gray_approx: #686868;
+$color_mercury_approx: #e6e6e6;
+$color_whisper_approx: #f6f7fa;
+$color_bombay_approx: #b5b9bc;
+$red: red;
+//theme color
+//colors
+$color_white_lilac_approx: #f6f7fb;
+$color_puerto_rico_approx: #3dd4af;
+$color_star_dust_approx: #9a9a9a;
+$color_mirage_approx: #1c1e2a;
+$concrete: #f2f2f2;
+//fonts
+$font_0: Raleway;
+$font_1: sans-serif;
+$font_2: FontAwesome;
+//fonts
+
+/* $font_0: PT Sans;
+$font_1: sans-serif;
+$font_2: Helvetica Neue; */
+
+$font_3: Helvetica;
+$font_4: Arial;
+$font_5: sans-serf;
+//old - style color
+$color_bali_hai_approx: #8fa5b1;
+$transparent:transparent;
+$black_7_5: rgba(0, 0, 0, .075);
+$color_hoki_approx: #698797;
+$color_curious_blue_approx: #1ba9e2;
+$color_blue_bayoux_approx: #44697d;
+$color_pickled_bluewood_approx: #334f5e;
+$color_picton_blue_approx: #3cb5e6;
+$color_yellow_sea_approx: #f5a700;
+$color_gamboge_approx: #de9800;
+$color_trinidad_approx: #e14f00;
+$color_grenadier_approx: #c74600;
+$color_athens_gray_approx: #e9ecf2;
+$color_green_house_approx: #26530c;
+$color_dark_grey_approx:#333;
+$black_10: rgba(0, 0, 0, 0.1);
+$color_cararra_approx: #ececec;
+$black_30: rgba(0, 0, 0, 0.3);
+$color_pizazz_approx: #ff8e00;
+$black_25: rgba(0, 0, 0, 0.25);
+$color_cape_cod_approx: #414141;
+$color_apple_blossom_approx: #a94442;
+$color_mine_shaft_approx: #333;
+$white_80: rgba(255, 255, 255, 0.8);
+$color_alto_approx: #dadada;
+$color_fuscous_gray_approx: #545454;
+$black_65: rgba(0, 0, 0, 0.65);
+$white_25: rgba(255, 255, 255, 0.25);
+$color_fern_approx: #65bd63;
+$color_opal_approx: #a7cec6;
+$white_50: rgba(255, 255, 255, 0.5);
+$black_20: rgba(0, 0, 0, 0.2);
+$color_pelorous_approx: #3aa2d0;
+$color_laser_approx: #c4bb61;
+$color_zombie_approx: #e0dd94;
+$steel_blue: steelblue;
+$black_80: rgba(0, 0, 0, 0.8);
+$color_bright_turquoise_approx: #00ffd0;
+$color_mountain_mist_approx: #999;
+$color_suva_gray_approx: #868686;
+// $tag_color:#9599a0;
+$tag_color:#4A90E2;
+//urls
+$url_0: url(../img/loading.gif);
+.card {
+    background: $white none repeat scroll 0 0;
+    //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
+    box-shadow: 0 1px 3px $black_30;
+    margin-bottom: 30px;
+}
+
+body {
+    font-family: $font_0, $font_1;
+    color: $color_ironside_gray_approx;
+}
+
+.gray-bg {
+    background-color: $color_white_lilac_approx;
+}
+
+header {
+    background-color: $white;
+    border-bottom: 1px $color_mystic_approx solid;
+}
+
+a {
+    color: $color_jungle_green_approx;
+    &:focus {
+        color: $color_puerto_rico_approx;
+        text-decoration: none;
+        outline: none;
+    }
+    &:hover {
+        color: $color_puerto_rico_approx;
+        text-decoration: none;
+    }
+}
+
+hr {
+    border-top: 1px solid #1c1e2a
+}
+
+ul {
+    list-style: none;
+}
+
+.close {
+    font-size: 2em;
+}
+
+#sideNav-wrapper {
+    color: $white;
+}
+
+.contentLoading {
+    position: absolute;
+    background: rgba(247, 247, 247, 0.24);
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: 99;
+    bottom: 0;
+    display: none;
+}

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/css/scss/nav.scss
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/scss/nav.scss b/dashboardv2/public/css/scss/nav.scss
new file mode 100644
index 0000000..7277ae1
--- /dev/null
+++ b/dashboardv2/public/css/scss/nav.scss
@@ -0,0 +1,50 @@
+/* nav.scss */
+
+.navbar-atlas {
+    background-color: $color_tuna_approx;
+    //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
+    box-shadow: inset 0 0 0 $black_10, 0 1px 10px $black_10;
+    .navbar-brand {
+        color: $white;
+    }
+    .nav > li > a {
+        color: $white;
+        padding-top: 18px;
+        padding-bottom: 18px;
+        font-size: 100%;
+        &:focus {
+            background-color: transparent;
+        }
+        &:hover {
+            background-color: transparent;
+        }
+    }
+}
+
+.navbar-toggle .icon-bar {
+    background-color: $white;
+}
+
+.navbar-fixed-top + .wrapper {
+    margin-top: 90px;
+    padding-bottom: 90px;
+}
+
+.navbar-brand {
+    font-size: 30px;
+    height: auto;
+}
+
+.navbar-form {
+    width: 30%;
+    padding: 0;
+    .form-control {
+        width: 100%;
+        padding: 6px 0;
+        background-color: transparent;
+        color: $white;
+        border: none;
+        //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
+        box-shadow: 0 2px $white;
+    }
+}

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/css/scss/old-style.scss
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/scss/old-style.scss b/dashboardv2/public/css/scss/old-style.scss
new file mode 100644
index 0000000..f62c494
--- /dev/null
+++ b/dashboardv2/public/css/scss/old-style.scss
@@ -0,0 +1,161 @@
+/* old-style.scss */
+
+//@extend-elements
+//original selectors
+//.inputs button.addAttr, .inputs button.saveAttr
+%extend_1 {
+    height: 40px;
+    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+    border-radius: 4px;
+    border: 1px solid $white;
+    color: $white;
+    //Instead of the line below you could use @include text-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
+    text-shadow: 0 -1px 0 $black_25;
+    font-weight: bold;
+}
+
+.row-margin-bottom {
+    margin-bottom: 15px;
+}
+
+.list-group-item {
+    &:first-child {
+        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+        border-radius: 0;
+    }
+    &:last-child {
+        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+        border-radius: 0;
+    }
+}
+
+.h160 {
+    height: 160px !important;
+}
+
+.subContent {
+    width: 500px;
+    margin: 30px;
+}
+
+.headerDroupDown {
+    border-left: 1px solid $white;
+    font-size: 11px;
+    padding-left: 15px;
+    margin-left: 15px;
+}
+
+
+/* .switch {
+    float: left;
+    margin-top: 4px;
+    position: absolute;
+    z-index: 99;
+    top: 0;
+    left: 20px;
+    height: 26px;
+    width: 120px;
+    background: $color_alto_approx;
+    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+    border-radius: 3px;
+    //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
+    box-shadow: inset 0 1px 3px $color_fuscous_gray_approx, 0 1px $white;
+} */
+
+
+/* .switch-label {
+    position: relative;
+    z-index: 2;
+    float: left;
+    width: 58px;
+    line-height: 26px;
+    font-size: 11px;
+    text-align: center;
+    cursor: pointer;
+    &:active {
+        font-weight: bold;
+    }
+}
+
+.switch-label-off {
+    padding-left: 2px;
+}
+
+.switch-label-on {
+    padding-right: 2px;
+}
+
+.switch-input {
+    display: none;
+    &:checked + {
+        &.switch-label {
+            font-weight: bold;
+            color: $black_65;
+            //Instead of the line below you could use @include text-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
+            text-shadow: 0 1px $white_25;
+            //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
+            transition: 0.15s ease-out;
+        }
+        &.switch-label-on ~ .switch-selection {
+            left: 60px;
+        }
+    }
+}
+
+.switch-selection {
+    display: block;
+    position: absolute;
+    z-index: 1;
+    top: 2px;
+    left: 2px;
+    width: 58px;
+    height: 22px;
+    background: $color_fern_approx;
+    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+    border-radius: 3px;
+    background-image: linear-gradient(to bottom, $color_opal_approx, $color_jungle_green_approx);
+    background-image: linear-gradient(to bottom, $color_opal_approx, $color_jungle_green_approx);
+    //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
+    box-shadow: inset 0 1px $white_50, 0 0 2px $black_20;
+    //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
+    transition: left 0.15s ease-out;
+} */
+
+.scrollTagList {
+    height: 330px;
+    overflow-y: auto;
+    margin-bottom: 0;
+    i.fa {
+        margin-right: 5px;
+    }
+}
+
+.menuItem {
+    padding: 10px;
+    color: $color_havelock_blue_approx;
+    cursor: pointer;
+}
+
+.tagging {
+    display: inline-block;
+}
+
+.crossClearText {
+    line-height: 20px !important;
+}
+
+text {
+    font-weight: 300;
+    font-family: $font_2, $font_3, $font_4, $font_5;
+    font-size: 14px;
+}
+
+.switch-blue .switch-selection {
+    background: $color_pelorous_approx;
+    background-image: linear-gradient(to bottom, $color_picton_blue_approx, $color_pelorous_approx);
+}
+
+.switch-yellow .switch-selection {
+    background: $color_laser_approx;
+    background-image: linear-gradient(to bottom, $color_zombie_approx, $color_laser_approx);
+}

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/css/scss/override.scss
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/scss/override.scss b/dashboardv2/public/css/scss/override.scss
new file mode 100644
index 0000000..49f0810
--- /dev/null
+++ b/dashboardv2/public/css/scss/override.scss
@@ -0,0 +1,72 @@
+/* override.scss */
+
+.tabs li.tab.active {
+    border-bottom: 2px solid $color_keppel_approx;
+    a {
+        color: $color_keppel_approx;
+    }
+}
+
+.modal-header {
+    padding: 8px 15px;
+    border-bottom: 1px solid #DEDEDE;
+}
+
+.modal-title {
+    font-weight: 600;
+    -webkit-font-smoothing: antialiased;
+}
+
+.modal-footer {
+    padding: 15px;
+    text-align: right;
+    border: none;
+}
+
+.modal-body {
+    position: relative;
+    padding: 15px;
+}
+
+.cancel {
+    float: left;
+}
+
+.switch.pull-left {
+    margin-right: 8px;
+}
+
+.modal-content {
+    border-radius: 10px;
+}
+
+.table-quickMenu {
+    border: 1px #ddd solid;
+    overflow: visible !important;
+}
+
+.table-quickMenu>thead>tr>th {
+    border-bottom-width: 0px;
+    padding: 24px 8px;
+    background-color: transparent;
+    text-align: left;
+}
+
+.backgrid-paginator ul > li > a:hover,
+.backgrid-paginator ul > .active > a,
+.backgrid-paginator ul > .active > span {
+    background-color: #2EBC9A !important;
+    color: #fff !important;
+    &:hover {
+        background-color: none;
+    }
+}
+
+.backgrid-paginator ul {
+    display: inline-block;
+    padding-left: 0;
+    margin: 20px 0;
+    border-radius: 4px;
+    border: 1px #DDDDDD solid;
+}
+

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/css/scss/panel.scss
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/scss/panel.scss b/dashboardv2/public/css/scss/panel.scss
new file mode 100644
index 0000000..ee85715
--- /dev/null
+++ b/dashboardv2/public/css/scss/panel.scss
@@ -0,0 +1,25 @@
+/* panel.scss */
+.panel {
+    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+    border-radius: 0;
+}
+
+.panel-primary {
+    border-color: $color_hoki_approx;
+    > .panel-heading {
+        color: $white;
+        background-color: $color_hoki_approx;
+        border-color: $color_hoki_approx;
+        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+        border-radius: 0;
+    }
+}
+
+.appForm {
+    .panel-body {
+        padding-bottom: 0;
+    }
+    .panel-footer {
+        margin-bottom: 0;
+    }
+}

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/css/scss/search.scss
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/scss/search.scss b/dashboardv2/public/css/scss/search.scss
new file mode 100644
index 0000000..858b974
--- /dev/null
+++ b/dashboardv2/public/css/scss/search.scss
@@ -0,0 +1,75 @@
+//colors
+$color_celeste_approx: #1D1F2B;
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 50px;
+    height: 22px;
+    margin-left: 8px;
+    input {
+        display: none;
+    }
+}
+
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: $color_celeste_approx;
+    //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
+    transition: .4s;
+    &:before {
+        position: absolute;
+        content: "";
+        height: 16px;
+        width: 16px;
+        left: 4px;
+        bottom: 3px;
+        background-color: $color_jungle_green_approx;
+        //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
+        transition: .4s;
+    }
+    &.round {
+        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+        border-radius: 34px;
+        &:before {
+            //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+            border-radius: 50%;
+        }
+    }
+}
+
+input {
+    &:checked + .slider {
+        background-color: $color_celeste_approx;
+        &:before {
+            //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
+            transform: translateX(26px);
+        }
+    }
+    &:focus + .slider {
+        //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
+        box-shadow: 0 0 1px $color_celeste_approx;
+    }
+}
+
+.advanceSearchBtn {
+    float: right;
+}
+
+.advanceSearchTagInput {
+    margin-bottom: 20px;
+}
+
+.advanceSearchTermInput {
+    margin-bottom: 20px;
+}
+.clearAdvanceSearch {
+    display: inline-block;
+    float: left;
+    margin-top: 10px;
+    cursor: pointer
+}

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/css/scss/style.scss
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/scss/style.scss b/dashboardv2/public/css/scss/style.scss
new file mode 100644
index 0000000..c7085cc
--- /dev/null
+++ b/dashboardv2/public/css/scss/style.scss
@@ -0,0 +1,34 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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.
+ */
+
+@import "main.scss";
+@import "tab.scss";
+@import "form.scss";
+@import "nav.scss";
+@import "panel.scss";
+@import "loader.scss";
+@import "graph.scss";
+@import "breadcrumb.scss";
+//@import "login.scss";
+@import "business-catlog.scss";
+@import "old-style.scss";
+@import "theme.scss";
+@import "tree.scss";
+@import "tag.scss";
+@import "search.scss";
+@import "override.scss";

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/css/scss/tab.scss
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/scss/tab.scss b/dashboardv2/public/css/scss/tab.scss
new file mode 100644
index 0000000..648e38d
--- /dev/null
+++ b/dashboardv2/public/css/scss/tab.scss
@@ -0,0 +1,133 @@
+/* tab.scss */
+.atlast-tabbable {
+    margin: 50px 0;
+    .nav-tabs {
+        border-bottom: 1px solid $color_mystic_approx;
+        > li {
+            > a {
+                padding: 15px 30px;
+                text-transform: uppercase;
+                letter-spacing: 1px;
+                //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+                border-radius: 2px 2px 0 0;
+            }
+            &.active > a {
+                border: 1px solid $color_mystic_approx;
+                border-bottom-color: transparent;
+                &:focus {
+                    border: 1px solid $color_mystic_approx;
+                    border-bottom-color: transparent;
+                }
+                &:hover {
+                    border: 1px solid $color_mystic_approx;
+                    border-bottom-color: transparent;
+                }
+            }
+        }
+    }
+    .tab-content {
+        background-color: $white;
+        padding: 35px;
+        border: 1px solid $color_mystic_approx;
+        border-top: none;
+    }
+}
+
+ul.tabs li.tab {
+    padding: 0;
+}
+
+.tagsList .atlast-tabbable {
+    margin: 0;
+    .tab-content {
+        padding: 10px 22px;
+    }
+    .nav-tabs > li > a {
+        padding: 10px 20px;
+    }
+}
+
+// NEW theme style
+.tabs {
+    position: relative;
+    height: 42px;
+    width: 100%;
+    white-space: nowrap;
+    padding: 0;
+    transition: color 0.28s ease;
+    .indicator {
+        position: absolute;
+        bottom: 0;
+        height: 2px;
+        background-color: $color_keppel_approx;
+        will-change: left, right;
+    }
+    li.tab {
+        display: block;
+        float: left;
+        text-align: center;
+        line-height: 42px;
+        height: 42px;
+        padding: 0 20px;
+        margin: 0;
+        text-transform: uppercase;
+        letter-spacing: 0.8px;
+        border-bottom: 1px solid $color_mirage_approx;
+        a {
+            font-size: 12px;
+            font-weight: 600;
+            color: $white;
+            display: block;
+            text-decoration: none;
+            width: 100%;
+            height: 100%;
+            //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
+            transition: color 0.28s ease;
+           /*  color: $color_manatee_approx; */
+         /*    &:hover {
+                color: $color_keppel_approx;
+            }
+            &.active {
+                color: $color_keppel_approx;
+            } */
+        }
+    }
+}
+
+.tab-pane {
+    padding: 25px;
+}
+
+.atlast-tabbable {
+    margin: 50px 0;
+    .nav-tabs {
+        border-bottom: 1px solid $color_mystic_approx;
+        > li {
+            > a {
+                padding: 15px 30px;
+                text-transform: uppercase;
+                letter-spacing: 1px;
+                //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+                border-radius: 2px 2px 0 0;
+            }
+            &.active > a {
+                border: 1px solid $color_mystic_approx;
+                border-bottom-color: transparent;
+                &:focus {
+                    border: 1px solid $color_mystic_approx;
+                    border-bottom-color: transparent;
+                }
+                &:hover {
+                    border: 1px solid $color_mystic_approx;
+                    border-bottom-color: transparent;
+                }
+            }
+        }
+    }
+    .tab-content {
+        background-color: $white;
+        padding: 35px;
+        border: 1px solid $color_mystic_approx;
+        border-top: none;
+    }
+}

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/css/scss/tag.scss
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/scss/tag.scss b/dashboardv2/public/css/scss/tag.scss
new file mode 100644
index 0000000..74f768a
--- /dev/null
+++ b/dashboardv2/public/css/scss/tag.scss
@@ -0,0 +1,205 @@
+//tag.scss
+
+/* Tree View */
+
+.tag-tree {
+    padding: 0;
+    overflow: auto;
+    li {
+        list-style: none;
+        cursor: pointer;
+        &.parent-node {
+            position: relative;
+            margin-top: 10px;
+            /* margin-bottom: 5px; */
+            border-radius: 4px;
+            &:hover {
+                background-color: $color_star_dust_approx;
+            }
+            &.active {
+                background-color: $color_jungle_green_approx;
+                border: none;
+                .tools {
+                    display: block
+                }
+            }
+            > ul > li {
+                line-height: 30px;
+                margin-left: -20px;
+                text-indent: 20px;
+                &:hover {
+                    background-color: $color_keppel_approx;
+                }
+                &.selected {
+                    background-color: $color_keppel_approx;
+                }
+            }
+            .tools {
+                display: none;
+                position: absolute;
+                right: 0;
+                padding: 5px 10px;
+            }
+        }
+        a {
+            display: block;
+            color: #f2f2f2;
+            white-space: nowrap;
+            padding: 5px 10px;
+            text-overflow: ellipsis;
+            max-width: 91%;
+            overflow: hidden;
+        }
+    }
+    ul {
+        padding-left: 20px;
+        li {}
+    }
+    .tagAsset {
+        display: none;
+    }
+}
+
+.input-group.attributes .form-control {
+    height: 40px;
+    box-shadow: none;
+    border-right: none;
+}
+
+.input-group.attributes .input-group-addon {
+    background-color: $color_white_lilac_approx;
+    border: 1px $color_mystic_approx solid;
+    border-radius: 0px;
+    border-left: none;
+}
+
+.input-group.attributes .input-group-addon i.fa {
+    cursor: pointer;
+}
+
+.input-group.attributes .form-control:focus + .input-group-addon {
+    border-color: $color_bali_hai_approx;
+}
+
+.tagList {
+    margin-top: 10px;
+}
+
+.select2-container {
+    width: 100% !important;
+    /*margin:15px 0px;*/
+}
+
+.tagListSelect {
+    margin: 15px 0px;
+}
+
+.select2-container--default .select2-selection--multiple .select2-selection__choice {
+    background-color: #fff;
+    color: #9599a0;
+}
+
+.select2-container--default .select2-search--inline .select2-search__field {
+    color: #555;
+}
+
+.inputTag {
+    display: inline-block;
+    padding: 5px 10px;
+    border: 1px $tag_color solid;
+    color: $tag_color;
+    font-size: 12px;
+    text-transform: uppercase;
+    border-radius: 4px;
+    margin-right: 3px;
+    margin-bottom: 3px;
+    float: left;
+    cursor: pointer;
+    background-color: $white;
+    i.fa {
+        position: relative;
+        right: -5px;
+        cursor: pointer;
+    }
+    &:hover {
+        color: $white;
+        background-color: $tag_color;
+    }
+}
+
+.addTagBase {
+    padding: 4px 8px;
+    border: 1px solid $action_gray;
+    color: $action_gray;
+    border-radius: 4px;
+    cursor: pointer;
+    &:hover {
+        color: $color_dark_grey_approx;
+        background-color: $color_mercury_approx;
+    }
+}
+
+.noTags {
+    font-size: 24px;
+    font-weight: bold;
+    text-align: center;
+}
+
+.addTag-dropdown {
+    display: inline-block;
+    float: left;
+}
+
+.addTagText {
+    font-size: 12px;
+    font-weight: 600;
+}
+
+.addTagPlus {
+    font-size: 12px;
+    font-weight: 600;
+}
+
+.inputSearchTag {
+    max-width: 200px;
+}
+
+.appendList {
+    max-height: 200px;
+    overflow: auto;
+    max-width: 200px;
+    overflow-x: hidden;
+    div {
+        padding: 3px;
+    }
+}
+
+.editbutton {
+    padding: 4px 8px;
+    border: 1px solid $color_celeste_approx;
+    color: $action_gray;
+    border-radius: 4px;
+}
+.inputAttribute {
+    display: inline-block;
+    padding: 5px 10px;
+    border: 1px $action_gray solid;
+    color: $action_gray;
+    font-size: 12px;
+    text-transform: uppercase;
+    border-radius: 4px;
+    margin-right: 3px;
+    margin-bottom: 3px;
+    float: left;
+    cursor: pointer;
+    background-color: $white;
+    i.fa {
+        position: relative;
+        right: -5px;
+        cursor: pointer;
+    }
+    &:hover {
+        color: $white;
+        background-color: $action_gray;
+    }
+}

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/css/scss/theme.scss
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/scss/theme.scss b/dashboardv2/public/css/scss/theme.scss
new file mode 100644
index 0000000..4d5b2d6
--- /dev/null
+++ b/dashboardv2/public/css/scss/theme.scss
@@ -0,0 +1,114 @@
+/* theme.scss */
+
+.user-dropdown {
+    display: inline-block;
+    padding: 20px;
+    color: $color_ironside_gray_approx;
+    .user-circle {
+        padding: 8px 10px;
+        border: 1px solid $color_ironside_gray_approx;
+        border-radius: 20px;
+        margin: 0px 4px;
+    }
+}
+
+.main-search {
+    .form-control {
+        border: none;
+        border-left: 1px $color_mystic_approx solid;
+        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+        border-radius: 0;
+        //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
+        box-shadow: none;
+        height: 60px;
+        font-size: 18px;
+        font-style: italic;
+    }
+    .input-group-addon {
+        font-size: 20px;
+        color: $color_bombay_approx;
+        background: none;
+        border: none;
+    }
+}
+
+.page-title {
+    background-color: $white;
+    padding: 50px;
+    h1 {
+        margin-top: 0;
+        margin-bottom: 20px;
+        font-weight: 600;
+        text-overflow: ellipsis;
+        max-width: 91%;
+        overflow: hidden;
+        small {
+            position: relative;
+            bottom: 5px;
+            margin-left: 15px;
+            padding-left: 15px;
+            border-left: 1px $color_mystic_approx solid;
+            color: $color_bombay_approx;
+            font-size: 40%;
+            font-weight: 600;
+            text-transform: uppercase;
+        }
+    }
+    .sub-title {
+        margin-bottom: 40px;
+    }
+}
+
+.atlas-tag {
+    padding: 6px 12px;
+    background-color: $color_havelock_blue_approx;
+    color: $white;
+    font-size: 12px;
+    text-transform: uppercase;
+    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+    border-radius: 4px;
+    i.fa {
+        position: relative;
+        right: -5px;
+        cursor: pointer;
+    }
+}
+
+.white-bg {
+    background-color: $white;
+    padding: 30px 0;
+}
+
+.comment-input {
+    background-color: $color_white_lilac_approx;
+    padding: 20px;
+    font-size: 16px;
+    margin-bottom: 20px;
+}
+
+.comment-box {
+    padding: 25px 0;
+    margin-top: 25px;
+    border-top: 1px $color_mystic_approx solid;
+    .comment {
+        margin-bottom: 25px;
+    }
+    .author {
+        color: $color_keppel_approx;
+        margin-bottom: 0;
+    }
+    .date {
+        color: $color_star_dust_approx;
+    }
+}
+
+.backButton {
+    display: block;
+    margin: 13px 13px;
+    &:hover {
+        color: $color_jungle_green_approx;
+    }
+    &:active {
+        color: $color_jungle_green_approx;
+    }
+}

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/css/scss/tree.scss
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/scss/tree.scss b/dashboardv2/public/css/scss/tree.scss
new file mode 100644
index 0000000..b98bd45
--- /dev/null
+++ b/dashboardv2/public/css/scss/tree.scss
@@ -0,0 +1,286 @@
+    /* tree.scss */
+    /* .fuelux {
+    margin-top: 10px;
+    .tree {
+        padding-left: 0;
+        position: relative;
+        list-style: none;
+        ul {
+            padding-left: 0;
+            margin-top: 0;
+            margin-bottom: 0;
+            list-style: none;
+        }
+        li {
+            margin: 0;
+            margin-top: 5px;
+            margin-bottom: 5px;
+        }
+        .tree-loader {
+            margin-left: 45px;
+        }
+        .tree-branch {
+            .tree-branch-header {
+                color: $white;
+                position: relative;
+                white-space: nowrap;
+                padding: 4px 0;
+                .tree-branch-name {
+                    white-space: nowrap;
+                    background-color: transparent;
+                    border: 0;
+                    &:hover {
+                        color: $white;
+                    }
+                }
+                .glyphicon-menu-right {
+                    font-size: 10px;
+                    padding-right: 5px;
+                    padding-left: 7px;
+                    &:before {
+                        position: relative;
+                        top: -2px;
+                    }
+                }
+                label {
+                    font-weight: normal;
+                    padding-left: 3px;
+                    margin-bottom: 0;
+                    cursor: pointer;
+                }
+            }
+            .tree-branch-children {
+                margin-left: 25px;
+            }
+        }
+        .tree-item {
+            white-space: nowrap;
+            position: relative;
+            cursor: pointer;
+            padding: 4px 0;
+            .tree-item-name {
+                color: $white;
+                white-space: nowrap;
+                background-color: transparent;
+                border: 0;
+                &:hover {
+                    color: $white;
+                }
+            }
+            &.tree-selected {
+                background-color: $color_keppel_approx;
+                &:before {
+                    content: "";
+                    position: absolute;
+                    background-color: $color_keppel_approx;
+                    height: 33px;
+                    top: 0;
+                    left: -100%;
+                    right: -100%;
+                    z-index: -1;
+                }
+            }
+            label {
+                font-weight: normal;
+                padding-left: 7px;
+                margin-bottom: 0;
+                cursor: pointer;
+            }
+        }
+        *:focus {
+            outline: none;
+        }
+        button:focus {
+            color: $white;
+        }
+        .tree-open > .tree-branch-header .glyphicon-menu-right {
+            //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
+            transform: rotate(90deg);
+            position: relative;
+        }
+        [data-children=false] > .tree-branch-header .icon-caret:before {
+            content: '\00a0';
+        }
+        .tree-branch[haschildren='false'] .icon-caret {
+            visibility: hidden;
+        }
+        .tree-branch[data-has-children='false'] .icon-caret {
+            visibility: hidden;
+        }
+        .icon-caret:hover + .tree-branch-name {
+            color: $white;
+        }
+        &.tree-folder-select .tree-branch {
+            .icon-folder {
+                visibility: hidden;
+            }
+            .icon-caret {
+                background-color: transparent;
+                border: 0;
+                &:hover {
+                    cursor: pointer;
+                    color: $white;
+                }
+            }
+            > .tree-branch-name {
+                padding: 1px 5px 0;
+                &.tree-selected {
+                    background-color: $color_gallery_approx;
+                }
+            }
+            &.tree-selected > .tree-branch-header {
+                background-color: $color_keppel_approx;
+                &:before {
+                    content: "";
+                    position: absolute;
+                    background-color: $color_keppel_approx;
+                    height: 33px;
+                    top: 0;
+                    left: -100%;
+                    right: -100%;
+                    z-index: -1;
+                }
+                .tree-branch-name:hover {
+                    background-color: $color_keppel_approx;
+                }
+                > .action-icons {
+                    visibility: visible;
+                }
+            }
+        }
+    }
+    .action-icons {
+        visibility: hidden;
+        float: right;
+        a {
+            display: inline-block;
+            margin-left: 4px;
+            color: $white;
+        }
+    }
+} */
+    
+    .jstree-container-ul {
+        padding-left: 0px;
+        position: relative;
+        list-style: none;
+        .jstree-node {
+            white-space: nowrap;
+            position: relative;
+            cursor: pointer;
+            padding: 4px 0;
+            margin: 0;
+            margin-top: 5px;
+            margin-bottom: 5px;
+        }
+        ul {
+            list-style: none;
+            padding: 0;
+            text-indent: 30px;
+        }
+        li a {
+            // color: $white;
+            display: block;
+        }
+        // .jstree-node[aria-selected="true"]:before {
+        //     content: "";
+        //     position: absolute;
+        //     height: 33px;
+        //     background: $color_jungle_green_approx;
+        //     top: 0px;
+        //     left: -100%;
+        //     right: -100%;
+        //     z-index: -1;
+        // }
+    }
+    
+    .taxonomyTree {
+        padding: 0;
+        position: relative;
+        li {
+            position: relative;
+            border-radius: 4px;
+            margin-top: 5px;
+            &.parent {
+                width: 100%;
+                a {
+                    max-width: 93%;
+                }
+            }
+            &.parentChiled {
+                ul {
+                    padding-left: 9%;
+                }
+                li {
+                    &.children {
+                        width: 91%;
+                    }
+                    a {
+                        max-width: 92%;
+                    }
+                }
+            }
+            &.children {
+                &:hover {
+                    background-color: $color_star_dust_approx;
+                }
+            }
+            &.active {
+                background-color: $color_jungle_green_approx !important;
+                border: none;
+                .tools {
+                    display: block;
+                    .fa {
+                        cursor: pointer;
+                        padding: 0px 3px;
+                    }
+                }
+            }
+            a {
+                display: block;
+                color: $concrete;
+                white-space: nowrap;
+                padding: 5px 18px;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                cursor: pointer;
+            }
+            .tools {
+                background: $color_jungle_green_approx;
+                display: none;
+                position: absolute;
+                right: 3px;
+                padding: 5px 10px;
+            }
+        }
+    }
+    
+    .termPopoverList {
+        color: #666;
+        padding: 0px 5px;
+        margin-bottom: 0px;
+        a {
+            color: #666;
+            padding: 5px;
+        }
+    }
+    
+    .termPopover {
+        cursor: pointer;
+    }
+    
+    .termMoveDiv {
+        width: 550px;
+        height: 200px;
+        margin: 10px;
+    }
+    
+    .tagPopoverList {
+        color: #666;
+        padding: 0px 5px;
+        margin-bottom: 0px;
+        a {
+            color: #666;
+            padding: 5px;
+        }
+    }


Mime
View raw message