Просмотр исходного кода

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

Johan Ahlen 8 лет назад
Родитель
Сommit
7cb649b

+ 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 */'
           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: {
         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/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/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',
           '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 "hue-cross-version.less";
 
 
 @import "components/hue-hamburger.less";
 @import "components/hue-hamburger.less";
+@import "hue4.less";
 
 
 html {
 html {
   height: 100%;
   height: 100%;
@@ -40,1001 +41,4 @@ body {
   margin: 0;
   margin: 0;
   padding: 0;
   padding: 0;
   overflow: hidden;
   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 django.utils.translation import ugettext as _
 
 
   from desktop import conf
   from desktop import conf
+  from desktop.conf import EMBEDDED_MODE
   from desktop.views import _ko, commonshare, login_modal
   from desktop.views import _ko, commonshare, login_modal
   from desktop.lib.i18n import smart_unicode
   from desktop.lib.i18n import smart_unicode
   from desktop.models import PREFERENCE_IS_WELCOME_TOUR_SEEN
   from desktop.models import PREFERENCE_IS_WELCOME_TOUR_SEEN
@@ -44,16 +45,17 @@
   <meta name="author" content="">
   <meta name="author" content="">
 
 
   <link href="${ static('desktop/css/roboto.css') }" rel="stylesheet">
   <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/cui.css') }" rel="stylesheet">
   <link href="${ static('desktop/ext/css/cui/bootstrap2.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/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/hue.css') }" rel="stylesheet">
   <link href="${ static('desktop/css/jquery-ui.css') }" rel="stylesheet">
   <link href="${ static('desktop/css/jquery-ui.css') }" rel="stylesheet">
   <link href="${ static('desktop/css/home.css') }" rel="stylesheet">
   <link href="${ static('desktop/css/home.css') }" rel="stylesheet">
-
+% endif
   <script type="text/javascript">
   <script type="text/javascript">
     window.IS_HUE_4 = true;
     window.IS_HUE_4 = true;
   </script>
   </script>
@@ -70,6 +72,10 @@
 
 
 <body>
 <body>
 
 
+% if EMBEDDED_MODE.get():
+<div class="hue-embedded-container">
+% endif
+
 % if is_demo:
 % if is_demo:
   <ul class="side-labels unstyled">
   <ul class="side-labels unstyled">
     <li class="feedback"><a href="javascript:showClassicWidget()"><i class="fa fa-envelope-o"></i> ${_('Feedback')}</a></li>
     <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) }
 ${ commonHeaderFooterComponents.footer(messages) }
 
 
+% if EMBEDDED_MODE.get():
+</div>
+% endif
+
 </body>
 </body>
 </html>
 </html>

Некоторые файлы не были показаны из-за большого количества измененных файлов