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 <[email protected]> Authored: Thu May 19 23:15:39 2016 +0530 Committer: Hemanth Yamijala <[email protected]> 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="" horiz-adv-x="1792" /> <glyph unicode="" 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="🔑" 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="🚪" 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; + } + }
