skyquake/plugins/composer/src/src/styles/EditConfigParameterMap.scss

   1 /*
   2  *
   3  *   Copyright 2016 RIFT.IO Inc
   4  *
   5  *   Licensed under the Apache License, Version 2.0 (the "License");
   6  *   you may not use this file except in compliance with the License.
   7  *   You may obtain a copy of the License at
   8  *
   9  *       http://www.apache.org/licenses/LICENSE-2.0
  10  *
  11  *   Unless required by applicable law or agreed to in writing, software
  12  *   distributed under the License is distributed on an "AS IS" BASIS,
  13  *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14  *   See the License for the specific language governing permissions and
  15  *   limitations under the License.
  16  *
  17  */
  18
  19 @import "main";
  20 @import "variables";
  21 @import "ColorGroups";
  22
  23 .config-parameter-map {
  24
  25         $field-border-radius: 3px;
  26         $field-background-color: white;
  27         $child-indent-left-right-margin: 5px;
  28
  29         /* font-size: smaller;*/
  30         display:-ms-flexbox;
  31         display:flex;
  32         -ms-flex-wrap: wrap;
  33             flex-wrap: wrap;
  34
  35
  36
  37         max-width: 980px;
  38         .config-parameter-titles {
  39                 display: -ms-flexbox;
  40                 display: flex;
  41                 -ms-flex: 1 1 100%;
  42                     flex: 1 1 100%;
  43             padding-bottom:10px;
  44             color: #AEAEAE;
  45             text-transform:uppercase;
  46                     .config-parameter {
  47                         padding-left: 10px;
  48                     }
  49         }
  50         .config-parameter {
  51                 display:-ms-flexbox;
  52                 display:flex;
  53                 -ms-flex: 1 0 50%;
  54                     flex: 1 0 50%;
  55                     &-source, &-request {
  56                         -ms-flex: 1 1 50%;
  57                         flex: 1 1 50%;
  58                                 border-top:1px solid silver;
  59                                 padding: 10px 10px;
  60                                                     }
  61                     &-request{
  62                         line-height: 25px;
  63                     }
  64                     &-group {
  65                         -ms-flex: 1 1 100%;
  66                             flex: 1 1 100%;
  67                         display:-ms-flexbox;
  68                         display:flex;
  69                         &:nth-child(even) {
  70                                 background: $panel-bg-color-contrast;
  71                         }
  72                     }
  73         }
  74
  75
  76         h1 {
  77                 text-align: left;
  78                 span:last-child {
  79                         i {
  80                                 display: none;
  81                         }
  82                 }
  83         }
  84
  85         h2 {
  86                 @extend h1;
  87
  88         }
  89
  90         .basic-properties-group {
  91                 > h1 {
  92                         display: none;
  93                 }
  94         }
  95
  96         .advanced-properties-group {
  97         }
  98
  99         /* label is used as list item headers */
 100         h3 {
 101                 @extend h2;
 102                 display: inline-block;
 103                 .name {
 104                         color: #586e75;
 105                 }
 106                 .value {
 107                         display: none;
 108                         color: #002b36;
 109                 }
 110                 .info {
 111                         margin: 4px;
 112                 }
 113         }
 114
 115         val {
 116                 display: inline-block;
 117                 color: #073642;
 118         }
 119
 120         a {
 121                 &.simple-list-item {
 122                         display: inline-block;
 123                         width: 230px;
 124                         padding: 4px 16px 4px 4px;
 125                         white-space: nowrap;
 126                 }
 127                 &.vld-list-item,
 128                 &.internal-vld-list-item{
 129                         border: 1px solid $vld-primary-color;
 130                         border-radius: 24px;
 131                         background: white linear-gradient(to right, $vld-primary-color 34px, white 34px);;
 132                 }
 133                 &.vnfd-list-item,
 134                 &.constituent-vnfd-list-item{
 135                         border: 1px solid $vnfd-primary-color;
 136                         border-radius: 11px;
 137                         background: white linear-gradient(to right, $vnfd-primary-color 34px, white 34px);;
 138                 }
 139                 &.vdu-list-item {
 140                         border: 1px solid $vdu-primary-color;
 141                         border-radius: 11px;
 142                         background: white linear-gradient(to right, $vdu-primary-color 34px, white 34px);;
 143                 }
 144                 &.vnffgd-list-item {
 145                         border: 1px solid $vnffgd-primary-color;
 146                         border-radius: 11px;
 147                         background: white linear-gradient(to right, $vnffgd-primary-color 34px, white 34px);;
 148                 }
 149         }
 150
 151         &.-is-tree-view {
 152                 .property {
 153
 154                         position: relative;
 155                         overflow: hidden;
 156
 157                         margin: 8px 8px;
 158
 159                         background-color: rgba(147, 161, 161, 0.5);
 160                         border-radius: $field-border-radius;
 161
 162                         > h3 {
 163                                 position: absolute;
 164                                 top: 2px;
 165                                 right: 18px;
 166                                 height: 21px;
 167                                 pointer-events: none;
 168                                 border-radius: $field-border-radius;
 169                                 padding: 3px 0;
 170                         }
 171
 172                         > val {
 173                                 width: 100%;
 174                                 > .property-content {
 175                                         width: 100%;
 176                                 }
 177
 178                         }
 179
 180                         &.-is-focused {
 181                                 > h3 {
 182                                         /*z-index: -1;*/
 183                                 }
 184                         }
 185
 186                         &.leaf-property {
 187                                 overflow: hidden;
 188                                 min-height: 25px;
 189                                 > h3 {
 190                                         background: linear-gradient(to right, transparent, $field-background-color 21px);
 191                                         padding-left: 25px;
 192                                 }
 193                                 > val {
 194                                         border-radius: $field-border-radius;
 195                                         > .property-content {
 196                                                 border-radius: $field-border-radius;
 197                                         }
 198                                 }
 199                         }
 200
 201                         &.property:not(.leaf-property) {
 202
 203                                 padding: 7px $child-indent-left-right-margin 0 $child-indent-left-right-margin;
 204
 205                                 &.list-property {
 206                                         > h3 {
 207                                                 padding: 4px 8px;
 208                                         }
 209                                 }
 210
 211                                 > h3 {
 212                                         right: auto;
 213                                         top: 0;
 214                                         left: 0;
 215                                         width: 100%;
 216                                         height: 25px;
 217                                         z-index: 1;
 218                                         padding: 8px;
 219                                         /*background: red;*/
 220                                         pointer-events: all;
 221                                 }
 222                                 > val {
 223                                         margin: 28px 0 8px 0;
 224                                         > .property-content {
 225                                                 position: relative;
 226                                                 border-radius: $field-border-radius;
 227                                                 margin-top: 4px;
 228                                                 padding: 4px;
 229                                                 &:first-of-type {
 230                                                         margin-top: 0;
 231                                                 }
 232                                                 &.simple-list {
 233                                                         min-height: 15px;
 234                                                         margin: 11px;
 235                                                         .simple-list-item {
 236                                                                 img,
 237                                                                 span {
 238                                                                         margin: 0 5px;
 239                                                                         vertical-align: middle;
 240                                                                 }
 241                                                         }
 242                                                 }
 243                                         }
 244                                         > .property-content:not(.simple-list) {
 245                                                 &:nth-of-type(odd) {
 246                                                         background-color: rgba(238, 232, 213, 0.33);
 247                                                 }
 248                                                 &:nth-of-type(even) {
 249                                                         background-color: rgba(147, 161, 161, 0.33);
 250                                                 }
 251                                         }
 252                                         .tip {
 253                                                 font-style: italic;
 254                                                 font-size: small;
 255                                                 color: #93a1a1;
 256                                         }
 257                                 }
 258                         }
 259
 260                         .actions {
 261                                 span {
 262                                         vertical-align: middle;
 263                                         padding: 0 5px;
 264                                 }
 265                         }
 266
 267                 }
 268
 269         }
 270
 271         .description {
 272                 display: none;
 273         }
 274
 275         input,
 276         select,
 277         textarea {
 278                 height: 25px;
 279                 line-height: 25px;
 280                 max-width: 100%;
 281                 min-width: 100%;
 282                 margin: 0;
 283                 padding: 0 0px 4px 8px;
 284                 border: 1px solid $field-background-color;
 285                 border-radius: $field-border-radius;
 286                 color: #002b36;
 287                 background-color: $field-background-color;
 288                 vertical-align: top;
 289                 &:focus {
 290                         color: #002b36;
 291                         background-color: white !important;
 292                 }
 293                 &::-webkit-input-placeholder {
 294                         color: #eee8d5 !important;
 295                 }
 296
 297                 &:-moz-placeholder { /* Firefox 18- */
 298                         color: #eee8d5 !important;
 299                 }
 300
 301                 &::-moz-placeholder {  /* Firefox 19+ */
 302                         color: #eee8d5 !important;
 303                 }
 304
 305                 &:-ms-input-placeholder {
 306                         color: #eee8d5 !important;
 307                 }
 308         }
 309
 310         select {
 311                 padding-right: 0;
 312                 margin-right: 0;
 313                 -webkit-appearance: none;
 314                 -webkit-border-radius: $field-border-radius;
 315                 &.-value-not-set {
 316                         color: #eee8d5;
 317                 }
 318         }
 319
 320         select {
 321                 -webkit-appearance: none;
 322                    -moz-appearance: none;
 323                         appearance: none; /* using -prefix-free http://leaverou.github.io/prefixfree/*/
 324         background: $field-background-color url(../../../node_modules/open-iconic/svg/caret-bottom.svg) no-repeat right 8px center;
 325                 background-size: 10px;
 326                 border: {
 327                         color: $field-background-color;
 328                         radius: $field-border-radius;
 329                         style: solid;
 330                         width: 1px;
 331                 }
 332         }
 333
 334         /* Removes default arrow for IE10+*/
 335         /* IE 8/9 get dafault arrow which covers caret image*/
 336         /* as long as caret image is small than and positioned*/
 337         /* behind default arrow*/
 338         select::-ms-expand {
 339                 display: none;
 340         }
 341
 342         textarea {
 343                 height: 50px;
 344         }
 345
 346         input {
 347                 padding: 0 20px 0 8px;
 348                 line-height: 25px;
 349         }
 350
 351         input[name$="id"],
 352         input.-is-guid {
 353                 font-size: 10px;
 354                 font-family: monospace;
 355         }
 356
 357 }