|
|
@@ -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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|