浏览代码

HUE-5450 [responsive] Extract embedded assist styles to separate less file

This also introduces hue3-extra.less which allows us to use less mixins etc for components that rely on hue3.css
Johan Ahlen 8 年之前
父节点
当前提交
875685e

+ 2 - 1
Gruntfile.js

@@ -15,7 +15,8 @@ module.exports = function(grunt) {
           compress: false
         },
         files: {
-          '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'
         }
       }
     },

+ 366 - 2
desktop/core/src/desktop/static/desktop/css/hue.css

@@ -131,7 +131,7 @@
 .show-right-side-panel:hover,
 .hide-left-side-panel:hover {
   margin-right: 2px;
-  color: #338bb8;
+  color: #338BB8;
 }
 .hide-right-side-panel,
 .show-left-side-panel {
@@ -140,7 +140,371 @@
 .hide-right-side-panel:hover,
 .show-left-side-panel:hover {
   margin-left: 2px;
-  color: #338bb8;
+  color: #338BB8;
+}
+.assist-icon {
+  width: 16px;
+  height: 16px;
+  -webkit-filter: grayscale(1);
+  filter: grayscale(1);
+  opacity: .8;
+}
+.assist {
+  position: relative;
+  height: 100%;
+}
+.assist-resizer {
+  cursor: row-resize;
+}
+.assist-spinner {
+  font-size: 20px;
+  color: #BBB;
+}
+.assist-header {
+  -ms-flex: 1;
+  flex: 1;
+  color: #338BB8;
+  background-color: #f9f9f9;
+  border-top: 1px solid #f1f1f1;
+  border-bottom: 1px solid #f1f1f1;
+  font-weight: bold;
+  letter-spacing: 0.035em;
+  font-size: 0.975em;
+  line-height: 25px;
+  padding-left: 10px;
+  height: 24px;
+  margin-bottom: 8px;
+}
+.assist-inner-panel {
+  position: absolute;
+  overflow: hidden;
+  padding-right: 3px;
+  top: 10px;
+  right: 0;
+  bottom: 2px;
+  left: 10px;
+}
+.assist-inner-header {
+  width: 100%;
+  color: #737373;
+  margin-left: 3px;
+  margin-bottom: 2px;
+  font-weight: bold;
+  margin-top: 0;
+}
+.assist-stretchable-list {
+  position: relative;
+  overflow-y: auto;
+  overflow-x: hidden;
+  width: 100%;
+  border: none;
+  padding: 0;
+  margin-bottom: 1px;
+  margin-top: 3px;
+}
+.assist-header-actions {
+  float: right;
+  margin-right: 3px;
+  opacity: 0;
+}
+.assist-header-actions > div {
+  cursor: pointer;
+}
+.assist-panel-switches {
+  padding-left: 12px;
+  height: 40px;
+  border-bottom: 1px solid #f1f1f1;
+}
+.assist-type-switch {
+  display: inline-block;
+  font-size: 18px;
+  margin-right: 2px;
+  cursor: pointer;
+}
+.assist-column {
+  position: relative;
+}
+.assist-entry,
+a {
+  white-space: nowrap;
+}
+.assist-file-entry {
+  margin-right: 15px;
+  border: 1px solid transparent;
+}
+.assist-file-entry-drop {
+  border: 1px solid #338BB8 !important;
+}
+.assist-tables {
+  margin-left: 0;
+}
+.assist-tables a {
+  text-decoration: none;
+}
+.assist-tables li {
+  list-style: none;
+}
+.assist-breadcrumb > a:hover {
+  color: #338BB8;
+}
+.assist-errors {
+  padding: 4px 5px;
+  font-style: italic;
+}
+.assist-tables > li {
+  position: relative;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  padding-left: 4px;
+  margin-right: 15px;
+  overflow-x: hidden;
+}
+.assist-tables > li.selected {
+  background-color: #EEE;
+}
+.assist-breadcrumb {
+  padding-top: 0;
+  padding-left: 0;
+}
+.assist-breadcrumb span {
+  color: #737373;
+}
+.assist-breadcrumb a:not(.inactive-action) {
+  cursor: pointer;
+  text-decoration: none;
+  color: #737373;
+  -webkit-transition: color 0.2s ease;
+  -moz-transition: color 0.2s ease;
+  -ms-transition: color 0.2s ease;
+  transition: color 0.2s ease;
+}
+.assist-breadcrumb-text {
+  font-size: 14px;
+  line-height: 16px;
+  vertical-align: top;
+}
+.assist-breadcrumb-back {
+  font-size: 15px;
+  margin-right: 8px;
+}
+.assist-tables-counter {
+  color: #d1d1d1;
+  font-weight: normal;
+}
+.assist-table-link {
+  font-size: 13px;
+}
+.assist-field-link {
+  font-size: 12px;
+}
+.assist-table-link,
+.assist-table-link:focus {
+  color: #444;
+}
+.assist-field-link,
+.assist-field-link:focus {
+  white-space: nowrap;
+  color: #737373;
+}
+.assist-db-header-actions {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding-left: 4px;
+  padding-right: 13px;
+  background-color: #FFF;
+}
+.assist-db-header-actions > * {
+  margin-left: 2px;
+}
+.assist-actions {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding-left: 4px;
+  background-color: #FFF;
+}
+.assist-file-actions {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding-right: 2px;
+  padding-left: 4px;
+  background-color: #FFF;
+}
+.table-actions {
+  padding-top: 2px;
+}
+.assist-tables > li.selected .assist-actions {
+  background-color: #EEE;
+}
+.assist-details-wrap {
+  display: table;
+  width: 100%;
+  table-layout: fixed;
+}
+.assist-details-wrap > div {
+  display: table-row;
+}
+.highlightable {
+  -webkit-transition: all .5s linear;
+  -moz-transition: all .5s linear;
+  -o-transition: all .5s linear;
+  transition: all .5s linear;
+}
+.highlight {
+  color: #338BB8 !important;
+  padding-left: 8px;
+}
+.assist-details-header {
+  display: table-cell;
+  width: 95px;
+  font-weight: bold;
+}
+.assist-details-value {
+  display: table-cell;
+}
+.no-entries {
+  font-style: italic;
+}
+.assist-flex-panel {
+  position: relative;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-flow: column nowrap;
+  flex-flow: column nowrap;
+  align-items: stretch;
+  height: 100%;
+}
+.assist-flex-header {
+  overflow: hidden;
+  position: relative;
+  -ms-flex: 0 0 25px;
+  flex: 0 0 25px;
+  white-space: nowrap;
+}
+.assist-flex-table-search {
+  overflow: hidden;
+  position: relative;
+  -ms-flex: 0 0 65px;
+  flex: 0 0 65px;
+  white-space: nowrap;
+}
+.assist-flex-function-search {
+  overflow: hidden;
+  position: relative;
+  -ms-flex: 0 0 35px;
+  flex: 0 0 35px;
+  white-space: nowrap;
+}
+.assist-flex-search {
+  overflow: hidden;
+  position: relative;
+  -ms-flex: 0 0 43px;
+  flex: 0 0 43px;
+  white-space: nowrap;
+}
+.assist-flex-fill {
+  position: relative;
+  -ms-flex: 1 1 100%;
+  flex: 1 1 100%;
+  white-space: nowrap;
+  overflow-x: hidden;
+  overflow-y: auto;
+  outline: none !important;
+}
+.assist-flex-half {
+  position: relative;
+  -ms-flex: 1 1 50%;
+  flex: 1 1 50%;
+  white-space: nowrap;
+  overflow-x: hidden;
+  overflow-y: auto;
+  outline: none !important;
+}
+.database-tree ul {
+  margin: 0 !important;
+}
+.database-tree ul li {
+  padding-left: 15px;
+}
+.result-entry {
+  position: relative;
+  clear: both;
+  overflow: hidden;
+  margin: 0 10px 15px 10px;
+}
+.result-entry .doc-desc {
+  font-style: italic;
+  font-size: 12px;
+  line-height: 15px;
+  white-space: normal;
+  margin-left: 35px;
+}
+.nav-search-tags {
+  display: inline-block;
+  margin-left: 3px;
+}
+.nav-search-tags div {
+  display: inline-block;
+  margin: 0 1px;
+  line-height: 10px;
+  font-size: 11px;
+  padding: 3px 6px;
+  color: #FFF;
+  background-color: #338BB8;
+  border-radius: 6px;
+}
+.result-entry .icon-col {
+  width: 35px;
+  float: left;
+  vertical-align: top;
+  padding-top: 7px;
+  font-size: 20px;
+  color: #338BB8;
+}
+.result-entry .doc-col {
+  white-space: nowrap;
+}
+.doc-col-no-desc {
+  padding-top: 7px;
+}
+.result-entry .hue-icon {
+  font-size: 30px;
+}
+.function-dialect-dropdown a span {
+  color: #444;
+  font-size: 14px;
+  font-weight: 600;
+}
+.function-dialect-dropdown a i {
+  color: #444;
+  font-size: 14px;
+}
+.assist-filter {
+  margin-right: 8px;
+}
+.assist-filter input {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  width: 100%;
+  border-radius: 4px;
+  border: 1px solid #DDD;
+  box-shadow: none;
+}
+.assist-function-details {
+  border-top: 2px solid #F1F1F1;
+  margin-top: 5px;
+  margin-right: 10px;
+  padding: 10px;
+  white-space: normal;
+}
+.assist-function-signature {
+  font: 14px / normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
+  direction: ltr;
+  line-height: 18px;
+  margin-bottom: 10px;
 }
 html {
   height: 100%;

+ 508 - 0
desktop/core/src/desktop/static/desktop/css/hue3-extra.css

@@ -0,0 +1,508 @@
+/*
+ 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.
+*/
+/*
+ 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.
+*/
+.assist-panel {
+  -ms-flex: 0 0 200px;
+  flex: 0 0 200px;
+  position: relative;
+  overflow-x: hidden;
+  white-space: nowrap;
+  -webkit-transition: 0.4s flex;
+  -moz-transition: 0.4s flex;
+  -ms-transition: 0.4s flex;
+  transition: 0.4s flex;
+}
+.assist-hidden {
+  -ms-flex: 0;
+  flex: 0;
+}
+.assist-panel .assist {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+.right-panel-tabs {
+  margin-top: 8px;
+  border-bottom: 1px solid #F1F1F1;
+  padding-left: 14px;
+}
+.right-panel-tabs > li > a {
+  font-size: 13px;
+  padding: 6px 5px 8px 5px;
+  margin-bottom: 0;
+}
+.right-panel-tabs > li.active > a {
+  padding: 6px 5px 8px 5px;
+}
+.right-panel-tab-content {
+  position: absolute;
+  top: 40px;
+  bottom: 0;
+  width: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  border: none !important;
+}
+.assist-function-categories,
+.assist-functions {
+  list-style: none;
+  overflow-x: hidden;
+}
+.assist-function-categories {
+  margin: 5px;
+}
+.assist-function-categories li {
+  line-height: 23px;
+}
+.assist-function-categories li a i {
+  font-size: 12px;
+}
+.assist-function-categories li a span {
+  font-size: 14px;
+}
+.assist-functions {
+  margin: 0;
+}
+.assist-functions > li {
+  margin: 0 0 0 10px;
+  padding: 0 0 0 10px;
+}
+.assist-functions li {
+  font-size: 13px;
+  line-height: 20px;
+}
+.assist-functions li div {
+  margin: 0 0 0 10px;
+  font-style: italic;
+}
+.assist-function-type-switch {
+  padding: 8px 10px;
+  font-size: 15px;
+}
+.side-panel-toggle {
+  position: absolute;
+  top: 2px;
+  margin: 0;
+  z-index: 1000;
+  color: #D1D1D1;
+  font-size: 14px;
+  -webkit-transition: margin 0.2s linear, color 0.5s ease;
+  -moz-transition: margin 0.2s linear, color 0.5s ease;
+  -ms-transition: margin 0.2s linear, color 0.5s ease;
+  transition: margin 0.2s linear, color 0.5s ease;
+}
+.show-right-side-panel,
+.hide-left-side-panel {
+  right: 4px;
+}
+.show-right-side-panel:hover,
+.hide-left-side-panel:hover {
+  margin-right: 2px;
+  color: #338BB8;
+}
+.hide-right-side-panel,
+.show-left-side-panel {
+  left: 4px;
+}
+.hide-right-side-panel:hover,
+.show-left-side-panel:hover {
+  margin-left: 2px;
+  color: #338BB8;
+}
+.assist-icon {
+  width: 16px;
+  height: 16px;
+  -webkit-filter: grayscale(1);
+  filter: grayscale(1);
+  opacity: .8;
+}
+.assist {
+  position: relative;
+  height: 100%;
+}
+.assist-resizer {
+  cursor: row-resize;
+}
+.assist-spinner {
+  font-size: 20px;
+  color: #BBB;
+}
+.assist-header {
+  -ms-flex: 1;
+  flex: 1;
+  color: #338BB8;
+  background-color: #f9f9f9;
+  border-top: 1px solid #f1f1f1;
+  border-bottom: 1px solid #f1f1f1;
+  font-weight: bold;
+  letter-spacing: 0.035em;
+  font-size: 0.975em;
+  line-height: 25px;
+  padding-left: 10px;
+  height: 24px;
+  margin-bottom: 8px;
+}
+.assist-inner-panel {
+  position: absolute;
+  overflow: hidden;
+  padding-right: 3px;
+  top: 10px;
+  right: 0;
+  bottom: 2px;
+  left: 10px;
+}
+.assist-inner-header {
+  width: 100%;
+  color: #737373;
+  margin-left: 3px;
+  margin-bottom: 2px;
+  font-weight: bold;
+  margin-top: 0;
+}
+.assist-stretchable-list {
+  position: relative;
+  overflow-y: auto;
+  overflow-x: hidden;
+  width: 100%;
+  border: none;
+  padding: 0;
+  margin-bottom: 1px;
+  margin-top: 3px;
+}
+.assist-header-actions {
+  float: right;
+  margin-right: 3px;
+  opacity: 0;
+}
+.assist-header-actions > div {
+  cursor: pointer;
+}
+.assist-panel-switches {
+  padding-left: 12px;
+  height: 40px;
+  border-bottom: 1px solid #f1f1f1;
+}
+.assist-type-switch {
+  display: inline-block;
+  font-size: 18px;
+  margin-right: 2px;
+  cursor: pointer;
+}
+.assist-column {
+  position: relative;
+}
+.assist-entry,
+a {
+  white-space: nowrap;
+}
+.assist-file-entry {
+  margin-right: 15px;
+  border: 1px solid transparent;
+}
+.assist-file-entry-drop {
+  border: 1px solid #338BB8 !important;
+}
+.assist-tables {
+  margin-left: 0;
+}
+.assist-tables a {
+  text-decoration: none;
+}
+.assist-tables li {
+  list-style: none;
+}
+.assist-breadcrumb > a:hover {
+  color: #338BB8;
+}
+.assist-errors {
+  padding: 4px 5px;
+  font-style: italic;
+}
+.assist-tables > li {
+  position: relative;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  padding-left: 4px;
+  margin-right: 15px;
+  overflow-x: hidden;
+}
+.assist-tables > li.selected {
+  background-color: #EEE;
+}
+.assist-breadcrumb {
+  padding-top: 0;
+  padding-left: 0;
+}
+.assist-breadcrumb span {
+  color: #737373;
+}
+.assist-breadcrumb a:not(.inactive-action) {
+  cursor: pointer;
+  text-decoration: none;
+  color: #737373;
+  -webkit-transition: color 0.2s ease;
+  -moz-transition: color 0.2s ease;
+  -ms-transition: color 0.2s ease;
+  transition: color 0.2s ease;
+}
+.assist-breadcrumb-text {
+  font-size: 14px;
+  line-height: 16px;
+  vertical-align: top;
+}
+.assist-breadcrumb-back {
+  font-size: 15px;
+  margin-right: 8px;
+}
+.assist-tables-counter {
+  color: #d1d1d1;
+  font-weight: normal;
+}
+.assist-table-link {
+  font-size: 13px;
+}
+.assist-field-link {
+  font-size: 12px;
+}
+.assist-table-link,
+.assist-table-link:focus {
+  color: #444;
+}
+.assist-field-link,
+.assist-field-link:focus {
+  white-space: nowrap;
+  color: #737373;
+}
+.assist-db-header-actions {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding-left: 4px;
+  padding-right: 13px;
+  background-color: #FFF;
+}
+.assist-db-header-actions > * {
+  margin-left: 2px;
+}
+.assist-actions {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding-left: 4px;
+  background-color: #FFF;
+}
+.assist-file-actions {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding-right: 2px;
+  padding-left: 4px;
+  background-color: #FFF;
+}
+.table-actions {
+  padding-top: 2px;
+}
+.assist-tables > li.selected .assist-actions {
+  background-color: #EEE;
+}
+.assist-details-wrap {
+  display: table;
+  width: 100%;
+  table-layout: fixed;
+}
+.assist-details-wrap > div {
+  display: table-row;
+}
+.highlightable {
+  -webkit-transition: all .5s linear;
+  -moz-transition: all .5s linear;
+  -o-transition: all .5s linear;
+  transition: all .5s linear;
+}
+.highlight {
+  color: #338BB8 !important;
+  padding-left: 8px;
+}
+.assist-details-header {
+  display: table-cell;
+  width: 95px;
+  font-weight: bold;
+}
+.assist-details-value {
+  display: table-cell;
+}
+.no-entries {
+  font-style: italic;
+}
+.assist-flex-panel {
+  position: relative;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-flow: column nowrap;
+  flex-flow: column nowrap;
+  align-items: stretch;
+  height: 100%;
+}
+.assist-flex-header {
+  overflow: hidden;
+  position: relative;
+  -ms-flex: 0 0 25px;
+  flex: 0 0 25px;
+  white-space: nowrap;
+}
+.assist-flex-table-search {
+  overflow: hidden;
+  position: relative;
+  -ms-flex: 0 0 65px;
+  flex: 0 0 65px;
+  white-space: nowrap;
+}
+.assist-flex-function-search {
+  overflow: hidden;
+  position: relative;
+  -ms-flex: 0 0 35px;
+  flex: 0 0 35px;
+  white-space: nowrap;
+}
+.assist-flex-search {
+  overflow: hidden;
+  position: relative;
+  -ms-flex: 0 0 43px;
+  flex: 0 0 43px;
+  white-space: nowrap;
+}
+.assist-flex-fill {
+  position: relative;
+  -ms-flex: 1 1 100%;
+  flex: 1 1 100%;
+  white-space: nowrap;
+  overflow-x: hidden;
+  overflow-y: auto;
+  outline: none !important;
+}
+.assist-flex-half {
+  position: relative;
+  -ms-flex: 1 1 50%;
+  flex: 1 1 50%;
+  white-space: nowrap;
+  overflow-x: hidden;
+  overflow-y: auto;
+  outline: none !important;
+}
+.database-tree ul {
+  margin: 0 !important;
+}
+.database-tree ul li {
+  padding-left: 15px;
+}
+.result-entry {
+  position: relative;
+  clear: both;
+  overflow: hidden;
+  margin: 0 10px 15px 10px;
+}
+.result-entry .doc-desc {
+  font-style: italic;
+  font-size: 12px;
+  line-height: 15px;
+  white-space: normal;
+  margin-left: 35px;
+}
+.nav-search-tags {
+  display: inline-block;
+  margin-left: 3px;
+}
+.nav-search-tags div {
+  display: inline-block;
+  margin: 0 1px;
+  line-height: 10px;
+  font-size: 11px;
+  padding: 3px 6px;
+  color: #FFF;
+  background-color: #338BB8;
+  border-radius: 6px;
+}
+.result-entry .icon-col {
+  width: 35px;
+  float: left;
+  vertical-align: top;
+  padding-top: 7px;
+  font-size: 20px;
+  color: #338BB8;
+}
+.result-entry .doc-col {
+  white-space: nowrap;
+}
+.doc-col-no-desc {
+  padding-top: 7px;
+}
+.result-entry .hue-icon {
+  font-size: 30px;
+}
+.function-dialect-dropdown a span {
+  color: #444;
+  font-size: 14px;
+  font-weight: 600;
+}
+.function-dialect-dropdown a i {
+  color: #444;
+  font-size: 14px;
+}
+.assist-filter {
+  margin-right: 8px;
+}
+.assist-filter input {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  width: 100%;
+  border-radius: 4px;
+  border: 1px solid #DDD;
+  box-shadow: none;
+}
+.assist-function-details {
+  border-top: 2px solid #F1F1F1;
+  margin-top: 5px;
+  margin-right: 10px;
+  padding: 10px;
+  white-space: normal;
+}
+.assist-function-signature {
+  font: 14px / normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
+  direction: ltr;
+  line-height: 18px;
+  margin-bottom: 10px;
+}

+ 433 - 2
desktop/core/src/desktop/static/desktop/less/hue-assist.less

@@ -16,6 +16,7 @@
  limitations under the License.
 */
 @import (reference) "cui/colors.less";
+@import (reference) "hue-attributes.less";
 
 .assist-panel {
   -ms-flex: 0 0 200px;
@@ -135,7 +136,7 @@
 .show-right-side-panel:hover,
 .hide-left-side-panel:hover {
   margin-right: 2px;
-  color: #338bb8;
+  color: @hue-primary-color-dark;
 }
 
 .hide-right-side-panel,
@@ -146,5 +147,435 @@
 .hide-right-side-panel:hover,
 .show-left-side-panel:hover {
   margin-left: 2px;
-  color: #338bb8;
+  color: @hue-primary-color-dark;
+}
+
+.assist-icon {
+  width: 16px;
+  height: 16px;
+  -webkit-filter: grayscale(1);
+  filter: grayscale(1);
+  opacity: .8;
+}
+
+.assist {
+  position: relative;
+  height: 100%;
+}
+
+.assist-resizer {
+  cursor: row-resize;
+}
+
+.assist-spinner {
+  font-size: 20px;
+  color: #BBB;
+}
+
+.assist-header {
+  -ms-flex: 1;
+  flex: 1;
+  color: @hue-primary-color-dark;
+  background-color: #f9f9f9;
+  border-top: 1px solid #f1f1f1;
+  border-bottom: 1px solid #f1f1f1;
+  font-weight: bold;
+  letter-spacing: 0.035em;
+  font-size: 0.975em;
+  line-height: 25px;
+  padding-left: 10px;
+  height: 24px;
+  margin-bottom: 8px;
+}
+
+.assist-inner-panel {
+  position: absolute;
+  overflow: hidden;
+  padding-right: 3px;
+  top: 10px;
+  right: 0;
+  bottom: 2px;
+  left: 10px;
+}
+
+.assist-inner-header {
+  width: 100%;
+  color: #737373;
+  margin-left:3px;
+  margin-bottom:2px;
+  font-weight: bold;
+  margin-top: 0
+}
+
+.assist-stretchable-list {
+  position:relative;
+  overflow-y: auto;
+  overflow-x: hidden;
+  width: 100%;
+  border: none;
+  padding: 0;
+  margin-bottom: 1px;
+  margin-top:3px;
+}
+
+.assist-header-actions {
+  float: right;
+  margin-right: 3px;
+  opacity: 0;
+}
+
+.assist-header-actions > div {
+  cursor: pointer;
+}
+
+.assist-panel-switches {
+  padding-left: 12px;
+  height: 40px;
+  border-bottom: 1px solid #f1f1f1;
+}
+
+.assist-type-switch {
+  display: inline-block;
+  font-size: 18px;
+  margin-right: 2px;
+  cursor: pointer;
+}
+
+.assist-column {
+  position: relative;
+}
+
+.assist-entry,a {
+  white-space: nowrap;
+}
+
+.assist-file-entry {
+  margin-right: 15px;
+  border: 1px solid transparent;
+}
+
+.assist-file-entry-drop {
+  border: 1px solid @hue-primary-color-dark !important;
+}
+
+.assist-tables {
+  margin-left: 0;
+}
+
+.assist-tables a {
+  text-decoration: none;
+}
+
+.assist-tables li {
+  list-style: none;
+}
+
+.assist-breadcrumb > a:hover {
+  color: @hue-primary-color-dark;
+}
+
+.assist-errors {
+  padding: 4px 5px;
+  font-style: italic;
+}
+
+.assist-tables > li {
+  position: relative;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  padding-left: 4px;
+  margin-right: 15px;
+  overflow-x: hidden;
+}
+
+.assist-tables > li.selected {
+  background-color: #EEE;
+}
+
+.assist-breadcrumb {
+  padding-top: 0;
+  padding-left: 0;
+}
+
+.assist-breadcrumb span {
+  color: #737373;
+}
+
+.assist-breadcrumb a:not(.inactive-action) {
+  cursor: pointer;
+  text-decoration: none;
+  color: #737373;
+  .hue-ease-transition(color);
+}
+
+.assist-breadcrumb-text {
+  font-size: 14px;
+  line-height: 16px;
+  vertical-align: top;
+}
+
+.assist-breadcrumb-back {
+  font-size: 15px;
+  margin-right:8px;
+}
+
+.assist-tables-counter {
+  color: #d1d1d1;
+  font-weight: normal;
+}
+
+.assist-table-link {
+  font-size: 13px;
+}
+
+.assist-field-link {
+  font-size: 12px;
+}
+
+.assist-table-link,
+.assist-table-link:focus {
+  color: #444;
+}
+
+.assist-field-link,
+.assist-field-link:focus {
+  white-space: nowrap;
+  color: #737373;
+}
+
+.assist-db-header-actions {
+  position:absolute;
+  top: 0;
+  right: 0;
+  padding-left:4px;
+  padding-right: 13px;
+  background-color: #FFF;
+}
+
+.assist-db-header-actions > * {
+  margin-left: 2px;
+}
+
+.assist-actions {
+  position:absolute;
+  top: 0;
+  right: 0;
+  padding-left:4px;
+  background-color: #FFF;
+}
+
+.assist-file-actions  {
+  position:absolute;
+  top: 0;
+  right: 0;
+  padding-right: 2px;
+  padding-left:4px;
+  background-color: #FFF;
+}
+
+.table-actions {
+  padding-top:2px;
+}
+
+.assist-tables > li.selected .assist-actions {
+  background-color: #EEE;
+}
+
+.assist-details-wrap {
+  display: table;
+  width: 100%;
+  table-layout: fixed;
+}
+
+.assist-details-wrap > div {
+  display: table-row;
+}
+
+.highlightable {
+  -webkit-transition: all .5s linear;
+  -moz-transition: all .5s linear;
+  -o-transition: all .5s linear;
+  transition: all .5s linear;
+}
+
+.highlight {
+  color: @hue-primary-color-dark !important;
+  padding-left: 8px;
+}
+
+.assist-details-header {
+  display: table-cell;
+  width: 95px;
+  font-weight: bold;
+}
+
+.assist-details-value {
+  display: table-cell;
+}
+
+.no-entries {
+  font-style: italic;
+}
+
+.assist-flex-panel {
+  position: relative;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-flow: column nowrap;
+  flex-flow: column nowrap;
+  align-items: stretch;
+  height:100%;
+}
+
+.assist-flex-header {
+  overflow: hidden;
+  position: relative;
+  -ms-flex: 0 0 25px;
+  flex: 0 0 25px;
+  white-space: nowrap;
+}
+
+.assist-flex-table-search {
+  overflow: hidden;
+  position: relative;
+  -ms-flex: 0 0 65px;
+  flex: 0 0 65px;
+  white-space: nowrap;
+}
+
+.assist-flex-function-search {
+  overflow: hidden;
+  position: relative;
+  -ms-flex: 0 0 35px;
+  flex: 0 0 35px;
+  white-space: nowrap;
+}
+
+.assist-flex-search {
+  overflow: hidden;
+  position: relative;
+  -ms-flex: 0 0 43px;
+  flex: 0 0 43px;
+  white-space: nowrap;
+}
+
+.assist-flex-fill {
+  position: relative;
+  -ms-flex: 1 1 100%;
+  flex: 1 1 100%;
+  white-space: nowrap;
+  overflow-x: hidden;
+  overflow-y: auto;
+  outline: none !important;
+}
+
+.assist-flex-half {
+  position: relative;
+  -ms-flex: 1 1 50%;
+  flex: 1 1 50%;
+  white-space: nowrap;
+  overflow-x: hidden;
+  overflow-y: auto;
+  outline: none !important;
+}
+
+.database-tree ul {
+  margin: 0 !important;
+}
+
+.database-tree ul li {
+  padding-left: 15px;
+}
+
+.result-entry {
+  position: relative;
+  clear: both;
+  overflow: hidden;
+  margin: 0 10px 15px 10px;
+}
+
+.result-entry .doc-desc {
+  font-style: italic;
+  font-size: 12px;
+  line-height: 15px;
+  white-space: normal;
+  margin-left: 35px;
+}
+
+.nav-search-tags {
+  display: inline-block;
+  margin-left: 3px;
+}
+
+.nav-search-tags div {
+  display: inline-block;
+  margin: 0 1px;
+  line-height: 10px;
+  font-size: 11px;
+  padding: 3px 6px;
+  color: #FFF;
+  background-color: @hue-primary-color-dark;
+  border-radius: 6px;
+}
+
+.result-entry .icon-col {
+  width: 35px;
+  float:left;
+  vertical-align: top;
+  padding-top: 7px;
+  font-size: 20px;
+  color: @hue-primary-color-dark;
+}
+
+.result-entry .doc-col {
+  white-space: nowrap;
+}
+
+.doc-col-no-desc {
+  padding-top: 7px;
+}
+
+.result-entry .hue-icon {
+  font-size: 30px;
+}
+
+.function-dialect-dropdown a span {
+  color: #444;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.function-dialect-dropdown a i {
+  color: #444;
+  font-size: 14px;
+}
+
+.assist-filter {
+  margin-right: 8px;
+}
+
+.assist-filter input {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  width: 100%;
+
+  border-radius: 4px;
+  border: 1px solid #DDD;
+  box-shadow: none;
+}
+
+.assist-function-details {
+  border-top: 2px solid #F1F1F1;
+  margin-top: 5px;
+  margin-right:10px;
+  padding: 10px;
+  white-space: normal;
+}
+
+.assist-function-signature {
+  font: 14px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
+  direction: ltr;
+  line-height: 18px;
+  margin-bottom: 10px;
 }

+ 0 - 1
desktop/core/src/desktop/static/desktop/less/hue-attributes.less

@@ -16,7 +16,6 @@
  limitations under the License.
 */
 @import (reference) "cui/colors.less";
-@import "hue-assist.less";
 
 /*
 

+ 21 - 0
desktop/core/src/desktop/static/desktop/less/hue3-extra.less

@@ -0,0 +1,21 @@
+/*
+ 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-attributes.less";
+@import "hue-assist";

+ 0 - 435
desktop/core/src/desktop/templates/assist.mako

@@ -51,441 +51,6 @@ from notebook.conf import ENABLE_QUERY_BUILDER
   ${ sqlContextPopover.sqlContextPopover() }
   ${ nav_components.nav_tags(readOnly=not user.has_hue_permission(action="write", app="metadata")) }
 
-  <style>
-    .assist-icon {
-      width: 16px;
-      height: 16px;
-      -webkit-filter: grayscale(1);
-      filter: grayscale(1);
-      opacity: .8;
-    }
-
-    .assist {
-      position: relative;
-      height: 100%;
-    }
-
-    .assist-resizer {
-      cursor: row-resize;
-    }
-
-    .assist-spinner {
-      font-size: 20px;
-      color: #BBB;
-    }
-
-    .assist-header {
-      -ms-flex: 1;
-      flex: 1;
-      color: #338bb8;
-      background-color: #f9f9f9;
-      border-top: 1px solid #f1f1f1;
-      border-bottom: 1px solid #f1f1f1;
-      font-weight: bold;
-      letter-spacing: 0.035em;
-      font-size: 0.975em;
-      line-height: 25px;
-      padding-left: 10px;
-      height: 24px;
-      margin-bottom: 8px;
-    }
-
-    .assist-inner-panel {
-      position: absolute;
-      overflow: hidden;
-      padding-right: 3px;
-      top: 10px;
-      right: 0;
-      bottom: 2px;
-      left: 10px;
-    }
-
-    .assist-inner-header {
-      width: 100%;
-      color: #737373;
-      margin-left:3px;
-      margin-bottom:2px;
-      font-weight: bold;
-      margin-top: 0
-    }
-
-    .assist-stretchable-list {
-      position:relative;
-      overflow-y: auto;
-      overflow-x: hidden;
-      width: 100%;
-      border: none;
-      padding: 0;
-      margin-bottom: 1px;
-      margin-top:3px;
-    }
-
-    .assist-header-actions {
-      float: right;
-      margin-right: 3px;
-      opacity: 0;
-    }
-
-    .assist-header-actions > div {
-      cursor: pointer;
-    }
-
-    .assist-panel-switches {
-      padding-left: 12px;
-      height: 40px;
-      border-bottom: 1px solid #f1f1f1;
-    }
-
-    .assist-type-switch {
-      display: inline-block;
-      font-size: 18px;
-      margin-right: 2px;
-      cursor: pointer;
-    }
-
-    .assist-column {
-      position: relative;
-    }
-
-    .assist-entry,a {
-      white-space: nowrap;
-    }
-
-    .assist-file-entry {
-      margin-right: 15px;
-      border: 1px solid transparent;
-    }
-
-    .assist-file-entry-drop {
-      border: 1px solid #338BB8 !important;
-    }
-
-    .assist-tables {
-      margin-left: 0;
-    }
-
-    .assist-tables a {
-      text-decoration: none;
-    }
-
-    .assist-tables li {
-      list-style: none;
-    }
-
-    .assist-breadcrumb > a:hover {
-      color: #338bb8;
-    }
-
-    .assist-errors {
-      padding: 4px 5px;
-      font-style: italic;
-    }
-
-    .assist-tables > li {
-      position: relative;
-      padding-top: 2px;
-      padding-bottom: 2px;
-      padding-left: 4px;
-      margin-right: 15px;
-      overflow-x: hidden;
-    }
-
-    .assist-tables > li.selected {
-      background-color: #EEE;
-    }
-
-    .assist-breadcrumb {
-      padding-top: 0;
-      padding-left: 0;
-    }
-
-    .assist-breadcrumb span {
-      color: #737373;
-    }
-
-    .assist-breadcrumb a:not(.inactive-action) {
-      cursor: pointer;
-      text-decoration: none;
-      color: #737373;
-      -webkit-transition: color 0.2s ease;
-      -moz-transition: color 0.2s ease;
-      -ms-transition: color 0.2s ease;
-      transition: color 0.2s ease;
-    }
-
-    .assist-breadcrumb-text {
-      font-size: 14px;
-      line-height: 16px;
-      vertical-align: top;
-    }
-
-    .assist-breadcrumb-back {
-      font-size: 15px;
-      margin-right:8px;
-    }
-
-    .assist-tables-counter {
-      color: #d1d1d1;
-      font-weight: normal;
-    }
-
-    .assist-table-link {
-      font-size: 13px;
-    }
-
-    .assist-field-link {
-      font-size: 12px;
-    }
-
-    .assist-table-link,
-    .assist-table-link:focus {
-      color: #444;
-    }
-
-    .assist-field-link,
-    .assist-field-link:focus {
-      white-space: nowrap;
-      color: #737373;
-    }
-
-    .assist-db-header-actions {
-      position:absolute;
-      top: 0;
-      right: 0;
-      padding-left:4px;
-      padding-right: 13px;
-      background-color: #FFF;
-    }
-
-    .assist-db-header-actions > * {
-      margin-left: 2px;
-    }
-
-    .assist-actions {
-      position:absolute;
-      top: 0;
-      right: 0;
-      padding-left:4px;
-      background-color: #FFF;
-    }
-
-    .assist-file-actions  {
-      position:absolute;
-      top: 0;
-      right: 0;
-      padding-right: 2px;
-      padding-left:4px;
-      background-color: #FFF;
-    }
-
-    .table-actions {
-      padding-top:2px;
-    }
-
-    .assist-tables > li.selected .assist-actions {
-      background-color: #EEE;
-    }
-
-    .assist-details-wrap {
-      display: table;
-      width: 100%;
-      table-layout: fixed;
-    }
-
-    .assist-details-wrap > div {
-      display: table-row;
-    }
-
-    .highlightable {
-      -webkit-transition: all .5s linear;
-      -moz-transition: all .5s linear;
-      -o-transition: all .5s linear;
-      transition: all .5s linear;
-    }
-
-    .highlight {
-      color: #338BB8 !important;
-      padding-left: 8px;
-    }
-
-    .assist-details-header {
-      display: table-cell;
-      width: 95px;
-      font-weight: bold;
-    }
-
-    .assist-details-value {
-      display: table-cell;
-    }
-
-    .no-entries {
-      font-style: italic;
-    }
-
-    .assist-flex-panel {
-      position: relative;
-      display: -ms-flexbox;
-      display: flex;
-      -ms-flex-flow: column nowrap;
-      flex-flow: column nowrap;
-      align-items: stretch;
-      height:100%;
-    }
-
-    .assist-flex-header {
-      overflow: hidden;
-      position: relative;
-      -ms-flex: 0 0 25px;
-      flex: 0 0 25px;
-      white-space: nowrap;
-    }
-
-    .assist-flex-table-search {
-      overflow: hidden;
-      position: relative;
-      -ms-flex: 0 0 65px;
-      flex: 0 0 65px;
-      white-space: nowrap;
-    }
-
-    .assist-flex-function-search {
-      overflow: hidden;
-      position: relative;
-      -ms-flex: 0 0 35px;
-      flex: 0 0 35px;
-      white-space: nowrap;
-    }
-
-    .assist-flex-search {
-      overflow: hidden;
-      position: relative;
-      -ms-flex: 0 0 43px;
-      flex: 0 0 43px;
-      white-space: nowrap;
-    }
-
-    .assist-flex-fill {
-      position: relative;
-      -ms-flex: 1 1 100%;
-      flex: 1 1 100%;
-      white-space: nowrap;
-      overflow-x: hidden;
-      overflow-y: auto;
-      outline: none !important;
-    }
-
-    .assist-flex-half {
-      position: relative;
-      -ms-flex: 1 1 50%;
-      flex: 1 1 50%;
-      white-space: nowrap;
-      overflow-x: hidden;
-      overflow-y: auto;
-      outline: none !important;
-    }
-
-    .database-tree ul {
-      margin: 0 !important;
-    }
-
-    .database-tree ul li {
-      padding-left: 15px;
-    }
-
-    .result-entry {
-      position: relative;
-      clear: both;
-      overflow: hidden;
-      margin: 0 10px 15px 10px;
-    }
-
-    .result-entry .doc-desc {
-      font-style: italic;
-      font-size: 12px;
-      line-height: 15px;
-      white-space: normal;
-      margin-left: 35px;
-    }
-
-    .nav-search-tags {
-      display: inline-block;
-      margin-left: 3px;
-    }
-
-    .nav-search-tags div {
-      display: inline-block;
-      margin: 0 1px;
-      line-height: 10px;
-      font-size: 11px;
-      padding: 3px 6px;
-      color: #FFF;
-      background-color: #338BB8;
-      border-radius: 6px;
-    }
-
-    .result-entry .icon-col {
-      width: 35px;
-      float:left;
-      vertical-align: top;
-      padding-top: 7px;
-      font-size: 20px;
-      color: #338bb8;
-    }
-
-    .result-entry .doc-col {
-      white-space: nowrap;
-    }
-
-    .doc-col-no-desc {
-      padding-top: 7px;
-    }
-
-    .result-entry .hue-icon {
-      font-size: 30px;
-    }
-
-    .function-dialect-dropdown a span {
-      color: #444;
-      font-size: 14px;
-      font-weight: 600;
-    }
-
-    .function-dialect-dropdown a i {
-      color: #444;
-      font-size: 14px;
-    }
-
-    .assist-filter {
-      margin-right: 8px;
-    }
-
-    .assist-filter input {
-      -webkit-box-sizing: border-box;
-      -moz-box-sizing: border-box;
-      box-sizing: border-box;
-      width: 100%;
-
-      border-radius: 4px;
-      border: 1px solid #DDD;
-      box-shadow: none;
-    }
-
-    .assist-function-details {
-      border-top: 2px solid #F1F1F1;
-      margin-top: 5px;
-      margin-right:10px;
-      padding: 10px;
-      white-space: normal;
-    }
-
-    .assist-function-signature {
-      font: 14px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
-      direction: ltr;
-      line-height: 18px;
-      margin-bottom: 10px;
-    }
-  </style>
-
   <script type="text/html" id="assist-no-database-entries">
     <ul class="assist-tables">
       <li>

+ 1 - 0
desktop/core/src/desktop/templates/common_header.mako

@@ -59,6 +59,7 @@ if USE_NEW_EDITOR.get():
   <link href="${ static('desktop/ext/css/bootplus.css') }" rel="stylesheet">
   <link href="${ static('desktop/ext/css/font-awesome.min.css') }" rel="stylesheet">
   <link href="${ static('desktop/css/hue3.css') }" rel="stylesheet">
+  <link href="${ static('desktop/css/hue3-extra.css') }" rel="stylesheet">
 
   <style type="text/css">
     % if conf.CUSTOM.BANNER_TOP_HTML.get():

+ 1 - 0
desktop/libs/liboauth/src/liboauth/templates/oauth-login.mako

@@ -34,6 +34,7 @@ from django.utils.translation import ugettext as _
   <link href="${ static('desktop/ext/css/bootplus.css') }" rel="stylesheet">
   <link href="${ static('desktop/ext/css/font-awesome.min.css') }" rel="stylesheet">
   <link href="${ static('desktop/css/hue3.css') }" rel="stylesheet">
+  <link href="${ static('desktop/css/hue3-extra.css') }" rel="stylesheet">
 
   <style type="text/css">
     body {

+ 1 - 0
desktop/libs/libopenid/src/libopenid/templates/openid-login.html

@@ -16,6 +16,7 @@
   <link href="/static/desktop/ext/css/bootplus.css" rel="stylesheet">
   <link href="/static/desktop/ext/css/font-awesome.min.css" rel="stylesheet">
   <link href="/static/desktop/css/hue3.css" rel="stylesheet">
+  <link href="/static/desktop/css/hue3-extra.css" rel="stylesheet">
 
   <style type="text/css">
     body {