otf-frontend/client/src/app/login/login.component.scss

   1 /*  Copyright (c) 2019 AT&T Intellectual Property.                             #\r
   2 #                                                                              #\r
   3 #   Licensed under the Apache License, Version 2.0 (the "License");            #\r
   4 #   you may not use this file except in compliance with the License.           #\r
   5 #   You may obtain a copy of the License at                                    #\r
   6 #                                                                              #\r
   7 #       http://www.apache.org/licenses/LICENSE-2.0                             #\r
   8 #                                                                              #\r
   9 #   Unless required by applicable law or agreed to in writing, software        #\r
  10 #   distributed under the License is distributed on an "AS IS" BASIS,          #\r
  11 #   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   #\r
  12 #   See the License for the specific language governing permissions and        #\r
  13 #   limitations under the License.                                             #\r
  14 ##############################################################################*/\r
  15 \r
  16 \r
  17 $topnav-background-color: #222;\r
  18 :host {\r
  19     display: block;\r
  20 }\r
  21 .login-page {\r
  22     position: absolute;\r
  23     top: 0;\r
  24     left: 0;\r
  25     right: 0;\r
  26     bottom: 0;\r
  27     overflow: auto;\r
  28     background: $topnav-background-color;\r
  29     text-align: center;\r
  30     color: #fff;\r
  31     padding: 3em;\r
  32     .col-lg-4 {\r
  33         padding: 0;\r
  34     }\r
  35     .input-lg {\r
  36         height: 46px;\r
  37         padding: 10px 16px;\r
  38         font-size: 18px;\r
  39         line-height: 1.3333333;\r
  40         border-radius: 0;\r
  41     }\r
  42     .input-underline {\r
  43         background: 0 0;\r
  44         border: none;\r
  45         box-shadow: none;\r
  46         border-bottom: 2px solid rgba(255, 255, 255, 0.5);\r
  47         color: #fff;\r
  48         border-radius: 0;\r
  49     }\r
  50     .input-underline:focus {\r
  51         border-bottom: 2px solid #fff;\r
  52         box-shadow: none;\r
  53     }\r
  54     .rounded-btn {\r
  55         -webkit-border-radius: 50px;\r
  56         border-radius: 50px;\r
  57         color: rgba(255, 255, 255, 0.8);\r
  58         background: $topnav-background-color;\r
  59         border: 2px solid rgba(255, 255, 255, 0.8);\r
  60         font-size: 18px;\r
  61         line-height: 40px;\r
  62         padding: 0 25px;\r
  63     }\r
  64     .rounded-btn:hover,\r
  65     .rounded-btn:focus,\r
  66     .rounded-btn:active,\r
  67     .rounded-btn:visited {\r
  68         color: rgba(255, 255, 255, 1);\r
  69         border: 2px solid rgba(255, 255, 255, 1);\r
  70         outline: none;\r
  71     }\r
  72 \r
  73     h1 {\r
  74         font-weight: 300;\r
  75         margin-top: 20px;\r
  76         margin-bottom: 10px;\r
  77         font-size: 36px;\r
  78         small {\r
  79             color: rgba(255, 255, 255, 0.7);\r
  80         }\r
  81     }\r
  82 \r
  83     .form-group {\r
  84         padding: 8px 0;\r
  85         input::-webkit-input-placeholder {\r
  86             color: rgba(255, 255, 255, 0.6) !important;\r
  87         }\r
  88 \r
  89         input:-moz-placeholder {\r
  90             /* Firefox 18- */\r
  91             color: rgba(255, 255, 255, 0.6) !important;\r
  92         }\r
  93 \r
  94         input::-moz-placeholder {\r
  95             /* Firefox 19+ */\r
  96             color: rgba(255, 255, 255, 0.6) !important;\r
  97         }\r
  98 \r
  99         input:-ms-input-placeholder {\r
 100             color: rgba(255, 255, 255, 0.6) !important;\r
 101         }\r
 102     }\r
 103     .form-content {\r
 104         padding: 30px 0;\r
 105     }\r
 106     .user-avatar {\r
 107         -webkit-border-radius: 50%;\r
 108         border-radius: 50%;\r
 109         border: 2px solid #fff;\r
 110     }\r
 111 \r
 112 }\r