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

   1 .form {
   2     input, textarea, label , .multiple {
   3         .blue14r;
   4     }
   5     input, textarea , .multiple {
   6         &:focus {
   7             outline: none;
   8             border: 1px solid @portalDBlue;
   9         }
  10         border: 1px solid @portalDBlue;
  11         padding: 8px;
  12         &:disabled {
  13             border: 1px solid @funcBkgGray;
  14             .bg_portalDarkPurple;
  15         }
  16         &.ng-invalid.ng-touched {
  17             border: 1px solid @err;
  18             box-shadow: 0 0 2.55px 0.45px rgba(218,31,61,.5);
  19             &:focus {
  20                 border: 1px solid @portalDBlue;
  21             }
  22         }
  23     }
  24     input[type=number] {
  25         -moz-appearance:textfield;
  26     }
  27     textarea {
  28         min-height: 148px;
  29         max-width: @input-max-width;
  30     }
  31     .flex-group {
  32         display: flex;
  33         justify-content: space-between;
  34     }
  35     .form-group {
  36         margin: 0 0 18px;
  37         position: relative;
  38     }
  39     .checkbox {
  40         label {
  41             cursor: pointer;
  42         }
  43     }
  44     label {
  45         margin: 0 0 3px;
  46         display: block;
  47     }
  48     .text {
  49         width: 100%;
  50         display: block;
  51     }
  52     .short {
  53         width: 104px;
  54     }
  55     .multiple{
  56         padding: 0;
  57     }
  58     .error {
  59         color: @portalGreen;
  60         background: @err;
  61         border-radius: 0 5px 5px 0;
  62         font-size: 12px;
  63         line-height: 20px;
  64         text-align: center;
  65         width: 100%;
  66         position: absolute;
  67         top: 18px;
  68         margin-left: 75%;
  69         z-index: 100;
  70         height: 33px;
  71         padding: 8px;
  72         box-shadow: 0 0 2.55px 0.45px rgba(218,31,61,.5);
  73         &:before {
  74             content: '';
  75             width: 0;
  76             height: 0;
  77             position: absolute;
  78             left: -9px;
  79             top: 7px;
  80             border-top: 9px solid transparent;
  81             border-bottom: 9px solid transparent;
  82             border-right: 9px solid @err;
  83         }
  84     }
  85 }
  86
  87 .required:before {
  88     color: @funcRed;
  89     margin-right: 2px;
  90     content:  "* ";
  91     position: absolute;
  92     top: 28px;
  93     left: -10px;
  94 }
  95
  96 .custom-input-field{
  97     padding-left: 6px;
  98     padding-top: 0;
  99
 100     height: 30px;
 101     line-height: 30px;
 102     width: 100%;
 103     border: 1px solid @portalLGray;
 104     border-radius: 0;
 105     position: relative;
 106     padding-bottom: 0px;
 107
 108 }
 109 .custom-select-field{
 110     padding-left: 6px;
 111     padding-top: 0;
 112
 113     height: 30px;
 114     line-height: 30px;
 115     width: 100%;
 116     border: 1px solid @portalLGray;
 117     border-radius: 0;
 118     position: relative;
 119 }
 120
 121 .custom-select-wrap{
 122     width: 100%;
 123     position: relative;
 124     display: inline-block;
 125     vertical-align: middle;
 126 }
 127 .custom-select-wrap::after{
 128     content: '';
 129     .arrow_down;
 130     display: block;
 131     position: absolute;
 132     top: 12px;
 133     right: 10px;
 134     z-index: 999;
 135 }
 136
 137 select{
 138     -webkit-appearance:none;
 139     -moz-appearance:none;
 140     appearance:none;
 141     text-indent: 0.01px;
 142     text-overflow: '';
 143 }