Browse Source

HUE-6077 [frontend] Added cross versions CSS for demi-modal and selectize

(cherry picked from commit ebdb27fa4bb6841264ca320189d3a568f5fb7a93)
Enrico Berti 8 years ago
parent
commit
7c8aa52

File diff suppressed because it is too large
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue.css


File diff suppressed because it is too large
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue3-extra.css


+ 0 - 112
desktop/core/src/desktop/static/desktop/css/hue3.css

@@ -697,84 +697,6 @@ html.modal-open {
   overflow: hidden;
   overflow: hidden;
 }
 }
 
 
-
-.demi-modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 1050;
-  width: 100%;
-  margin: -1px;
-  padding: 0;
-  background-color: #ffffff;
-  min-height: 210px;
-  border: 1px solid #CCC;
-  -webkit-border-bottom-right-radius: 0px;
-  -webkit-border-bottom-left-radius: 0px;
-  -moz-border-radius-bottomright: 0px;
-  -moz-border-radius-bottomleft: 0px;
-  border-bottom-right-radius: 0px;
-  border-bottom-left-radius: 0px;
-  outline: none;
-  -webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.3);
-  -moz-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.3);
-  box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.3);
-  -webkit-background-clip: padding-box;
-  -moz-background-clip: padding-box;
-  background-clip: padding-box;
-}
-
-.demi-modal-half {
-  width: 500px;
-  left: 50%;
-  margin-left: -250px;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-}
-
-.demi-modal.fade {
-  top: -500px;
-  -webkit-transition: opacity 0.3s linear, top 0.3s ease-out;
-  -moz-transition: opacity 0.3s linear, top 0.3s ease-out;
-  -o-transition: opacity 0.3s linear, top 0.3s ease-out;
-  transition: opacity 0.3s linear, top 0.3s ease-out;
-}
-
-.demi-modal.fade.in {
-  top: 0;
-}
-
-.demi-modal .modal-header {
-  padding: 9px 15px;
-  border-bottom: 1px solid #eee;
-}
-
-.demi-modal .modal-header .close {
-  margin-top: 2px;
-}
-
-.demi-modal .modal-body {
-  position: relative;
-  max-height: 400px;
-  padding: 15px;
-  overflow-y: auto;
-}
-
-.demi-modal .modal-footer {
-  padding: 10px;
-}
-
-.demi-modal-chevron {
-  text-align:center;
-  width: 100%;
-  display: table;
-}
-
-.demi-modal-chevron:hover {
-  background-color: #F6F6F6;
-}
-
 .control-group.error .input-prepend .add-on i, .control-group.error .input-append .add-on i {
 .control-group.error .input-prepend .add-on i, .control-group.error .input-append .add-on i {
   color: #fff;
   color: #fff;
 }
 }
@@ -2165,40 +2087,6 @@ input[type='password']::-ms-reveal {
   text-decoration: none;
   text-decoration: none;
 }
 }
 
 
-.select-like {
-  display: inline-block;
-  position: relative;
-}
-
-.select-like input {
-  transition: none!important;
-  box-shadow: none!important;
-  border-radius: 4px!important;
-  cursor: pointer!important;
-}
-
-.select-like .fa {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  font-size: 15px;
-}
-
-.selectize-wrapper {
-  display: inline-block;
-  float:left;
-  margin-right: 4px;
-}
-
-.selectize-input {
-  padding-top: 6px !important;
-  padding-bottom: 5px !important;
-}
-
-.selectize-dropdown {
-  z-index: 10000!important;
-}
-
 input:invalid,textarea:invalid,select:invalid {
 input:invalid,textarea:invalid,select:invalid {
   color: #b94a48;
   color: #b94a48;
   border-color: #ee5f5b
   border-color: #ee5f5b

+ 85 - 0
desktop/core/src/desktop/static/desktop/less/components/hue-demi-modal.less

@@ -0,0 +1,85 @@
+/*
+ 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.
+*/
+
+.demi-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1050;
+  width: 100%;
+  margin: -1px;
+  padding: 0;
+  background-color: @cui-white;
+  min-height: 210px;
+  border: 1px solid #CCC;
+  -webkit-border-bottom-right-radius: 0px;
+  -webkit-border-bottom-left-radius: 0px;
+  -moz-border-radius-bottomright: 0px;
+  -moz-border-radius-bottomleft: 0px;
+  border-bottom-right-radius: 0px;
+  border-bottom-left-radius: 0px;
+  outline: none;
+  &.fade {
+    top: -500px;
+    .hue-linear-transition(opacity);
+  }
+
+  &.fade.in {
+    top: 0;
+  }
+
+  & .modal-header {
+    padding: 9px 15px;
+    border-bottom: 1px solid #eee;
+  }
+
+  & .modal-header .close {
+    margin-top: 2px;
+  }
+
+  & .modal-body {
+    position: relative;
+    max-height: 400px;
+    padding: 15px;
+    overflow-y: auto;
+  }
+
+  & .modal-footer {
+    padding: 10px;
+  }
+
+}
+
+.demi-modal-half {
+  width: 500px;
+  left: 50%;
+  margin-left: -250px;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+
+.demi-modal-chevron {
+  text-align: center;
+  width: 100%;
+  display: table;
+}
+
+.demi-modal-chevron:hover {
+  background-color: #F6F6F6;
+}

+ 51 - 0
desktop/core/src/desktop/static/desktop/less/components/hue-selectize.less

@@ -0,0 +1,51 @@
+/*
+ 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.
+*/
+
+.select-like {
+  display: inline-block;
+  position: relative;
+  & input {
+    transition: none !important;
+    box-shadow: none !important;
+    border-radius: 4px !important;
+    cursor: pointer !important;
+  }
+
+  & .fa {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    font-size: 15px;
+  }
+
+}
+
+.selectize-wrapper {
+  display: inline-block;
+  float: left;
+  margin-right: 4px;
+}
+
+.selectize-input {
+  padding-top: 6px !important;
+  padding-bottom: 5px !important;
+}
+
+.selectize-dropdown {
+  z-index: 10000 !important;
+}

+ 2 - 0
desktop/core/src/desktop/static/desktop/less/hue-cross-version.less

@@ -25,6 +25,8 @@
 @import "components/hue-selector.less";
 @import "components/hue-selector.less";
 @import "components/hue-tables.less";
 @import "components/hue-tables.less";
 @import "components/hue-scroll-anchor.less";
 @import "components/hue-scroll-anchor.less";
+@import "components/hue-selectize.less";
+@import "components/hue-demi-modal.less";
 @import "hue-helpers.less";
 @import "hue-helpers.less";
 
 
 .app-header {
 .app-header {

+ 8 - 0
desktop/core/src/desktop/static/desktop/less/hue-mixins.less

@@ -33,6 +33,14 @@
 
 
 @hue-panel-border-radius: 2px;
 @hue-panel-border-radius: 2px;
 
 
+
+.hue-linear-transition(@attributes) {
+  -webkit-transition: @attributes 0.2s linear;
+  -moz-transition: @attributes 0.2s linear;
+  -ms-transition: @attributes 0.2s linear;
+  transition: @attributes 0.2s linear;
+}
+
 .hue-ease-transition(@attributes) {
 .hue-ease-transition(@attributes) {
   -webkit-transition: @attributes 0.2s ease;
   -webkit-transition: @attributes 0.2s ease;
   -moz-transition: @attributes 0.2s ease;
   -moz-transition: @attributes 0.2s ease;

Some files were not shown because too many files changed in this diff