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

   1 .topologyContainer {\r
   2     position: absolute!important;\r
   3     width: 800px;\r
   4     height: 500px;\r
   5     top: 150px;\r
   6     left: calc(~"100% - 900px");\r
   7     z-index: 1100;\r
   8     overflow: hidden;\r
   9 }\r
  10 \r
  11 .simpleContainer {\r
  12     border: 1px solid #7a7a7a;\r
  13     margin: 5px;\r
  14     border-radius: 5px;\r
  15     padding: 5px;\r
  16     z-index: 10;\r
  17     width:auto;\r
  18 }\r
  19 \r
  20 /*.previewContainer {\r
  21     border: 2px solid #7a7a7a;\r
  22     margin: 5px;\r
  23     padding: 5px;\r
  24     position: fixed;\r
  25     top: 150px;\r
  26     right: 10px;\r
  27     width: 35%;\r
  28     height: 50%;\r
  29     z-index: 1000;\r
  30     overflow: auto;\r
  31     word-wrap: normal;\r
  32     white-space: pre;\r
  33 }*/\r
  34 \r
  35 .leaf {\r
  36     margin: 5px;\r
  37     padding-left: 5px;\r
  38     position: relative;\r
  39 }\r
  40 \r
  41 .leaf-label {\r
  42     margin-right: 10px;\r
  43     font-weight: bold;\r
  44     .inlineBlock;\r
  45     /*width: 170px;*/\r
  46     padding-top: 6px;\r
  47     button.iconQuestion{\r
  48       margin-top: -2px;\r
  49     }\r
  50 }\r
  51 \r
  52 .yangInput{\r
  53   border: 2px solid #ebecec;\r
  54   .roundedCorners(0px);\r
  55   margin: 0 3px 0 5px;\r
  56 }\r
  57 \r
  58 .leaf-input {\r
  59   width: 300px;\r
  60   .inlineBlock;\r
  61   border: 2px solid #ebecec;\r
  62   .roundedCorners(0px);\r
  63 }\r
  64 \r
  65 .dataPopup {\r
  66   .leaf-input {\r
  67     width: 100%;\r
  68   }\r
  69 }\r
  70 \r
  71 INPUT.leaf-input{\r
  72 //  height: 30px;\r
  73 }\r
  74 \r
  75 .clear{\r
  76     clear: both;\r
  77 }\r
  78 \r
  79 .floatRight {\r
  80     position: relative;\r
  81     float: right;\r
  82     display:inline-block;\r
  83 }\r
  84 \r
  85 .btn-slim {\r
  86     font-weight: bold;\r
  87     padding-top: 2px;\r
  88     padding-bottom: 2px;\r
  89 }\r
  90 \r
  91 .btn-filter{\r
  92   margin: 2px 0px;\r
  93 }\r
  94 \r
  95 .btn-filter-high{\r
  96   margin-top: 3px !important;\r
  97 }\r
  98 \r
  99 .btn-filter-right{\r
 100   float: right;\r
 101   margin-left: 15px;\r
 102   margin-bottom: 10px;\r
 103 }\r
 104 \r
 105 .filterBitsIcon{\r
 106   position: absolute !important;\r
 107   left: 130px;\r
 108   bottom: 55px;\r
 109 }\r
 110 \r
 111 .filterBitsValue{\r
 112   margin-top: 10px;\r
 113   margin-bottom: 20px;\r
 114 }\r
 115 \r
 116 .bitCheckbox{\r
 117   float: left;\r
 118   margin: 4px 3px 0px 0px !important;\r
 119 }\r
 120 \r
 121 .form-inline select.form-control.adv-fil-sel{\r
 122   width:80px;\r
 123   height: 34px;\r
 124 \r
 125   background-color: #58595B;\r
 126   color: white;\r
 127   border: 2px solid #ebecec;\r
 128   border-radius: 0px;\r
 129 }\r
 130 \r
 131 \r
 132 .adv-fil-range{\r
 133   width:148px !important;\r
 134 }\r
 135 \r
 136 .iconFilterOver{\r
 137   position: absolute !important;\r
 138   top:  9px;\r
 139   left: -15px;\r
 140 }\r
 141 \r
 142 .btn-red {\r
 143     background: red;\r
 144 }\r
 145 \r
 146 .btn-selected {\r
 147     background: rgb(255,69,0);\r
 148 }\r
 149 \r
 150 /* --------------------------------------------------------------------------------- COMMON OWN RULES */\r
 151 .opacityDeph(@opacity: 0.5){\r
 152   -ms-filter: ~"'progid:DXImageTransform.Microsoft.Alpha(Opacity=" @opacity*100 ~")'";  \r
 153   filter: ~"alpha(opacity=" @opacity*100 ~")";\r
 154   -moz-opacity: @opacity;\r
 155   -khtml-opacity: @opacity;\r
 156   opacity: @opacity;\r
 157 }\r
 158 \r
 159 .roundedCorners (@radius: 5px) {\r
 160   -webkit-border-radius: @radius;\r
 161   -moz-border-radius: @radius;\r
 162   -ms-border-radius: @radius;\r
 163   -o-border-radius: @radius;\r
 164   border-radius: @radius;\r
 165 }\r
 166 \r
 167 .transition (@time: 500ms){\r
 168   -webkit-transition: all @time linear;\r
 169   -moz-transition: all @time linear;\r
 170   -ms-transition: all @time linear;\r
 171   -o-transition: all @time linear;\r
 172   transition: all @time linear;\r
 173 }\r
 174 \r
 175 .left{ float: left;}\r
 176 .right{ float: right;}\r
 177 .clear{ clear: both; float: none!important;}\r
 178 .outline{ outline: 0 none;}\r
 179 .block{ display: block;}\r
 180 .blockNone{ display: none;}\r
 181 .displayTable{\r
 182   display: table;\r
 183 }\r
 184 .inlineBlock {\r
 185     display: -moz-inline-stack;\r
 186     display: inline-block;\r
 187     vertical-align: top;\r
 188     zoom: 1;\r
 189     *display: inline;\r
 190 }\r
 191 .classicLink{\r
 192     .outline;\r
 193     text-decoration: none;\r
 194     &:hover{\r
 195         text-decoration: underline;\r
 196     }\r
 197 }\r
 198 .boxSizing{\r
 199   -moz-box-sizing: border-box;\r
 200   -webkit-box-sizing: border-box;\r
 201   box-sizing: border-box;\r
 202 }\r
 203 .mt10{margin-top: 10px;}\r
 204 .mt20{margin-top: 20px;}\r
 205 .mt30{margin-top: 30px;}\r
 206 .mt40{margin-top: 40px;}\r
 207 .mb10{margin-bottom: 10px;}\r
 208 .mb20{margin-bottom: 20px;}\r
 209 .mb30{margin-bottom: 30px;}\r
 210 .mb40{margin-bottom: 40px;}\r
 211 .nmb{margin-bottom: 0!important}\r
 212 .pr30{padding-right: 30px;}\r
 213 .pr40{padding-right: 40px;}\r
 214 .pr50{padding-right: 50px;}\r
 215 .pr60{padding-right: 60px;}\r
 216 .pl30{padding-left: 30px;}\r
 217 /* --------------------------------------------------------------------------------- COMMON OWN RULES - END */\r
 218 \r
 219 \r
 220 \r
 221 \r
 222 /* --------------------------------------------------------------------------------- YANG UI */\r
 223 .btn-primary{\r
 224   border: none;\r
 225   font-weight: bold;\r
 226   background: #ebecec;\r
 227   .transition(100ms);\r
 228   color: buttontext;\r
 229 \r
 230   &:hover{\r
 231     background: orange;\r
 232     color: buttontext;\r
 233   }\r
 234 \r
 235   &.btn-selected{\r
 236     background: #ffa500;\r
 237   }\r
 238 \r
 239   &.disabled {\r
 240     background: #ebecec;\r
 241     cursor: not-allowed;\r
 242     pointer-events: none;\r
 243     opacity: 0.65;\r
 244     filter: alpha(opacity=65);\r
 245     -webkit-box-shadow: none;\r
 246     box-shadow: none;\r
 247   }\r
 248 }\r
 249 \r
 250 .leaflist{\r
 251     .leafListValue{\r
 252         margin-top: 5px;\r
 253         margin-left: 10px;\r
 254         input[type=text], button{\r
 255             .inlineBlock;\r
 256         }\r
 257         input[type=text]{\r
 258             width: 20%;\r
 259             border: 2px solid #ebecec;\r
 260             /*background-color: #414042;*/\r
 261             .roundedCorners(0px);\r
 262         }\r
 263         button{\r
 264             margin-top: 4px;\r
 265             margin-left: 5px;\r
 266         }\r
 267     }\r
 268 }\r
 269 \r
 270 .treeWrapper{\r
 271   .treeList{\r
 272     margin: 10px 0;\r
 273     max-height: 400px;\r
 274     overflow-y: scroll;\r
 275   }\r
 276 }\r
 277 \r
 278 .selSubApiPath{\r
 279     &.is-sticky{\r
 280         width: 100%;\r
 281         -moz-box-sizing: border-box;\r
 282         -webkit-box-sizing: border-box;\r
 283         box-sizing: border-box;\r
 284         padding-left: 270px;\r
 285         right: 0;\r
 286         padding-right: 20px;\r
 287         z-index: 100;\r
 288         div.in{\r
 289             border: 1px solid #7a7a7a;\r
 290             -webkit-border-radius: 0 0 5px 5px;\r
 291             border-radius: 0 0 5px 5px;\r
 292             background: #414042;\r
 293             padding-left: 15px;\r
 294         }\r
 295     }\r
 296     input[type="text"]{\r
 297         width: 150px;\r
 298         display: inline!important;\r
 299     }\r
 300     div.in{\r
 301         padding: 10px;\r
 302     }\r
 303 }\r
 304 \r
 305 label.classic{\r
 306   color: #fff;\r
 307   min-width: 120px;\r
 308 }\r
 309 \r
 310 .actionButtons{\r
 311   div.in{\r
 312     padding: 0 10px;\r
 313   }\r
 314 }\r
 315 \r
 316 .dataPopupWrapper{\r
 317   position: relative;\r
 318   .dataPopup{\r
 319     position: absolute;\r
 320     left: 110%;\r
 321     top: 0;\r
 322     right: auto;\r
 323   }\r
 324 }\r
 325 \r
 326 .nav-tabs li a{\r
 327   cursor: pointer;\r
 328 }\r
 329 \r
 330 div.overlay{\r
 331   position: fixed;\r
 332   z-index: 1;\r
 333   width: 100%;\r
 334   height: 100%;\r
 335   background: rgba(0,0,0,0.5);\r
 336   top: 0;\r
 337   left: 0;\r
 338 }\r
 339 \r
 340 div.popUpWrapperFix{\r
 341   position: fixed;\r
 342   width: calc(~"100% - 250px");\r
 343   height: 100%;\r
 344   margin-left: 250px;\r
 345   z-index: 2;\r
 346   top: 0;\r
 347   left: 0;\r
 348 }\r
 349 \r
 350 div.requestActions{\r
 351   width: 130px;\r
 352 }\r
 353 \r
 354 div.mountPoints{\r
 355   color: #FFFFFF !important;\r
 356   .leaf-label{\r
 357     cursor:pointer;\r
 358   }\r
 359   .mpInner{\r
 360     overflow-y: scroll;\r
 361     margin-top: 20px;\r
 362     max-height: 300px;\r
 363     margin-bottom: 20px;\r
 364     .mpApi{\r
 365       padding-right: 10px;\r
 366       a{\r
 367         color: #FFFFFF !important;\r
 368         display: block;\r
 369         padding-top: 3px;\r
 370         padding-bottom: 3px;\r
 371       }\r
 372       a:HOVER{\r
 373         background: #808285;\r
 374         text-decoration: none;\r
 375         cursor: pointer;\r
 376         .roundedCorners(4px);\r
 377       }\r
 378       a:HOVER i{\r
 379         color: #000000;\r
 380       }\r
 381       a.mpApiLink{\r
 382         font-weight: bold;\r
 383         padding-left: 10px;\r
 384       }\r
 385       span{\r
 386         padding-left: 5px;\r
 387       }\r
 388       .mpSubApi{\r
 389         a{\r
 390           padding-left: 30px;\r
 391         }\r
 392       }\r
 393     }\r
 394   }\r
 395 }\r
 396 \r
 397 /* --------------------------------------------------------------------------------- YANG UI - END */\r
 398 \r
 399 \r
 400 \r
 401 \r
 402 \r
 403 /* --------------------------------------------------------------------------------- YANG UI TREE */\r
 404 \r
 405 .listContainer{\r
 406   position: relative;\r
 407 }\r
 408 \r
 409 .listModal{\r
 410   position: absolute;\r
 411   top: 0px;\r
 412   margin: 0 0 0 20px!important;\r
 413   left: 100%;\r
 414   background: #393939;\r
 415   z-index: 99;\r
 416   /*width: 245px;*/\r
 417   .btn{\r
 418     /*width: 200px;*/\r
 419   }\r
 420   button.iconView{\r
 421     position: absolute;\r
 422     left: 0px;\r
 423     top: 0;\r
 424     margin: 0;\r
 425   }\r
 426   li{\r
 427     margin: 5px 0;\r
 428     position: relative;\r
 429     .btn-remove,.btn-filter-active{\r
 430       position: absolute;\r
 431       right: 29px;\r
 432       top: 0;\r
 433       margin: 0;\r
 434     }\r
 435     .btn-filter-active{\r
 436       right: 20px;\r
 437     }\r
 438     .btn-double-index{\r
 439       position: absolute;\r
 440       right: 3px;\r
 441       top: 0;\r
 442       margin: 0;\r
 443     }\r
 444     .btn-view{\r
 445       position: absolute;\r
 446       left: 0px;\r
 447       top: 0;\r
 448     }\r
 449 \r
 450   }\r
 451   ul{\r
 452     padding: 0 15px 0 10px;\r
 453   }\r
 454   button.close{\r
 455     position: absolute;\r
 456     top: 0px;\r
 457     right: 5px;\r
 458     color: #ebecec;\r
 459     opacity: 1;\r
 460   }\r
 461   .listWrapper{\r
 462     overflow-y: scroll;\r
 463     max-height: 200px;\r
 464   }\r
 465 }\r
 466 \r
 467 .topologyContainer{\r
 468   background: #393939;\r
 469   border: 1px solid #7a7a7a;\r
 470   border-radius: 5px;\r
 471   padding: 20px;\r
 472   z-index: 15;\r
 473   button.close{\r
 474     position: absolute;\r
 475     top: 5px;\r
 476     right: 5px;\r
 477     color: #C4C4C4;\r
 478   }\r
 479   .graph-frame{\r
 480     width: 100%!important;\r
 481   }\r
 482   &.previewContainer{\r
 483     width: auto;\r
 484     height: auto;\r
 485     .previewWrapper{\r
 486       max-height: 500px;\r
 487       overflow-y: scroll;\r
 488       pre{\r
 489         -webkit-border-radius: 0;\r
 490         border-radius: 0;\r
 491         margin: 0;\r
 492       }\r
 493     }\r
 494     .restUrl{\r
 495       margin-bottom: 10px;\r
 496       .title{\r
 497         display: block;\r
 498       }\r
 499     }\r
 500     &.dataPopup{\r
 501       min-width: 320px;\r
 502       textarea{\r
 503         width: 100%;\r
 504         min-height: 150px;\r
 505         margin: 0px 0 10px;\r
 506       }\r
 507       input{\r
 508         margin: 0px 0 10px;\r
 509       }\r
 510     }\r
 511     &.historyPopUp{\r
 512       min-width: 80%;\r
 513       // width: 80%;\r
 514       margin-left: -40%;\r
 515       left: 50%;\r
 516       top: 80px;\r
 517       min-height: 50px;\r
 518       position: absolute;\r
 519       z-index: 2;\r
 520       .tab-pane{\r
 521         .tableWrapper{\r
 522           overflow-y: scroll;\r
 523           overflow-x: visible;\r
 524           max-height: 500px;\r
 525           margin-bottom: 10px;\r
 526         }\r
 527       }\r
 528 \r
 529       td{\r
 530         textarea{\r
 531           width: 100%;\r
 532           min-height: 400px;\r
 533         }\r
 534       }\r
 535 \r
 536       table{\r
 537         color: #fff;\r
 538         th{\r
 539           &.actions{\r
 540             width: 150px;\r
 541           }\r
 542         }\r
 543       }\r
 544       pre{\r
 545         position: relative;\r
 546         button.close{\r
 547           color: #000;\r
 548         }\r
 549       }\r
 550 \r
 551       td.pre{\r
 552         position: relative;\r
 553         button.close{\r
 554           color: #000;\r
 555           right: 30px;\r
 556           top: 10px;\r
 557         }\r
 558       }\r
 559 \r
 560       \r
 561     }\r
 562   }\r
 563 }\r
 564 \r
 565 .mountPointsContainer{\r
 566  background: #393939;\r
 567   border: 1px solid #7a7a7a;\r
 568   border-radius: 5px;\r
 569   padding: 20px;\r
 570   position: fixed!important;\r
 571   width: 800px;\r
 572   max-height: 400px;\r
 573   top: 150px;\r
 574   right: 50px;\r
 575   z-index: 2;\r
 576   overflow: hidden;\r
 577 \r
 578   button.close{\r
 579     position: absolute;\r
 580     top: 5px;\r
 581     right: 5px;\r
 582     color: #C4C4C4;\r
 583   }\r
 584 \r
 585   i.icon-refresh {\r
 586     color: white;\r
 587   }\r
 588 }\r
 589 \r
 590 .alertInner{\r
 591   margin-bottom: 10px;\r
 592   span{\r
 593     margin-left: 10px;\r
 594   }\r
 595 }\r
 596 \r
 597 .modalWrapper{\r
 598   position: relative;\r
 599   .inlineBlock;\r
 600   /*z-index: 20;*/\r
 601 }\r
 602 \r
 603 .list-title{\r
 604   line-height: 14px;\r
 605   margin-bottom: 10px;\r
 606 }\r
 607 \r
 608 .customContainer{\r
 609   border-left: 1px solid #7a7a7a;\r
 610   margin: 35px 5px 5px 15px;\r
 611   padding: 5px;\r
 612   /*z-index: 10;*/\r
 613   width:auto;\r
 614   position: relative;\r
 615   &.withoutBorder{\r
 616     border-left: 0;\r
 617     padding-bottom: 0;\r
 618     .treeBullet.containerBullet{\r
 619       left: -25px;\r
 620       top: -25px;\r
 621     }\r
 622   }\r
 623 }\r
 624 \r
 625 \r
 626 \r
 627 .btn-show-custom{\r
 628   width: 22px;\r
 629   line-height: 22px;\r
 630   -webkit-border-radius: 11px;\r
 631   border-radius: 11px;\r
 632   text-align: center;\r
 633   padding: 0!important;\r
 634 }\r
 635 \r
 636 .btn-double-index{\r
 637   /*cursor: auto;\r
 638   &:hover, &:focus{\r
 639     background: #d9534f!important;\r
 640     border-color: #d9534f!important;\r
 641   }*/\r
 642 }\r
 643 \r
 644 .btn-view{\r
 645   cursor: auto;\r
 646   &:hover, &:focus{\r
 647     background: orange!important;\r
 648     border-color: orange!important;\r
 649   }\r
 650 }\r
 651 \r
 652 .topContainerPart{\r
 653   margin-left: -19px;\r
 654   margin-top: -28px;\r
 655   margin-bottom: 10px;\r
 656 }\r
 657 \r
 658 .listItemWrapper{\r
 659   margin: 0 10px 0 20px;\r
 660   .inlineBlock;\r
 661   .listButtonWrapper{\r
 662     margin: 2px 15px 0 5px;\r
 663     .inlineBlock;\r
 664     \r
 665     button.yangButton{\r
 666       margin: 0px;\r
 667     }\r
 668 \r
 669     &:last-child{\r
 670       margin-right: 0;\r
 671     }\r
 672 \r
 673 \r
 674 \r
 675     .iconClose, .iconDanger{\r
 676       padding: 0;\r
 677     }\r
 678 \r
 679     // button.yangButton{\r
 680     //   margin: 4px 0;\r
 681     // }\r
 682 \r
 683     // .iconDanger{\r
 684     //   width: 10px;\r
 685     //   margin: 4px 0;\r
 686     //   height: 24px;\r
 687     //   border: 0;\r
 688     // }\r
 689     // .iconClose{\r
 690     //   width: 16px;\r
 691     // }\r
 692   }\r
 693 }\r
 694 \r
 695 .btn-name{\r
 696   -webkit-border-radius: 5px;\r
 697   border-radius: 5px;\r
 698   background: transparent;\r
 699   font-weight: bold;\r
 700   color: #ebecec;\r
 701   border: 2px solid #ebecec;\r
 702   cursor: auto;\r
 703 }\r
 704 \r
 705 .borderArrow{\r
 706   color: #7a7a7a;\r
 707   position: absolute;\r
 708   bottom: -6px;\r
 709   left: -6px;\r
 710   font-size: 1.3em;\r
 711 }\r
 712 \r
 713 .btn.btn-arrow{\r
 714   /*font-size: 12px;*/\r
 715 }\r
 716 \r
 717 .treeBullet{\r
 718   font-size: 25px;\r
 719   color: #7a7a7a;\r
 720   position: absolute;\r
 721   left: -15px;\r
 722   top: 0;\r
 723   &.containerBullet{\r
 724 /*    margin: 0 0px 0 -14px;\r
 725     line-height: 25px;*/\r
 726     top: -25px; \r
 727     left: -25px;\r
 728   }\r
 729 }\r
 730 \r
 731 .tooltip-inner{\r
 732   color: #fff;\r
 733   white-space: pre-wrap;      /* CSS3 */   \r
 734   white-space: -moz-pre-wrap; /* Firefox */    \r
 735   white-space: -pre-wrap;     /* Opera <7 */   \r
 736   white-space: -o-pre-wrap;   /* Opera 7 */    \r
 737   word-wrap: break-word;      /* IE */\r
 738 }\r
 739 \r
 740 .listElemButton{\r
 741   /*max-width: 250px;*/\r
 742   /*overflow: hidden;*/\r
 743 }\r
 744 \r
 745 .listFilterWindow{\r
 746   left: -6px;\r
 747   top: -10px;\r
 748   border: 2px solid #ebecec;\r
 749 }\r
 750 \r
 751 .filterContainer .leaf{\r
 752   min-width: 585px;\r
 753 }\r
 754 \r
 755 .filterContainer{\r
 756   margin-top:20px;\r
 757   margin-right: 40px;\r
 758   margin-bottom: 20px;\r
 759 }\r
 760 \r
 761 .filterContainer .col-md-2{\r
 762   width: 150px;\r
 763 }\r
 764 /* --------------------------------------------------------------------------------- YANG UI TREE - END */\r
 765 \r
 766 \r
 767 \r
 768 \r
 769 \r
 770 \r
 771 \r
 772 \r
 773 @iconsRootPath : 'images/yang-ui-icons/';\r
 774 /* --------------------------------------------------------------------------------- YANG UI BUTTONS */\r
 775 button{\r
 776   &.yangButton{\r
 777     position: relative;\r
 778     width: 24px;\r
 779     height: 24px;\r
 780     border: 0;\r
 781     margin: 2px;\r
 782     .inlineBlock;\r
 783     &.iconClose{\r
 784       opacity: 1;\r
 785       width: 24px;\r
 786       background: transparent url('@{iconsRootPath}icon-close.png') no-repeat center top;\r
 787     }\r
 788     &.iconNext{\r
 789       background: transparent url('@{iconsRootPath}icon-next.png') no-repeat center top;\r
 790     }\r
 791     &.iconPlus{\r
 792       background: transparent url('@{iconsRootPath}icon-plus.png') no-repeat center top;\r
 793     }\r
 794     &.iconArrowUp{\r
 795       background: transparent url('@{iconsRootPath}icon-arrow-up.png') no-repeat center top;\r
 796     }\r
 797     &.iconArrowDown{\r
 798       background: transparent url('@{iconsRootPath}icon-arrow-down.png') no-repeat center top;\r
 799     }\r
 800     &.iconFillData{\r
 801       background: transparent url('@{iconsRootPath}icon-fill-data.png') no-repeat center top;\r
 802     }\r
 803     &.iconArrowRight{\r
 804       background: transparent url('@{iconsRootPath}icon-arrow-right.png') no-repeat center top;\r
 805     }\r
 806     &.iconFilterEmpty{\r
 807       background: transparent url('@{iconsRootPath}icon-filter-empty.png') no-repeat center top;\r
 808     }\r
 809     &.iconFilterFull{\r
 810       background: transparent url('@{iconsRootPath}icon-filter-full.png') no-repeat center top;\r
 811     }\r
 812     &.iconFilterFullBck{\r
 813       background: transparent url('@{iconsRootPath}icon-filter-full.png') no-repeat center top;\r
 814     }\r
 815     &.iconList{\r
 816       background: transparent url('@{iconsRootPath}icon-list.png') no-repeat center top;\r
 817     }\r
 818     &.iconListBck{\r
 819       background: transparent url('@{iconsRootPath}icon-list-bck.png') no-repeat center top;\r
 820     }\r
 821     &.iconQuestion{\r
 822       background: transparent url('@{iconsRootPath}icon-question.png') no-repeat center top;\r
 823     }\r
 824     &.iconExpandBits{\r
 825       background: transparent url('@{iconsRootPath}icon-expand-bits.png') no-repeat center top;\r
 826     }\r
 827     &.iconCollapseBits{\r
 828       background: transparent url('@{iconsRootPath}icon-collapse-bits.png') no-repeat center top;\r
 829     }\r
 830     &.iconPrev{\r
 831       background: transparent url('@{iconsRootPath}icon-prev.png') no-repeat center top;\r
 832     }\r
 833     &.iconDanger{\r
 834       background: transparent url('@{iconsRootPath}icon-danger.png') no-repeat center top;\r
 835       &:hover{\r
 836         background-position: 0 0!important;\r
 837       }\r
 838     }\r
 839     &.iconView{\r
 840       background: transparent url('@{iconsRootPath}icon-view.png') no-repeat center top;\r
 841       &:hover{\r
 842         background-position: 0 0!important;\r
 843       }\r
 844     }\r
 845     &:hover{\r
 846       background-position: 0 -24px!important;\r
 847     }\r
 848     /*&:hover{\r
 849       .opacityDeph(0.8);\r
 850     }*/\r
 851   }\r
 852 }\r
 853 /* --------------------------------------------------------------------------------- YANG UI BUTTONS - END */\r
 854 \r
 855 \r
 856 \r
 857 /* --------------------------------------------------------------------------------- YANG UI TYPE UNION */\r
 858 .unionType.tabs{\r
 859   margin: 10px 0;\r
 860   .nav-tabs{\r
 861     border: 0;\r
 862     li{\r
 863       margin: 0 2px;\r
 864       &.active{\r
 865         a{\r
 866           background: #ffa500!important;\r
 867         }\r
 868       }\r
 869       a{\r
 870         .roundedCorners(4px);\r
 871         border: 0;\r
 872         padding-top: 2px;\r
 873         padding-bottom: 2px;\r
 874         span{\r
 875           color: #000!important;\r
 876         }\r
 877       }\r
 878     }\r
 879   }\r
 880   div.tab-content{\r
 881     border: 2px solid #ebecec;\r
 882     .boxSizing;\r
 883     padding: 22px 10px 10px;\r
 884     margin-top: -12px;\r
 885   }\r
 886 }\r
 887 /* --------------------------------------------------------------------------------- YANG UI TYPE UNION - END */\r
 888 \r
 889 \r
 890 @media screen and (max-height: 700px) {\r
 891   .topologyContainer.previewContainer.historyPopUp{\r
 892     height: 80%;\r
 893 \r
 894     .tab-content{\r
 895       height: 82%;\r
 896       .tab-pane{\r
 897         height: 100%;\r
 898       }\r
 899     }\r
 900 \r
 901     .tabs{\r
 902       height: 95%;\r
 903     }\r
 904 \r
 905     .tab-pane .tableWrapper{\r
 906       max-height: 100%;\r
 907       height: 100%;\r
 908     }\r
 909   }\r
 910 }\r
 911 \r
 912 button.btn-like-tab{\r
 913   line-height: 1em;\r
 914   outline: 0 none;\r
 915   height: 26px;\r
 916   margin: 0;\r
 917   border: none;\r
 918   font-weight: bold;\r
 919   background: #ebecec;\r
 920   .transition(100ms);\r
 921   color: buttontext;\r
 922 \r
 923   &:hover{\r
 924     background: orange;\r
 925     color: buttontext;\r
 926   }\r
 927 \r
 928   &.btn-selected{\r
 929     background: #ffa500;\r
 930   }\r
 931 }