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