Browse Source

HUE-6077 [frontend] Moved login modal styles to LESS

Enrico Berti 8 years ago
parent
commit
7dcbeec777

+ 1 - 0
Gruntfile.js

@@ -36,6 +36,7 @@ module.exports = function(grunt) {
         files: {
           'desktop/core/src/desktop/static/desktop/css/hue.css': 'desktop/core/src/desktop/static/desktop/less/hue.less',
           'desktop/core/src/desktop/static/desktop/css/hue3-extra.css': 'desktop/core/src/desktop/static/desktop/less/hue3-extra.less',
+          'desktop/core/src/desktop/static/desktop/css/login.css': 'desktop/core/src/desktop/static/desktop/less/login.less',
           'apps/metastore/src/metastore/static/metastore/css/metastore.css': 'apps/metastore/src/metastore/static/metastore/less/metastore.less',
           'desktop/libs/notebook/src/notebook/static/notebook/css/notebook.css': 'desktop/libs/notebook/src/notebook/static/notebook/less/notebook.less',
           'desktop/libs/notebook/src/notebook/static/notebook/css/notebook-layout.css': 'desktop/libs/notebook/src/notebook/static/notebook/less/notebook-layout.less',

File diff suppressed because it is too large
+ 16 - 183
desktop/core/src/desktop/static/desktop/css/login.css


+ 189 - 0
desktop/core/src/desktop/static/desktop/less/login.less

@@ -0,0 +1,189 @@
+/*
+ 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.
+*/
+
+@-webkit-keyframes spinner {
+  from {
+    -webkit-transform: rotateY(0deg);
+  }
+  to {
+    -webkit-transform: rotateY(-360deg);
+  }
+}
+
+.login-container {
+  width: 500px;
+  display: block;
+  margin: auto;
+  margin-bottom: 50px;
+  background: #FFFFFF;
+  border: 1px solid #E0E2E3;
+  border-radius: 4px;
+}
+
+.login-container a {
+  white-space: normal;
+}
+
+.login-container .logo {
+  background-color: #FFF;
+  width: 70px;
+  height: 70px;
+  text-align: center;
+  -webkit-border-radius: 35px;
+  -moz-border-radius: 35px;
+  border-radius: 35px;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 35px;
+  margin-bottom: 35px;
+}
+
+.login-container .empty-logo {
+  background-color: #FFF;
+  width: 70px;
+  height: 70px;
+}
+
+.login-container .logo img {
+  margin-top: 2px;
+}
+
+.login-container form {
+  margin-left: 75px;
+  margin-right: 75px;
+}
+
+.login-container form input[type='submit'], .login-container form select {
+  width: 100%;
+}
+
+.login-container form .text-input {
+  padding: 0 10px 2px 10px;
+  border: 1px solid #E0E2E3;
+  border-radius: 3px;
+  margin-bottom: 20px;
+}
+
+.login-container form .text-input.error {
+  border-color: #D0021B;
+}
+
+.login-container form ul.errorlist li {
+  color: #D0021B;
+  padding: 0;
+  font-weight: normal;
+  font-style: normal;
+  margin-top: -10px;
+  margin-bottom: 20px;
+}
+
+:-webkit-autofill, :-webkit-autofill:focus {
+  -webkit-box-shadow: 0 0 0px 1000px white inset!important;
+  -webkit-text-fill-color: #9e9e9e!important;
+}
+
+::-webkit-input-placeholder {
+   color: #CCD1D9!important;
+}
+
+:-moz-placeholder { /* Firefox 18- */
+   color: #CCD1D9!important;
+}
+
+::-moz-placeholder {  /* Firefox 19+ */
+   color: #CCD1D9!important;
+}
+
+:-ms-input-placeholder {
+   color: #CCD1D9!important;
+}
+
+.login-container form input[type='text'], .login-container form input[type='password'], .login-container form input[type='text']:hover, .login-container form input[type='password']:hover {
+  padding: 0;
+  border: none;
+  box-shadow: none;
+  background: #FFFFFF;
+  height: 45px;
+  font-size: 16px;
+  color: #9e9e9e;
+  font-weight: 400;
+  resize: none;
+  margin: 0;
+  width: 100%;
+}
+
+.login-container form input[type='submit'] {
+  height: 45px;
+  min-height: 45px;
+  font-weight: normal;
+  text-shadow: none;
+  margin-left: 0;
+  background: #338BB8;
+  border-color: #338BB8;
+  border-radius: 3px;
+  font-size: 16px;
+  margin-bottom: 55px;
+}
+
+.login-container h4 {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.tooltip {
+  z-index: 10000;
+}
+
+.trademark {
+  position: fixed;
+  bottom: 10px;
+  margin-left: auto;
+  margin-right: auto;
+  width: 100%;
+  background-color: #FAFAFA;
+}
+
+@media screen and (max-width: 800px) {
+  body {
+    padding-top: 40px!important;
+  }
+  .login-box {
+    width: 300px;
+  }
+  .login-container form {
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+  .login-container form input[type='submit'] {
+    margin-bottom: 20px;
+  }
+}
+
+@media screen and (max-width: 540px) {
+  .login-container {
+    width: 90%;
+  }
+}
+
+#login-modal {
+  padding: 0px !important;
+  box-shadow: none;
+  background: transparent;
+  border: none;
+}
+

+ 18 - 19
desktop/core/src/desktop/templates/login_modal.mako

@@ -23,26 +23,25 @@
 
 <link rel="stylesheet" href="${ static('desktop/css/login.css') }">
 
-<div id="login-modal" class="modal fade hide" style="padding: 0px!important;box-shadow: none;background: transparent;">
-
+<div id="login-modal" class="modal fade hide">
   <div class="login-container">
-      <a href="#" class="close logged-out link-message" data-dismiss="modal" style="display: none; margin: 10px">&times;</a>
-      <div class="logo"><img src="${ static('desktop/art/hue-login-logo-ellie@2x.png') }" width="70" height="70" alt="${ _('Hue logo') }"></div>
-      <h4 class="muted" style="margin-bottom: 50px; padding: 30px">
-        <span class="logged-out link-message" style="display: none">
-          ${ _('Your session expired and your current action requires to') }
-          <a class="reload pointer">
-            ${ _('reload this page') }
-          </a>
-        </span>
-        <span class="auto-logged-out link-message" style="display: none">
-          ${ _('We did not hear from you for about') } <strong class="time">${ conf.AUTH.IDLE_SESSION_TIMEOUT.get() }</strong> ${ _('and for security reasons Hue logged you out') }
-          <div class="margin-top-30"></div>
-          <a class="reload pointer">
-            ${ _('Please reload this page to continue') }
-          </a>
-        </span>
-      </h4>
+    <a href="#" class="close logged-out link-message" data-dismiss="modal" style="display: none; margin: 10px">&times;</a>
+    <div class="logo"><img src="${ static('desktop/art/hue-login-logo-ellie@2x.png') }" width="70" height="70" alt="${ _('Hue logo') }"></div>
+    <h4 class="muted" style="margin-bottom: 50px; padding: 30px">
+      <span class="logged-out link-message" style="display: none">
+        ${ _('Your session expired and your current action requires to') }
+        <a class="reload pointer">
+          ${ _('reload this page') }
+        </a>
+      </span>
+      <span class="auto-logged-out link-message" style="display: none">
+        ${ _('We did not hear from you for about') } <strong class="time">${ conf.AUTH.IDLE_SESSION_TIMEOUT.get() }</strong> ${ _('and for security reasons Hue logged you out') }
+        <div class="margin-top-30"></div>
+        <a class="reload pointer">
+          ${ _('Please reload this page to continue') }
+        </a>
+      </span>
+    </h4>
   </div>
 </div>
 

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