浏览代码

HUE-7743 [frontend] Prevent Hue styles from leaking outside the embedded container

Johan Ahlen 8 年之前
父节点
当前提交
7cb649bcbb

+ 1 - 0
Gruntfile.js

@@ -35,6 +35,7 @@ module.exports = function(grunt) {
           banner: '/*!\nLicensed to Cloudera, Inc. under one\nor more contributor license agreements.  See the NOTICE file\ndistributed with this work for additional information\nregarding copyright ownership.  Cloudera, Inc. licenses this file\nto you under the Apache License, Version 2.0 (the\n"License"); you may not use this file except in compliance\nwith the License.  You may obtain a copy of the License at\n\nhttp://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an "AS IS" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n */'
         },
         files: {
+          'desktop/core/src/desktop/static/desktop/css/hue-embedded.css': 'desktop/core/src/desktop/static/desktop/less/hue-embedded.less',
           'desktop/core/src/desktop/static/desktop/css/home.css': 'desktop/core/src/desktop/static/desktop/less/home.less',
           'desktop/core/src/desktop/static/desktop/css/hue.css': 'desktop/core/src/desktop/static/desktop/less/hue.less',
           'desktop/core/src/desktop/static/desktop/css/hue3-extra.css': 'desktop/core/src/desktop/static/desktop/less/hue3-extra.less',

文件差异内容过多而无法显示
+ 387 - 0
desktop/core/src/desktop/static/desktop/css/hue-embedded.css


文件差异内容过多而无法显示
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue.css


+ 40 - 0
desktop/core/src/desktop/static/desktop/less/hue-embedded.less

@@ -0,0 +1,40 @@
+/*
+ Licensed to Cloudera, Inc. under one
+ or more contributor license agreements.  See the NOTICE file
+ distributed with this work for additional information
+ regarding copyright ownership.  Cloudera, Inc. 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 (reference) "cui/colors.less";
+@import (reference) "hue-mixins.less";
+
+@import (inline) "../ext/css/cui/cui.css";
+@import (inline) "../ext/css/cui/bootstrap2.css";
+@import (inline) "../ext/css/cui/bootstrap-responsive2.css";
+@import (inline) "../css/jquery-ui.css";
+
+.hue-embedded-container {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  overflow: hidden;
+
+  @import "hue-assist.less";
+  @import "hue-autocomplete.less";
+  @import "hue-cui-overrides.less";
+  @import "hue-cross-version.less";
+  @import "hue4.less";
+  @import "home.less";
+}

+ 1 - 997
desktop/core/src/desktop/static/desktop/less/hue.less

@@ -25,6 +25,7 @@
 @import "hue-cross-version.less";
 
 @import "components/hue-hamburger.less";
+@import "hue4.less";
 
 html {
   height: 100%;
@@ -40,1001 +41,4 @@ body {
   margin: 0;
   padding: 0;
   overflow: hidden;
-}
-
-.main-page {
-  position: relative;
-  .display-flex;
-  .flex-direction(column);
-  height: 100%;
-  width: 100%;
-  margin: 0;
-  padding: 0;
-  overflow: hidden;
-
-  > .navbar,
-  > .banner {
-    .flex(0 0 auto);
-  }
-}
-
-.content-wrapper {
-  .flex(1 1 100%);
-  .display-flex;
-  .flex-direction(row);
-  position: relative;
-  width: 100%;
-  min-width: 0;
-  min-height: 0;
-  background-color: @cui-white;
-}
-
-.svg-hue-logo-main {
-  fill: @hue-primary-color-dark;
-}
-
-.svg-hue-logo-trunk {
-  fill: @hue-trunk;
-}
-
-.top-nav {
-  .display-flex;
-  position: relative;
-  z-index: 1009;
-}
-
-.top-nav-left {
-  .flex(0 0 340px);
-}
-
-.top-nav-middle {
-  .flex(1);
-  padding: 0 10px;
-  width: 100%;
-}
-
-.top-nav-right {
-  .flex(0 0 340px);
-}
-
-.top-nav-left .btn-group {
-  float: right;
-}
-
-.hue-main-create-dropdown .hi {
-  // To align with fa-icons
-  margin-left: 1px;
-  margin-right: 2px;
-}
-
-.hue-main-create-btn {
-  padding-left: 26px;
-  padding-right: 26px;
-  border-bottom-color: @hue-primary-color-dark;
-}
-
-.hue-main-create-btn-dropdown {
-  border-bottom-color: @hue-primary-color-dark;
-  .hue-inset-box-shadow;
-}
-
-.jobs-panel {
-  position: fixed;
-  z-index: 2999;
-  top: 45px;
-  padding: 10px;
-  width: 600px;
-  right: 10px;
-  font-size: 13px;
-  border-radius: @hue-panel-border-radius;
-  background-color: @cui-white;
-  .hue-box-shadow-top;
-}
-
-.notification-history {
-  overflow-y: auto;
-  max-height: 270px;
-}
-
-.notification-history-title {
-  background-color: @cui-gray-100;
-  padding: 4px;
-}
-
-.notification-history-list li {
-  padding: 4px;
-  cursor: pointer;
-  border-left: 2px solid @cui-white;
-  &:hover, &.active {
-    background-color: @cui-gray-050;
-    border-left-color: @cui-gray-100;
-  }
-}
-
-.history-panel {
-  .progress {
-    height: 4px;
-  }
-}
-
-.btn-flat {
-  border-radius: 4px;
-  box-shadow: none;
-}
-
-.dropdown-menu-new {
-  margin-left: 267px;
-}
-
-.navbar-dropdown-flat {
-  margin-top: 10px;
-  z-index: 999999;
-  line-height: 20px;
-  border-radius: 4px;
-}
-
-.navbar-dropdown-flat:hover .btn, .btn-flat:hover {
-  background-color: rgba(240, 240, 240, 0.6) !important;
-}
-
-.navbar-dropdown-flat .btn, .btn-flat {
-  color: @hue-primary-color-dark;
-  border: 1px solid transparent;
-  background-color: transparent;
-  background-image: none;
-  font-weight: 600;
-  font-size: 14px;
-  .hue-ease-transition(~"background-color, color");
-}
-
-.navbar-dropdown-flat .btn:hover, .btn-flat:hover {
-  background-color: rgba(240, 240, 240, 0.92);
-  border: 1px solid transparent;
-  color: @hue-primary-color-dark;
-}
-
-.navbar-dropdown .btn {
-  .caret {
-    opacity: 0;
-  }
-  &:hover {
-    .caret {
-      opacity: 1;
-    }
-  }
-}
-
-.jobs-badge {
-  color: @cui-white;
-  background-color: @cui-orange-300;
-  display: inline-block;
-  padding: 1px 6px;
-  border-radius: 4px;
-  margin-left: 2px;
-  font-size: 12px;
-  .hue-ease-transition(~"background-color, color");
-}
-
-.navbar-dropdown-flat .btn:hover .jobs-badge {
-  background-color: @hue-primary-color-dark;
-  color: rgba(240, 240, 240, 0.92);
-}
-
-.navbar-dropdown-flat .btn:first-child:active,
-.navbar-dropdown-flat .btn:first-child {
-  border-top-left-radius: 4px;
-  border-bottom-left-radius: 4px;
-  padding-right: 2px;
-  box-shadow: none;
-}
-
-.navbar-dropdown-flat .btn:last-of-type:not(:first-child) {
-  padding-left: 4px;
-}
-
-.navbar-dropdown-flat .btn:last-of-type {
-  margin-left: 0;
-  border-top-right-radius: 4px;
-  border-bottom-right-radius: 4px;
-  box-shadow: none;
-}
-
-.navbar-dropdown .dropdown-menu img {
-  height: 18px;
-  width: 18px;
-  margin: -1px 2px 0 -7px;
-}
-
-.navbar-dropdown svg {
-  margin: 0 2px -4px -7px;
-  display: inline-block !important; // Conflicts with nv.d3.css
-}
-
-.navbar-dropdown .dropdown-menu i {
-  margin: -1px 2px 0 -7px;
-}
-
-.navbar-dropdown .dropdown-menu i,
-.navbar-dropdown .dropdown-menu svg {
-  color: @hue-primary-color-dark;
-  fill: @hue-primary-color-dark;
-  height: 18px;
-  width: 18px;
-  font-size: 14px;
-}
-
-.navbar-dropdown a:hover i,
-.navbar-dropdown a:hover svg {
-  color: @cui-white;
-  fill: @cui-white;
-}
-
-.dropdown-no-icon {
-  margin-left: 17px;
-}
-
-.top-nav-middle .search-container-top-old {
-  margin-left: auto;
-  margin-right: auto;
-  max-width: 600px;
-}
-
-.top-nav-middle .search-container-top {
-  position: relative;
-  margin-left: auto;
-  margin-right: auto;
-  max-width: 600px;
-}
-
-.search-container-top-old,
-.search-container {
-  .display-flex;
-  .flex(1 1 44px);
-  position: relative;
-  margin: 8px 10px 0 10px;
-}
-
-.search-container-top-old > input {
-  .flex(1 1 100%);
-  border-radius: 4px;
-  border: 1px solid @cui-gray-300;
-  box-shadow: none;
-  margin-bottom: 0;
-}
-
-.search-container > input {
-  .flex(1 1 100%);
-  border-radius: 4px 0 0 4px;
-  border: 1px solid @cui-gray-300;
-  border-right: none;
-  box-shadow: none;
-  margin-bottom: 0;
-}
-
-.search-container-top {
-  .flex(1 1 100%);
-  position: relative;
-}
-
-.search-container-top .inline-autocomplete-container {
-  position: relative;
-  margin-top: 8px;
-  height: 31px;
-  width: 100%;
-
-  > div {
-    right: 10px !important;
-  }
-}
-
-.search-container-top-old > a,
-.search-container > a {
-  .flex(0 0 31px);
-  margin-bottom: 0;
-  cursor: pointer;
-  border-bottom-right-radius: 4px;
-  border-top-right-radius: 4px;
-  border: 1px solid @cui-gray-300;
-  box-shadow: none;
-  font-size: 15px;
-  height: 30px;
-  line-height: 30px;
-  background-color: @cui-gray-050;
-  width: 31px;
-}
-
-.search-container-top-old > a > i,
-.search-container > a > i {
-  margin-left: 8px;
-}
-
-.left-panel,
-.right-panel {
-  .flex(0);
-  position: relative;
-  background-color: @cui-white;
-}
-
-.left-panel {
-  min-width: 290px;
-}
-
-.right-panel {
-  min-width: 250px;
-}
-
-.side-panel-closed {
-  min-width: 0;
-  .flex-basis(0) !important;
-  width: 0 !important;
-}
-
-.resizer {
-  .flex(0 0 2px);
-  cursor: col-resize;
-}
-
-.resize-bar {
-  position: absolute;
-  height: 100%;
-  width: 1px;
-  background-color: @cui-gray-300;
-}
-
-.page-content {
-  .flex(1);
-  position: relative;
-  overflow-x: hidden !important;
-}
-
-.page-content .content-panel {
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-.hue-title-bar {
-  border-bottom: 1px solid #DCDCDC;
-  background-color:#F8F8F8;
-
-  .navbar-inner {
-    background-color: transparent !important;
-    margin: 0 !important;
-    padding-top: 0;
-    padding-bottom: 0;
-    background: none;
-    min-height: 48px;
-  }
-}
-
-.sidebar {
-  .sidebar-footer-panel {
-    .dropzone {
-      padding-top: 15px;
-      padding-bottom: 15px;
-      text-align: center;
-      i {
-        .hue-ease-transition(color);
-      }
-    }
-    .dz-drag-hover, .dropzone:hover {
-      background-color: @cui-gray-200!important;
-      i {
-        color: @cui-blue-500;
-      }
-    }
-  }
-  a {
-    .pointer
-  }
-}
-
-.inactive-action,
-.inactive-action a {
-  color: @cui-gray-600;
-  .hue-ease-transition(color);
-}
-
-.inactive-action-dark,
-.inactive-action-dark a {
-  color: @cui-gray-800;
-  i.fa {
-    color: @cui-gray-600;
-  }
-}
-
-.inactive-action:hover {
-  text-decoration: none;
-}
-
-.inactive-action.disabled {
-  color: @hue-disabled-color !important;
-  cursor: default !important;
-}
-
-.inactive-action:not(.disabled):hover,
-.inactive-action:not(.disabled):hover > a {
-  color: @hue-primary-color-dark !important;
-}
-
-.inactive-action:focus {
-  color: @cui-gray-600;
-}
-
-.black-link {
-  color: @cui-gray-800;
-  .hue-ease-transition(color);
-}
-
-.black-link:active,
-.black-link:focus,
-.black-link:visited {
-  color: @cui-gray-800;
-}
-
-.black-link:hover {
-  color: @hue-primary-color-dark;
-}
-
-a:hover,
-a:active,
-a:focus,
-a:visited {
-  text-decoration: none;
-}
-
-/* Context menu, popover etc. */
-
-
-.hue-context-menu {
-  display: none;
-  position: fixed;
-  margin: 2px 4px 6px 4px;
-  z-index: 999;
-  padding: 6px 1px;
-  list-style: none;
-  font-size: 13px;
-  opacity: 0;
-  transition: opacity .3s;
-}
-
-.hue-context-menu, .hue-popover-bottom {
-  border-radius: @hue-panel-border-radius;
-  background-color: @cui-white;
-  .hue-box-shadow-bottom;
-}
-
-.hue-syntax-drop-down {
-  position: absolute;
-  z-index: 1038;
-  .dropdown-menu {
-    overflow-y: scroll;
-  }
-}
-
-.hue-popover {
-  .display-flex;
-  position: absolute;
-  .flex-direction(column);
-  top: 0;
-  left: 0;
-  z-index: 1039;
-  padding: 1px;
-  background-color: @cui-white;
-  -webkit-background-clip: padding-box;
-  background-clip: padding-box;
-  border: 1px solid transparent;
-}
-
-.hue-context-popover {
-  padding: 0;
-  border: none;
-}
-
-.hue-popover.hue-popover-top {
-  margin-top: -5px;
-}
-
-.hue-popover.hue-popover-top .hue-popover-arrow {
-  bottom: -6px;
-  left: 50%;
-  margin-left: -6px;
-  border-top-color: @hue-primary-color-dark;
-  border-bottom-width: 0;
-}
-
-.hue-popover.hue-popover-top .hue-popover-arrow::after {
-  bottom: 1px;
-  margin-left: -3px;
-  content: "";
-  border-top-color: @hue-primary-color-dark;
-  border-bottom-width: 0;
-}
-
-.hue-popover.hue-popover-right {
-  margin-left: 5px;
-}
-
-.hue-popover.hue-popover-right .hue-popover-arrow {
-  top: 50%;
-  left: -6px;
-  margin-top: -6px;
-  border-right-color: @hue-primary-color-dark;
-  border-left-width: 0;
-}
-
-.hue-popover.hue-popover-right .hue-popover-arrow::after {
-  bottom: -3px;
-  left: 1px;
-  content: "";
-  border-right-color: @hue-primary-color-dark;
-  border-left-width: 0;
-}
-
-.hue-popover.hue-popover-bottom {
-  margin-top: 7px;
-}
-
-.hue-popover.hue-popover-bottom .hue-popover-arrow {
-  top: -6px;
-  left: 50%;
-  margin-left: -6px;
-  border-top-width: 0;
-  border-bottom-color: @hue-primary-color-dark;
-}
-
-.hue-popover.hue-popover-bottom .hue-popover-arrow::after {
-  top: 3px;
-  margin-left: -3px;
-  content: "";
-  border-top-width: 0;
-  border-bottom-color: @hue-primary-color-dark;
-}
-
-.hue-popover.hue-popover-left {
-  margin-left: -5px;
-}
-
-.hue-popover.hue-popover-left .hue-popover-arrow {
-  top: 50%;
-  right: -6px;
-  margin-top: -3px;
-  border-right-width: 0;
-  border-left-color: @hue-primary-color-dark;
-}
-
-.hue-popover.hue-popover-left .hue-popover-arrow::after {
-  right: 2px;
-  bottom: -3px;
-  content: "";
-  border-right-width: 0;
-  border-left-color: @hue-primary-color-dark;
-}
-
-.hue-popover-title {
-  .flex(0 1 auto);
-  padding: 6px 10px;
-  margin: 0;
-  font-size: 0.9rem;
-  background-color: @cui-white;
-}
-
-.hue-popover-title:empty {
-  display: none;
-}
-
-.hue-popover-arrow, .hue-popover-arrow::after {
-  position: absolute;
-  display: block;
-  width: 0;
-  height: 0;
-  border-color: transparent;
-  border-style: solid;
-}
-
-.hue-popover-arrow {
-  border-width: 6px;
-}
-
-.hue-popover-top {
-  border-radius: @hue-panel-border-radius;
-  background-color: @cui-white;
-  .hue-box-shadow-bottom;
-}
-
-.hue-popover-right {
-  border-radius: @hue-panel-border-radius;
-  background-color: @cui-white;
-  .hue-box-shadow-right;
-}
-
-.hue-popover-left {
-  border-radius: @hue-panel-border-radius;
-  background-color: @cui-white;
-  .hue-box-shadow-left;
-}
-
-.hue-inner-drop-down {
-  margin: 0 !important;
-  padding: 0;
-  list-style: none;
-  font-size: 13px;
-}
-
-.hue-inner-drop-down > li,
-.hue-context-menu > li {
-  min-width: 170px;
-  color: @cui-gray-200;
-}
-
-.hue-inner-drop-down > li > a {
-  display: block;
-  position: relative;
-  clear: both;
-  height: 22px;
-  line-height: 22px;
-  vertical-align: middle;
-  padding: 6px 16px 6px 16px;
-
-  color: @cui-gray-800;
-  text-decoration: none;
-  font-weight: 400;
-  white-space: nowrap;
-  .hue-ease-transition(background-color);
-}
-
-.hue-context-menu > li > a {
-  display: block;
-  position: relative;
-  clear: both;
-  height: 22px;
-  line-height: 22px;
-  vertical-align: middle;
-  padding: 6px 16px 6px 38px;
-  color: @cui-gray-800;
-  text-decoration: none;
-  font-weight: 400;
-  white-space: nowrap;
-  .hue-ease-transition(background-color);
-}
-
-.hue-context-menu > li > .disabled {
-  display: block;
-  position: relative;
-  clear: both;
-  height: 22px;
-  line-height: 22px;
-  vertical-align: middle;
-  padding: 6px 16px 6px 38px;
-  cursor: default;
-  color: @cui-gray-400;
-  text-decoration: none;
-  font-weight: 400;
-  white-space: nowrap;
-}
-
-.hue-inner-drop-down > li > a:hover,
-.hue-inner-drop-down > li.active,
-.hue-context-menu > li.active,
-.hue-context-menu > li > a:not(.disabled):hover {
-  background-color: @hue-primary-color-light;
-}
-
-.hue-context-menu > li > .disabled > i {
-  position: absolute;
-  height: 22px;
-  left: 13px;
-  right: auto;
-  top: 6px;
-  color: @cui-gray-400;
-  font-size: 17px;
-  line-height: 22px;
-  vertical-align: middle;
-}
-
-.hue-context-menu > li > a > i:not(.sub-icon), .hue-context-menu > li > a > .hi:not(.sub-icon) {
-  position: absolute;
-  top: 6px;
-  left: 13px;
-  right: auto;
-  line-height: 22px;
-  height: 24px;
-  color: @cui-gray-800;
-  font-size: 17px;
-  vertical-align: middle;
-}
-
-.hue-context-menu > li > a > .sub-icon {
-  position: absolute;
-  top: 6px;
-  left: auto;
-  right: 13px;
-  line-height: 22px;
-  height: 24px;
-
-  color: @cui-gray-800;
-  font-size: 12px;
-  vertical-align: middle;
-}
-
-.hue-context-menu > .divider {
-  height: 1px;
-  margin: 9px 0;
-  overflow: hidden;
-  background-color: @cui-gray-200;
-}
-
-#contextPopover .hue-popover {
-  position: fixed;
-}
-
-.context-popover-title {
-  .display-flex;
-  .flex-direction(row);
-  width: 100%;
-  padding:0;
-  background-color: @cui-gray-050;
-}
-
-.context-popover-breadcrumbs {
-  .flex(1 1 100%);
-  .nowrap-ellipsis();
-  padding: 5px;
-}
-
-.context-popover-close {
-  .flex(1 0 15px);
-  padding: 5px;
-}
-
-.context-popover-content {
-  padding: 5px;
-}
-
-.hue-breadcrumb-container {
-  .hue-breadcrumb {
-    display: inline-block;
-  }
-
-  .hue-breadcrumb-divider {
-    display: inline-block;
-  }
-
-  .dropdown-menu {
-    overflow-y: scroll;
-  }
-}
-
-/* styling for the imported apps */
-
-.page-content .navbar-inner {
-  margin: 10px 10px 0 10px;
-  background-color: transparent;
-  border: none;
-  border-bottom: 1px solid @cui-gray-050;
-}
-
-.page-content .navbar.navbar-inverse.navbar-fixed-top {
-  position: static!important;
-}
-
-.page-content .navbar .navbar-inner {
-  box-shadow: none;
-}
-
-/* editor and report */
-.editorComponents .progress {
-  border: none;
-}
-
-.editorComponents .context-panel {
-  display: none;
-}
-
-.editorComponents .snippet {
-  margin-right: 0;
-}
-
-/* oozie workflow */
-.oozie_workflowComponents .card-toolbar {
-  position: static!important;
-  width: auto!important;
-}
-
-.tooltip, .ui-autocomplete {
-  z-index: 3000 !important;
-}
-
-/* sqoop */
-#sqoopComponents .top-bar {
-  position: static!important;
-}
-
-/* context panel */
-/* TODO: Positioning and clean-up */
-.context-panel {
-  position: fixed;
-  display: none;
-  background: @cui-white;
-  top: 113px;
-  z-index: 401;
-  outline: none !important;
-  .hue-box-shadow-bottom;
-
-  .context-panel-content {
-    height: calc(40%);
-    overflow-y: auto;
-  }
-}
-
-.context-panel .nav-tabs {
-  padding-left: 10px;
-}
-
-.context-panel .tab-content {
-  padding: 12px;
-  min-height: calc(10%);
-}
-
-.context-panel .tab-pane {
-  height: 100%;
-}
-
-#mini_jobbrowser {
-  overflow-y: auto;
-  height: 550px;
-  max-height: 550px;
-  input.search-query {
-    width: 70px;
-  }
-  .status-border-container li {
-    padding: 7px;
-    margin-top: 10px;
-    border-left: 3px solid @cui-white;
-    &:hover {
-      background-color: @cui-gray-050;
-    }
-  }
-  .status-bar {
-    height: 1px;
-    width: 0;
-    opacity: .5;
-  }
-}
-
-.uploadstatus {
-  border: 1px solid @cui-gray-300;
-  border-bottom: none;
-  bottom: 0;
-  right: 60px;
-  margin: 0;
-  position: fixed;
-  width: 560px;
-  z-index: 1001;
-}
-
-.scrollable-uploadstatus {
-  max-height: 170px;
-  overflow-y: auto;
-}
-
-.uploadstatusbar {
-  background-color: @hue-primary-color-light;
-  height: 4px;
-  bottom: 0;
-  left: 0;
-  margin: 0;
-  position: fixed;
-  width: 100%;
-}
-
-.uploadstatusbar div {
-  background-color: @hue-primary-color-dark;
-  height: 4px;
-  width: 30%;
-}
-
-.progress-row {
-  margin-top: 7px;
-}
-
-.progress-row-bar {
-  height: 1px;
-  background-color: @hue-primary-color-dark;
-  width: 0;
-  margin-top: 3px;
-}
-
-.progress .bar-upload {
-  background-color: @hue-primary-color-dark !important;
-}
-
-#importerComponents {
-  .step-indicator-fixed {
-    position: static!important;
-  }
-  .vertical-spacer {
-    height: 0 !important;
-  }
-}
-
-.help-inline.muted {
-  color: @cui-gray-600;
-}
-
-#clearNotificationHistoryModal {
-  z-index: 10000;
-}
-
-.banner {
-  position: relative;
-  z-index: 1010;
-  background-color: @cui-gray-050;
-}
-
-.global-search-empty {
-  .assist-no-entries();
-  height: 30px !important;
-  > div {
-    margin: 5px 10px;
-  }
-}
-
-.global-search-results {
-  .display-flex();
-  background-color: @cui-white;
-  position:absolute;
-  z-index: 1060;
-  top: 35px;
-  left: 0;
-  width: 100%;
-  height: 400px;
-  .hue-box-shadow-bottom();
-
-  .global-search-alternatives {
-    .flex(0 0 175px);
-    border-right: 1px solid @cui-default-border-color;
-    font-size: 13px;
-    overflow-y: auto;
-
-    .global-search-category {
-      .global-search-category-header {
-        color: @hue-primary-color-dark;
-        padding-left: 5px;
-        border-bottom: 1px solid @cui-gray-100;
-      }
-
-      > ul {
-        list-style: none;
-        margin: 0;
-
-        li {
-          .no-select();
-          .pointer();
-          .nowrap-ellipsis();
-          padding: 2px 0 2px 7px;
-          > em {
-            font-style: normal;
-            font-weight: 600;
-          }
-        }
-
-        li.selected {
-          background-color: @hue-primary-color-light;
-        }
-      }
-    }
-  }
-  .global-search-preview {
-    padding-top: 10px;
-    .display-flex();
-    .flex(1);
-
-    .context-popover-tab {
-      background-color: transparent !important;
-    }
-
-    .context-popover-inline-search {
-      width: 180px !important;
-    }
-  }
 }

+ 1016 - 0
desktop/core/src/desktop/static/desktop/less/hue4.less

@@ -0,0 +1,1016 @@
+/*
+ Licensed to Cloudera, Inc. under one
+ or more contributor license agreements.  See the NOTICE file
+ distributed with this work for additional information
+ regarding copyright ownership.  Cloudera, Inc. 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 (reference) "cui/colors.less";
+@import (reference) "hue-mixins.less";
+
+.main-page {
+  position: relative;
+  .display-flex;
+  .flex-direction(column);
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+
+  > .navbar,
+  > .banner {
+    .flex(0 0 auto);
+  }
+}
+
+.content-wrapper {
+  .flex(1 1 100%);
+  .display-flex;
+  .flex-direction(row);
+  position: relative;
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+  background-color: @cui-white;
+}
+
+.svg-hue-logo-main {
+  fill: @hue-primary-color-dark;
+}
+
+.svg-hue-logo-trunk {
+  fill: @hue-trunk;
+}
+
+.top-nav {
+  .display-flex;
+  position: relative;
+  z-index: 1009;
+}
+
+.top-nav-left {
+  .flex(0 0 340px);
+}
+
+.top-nav-middle {
+  .flex(1);
+  padding: 0 10px;
+  width: 100%;
+}
+
+.top-nav-right {
+  .flex(0 0 340px);
+}
+
+.top-nav-left .btn-group {
+  float: right;
+}
+
+.hue-main-create-dropdown .hi {
+  // To align with fa-icons
+  margin-left: 1px;
+  margin-right: 2px;
+}
+
+.hue-main-create-btn {
+  padding-left: 26px;
+  padding-right: 26px;
+  border-bottom-color: @hue-primary-color-dark;
+}
+
+.hue-main-create-btn-dropdown {
+  border-bottom-color: @hue-primary-color-dark;
+  .hue-inset-box-shadow;
+}
+
+.jobs-panel {
+  position: fixed;
+  z-index: 2999;
+  top: 45px;
+  padding: 10px;
+  width: 600px;
+  right: 10px;
+  font-size: 13px;
+  border-radius: @hue-panel-border-radius;
+  background-color: @cui-white;
+  .hue-box-shadow-top;
+}
+
+.notification-history {
+  overflow-y: auto;
+  max-height: 270px;
+}
+
+.notification-history-title {
+  background-color: @cui-gray-100;
+  padding: 4px;
+}
+
+.notification-history-list li {
+  padding: 4px;
+  cursor: pointer;
+  border-left: 2px solid @cui-white;
+  &:hover, &.active {
+    background-color: @cui-gray-050;
+    border-left-color: @cui-gray-100;
+  }
+}
+
+.history-panel {
+  .progress {
+    height: 4px;
+  }
+}
+
+.btn-flat {
+  border-radius: 4px;
+  box-shadow: none;
+}
+
+.dropdown-menu-new {
+  margin-left: 267px;
+}
+
+.navbar-dropdown-flat {
+  margin-top: 10px;
+  z-index: 999999;
+  line-height: 20px;
+  border-radius: 4px;
+}
+
+.navbar-dropdown-flat:hover .btn, .btn-flat:hover {
+  background-color: rgba(240, 240, 240, 0.6) !important;
+}
+
+.navbar-dropdown-flat .btn, .btn-flat {
+  color: @hue-primary-color-dark;
+  border: 1px solid transparent;
+  background-color: transparent;
+  background-image: none;
+  font-weight: 600;
+  font-size: 14px;
+  .hue-ease-transition(~"background-color, color");
+}
+
+.navbar-dropdown-flat .btn:hover, .btn-flat:hover {
+  background-color: rgba(240, 240, 240, 0.92);
+  border: 1px solid transparent;
+  color: @hue-primary-color-dark;
+}
+
+.navbar-dropdown .btn {
+  .caret {
+    opacity: 0;
+  }
+  &:hover {
+    .caret {
+      opacity: 1;
+    }
+  }
+}
+
+.jobs-badge {
+  color: @cui-white;
+  background-color: @cui-orange-300;
+  display: inline-block;
+  padding: 1px 6px;
+  border-radius: 4px;
+  margin-left: 2px;
+  font-size: 12px;
+  .hue-ease-transition(~"background-color, color");
+}
+
+.navbar-dropdown-flat .btn:hover .jobs-badge {
+  background-color: @hue-primary-color-dark;
+  color: rgba(240, 240, 240, 0.92);
+}
+
+.navbar-dropdown-flat .btn:first-child:active,
+.navbar-dropdown-flat .btn:first-child {
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+  padding-right: 2px;
+  box-shadow: none;
+}
+
+.navbar-dropdown-flat .btn:last-of-type:not(:first-child) {
+  padding-left: 4px;
+}
+
+.navbar-dropdown-flat .btn:last-of-type {
+  margin-left: 0;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+  box-shadow: none;
+}
+
+.navbar-dropdown .dropdown-menu img {
+  height: 18px;
+  width: 18px;
+  margin: -1px 2px 0 -7px;
+}
+
+.navbar-dropdown svg {
+  margin: 0 2px -4px -7px;
+  display: inline-block !important; // Conflicts with nv.d3.css
+}
+
+.navbar-dropdown .dropdown-menu i {
+  margin: -1px 2px 0 -7px;
+}
+
+.navbar-dropdown .dropdown-menu i,
+.navbar-dropdown .dropdown-menu svg {
+  color: @hue-primary-color-dark;
+  fill: @hue-primary-color-dark;
+  height: 18px;
+  width: 18px;
+  font-size: 14px;
+}
+
+.navbar-dropdown a:hover i,
+.navbar-dropdown a:hover svg {
+  color: @cui-white;
+  fill: @cui-white;
+}
+
+.dropdown-no-icon {
+  margin-left: 17px;
+}
+
+.top-nav-middle .search-container-top-old {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 600px;
+}
+
+.top-nav-middle .search-container-top {
+  position: relative;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 600px;
+}
+
+.search-container-top-old,
+.search-container {
+  .display-flex;
+  .flex(1 1 44px);
+  position: relative;
+  margin: 8px 10px 0 10px;
+}
+
+.search-container-top-old > input {
+  .flex(1 1 100%);
+  border-radius: 4px;
+  border: 1px solid @cui-gray-300;
+  box-shadow: none;
+  margin-bottom: 0;
+}
+
+.search-container > input {
+  .flex(1 1 100%);
+  border-radius: 4px 0 0 4px;
+  border: 1px solid @cui-gray-300;
+  border-right: none;
+  box-shadow: none;
+  margin-bottom: 0;
+}
+
+.search-container-top {
+  .flex(1 1 100%);
+  position: relative;
+}
+
+.search-container-top .inline-autocomplete-container {
+  position: relative;
+  margin-top: 8px;
+  height: 31px;
+  width: 100%;
+
+  > div {
+    right: 10px !important;
+  }
+}
+
+.search-container-top-old > a,
+.search-container > a {
+  .flex(0 0 31px);
+  margin-bottom: 0;
+  cursor: pointer;
+  border-bottom-right-radius: 4px;
+  border-top-right-radius: 4px;
+  border: 1px solid @cui-gray-300;
+  box-shadow: none;
+  font-size: 15px;
+  height: 30px;
+  line-height: 30px;
+  background-color: @cui-gray-050;
+  width: 31px;
+}
+
+.search-container-top-old > a > i,
+.search-container > a > i {
+  margin-left: 8px;
+}
+
+.left-panel,
+.right-panel {
+  .flex(0);
+  position: relative;
+  background-color: @cui-white;
+}
+
+.left-panel {
+  min-width: 290px;
+}
+
+.right-panel {
+  min-width: 250px;
+}
+
+.side-panel-closed {
+  min-width: 0;
+  .flex-basis(0) !important;
+  width: 0 !important;
+}
+
+.resizer {
+  .flex(0 0 2px);
+  cursor: col-resize;
+}
+
+.resize-bar {
+  position: absolute;
+  height: 100%;
+  width: 1px;
+  background-color: @cui-gray-300;
+}
+
+.page-content {
+  .flex(1);
+  position: relative;
+  overflow-x: hidden !important;
+}
+
+.page-content .content-panel {
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.hue-title-bar {
+  border-bottom: 1px solid #DCDCDC;
+  background-color:#F8F8F8;
+
+  .navbar-inner {
+    background-color: transparent !important;
+    margin: 0 !important;
+    padding-top: 0;
+    padding-bottom: 0;
+    background: none;
+    min-height: 48px;
+  }
+}
+
+.sidebar {
+  .sidebar-footer-panel {
+    .dropzone {
+      padding-top: 15px;
+      padding-bottom: 15px;
+      text-align: center;
+      i {
+        .hue-ease-transition(color);
+      }
+    }
+    .dz-drag-hover, .dropzone:hover {
+      background-color: @cui-gray-200!important;
+      i {
+        color: @cui-blue-500;
+      }
+    }
+  }
+  a {
+    .pointer
+  }
+}
+
+.inactive-action,
+.inactive-action a {
+  color: @cui-gray-600;
+  .hue-ease-transition(color);
+}
+
+.inactive-action-dark,
+.inactive-action-dark a {
+  color: @cui-gray-800;
+  i.fa {
+    color: @cui-gray-600;
+  }
+}
+
+.inactive-action:hover {
+  text-decoration: none;
+}
+
+.inactive-action.disabled {
+  color: @hue-disabled-color !important;
+  cursor: default !important;
+}
+
+.inactive-action:not(.disabled):hover,
+.inactive-action:not(.disabled):hover > a {
+  color: @hue-primary-color-dark !important;
+}
+
+.inactive-action:focus {
+  color: @cui-gray-600;
+}
+
+.black-link {
+  color: @cui-gray-800;
+  .hue-ease-transition(color);
+}
+
+.black-link:active,
+.black-link:focus,
+.black-link:visited {
+  color: @cui-gray-800;
+}
+
+.black-link:hover {
+  color: @hue-primary-color-dark;
+}
+
+a:hover,
+a:active,
+a:focus,
+a:visited {
+  text-decoration: none;
+}
+
+/* Context menu, popover etc. */
+
+
+.hue-context-menu {
+  display: none;
+  position: fixed;
+  margin: 2px 4px 6px 4px;
+  z-index: 999;
+  padding: 6px 1px;
+  list-style: none;
+  font-size: 13px;
+  opacity: 0;
+  transition: opacity .3s;
+}
+
+.hue-context-menu, .hue-popover-bottom {
+  border-radius: @hue-panel-border-radius;
+  background-color: @cui-white;
+  .hue-box-shadow-bottom;
+}
+
+.hue-syntax-drop-down {
+  position: absolute;
+  z-index: 1038;
+  .dropdown-menu {
+    overflow-y: scroll;
+  }
+}
+
+.hue-popover {
+  .display-flex;
+  position: absolute;
+  .flex-direction(column);
+  top: 0;
+  left: 0;
+  z-index: 1039;
+  padding: 1px;
+  background-color: @cui-white;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  border: 1px solid transparent;
+}
+
+.hue-context-popover {
+  padding: 0;
+  border: none;
+}
+
+.hue-popover.hue-popover-top {
+  margin-top: -5px;
+}
+
+.hue-popover.hue-popover-top .hue-popover-arrow {
+  bottom: -6px;
+  left: 50%;
+  margin-left: -6px;
+  border-top-color: @hue-primary-color-dark;
+  border-bottom-width: 0;
+}
+
+.hue-popover.hue-popover-top .hue-popover-arrow::after {
+  bottom: 1px;
+  margin-left: -3px;
+  content: "";
+  border-top-color: @hue-primary-color-dark;
+  border-bottom-width: 0;
+}
+
+.hue-popover.hue-popover-right {
+  margin-left: 5px;
+}
+
+.hue-popover.hue-popover-right .hue-popover-arrow {
+  top: 50%;
+  left: -6px;
+  margin-top: -6px;
+  border-right-color: @hue-primary-color-dark;
+  border-left-width: 0;
+}
+
+.hue-popover.hue-popover-right .hue-popover-arrow::after {
+  bottom: -3px;
+  left: 1px;
+  content: "";
+  border-right-color: @hue-primary-color-dark;
+  border-left-width: 0;
+}
+
+.hue-popover.hue-popover-bottom {
+  margin-top: 7px;
+}
+
+.hue-popover.hue-popover-bottom .hue-popover-arrow {
+  top: -6px;
+  left: 50%;
+  margin-left: -6px;
+  border-top-width: 0;
+  border-bottom-color: @hue-primary-color-dark;
+}
+
+.hue-popover.hue-popover-bottom .hue-popover-arrow::after {
+  top: 3px;
+  margin-left: -3px;
+  content: "";
+  border-top-width: 0;
+  border-bottom-color: @hue-primary-color-dark;
+}
+
+.hue-popover.hue-popover-left {
+  margin-left: -5px;
+}
+
+.hue-popover.hue-popover-left .hue-popover-arrow {
+  top: 50%;
+  right: -6px;
+  margin-top: -3px;
+  border-right-width: 0;
+  border-left-color: @hue-primary-color-dark;
+}
+
+.hue-popover.hue-popover-left .hue-popover-arrow::after {
+  right: 2px;
+  bottom: -3px;
+  content: "";
+  border-right-width: 0;
+  border-left-color: @hue-primary-color-dark;
+}
+
+.hue-popover-title {
+  .flex(0 1 auto);
+  padding: 6px 10px;
+  margin: 0;
+  font-size: 0.9rem;
+  background-color: @cui-white;
+}
+
+.hue-popover-title:empty {
+  display: none;
+}
+
+.hue-popover-arrow, .hue-popover-arrow::after {
+  position: absolute;
+  display: block;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+}
+
+.hue-popover-arrow {
+  border-width: 6px;
+}
+
+.hue-popover-top {
+  border-radius: @hue-panel-border-radius;
+  background-color: @cui-white;
+  .hue-box-shadow-bottom;
+}
+
+.hue-popover-right {
+  border-radius: @hue-panel-border-radius;
+  background-color: @cui-white;
+  .hue-box-shadow-right;
+}
+
+.hue-popover-left {
+  border-radius: @hue-panel-border-radius;
+  background-color: @cui-white;
+  .hue-box-shadow-left;
+}
+
+.hue-inner-drop-down {
+  margin: 0 !important;
+  padding: 0;
+  list-style: none;
+  font-size: 13px;
+}
+
+.hue-inner-drop-down > li,
+.hue-context-menu > li {
+  min-width: 170px;
+  color: @cui-gray-200;
+}
+
+.hue-inner-drop-down > li > a {
+  display: block;
+  position: relative;
+  clear: both;
+  height: 22px;
+  line-height: 22px;
+  vertical-align: middle;
+  padding: 6px 16px 6px 16px;
+
+  color: @cui-gray-800;
+  text-decoration: none;
+  font-weight: 400;
+  white-space: nowrap;
+  .hue-ease-transition(background-color);
+}
+
+.hue-context-menu > li > a {
+  display: block;
+  position: relative;
+  clear: both;
+  height: 22px;
+  line-height: 22px;
+  vertical-align: middle;
+  padding: 6px 16px 6px 38px;
+  color: @cui-gray-800;
+  text-decoration: none;
+  font-weight: 400;
+  white-space: nowrap;
+  .hue-ease-transition(background-color);
+}
+
+.hue-context-menu > li > .disabled {
+  display: block;
+  position: relative;
+  clear: both;
+  height: 22px;
+  line-height: 22px;
+  vertical-align: middle;
+  padding: 6px 16px 6px 38px;
+  cursor: default;
+  color: @cui-gray-400;
+  text-decoration: none;
+  font-weight: 400;
+  white-space: nowrap;
+}
+
+.hue-inner-drop-down > li > a:hover,
+.hue-inner-drop-down > li.active,
+.hue-context-menu > li.active,
+.hue-context-menu > li > a:not(.disabled):hover {
+  background-color: @hue-primary-color-light;
+}
+
+.hue-context-menu > li > .disabled > i {
+  position: absolute;
+  height: 22px;
+  left: 13px;
+  right: auto;
+  top: 6px;
+  color: @cui-gray-400;
+  font-size: 17px;
+  line-height: 22px;
+  vertical-align: middle;
+}
+
+.hue-context-menu > li > a > i:not(.sub-icon), .hue-context-menu > li > a > .hi:not(.sub-icon) {
+  position: absolute;
+  top: 6px;
+  left: 13px;
+  right: auto;
+  line-height: 22px;
+  height: 24px;
+  color: @cui-gray-800;
+  font-size: 17px;
+  vertical-align: middle;
+}
+
+.hue-context-menu > li > a > .sub-icon {
+  position: absolute;
+  top: 6px;
+  left: auto;
+  right: 13px;
+  line-height: 22px;
+  height: 24px;
+
+  color: @cui-gray-800;
+  font-size: 12px;
+  vertical-align: middle;
+}
+
+.hue-context-menu > .divider {
+  height: 1px;
+  margin: 9px 0;
+  overflow: hidden;
+  background-color: @cui-gray-200;
+}
+
+#contextPopover .hue-popover {
+  position: fixed;
+}
+
+.context-popover-title {
+  .display-flex;
+  .flex-direction(row);
+  width: 100%;
+  padding:0;
+  background-color: @cui-gray-050;
+}
+
+.context-popover-breadcrumbs {
+  .flex(1 1 100%);
+  .nowrap-ellipsis();
+  padding: 5px;
+}
+
+.context-popover-close {
+  .flex(1 0 15px);
+  padding: 5px;
+}
+
+.context-popover-content {
+  padding: 5px;
+}
+
+.hue-breadcrumb-container {
+  .hue-breadcrumb {
+    display: inline-block;
+  }
+
+  .hue-breadcrumb-divider {
+    display: inline-block;
+  }
+
+  .dropdown-menu {
+    overflow-y: scroll;
+  }
+}
+
+/* styling for the imported apps */
+
+.page-content .navbar-inner {
+  margin: 10px 10px 0 10px;
+  background-color: transparent;
+  border: none;
+  border-bottom: 1px solid @cui-gray-050;
+}
+
+.page-content .navbar.navbar-inverse.navbar-fixed-top {
+  position: static!important;
+}
+
+.page-content .navbar .navbar-inner {
+  box-shadow: none;
+}
+
+/* editor and report */
+.editorComponents .progress {
+  border: none;
+}
+
+.editorComponents .context-panel {
+  display: none;
+}
+
+.editorComponents .snippet {
+  margin-right: 0;
+}
+
+/* oozie workflow */
+.oozie_workflowComponents .card-toolbar {
+  position: static!important;
+  width: auto!important;
+}
+
+.tooltip, .ui-autocomplete {
+  z-index: 3000 !important;
+}
+
+/* sqoop */
+#sqoopComponents .top-bar {
+  position: static!important;
+}
+
+/* context panel */
+/* TODO: Positioning and clean-up */
+.context-panel {
+  position: fixed;
+  display: none;
+  background: @cui-white;
+  top: 113px;
+  z-index: 401;
+  outline: none !important;
+  .hue-box-shadow-bottom;
+
+  .context-panel-content {
+    height: calc(40%);
+    overflow-y: auto;
+  }
+}
+
+.context-panel .nav-tabs {
+  padding-left: 10px;
+}
+
+.context-panel .tab-content {
+  padding: 12px;
+  min-height: calc(10%);
+}
+
+.context-panel .tab-pane {
+  height: 100%;
+}
+
+#mini_jobbrowser {
+  overflow-y: auto;
+  height: 550px;
+  max-height: 550px;
+  input.search-query {
+    width: 70px;
+  }
+  .status-border-container li {
+    padding: 7px;
+    margin-top: 10px;
+    border-left: 3px solid @cui-white;
+    &:hover {
+      background-color: @cui-gray-050;
+    }
+  }
+  .status-bar {
+    height: 1px;
+    width: 0;
+    opacity: .5;
+  }
+}
+
+.uploadstatus {
+  border: 1px solid @cui-gray-300;
+  border-bottom: none;
+  bottom: 0;
+  right: 60px;
+  margin: 0;
+  position: fixed;
+  width: 560px;
+  z-index: 1001;
+}
+
+.scrollable-uploadstatus {
+  max-height: 170px;
+  overflow-y: auto;
+}
+
+.uploadstatusbar {
+  background-color: @hue-primary-color-light;
+  height: 4px;
+  bottom: 0;
+  left: 0;
+  margin: 0;
+  position: fixed;
+  width: 100%;
+}
+
+.uploadstatusbar div {
+  background-color: @hue-primary-color-dark;
+  height: 4px;
+  width: 30%;
+}
+
+.progress-row {
+  margin-top: 7px;
+}
+
+.progress-row-bar {
+  height: 1px;
+  background-color: @hue-primary-color-dark;
+  width: 0;
+  margin-top: 3px;
+}
+
+.progress .bar-upload {
+  background-color: @hue-primary-color-dark !important;
+}
+
+#importerComponents {
+  .step-indicator-fixed {
+    position: static!important;
+  }
+  .vertical-spacer {
+    height: 0 !important;
+  }
+}
+
+.help-inline.muted {
+  color: @cui-gray-600;
+}
+
+#clearNotificationHistoryModal {
+  z-index: 10000;
+}
+
+.banner {
+  position: relative;
+  z-index: 1010;
+  background-color: @cui-gray-050;
+}
+
+.global-search-empty {
+  .assist-no-entries();
+  height: 30px !important;
+  > div {
+    margin: 5px 10px;
+  }
+}
+
+.global-search-results {
+  .display-flex();
+  background-color: @cui-white;
+  position:absolute;
+  z-index: 1060;
+  top: 35px;
+  left: 0;
+  width: 100%;
+  height: 400px;
+  .hue-box-shadow-bottom();
+
+  .global-search-alternatives {
+    .flex(0 0 175px);
+    border-right: 1px solid @cui-default-border-color;
+    font-size: 13px;
+    overflow-y: auto;
+
+    .global-search-category {
+      .global-search-category-header {
+        color: @hue-primary-color-dark;
+        padding-left: 5px;
+        border-bottom: 1px solid @cui-gray-100;
+      }
+
+      > ul {
+        list-style: none;
+        margin: 0;
+
+        li {
+          .no-select();
+          .pointer();
+          .nowrap-ellipsis();
+          padding: 2px 0 2px 7px;
+          > em {
+            font-style: normal;
+            font-weight: 600;
+          }
+        }
+
+        li.selected {
+          background-color: @hue-primary-color-light;
+        }
+      }
+    }
+  }
+  .global-search-preview {
+    padding-top: 10px;
+    .display-flex();
+    .flex(1);
+
+    .context-popover-tab {
+      background-color: transparent !important;
+    }
+
+    .context-popover-inline-search {
+      width: 180px !important;
+    }
+  }
+}

+ 14 - 4
desktop/core/src/desktop/templates/hue.mako

@@ -18,6 +18,7 @@
   from django.utils.translation import ugettext as _
 
   from desktop import conf
+  from desktop.conf import EMBEDDED_MODE
   from desktop.views import _ko, commonshare, login_modal
   from desktop.lib.i18n import smart_unicode
   from desktop.models import PREFERENCE_IS_WELCOME_TOUR_SEEN
@@ -44,16 +45,17 @@
   <meta name="author" content="">
 
   <link href="${ static('desktop/css/roboto.css') }" rel="stylesheet">
+  <link href="${ static('desktop/ext/css/font-awesome.min.css') }" rel="stylesheet">
+% if EMBEDDED_MODE.get():
+  <link href="${ static('desktop/css/hue-embedded.css') }" rel="stylesheet">
+% else:
   <link href="${ static('desktop/ext/css/cui/cui.css') }" rel="stylesheet">
   <link href="${ static('desktop/ext/css/cui/bootstrap2.css') }" rel="stylesheet">
   <link href="${ static('desktop/ext/css/cui/bootstrap-responsive2.css') }" rel="stylesheet">
-
-
-  <link href="${ static('desktop/ext/css/font-awesome.min.css') }" rel="stylesheet">
   <link href="${ static('desktop/css/hue.css') }" rel="stylesheet">
   <link href="${ static('desktop/css/jquery-ui.css') }" rel="stylesheet">
   <link href="${ static('desktop/css/home.css') }" rel="stylesheet">
-
+% endif
   <script type="text/javascript">
     window.IS_HUE_4 = true;
   </script>
@@ -70,6 +72,10 @@
 
 <body>
 
+% if EMBEDDED_MODE.get():
+<div class="hue-embedded-container">
+% endif
+
 % if is_demo:
   <ul class="side-labels unstyled">
     <li class="feedback"><a href="javascript:showClassicWidget()"><i class="fa fa-envelope-o"></i> ${_('Feedback')}</a></li>
@@ -1675,5 +1681,9 @@ ${ smart_unicode(login_modal(request).content) | n,unicode }
 
 ${ commonHeaderFooterComponents.footer(messages) }
 
+% if EMBEDDED_MODE.get():
+</div>
+% endif
+
 </body>
 </html>

部分文件因为文件数量过多而无法显示