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