Browse Source

HUE-3294 [core] Improved assist panel styling

Johan Ahlen 9 years ago
parent
commit
c4ca69c8e3

+ 36 - 1
desktop/core/src/desktop/static/desktop/css/responsive.css

@@ -82,6 +82,40 @@ body {
   transition: 0.4s flex;
 }
 
+
+.inactive-action,
+.inactive-action a {
+  -webkit-transition: color 0.2s ease;
+  -moz-transition: color 0.2s ease;
+  -ms-transition: color 0.2s ease;
+  transition: color 0.2s ease;
+  color: #999;
+}
+
+.inactive-action:hover {
+  text-decoration: none;
+}
+
+.inactive-action.disabled {
+  color: #eee !important;
+  cursor: default !important;
+}
+
+.inactive-action:not(.disabled):hover,
+.inactive-action:not(.disabled):hover > a {
+  color: #338bb8 !important;
+}
+
+.inactive-action:focus {
+  color: #999;
+}
+
+.blue {
+  color: #338BB8 !important;
+}
+
+/* Assist panel */
+
 .assist-hidden {
   flex: 0;
 }
@@ -145,9 +179,10 @@ body {
 .left-nav-visible {
   flex: 0 0 15em;
   background-color: lightgrey;
-
 }
 
+/* Main page */
+
 .page-content {
   flex: 2;
   padding: 1em;

+ 1 - 1
desktop/core/src/desktop/templates/responsive.mako

@@ -257,7 +257,7 @@ ${ hueIcons.symbols() }
       [+]
     </div>
 
-    <div id="leftAssistContainer" class="assist-container left-panel" style="position: relative">
+    <div id="leftAssistContainer" class="assist-container left-panel" style="position: relative; padding-top: 10px;">
       <a href="javascript:void(0);" style="z-index: 1000;" title="${_('Show Assist')}" class="pointer show-assist" data-bind="visible: ! leftAssistVisible(), toggle: leftAssistVisible"><i class="fa fa-chevron-right"></i></a>
       <a href="javascript:void(0);" title="${_('Hide Assist')}" class="pointer hide-assist" data-bind="visible: leftAssistVisible, toggle: leftAssistVisible"><i class="fa fa-chevron-left"></i></a>
       <!-- ko if: leftAssistVisible -->