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

   1 .EditForwardingGraphPaths {
   2
   3         padding: 8px;
   4
   5         &.-with-transitions {
   6                 * {
   7                         transition: all 300ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
   8                 }
   9         }
  10
  11         .NetworkService {
  12                 position: relative;
  13                 > .footer-actions {
  14                         border-top: 1px solid silver;
  15                 }
  16         }
  17
  18         .ForwardingGraph {
  19
  20                 margin-top: 20px;
  21
  22                 &:first-child {
  23                         margin-top: 0;
  24                 }
  25
  26                 border-bottom: 1px solid silver;
  27
  28                 > div > .footer-actions {
  29                         padding-left: 80px;
  30                 }
  31
  32         }
  33
  34         .RecordServicePath {
  35
  36                 position: relative;
  37
  38                 min-height: 100px;
  39
  40                 white-space: nowrap;
  41
  42                 overflow: visible;
  43
  44                 margin: 8px 0;
  45
  46                 background-color: #CBD1D1;
  47
  48                 .EditableProperty {
  49                         display: block;
  50                         margin: 12px 0;
  51                         width: 200px;
  52                 }
  53
  54                 .ConstituentVnfd {
  55
  56                         position: relative;
  57                         display: none;
  58
  59                         > small {
  60                                 vertical-align: bottom;
  61                         }
  62
  63                         &:hover {
  64                                 small.vnfd-title {
  65                                         display: block;
  66                                 }
  67                         }
  68
  69                         small.vnfd-title {
  70                                 display: none;
  71                                 position: absolute;
  72                                 top: -20px;
  73                                 width: 100%;
  74                                 left: 0;
  75                         }
  76
  77                         .connectors {
  78                                 border-top: 3px solid silver;
  79                                 border-radius: 9px;
  80                                 padding-top: 3px;
  81                                 .connection-point {
  82                                         border: 2px solid;
  83                                         margin: 2px;
  84                                         * {
  85                                                 vertical-align: middle;
  86                                         }
  87                                 }
  88                         }
  89                 }
  90
  91                 &.-is-factory {
  92                         opacity: 0.33;
  93                         &:hover {
  94                                 opacity: 1;
  95                                 .ConstituentVnfd {
  96                                         display: inline-block;
  97                                 }
  98                         }
  99                         .create-record-service-path {
 100                                 display: none;
 101                         }
 102                         .EditableProperty {
 103                                 visibility: hidden;
 104                         }
 105                 }
 106
 107                 &:hover {
 108                         > .header-actions {
 109                                 display: block;
 110                                 &:hover {
 111                                         opacity: 1;
 112                                 }
 113                         }
 114                         &.-is-edit-paths-mode {
 115                                 .ConstituentVnfd {
 116                                         display: inline-block;
 117
 118                                 }
 119                                 .enter-path-edit-mode {
 120                                         display: none;
 121                                 }
 122                                 .selection {
 123                                         display: inline-block;
 124                                 }
 125                                 > .header-actions {
 126                                         display: none;
 127                                 }
 128                         }
 129                         .rsp-create-new-connection-point-line,
 130                         .enter-path-edit-mode {
 131                                 opacity: 1;
 132                         }
 133
 134                 }
 135
 136         }
 137
 138         .RspConnectionPointRef {
 139                 border: 2px solid transparent;
 140                 border-radius: 8px;
 141                 width: 35px;
 142                 height: 35px;
 143                 display: inline-block;
 144                 margin: 0;
 145                 padding: 0;
 146                 font-size: 11px;
 147                 text-align: center;
 148                 cursor: pointer;
 149                 vertical-align: middle;
 150                 &.create-new-connection-point {
 151                         width: auto;
 152                         height: auto;
 153                         border: dotted red;
 154                 }
 155                 small {
 156                         vertical-align: baseline;
 157                 }
 158
 159         }
 160
 161         .connection-point {
 162                 @extend .RspConnectionPointRef;
 163                 display: inline-block;
 164                 border: dotted red;
 165                 text {
 166                         fill: #111831;
 167                         stroke: #111831;
 168                 }
 169         }
 170
 171         .Classifier {
 172                 background-color: #CBD1D1 !important;
 173                 td {
 174                         .match-attr-name {
 175                                 display: none;
 176                         }
 177                 }
 178         }
 179
 180         .fg-classifier {
 181
 182                 position: relative;
 183                 margin-bottom: 13px;
 184
 185                 th,
 186                 td {
 187                         padding: 4px;
 188                         min-width: 80px;
 189                         text-align: left;
 190                         vertical-align: top;
 191                         &.primary-action-column,
 192                         &.secondary-action-column {
 193                                 max-width: 40px;
 194                         }
 195                         &.id-property {
 196                                 display: none;
 197                         }
 198                 }
 199
 200                 th {
 201                         line-height: 10px;
 202                         vertical-align: bottom;
 203                 }
 204
 205                 th {
 206                         @extend h2;
 207                 }
 208
 209                 input {
 210                         &.match-attr-value {
 211                                 min-width: 100px;
 212                         }
 213                 }
 214
 215                 .classifier-properties {
 216                         line-height: 25px;
 217                         .classifier-property {
 218                                 position: relative;
 219                                 vertical-align: top;
 220                                 display: inline-block;
 221                                 margin: 4px;
 222                         }
 223                 }
 224
 225                 .select-connection-point-ref {
 226                         display: none;
 227                         position: absolute;
 228                         top: 30px;
 229                         left: 2px;
 230                         width: auto;/* set by the code*/
 231                         min-width: 150px;
 232                         box-shadow: 0.1px 0.1px 3px silver;
 233                         z-index: 9999;
 234                         .ConnectionPointSelector {
 235                                 background-color: white;
 236                                 border-radius: 3px;
 237                                 width: 100%;
 238                                 text-align: left;
 239                                 margin: 0;
 240                                 small.Button {
 241                                         display: none;
 242                                 }
 243                         }
 244                 }
 245
 246                 &.-is-edit-classifier-connection-point-ref {
 247                         .select-connection-point-ref {
 248                                 display: block;
 249                         }
 250                 }
 251
 252         }
 253
 254         h2 {
 255                 font-size: 9px;
 256                 text-transform: uppercase;
 257                 color: #AEAEAE;
 258                 img {
 259                         border: 0;
 260                         width: 30px;
 261                         margin: 3px;
 262                         vertical-align: middle;
 263                 }
 264         }
 265
 266         h4 {
 267                 @extend h2;
 268                 margin: 4px 4px 4px 80px;
 269         }
 270
 271         .primary-action-column {
 272                 width: 40px;
 273                 input {
 274                         margin: 8px 12px;
 275                 }
 276         }
 277
 278         .secondary-action-column {
 279                 width: 40px;
 280         }
 281
 282         .rsp {
 283                 display: inline-block;
 284         }
 285
 286         .rsp-line {
 287                 border: 2px solid red;
 288                 display: inline-block;
 289                 width: 20px;
 290                 vertical-align: middle;
 291                 &.rsp-create-new-connection-point-line {
 292                         border-style: dotted;
 293                 }
 294         }
 295
 296
 297         .header-actions {
 298                 position: absolute;
 299                 right: 0;
 300         }
 301
 302         .row-action-column {
 303                 width: 50px;
 304                 overflow: visible;
 305                 white-space: nowrap;
 306                 text-align: center;
 307                 padding: 8px;
 308                 display: inline-block;
 309                 .action {
 310                         cursor: pointer;
 311                 }
 312         }
 313
 314         .connection-points {
 315                 display: inline-block;
 316                 margin-right: 25px;
 317                 vertical-align: middle;
 318                 .selection {
 319                         display: none;
 320                         position: absolute;
 321                         bottom: 2px;
 322                         font-size: 10px;
 323                         text-align: center;
 324                         border-radius: 33px;
 325                         margin: 0 0 0 -12px;
 326                         padding: 12px;
 327                         background-color: rgba(255, 255, 255, 0.66);
 328                         border-top: 1px solid rgba(192, 192, 192, 0.13);
 329                         border-bottom: 1px solid rgba(192, 192, 192, 0.13);
 330                 }
 331                 .rsp:first-child {
 332                         .rsp-line {
 333                                 display: none;
 334                         }
 335                 }
 336         }
 337
 338         .create-new-connection-point.Button {
 339                 padding: 0;
 340                 img {
 341                         width: 34px;
 342                         height: 34px;
 343                 }
 344         }
 345
 346         .header-actions {
 347                 display: none;
 348                 opacity: 0.33;
 349         }
 350
 351         .footer-actions {
 352                 border-color: transparent;
 353                 opacity: 0.33;
 354                 &:hover {
 355                         opacity: 1;
 356                 }
 357         }
 358
 359         .vnfd-list {
 360                 display: inline-block;
 361         }
 362
 363         .rsp-create-new-connection-point-line,
 364         .enter-path-edit-mode {
 365                 opacity: 0.33;
 366         }
 367
 368         .fg-icon {
 369                 width: 25px;
 370                 vertical-align: middle;
 371         }
 372
 373         input {
 374                 width: 100%;
 375                 overflow: hidden;
 376                 text-overflow: ellipsis;
 377         }
 378
 379         select {
 380                 width: auto !important;
 381                 max-width: none !important;
 382                 min-width: 150px !important;
 383         }
 384
 385         .classifier-match-attributes {
 386                 > tbody {
 387                         > tr:nth-of-type(odd) {
 388                                 background-color: rgba(238, 232, 213, 0.33);
 389                         }
 390                         //> tr:nth-of-type(even) {
 391                         //      background-color: rgba(147, 161, 161, 0.33);
 392                         //}
 393                 }
 394         }
 395
 396         .no-service-function-chain-msg {
 397                 margin-left: 80px;
 398         }
 399
 400         .hint {
 401                 color: #073642;
 402                 font-size: 12.8px;
 403         }
 404
 405         .EditableProperty {
 406                 &.-is-disabled {
 407                         h3,
 408                         val input {
 409                                 background: #aeaeae !important;
 410                         }
 411                 }
 412         }
 413 }
 414
 415 .tooltip-indicator {
 416         .cpNumber {
 417                 i {
 418                         display: none;
 419                 }
 420                 val {
 421                         position: absolute;
 422                         top: -10px;
 423                         left: -5px;
 424                         margin-left: 50%;
 425                         margin-right: 50%;
 426                         padding: 0;
 427                 }
 428         }
 429 }