modules/yangui-resources/src/main/resources/yangui/yangui.less

   1 /*PLUGINS importing*/\r
   2 @import 'assets/js/codemirror/lib/codemirror.less';\r
   3 @import 'assets/js/codemirror/theme/eclipse.less';\r
   4 @import 'assets/js/codemirror/theme/eclipse-disabled.less';\r
   5 @import 'assets/js/codemirror/addon/hint/show-hint.less';\r
   6 /*PLUGINS importing END*/\r
   7 \r
   8 @iconsNewRootPath : '../src/app/yangui/assets/images/';\r
   9 \r
  10 /******** WINDOW SCROLLBARS *****/\r
  11 ::-webkit-scrollbar {\r
  12   width: 13px;\r
  13   height: 13px;\r
  14 }\r
  15 \r
  16 ::-webkit-scrollbar-corner {\r
  17   background: #000;\r
  18 }\r
  19 \r
  20 ::-webkit-scrollbar-corner:window-inactive {\r
  21   background: #fff;\r
  22 }\r
  23 \r
  24 ::-webkit-scrollbar-track-piece:disabled {\r
  25   display: none !important;\r
  26 }\r
  27 \r
  28 ::-webkit-scrollbar-button:disabled {\r
  29   display: none !important;\r
  30 }\r
  31 \r
  32 ::-webkit-scrollbar-track:disabled {\r
  33   margin: 6px;\r
  34 }\r
  35 \r
  36 /* Horizontal Scrollbar Styles */\r
  37 \r
  38 ::-webkit-scrollbar:horizontal {\r
  39   background: #b3b2b3;\r
  40 }\r
  41 \r
  42 ::-webkit-scrollbar-thumb:horizontal {\r
  43   background: #807f80;\r
  44   min-width: 20px;\r
  45 }\r
  46 \r
  47 /* Vertical Scrollbar Styles */\r
  48 \r
  49 ::-webkit-scrollbar:vertical {\r
  50   background: #b3b2b3;\r
  51 }\r
  52 \r
  53 \r
  54 ::-webkit-scrollbar-thumb:vertical {\r
  55   background: #807f80;\r
  56   min-height: 20px;\r
  57 }\r
  58 /******** WINDOW SCROLLBARS END *****/\r
  59 \r
  60 .simpleContainer {\r
  61     border: 1px solid #7a7a7a;\r
  62     margin: 5px;\r
  63     padding: 10px;\r
  64     z-index: 11;\r
  65     width:auto;\r
  66     position: relative;\r
  67 \r
  68     &.treeContainer{\r
  69       height: 450px;\r
  70       position: relative;\r
  71     }\r
  72 }\r
  73 \r
  74 /*.previewContainer {\r
  75     border: 2px solid #7a7a7a;\r
  76     margin: 5px;\r
  77     padding: 5px;\r
  78     position: fixed;\r
  79     top: 150px;\r
  80     right: 10px;\r
  81     width: 35%;\r
  82     height: 50%;\r
  83     z-index: 1000;\r
  84     overflow: auto;\r
  85     word-wrap: normal;\r
  86     white-space: pre;\r
  87 }*/\r
  88 \r
  89 .previewContainer{\r
  90   min-width:204px;\r
  91   min-height:97px;\r
  92 }\r
  93 \r
  94 .leaf {\r
  95     margin: 5px;\r
  96     padding-left: 5px;\r
  97     position: relative;\r
  98 }\r
  99 \r
 100 .leaf-label {\r
 101     margin-right: 10px;\r
 102     font-weight: bold;\r
 103     .inlineBlock;\r
 104     /*width: 170px;*/\r
 105     padding-top: 6px;\r
 106     button.iconQuestion{\r
 107       margin-top: -2px;\r
 108     }\r
 109 \r
 110     i.icon-key {\r
 111       font-size: 1.3em;\r
 112       padding-left:  5px;\r
 113     }\r
 114 }\r
 115 \r
 116 .yangInput{\r
 117   border: 2px solid #ebecec;\r
 118   .roundedCorners(0px);\r
 119   margin: 0 3px 0 5px;\r
 120 }\r
 121 \r
 122 .leaf-input {\r
 123   width: 300px;\r
 124   .inlineBlock;\r
 125   border: 2px solid #ebecec;\r
 126   .roundedCorners(0px);\r
 127 }\r
 128 \r
 129 .dataPopup {\r
 130   top: 160px;\r
 131   left: calc(~"100% - 850px");\r
 132   min-height: 322px;\r
 133 \r
 134   .leaf-input {\r
 135     width: 100%;\r
 136   }\r
 137 }\r
 138 \r
 139 INPUT.leaf-input{\r
 140 //  height: 30px;\r
 141 }\r
 142 \r
 143 .clear{\r
 144     clear: both;\r
 145 }\r
 146 \r
 147 .floatRight {\r
 148     position: relative;\r
 149     float: right;\r
 150     display:inline-block;\r
 151 }\r
 152 \r
 153 .btn-slim {\r
 154     font-weight: bold;\r
 155     padding-top: 2px;\r
 156     padding-bottom: 2px;\r
 157 }\r
 158 \r
 159 .btn-filter{\r
 160   margin: 2px 0px;\r
 161 }\r
 162 \r
 163 .btn-filter-high{\r
 164   margin-top: 3px !important;\r
 165 }\r
 166 \r
 167 .btn-filter-right{\r
 168   float: right;\r
 169   margin-left: 15px;\r
 170   margin-bottom: 10px;\r
 171 }\r
 172 \r
 173 input[type="file"].upload-collection{\r
 174   display: inline-block;\r
 175 }\r
 176 \r
 177 .filterBitsIcon{\r
 178   position: absolute !important;\r
 179   left: 130px;\r
 180   bottom: 55px;\r
 181 }\r
 182 \r
 183 .filterBitsValue{\r
 184   margin-top: 10px;\r
 185   margin-bottom: 20px;\r
 186 }\r
 187 \r
 188 .bitCheckbox{\r
 189   float: left;\r
 190   margin: 4px 3px 0px 0px !important;\r
 191 }\r
 192 \r
 193 .form-inline select.form-control.adv-fil-sel{\r
 194   width:80px;\r
 195   height: 34px;\r
 196 \r
 197   background-color: #58595B;\r
 198   color: white;\r
 199   border: 2px solid #ebecec;\r
 200   border-radius: 0px;\r
 201 }\r
 202 \r
 203 \r
 204 .adv-fil-range{\r
 205   width:148px !important;\r
 206 }\r
 207 \r
 208 .iconFilterOver{\r
 209   position: absolute !important;\r
 210   top:  9px;\r
 211   left: -15px;\r
 212 }\r
 213 \r
 214 .btn-red {\r
 215     background: red;\r
 216 }\r
 217 \r
 218 .btn-selected {\r
 219     background: rgb(255,69,0);\r
 220 }\r
 221 \r
 222 /* --------------------------------------------------------------------------------- COMMON OWN RULES */\r
 223 .opacityDeph(@opacity: 0.5){\r
 224   -ms-filter: ~"'progid:DXImageTransform.Microsoft.Alpha(Opacity=" @opacity*100 ~")'";\r
 225   filter: ~"alpha(opacity=" @opacity*100 ~")";\r
 226   -moz-opacity: @opacity;\r
 227   -khtml-opacity: @opacity;\r
 228   opacity: @opacity;\r
 229 }\r
 230 \r
 231 .roundedCorners (@radius: 5px) {\r
 232   -webkit-border-radius: @radius;\r
 233   -moz-border-radius: @radius;\r
 234   -ms-border-radius: @radius;\r
 235   -o-border-radius: @radius;\r
 236   border-radius: @radius;\r
 237 }\r
 238 \r
 239 .transition (@time: 500ms){\r
 240   -webkit-transition: all @time linear;\r
 241   -moz-transition: all @time linear;\r
 242   -ms-transition: all @time linear;\r
 243   -o-transition: all @time linear;\r
 244   transition: all @time linear;\r
 245 }\r
 246 \r
 247 .left{ float: left;}\r
 248 .right{ float: right;}\r
 249 .clear{ clear: both; float: none!important;}\r
 250 .outline{ outline: 0 none;}\r
 251 .block{ display: block;}\r
 252 .blockNone{ display: none;}\r
 253 .displayTable{\r
 254   display: table;\r
 255 }\r
 256 .inlineBlock {\r
 257     display: -moz-inline-stack;\r
 258     display: inline-block;\r
 259     vertical-align: top;\r
 260     zoom: 1;\r
 261     *display: inline;\r
 262 }\r
 263 .classicLink{\r
 264     .outline;\r
 265     text-decoration: none;\r
 266     &:hover{\r
 267         text-decoration: underline;\r
 268     }\r
 269 }\r
 270 .boxSizing{\r
 271   -moz-box-sizing: border-box;\r
 272   -webkit-box-sizing: border-box;\r
 273   box-sizing: border-box;\r
 274 }\r
 275 .mt10{margin-top: 10px;}\r
 276 .mt20{margin-top: 20px;}\r
 277 .mt30{margin-top: 30px;}\r
 278 .mt40{margin-top: 40px;}\r
 279 .mb10{margin-bottom: 10px;}\r
 280 .mb20{margin-bottom: 20px;}\r
 281 .mb30{margin-bottom: 30px;}\r
 282 .mb40{margin-bottom: 40px;}\r
 283 .nmb{margin-bottom: 0!important}\r
 284 .pr30{padding-right: 30px;}\r
 285 .pr40{padding-right: 40px;}\r
 286 .pr50{padding-right: 50px;}\r
 287 .pr60{padding-right: 60px;}\r
 288 .pl30{padding-left: 30px;}\r
 289 .ml20{margin-left: 20px;}\r
 290 .ml30{margin-left: 30px;}\r
 291 \r
 292 .inline{\r
 293   display: inline;\r
 294 }\r
 295 /* --------------------------------------------------------------------------------- COMMON OWN RULES - END */\r
 296 \r
 297 \r
 298 \r
 299 \r
 300 /* --------------------------------------------------------------------------------- YANG UI */\r
 301 .yangUIwrapper{\r
 302 \r
 303   input[type=text]{\r
 304     background-color: #58595B;\r
 305     color: white;\r
 306   }\r
 307 \r
 308   span{\r
 309     color: white;\r
 310   }\r
 311 \r
 312   ::-webkit-scrollbar {\r
 313     width: 10px;\r
 314     height: 10px;\r
 315   }\r
 316 \r
 317   .alert{\r
 318     .roundedCorners(0px);\r
 319 \r
 320     .close{\r
 321       span{\r
 322         color: @text-color;\r
 323       }\r
 324     }\r
 325   }\r
 326 \r
 327   .btn, .form-control{\r
 328     .roundedCorners(3px);\r
 329   }\r
 330 \r
 331   input[type=text].form-control{\r
 332     .roundedCorners(0px);\r
 333   }\r
 334 \r
 335   .btn-orange{\r
 336     background: orange;\r
 337     color: #fff;\r
 338     font-weight: bold;\r
 339   }\r
 340 \r
 341   button.btn-like-tab{\r
 342     //line-height: 1em;\r
 343     outline: 0 none;\r
 344     //height: 30px;\r
 345     margin: 0;\r
 346     border: none;\r
 347     font-weight: bold;\r
 348     background: transparent;\r
 349     .transition(100ms);\r
 350     color: #fff;\r
 351     margin-bottom: 2px;\r
 352     padding-top: 0;\r
 353 \r
 354     &:hover, &.active, &.btn-selected{\r
 355       border-bottom: 2px solid orange;\r
 356       margin-bottom: 0px;\r
 357     }\r
 358 \r
 359   }\r
 360 \r
 361   li.btn-like-tab{\r
 362     line-height: 1em;\r
 363     outline: 0 none;\r
 364     margin: 0;\r
 365     border: none;\r
 366     font-weight: bold;\r
 367     .transition(100ms);\r
 368     color: buttontext;\r
 369     background: transparent;\r
 370 \r
 371     &.btn-selected, &:hover{\r
 372       border-bottom: 2px solid orange;\r
 373     }\r
 374   }\r
 375 \r
 376   .form-control {\r
 377     &.inline {\r
 378       width: 100px;\r
 379       display: inline;\r
 380     }\r
 381   }\r
 382 \r
 383   .btn-primary{\r
 384     font-weight: bold;\r
 385     background: #fff;\r
 386     .roundedCorners(0px);\r
 387     .transition(100ms);\r
 388     color: buttontext;\r
 389     border-bottom: 3px solid orange;\r
 390     border-width: 0 0 3px 0;\r
 391 \r
 392     &:hover{\r
 393       background: orange;\r
 394       color: #fff;\r
 395     }\r
 396 \r
 397     &.btn-selected{\r
 398       background: #ffa500;\r
 399     }\r
 400 \r
 401     &.disabled, &[disabled] {\r
 402       background: #ebecec;\r
 403       cursor: not-allowed;\r
 404       pointer-events: none;\r
 405       opacity: 0.65;\r
 406       filter: alpha(opacity=65);\r
 407       -webkit-box-shadow: none;\r
 408       box-shadow: none;\r
 409     }\r
 410 \r
 411     &:focus {\r
 412       background: #ebecec;\r
 413       color: buttontext;\r
 414     }\r
 415   }\r
 416 }\r
 417 \r
 418 \r
 419 \r
 420 .leaflist{\r
 421     .leafListValue{\r
 422         margin-top: 5px;\r
 423         margin-left: 10px;\r
 424         input[type=text], button{\r
 425             .inlineBlock;\r
 426         }\r
 427         input[type=text]{\r
 428             width: 20%;\r
 429             border: 2px solid #ebecec;\r
 430             /*background-color: #414042;*/\r
 431             .roundedCorners(0px);\r
 432         }\r
 433         button{\r
 434             margin-top: 4px;\r
 435             margin-left: 5px;\r
 436         }\r
 437     }\r
 438 }\r
 439 \r
 440 .mainTabsWrapper{\r
 441 \r
 442   .simpleContainer{\r
 443     margin: 5px 0;\r
 444 \r
 445     &.treeContainer{\r
 446       margin-top: 0;\r
 447     }\r
 448   }\r
 449 \r
 450   .nav-tabs{\r
 451     border-bottom: 0;\r
 452     margin: 0 5px;\r
 453 \r
 454     li{\r
 455       .roundedCorners(0px);\r
 456       margin-right: 3px;\r
 457 \r
 458       &:hover{\r
 459         // background-color: #e4e6e9;\r
 460       }\r
 461 \r
 462       a{\r
 463         background: none;\r
 464         border: 0;\r
 465         .outline;\r
 466       }\r
 467     }\r
 468   }\r
 469 \r
 470   .tab-panel{\r
 471     height: 100%;\r
 472   }\r
 473 \r
 474 }\r
 475 \r
 476 .treeWrapper{\r
 477   height: calc(~"100% - 20px");\r
 478   margin: 10px 0;\r
 479 \r
 480   .treeList{\r
 481     margin: 10px 0;\r
 482     height: calc(~"100% - 40px");\r
 483     overflow-y: auto;\r
 484   }\r
 485 }\r
 486 \r
 487 .actionBtnApiPathWrapper{\r
 488 \r
 489   &.simpleContainer{\r
 490     margin: 5px 0;\r
 491   }\r
 492 \r
 493   &.is-sticky{\r
 494     width: 100%;\r
 495     .boxSizing;\r
 496     padding: 0 20px 0 270px;\r
 497     right: 0;\r
 498     z-index: 100;\r
 499     margin: 0;\r
 500     border: 0;\r
 501 \r
 502     div.in{\r
 503       border: 1px solid #7a7a7a;\r
 504       background: #414042;\r
 505       padding-left: 15px;\r
 506       padding-top: 10px;\r
 507       }\r
 508   }\r
 509 \r
 510 }\r
 511 \r
 512 label.classic{\r
 513   color: #fff;\r
 514   min-width: 120px;\r
 515 }\r
 516 \r
 517 .actionButtons, .api{\r
 518   white-space: nowrap;\r
 519   overflow-x: auto;\r
 520   max-width: 100%;\r
 521   //padding-bottom: 10px;\r
 522   height: 50px;\r
 523 \r
 524   input[type="text"]{\r
 525     width: 150px;\r
 526     display: inline!important;\r
 527     margin: 0 5px;\r
 528     height: 34px;\r
 529     .roundedCorners(0px);\r
 530     border: 0;\r
 531   }\r
 532 \r
 533   label.classic{\r
 534     min-width: 90px;\r
 535   }\r
 536 \r
 537   span.input-sm{\r
 538     line-height: 34px;\r
 539     .inlineBlock;\r
 540     padding: 0 10px;\r
 541   }\r
 542 \r
 543   .input-sm{\r
 544     height: 34px;\r
 545     display: inline;\r
 546     line-height: 34px;\r
 547     background: @text-color;\r
 548     color: #fff;\r
 549     border: 0;\r
 550     width: 100px;\r
 551     -webkit-border-radius: 3px 0 0 3px;\r
 552     border-radius: 3px 0 0 3px;\r
 553   }\r
 554 \r
 555   .btn{\r
 556     display: inline;\r
 557   }\r
 558 \r
 559   .pathWrapper{\r
 560     //display: inline;\r
 561     .inlineBlock;\r
 562     background: #58595B;\r
 563     padding: 0 5px;\r
 564     margin-right: 5px;\r
 565     height: 34px;\r
 566     -webkit-border-radius: 0px 3px 3px 0px;\r
 567     border-radius: 0px 3px 3px 0px;\r
 568 \r
 569     input[type=text]{\r
 570       border: 2px solid #ebecec;\r
 571     }\r
 572 \r
 573     .pathElem{\r
 574       line-height: 33px;\r
 575     }\r
 576   }\r
 577 \r
 578   div.in{\r
 579     padding: 0 10px;\r
 580   }\r
 581 }\r
 582 \r
 583 //.api{\r
 584 //  .input-sm{\r
 585 //    padding-top: 0;\r
 586 //    padding-bottom: 0;\r
 587 //    font-weight: bold;\r
 588 //    width: auto;\r
 589 //  }\r
 590 //}\r
 591 \r
 592 .dataPopupWrapper{\r
 593   position: relative;\r
 594   .dataPopup{\r
 595     position: absolute;\r
 596     right: auto;\r
 597   }\r
 598 }\r
 599 \r
 600 .nav-tabs li a{\r
 601   cursor: pointer;\r
 602 }\r
 603 \r
 604 div.overlay{\r
 605   position: fixed;\r
 606   z-index: 1;\r
 607   width: 100%;\r
 608   height: 100%;\r
 609   background: rgba(0,0,0,0.5);\r
 610   top: 0;\r
 611   left: 0;\r
 612 }\r
 613 \r
 614 div.popUpWrapperFix{\r
 615   position: fixed;\r
 616   //width: calc(~"100% - 250px");\r
 617   height: 100%;\r
 618   //margin-left: 250px;\r
 619   z-index: 11;\r
 620   top: 0;\r
 621   left: 0;\r
 622 }\r
 623 \r
 624 .collBox{\r
 625   position: absolute;\r
 626   width: 450px;\r
 627   top: 50%;\r
 628   left: 50%;\r
 629   margin-left: -225px;\r
 630   margin-top: -127px;\r
 631   z-index: 5;\r
 632 }\r
 633 \r
 634 div.requestActions{\r
 635   width: 150px;\r
 636   position: relative;\r
 637 \r
 638   .historyRequestBox{\r
 639     position: relative;\r
 640 \r
 641     .changeGroup{\r
 642         left: -365px;\r
 643     }\r
 644   }\r
 645 }\r
 646 \r
 647 .paramBox{\r
 648     position: absolute;\r
 649     width: 450px;\r
 650     top: 0;\r
 651     left: -360px;\r
 652     z-index: 1;\r
 653     left: 50%;\r
 654     top: 50%;\r
 655     margin-left: -225px;\r
 656     margin-top: -98px;\r
 657 \r
 658     .close{\r
 659       position: absolute;\r
 660       top: 5px;\r
 661       right: 5px;\r
 662       color: #C4C4C4;\r
 663       z-index: 1;\r
 664     }\r
 665 }\r
 666 \r
 667 .parameterEditBox{\r
 668   position: relative;\r
 669 }\r
 670 \r
 671 div.mountPoints{\r
 672   // color: #fff!important;\r
 673   height: auto;\r
 674   min-height: 0;\r
 675   .leaf-label{\r
 676     cursor:pointer;\r
 677   }\r
 678   .mpInner{\r
 679     overflow-y: scroll;\r
 680     margin-top: 20px;\r
 681     height: 100%;\r
 682     margin-bottom: 20px;\r
 683     .mpApi{\r
 684       padding-right: 10px;\r
 685       a{\r
 686         color: #FFFFFF !important;\r
 687         display: block;\r
 688         padding-top: 3px;\r
 689         padding-bottom: 3px;\r
 690         &:hover{\r
 691           background: #808285;\r
 692         text-decoration: none;\r
 693         cursor: pointer;\r
 694         .roundedCorners(4px);\r
 695           /*i, span{\r
 696             color: @blue;\r
 697           }*/\r
 698       }\r
 699         &.mpApiLink{\r
 700         font-weight: bold;\r
 701         padding-left: 10px;\r
 702       }\r
 703       }\r
 704       span{\r
 705         padding-left: 5px;\r
 706       }\r
 707       .mpSubApi{\r
 708         a{\r
 709           padding-left: 30px;\r
 710         }\r
 711       }\r
 712     }\r
 713   }\r
 714 }\r
 715 \r
 716 /* --------------------------------------------------------------------------------- YANG UI - END */\r
 717 \r
 718 \r
 719 \r
 720 \r
 721 \r
 722 /* --------------------------------------------------------------------------------- YANG UI TREE */\r
 723 \r
 724 .listContainer{\r
 725   position: relative;\r
 726 }\r
 727 \r
 728 .listModal{\r
 729   position: absolute;\r
 730   top: 0px;\r
 731   margin: 0 0 0 20px!important;\r
 732   left: 100%;\r
 733   background: #393939;\r
 734   z-index: 99;\r
 735   /*width: 245px;*/\r
 736   .btn{\r
 737     /*width: 200px;*/\r
 738   }\r
 739   button.iconView{\r
 740     position: absolute;\r
 741     left: 0px;\r
 742     top: 0;\r
 743     margin: 0;\r
 744   }\r
 745   li{\r
 746     margin: 5px 0;\r
 747     position: relative;\r
 748     .btn-remove,.btn-filter-active{\r
 749       position: absolute;\r
 750       right: 29px;\r
 751       top: 0;\r
 752       margin: 0;\r
 753     }\r
 754     .btn-filter-active{\r
 755       right: 20px;\r
 756     }\r
 757     .btn-double-index{\r
 758       position: absolute;\r
 759       right: 3px;\r
 760       top: 0;\r
 761       margin: 0;\r
 762     }\r
 763     .btn-view{\r
 764       position: absolute;\r
 765       left: 0px;\r
 766       top: 0;\r
 767     }\r
 768 \r
 769   }\r
 770   ul{\r
 771     padding: 0 15px 0 10px;\r
 772   }\r
 773   button.close{\r
 774     position: absolute;\r
 775     top: 0px;\r
 776     right: 5px;\r
 777     color: #ebecec;\r
 778     opacity: 1;\r
 779   }\r
 780   .listWrapper{\r
 781     overflow-y: scroll;\r
 782     max-height: 200px;\r
 783   }\r
 784 \r
 785   &.augmentationModal{\r
 786     padding-left: 15px;\r
 787     left: -6px;\r
 788     top: -10px;\r
 789     border: 1px solid #7a7a7a;\r
 790   }\r
 791 }\r
 792 \r
 793 .popupContainer{\r
 794   background: #414042;\r
 795   border: 1px solid #7a7a7a;\r
 796   border-radius: 5px;\r
 797   padding: 20px;\r
 798 }\r
 799 \r
 800 .historyPopUp{\r
 801   height: 100%;\r
 802   color: #fff;\r
 803 \r
 804   .groupWrapper{\r
 805     .groupHeader{\r
 806       font-weight: bold;\r
 807       border-bottom: 2px solid #dddddd;\r
 808       padding: 8px;\r
 809       cursor: pointer;\r
 810     }\r
 811   }\r
 812 \r
 813 \r
 814   .tableWrapper{\r
 815     margin-bottom: 10px;\r
 816     max-height: calc(~"100% - 51px");\r
 817     height: 90000px;\r
 818 \r
 819     .reqHistory,.reqParams{\r
 820 \r
 821       width:100%;\r
 822       height: 100%;\r
 823       display:block;\r
 824 \r
 825       .tddiv{\r
 826         /*border: 1px dotted brown;*/\r
 827         display: inline-block;\r
 828       }\r
 829 \r
 830       .thdiv{\r
 831         border-bottom: 2px solid #dddddd;\r
 832 \r
 833         .tddiv{\r
 834           padding: 8px;\r
 835           text-align: left;\r
 836           vertical-align: bottom;\r
 837           font-weight: bold;\r
 838         }\r
 839 \r
 840         .rh-col3{\r
 841           width: calc(~"100% - 660px");\r
 842         }\r
 843 \r
 844         .rh-col3c{\r
 845           width: calc(~"100% - 804px");\r
 846         }\r
 847       }\r
 848 \r
 849       .scroll{\r
 850         overflow-y: auto;\r
 851         position: relative;\r
 852         height: calc(~"100% - 50px");\r
 853       }\r
 854 \r
 855 \r
 856       .trdiv{\r
 857         border-top: 2px solid #dddddd;\r
 858 \r
 859         &:first-child{\r
 860           border-top: 0;\r
 861         }\r
 862 \r
 863         &.no-border{\r
 864           border: 0;\r
 865         }\r
 866         .tddiv{\r
 867           padding: 8px;\r
 868           text-align: left;\r
 869           vertical-align: top;\r
 870           word-wrap: break-word;\r
 871           line-height: 26px;\r
 872         }\r
 873         &.pre-div{\r
 874           position: relative;\r
 875           border: 0;\r
 876           margin: 10px 0 20px;\r
 877           padding: 0px 10px;\r
 878 \r
 879           button.close{\r
 880             color: #000;\r
 881             right: 30px;\r
 882             top: 10px;\r
 883             z-index: 3;\r
 884             width: 15px;\r
 885             height: 15px;\r
 886             background: transparent url('@{iconsNewRootPath}icon-close-small.png') no-repeat center center;\r
 887             .opacityDeph(1);\r
 888 \r
 889             &:before{\r
 890               content: "";\r
 891             }\r
 892 \r
 893             &:hover{\r
 894               background-position: center center!important;\r
 895               .opacityDeph(1);\r
 896             }\r
 897           }\r
 898 \r
 899           button.white-cross{\r
 900             color: #fff;\r
 901           }\r
 902 \r
 903           .textareaWrapper{\r
 904             position: relative;\r
 905             border: 1px solid silver;\r
 906 \r
 907             span{\r
 908               color: auto;\r
 909             }\r
 910 \r
 911             pre span{\r
 912                 color: auto;\r
 913             }\r
 914 \r
 915 \r
 916             textarea{\r
 917               width: 100%;\r
 918               min-height: 50px;\r
 919               overflow-y: scroll;\r
 920               height: 200px;\r
 921               max-width: 100%;\r
 922             }\r
 923 \r
 924             .paramsBox{\r
 925               position: absolute;\r
 926               right: 55px;\r
 927               top: 12px;\r
 928 \r
 929               z-index: 4;\r
 930               color: @text-color;\r
 931 \r
 932               .line{\r
 933                 color: @text-color;\r
 934                 padding: 4px 30px 4px 20px;\r
 935                 background: #cdcdce;\r
 936                 margin-bottom: 1px;\r
 937                 font-size: 12px;\r
 938               }\r
 939 \r
 940               span{\r
 941                 color: @text-color;\r
 942               }\r
 943 \r
 944             }\r
 945           }\r
 946         }\r
 947       }\r
 948 \r
 949       .rh-col1{\r
 950         width: 27px;\r
 951       }\r
 952       .rh-col2{\r
 953         width: 90px;\r
 954       }\r
 955       .rh-col3{\r
 956         width: calc(~"100% - 641px");\r
 957       }\r
 958       .rh-col3c{\r
 959         width: calc(~"100% - 786px");\r
 960         min-width: 100px;\r
 961       }\r
 962       .rh-col4{\r
 963         width: 80px;\r
 964       }\r
 965       .rh-col5{\r
 966         width: 110px;\r
 967       }\r
 968       .rh-col6{\r
 969         width: 140px;\r
 970       }\r
 971       .rh-col7{\r
 972         width: 170px;\r
 973       }\r
 974       .rh-col8{\r
 975         width: 140px;\r
 976       }\r
 977     }\r
 978 \r
 979 \r
 980     .reqParams {\r
 981 \r
 982       .thdiv{\r
 983         .rh-col3{\r
 984           width: calc(~"100% - 450px");\r
 985         }\r
 986       }\r
 987 \r
 988       .rh-col2{\r
 989         width: 235px;\r
 990       }\r
 991       .rh-col3{\r
 992         width: calc(~"100% - 433px");\r
 993       }\r
 994       .rh-col4{\r
 995         width: 100px;\r
 996       }\r
 997     }\r
 998   }\r
 999 \r
1000   .btn-like-tab{\r
1001     .roundedCorners(0);\r
1002     margin-left: 2px;\r
1003   }\r
1004 \r
1005   .nav-tabs li a{\r
1006     margin-right: 0;\r
1007   }\r
1008 \r
1009   td{\r
1010     textarea{\r
1011       width: 100%;\r
1012       min-height: 400px;\r
1013     }\r
1014   }\r
1015 \r
1016   table{\r
1017     color: #fff;\r
1018     th{\r
1019       &.actions{\r
1020         width: 150px;\r
1021       }\r
1022     }\r
1023   }\r
1024   pre{\r
1025     position: relative;\r
1026     button.close{\r
1027       color: #000;\r
1028     }\r
1029   }\r
1030 }\r
1031 \r
1032 .topologyContainer{\r
1033   position: fixed !important;\r
1034   width: 800px;\r
1035   height: 500px;\r
1036   top: 150px;\r
1037   left: calc(~"100% - 900px");\r
1038   // z-index: 1100;\r
1039   overflow: hidden;\r
1040   background: #393939;\r
1041   border: 1px solid #7a7a7a;\r
1042   padding: 20px;\r
1043   z-index: 15;\r
1044   button.close{\r
1045     position: absolute;\r
1046     top: 5px;\r
1047     right: 5px;\r
1048     color: #C4C4C4;\r
1049     z-index: 1;\r
1050   }\r
1051   .graph-frame{\r
1052     width: 100%!important;\r
1053   }\r
1054   #graph-container{\r
1055     min-height: 460px;\r
1056     padding: 0;\r
1057     background: #414042;\r
1058   }\r
1059   &.previewContainer{\r
1060     width: 40%;\r
1061     height: 40%;\r
1062     .previewWrapper{\r
1063       overflow-y: scroll;\r
1064       min-height: 30px;\r
1065       min-width: 162px;\r
1066       height: calc(~"100% - 25px");\r
1067 \r
1068       pre{\r
1069         -webkit-border-radius: 0;\r
1070         border-radius: 0;\r
1071         margin: 0;\r
1072         min-height:100%;\r
1073       }\r
1074     }\r
1075     .restUrl{\r
1076       margin-bottom: 10px;\r
1077       .title{\r
1078         display: block;\r
1079       }\r
1080     }\r
1081     &.dataPopup{\r
1082       min-width: 320px;\r
1083       textarea{\r
1084         width: 100%;\r
1085         min-height: 150px;\r
1086         margin: 0px 0 10px;\r
1087         resize: none;\r
1088         height: calc(~"100% - 130px");\r
1089       }\r
1090       input{\r
1091         margin: 0px 0 10px;\r
1092       }\r
1093     }\r
1094   }\r
1095 }\r
1096 \r
1097 .mountPointsContainer{\r
1098  background: #393939;\r
1099   border: 1px solid #7a7a7a;\r
1100   border-radius: 5px;\r
1101   padding: 20px;\r
1102   position: fixed !important;\r
1103   width: 430px;\r
1104   height: 45%;\r
1105   min-height: 215px;\r
1106   min-width: 430px;\r
1107   top: 150px;\r
1108   left: calc(~"100% - 700px");\r
1109   z-index: 100;\r
1110   //overflow: hidden;\r
1111 \r
1112   button.close{\r
1113     position: absolute;\r
1114     top: 5px;\r
1115     right: 5px;\r
1116     color: #C4C4C4;\r
1117   }\r
1118 \r
1119   i.icon-refresh {\r
1120     color: white;\r
1121   }\r
1122 }\r
1123 \r
1124 i.icon-spinner{\r
1125   margin: 3px 3px 0px 0px;\r
1126 }\r
1127 \r
1128 .alertInner{\r
1129   margin-bottom: 10px;\r
1130   span{\r
1131     margin-left: 10px;\r
1132   }\r
1133 }\r
1134 \r
1135 .modalWrapper{\r
1136   position: relative;\r
1137   .inlineBlock;\r
1138   /*z-index: 20;*/\r
1139 }\r
1140 \r
1141 .list-title{\r
1142   line-height: 14px;\r
1143   margin-bottom: 10px;\r
1144 }\r
1145 \r
1146 .customContainer{\r
1147   border-left: 1px solid #7a7a7a;\r
1148   margin: 35px 5px 5px 15px;\r
1149   padding: 5px;\r
1150   /*z-index: 10;*/\r
1151   width:auto;\r
1152   position: relative;\r
1153   &.withoutBorder{\r
1154     border-left: 0;\r
1155     padding-bottom: 0;\r
1156     .treeBullet.containerBullet{\r
1157       left: -25px;\r
1158       top: -25px;\r
1159     }\r
1160   }\r
1161 }\r
1162 \r
1163 \r
1164 \r
1165 .btn-show-custom{\r
1166   width: 22px;\r
1167   line-height: 22px;\r
1168   -webkit-border-radius: 11px;\r
1169   border-radius: 11px;\r
1170   text-align: center;\r
1171   padding: 0!important;\r
1172 }\r
1173 \r
1174 .btn-double-index{\r
1175   /*cursor: auto;\r
1176   &:hover, &:focus{\r
1177     background: #d9534f!important;\r
1178     border-color: #d9534f!important;\r
1179   }*/\r
1180 }\r
1181 \r
1182 .btn-view{\r
1183   cursor: auto;\r
1184   &:hover, &:focus{\r
1185     background: orange!important;\r
1186     border-color: orange!important;\r
1187   }\r
1188 }\r
1189 \r
1190 .topContainerPart{\r
1191   margin-left: -19px;\r
1192   margin-top: -28px;\r
1193   margin-bottom: 10px;\r
1194 }\r
1195 \r
1196 .listItemWrapper{\r
1197   margin: 0 10px 0 20px;\r
1198   .inlineBlock;\r
1199   .listButtonWrapper{\r
1200     margin: 2px 15px 0 5px;\r
1201     .inlineBlock;\r
1202 \r
1203     button.yangButton{\r
1204       margin: 0px;\r
1205     }\r
1206 \r
1207     &:last-child{\r
1208       margin-right: 0;\r
1209     }\r
1210 \r
1211 \r
1212 \r
1213     .iconClose, .iconDanger{\r
1214       padding: 0;\r
1215     }\r
1216 \r
1217     // button.yangButton{\r
1218     //   margin: 4px 0;\r
1219     // }\r
1220 \r
1221     // .iconDanger{\r
1222     //   width: 10px;\r
1223     //   margin: 4px 0;\r
1224     //   height: 24px;\r
1225     //   border: 0;\r
1226     // }\r
1227     // .iconClose{\r
1228     //   width: 16px;\r
1229     // }\r
1230   }\r
1231 }\r
1232 \r
1233 .btn-name{\r
1234   -webkit-border-radius: 5px;\r
1235   border-radius: 5px;\r
1236   background: transparent;\r
1237   font-weight: bold;\r
1238   color: #ebecec;\r
1239   border: 2px solid #ebecec;\r
1240   cursor: auto;\r
1241 }\r
1242 \r
1243 .borderArrow{\r
1244   color: #7a7a7a;\r
1245   position: absolute;\r
1246   bottom: -6px;\r
1247   left: -6px;\r
1248   font-size: 1.3em;\r
1249 }\r
1250 \r
1251 .btn.btn-arrow{\r
1252   /*font-size: 12px;*/\r
1253 }\r
1254 \r
1255 .treeBullet{\r
1256   font-size: 25px;\r
1257   color: #7a7a7a;\r
1258   position: absolute;\r
1259   left: -15px;\r
1260   top: 0;\r
1261   &.containerBullet{\r
1262 /*    margin: 0 0px 0 -14px;\r
1263     line-height: 25px;*/\r
1264     top: -25px;\r
1265     left: -25px;\r
1266   }\r
1267 }\r
1268 \r
1269 .tooltip-inner{\r
1270   color: #fff;\r
1271   white-space: pre-wrap;      /* CSS3 */\r
1272   white-space: -moz-pre-wrap; /* Firefox */\r
1273   white-space: -pre-wrap;     /* Opera <7 */\r
1274   white-space: -o-pre-wrap;   /* Opera 7 */\r
1275   word-wrap: break-word;      /* IE */\r
1276 }\r
1277 \r
1278 .listElemButton{\r
1279   /*max-width: 250px;*/\r
1280   /*overflow: hidden;*/\r
1281 }\r
1282 \r
1283 .listFilterWindow{\r
1284   left: -6px;\r
1285   top: -10px;\r
1286   border: 2px solid #ebecec;\r
1287 }\r
1288 \r
1289 .filterContainer .leaf{\r
1290   min-width: 585px;\r
1291 }\r
1292 \r
1293 .filterContainer{\r
1294   margin-top:20px;\r
1295   margin-right: 40px;\r
1296   margin-bottom: 20px;\r
1297 }\r
1298 \r
1299 .filterContainer .col-md-2{\r
1300   width: 150px;\r
1301 }\r
1302 /* --------------------------------------------------------------------------------- YANG UI TREE - END */\r
1303 \r
1304 \r
1305 \r
1306 \r
1307 \r
1308 \r
1309 \r
1310 \r
1311 @iconsRootPath : 'images/yang-ui-icons/';\r
1312 /* --------------------------------------------------------------------------------- YANG UI BUTTONS */\r
1313 button, div{\r
1314   &.yangButton{\r
1315     cursor: pointer;\r
1316     position: relative;\r
1317     width: 24px;\r
1318     height: 24px;\r
1319     border: 0;\r
1320     margin: 2px;\r
1321     .inlineBlock;\r
1322     &.iconClose{\r
1323       opacity: 1;\r
1324       width: 24px;\r
1325       background: transparent url('@{iconsRootPath}icon-close.png') no-repeat center top;\r
1326 \r
1327       &.active{\r
1328         background-position: 0 -24px!important;\r
1329       }\r
1330     }\r
1331     &.closeData{\r
1332       position: absolute;\r
1333       top: 5px;\r
1334       right: 22px;\r
1335     }\r
1336     &.iconNext{\r
1337       background: transparent url('@{iconsRootPath}icon-next.png') no-repeat center top;\r
1338       &.disabled{\r
1339         background-position: center top!important;\r
1340         .opacityDeph(0.6);\r
1341       }\r
1342     }\r
1343     &.iconPlus{\r
1344       background: transparent url('@{iconsRootPath}icon-plus.png') no-repeat center top;\r
1345     }\r
1346     &.iconChangeGroup{\r
1347       background: transparent url('@{iconsRootPath}icon-expand-bits.png') no-repeat center top;\r
1348     }\r
1349     &.iconArrowUp{\r
1350       background: transparent url('@{iconsRootPath}icon-arrow-up.png') no-repeat center top;\r
1351     }\r
1352     &.iconArrowDown{\r
1353       background: transparent url('@{iconsRootPath}icon-arrow-down.png') no-repeat center top;\r
1354     }\r
1355     &.iconFillData{\r
1356       background: transparent url('@{iconsRootPath}icon-fill-data.png') no-repeat center top;\r
1357       &.disabled{\r
1358         background-position: center top!important;\r
1359         .opacityDeph(0.6);\r
1360       }\r
1361     }\r
1362     &.iconArrowRight{\r
1363       background: transparent url('@{iconsRootPath}icon-arrow-right.png') no-repeat center top;\r
1364     }\r
1365     &.iconFilterEmpty{\r
1366       background: transparent url('@{iconsRootPath}icon-filter-empty.png') no-repeat center top;\r
1367     }\r
1368     &.iconFilterFull{\r
1369       background: transparent url('@{iconsRootPath}icon-filter-full.png') no-repeat center top;\r
1370     }\r
1371     &.iconFilterFullBck{\r
1372       background: transparent url('@{iconsRootPath}icon-filter-full.png') no-repeat center top;\r
1373     }\r
1374     &.iconList{\r
1375       background: transparent url('@{iconsRootPath}icon-list.png') no-repeat center top;\r
1376     }\r
1377     &.iconListBck{\r
1378       background: transparent url('@{iconsRootPath}icon-list-bck.png') no-repeat center top;\r
1379     }\r
1380     &.iconQuestion{\r
1381       background: transparent url('@{iconsRootPath}icon-question.png') no-repeat center top;\r
1382     }\r
1383     &.iconExpandBits{\r
1384       background: transparent url('@{iconsRootPath}icon-expand-bits.png') no-repeat center top;\r
1385     }\r
1386     &.iconCollapseBits{\r
1387       background: transparent url('@{iconsRootPath}icon-collapse-bits.png') no-repeat center top;\r
1388     }\r
1389     &.iconPrev{\r
1390       background: transparent url('@{iconsRootPath}icon-prev.png') no-repeat center top;\r
1391     }\r
1392     &.iconEdit{\r
1393       /*background: none;\r
1394       span{\r
1395         vertical-align: text-top;\r
1396       }*/\r
1397       background: transparent url('@{iconsRootPath}icon-edit.png') no-repeat center top;\r
1398     }\r
1399     &.iconDanger{\r
1400       background: transparent url('@{iconsRootPath}icon-danger.png') no-repeat center top;\r
1401       &:hover{\r
1402         background-position: 0 0!important;\r
1403       }\r
1404     }\r
1405     &.iconView{\r
1406       background: transparent url('@{iconsRootPath}icon-view.png') no-repeat center top;\r
1407       &:hover{\r
1408         background-position: 0 0!important;\r
1409       }\r
1410     }\r
1411     &:hover{\r
1412       background-position: 0 -24px!important;\r
1413     }\r
1414     /*&:hover{\r
1415       .opacityDeph(0.8);\r
1416     }*/\r
1417   }\r
1418 }\r
1419 \r
1420 .augmentIcon{\r
1421   .inlineBlock;\r
1422   background: transparent;\r
1423   font-weight: bold;\r
1424   color: #ebecec;\r
1425   border: 2px solid #ebecec;\r
1426   cursor: pointer;\r
1427   width: 26px;\r
1428   height: 26px;\r
1429   line-height: 22px;\r
1430   .boxSizing;\r
1431   .roundedCorners(13px);\r
1432   text-align: center;\r
1433   margin-left: 5px;\r
1434 \r
1435   &:hover, &.active{\r
1436     color: #000;\r
1437     border-color: orange;\r
1438     background: orange;\r
1439   }\r
1440 \r
1441   &.reversed{\r
1442     color: #F5F5F5;\r
1443     // background: #393939;\r
1444     border-color:orange;\r
1445     width: 20px;\r
1446     height: 20px;\r
1447     line-height: 16px;\r
1448     margin-top: 4px;\r
1449     font-size: 12px;\r
1450   }\r
1451 }\r
1452 \r
1453 .modalIconOver{\r
1454   position: absolute!important;\r
1455   top: 9px;\r
1456   left: -16px;\r
1457 }\r
1458 /* --------------------------------------------------------------------------------- YANG UI BUTTONS - END */\r
1459 \r
1460 \r
1461 \r
1462 /* --------------------------------------------------------------------------------- YANG UI TYPE UNION */\r
1463 .unionType.tabs{\r
1464   margin: 10px 0;\r
1465 \r
1466   .nav-tabs{\r
1467     border: 0;\r
1468 \r
1469     li{\r
1470       margin-right: 2px;\r
1471 \r
1472       a{\r
1473         border: 0;\r
1474       }\r
1475 \r
1476       &.btn-selected, &:hover{\r
1477 \r
1478         a{\r
1479           background: transparent;\r
1480         }\r
1481       }\r
1482     }\r
1483   }\r
1484 \r
1485   div.tab-content{\r
1486     margin: 0;\r
1487   }\r
1488 }\r
1489 /* --------------------------------------------------------------------------------- YANG UI TYPE UNION - END */\r
1490 \r
1491 \r
1492 @media screen and (max-height: 700px) {\r
1493   .topologyContainer.previewContainer.historyPopUp{\r
1494     height: 80%;\r
1495 \r
1496     .tab-content{\r
1497       height: 82%;\r
1498       .tab-pane{\r
1499         height: 100%;\r
1500       }\r
1501     }\r
1502 \r
1503     .tabs{\r
1504       height: 95%;\r
1505     }\r
1506 \r
1507     .tab-pane .tableWrapper{\r
1508       max-height: 100%;\r
1509       height: 100%;\r
1510     }\r
1511   }\r
1512 }\r
1513 \r
1514 .resizable-s {\r
1515   > .ui-resizable-e{\r
1516     display: none!important;\r
1517   }\r
1518 \r
1519   > .ui-resizable-se{\r
1520     display: none!important;\r
1521   }\r
1522 }\r
1523 \r
1524 \r
1525 \r
1526 .ui-resizable-handle {\r
1527   &.ui-resizable-se{\r
1528     width: 20px;\r
1529     height: 20px;\r
1530     position: absolute;\r
1531     background: transparent url('images/resize_handle.gif') no-repeat;\r
1532     cursor: se-resize;\r
1533   }\r
1534 }\r
1535 \r
1536 \r
1537 .ui-resizable-s {\r
1538   cursor: s-resize;\r
1539   height: 7px;\r
1540   width: 100%;\r
1541   bottom: 0px;\r
1542   position: absolute;\r
1543   left: 0;\r
1544 }\r
1545 \r
1546 .ui-resizable-se {\r
1547   right: 5px;\r
1548   bottom: 5px;\r
1549 }\r
1550 \r
1551 .mountPointsWrapper {\r
1552   height: calc(~"100% - 45px");\r
1553 }\r