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