ecomp-portal-FE/client/app/views/dashboard/dashboard.less

   1 /*-
   2  * ================================================================================
   3  * eCOMP Portal
   4  * ================================================================================
   5  * Copyright (C) 2017 AT&T Intellectual Property
   6  * ================================================================================
   7  * Licensed under the Apache License, Version 2.0 (the "License");
   8  * you may not use this file except in compliance with the License.
   9  * You may obtain a copy of the License at
  10  *
  11  *      http://www.apache.org/licenses/LICENSE-2.0
  12  *
  13  * Unless required by applicable law or agreed to in writing, software
  14  * distributed under the License is distributed on an "AS IS" BASIS,
  15  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16  * See the License for the specific language governing permissions and
  17  * limitations under the License.
  18  * ================================================================================
  19  */
  20  .w-ecomp-applications-home {
  21   .bg_w;
  22   position: @page-main-position;
  23   top: @page-main-top;
  24   left: @page-main-left;
  25   right: @page-main-right;
  26   bottom: @page-main-bottom;
  27   padding-top: @padding-top;
  28   overflow-y: @page-main-overflow-y;
  29   padding-left: @padding-left-side;
  30
  31   .gridster-item-container .gridster-item-body {
  32     overflow-y:auto;
  33     overflow-x:hidden;
  34   }
  35
  36   .go-button {
  37     .btn-green;
  38     width: 96px;
  39     position: absolute;
  40     border-radius: 0px;
  41   }
  42
  43   .applications-home-container {
  44     .content_justify;
  45     position: relative;
  46     padding: 15px 0 32px 0;
  47     width: 100%;
  48
  49     .applications-home-title {
  50       .a24r;
  51       margin: auto;
  52       .content_justify;
  53     }
  54     .portals-list {
  55       min-height: 70vh;
  56       //display: flex;
  57       justify-content: center;
  58       flex-flow: row wrap;
  59       width: 1170px;
  60
  61       margin: auto;
  62       margin-bottom: 63px;
  63
  64       .app-gridster-header {
  65         background-color: @u;
  66         font-size:12px;
  67         overflow:hidden
  68       }
  69
  70       .app-gridster-footer {
  71         background-color: @u;
  72       }
  73
  74       .portals-list-item {
  75         background-color: @u;
  76         border-radius: 2px;
  77         box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.1);
  78         display: inline-block;
  79         width: 360px;
  80         height: 300px;
  81         background-size: cover;
  82         cursor: pointer;
  83         margin: 15px;
  84         overflow: hidden;
  85
  86         .portals-item-info {
  87           background-color: @u;
  88           height: 120px;
  89           top: 180px;
  90           position: relative;
  91           box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.1);
  92           padding: 16px;
  93
  94           .info-title {
  95             .a24r;
  96             margin-bottom: 4px;
  97
  98             text-overflow: ellipsis;
  99             overflow: hidden;
 100           }
 101           .info-description {
 102             .c16r;
 103             text-overflow: ellipsis;
 104             white-space: nowrap;
 105             overflow: hidden;
 106           }
 107           .info-button {
 108             .btn-green;
 109             width: 96px;
 110             position: absolute;
 111             bottom: 16px;
 112             left: 16px;
 113           }
 114
 115           &:hover {
 116             opacity: .93;
 117             z-index: 3;
 118           }
 119         }
 120       }
 121     }
 122   }
 123 }
 124 .w-ecomp-main-error{
 125   .o14r;
 126   position: absolute;
 127   width: 100%;
 128   line-height: 1.5em;
 129 }
 130 .w-ecomp-main-disclaimer {
 131   text-align: center;
 132   .o14r;
 133   //position: absolute;
 134   bottom: -75px;
 135   line-height: 1.5em;
 136   margin: 0 auto;
 137   width:1170px;
 138   position: relative;
 139
 140 }
 141 .build-number {
 142   .o12i;
 143 }
 144
 145 @keyframes fadein {
 146   from {
 147     opacity: 0;
 148   }
 149   to {
 150     opacity: 1;
 151   }
 152 }
 153
 154 .slide.ng-hide-add,
 155 .slide.ng-hide-remove,
 156 .slide.ng-enter,
 157 .slide.ng-leave {
 158   transition: all 0.5s ease;
 159 }
 160 .slide.ng-hide,
 161 .slide.ng-enter {
 162   transform: translate(-100%, 0);
 163 }
 164 .slide.ng-enter-active {
 165   transform: translate(0, 0);
 166 }
 167 .slide.ng-leave {
 168   transform: translate(0, 0);
 169 }
 170 .slide.ng-leave-active {
 171   transform: translate(+100%, 0);
 172 }
 173 .dashboard-boarder{
 174     height: 210px;
 175     overflow: auto;
 176 }
 177 .dashboard-information-boarder{
 178         border: 2px solid #ccc!important;
 179         border-radius: 16px!important;
 180 }
 181
 182 #information-section {
 183    margin-top:50px;
 184 }
 185
 186 .information-section-title{
 187     color: #0574ac;
 188     font-family: arial;
 189     font-size: 25px;
 190     margin: 20px;
 191     width: 1170px;
 192 }
 193 #left {
 194     float: left;
 195     width: 33%;
 196     height:300px;
 197     background-color:white;
 198 }
 199
 200 #center {
 201     float: right;
 202     width: 33%;
 203     height:300px;
 204         background: white;
 205 }
 206 #right {
 207     margin-left:34%;
 208         margin-right:34%;
 209         height:300px;
 210         background:white;
 211 }
 212
 213
 214 .dock ul{
 215 display: inline-block;
 216
 217 width: auto;
 218 margin: 0px;
 219 padding: 0px;
 220 list-style: none;
 221
 222 }
 223 .dock ul li {
 224 width: auto;
 225 height: auto;
 226 display: inline-block;
 227 bottom: 0;
 228 vertical-align: bottom;
 229 margin-top: -43px;
 230 }
 231 .dock ul li a {
 232 display: block;
 233 height: 150px;
 234 width: 150px;
 235 position: relative;
 236 -webkit-transition-property: width, height,margin-top;
 237 -webkit-transition-duration: 0.5s;
 238 -o-transition-property: width, height,margin-top;
 239 -o-transition-duration: 0.5s;
 240 -moz-transition-property: width, height,margin-top;
 241 -moz-transition-duration: 0.5s;
 242 }
 243 .dock ul li a:hover {
 244 width: 200px;
 245 height: 200px;
 246 margin-top: -50px;
 247 }
 248 .dock ul li a img {
 249 width: 100%;
 250 position: absolute;
 251 bottom: 0;
 252 left: 0;
 253 border: none;
 254 padding: 0px 0px 0px 30px;
 255 }
 256 .dock_left{
 257 width: 31px;
 258 -webkit-transform: rotate(33deg);
 259 -moz-transform: rotate(33deg);
 260 -o-transform: rotate(33deg);
 261 position: relative;
 262 background: #EEE;
 263 overflow: hidden;
 264 float: left;
 265 height: 100px;
 266 z-index: 2;
 267 margin: -18px;
 268 }
 269 .dock_right{
 270 width: 36px;
 271 -webkit-transform: rotate(-33deg);
 272 -moz-transform: rotate(-33deg);
 273 -o-transform: rotate(-33deg);
 274 position: relative;
 275 background: #EEE;
 276 overflow: hidden;
 277 float: left;
 278 height: 100px;
 279 z-index: 2;
 280 margin: -18px;
 281 }
 282
 283
 284
 285
 286 * {margin: 0; padding: 0;}
 287 body {background: #ccc;}
 288
 289 .slider{
 290         width: 640px;
 291         position: relative;
 292         padding-top: 320px;
 293
 294         margin: 50px auto;
 295
 296         box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
 297 }
 298
 299 .slider>img{
 300         position: absolute;
 301         left: 0; top: 0;
 302         transition: all 0.5s;
 303 }
 304
 305 .slider input[name='slide_switch'] {
 306         display: none;
 307 }
 308
 309 .slider label {
 310         margin: 18px 0 0 18px;
 311         border: 3px solid #999;
 312
 313         float: left;
 314         cursor: pointer;
 315         transition: all 0.5s;
 316
 317         opacity: 0.6;
 318 }
 319
 320 .slider label img{
 321         display: block;
 322 }
 323
 324 .slider input[name='slide_switch']:checked+label {
 325         border-color: #666;
 326         opacity: 1;
 327 }
 328
 329 .slider input[name='slide_switch'] ~ img {
 330         opacity: 0;
 331         transform: scale(1.1);
 332 }
 333 /*That hides all main images at a 110% size
 334 On click the images will be displayed at normal size to complete the effect
 335 */
 336 .slider input[name='slide_switch']:checked+label+img {
 337         opacity: 1;
 338         transform: scale(1);
 339 }
 340
 341 .accordion {
 342         width: 895px; height: 320px;
 343         overflow: hidden;
 344   box-shadow: 0 10px 6px -6px #111;
 345   margin: 20px auto
 346 }
 347 .accordion ul { width: 200% }
 348
 349 .accordion li {
 350         position: relative;
 351         display: block;
 352         width: 160px;
 353         float: left;
 354   box-shadow: 0 0 30px 8px #222;
 355         transition: all 0.4s ease .300ms;
 356 }
 357
 358 .accordion ul:hover li {width: 40px }
 359 .accordion ul li:hover {width: 640px }
 360
 361 .caption {
 362         background: rgba(0, 0, 0, 0.5);
 363         position: absolute;
 364   bottom: 0;
 365         width: 640px
 366 }
 367
 368 .caption a {
 369         display: block;
 370         color: #fff;
 371         text-decoration: none;
 372   font: normal 16px 'Lato', Helvetica, Arial, sans-serif;
 373   -webkit-font-smoothing: antialiased;
 374         padding: 15px;
 375 }
 376
 377
 378
 379 /*events*/
 380 .events-date{
 381         margin-left: 10px;
 382         float:left;
 383         white-space: normal;
 384         display: inline-block;
 385         vertical-align: middle;
 386     width: 55px;
 387 }
 388 .event-title-div{
 389         float: left;
 390         width: 235px;
 391         line-height: 20px;
 392     padding: 5px;
 393         font-size: 14px;
 394         margin-left: 4px;
 395 }
 396 .events-date{
 397         height: 20px;
 398         margin-left: 4px;
 399         font-size: 14px;
 400 }
 401 .events-content{
 402         font-size: 14px;
 403         color: #444;
 404     margin-right: 10px;
 405 }
 406 .events-content-body{
 407         margin-top:5px;
 408         color:#444;
 409         margin-left:12px;
 410         line-height:1.5;
 411 }
 412 .events {
 413         border-radius: 4px;
 414         padding: 3px;
 415         -webkit-user-select: none;
 416 }
 417 .events ul {
 418         float: left;
 419         width:100%;
 420         -webkit-user-select: none
 421 }
 422 .events ul li {
 423         line-height: 30px;
 424         list-style: none;
 425     border-bottom: 2px solid grey;
 426     height: 100%;
 427     min-height: 42px;
 428 }
 429 .events ul li:hover {
 430     background: #ddd;
 431     cursor: pointer;
 432 }
 433 .events ul li a {
 434         color: black;
 435         text-decoration: none;
 436         font: 14px Helvetica, Arial, sans-serif;
 437         -webkit-font-smoothing: antialiased;
 438         -webkit-user-select: none;
 439         font-family: arial;
 440 }
 441 .events-link{
 442         color: #067ab4 !important;
 443 }
 444
 445
 446
 447 /*widgets*/
 448 .singleBtnBorder {
 449     border-radius: 6px 6px 6px 6px;
 450 }
 451
 452 .widgetHeaderBtn{
 453
 454     height: 30px;
 455     background-color: #FFFFFF;
 456     position: relative;
 457     display: inline-block;
 458     -moz-background-clip: padding-box;
 459     -webkit-background-clip: padding-box;
 460     background-clip: padding-box;
 461     -webkit-box-sizing: border-box;
 462     -moz-box-sizing: border-box;
 463     box-sizing: border-box;
 464     padding: 8px 20px;
 465     font-size: 14px;
 466     line-height: 14px;
 467     min-width: 60px;
 468     border: none;
 469     border-radius: 6px;
 470     background-color: #ffffff;
 471     background-image: none;
 472     color: #ffffff;
 473     vertical-align: middle;
 474     text-align: center;
 475     text-decoration: none;
 476     text-transform: capitalize;
 477     text-shadow: none;
 478     white-space: nowrap;
 479     cursor: pointer;
 480     -webkit-user-select: none;
 481     -moz-user-select: none;
 482     -ms-user-select: none;
 483     -o-user-select: none;
 484     user-select: none;
 485     -webkit-transition: background-color 0.3s ease-out;
 486     -moz-transition: background-color 0.3s ease-out;
 487     transition: background-color 0.3s ease-out;
 488     }
 489
 490 .widgetHeaderBtnPosition {
 491     width: 30px;
 492     min-width: 0px;
 493     border: 1px solid #AAAAAA;
 494     padding-left: 5px;
 495     padding-right: 5px;
 496     }
 497
 498 .icon-anchor {
 499     color: #888;
 500 }
 501
 502 .widgetHeaderBtn:hover, .widgetHeaderBtn:focus {
 503     background: rgba(0, 0, 0, 0);
 504     color: #3a7999;
 505     box-shadow: inset 0 0 0 2px #3a7999;
 506 }
 507
 508 @keyframes ticker {
 509         0%   {margin-top: 0}
 510         25%  {margin-top: -55px}
 511         50%  {margin-top: -110px}
 512         75%  {margin-top: -165px}
 513         100% {margin-top: 0}
 514 }
 515
 516 body { background: #333; width: 100%; height: 100% }
 517
 518 .news {
 519
 520   width: 350px;
 521   height: 250px;
 522   margin: 0px auto;
 523   border-radius: 4px;
 524   padding: 3px;
 525   -webkit-user-select: none;
 526
 527 }
 528
 529
 530
 531 .news ul {
 532   float: left;
 533   width:100%;
 534   -webkit-user-select: none
 535 }
 536
 537 .news ul li {line-height: 30px; list-style: none;
 538     border-bottom: 2px solid grey;
 539     min-height: 42px;
 540  }
 541
 542 .news ul li:hover {
 543     background: #ddd;
 544     cursor: pointer;
 545 }
 546
 547 .news ul li a {
 548   color: black;
 549   text-decoration: none;
 550   font-size: 14px;
 551   line-height: 1.5;
 552   display: inline-block;
 553   width:100%;
 554   min-height:40px;
 555   padding-top: 5px;
 556   padding-bottom: 5px;
 557   -webkit-font-smoothing: antialiased;
 558   -webkit-user-select: none;
 559
 560   /* font-family: arial;*/
 561 }
 562
 563 .news ul:hover { animation-play-state: paused }
 564 .news span:hover+ul { animation-play-state: paused }
 565 .resources {
 566
 567   width: 350px;
 568   height: 200px;
 569   margin-left: 5px;
 570   border-radius: 4px;
 571   padding: 3px;
 572   -webkit-user-select: none;
 573
 574 }
 575
 576
 577
 578 .resources ul {
 579   float: left;
 580   width:100%;
 581
 582   -webkit-user-select: none
 583 }
 584
 585 .resources ul li {line-height: 30px; list-style: none;
 586     border-bottom: 2px solid grey;
 587     min-height: 42px;
 588  }
 589
 590 .resources ul li:hover {
 591     background: #ddd;
 592     cursor: pointer;
 593 }
 594
 595 .resources ul li a {
 596   color: black;
 597   text-decoration: none;
 598   font-size: 14px;
 599   line-height: 1.5;
 600   width:100%;
 601   min-height:40px;
 602   display: inline-block;
 603   padding-top: 5px;
 604   padding-bottom: 5px;
 605   -webkit-font-smoothing: antialiased;
 606   -webkit-user-select: none;
 607 }
 608
 609
 610 .blue { background: #347fd0 }
 611 .blue span { background: #2c66be }
 612 .red { background: #d23435 }
 613 .red span { background: #c22b2c }
 614 .green { background: #699B67 }
 615 .green span { background: #547d52 }
 616 .magenta { background: #b63ace }
 617 .magenta span { background: #842696 }
 618
 619
 620 .box-one {
 621   -webkit-transition:all linear 0.4s;
 622   transition:all linear 0.4s;
 623   height:100px; width:200px; background:white;    border: 2px solid #ccc!important;
 624     border-radius: 16px!important;
 625 }
 626 .box-one.ng-hide {
 627 display: block!important;
 628   opacity:0;
 629 }
 630
 631 .gridsterContent{
 632         height:120px;
 633 }
 634 .gridsterAppContent{
 635         height:120px;
 636
 637 }
 638
 639  .gridsterImage{
 640         height:84px;
 641         width:168px;
 642  }
 643  .grider-content-ecomp{
 644         transition: transform 0.5s ease-out;
 645  }
 646   .grider-content-ecomp:hover{
 647     transform: scale(1.1);
 648 }
 649
 650
 651 .information-section{
 652         /*margin-top:25px;*/
 653 }
 654 .information-section-gridsterContent{
 655         height:300px;
 656 }
 657 .information-sections-gridster-header{
 658         color: #0574ac;
 659     font-family: arial;
 660     font-size: 25px;
 661
 662 }
 663 /*application empty div*/
 664 .app-error-block {
 665     padding-top: 10px;
 666
 667 }
 668 .activity-error-block {
 669     padding-top: 60px;
 670
 671 }
 672
 673 .activity-error-msg1{
 674         text-align: center;
 675     margin-top: 20px;
 676     font-family: arial;
 677     color: #444;
 678     font-size: 20px;
 679
 680 }
 681
 682 .newstape {
 683   background: white;
 684   color: black;
 685   height: 400px;
 686   overflow: hidden;
 687 }
 688
 689 .newstape-content {
 690   position: relative;
 691   padding: 15px;
 692 }
 693
 694 .newstape-drag { cursor: ns-resize; }
 695
 696 .text-center { text-align: center; }
 697
 698 .text-right { text-align: right; }
 699
 700 .text-justify { text-align: justify; }
 701
 702 .optionsMenu{
 703             position: absolute;
 704     list-style: none;
 705     top: 25px;
 706     right: 10px;
 707     border: 1px solid #067ab4;
 708     display: none;
 709     z-index: 2;
 710     border-radius: 6px 0px 6px 6px;
 711     background: #fff;
 712     width: 130px;
 713 }
 714
 715 .optionsMenuLink {
 716     position: relative;
 717     padding-left: 8px;
 718     padding-right: 2px;
 719     font-size: 12px;
 720     line-height: 30px;
 721     color: #444444;
 722 }
 723 .optionsMenu > li:hover a {
 724     color: #ffffff !important;
 725 }
 726 .optionsMenu > li {
 727     width: 100%;
 728     text-align: left;
 729 }
 730 .optionsMenu > li:hover {
 731     background-color: #0faaf7;
 732     border-color: none !important;
 733     cursor: pointer;
 734 }
 735
 736 .simulateGridHeader{
 737         position: relative;
 738     height: 50px !important;
 739     border: 1px solid #d3d3d3;
 740     border-bottom: 0;
 741     background-color: #E5E5E5;
 742     white-space: nowrap;
 743     text-overflow: ellipsis;
 744     z-index: 1;
 745 }
 746
 747 .simulateGridHeaderTitle{
 748         line-height: 44px;
 749     margin-left: 26px;
 750     font-family: arial;
 751     font-size: 18px;
 752     color: #444444;
 753     float: left;
 754 }
 755
 756 .simulateGridHeaderHandle{
 757         cursor: move;
 758     margin: 12px;
 759     position: absolute;
 760     top: 0;
 761     left: 0;
 762     border: 0;
 763     vertical-align: middle;
 764     -ms-interpolation-mode: bicubic;
 765     display: block;
 766 }