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

   1 // general
   2 @fontColor : #505050;
   3 @fontColorLight: #a9a9a9;
   4 @fontHighlight: orange;
   5 @listBackColor: #f8f8f8;
   6 @listActiveColor: #E7E7E7;
   7 @appBackColor: #ffffff;
   8 @unactiveTabFontColor: #a9a9a9;
   9 @colorActive: rgb(64,196,255);
  10 @popupHeaderColor: #ffffff;
  11
  12 // yangman
  13 @leftPanelBackColor: #f3f3f3;
  14 @infoBoxBackColor: rgba(255, 255, 255, 0.25);
  15 @infoBoxBorderColor: #aad1f9;
  16 @dataStoreListHoverColor: #dadada;
  17 @dataStoreListShadowColor: rgba(0,0,0,.14);
  18 @dataStoreListBorderColor: rgba(0,0,0,0.12);
  19 @dashedBorderColor: rgba(0,0,0,0.54);
  20 @inputColor: rgba(0,0,0,0.87);
  21 @reqMethodGet: #63d33b;
  22 @reqMethodPut: #6fbad3;
  23 @reqMethodPost: #ea9c30;
  24 @reqMethodDelete: #ea3b27;
  25
  26 // helpers
  27 .pointer{
  28     cursor: pointer;
  29     outline: 0 none;
  30 }
  31
  32 .no-wrap{
  33     white-space: nowrap;
  34 }
  35
  36 .text-center{
  37     text-align: center;
  38 }
  39
  40 .text-left{
  41     text-align: left;
  42 }
  43
  44 .h100{
  45     height: 100%;
  46 }
  47
  48 .mb30{
  49     margin-bottom: 30px;
  50 }
  51
  52 .nrp{
  53     padding-right: 0!important;
  54 }
  55
  56 // general
  57 .md-open-menu-container{
  58     span{
  59         color: @fontColor;
  60     }
  61
  62     md-menu-content{
  63         .info-box{
  64             position: absolute;
  65             left: 100%;
  66             top: 0;
  67             margin-left: 10px;
  68             min-width: 300px;
  69             padding: 0;
  70             z-index: 10;
  71             background: #fff;
  72             -webkit-transition: all 150ms linear;
  73             -moz-transition: all 150ms linear;
  74             -ms-transition: all 150ms linear;
  75             -o-transition: all 150ms linear;
  76             transition: all 150ms linear;
  77             opacity: 1;
  78             max-height: 300px;
  79             overflow-y: auto;
  80             overflow-x: hidden;
  81
  82             &__padding{
  83                 padding: 16px;
  84             }
  85
  86             &.ng-hide{
  87                 opacity: 0;
  88             }
  89         }
  90     }
  91
  92     svg {
  93          border: none;
  94          border-radius: 0px;
  95          background-image: none;
  96     }
  97
  98     .icon-wrapper{
  99         padding: 0 16px;
 100     }
 101 }
 102
 103 .md-select-menu-container{
 104     z-index: 1000;
 105 }
 106
 107 .svg-icon{
 108     width: 24px;
 109     height: 24px;
 110     padding-top: 4px;
 111     padding-bottom: 4px;
 112     color: @dashedBorderColor;
 113 }
 114
 115 md-ink-bar.custom{
 116     width: 100%;
 117     color: @colorActive;
 118     left: 0;
 119     background: @colorActive;
 120 }
 121
 122 // yangman
 123 .yangmanModule{
 124     background-color: @appBackColor;
 125     color: @fontColor;
 126     height: 100%;
 127
 128     /*.md-input{
 129         color: @inputColor;
 130         background: transparent;
 131     }*/
 132
 133     .historyTabReqsSelected{
 134         height: calc(~'100% - 90px');
 135     }
 136
 137     .historyTab{
 138         height: calc(~'100% - 45px');
 139     }
 140
 141     .collectionsTab{
 142         height: calc(~'100% - 45px');
 143     }
 144
 145
 146     p{
 147         margin: 0;
 148     }
 149
 150     h1, h2, h3, h4, h5, h6{
 151         color: @fontColor;
 152     }
 153
 154     .scrollableY{
 155         overflow-y: auto;
 156         height: 100%;
 157     }
 158
 159     .scrollableX{
 160         overflow-x: auto;
 161         //width: 100%;
 162     }
 163
 164     .highlight{
 165         color: @fontHighlight;
 166     }
 167     md-tabs-content-wrapper{
 168         top: 0!important;
 169     }
 170
 171     // modules switcher -> list && detail
 172     .arrow-switcher{
 173         position: absolute;
 174         top: 2px;
 175         cursor: pointer;
 176         outline: 0 none;
 177         z-index: 10;
 178         font-size: 2.5em;
 179         left: -11px;
 180         -webkit-transition: all 250ms ease-out;
 181         -moz-transition: all 250ms ease-out;
 182         -ms-transition: all 250ms ease-out;
 183         -o-transition: all 250ms ease-out;
 184         transition: all 250ms ease-out;
 185
 186         &__left{
 187             //right: -11px;
 188             left: calc(~'100% - 24px');
 189             -moz-transform: rotate(180deg);
 190             -webkit-transform: rotate(180deg);
 191             -o-transform: rotate(180deg);
 192             -ms-transform: rotate(180deg);
 193             transform: rotate(180deg);
 194         }
 195
 196         &.ng-hide{
 197             opacity: 0;
 198         }
 199     }
 200
 201     md-dialog{
 202         h2{
 203             color: @popupHeaderColor;
 204         }
 205
 206         &-actions{
 207             button{
 208                 span{
 209                     color: @fontColor;
 210                 }
 211             }
 212         }
 213     }
 214     // left panel
 215     &__left-panel{
 216         overflow-x: hidden;
 217         background: @leftPanelBackColor;
 218         //background: @listBackColor;
 219
 220         md-tabs,
 221         md-tab-content > div,
 222         md-content,
 223         .h100{
 224             height: 100%;
 225         }
 226
 227         md-tabs-canvas{
 228             border-bottom: 1px solid #dbdbdb;
 229             padding-top: 30px;
 230             height: 78px;
 231         }
 232
 233         md-ink-bar{
 234             height: 4px;
 235         }
 236
 237         md-content{
 238             background: transparent;
 239         }
 240
 241         .md-tab{
 242             span{
 243                 color: @unactiveTabFontColor;
 244             }
 245
 246             &.md-active{
 247                 span{
 248                     color: @fontColor;
 249                 }
 250             }
 251         }
 252
 253         /*md-list-item .md-list-item-inner > md-icon:first-child:not(.md-avatar-icon){
 254             margin-right: 16px;
 255         }*/
 256
 257         /*md-list-item > md-icon:first-child:not(.md-avatar-icon){
 258             margin: 0 16px;
 259         }*/
 260
 261         &__detail-list-tabs-container{
 262             > md-tabs-wrapper{
 263                 display: none;
 264             }
 265
 266             .inline-tabs > md-tabs-wrapper{
 267                 display: inline;
 268             }
 269         }
 270
 271         .searchBox{
 272             height: auto;
 273             padding: 10px 13px;
 274             font-size: 14px;
 275
 276             #importCollection{
 277                 display: none;
 278             }
 279
 280             label{
 281                 margin-bottom: 0;
 282             }
 283
 284             md-icon.clickable{
 285                 cursor: pointer;
 286             }
 287
 288             input{
 289                 background: none;
 290                 border: none;
 291                 color: @fontColor;
 292                 outline: none;
 293             }
 294         }
 295
 296         //loading panel
 297         &__loading-container {
 298             display: block;
 299             position: relative;
 300             border: 2px solid @infoBoxBorderColor;
 301             transition: opacity  0.1s linear;
 302             border-top: 0px;
 303             margin: 10px;
 304
 305             .bottom-block {
 306                 display: block;
 307                 position: relative;
 308                 background-color: @infoBoxBackColor;
 309                 height: 85px;
 310
 311                 > span {
 312                     display: inline-block;
 313                     margin-top: 10px;
 314                     padding: 25px;
 315                     font-size: 0.9em;
 316                 }
 317             }
 318         }
 319     }
 320
 321     // right panel
 322     &__right-panel{
 323         height: 100%;
 324
 325         .bottom-content{
 326             height: calc(~'100% - 195px');
 327             overflow-y: auto;
 328
 329             .codemirror-container{
 330                 height: 100%;
 331             }
 332         }
 333
 334         &__header{
 335             margin-bottom: 30px;
 336
 337             > md-content{
 338                 background: @leftPanelBackColor;
 339
 340                 md-content{
 341                     background: transparent;
 342                 }
 343             }
 344
 345             md-input-container{
 346                 margin: 0;
 347             }
 348
 349             .md-errors-spacer{
 350                 display: none;
 351             }
 352
 353             .input-span{
 354                 padding-top: 3px;
 355             }
 356
 357             .input-identifier{
 358                 max-width: 60px;
 359                 border-color: @colorActive;
 360                 padding-left: 0;
 361             }
 362
 363             md-divider{
 364                 margin-top: 20px;
 365             }
 366
 367             .status-bar{
 368                 min-height: 60px;
 369
 370                 .status-text{
 371                     span span{
 372                         color: @colorActive;
 373                     }
 374                 }
 375             }
 376         }
 377
 378         &__req-data{
 379
 380             > div{
 381                 height: 100%;
 382                 padding-right: 2px;
 383                 padding-bottom: 10px;
 384
 385                 > div {
 386                     height: calc(~'100% - 25px');
 387                     overflow-y: auto;
 388                 }
 389
 390                 h5{
 391                     margin-top: 0;
 392                 }
 393
 394                 &.half-size{
 395                     height: 50%;
 396                 }
 397             }
 398
 399             .CodeMirror { height: 100%; }
 400         }
 401
 402         &__form{
 403             .union-tabs{
 404                 md-content{
 405                     min-width: 250px;
 406                 }
 407
 408                 .md-tab{
 409                     padding: 6px 12px;
 410                 }
 411
 412                 md-pagination-wrapper,
 413                 md-tabs-canvas{
 414                     height: 36px;
 415                 }
 416             }
 417
 418             md-input-container{
 419                 margin: 0;
 420
 421                 > md-icon {
 422                     left: auto;
 423                     right: 2px;
 424                     color: @dashedBorderColor;
 425                 }
 426
 427                 &.md-has-icon{
 428                     padding-right: 36px;
 429                     padding-left: 0px;
 430                 }
 431
 432                 .md-errors-spacer{
 433                     display: none;
 434                 }
 435             }
 436
 437             .md-menu.menu-container{
 438                 padding: 0;
 439
 440                 .md-button{
 441                     height: 22px;
 442                     min-height: 22px;
 443
 444                     &.md-icon-button{
 445                         padding: 0 8px;
 446                     }
 447                 }
 448             }
 449
 450             .menu-placeholder{
 451                 padding: 11px 26px;
 452             }
 453
 454             p.top-element{
 455                 margin: 0 10px 0 0;
 456                 min-width: 80px;
 457
 458                 &.list-label{
 459                     color: @colorActive;
 460                 }
 461             }
 462
 463             &__element-container{
 464                 margin: 25px 5px 5px 15px;
 465                 padding: 5px;
 466
 467                 &.expanded{
 468                     border-left: 1px dashed @dashedBorderColor;
 469                 }
 470
 471                 md-input-container{
 472                     &.input-icon-container{
 473                         margin-left: 15px;
 474
 475                         md-icon{
 476                             margin: 0;
 477                         }
 478                     }
 479                 }
 480
 481                 .container-label{
 482                     margin: -20px 0 10px -17px;
 483
 484                     md-icon{
 485                         margin: 0;
 486                     }
 487                 }
 488             }
 489
 490             &__leaf-container{
 491                 padding-left: 10px;
 492
 493                 md-input-container,
 494                 md-switch,
 495                 md-checkbox{
 496                     margin: 5px 0;
 497                 }
 498             }
 499
 500             &__list{
 501                 &__paginator{
 502                     //margin-left: 40px;
 503                     button {
 504                         background: transparent;
 505                         border: 0;
 506                         outline: 0 none;
 507                     }
 508                 }
 509             }
 510
 511             &__list-item{
 512                 margin: 0 5px;
 513
 514                 md-tab-item{
 515                     position: relative;
 516
 517                     &.md-tab{
 518                         padding: 6px 12px;
 519                     }
 520                 }
 521             }
 522         }
 523     }
 524
 525
 526     //modules list
 527     &__modules-list{
 528         padding: 0;
 529         background: @listBackColor;
 530
 531         &__item{
 532             padding: 0!important;
 533
 534             .title{
 535                 -webkit-transition: all 150ms ease;
 536                 -moz-transition: all 150ms ease;
 537                 -ms-transition: all 150ms ease;
 538                 -o-transition: all 150ms ease;
 539                 transition: all 150ms ease;
 540             }
 541
 542             &.expanded{
 543                 background: @listActiveColor;
 544             }
 545
 546             md-icon{
 547                 margin: 12px 16px;
 548             }
 549
 550             &:hover{
 551                 .title{
 552                     background: @listActiveColor;
 553                 }
 554             }
 555         }
 556
 557         /*md-list-item{
 558
 559         }*/
 560     }
 561
 562     // datastore list
 563     &__datastore-list{
 564         padding: 0;
 565         border-top: 1px solid @dataStoreListBorderColor;
 566         background: @listBackColor;
 567         -webkit-box-shadow:inset 0 7px 7px -5px @dataStoreListShadowColor;
 568         box-shadow:inset 0 7px 7px -5px @dataStoreListShadowColor;
 569
 570         md-list-item {
 571             min-height: 0;
 572             padding: 0;
 573             font-size: .85em;
 574
 575             &:hover{
 576                 background: @dataStoreListHoverColor;
 577             }
 578
 579             md-icon{
 580                 margin: 6px 16px 6px 48px;
 581                 font-size: 20.4px;
 582             }
 583         }
 584     }
 585
 586     // module history collections tabs
 587     &__mhc-tabs{
 588
 589         md-list-item{
 590             .md-no-style{
 591                 padding: 0;
 592             }
 593         }
 594
 595         > md-tabs-content-wrapper{
 596             height: calc(~'100% - 78px');
 597
 598             > md-tab-content{
 599                 height: 100%;
 600             }
 601         }
 602     }
 603
 604     // module detail
 605     &__module-detail{
 606         h4{
 607             padding-top: 30px;
 608             margin: 0 15px;
 609         }
 610
 611         .tabs{
 612             height: calc(~'100% - 49px');
 613
 614             md-tabs-canvas{
 615                 padding-top: 0;
 616                 height: 48px;
 617             }
 618
 619             > md-tabs-content-wrapper{
 620                 height: calc(~'100% - 48px');
 621
 622                 > md-tab-content{
 623                     height: 100%;
 624                 }
 625             }
 626
 627             .md-tab{
 628                 padding: 0;
 629             }
 630
 631             md-tab-item{
 632                 span{
 633                     outline: 0 none;
 634                     padding: 12px 24px;
 635                 }
 636             }
 637         }
 638
 639         > div{
 640             height: 100%;
 641         }
 642     }
 643
 644     &__requests-list{
 645         background: @listBackColor;
 646         padding: 0;
 647
 648         .md-subheader{
 649             background: none;
 650
 651         }
 652
 653         md-list{
 654             padding-top: 0;
 655         }
 656
 657         &__group{
 658
 659             padding: 0!important;
 660
 661             &__item{
 662
 663                 &__path{
 664                     white-space: -webkit-pre-wrap; /*Chrome & Safari */
 665                     word-break: break-all;
 666                     white-space: normal;
 667                     line-height: 18px;
 668                     color: @fontColor;
 669
 670                     p{
 671                         padding-right: 9px;
 672                     }
 673                 }
 674
 675                 &__method{
 676
 677                     padding-left: 17px;
 678
 679                     .GET{
 680                         color: @reqMethodGet;
 681                     }
 682                     .PUT{
 683                         color: @reqMethodPut;
 684                     }
 685                     .POST{
 686                         color: @reqMethodPost;
 687                     }
 688                     .DELETE{
 689                         color: @reqMethodDelete;
 690                     }
 691                 }
 692             }
 693
 694             &__itemMenu{
 695                 position: relative;
 696                 margin-left: -52px;
 697                 padding-top: 0;
 698
 699                 > button{
 700                     min-width: 0;
 701                     margin: 2px 5px;
 702
 703                     i.material-icons{
 704                         vertical-align: middle;
 705                         color: @fontColorLight;
 706
 707                     }
 708                 }
 709
 710             }
 711
 712             &__collectionMenu{
 713                 position: relative;
 714                 margin-left: -52px;
 715                 margin-right: 6px;
 716
 717                 > button{
 718                     min-width: 0;
 719                     margin: 2px 5px;
 720
 721                     i.material-icons{
 722                         vertical-align: middle;
 723                         color: @fontColorLight;
 724                     }
 725                 }
 726
 727             }
 728
 729             .selected{
 730                 button{
 731                     background-color: rgba(158,158,158,0.2);
 732                 }
 733             }
 734
 735         }
 736
 737         &__collections-list{
 738             padding: 0;
 739             background: @listBackColor;
 740             height: 100%;
 741
 742             .selected{
 743                 button{
 744                     background-color: rgba(158,158,158,0.2);
 745                 }
 746             }
 747         }
 748
 749         &__collection{
 750             padding: 0;
 751             background: @listBackColor;
 752
 753             &__requests{
 754                 padding: 0;
 755                 border-top: 1px solid @dataStoreListBorderColor;
 756                 background: @listBackColor;
 757                 -webkit-box-shadow:inset 0 7px 7px -5px @dataStoreListShadowColor;
 758                 box-shadow:inset 0 7px 7px -5px @dataStoreListShadowColor;
 759             }
 760
 761             .md-subheader{
 762                 background: none;
 763             }
 764
 765             .md-subheader-inner{
 766                 padding: 0;
 767             }
 768
 769             .material-icons{
 770                 margin: 15px 25px;
 771             }
 772
 773             p{
 774                 line-height: 18px;
 775                 padding: 12px 0;
 776
 777                 .desc{
 778                     color: @fontColorLight;
 779                 }
 780             }
 781
 782         }
 783
 784     }
 785 }
 786 .reqMenu{
 787     button{
 788         span{
 789             color: @fontColor
 790
 791         }
 792         i.material-icons{
 793             vertical-align: middle;
 794             margin-right: 5px;
 795             margin-bottom: 5px;
 796         }
 797     }
 798 }
 799
 800
 801 .md-autocomplete-suggestions{
 802     span{
 803         color: @fontColor;
 804     }
 805 }
 806
 807 md-dialog{
 808     md-dialog-content, md-dialog-actions{
 809         h2, span{
 810             color: @fontColor;
 811         }
 812
 813     }
 814
 815 }
 816
 817 // directives
 818 .directive{
 819     &__abn-tree{
 820         padding: 0;
 821         display:inline-block;
 822         white-space: nowrap;
 823         min-width: 100%;
 824
 825         md-icon{
 826             margin: 6px 16px!important;
 827         }
 828
 829         md-list-item{
 830             min-height: 0;
 831
 832             &.active{
 833                 background: @listActiveColor;
 834             }
 835
 836             .md-no-style{
 837                 padding: 0;
 838
 839                 &.md-button{
 840                     white-space: nowrap;
 841                 }
 842             }
 843
 844             .md-list-item-inner{
 845                 min-height: 0;
 846             }
 847
 848             .empty-box{
 849                 display: inline-block;
 850                 margin-top: -10px;
 851                 margin-left: 27px;
 852                 border-left: 1px dashed @dashedBorderColor;
 853                 height: 36px;
 854                 width: 1px;
 855             }
 856
 857             .md-button{
 858                 overflow: visible;
 859             }
 860
 861             .tree-label{
 862                 padding-right: 15px;
 863             }
 864         }
 865     }
 866 }
 867
 868 .paramsAdminDialog{
 869
 870     .md-dialog-content{
 871
 872         height: 400px;
 873
 874         button{
 875             height: 30px;
 876             min-width: 30px;
 877             margin-top: 15px;
 878             i{
 879                 vertical-align: middle;
 880             }
 881         }
 882
 883
 884     }
 885     &__searchBox{
 886
 887         height: 80px;
 888
 889         > button{
 890             margin-top: 13px!important;
 891             margin-right: 0px!important;
 892         }
 893
 894         md-menu{
 895             button{
 896                 margin-top: 5px!important;
 897             }
 898         }
 899
 900         input{
 901             border: none;
 902             height: auto;
 903             outline: none;
 904         }
 905     }
 906     &__paramsList{
 907         width: 450px;
 908         padding-top: 35px;
 909
 910         > div{
 911             min-height: 60px;
 912             margin-top: 10px;
 913         }
 914
 915
 916     }
 917 }