portal-FE-os/src/app/pages/application-onboarding/application-details-dialog/application-details-dialog.component.scss

   1 /*-
   2  * ============LICENSE_START==========================================
   3  * ONAP Portal
   4  * ===================================================================
   5  * Copyright (C) 2019 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
  39  .application-details-modal{
  40      min-height: 37vw;
  41  }
  42
  43 .application-details-modal .app-properties-mainapp-properties-main{
  44        padding-left: 40px;
  45        padding-top: 16px;
  46        padding-bottom: 16px;
  47 }
  48
  49 .application-details-modal .app-properties-main .left-container{
  50     display: inline-block;
  51     width: 48%;
  52
  53 }
  54
  55 .application-details-modal .app-properties-main .right-container{
  56     display: inline-block;
  57     width: 48%;
  58     float: right;
  59     margin-right:10px;
  60
  61 }
  62
  63 .application-details-modal .app-properties-main .property{
  64     position: relative;
  65     margin-bottom: 16px;
  66 }
  67 .application-details-modal .app-properties-main .checkbox-label{
  68     display: inline-block;
  69     padding-left: 3px;
  70 }
  71 .application-details-modal .app-properties-main .checkbox-field{
  72     padding: 0;
  73     margin: 0;
  74     vertical-align: middle;
  75     position: relative;
  76     top: -1px;
  77 }
  78 .application-details-modal .app-properties-main .preview{
  79     width: 220px;
  80     margin-top: 11px;
  81     display: block;
  82 }
  83
  84 .application-details-modal .app-properties-main .left-label{
  85     display:inline-block;
  86     float: left;
  87 }
  88 .application-details-modal .app-properties-main .remove{
  89     cursor: pointer;
  90     display: inline-block;
  91     float: right;
  92 }
  93
  94 .application-details-modal .app-properties-main .input-field{
  95     width: 220px;
  96 }
  97
  98 mat-select {
  99     width: 16em;
 100     margin: 0;
 101     font-family: inherit;
 102     font-size: inherit;
 103     line-height: inherit;
 104     border-width: 2px;
 105     border-style: ridge;
 106     border-color: initial;
 107 }
 108
 109 .application-details-modal .app-properties-main .input-file-field{
 110     width: 220px;
 111     border: 0px solid #d2d2d2;
 112     box-shadow: 0px 0px 2px -2px rgba(0, 0, 0, 0.08) inset;
 113     padding-left: 2px;
 114 }
 115
 116 .application-details-modal .app-properties-main .image-preview{
 117     background: gray;
 118     background-size: cover;
 119     width: 220px;
 120     height: 184px;
 121     margin-top: 10px;
 122     border: 2px solid #e8e8e8;
 123     border-radius: 4px;
 124 }
 125
 126 .application-details-modal .app-properties-main .error-container{
 127     position: absolute;
 128     width: 220px;
 129     display: block;
 130     height: 12px;
 131     line-height: 12px;
 132 }
 133
 134 .application-details-modal .app-properties-main .err-message{
 135     font-size: 10px;
 136 }
 137
 138 .application-details-modal .app-properties-main .checkbox .skin {
 139     left: 0px;
 140     top: 0px;
 141 }
 142
 143 .application-details-modal input[type="text"] {
 144     width: 16em;
 145 }
 146
 147 .application-details-modal select {
 148     width: 16em;
 149 }
 150
 151 .application-details-modal input[type="url"] {
 152     width: 16em;
 153 }
 154
 155 .application-details-modal input[type="number"] {
 156     width: 16em;
 157 }
 158
 159 .application-details-modal input[type="password"] {
 160     width: 16em;
 161 }
 162
 163 ::ng-deep .modal-dialog {
 164     max-width: 700px;
 165     width: 630px;
 166     overflow-x: auto;
 167     overflow-y: auto;
 168 }
 169
 170 .required::before {
 171     color: rgb(207, 42, 42);
 172     margin-right: 2px;
 173     content: "* ";
 174     position: absolute;
 175     top: 28px;
 176     left: -10px;
 177 }
 178 .remove{
 179     cursor: pointer;
 180     color: #007bff;
 181 }
 182 .application-deatils-radio-group{
 183     display: flex;
 184     flex-direction: column;
 185 }
 186
 187 mat-radio-group{
 188     margin-left: 10%;
 189 }
 190
 191 .modal-footer{
 192     width: 100%;
 193 }
 194
 195 mat-form-field{
 196  width: 94%;
 197 }