ecomp-portal-FE/client/app/styles/form.less

   1 /*-
   2  * ================================================================================
   3  * eCOMP Portal
   4  * ================================================================================
   5  * Copyright (C) 2017 AT&T Intellectual Property
   6  * ================================================================================
   7  * Licensed under the Apache License, Version 2.0 (the "License");
   8  * you may not use this file except in compliance with the License.
   9  * You may obtain a copy of the License at
  10  *
  11  *      http://www.apache.org/licenses/LICENSE-2.0
  12  *
  13  * Unless required by applicable law or agreed to in writing, software
  14  * distributed under the License is distributed on an "AS IS" BASIS,
  15  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16  * See the License for the specific language governing permissions and
  17  * limitations under the License.
  18  * ================================================================================
  19  */
  20  .form {
  21     input, textarea, label , .multiple {
  22         .a14r;
  23     }
  24     input, textarea , .multiple {
  25         &:focus {
  26             outline: none;
  27             border: 1px solid @a;
  28         }
  29         border: 1px solid @a;
  30         padding: 8px;
  31         &:disabled {
  32             border: 1px solid @s;
  33             .bg_l;
  34         }
  35         &.ng-invalid.ng-touched {
  36             border: 1px solid @err;
  37             box-shadow: 0 0 2.55px 0.45px rgba(218,31,61,.5);
  38             &:focus {
  39                 border: 1px solid @a;
  40             }
  41         }
  42     }
  43     input[type=number] {
  44         -moz-appearance:textfield;
  45     }
  46     textarea {
  47         min-height: 148px;
  48         max-width: @input-max-width;
  49     }
  50     .flex-group {
  51         display: flex;
  52         justify-content: space-between;
  53     }
  54     .form-group {
  55         margin: 0 0 18px;
  56         position: relative;
  57     }
  58     .checkbox {
  59         label {
  60             cursor: pointer;
  61         }
  62     }
  63     label {
  64         margin: 0 0 3px;
  65         display: block;
  66     }
  67     .text {
  68         width: 100%;
  69         display: block;
  70     }
  71     .short {
  72         width: 104px;
  73     }
  74     .multiple{
  75         padding: 0;
  76     }
  77     .error {
  78         color: @f;
  79         background: @err;
  80         border-radius: 0 5px 5px 0;
  81         font-size: 12px;
  82         line-height: 20px;
  83         text-align: center;
  84         width: 100%;
  85         position: absolute;
  86         top: 18px;
  87         margin-left: 75%;
  88         z-index: 100;
  89         height: 33px;
  90         padding: 8px;
  91         box-shadow: 0 0 2.55px 0.45px rgba(218,31,61,.5);
  92         &:before {
  93             content: '';
  94             width: 0;
  95             height: 0;
  96             position: absolute;
  97             left: -9px;
  98             top: 7px;
  99             border-top: 9px solid transparent;
 100             border-bottom: 9px solid transparent;
 101             border-right: 9px solid @err;
 102         }
 103     }
 104 }
 105
 106 .required:before {
 107     color: red;
 108     margin-right: 2px;
 109     content:  "* ";
 110     position: absolute;
 111     top: 28px;
 112     left: -10px;
 113 }
 114
 115 .custom-input-field{
 116     padding-left: 6px;
 117     padding-top: 0;
 118
 119     height: 30px;
 120     line-height: 30px;
 121     width: 100%;
 122     border: 1px solid #ccc;
 123     border-radius: 0;
 124     position: relative;
 125     padding-bottom: 0px;
 126
 127 }
 128 .custom-select-field{
 129     padding-left: 6px;
 130     padding-top: 0;
 131
 132     height: 30px;
 133     line-height: 30px;
 134     width: 100%;
 135     border: 1px solid #ccc;
 136     border-radius: 0;
 137     position: relative;
 138 }
 139
 140 .dropdown-container{
 141     height:40px;
 142     // float:left;
 143     position:relative;
 144 }
 145
 146 .select-input,
 147 .multiple-select,
 148 .right_arrow_down{
 149     position:absolute;
 150     height: 100%;
 151     width:100%;
 152     top: 0px;
 153 }
 154
 155 .right_arrow_down{
 156     pointer-events:none;
 157     top: -1px;
 158     left:432px;
 159     float:right;
 160     width:16px;
 161     background: url('../assets/images/sprite.png') bottom right no-repeat;
 162     height:30px;
 163     background-size: 100% 90%;
 164     z-index:10;
 165 }
 166
 167 .custom-select-wrap{
 168     width: 100%;
 169     position: relative;
 170     display: inline-block;
 171     vertical-align: middle;
 172 }
 173 .custom-select-wrap::after{
 174     content: '';
 175     .arrow_down;
 176     display: block;
 177     position: absolute;
 178     top: 12px;
 179     right: 10px;
 180     z-index: 999;
 181 }
 182
 183 select{
 184     -webkit-appearance:none;
 185     -moz-appearance:none;
 186     appearance:none;
 187     text-indent: 0.01px;
 188     text-overflow: '';
 189 }