vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.scss

   1 @mixin highlight($background-color, $color) {
   2   background: none;
   3   padding: 0;
   4   background-color: $background-color;
   5   border: $color 1px solid;
   6   color: $color;
   7 }
   8 @mixin highlight-toggle-children {
   9   tree-node-expander {
  10     .toggle-children-wrapper {
  11       span.toggle-children {
  12         @include highlight(white, #009FDB);
  13         border-right: none;
  14         .isFailed {
  15           left: 0px !important;
  16         }
  17       }
  18     }
  19
  20   }
  21 }
  22
  23 #VNF > node-content-wrapper {
  24   border: 1px dashed #D2D2D2 !important;
  25 }
  26
  27 @mixin highlight-tree-node-content {
  28   tree-node-content {
  29     > div {
  30       .model-actions {
  31         .icon-browse:before {
  32           display: inline-block;
  33         }
  34       }
  35     }
  36   }
  37 }
  38
  39
  40 .icon-browse.isLinked {
  41   display: none !important;
  42 }
  43
  44 #RETRY_EDIT drawing-board-tree tree-node-collection > div,
  45 #RETRY drawing-board-tree tree-node-collection > div {
  46    margin-top: 0px;
  47    width: calc(100% - 50px);
  48    margin-left: auto;
  49  }
  50
  51 drawing-board-tree {
  52   flex: 1;
  53   color: #5A5A5A;
  54   line-height: 14px;
  55   flex-direction:column;
  56
  57   &.col-md-6,&.col-md-5{
  58     padding: 0;
  59   }
  60   .tree-header {
  61     display: flex;
  62     justify-content: space-between;
  63
  64     .title-tree {
  65       font-family: OpenSans-SemiBold;
  66       font-size: 16px;
  67       color: #191919;
  68       text-align: left;
  69       text-transform: uppercase;
  70       padding-bottom: 48px;
  71     }
  72     .search-container {
  73       width: 275px;
  74     }
  75   }
  76   .highlight {
  77     background-color: #9DD9EF;
  78   }
  79   .toggle-children-wrapper.toggle-children-wrapper-expanded {
  80     .toggle-children:before {
  81       color: #009FDB;
  82     }
  83   }
  84   .drawing-board-tree {
  85     width: 100%;
  86     padding: 30px 45px;
  87   }
  88
  89   .tree-node-level-1 {
  90     margin-bottom: 10px;
  91   }
  92   tree-viewport {
  93     tree-node {
  94       tree-node-drop-slot {
  95         .node-drop-slot {
  96           display: none;
  97         }
  98       }
  99       & .tree-node-focused,
 100       & .tree-node-active {
 101         & > tree-node-wrapper {
 102           .node-wrapper {
 103             @include highlight-toggle-children;
 104             .node-content-wrapper-focused,
 105             .node-content-wrapper-active {
 106               background: transparent !important;
 107               .main-row {
 108                 //background-color: #E6F6FB;
 109                 //color: #009FDB;
 110                 //border-right: none !important;
 111                 //border: #009FDB 1px solid;
 112               }
 113               .instance-type {
 114                 background-color: #E6F6FB;
 115                 color: #009FDB;
 116                 border-right: none !important;
 117                 border: #009FDB 1px solid !important;
 118               }
 119
 120               .isLinked {
 121                 .model-info {
 122                   border-top: 1px #009FDB dashed !important;
 123                   border-bottom: 1px #009FDB dashed !important;
 124                 }
 125                 .model-info.rightBorder {
 126                   border-right: 1px #009FDB dashed !important ;
 127                 }
 128               }
 129               .model-info {
 130                 background-color: #E6F6FB;
 131                 color: #009FDB;
 132                 border-right: none !important;
 133                 border: #009FDB 1px solid;
 134               }
 135
 136               .model-info.rightBorder {
 137                 border-right: #009FDB 1px solid !important;
 138               }
 139
 140               .model-actions {
 141                 background-color: #E6F6FB;
 142                 color: #009FDB;
 143                 color: #009FDB;
 144                 border-left: none !important;
 145                 border: #009FDB 1px solid;
 146               }
 147
 148               @include highlight-toggle-children;
 149               .property-name,.instance-type {
 150                 color: #009FDB !important;
 151                 position: relative;
 152                 background-color: #E6F6FB;
 153                 color: #009FDB !important;
 154               }
 155               .status-properties {
 156                 .status-property-value,.status-property-name {
 157                   color: #009FDB;
 158                 }
 159               }
 160               .icon-browse:before {
 161                 color: #5A5A5A;
 162               }
 163               @include highlight-tree-node-content;
 164             }
 165           }
 166         }
 167       }
 168       & .tree-node-expanded {
 169         > tree-node-wrapper .node-wrapper {
 170
 171         }
 172       }
 173
 174       .tree-node-active .tree-children {
 175         //border: 1px solid #009FDB;
 176         padding-left: 45px;
 177       }
 178
 179       .tree-node.tree-node-active.tree-node-expanded {
 180       }
 181
 182       .tree-children .tree-node-leaf .node-wrapper{
 183         margin-left: -5px;
 184       }
 185
 186       .tree-node.tree-node-expanded > tree-node-wrapper{
 187
 188         position: relative;
 189         z-index: 1;
 190         display: block;
 191       }
 192       tree-node-wrapper {
 193         .node-wrapper {
 194           height: 45px;
 195           &:hover {
 196             .node-content-wrapper:not(.node-content-wrapper-focused) {
 197               .instance-type ,
 198               .model-info ,
 199               .model-actions {
 200                 background: #F2F2F2;
 201               }
 202               .icon-browse:before {
 203                 color: #5A5A5A;
 204               }
 205               @include highlight-tree-node-content;
 206             }
 207           }
 208           tree-node-expander {
 209             font-family: 'icomoon' !important;
 210             height: 100%;
 211             .failed-msg {
 212
 213             }
 214             .toggle-children-wrapper {
 215               padding: 0;
 216               display: block;
 217               height: 100%;
 218               span.toggle-children {
 219                 height: 43px;
 220                 display: flex;
 221                 width: 45px;
 222                 margin-top: 1px;
 223                 padding: 0;
 224                 top: 0;
 225                 background-image: none;
 226                 background-color: white;
 227                 border: 1px solid #D2D2D2;
 228                 border-right: none;
 229                 &:before {
 230                   content: "\e900";
 231                   font-size: 20px;
 232                   font-weight: 600;
 233                   text-align: center;
 234                   display: inline-block;
 235                   flex: auto;
 236                   align-self: center;
 237                 }
 238               }
 239             }
 240             .toggle-children-wrapper-expanded {
 241               span.toggle-children {
 242                 transform: none;
 243                 &:before {
 244                   content: "\e930";
 245                 }
 246               }
 247             }
 248             .toggle-children-placeholder {
 249               width:45px;
 250             }
 251           }
 252           .node-content-wrapper-active,
 253           .node-content-wrapper.node-content-wrapper-active:hover,
 254           .node-content-wrapper-active.node-content-wrapper-focused {
 255             background: white !important;
 256           }
 257
 258           .node-content-wrapper-active.node-content-wrapper-focused {
 259             background: white !important;
 260           }
 261           .node-content-wrapper {
 262
 263             padding: 0;
 264             background: none;
 265             box-shadow: none;
 266             border-radius: 0;
 267             border: 1px solid white;
 268             height: 100%;
 269             flex: 1;
 270             .resourceGroup {
 271               border: 1px dashed #D2D2D2 !important;
 272             }
 273
 274             .isLinked {
 275               .instance-type  {
 276                 border-style: dashed !important;
 277               }
 278
 279               .model-info {
 280                 border: 1px #D2D2CD dashed !important;
 281                 border-right: none !important;
 282               }
 283
 284               .model-actions {
 285                 border-style: dashed !important;
 286                 border-left-style: none !important;
 287               }
 288             }
 289
 290             tree-node-content {
 291               > div {
 292                 height: 100%;
 293                 display: flex;
 294                 align-items: center;
 295
 296                 .instance-type {
 297                   width: 40px;
 298                   height: 100%;
 299                   text-transform: uppercase;
 300                   border-right: 1px solid #D2D2D2;
 301                   word-break: break-all;
 302                   color: #959595;
 303                   font-size: 13px;
 304                   font-family: OpenSans-SemiBold;
 305                   display: flex;
 306                   text-align: center;
 307                   flex-direction: column;
 308                   align-items: center;
 309                   justify-content: center;
 310
 311                   .newIcon {
 312                     background: #45B16D;
 313                     position: absolute;
 314                     top: 5%;
 315                     width: 90%;
 316                     left: 5%;
 317                     right: 5%;
 318                     border-radius: 2px;
 319                     height: 5px;
 320                   }
 321                   span {
 322                     width: 40px;
 323                     display: block;
 324                   }
 325                 } > span {
 326                   flex: 1;
 327                   display: block;
 328
 329                   span:nth-child(2) {
 330                     display: block;
 331                   }
 332                 }
 333                 .node-content-wrapper-active {
 334                   .action-status {
 335                     background-color: white !important;
 336                   }
 337                 }
 338                 .action-status {
 339                   padding-left: 10px;
 340                   background-color: white !important;
 341                   line-height: 42px;
 342                   width: 95px;
 343                   min-width: 95px;
 344                   .action-status-type {
 345                     background: transparent;
 346                     font-family: OpenSans-SemiBold;
 347                     font-size: 12px;
 348                     border-radius: 50px;
 349                     border: 1px solid gray;
 350                     padding: 5px 17px;
 351                     &.delete {
 352                       color: red;
 353                     }
 354                     &.upgrade{
 355                       color: #009FDB;
 356                     }
 357                   }
 358
 359                 }
 360
 361                 .model-info.rightBorder {
 362                   border-right: 1px solid #D2D2CD !important;
 363                 }
 364                 .model-info {
 365                   border: 1px solid #D2D2CD;
 366                   line-height: normal;
 367                   padding-left: 16px;
 368                   width: 100%;
 369                   height: 100%;
 370                   flex-direction: column;
 371                   display: flex;
 372                   justify-content: center;
 373                   border-right: none;
 374
 375                   .property-name {
 376                     font-family: OpenSans-SemiBold;
 377                     font-size: 13px;
 378                     color: #191919;
 379                     //text-transform: capitalize;  problematic with search
 380                     .auto-name{
 381                       display: inline-flex;//required for search more then one sub highlight,
 382                       font-size: 13px;
 383                     }
 384                     .text_decoration{
 385                       text-decoration: line-through;
 386                     }
 387
 388                     .text_decoration:after {
 389                       height: 10px;
 390                     }
 391                   }
 392                   tree-node-header-properties{
 393                     display: block;
 394                   }
 395                 }
 396                 .scaling {
 397                   background: #4ca90c;
 398                   padding: 5px;
 399                   border-radius: 3px;
 400                   font-family: OpenSans-SemiBold;
 401                   font-size: 12px;
 402                   color: #FFF9F9;
 403                   &.invalid{
 404                     background: #cf2a2a;
 405                   }
 406                   span:first-child{
 407                     margin-right: 3px;
 408                   }
 409                 }
 410
 411                 .model-actions {
 412                   :hover {
 413                     background: transparent !important;
 414                   }
 415                   display: flex;
 416                   align-items: center;
 417                   border: 1px solid #D2D2CD;
 418                   line-height: normal;
 419                   height: 100%;
 420                   border-left: none;
 421                   .icon-browse {
 422                     padding: 0;
 423                     width: 30px;
 424                     height: 24px;
 425                     &:before {
 426                       content: "\e924";
 427                       font-size: 24px;
 428                       display: none;
 429                     }
 430                     &:hover:before {
 431                       //color: #009FDB;
 432                     }
 433                     &:focus:before,
 434                     &:active:before {
 435                       //color: #009FDB;
 436                     }
 437                   }
 438
 439                   .icon-alert {
 440                     padding-right: 10px;
 441                   }
 442                 }
 443               }
 444             }
 445           }
 446         }
 447       }
 448       tree-node-children {
 449         .tree-children {
 450           padding-left: 45px;
 451           .model-info span:first-child {
 452             //flex: 1.1 !important;
 453           }
 454         }
 455       }
 456     }
 457   }
 458 }
 459
 460
 461 .tree-node-level-1.tree-node.tree-node-expanded {
 462   .failed-popover-wrap {
 463     left: -50px !important;
 464     position: absolute;
 465   }
 466 }
 467 .tree-node-level-1 {
 468   .failed-popover-wrap {
 469     left: 45px !important;
 470     position: absolute;
 471   }
 472 }
 473
 474 .tree-node-level-2.tree-node.tree-node-leaf {
 475   .failed-popover-wrap {
 476     left: 135px !important;
 477     position: absolute;
 478   }
 479 }
 480
 481 .tree-node-level-1.tree-node.tree-node-collapsed {
 482   .failed-popover-wrap{
 483     left: 0px !important;
 484     position: absolute;
 485   }
 486 }
 487
 488 .failed-msg{
 489   background: #cf2a2a;
 490   padding: 5px;
 491   border-radius: 3px;
 492   font-family: OpenSans-SemiBold;
 493   font-size: 12px;
 494   color: #FFF9F9;
 495 }
 496
 497 .cdk-overlay-pane.ngx-contextmenu {
 498   ul.dropdown-menu {
 499     width: 200px;
 500     box-shadow: none;
 501     padding: 0;
 502     padding-top: 10px;
 503     margin: 0;
 504     border: 1px solid #D2D2D2;
 505     border-top: 3px solid #009FDB;
 506     box-shadow: 0 0px 2px rgba(90,90,90,0.24);
 507     border-radius: 2px;
 508     li {
 509       height: 40px;
 510       a {
 511         font-family: OpenSans-Regular;
 512         display: flex;
 513         align-items: center;
 514         height: 100%;
 515         padding: 12px;
 516         color: #5A5A5A;
 517         &:hover {
 518           background: #E6F6FB;
 519           color:  #009FDB;
 520         }
 521         span {
 522           padding-right: 12px;
 523           &.icon-edit:before {
 524             content: '\e917';
 525           }
 526           &.icon-trash:before {
 527             content: '\e937';
 528           }
 529         }
 530       }
 531     }
 532   }
 533 }
 534
 535