Переглянути джерело

HUE-9485 [frontend] Add scss colors and mixins modules

Johan Ahlen 5 роки тому
батько
коміт
e4cac04460

+ 221 - 0
desktop/core/src/desktop/js/components/styles/colors.scss

@@ -0,0 +1,221 @@
+/*
+ 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.
+*/
+
+// All standard colors --------------------------------------
+
+$cui-gray-040:                    #fafbfc;
+$cui-gray-050:                    #f4f5f6;
+$cui-gray-100:                    #f1f2f3;
+$cui-gray-200:                    #eaebec;
+$cui-gray-300:                    #d6d8db;
+$cui-gray-400:                    #adb2b6;
+$cui-gray-500:                    #989ea4;
+$cui-gray-600:                    #838b92;
+$cui-gray-700:                    #5a656d;
+$cui-gray-800:                    #333e47;
+$cui-gray-900:                    #1b2329;
+
+$cui-blue-010:                    rgba(230, 247, 255, 0.1); // 10% of cui-blue-050
+$cui-blue-050:                    #e6f7ff;
+$cui-blue-100:                    #a3dfff;
+$cui-blue-200:                    #7accff;
+$cui-blue-300:                    #51b5fc;
+$cui-blue-400:                    #008cff;
+$cui-blue-500:                    #006ee3;
+$cui-blue-600:                    #0058bd;
+$cui-blue-700:                    #004496;
+$cui-blue-800:                    #002f70;
+$cui-blue-900:                    #001c4a;
+
+$cui-green-050:                   #f2ffeb;
+$cui-green-100:                   #cbf1b5;
+$cui-green-200:                   #aee390;
+$cui-green-300:                   #82c25d;
+$cui-green-400:                   #5aa232;
+$cui-green-500:                   #3a870e;
+$cui-green-600:                   #2c6c08;
+$cui-green-700:                   #1a4700;
+$cui-green-800:                   #163c00;
+$cui-green-900:                   #133300;
+
+$cui-yellow-050:                  #fffaed;
+$cui-yellow-100:                  #fff1cc;
+$cui-yellow-200:                  #ffd664;
+$cui-yellow-300:                  #fdc926;
+$cui-yellow-400:                  #d99f18;
+$cui-yellow-500:                  #a16908;
+$cui-yellow-600:                  #804a00;
+$cui-yellow-700:                  #663a00;
+$cui-yellow-800:                  #4d2b00;
+$cui-yellow-900:                  #331d00;
+
+$cui-orange-010:                  rgba(255, 240, 217, 0.3); // 30% of cui-orange-050
+$cui-orange-050:                  #fff0d9;
+$cui-orange-100:                  #ffd599;
+$cui-orange-200:                  #ffa319;
+$cui-orange-300:                  #ff8400;
+$cui-orange-400:                  #f96600;
+$cui-orange-500:                  #b34d00;
+$cui-orange-600:                  #8c3800;
+$cui-orange-700:                  #662500;
+$cui-orange-800:                  #401500;
+$cui-orange-900:                  #260d00;
+
+$cui-red-050:                     #fff2f2;
+$cui-red-100:                     #fdcfcf;
+$cui-red-200:                     #faadac;
+$cui-red-300:                     #f36d6b;
+$cui-red-400:                     #e83934;
+$cui-red-500:                     #d9150c;
+$cui-red-600:                     #bf1408;
+$cui-red-700:                     #990d00;
+$cui-red-800:                     #670901;
+$cui-red-900:                     #3f0600;
+
+$cui-purple-050:                  #f4f1fa;
+$cui-purple-100:                  #d5c9ed;
+$cui-purple-200:                  #ab93dc;
+$cui-purple-300:                  #9678d3;
+$cui-purple-400:                  #8263c2;
+$cui-purple-500:                  #6f47bf;
+$cui-purple-600:                  #552da6;
+$cui-purple-700:                  #4a1ca6;
+$cui-purple-800:                  #33058d;
+$cui-purple-900:                  #1e005a;
+
+// Old color set --------------------------------------------
+$cui-blue-gray-050:               #ECEFF1;
+$cui-blue-gray-100:               #CFD8DC;
+$cui-blue-gray-200:               #B0BEC5;
+$cui-blue-gray-300:               #90A4AE;
+$cui-blue-gray-400:               #78909C;
+$cui-blue-gray-500:               #607D8B;
+$cui-blue-gray-600:               #546E7A;
+$cui-blue-gray-700:               #455A64;
+$cui-blue-gray-800:               #36454F;
+$cui-blue-gray-900:               #232C34;
+
+$cui-steel-050:                   #E8EEEE;
+$cui-steel-100:                   #C6D6D6;
+$cui-steel-200:                   #A0BABA;
+$cui-steel-300:                   #7A9F9F;
+$cui-steel-400:                   #5D8A8A;
+$cui-steel-500:                   #417575;
+$cui-steel-600:                   #3C6C6C;
+$cui-steel-700:                   #345E5E;
+$cui-steel-800:                   #2D5252;
+$cui-steel-900:                   #274646;
+
+$cui-teal-050:                    #E0F6F5;
+$cui-teal-100:                    #B3EAE6;
+$cui-teal-200:                    #80DCD5;
+$cui-teal-300:                    #4DCEC4;
+$cui-teal-400:                    #26C3B7;
+$cui-teal-500:                    #00B9AA;
+$cui-teal-600:                    #00AA9D;
+$cui-teal-700:                    #009488;
+$cui-teal-800:                    #008177;
+$cui-teal-900:                    #006F66;
+
+$cui-lime-010:                    #F4F9ED;
+$cui-lime-050:                    #EDF5E2;
+$cui-lime-100:                    #D2E6B9;
+$cui-lime-200:                    #B4D689;
+$cui-lime-300:                    #96C55A;
+$cui-lime-400:                    #7FB836;
+$cui-lime-500:                    #69AC13;
+$cui-lime-600:                    #619F12;
+$cui-lime-700:                    #548A0F;
+$cui-lime-800:                    #49780D;
+$cui-lime-900:                    #3F670B;
+
+$cui-pink-010:                    #FBF5F5;
+$cui-pink-050:                    #F2DEDE;
+$cui-pink-100:                    #F3BFD4;
+$cui-pink-200:                    #EC93B7;
+$cui-pink-300:                    #E4689A;
+$cui-pink-400:                    #DE4784;
+$cui-pink-500:                    #D8276F;
+$cui-pink-600:                    #C72466;
+$cui-pink-700:                    #AD1F59;
+$cui-pink-800:                    #971B4D;
+$cui-pink-900:                    #821743;
+
+$cui-purple-gray-050:             #F1EFEF;
+$cui-purple-gray-100:             #D5CFD1;
+$cui-purple-gray-200:             #BAB0B3;
+$cui-purple-gray-300:             #ACA0A4;
+$cui-purple-gray-400:             #9F9095;
+$cui-purple-gray-500:             #977F86;
+$cui-purple-gray-600:             #837077;
+$cui-purple-gray-700:             #766168;
+$cui-purple-gray-800:             #6A575D;
+$cui-purple-gray-900:             #5E4D53;
+
+$cui-green-gray-050:              #E9E8E3;
+$cui-green-gray-100:              #C8C6BA;
+$cui-green-gray-200:              #B2AF9F;
+$cui-green-gray-300:              #A7A391;
+$cui-green-gray-400:              #9C9883;
+$cui-green-gray-500:              #918D76;
+$cui-green-gray-600:              #827E6A;
+$cui-green-gray-700:              #74705E;
+$cui-green-gray-800:              #656252;
+$cui-green-gray-900:              #575446;
+
+// Service colors -------------------------------------------
+
+$cui-hive-color:                  $cui-yellow-700;
+$cui-hdfs-color:                  $cui-teal-600;
+$cui-hbase-color:                 $cui-pink-600;
+$cui-hue-color:                   $cui-purple-300;
+$cui-mapreduce-color:             $cui-steel-400;
+$cui-zookeeper-color:             $cui-lime-600;
+$cui-oozie-color:                 $cui-blue-500;
+$cui-flume-color:                 $cui-orange-600;
+$cui-impala-color:                $cui-blue-600;
+$cui-sqoop-color:                 $cui-green-600;
+$cui-solr-color:                  $cui-pink-600;
+$cui-spark-color:                 $cui-orange-600;
+$cui-pig-color:                   $cui-purple-600;
+$cui-yarn-color:                  $cui-yellow-600;
+$cui-s3-color:                    $cui-orange-500;
+$cui-api-color:                   $cui-gray-700;
+
+// Base colors ----------------------------------------------
+
+$cui-black:                       #000000;
+$cui-blue-gray:                   $cui-blue-gray-500;
+$cui-blue:                        $cui-blue-500;
+$cui-gray:                        $cui-gray-500;
+$cui-green-gray:                  $cui-green-gray-500;
+$cui-green:                       $cui-green-500;
+$cui-lime:                        $cui-lime-500;
+$cui-mintish:                     #1fcfb8;
+$cui-oozie-blue:                  #0050a2;
+$cui-oozie-yellow:                #fff300;
+$cui-orange:                      $cui-orange-500;
+$cui-pink:                        $cui-pink-500;
+$cui-purple-gray:                 $cui-purple-gray-500;
+$cui-purple:                      $cui-purple-500;
+$cui-red:                         $cui-red-500;
+$cui-slate:                       #305868;
+$cui-steel:                       $cui-steel-500;
+$cui-teal:                        $cui-teal-500;
+$cui-white:                       #FFFFFF;
+$cui-yellow:                      $cui-yellow-500;

+ 218 - 0
desktop/core/src/desktop/js/components/styles/mixins.scss

@@ -0,0 +1,218 @@
+/*
+ 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 './colors.scss';
+
+/*
+
+  TODO: Replace with CUI equivalents where possible
+
+*/
+
+$hue-primary-color-dark: #0B7FAD;
+$hue-primary-color-light: #DBE8F1;
+$hue-trunk: $cui-purple-300;
+
+$hue-disabled-color: $cui-gray-100;
+$hue-error-color: $cui-red-500;
+$hue-warning-color: $cui-orange-400;
+
+$hue-panel-border-radius: 2px;
+
+@mixin hue-transform($transform) {
+  -webkit-transform: $transform;
+  -moz-transform: $transform;
+  -ms-transform: $transform;
+  -o-transform: $transform;
+}
+
+.nowrap-ellipsis {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow-x: hidden;
+}
+
+.no-select {
+  // Every browser except IE 9
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+@mixin transition($args...) {
+  -webkit-transition: $args;
+  -moz-transition: $args;
+  -ms-transition: $args;
+  -o-transition: $args;
+  transition: $args;
+}
+
+@mixin ease-transition($arg) {
+  @include transition($arg 0.2s ease)
+}
+
+@mixin box-shadow($top, $left, $blur, $color, $inset: false) {
+  @if $inset {
+    -webkit-box-shadow:inset $top $left $blur $color;
+    -moz-box-shadow:inset $top $left $blur $color;
+    box-shadow:inset $top $left $blur $color;
+  } @else {
+    -webkit-box-shadow: $top $left $blur $color;
+    -moz-box-shadow: $top $left $blur $color;
+    box-shadow: $top $left $blur $color;
+  }
+}
+
+@mixin simple-box-shadow($left: 2px, $top: 2px) {
+  @include box-shadow($top, $left, 8px, rgba(0, 0, 0, 0.18));
+}
+
+.box-shadow-top {
+  @include simple-box-shadow(0, -2px);
+}
+
+.box-shadow-right {
+  @include simple-box-shadow(2px, 0);
+}
+
+.box-shadow-bottom {
+  @include simple-box-shadow(0, 2px);
+}
+
+.box-shadow-left {
+  @include simple-box-shadow(-2px, 0);
+}
+
+.inset-box-shadow {
+  -webkit-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125) !important;
+  -moz-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125) !important;
+  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125) !important;
+}
+
+.no-box-shadow {
+  -webkit-box-shadow: none !important;
+  -moz-box-shadow: none !important;
+  box-shadow: none !important;
+}
+
+@mixin animation($str) {
+  -webkit-animation: #{$str};
+  -moz-animation: #{$str};
+  -ms-animation: #{$str};
+  -o-animation: #{$str};
+  animation: #{$str};
+}
+
+@mixin keyframes($animation-name) {
+  @-webkit-keyframes #{$animation-name} {
+    @content;
+  }
+  @-moz-keyframes #{$animation-name} {
+    @content;
+  }
+  @-ms-keyframes #{$animation-name} {
+    @content;
+  }
+  @-o-keyframes #{$animation-name} {
+    @content;
+  }
+  @keyframes #{$animation-name} {
+    @content;
+  }
+}
+
+@include keyframes(fade-in-frames) {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@mixin fade-in {
+  @include animation('fade-in-frames 2s');
+}
+
+// Flexbox mixins
+
+@mixin display-flex() {
+  display: -webkit-flex;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -ms-flex;
+  display: flex;
+}
+
+@mixin flex($flex: initial) {
+  -ms-flex: $flex;
+  -webkit-flex: $flex;
+  flex: $flex;
+}
+
+@mixin flex-align-items($align: stretch) {
+  -webkit-align-items: $align;
+  -ms-align-items: $align;
+  align-items: $align;
+}
+
+@mixin flex-basis($basis) {
+  -webkit-flex-basis: $basis;
+  -ms-flex-basis: $basis;
+  flex-basis: $basis;
+}
+
+@mixin flex-box-flex($flex) {
+  -webkit-box-flex: $flex;
+  -moz-box-flex: $flex;
+  box-flex: $flex; /* stylelint-disable-line */
+}
+
+@mixin flex-box-align($align) {
+  -webkit-box-align: $align;
+  -moz-box-align: $align;
+  box-align: $align; /* stylelint-disable-line */
+}
+
+@mixin flex-box-pack($pack) {
+  -webkit-box-pack: $pack;
+  -moz-box-pack: $pack;
+  box-pack: $pack; /* stylelint-disable-line */
+}
+
+@mixin flex-shrink($shrink) {
+  -webkit-flex-shrink: $shrink;
+  -ms-flex-shrink: $shrink;
+  flex-shrink: $shrink;
+}
+
+@mixin flex-direction($direction: row) {
+  -webkit-flex-direction: $direction;
+  -ms-flex-direction: $direction;
+  flex-direction: $direction;
+}
+
+@mixin flex-flow($flow) {
+  -webkit-flex-flow: $flow;
+  -ms-flex-flow: $flow;
+  flex-flow: $flow;
+}
+
+@mixin flex-wrap($wrap: nowrap) {
+  -webkit-flex-wrap: $wrap;
+  -ms-flex-wrap: $wrap;
+  flex-wrap: $wrap;
+}