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 #RETRY_EDIT drawing-board-tree tree-node-collection > div,
  40 #RETRY drawing-board-tree tree-node-collection > div {
  41    margin-top: 0px;
  42    width: calc(100% - 50px);
  43    margin-left: auto;
  44  }
  45
  46 drawing-board-tree {
  47   flex: 1;
  48   color: #5A5A5A;
  49   line-height: 14px;
  50   flex-direction:column;
  51
  52   &.col-md-6,&.col-md-5{
  53     padding: 0;
  54   }
  55   .tree-header {
  56     display: flex;
  57     justify-content: space-between;
  58
  59     .title-tree {
  60       font-family: OpenSans-SemiBold;
  61       font-size: 16px;
  62       color: #191919;
  63       text-align: left;
  64       text-transform: uppercase;
  65       padding-bottom: 48px;
  66     }
  67     .search-container {
  68       width: 275px;
  69     }
  70   }
  71   .highlight {
  72     background-color: #9DD9EF;
  73   }
  74   .toggle-children-wrapper.toggle-children-wrapper-expanded {
  75     .toggle-children:before {
  76       color: #009FDB;
  77     }
  78   }
  79   .drawing-board-tree {
  80     width: 100%;
  81     padding: 30px 45px;
  82   }
  83
  84   .tree-node-level-1 {
  85     margin-bottom: 10px;
  86   }
  87   tree-viewport {
  88     tree-node {
  89       tree-node-drop-slot {
  90         .node-drop-slot {
  91           display: none;
  92         }
  93       }
  94       & .tree-node-focused,
  95       & .tree-node-active {
  96         & > tree-node-wrapper {
  97           .node-wrapper {
  98             @include highlight-toggle-children;
  99             .node-content-wrapper-focused,
 100             .node-content-wrapper-active {
 101               @include highlight-toggle-children;
 102               @include highlight(#E6F6FB, #009FDB);
 103               .property-name,.instance-type {
 104                 color: #009FDB !important;
 105                 position: relative;
 106               }
 107               .status-properties {
 108                 .status-property-value,.status-property-name {
 109                   color: #009FDB;
 110                 }
 111               }
 112               .icon-browse:before {
 113                 color: #5A5A5A;
 114               }
 115               @include highlight-tree-node-content;
 116             }
 117           }
 118         }
 119       }
 120       & .tree-node-expanded {
 121         > tree-node-wrapper .node-wrapper {
 122           box-shadow: 0 0px 2px rgba(90,90,90,0.24);
 123         }
 124       }
 125
 126       .tree-node-active .tree-children {
 127         //border: 1px solid #009FDB;
 128         padding-left: 45px;
 129       }
 130
 131       .tree-node.tree-node-active.tree-node-expanded {
 132       }
 133
 134       .tree-children .tree-node-leaf .node-wrapper{
 135         margin-left: -5px;
 136       }
 137
 138       .tree-node.tree-node-expanded > tree-node-wrapper{
 139         box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
 140         position: relative;
 141         z-index: 1;
 142         display: block;
 143       }
 144       tree-node-wrapper {
 145         .node-wrapper {
 146           height: 45px;
 147           &:hover {
 148             .node-content-wrapper:not(.node-content-wrapper-focused) {
 149               background: #F2F2F2;
 150               .icon-browse:before {
 151                 color: #5A5A5A;
 152               }
 153               @include highlight-tree-node-content;
 154             }
 155           }
 156           tree-node-expander {
 157             font-family: 'icomoon' !important;
 158             height: 100%;
 159             .failed-msg {
 160
 161             }
 162             .toggle-children-wrapper {
 163               padding: 0;
 164               display: block;
 165               height: 100%;
 166               span.toggle-children {
 167                 display: flex;
 168                 width: 45px;
 169                 padding: 0;
 170                 top: 0;
 171                 height: inherit;
 172                 background-image: none;
 173                 background-color: white;
 174                 border: 1px solid #D2D2D2;
 175                 border-right: none;
 176                 &:before {
 177                   content: "\e900";
 178                   font-size: 20px;
 179                   font-weight: 600;
 180                   text-align: center;
 181                   display: inline-block;
 182                   flex: auto;
 183                   align-self: center;
 184                 }
 185               }
 186             }
 187             .toggle-children-wrapper-expanded {
 188               span.toggle-children {
 189                 transform: none;
 190                 &:before {
 191                   content: "\e930";
 192                 }
 193               }
 194             }
 195             .toggle-children-placeholder {
 196               width:45px;
 197             }
 198           }
 199
 200           .node-content-wrapper {
 201             padding: 0;
 202             background: none;
 203             box-shadow: none;
 204             border-radius: 0;
 205             border: 1px solid #D2D2D2;
 206             height: 100%;
 207             flex: 1;
 208             .resourceGroup {
 209               border: 1px dashed #D2D2D2 !important;
 210             }
 211             tree-node-content {
 212               > div {
 213                 height: 100%;
 214                 display: flex;
 215                 align-items: center;
 216
 217                 .instance-type {
 218                   width: 40px;
 219                   height: 100%;
 220                   padding-top: 16px;
 221                   text-transform: uppercase;
 222                   text-align: center;
 223                   border-right: 1px solid #D2D2D2;
 224                   word-break: break-all;
 225                   color: #959595;
 226                   font-size: 13px;
 227                   font-family: OpenSans-SemiBold;
 228                   .newIcon {
 229                     background: #45B16D;
 230                     position: absolute;
 231                     top: 5%;
 232                     width: 90%;
 233                     left: 5%;
 234                     right: 5%;
 235                     border-radius: 2px;
 236                     height: 5px;
 237                   }
 238                   span {
 239                     width: 40px;
 240                     display: block;
 241                   }
 242                 } > span {
 243                   flex: 1;
 244                   display: block;
 245
 246                   span:nth-child(2) {
 247                     display: block;
 248                   }
 249                 }
 250                 .model-info {
 251                   padding-left: 16px;
 252                   width: 100%;
 253                   .property-name {
 254                     font-family: OpenSans-SemiBold;
 255                     font-size: 13px;
 256                     color: #191919;
 257                     //text-transform: capitalize;  problematic with search
 258                     .auto-name{
 259                       display: inline-flex;//required for search more then one sub highlight,
 260                       font-size: 13px;
 261                     }
 262                     .text_decoration{
 263                       text-decoration: line-through;
 264                     }
 265
 266                     .text_decoration:after {
 267                       height: 10px;
 268                     }
 269                   }
 270                   tree-node-header-properties{
 271                     display: block;
 272                   }
 273                 }
 274                 .scaling {
 275                   background: #4ca90c;
 276                   padding: 5px;
 277                   border-radius: 3px;
 278                   font-family: OpenSans-SemiBold;
 279                   font-size: 12px;
 280                   color: #FFF9F9;
 281                   &.invalid{
 282                     background: #cf2a2a;
 283                   }
 284                   span:first-child{
 285                     margin-right: 3px;
 286                   }
 287                 }
 288                 .model-actions {
 289                   display: flex;
 290                   align-items: center;
 291                   .icon-browse {
 292                     padding: 0;
 293                     width: 30px;
 294                     height: 24px;
 295                     &:before {
 296                       content: "\e924";
 297                       font-size: 24px;
 298                       display: none;
 299                     }
 300                     &:hover:before {
 301                       color: #009FDB;
 302                     }
 303                     &:focus:before,
 304                     &:active:before {
 305                       color: #009FDB;
 306                     }
 307                   }
 308
 309                   .icon-alert {
 310                     padding-right: 10px;
 311                   }
 312                 }
 313               }
 314             }
 315           }
 316         }
 317       }
 318       tree-node-children {
 319         .tree-children {
 320           padding-left: 45px;
 321           .model-info span:first-child {
 322             flex: 1.1 !important;
 323           }
 324         }
 325       }
 326     }
 327   }
 328 }
 329
 330
 331 .tree-node-level-1.tree-node.tree-node-expanded {
 332   .failed-popover-wrap {
 333     left: -50px !important;
 334     position: absolute;
 335   }
 336 }
 337 .tree-node-level-1 {
 338   .failed-popover-wrap {
 339     left: 45px !important;
 340     position: absolute;
 341   }
 342 }
 343
 344 .tree-node-level-2.tree-node.tree-node-leaf {
 345   .failed-popover-wrap {
 346     left: 135px !important;
 347     position: absolute;
 348   }
 349 }
 350
 351 .tree-node-level-1.tree-node.tree-node-collapsed {
 352   .failed-popover-wrap{
 353     left: 0px !important;
 354     position: absolute;
 355   }
 356 }
 357
 358 .failed-msg{
 359   background: #cf2a2a;
 360   padding: 5px;
 361   border-radius: 3px;
 362   font-family: OpenSans-SemiBold;
 363   font-size: 12px;
 364   color: #FFF9F9;
 365 }
 366
 367 .cdk-overlay-pane.ngx-contextmenu {
 368   ul.dropdown-menu {
 369     width: 200px;
 370     box-shadow: none;
 371     padding: 0;
 372     padding-top: 10px;
 373     margin: 0;
 374     border: 1px solid #D2D2D2;
 375     border-top: 3px solid #009FDB;
 376     box-shadow: 0 0px 2px rgba(90,90,90,0.24);
 377     border-radius: 2px;
 378     li {
 379       height: 40px;
 380       a {
 381         font-family: OpenSans-Regular;
 382         display: flex;
 383         align-items: center;
 384         height: 100%;
 385         padding: 12px;
 386         color: #5A5A5A;
 387         &:hover {
 388           background: #E6F6FB;
 389           color:  #009FDB;
 390         }
 391         span {
 392           padding-right: 12px;
 393           &.icon-edit:before {
 394             content: '\e917';
 395           }
 396           &.icon-trash:before {
 397             content: '\e937';
 398           }
 399         }
 400       }
 401     }
 402   }
 403 }
 404
 405