Эх сурвалжийг харах

HUE-5450 [responsive] Extract common less values and attributes

Johan Ahlen 8 жил өмнө
parent
commit
e110f76aec

+ 1 - 1
Gruntfile.js

@@ -9,7 +9,7 @@ module.exports = function(grunt) {
   grunt.initConfig({
     config: config,
     less: {
-      responsive: {
+      hue: {
         options: {
           paths: ['desktop/core/src/desktop/static/desktop/less'],
           compress: false

+ 49 - 45
desktop/core/src/desktop/static/desktop/css/hue.css

@@ -220,9 +220,10 @@ body {
   right: 10px;
   font-size: 13px;
   border-radius: 2px;
-  background-color: #FFF;
-  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
-  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18), 0 2px 8px 0 rgba(0, 0, 0, 0.13);
+  background-color: #FFFFFF;
+  -webkit-box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.18);
+  -moz-box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.18);
+  box-shadow: 0 -2px 6px 0 rgba(0, 0, 0, 0.18), 0 -2px 8px 0 rgba(0, 0, 0, 0.13);
 }
 .notification-history {
   overflow-y: auto;
@@ -252,14 +253,10 @@ body {
   background-image: none;
   font-weight: 600;
   font-size: 14px;
-  -webkit-transition-duration: 0.2s;
-  -mos-transition-duration: 0.2s;
-  -ms-transition-duration: 0.2s;
-  transition-duration: 0.2s;
-  -webkit-transition-property: background-color, color;
-  -moz-transition-property: background-color, color;
-  -ms-transition-property: background-color, color;
-  transition-property: background-color, color;
+  -webkit-transition: background-color, color 0.2s ease;
+  -moz-transition: background-color, color 0.2s ease;
+  -ms-transition: background-color, color 0.2s ease;
+  transition: background-color, color 0.2s ease;
 }
 .compose-action .btn:hover {
   background-color: rgba(240, 240, 240, 0.92);
@@ -273,14 +270,10 @@ body {
   padding: 1px 5px;
   border-radius: 10px;
   font-size: 12px;
-  -webkit-transition-duration: 0.2s;
-  -mos-transition-duration: 0.2s;
-  -ms-transition-duration: 0.2s;
-  transition-duration: 0.2s;
-  -webkit-transition-property: background-color, color;
-  -moz-transition-property: background-color, color;
-  -ms-transition-property: background-color, color;
-  transition-property: background-color, color;
+  -webkit-transition: background-color, color 0.2s ease;
+  -moz-transition: background-color, color 0.2s ease;
+  -ms-transition: background-color, color 0.2s ease;
+  transition: background-color, color 0.2s ease;
 }
 .compose-action .btn:hover .jobs-badge {
   background-color: #338BB8;
@@ -376,7 +369,7 @@ body {
   -ms-flex: 0;
   flex: 0;
   position: relative;
-  background-color: #FFF;
+  background-color: #FFFFFF;
   min-width: 250px;
 }
 .side-panel-closed {
@@ -437,11 +430,11 @@ body {
 }
 .left-nav-menu li:not(.header) {
   background-color: transparent;
-  -webkit-transition: 0.4s background-color;
-  -moz-transition: 0.4s background-color;
-  -ms-transition: 0.4s background-color;
-  transition: 0.4s background-color;
   cursor: pointer;
+  -webkit-transition: background-color 0.2s ease;
+  -moz-transition: background-color 0.2s ease;
+  -ms-transition: background-color 0.2s ease;
+  transition: background-color 0.2s ease;
 }
 .left-nav-menu li:not(.header):hover {
   background-color: rgba(240, 240, 240, 0.9);
@@ -450,10 +443,10 @@ body {
   font-size: 14px;
   letter-spacing: 1px;
   color: #f9f9f9;
-  -webkit-transition: 0.4s color;
-  -moz-transition: 0.4s color;
-  -ms-transition: 0.4s color;
-  transition: 0.4s color;
+  -webkit-transition: color 0.2s ease;
+  -moz-transition: color 0.2s ease;
+  -ms-transition: color 0.2s ease;
+  transition: color 0.2s ease;
 }
 .left-nav-menu li:not(.header):hover a {
   color: #003F6C;
@@ -463,8 +456,9 @@ body {
 }
 .left-nav-visible {
   width: 200px;
-  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
-  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18), 0 2px 8px 0 rgba(0, 0, 0, 0.13);
+  -webkit-box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.18);
+  -moz-box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.18);
+  box-shadow: 0 -2px 6px 0 rgba(0, 0, 0, 0.18), 0 -2px 8px 0 rgba(0, 0, 0, 0.13);
 }
 .left-nav-drop {
   border-top: 1px solid rgba(240, 240, 240, 0.9);
@@ -490,11 +484,11 @@ body {
 }
 .inactive-action,
 .inactive-action a {
+  color: #999;
   -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;
@@ -505,7 +499,7 @@ body {
 }
 .inactive-action:not(.disabled):hover,
 .inactive-action:not(.disabled):hover > a {
-  color: #338bb8 !important;
+  color: #338BB8 !important;
 }
 .inactive-action:focus {
   color: #999;
@@ -599,7 +593,7 @@ a:visited {
 .hamburger-inner::after {
   width: 24px;
   height: 3px;
-  background-color: #FFF;
+  background-color: #FFFFFF;
   border-radius: 4px;
   position: absolute;
   transition-property: -webkit-transform;
@@ -642,9 +636,10 @@ a:visited {
 .hue-context-menu,
 .hue-popover-bottom {
   border-radius: 2px;
-  background-color: #FFF;
-  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
-  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18), 0 2px 8px 0 rgba(0, 0, 0, 0.13);
+  background-color: #FFFFFF;
+  -webkit-box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.18);
+  -moz-box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.18);
+  box-shadow: 0 -2px 6px 0 rgba(0, 0, 0, 0.18), 0 -2px 8px 0 rgba(0, 0, 0, 0.13);
 }
 .hue-popover {
   position: absolute;
@@ -656,7 +651,7 @@ a:visited {
   left: 0;
   z-index: 1060;
   padding: 1px;
-  background-color: #fff;
+  background-color: #FFFFFF;
   -webkit-background-clip: padding-box;
   background-clip: padding-box;
   border: 1px solid transparent;
@@ -735,7 +730,7 @@ a:visited {
   padding: 6px 10px;
   margin: 0;
   font-size: 0.9rem;
-  background-color: #fff;
+  background-color: #FFFFFF;
 }
 .hue-popover-title:empty {
   display: none;
@@ -754,20 +749,23 @@ a:visited {
 }
 .hue-popover-top {
   border-radius: 2px;
-  background-color: #FFF;
-  -webkit-box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.18);
-  box-shadow: 0 -2px 6px 0 rgba(0, 0, 0, 0.18), 0 -2px 8px 0 rgba(0, 0, 0, 0.13);
+  background-color: #FFFFFF;
+  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
+  -moz-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
+  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18), 0 2px 8px 0 rgba(0, 0, 0, 0.13);
 }
 .hue-popover-right {
   border-radius: 2px;
-  background-color: #FFF;
+  background-color: #FFFFFF;
   -webkit-box-shadow: 2px 0 8px rgba(0, 0, 0, 0.18);
+  -moz-box-shadow: 2px 0 8px rgba(0, 0, 0, 0.18);
   box-shadow: 2px 0 6px 0 rgba(0, 0, 0, 0.18), 2px 0 8px 0 rgba(0, 0, 0, 0.13);
 }
 .hue-popover-left {
   border-radius: 2px;
-  background-color: #FFF;
+  background-color: #FFFFFF;
   -webkit-box-shadow: -2px 0 8px rgba(0, 0, 0, 0.18);
+  -moz-box-shadow: -2px 0 8px rgba(0, 0, 0, 0.18);
   box-shadow: -2px 0 6px 0 rgba(0, 0, 0, 0.18), -2px 0 8px 0 rgba(0, 0, 0, 0.13);
 }
 .hue-inner-drop-down {
@@ -793,7 +791,10 @@ a:visited {
   text-decoration: none;
   font-weight: 400;
   white-space: nowrap;
-  transition: background-color 0.3s;
+  -webkit-transition: background-color 0.2s ease;
+  -moz-transition: background-color 0.2s ease;
+  -ms-transition: background-color 0.2s ease;
+  transition: background-color 0.2s ease;
 }
 .hue-context-menu > li > a {
   display: block;
@@ -807,7 +808,10 @@ a:visited {
   text-decoration: none;
   font-weight: 400;
   white-space: nowrap;
-  transition: background-color 0.3s;
+  -webkit-transition: background-color 0.2s ease;
+  -moz-transition: background-color 0.2s ease;
+  -ms-transition: background-color 0.2s ease;
+  transition: background-color 0.2s ease;
 }
 .hue-context-menu > li > .disabled {
   display: block;

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

@@ -0,0 +1,61 @@
+/*
+ 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 "hue-assist.less";
+
+/*
+
+
+  TODO: Replace with CUI equivalents where possible
+
+
+*/
+
+@hue-primary-color-dark: #338BB8;
+@hue-primary-color-light: #DBE8F1;
+
+@hue-panel-border-radius: 2px;
+
+.hue-ease-transition(@attributes) {
+  -webkit-transition: @attributes 0.2s ease;
+  -moz-transition: @attributes 0.2s ease;
+  -ms-transition: @attributes 0.2s ease;
+  transition: @attributes 0.2s ease;
+}
+
+.hue-box-shadow-top {
+  .hue-box-shadow(0, -2px);
+}
+
+.hue-box-shadow-right {
+  .hue-box-shadow(2px, 0);
+}
+
+.hue-box-shadow-bottom {
+  .hue-box-shadow(0, 2px);
+}
+
+.hue-box-shadow-left {
+  .hue-box-shadow(-2px, 0);
+}
+
+.hue-box-shadow(@left: 2px, @top: 2px) {
+  -webkit-box-shadow: @left @top 8px rgba(0,0,0,.18);
+  -moz-box-shadow: @left @top 8px rgba(0,0,0,.18);
+  box-shadow: @left @top 6px 0 rgba(0, 0, 0, 0.18), @left @top 8px 0 rgba(0, 0, 0, 0.13);
+}

+ 49 - 81
desktop/core/src/desktop/static/desktop/less/hue.less

@@ -16,6 +16,7 @@
  limitations under the License.
 */
 @import (reference) "cui/colors.less";
+@import (reference) "hue-attributes.less";
 @import "hue-assist.less";
 
 html {
@@ -65,7 +66,7 @@ body {
   display: -ms-flexbox;
   display: flex;
   position: relative;
-  background-color: #338BB8;
+  background-color: @hue-primary-color-dark;
   width: 100%;
   z-index: 1049;
 }
@@ -105,10 +106,10 @@ body {
   width: 400px;
   right: 10px;
   font-size: 13px;
-  border-radius: 2px;
-  background-color: #FFF;
-  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
-  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18), 0 2px 8px 0 rgba(0, 0, 0, 0.13);
+  border-radius: @hue-panel-border-radius;
+  background-color: @cui-white;
+
+  .hue-box-shadow-top;
 }
 
 .notification-history {
@@ -144,43 +145,27 @@ body {
   background-image: none;
   font-weight: 600;
   font-size: 14px;
-
-  -webkit-transition-duration: 0.2s;
-  -mos-transition-duration: 0.2s;
-  -ms-transition-duration: 0.2s;
-  transition-duration: 0.2s;
-  -webkit-transition-property: background-color, color;
-  -moz-transition-property: background-color, color;
-  -ms-transition-property: background-color, color;
-  transition-property: background-color, color;
+  .hue-ease-transition(~"background-color, color");
 }
 
 .compose-action .btn:hover {
   background-color: rgba(240, 240, 240, 0.92);
-  color: #338BB8;
+  color: @hue-primary-color-dark;
 }
 
 .jobs-badge {
-  color: #338BB8;
+  color: @hue-primary-color-dark;
   background-color: #f9f9f9;
   float: right;
   margin-left: 4px;
   padding: 1px 5px;
   border-radius: 10px;
   font-size: 12px;
-
-  -webkit-transition-duration: 0.2s;
-  -mos-transition-duration: 0.2s;
-  -ms-transition-duration: 0.2s;
-  transition-duration: 0.2s;
-  -webkit-transition-property: background-color, color;
-  -moz-transition-property: background-color, color;
-  -ms-transition-property: background-color, color;
-  transition-property: background-color, color;
+  .hue-ease-transition(~"background-color, color");
 }
 
 .compose-action .btn:hover .jobs-badge {
-  background-color: #338BB8;
+  background-color: @hue-primary-color-dark;
   color: rgba(240, 240, 240, 0.92);
 }
 
@@ -210,7 +195,7 @@ body {
 }
 
 .compose-action .dropdown-menu i {
-  color: #338BB8;
+  color: @hue-primary-color-dark;
   height: 18px;
   width: 18px;
   font-size: 14px;
@@ -290,7 +275,7 @@ body {
   -ms-flex: 0;
   flex: 0;
   position: relative;
-  background-color: #FFF;
+  background-color: @cui-white;
   min-width: 250px;
 }
 
@@ -327,7 +312,7 @@ body {
 
 .left-nav {
   position:absolute;
-  background-color: #338BB8;
+  background-color: @hue-primary-color-dark;
   color: #f9f9f9;
   z-index: 1048;
   top: 0;
@@ -361,11 +346,8 @@ body {
 
 .left-nav-menu li:not(.header) {
   background-color: transparent;
-  -webkit-transition: 0.4s background-color;
-  -moz-transition: 0.4s background-color;
-  -ms-transition: 0.4s background-color;
-  transition: 0.4s background-color;
   cursor: pointer;
+  .hue-ease-transition(background-color);
 }
 
 .left-nav-menu li:not(.header):hover {
@@ -376,10 +358,7 @@ body {
   font-size: 14px;
   letter-spacing: 1px;
   color: #f9f9f9;
-  -webkit-transition: 0.4s color;
-  -moz-transition: 0.4s color;
-  -ms-transition: 0.4s color;
-  transition: 0.4s color;
+  .hue-ease-transition(color);
 }
 
 .left-nav-menu li:not(.header):hover a {
@@ -392,8 +371,7 @@ body {
 
 .left-nav-visible {
   width: 200px;
-  -webkit-box-shadow: 0 2px 8px rgba(0,0,0,.18);
-  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18), 0 2px 8px 0 rgba(0, 0, 0, 0.13);
+  .hue-box-shadow-top;
 }
 
 .left-nav-drop {
@@ -402,7 +380,7 @@ body {
   bottom: 0;
   left: 0;
   font-size: 16px;
-  background-color: #338BB8;
+  background-color: @hue-primary-color-dark;
   width: 0;
 }
 
@@ -423,11 +401,8 @@ body {
 
 .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;
+  .hue-ease-transition(color);
 }
 
 .inactive-action:hover {
@@ -441,7 +416,7 @@ body {
 
 .inactive-action:not(.disabled):hover,
 .inactive-action:not(.disabled):hover > a {
-  color: #338bb8 !important;
+  color: @hue-primary-color-dark !important;
 }
 
 .inactive-action:focus {
@@ -449,15 +424,12 @@ body {
 }
 
 .blue {
-  color: #338BB8 !important;
+  color: @hue-primary-color-dark !important;
 }
 
 .black-link {
   color: #444;
-  -webkit-transition: color 0.2s ease;
-  -moz-transition: color 0.2s ease;
-  -ms-transition: color 0.2s ease;
-  transition: color 0.2s ease;
+  .hue-ease-transition(color);
 }
 
 .black-link:active,
@@ -467,7 +439,7 @@ body {
 }
 
 .black-link:hover {
-  color: #338BB8;
+  color: @hue-primary-color-dark;
 }
 
 h1 {
@@ -552,7 +524,7 @@ a:visited {
 .hamburger-inner::before, .hamburger-inner::after {
   width: 24px;
   height: 3px;
-  background-color: #FFF;
+  background-color: @cui-white;
   border-radius: 4px;
   position: absolute;
   transition-property: -webkit-transform;
@@ -602,10 +574,9 @@ a:visited {
 }
 
 .hue-context-menu, .hue-popover-bottom {
-  border-radius: 2px;
-  background-color: #FFF;
-  -webkit-box-shadow: 0 2px 8px rgba(0,0,0,.18);
-  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18), 0 2px 8px 0 rgba(0, 0, 0, 0.13);
+  border-radius: @hue-panel-border-radius;
+  background-color: @cui-white;
+  .hue-box-shadow-top;
 }
 
 .hue-popover {
@@ -618,7 +589,7 @@ a:visited {
   left: 0;
   z-index: 1060;
   padding: 1px;
-  background-color: #fff;
+  background-color: @cui-white;
   -webkit-background-clip: padding-box;
   background-clip: padding-box;
   border: 1px solid transparent;
@@ -632,7 +603,7 @@ a:visited {
   bottom: -6px;
   left: 50%;
   margin-left: -6px;
-  border-top-color: #338BB8;
+  border-top-color: @hue-primary-color-dark;
   border-bottom-width: 0;
 }
 
@@ -640,7 +611,7 @@ a:visited {
   bottom: 1px;
   margin-left: -3px;
   content: "";
-  border-top-color: #338BB8;
+  border-top-color: @hue-primary-color-dark;
   border-bottom-width: 0;
 }
 
@@ -652,7 +623,7 @@ a:visited {
   top: 50%;
   left: -6px;
   margin-top: -6px;
-  border-right-color: #338BB8;
+  border-right-color: @hue-primary-color-dark;
   border-left-width: 0;
 }
 
@@ -660,7 +631,7 @@ a:visited {
   bottom: -3px;
   left: 1px;
   content: "";
-  border-right-color: #338BB8;
+  border-right-color: @hue-primary-color-dark;
   border-left-width: 0;
 }
 
@@ -673,7 +644,7 @@ a:visited {
   left: 50%;
   margin-left: -6px;
   border-top-width: 0;
-  border-bottom-color: #338BB8;
+  border-bottom-color: @hue-primary-color-dark;
 }
 
 .hue-popover.hue-popover-bottom .hue-popover-arrow::after {
@@ -681,7 +652,7 @@ a:visited {
   margin-left: -3px;
   content: "";
   border-top-width: 0;
-  border-bottom-color: #338BB8;
+  border-bottom-color: @hue-primary-color-dark;
 }
 
 .hue-popover.hue-popover-left {
@@ -693,7 +664,7 @@ a:visited {
   right: -6px;
   margin-top: -3px;
   border-right-width: 0;
-  border-left-color: #338BB8;
+  border-left-color: @hue-primary-color-dark;
 }
 
 .hue-popover.hue-popover-left .hue-popover-arrow::after {
@@ -701,7 +672,7 @@ a:visited {
   bottom: -3px;
   content: "";
   border-right-width: 0;
-  border-left-color: #338BB8;
+  border-left-color: @hue-primary-color-dark;
 }
 
 .hue-popover-title {
@@ -710,7 +681,7 @@ a:visited {
   padding: 6px 10px;
   margin: 0;
   font-size: 0.9rem;
-  background-color: #fff;
+  background-color: @cui-white;
 }
 
 .hue-popover-title:empty {
@@ -731,24 +702,21 @@ a:visited {
 }
 
 .hue-popover-top {
-  border-radius: 2px;
-  background-color: #FFF;
-  -webkit-box-shadow: 0 -2px 8px rgba(0,0,0,.18);
-  box-shadow: 0 -2px 6px 0 rgba(0, 0, 0, 0.18), 0 -2px 8px 0 rgba(0, 0, 0, 0.13);
+  border-radius: @hue-panel-border-radius;
+  background-color: @cui-white;
+  .hue-box-shadow-bottom;
 }
 
 .hue-popover-right {
-  border-radius: 2px;
-  background-color: #FFF;
-  -webkit-box-shadow: 2px 0 8px rgba(0,0,0,.18);
-  box-shadow: 2px 0 6px 0 rgba(0, 0, 0, 0.18), 2px 0 8px 0 rgba(0, 0, 0, 0.13);
+  border-radius: @hue-panel-border-radius;
+  background-color: @cui-white;
+  .hue-box-shadow-right;
 }
 
 .hue-popover-left {
-  border-radius: 2px;
-  background-color: #FFF;
-  -webkit-box-shadow: -2px 0 8px rgba(0,0,0,.18);
-  box-shadow: -2px 0 6px 0 rgba(0, 0, 0, 0.18), -2px 0 8px 0 rgba(0, 0, 0, 0.13);
+  border-radius: @hue-panel-border-radius;
+  background-color: @cui-white;
+  .hue-box-shadow-left;
 }
 
 .hue-inner-drop-down {
@@ -777,7 +745,7 @@ a:visited {
   text-decoration: none;
   font-weight: 400;
   white-space: nowrap;
-  transition: background-color .3s;
+  .hue-ease-transition(background-color);
 }
 
 .hue-context-menu > li > a {
@@ -792,7 +760,7 @@ a:visited {
   text-decoration: none;
   font-weight: 400;
   white-space: nowrap;
-  transition: background-color .3s;
+  .hue-ease-transition(background-color);
 }
 
 .hue-context-menu > li > .disabled {
@@ -814,7 +782,7 @@ a:visited {
 .hue-inner-drop-down > li.active,
 .hue-context-menu > li.active,
 .hue-context-menu > li > a:not(.disabled):hover {
-  background-color: #DBE8F1;
+  background-color: @hue-primary-color-light;
 }
 
 .hue-context-menu > li > .disabled > i {