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.delete {
 345                     background: transparent;
 346                     font-family: OpenSans-SemiBold;
 347                     font-size: 12px;
 348                     color: red;
 349                     border-radius: 50px;
 350                     border: 1px solid gray;
 351                     padding: 5px 20px;
 352                   }
 353                 }
 354
 355                 .model-info.rightBorder {
 356                   border-right: 1px solid #D2D2CD !important;
 357                 }
 358                 .model-info {
 359                   border: 1px solid #D2D2CD;
 360                   line-height: normal;
 361                   padding-left: 16px;
 362                   width: 100%;
 363                   height: 100%;
 364                   flex-direction: column;
 365                   display: flex;
 366                   justify-content: center;
 367                   border-right: none;
 368
 369                   .property-name {
 370                     font-family: OpenSans-SemiBold;
 371                     font-size: 13px;
 372                     color: #191919;
 373                     //text-transform: capitalize;  problematic with search
 374                     .auto-name{
 375                       display: inline-flex;//required for search more then one sub highlight,
 376                       font-size: 13px;
 377                     }
 378                     .text_decoration{
 379                       text-decoration: line-through;
 380                     }
 381
 382                     .text_decoration:after {
 383                       height: 10px;
 384                     }
 385                   }
 386                   tree-node-header-properties{
 387                     display: block;
 388                   }
 389                 }
 390                 .scaling {
 391                   background: #4ca90c;
 392                   padding: 5px;
 393                   border-radius: 3px;
 394                   font-family: OpenSans-SemiBold;
 395                   font-size: 12px;
 396                   color: #FFF9F9;
 397                   &.invalid{
 398                     background: #cf2a2a;
 399                   }
 400                   span:first-child{
 401                     margin-right: 3px;
 402                   }
 403                 }
 404
 405                 .model-actions {
 406                   :hover {
 407                     background: transparent !important;
 408                   }
 409                   display: flex;
 410                   align-items: center;
 411                   border: 1px solid #D2D2CD;
 412                   line-height: normal;
 413                   height: 100%;
 414                   border-left: none;
 415                   .icon-browse {
 416                     padding: 0;
 417                     width: 30px;
 418                     height: 24px;
 419                     &:before {
 420                       content: "\e924";
 421                       font-size: 24px;
 422                       display: none;
 423                     }
 424                     &:hover:before {
 425                       //color: #009FDB;
 426                     }
 427                     &:focus:before,
 428                     &:active:before {
 429                       //color: #009FDB;
 430                     }
 431                   }
 432
 433                   .icon-alert {
 434                     padding-right: 10px;
 435                   }
 436                 }
 437               }
 438             }
 439           }
 440         }
 441       }
 442       tree-node-children {
 443         .tree-children {
 444           padding-left: 45px;
 445           .model-info span:first-child {
 446             //flex: 1.1 !important;
 447           }
 448         }
 449       }
 450     }
 451   }
 452 }
 453
 454
 455 .tree-node-level-1.tree-node.tree-node-expanded {
 456   .failed-popover-wrap {
 457     left: -50px !important;
 458     position: absolute;
 459   }
 460 }
 461 .tree-node-level-1 {
 462   .failed-popover-wrap {
 463     left: 45px !important;
 464     position: absolute;
 465   }
 466 }
 467
 468 .tree-node-level-2.tree-node.tree-node-leaf {
 469   .failed-popover-wrap {
 470     left: 135px !important;
 471     position: absolute;
 472   }
 473 }
 474
 475 .tree-node-level-1.tree-node.tree-node-collapsed {
 476   .failed-popover-wrap{
 477     left: 0px !important;
 478     position: absolute;
 479   }
 480 }
 481
 482 .failed-msg{
 483   background: #cf2a2a;
 484   padding: 5px;
 485   border-radius: 3px;
 486   font-family: OpenSans-SemiBold;
 487   font-size: 12px;
 488   color: #FFF9F9;
 489 }
 490
 491 .cdk-overlay-pane.ngx-contextmenu {
 492   ul.dropdown-menu {
 493     width: 200px;
 494     box-shadow: none;
 495     padding: 0;
 496     padding-top: 10px;
 497     margin: 0;
 498     border: 1px solid #D2D2D2;
 499     border-top: 3px solid #009FDB;
 500     box-shadow: 0 0px 2px rgba(90,90,90,0.24);
 501     border-radius: 2px;
 502     li {
 503       height: 40px;
 504       a {
 505         font-family: OpenSans-Regular;
 506         display: flex;
 507         align-items: center;
 508         height: 100%;
 509         padding: 12px;
 510         color: #5A5A5A;
 511         &:hover {
 512           background: #E6F6FB;
 513           color:  #009FDB;
 514         }
 515         span {
 516           padding-right: 12px;
 517           &.icon-edit:before {
 518             content: '\e917';
 519           }
 520           &.icon-trash:before {
 521             content: '\e937';
 522           }
 523         }
 524       }
 525     }
 526   }
 527 }
 528
 529