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

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