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

   1 // general
   2 @fontColor : #505050;
   3 @listBackColor: #f8f8f8;
   4 @listActiveColor: #E7E7E7;
   5 @appBackColor: #ffffff;
   6 @unactiveTabFontColor: #a9a9a9;
   7 @colorActive: rgb(64,196,255);
   8
   9 // yangman
  10 @leftPanelBackColor: #f3f3f3;
  11 @infoBoxBackColor: rgba(255, 255, 255, 0.25);
  12 @infoBoxBorderColor: #aad1f9;
  13 @dataStoreListHoverColor: #dadada;
  14 @dataStoreListShadowColor: rgba(0,0,0,.14);
  15 @dataStoreListBorderColor: rgba(0,0,0,0.12);
  16 @dashedBorderColor: rgba(0,0,0,0.54);
  17
  18 // helpers
  19 .pointer{
  20     cursor: pointer;
  21     outline: 0 none;
  22 }
  23
  24 .no-wrap{
  25     white-space: nowrap;
  26 }
  27
  28 .text-center{
  29     text-align: center;
  30 }
  31
  32 .text-left{
  33     text-align: left;
  34 }
  35
  36 .h100{
  37     height: 100%;
  38 }
  39
  40 // general
  41 .md-open-menu-container{
  42     span{
  43         color: @fontColor;
  44     }
  45
  46     md-menu-content{
  47         .info-box{
  48             position: absolute;
  49             left: 100%;
  50             top: 0;
  51             margin-left: 10px;
  52             min-width: 300px;
  53             padding: 0;
  54             z-index: 10;
  55             background: #fff;
  56             -webkit-transition: all 150ms linear;
  57             -moz-transition: all 150ms linear;
  58             -ms-transition: all 150ms linear;
  59             -o-transition: all 150ms linear;
  60             transition: all 150ms linear;
  61             opacity: 1;
  62             max-height: 300px;
  63             overflow-y: auto;
  64             overflow-x: hidden;
  65
  66             &__padding{
  67                 padding: 16px;
  68             }
  69
  70             &.ng-hide{
  71                 opacity: 0;
  72             }
  73         }
  74     }
  75
  76     svg {
  77          border: none;
  78          border-radius: 0px;
  79          background-image: none;
  80     }
  81
  82     .icon-wrapper{
  83         padding: 0 16px;
  84     }
  85 }
  86
  87 .svg-icon{
  88     width: 24px;
  89     height: 24px;
  90     padding-top: 4px;
  91     padding-bottom: 4px;
  92     color: @dashedBorderColor;
  93 }
  94
  95 md-ink-bar.custom{
  96     width: 100%;
  97     color: @colorActive;
  98     left: 0;
  99     background: @colorActive;
 100 }
 101
 102 // yangman
 103 .yangmanModule{
 104     background-color: @appBackColor;
 105     color: @fontColor;
 106     height: 100%;
 107
 108     p{
 109         margin: 0;
 110     }
 111
 112     h1, h2, h3, h4, h5, h6{
 113         color: @fontColor;
 114     }
 115
 116     .scrollableY{
 117         overflow-y: auto;
 118         height: 100%;
 119     }
 120
 121     .scrollableX{
 122         overflow-x: auto;
 123         //width: 100%;
 124     }
 125
 126     md-tabs-content-wrapper{
 127         top: 0!important;
 128     }
 129
 130     // modules switcher -> list && detail
 131     .arrow-switcher{
 132         position: absolute;
 133         top: 2px;
 134         cursor: pointer;
 135         outline: 0 none;
 136         z-index: 10;
 137         font-size: 2.5em;
 138         left: -11px;
 139         -webkit-transition: all 250ms ease-out;
 140         -moz-transition: all 250ms ease-out;
 141         -ms-transition: all 250ms ease-out;
 142         -o-transition: all 250ms ease-out;
 143         transition: all 250ms ease-out;
 144
 145         &__left{
 146             //right: -11px;
 147             left: calc(~'100% - 24px');
 148             -moz-transform: rotate(180deg);
 149             -webkit-transform: rotate(180deg);
 150             -o-transform: rotate(180deg);
 151             -ms-transform: rotate(180deg);
 152             transform: rotate(180deg);
 153         }
 154
 155         &.ng-hide{
 156             opacity: 0;
 157         }
 158     }
 159
 160     // left panel
 161     &__left-panel{
 162         overflow-x: hidden;
 163         background: @leftPanelBackColor;
 164         //background: @listBackColor;
 165
 166         md-tabs,
 167         md-tab-content > div,
 168         md-content{
 169             height: 100%;
 170         }
 171
 172         md-tabs-canvas{
 173             border-bottom: 1px solid #dbdbdb;
 174             padding-top: 30px;
 175             height: 78px;
 176         }
 177
 178         md-ink-bar{
 179             height: 4px;
 180         }
 181
 182         md-content{
 183             background: transparent;
 184         }
 185
 186         .md-tab{
 187             span{
 188                 color: @unactiveTabFontColor;
 189             }
 190
 191             &.md-active{
 192                 span{
 193                     color: @fontColor;
 194                 }
 195             }
 196         }
 197
 198         /*md-list-item .md-list-item-inner > md-icon:first-child:not(.md-avatar-icon){
 199             margin-right: 16px;
 200         }*/
 201
 202         /*md-list-item > md-icon:first-child:not(.md-avatar-icon){
 203             margin: 0 16px;
 204         }*/
 205
 206         &__detail-list-tabs-container{
 207             > md-tabs-wrapper{
 208                 display: none;
 209             }
 210
 211             .inline-tabs > md-tabs-wrapper{
 212                 display: inline;
 213             }
 214         }
 215
 216         //loading panel
 217         &__loading-container {
 218             display: block;
 219             position: relative;
 220             border: 2px solid @infoBoxBorderColor;
 221             transition: opacity  0.1s linear;
 222             border-top: 0px;
 223             margin: 10px;
 224
 225             .bottom-block {
 226                 display: block;
 227                 position: relative;
 228                 background-color: @infoBoxBackColor;
 229                 height: 85px;
 230
 231                 > span {
 232                     display: inline-block;
 233                     margin-top: 10px;
 234                     padding: 25px;
 235                     font-size: 0.9em;
 236                 }
 237             }
 238         }
 239     }
 240
 241     // right panel
 242     &__right-panel{
 243         &__form{
 244             .union-tabs{
 245                 md-content{
 246                     min-width: 250px;
 247                 }
 248
 249                 .md-tab{
 250                     padding: 6px 12px;
 251                 }
 252
 253                 md-pagination-wrapper,
 254                 md-tabs-canvas{
 255                     height: 36px;
 256                 }
 257             }
 258
 259             md-input-container{
 260                 margin: 0;
 261
 262                 > md-icon {
 263                     left: auto;
 264                     right: 2px;
 265                     color: @dashedBorderColor;
 266                 }
 267
 268                 &.md-has-icon{
 269                     padding-right: 36px;
 270                     padding-left: 0px;
 271                 }
 272
 273                 .md-errors-spacer{
 274                     display: none;
 275                 }
 276             }
 277
 278             .md-menu.menu-container{
 279                 padding: 0;
 280
 281                 .md-button{
 282                     height: 22px;
 283                     min-height: 22px;
 284
 285                     &.md-icon-button{
 286                         padding: 0 8px;
 287                     }
 288                 }
 289             }
 290
 291             .menu-placeholder{
 292                 padding: 11px 26px;
 293             }
 294
 295             p.top-element{
 296                 margin: 0 10px 0 0;
 297                 min-width: 80px;
 298
 299                 &.list-label{
 300                     color: @colorActive;
 301                 }
 302             }
 303
 304             &__element-container{
 305                 margin: 25px 5px 5px 15px;
 306                 padding: 5px;
 307
 308                 &.expanded{
 309                     border-left: 1px dashed @dashedBorderColor;
 310                 }
 311
 312                 md-input-container{
 313                     &.input-icon-container{
 314                         margin-left: 15px;
 315
 316                         md-icon{
 317                             margin: 0;
 318                         }
 319                     }
 320                 }
 321
 322                 .container-label{
 323                     margin: -20px 0 10px -17px;
 324
 325                     md-icon{
 326                         margin: 0;
 327                     }
 328                 }
 329             }
 330
 331             &__leaf-container{
 332                 padding-left: 10px;
 333
 334                 md-input-container,
 335                 md-switch,
 336                 md-checkbox{
 337                     margin: 5px 0;
 338                 }
 339             }
 340
 341             &__list{
 342                 &__paginator{
 343                     //margin-left: 40px;
 344                     button {
 345                         background: transparent;
 346                         border: 0;
 347                         outline: 0 none;
 348                     }
 349                 }
 350             }
 351
 352             &__list-item{
 353                 margin: 0 5px;
 354
 355                 md-tab-item{
 356                     position: relative;
 357
 358                     &.md-tab{
 359                         padding: 6px 12px;
 360                     }
 361                 }
 362             }
 363         }
 364     }
 365
 366
 367     //modules list
 368     &__modules-list{
 369         padding: 0;
 370         background: @listBackColor;
 371
 372         &__item{
 373             padding: 0!important;
 374
 375             .title{
 376                 -webkit-transition: all 150ms ease;
 377                 -moz-transition: all 150ms ease;
 378                 -ms-transition: all 150ms ease;
 379                 -o-transition: all 150ms ease;
 380                 transition: all 150ms ease;
 381             }
 382
 383             &.expanded{
 384                 background: @listActiveColor;
 385             }
 386
 387             md-icon{
 388                 margin: 12px 16px;
 389             }
 390
 391             &:hover{
 392                 .title{
 393                     background: @listActiveColor;
 394                 }
 395             }
 396         }
 397
 398         /*md-list-item{
 399
 400         }*/
 401     }
 402
 403     // datastore list
 404     &__datastore-list{
 405         padding: 0;
 406         border-top: 1px solid @dataStoreListBorderColor;
 407         background: @listBackColor;
 408         -webkit-box-shadow:inset 0 7px 7px -5px @dataStoreListShadowColor;
 409         box-shadow:inset 0 7px 7px -5px @dataStoreListShadowColor;
 410
 411         md-list-item {
 412             min-height: 0;
 413             padding: 0;
 414             font-size: .85em;
 415
 416             &:hover{
 417                 background: @dataStoreListHoverColor;
 418             }
 419
 420             md-icon{
 421                 margin: 6px 16px 6px 48px;
 422                 font-size: 20.4px;
 423             }
 424         }
 425     }
 426
 427     // module history collections tabs
 428     &__mhc-tabs{
 429
 430         md-list-item{
 431             .md-no-style{
 432                 padding: 0;
 433             }
 434         }
 435
 436         > md-tabs-content-wrapper{
 437             height: calc(~'100% - 78px');
 438
 439             > md-tab-content{
 440                 height: 100%;
 441             }
 442         }
 443     }
 444
 445     // module detail
 446     &__module-detail{
 447         h4{
 448             padding-top: 30px;
 449             margin: 0 15px;
 450         }
 451
 452         .tabs{
 453             height: calc(~'100% - 49px');
 454
 455             md-tabs-canvas{
 456                 padding-top: 0;
 457                 height: 48px;
 458             }
 459
 460             > md-tabs-content-wrapper{
 461                 height: calc(~'100% - 48px');
 462
 463                 > md-tab-content{
 464                     height: 100%;
 465                 }
 466             }
 467
 468             .md-tab{
 469                 padding: 0;
 470             }
 471
 472             md-tab-item{
 473                 span{
 474                     outline: 0 none;
 475                     padding: 12px 24px;
 476                 }
 477             }
 478         }
 479
 480         > div{
 481             height: 100%;
 482         }
 483     }
 484 }
 485
 486 // directives
 487 .directive{
 488     &__abn-tree{
 489         padding: 0;
 490         display:inline-block;
 491         white-space: nowrap;
 492         min-width: 100%;
 493
 494         md-icon{
 495             margin: 6px 16px!important;
 496         }
 497
 498         md-list-item{
 499             min-height: 0;
 500
 501             &.active{
 502                 background: @listActiveColor;
 503             }
 504
 505             .md-no-style{
 506                 padding: 0;
 507
 508                 &.md-button{
 509                     white-space: nowrap;
 510                 }
 511             }
 512
 513             .md-list-item-inner{
 514                 min-height: 0;
 515             }
 516
 517             .empty-box{
 518                 display: inline-block;
 519                 margin-top: -10px;
 520                 margin-left: 27px;
 521                 border-left: 1px dashed @dashedBorderColor;
 522                 height: 36px;
 523                 width: 1px;
 524             }
 525
 526             .md-button{
 527                 overflow: visible;
 528             }
 529
 530             .tree-label{
 531                 padding-right: 15px;
 532             }
 533         }
 534     }
 535 }