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

   1 .w-ecomp-dashboard-home {
   2  .bg_portalWhite;//white for 1702
   3    position: @page-main-position;
   4   top: @page-main-top;
   5   left: @page-main-left;
   6   right: @page-main-right;
   7   bottom: @page-main-bottom;
   8   padding-top: @padding-top;
   9   overflow-y: @page-main-overflow-y;
  10   padding-left: @padding-left-side;
  11
  12   .gridster-item-container .gridster-item-body {
  13     overflow-y:auto;
  14     overflow-x:hidden;
  15   }
  16
  17   .dashboard-home-container {
  18       position: relative;
  19       padding-right: 0;
  20       padding-left: 0;
  21       padding-bottom: @container-bottom;
  22
  23     .dashboard-home-title {
  24       .blackText24m;
  25       margin: auto;
  26       .content_justify;
  27     }
  28
  29     .portals-list {
  30       min-height: 70vh;
  31       //display: flex;
  32       justify-content: center;
  33       flex-flow: row wrap;
  34       width: @table-width;
  35       //margin-left: 230px;
  36       margin-bottom: 63px;
  37           margin:auto;
  38       .app-gridster-header {
  39         background-color: @u;
  40         font-size:12px;
  41         overflow:hidden
  42       }
  43
  44       .app-gridster-footer {
  45         background-color: @u;
  46       }
  47
  48       .portals-list-item {
  49         background-color: @u;
  50         border-radius: 2px;
  51         box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.1);
  52         display: inline-block;
  53         width: 360px;
  54         height: 300px;
  55         background-size: cover;
  56         cursor: pointer;
  57         margin: 15px;
  58         overflow: hidden;
  59
  60         .portals-item-info {
  61           background-color: @u;
  62           height: 120px;
  63           top: 180px;
  64           position: relative;
  65           box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.1);
  66           padding: 16px;
  67
  68           .info-title {
  69             .blackText24m;
  70             margin-bottom: 4px;
  71
  72             text-overflow: ellipsis;
  73             overflow: hidden;
  74           }
  75           .info-description {
  76             .portalDBlue16r;
  77             text-overflow: ellipsis;
  78             white-space: nowrap;
  79             overflow: hidden;
  80           }
  81           .info-button {
  82             .btn-green;
  83             width: 96px;
  84             position: absolute;
  85             bottom: 16px;
  86             left: 16px;
  87           }
  88
  89           &:hover {
  90             opacity: .93;
  91             z-index: 3;
  92           }
  93         }
  94       }
  95     }
  96   }
  97 }
  98 .w-ecomp-main-error{
  99   .portalRed;
 100   position: absolute;
 101   width: 100%;
 102   line-height: 1.5em;
 103 }
 104 .w-ecomp-main-disclaimer {
 105   text-align: center;
 106   .dGray14r;
 107   //position: absolute;
 108   bottom: -75px;
 109   line-height: 1.5em;
 110   margin: 0 auto;
 111   width:1170px;
 112   position: relative;
 113
 114 }
 115
 116 @keyframes fadein {
 117   from {
 118     opacity: 0;
 119   }
 120   to {
 121     opacity: 1;
 122   }
 123 }
 124
 125 .slide.ng-hide-add,
 126 .slide.ng-hide-remove,
 127 .slide.ng-enter,
 128 .slide.ng-leave {
 129   transition: all 0.5s ease;
 130 }
 131 .slide.ng-hide,
 132 .slide.ng-enter {
 133   transform: translate(-100%, 0);
 134 }
 135 .slide.ng-enter-active {
 136   transform: translate(0, 0);
 137 }
 138 .slide.ng-leave {
 139   transform: translate(0, 0);
 140 }
 141 .slide.ng-leave-active {
 142   transform: translate(+100%, 0);
 143 }
 144 .dashboard-boarder{
 145         // border: 2px solid #ccc!important;
 146         // border-radius: 16px!important;
 147           height: 210px;
 148     overflow: auto;
 149 }
 150 .dashboard-information-boarder{
 151         border: 2px solid #ccc!important;
 152         border-radius: 16px!important;
 153 }
 154
 155 #information-section {
 156    margin-top:50px;
 157 }
 158
 159 .information-section-title{
 160     color: #0574ac;
 161     font-family: Omnes-ECOMP-W02-Bold,Arial;
 162     font-size: 25px;
 163     margin: 20px;
 164     width: 1170px;
 165 }
 166 #left {
 167     float: left;
 168     width: 33%;
 169     height:300px;
 170     background-color: white;
 171 }
 172
 173 #center {
 174     float: right;
 175     width: 33%;
 176     height:300px;
 177         background: white;
 178 }
 179 #right {
 180     margin-left:34%;
 181         margin-right:34%;
 182         height:300px;
 183         background:white;
 184 }
 185
 186
 187 /*hover*/
 188
 189
 190 .dock ul{
 191 display: inline-block;
 192
 193 width: auto;
 194 margin: 0px;
 195 padding: 0px;
 196 list-style: none;
 197
 198 }
 199 .dock ul li {
 200 width: auto;
 201 height: auto;
 202 display: inline-block;
 203 bottom: 0;
 204 vertical-align: bottom;
 205 margin-top: -43px;
 206 }
 207 .dock ul li a {
 208 display: block;
 209 height: 150px;
 210 width: 150px;
 211 position: relative;
 212 -webkit-transition-property: width, height,margin-top;
 213 -webkit-transition-duration: 0.5s;
 214 -o-transition-property: width, height,margin-top;
 215 -o-transition-duration: 0.5s;
 216 -moz-transition-property: width, height,margin-top;
 217 -moz-transition-duration: 0.5s;
 218 }
 219 .dock ul li a:hover {
 220 width: 200px;
 221 height: 200px;
 222 margin-top: -50px;
 223 }
 224 .dock ul li a img {
 225 width: 100%;
 226 position: absolute;
 227 bottom: 0;
 228 left: 0;
 229 border: none;
 230 padding: 0px 0px 0px 30px;
 231 }
 232 .dock_left{
 233 width: 31px;
 234 -webkit-transform: rotate(33deg);
 235 -moz-transform: rotate(33deg);
 236 -o-transform: rotate(33deg);
 237 position: relative;
 238 background: #EEE;
 239 overflow: hidden;
 240 float: left;
 241 height: 100px;
 242 z-index: 2;
 243 margin: -18px;
 244 }
 245 .dock_right{
 246 width: 36px;
 247 -webkit-transform: rotate(-33deg);
 248 -moz-transform: rotate(-33deg);
 249 -o-transform: rotate(-33deg);
 250 position: relative;
 251 background: #EEE;
 252 overflow: hidden;
 253 float: left;
 254 height: 100px;
 255 z-index: 2;
 256 margin: -18px;
 257 }
 258
 259
 260
 261
 262 /*Time for the CSS*/
 263 * {margin: 0; padding: 0;}
 264 body {background: #ccc;}
 265
 266 .slider{
 267         width: 640px; /*Same as width of the large image*/
 268         position: relative;
 269         /*Instead of height we will use padding*/
 270         padding-top: 320px; /*That helps bring the labels down*/
 271
 272         margin: 50px auto;
 273
 274         /*Lets add a shadow*/
 275         box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
 276 }
 277
 278
 279 /*Last thing remaining is to add transitions*/
 280 .slider>img{
 281         position: absolute;
 282         left: 0; top: 0;
 283         transition: all 0.5s;
 284 }
 285
 286 .slider input[name='slide_switch'] {
 287         display: none;
 288 }
 289
 290 .slider label {
 291         /*Lets add some spacing for the thumbnails*/
 292         margin: 18px 0 0 18px;
 293         border: 3px solid #999;
 294
 295         float: left;
 296         cursor: pointer;
 297         transition: all 0.5s;
 298
 299         /*Default style = low opacity*/
 300         opacity: 0.6;
 301 }
 302
 303 .slider label img{
 304         display: block;
 305 }
 306
 307 /*Time to add the click effects*/
 308 .slider input[name='slide_switch']:checked+label {
 309         border-color: #666;
 310         opacity: 1;
 311 }
 312 /*Clicking any thumbnail now should change its opacity(style)*/
 313 /*Time to work on the main images*/
 314 .slider input[name='slide_switch'] ~ img {
 315         opacity: 0;
 316         transform: scale(1.1);
 317 }
 318 /*That hides all main images at a 110% size
 319 On click the images will be displayed at normal size to complete the effect
 320 */
 321 .slider input[name='slide_switch']:checked+label+img {
 322         opacity: 1;
 323         transform: scale(1);
 324 }
 325 /*Clicking on any thumbnail now should activate the image related to it*/
 326
 327 /*We are done :)*/
 328
 329
 330
 331 .accordion {
 332         width: 895px; height: 320px;
 333         overflow: hidden;
 334   box-shadow: 0 10px 6px -6px #111;
 335   margin: 20px auto
 336 }
 337 .accordion ul { width: 200% }
 338
 339 .accordion li {
 340         position: relative;
 341         display: block;
 342         width: 160px;
 343         float: left;
 344   box-shadow: 0 0 30px 8px #222;
 345         transition: all 0.4s ease .300ms;
 346 }
 347
 348 .accordion ul:hover li {width: 40px }
 349 .accordion ul li:hover {width: 640px }
 350
 351 .caption {
 352         background: rgba(0, 0, 0, 0.5);
 353         position: absolute;
 354   bottom: 0;
 355         width: 640px
 356 }
 357
 358 .caption a {
 359         display: block;
 360         color: #fff;
 361         text-decoration: none;
 362   font: normal 16px 'Lato', Helvetica, Arial, sans-serif;
 363   -webkit-font-smoothing: antialiased;
 364         padding: 15px;
 365 }
 366
 367
 368 /*events*/
 369 .events-date{
 370         margin-left: 10px;
 371         float:left;
 372         white-space: normal;
 373         display: inline-block;
 374         vertical-align: middle;
 375     width: 55px;
 376 }
 377 .event-title-div{
 378         float: left;
 379         width: 235px;
 380         line-height: 20px;
 381     padding: 5px;
 382         font-size: 14px;
 383         margin-left: 4px;
 384 }
 385 .events-date{
 386         height: 20px;
 387         margin-left: 4px;
 388         font-size: 14px;
 389 }
 390 .events-content{
 391         font-size: 14px;
 392         color: #444;
 393     margin-right: 10px;
 394 }
 395 .events-content-body{
 396         margin-top:5px;
 397         color:#444;
 398         margin-left:12px;
 399         line-height:1.5;
 400 }
 401 .events {
 402         border-radius: 4px;
 403         padding: 3px;
 404         -webkit-user-select: none;
 405 }
 406 .events ul {
 407         float: left;
 408         width:100%;
 409         -webkit-user-select: none
 410 }
 411 .events ul li {
 412         line-height: 30px;
 413         list-style: none;
 414     border-bottom: 2px solid grey;
 415     height: 100%;
 416     min-height: 42px;
 417 }
 418 .events ul li:hover {
 419     background: #ddd;
 420     cursor: pointer;
 421 }
 422 .events ul li a {
 423         color: black;
 424         text-decoration: none;
 425         font: 14px Helvetica, Arial, sans-serif;
 426         -webkit-font-smoothing: antialiased;
 427         -webkit-user-select: none;
 428         font-family: "Omnes-ECOMP-W02", Arial;
 429 }
 430 .events-link{
 431         color: #067ab4 !important;
 432 }
 433
 434
 435 /*widgets*/
 436
 437 .handle-e{
 438     width: 5px;
 439 }
 440
 441 .singleBtnBorder {
 442     border-radius: 6px 6px 6px 6px;
 443 }
 444
 445 .widgetHeaderBtn{
 446
 447     height: 30px;
 448     background-color: #FFFFFF;
 449     position: relative;
 450     display: inline-block;
 451     -moz-background-clip: padding-box;
 452     -webkit-background-clip: padding-box;
 453     background-clip: padding-box;
 454     -webkit-box-sizing: border-box;
 455     -moz-box-sizing: border-box;
 456     box-sizing: border-box;
 457     padding: 8px 20px;
 458     font-size: 14px;
 459     line-height: 14px;
 460     min-width: 60px;
 461     border: none;
 462     border-radius: 6px;
 463     background-color: #ffffff;
 464     background-image: none;
 465     color: #ffffff;
 466     vertical-align: middle;
 467     text-align: center;
 468     text-decoration: none;
 469     text-transform: capitalize;
 470     text-shadow: none !important;
 471     white-space: nowrap;
 472     cursor: pointer;
 473     -webkit-user-select: none;
 474     -moz-user-select: none;
 475     -ms-user-select: none;
 476     -o-user-select: none;
 477     user-select: none;
 478     -webkit-transition: background-color 0.3s ease-out;
 479     -moz-transition: background-color 0.3s ease-out;
 480     transition: background-color 0.3s ease-out;
 481     span{
 482                 color: #888;
 483     }
 484  }
 485
 486 .widgetHeaderBtnPosition {
 487         width: 30px;
 488     min-width: 0px;
 489     border: 1px solid #AAAAAA;
 490     padding-left: 3px;
 491     padding-right: 5px;
 492     }
 493
 494 .icon-anchor {
 495     color: #888;
 496 }
 497
 498 .widgetHeaderBtn:hover, .widgetHeaderBtn:focus {
 499     background: rgba(0, 0, 0, 0);
 500     color: #3a7999;
 501     box-shadow: inset 0 0 0 2px #3a7999;
 502 }
 503 /*news*/
 504
 505 @keyframes ticker {
 506         0%   {margin-top: 0}
 507         25%  {margin-top: -55px}
 508         50%  {margin-top: -110px}
 509         75%  {margin-top: -165px}
 510         100% {margin-top: 0}
 511 }
 512
 513 body { background: #333; width: 100%; height: 100% }
 514
 515 .news {
 516
 517   width: 350px;
 518   height: 250px;
 519   margin: 0px auto;
 520   // overflow: auto;
 521   border-radius: 4px;
 522   padding: 3px;
 523   -webkit-user-select: none;
 524
 525 }
 526
 527
 528
 529 .news ul {
 530   float: left;
 531   width:100%;
 532   // animation: ticker 25s cubic-bezier(1, 0, .5, 0) infinite;
 533   -webkit-user-select: none
 534 }
 535
 536 .news ul li {line-height: 30px; list-style: none;
 537     border-bottom: 2px solid grey;
 538     min-height: 42px;
 539  }
 540
 541 .news ul li:hover {
 542     background: #ddd;
 543     cursor: pointer;
 544 }
 545
 546 .news ul li a {
 547   color: black;
 548   text-decoration: none;
 549   font-size: 14px;
 550   line-height: 1.5;
 551   display: inline-block;
 552   width:100%;
 553   min-height:40px;
 554   padding-top: 5px;
 555   padding-bottom: 5px;
 556   -webkit-font-smoothing: antialiased;
 557   -webkit-user-select: none;
 558 }
 559
 560 .news ul:hover { animation-play-state: paused }
 561 .news span:hover+ul { animation-play-state: paused }
 562 /*resources*/
 563 .resources {
 564
 565   width: 100%;
 566   height: 200px;
 567   margin-left: 5px;
 568   border-radius: 4px;
 569   padding: 3px;
 570   -webkit-user-select: none;
 571
 572 }
 573
 574
 575
 576 .resources ul {
 577   float: left;
 578   width:100%;
 579
 580   -webkit-user-select: none
 581 }
 582
 583 .resources ul li {line-height: 30px; list-style: none;
 584     border-bottom: 2px solid grey;
 585     min-height: 42px;
 586  }
 587
 588 .resources ul li:hover {
 589     background: #ddd;
 590     cursor: pointer;
 591 }
 592
 593 .resources ul li a {
 594   color: black;
 595   text-decoration: none;
 596   font-size: 14px;
 597   line-height: 1.5;
 598   width:100%;
 599   min-height:40px;
 600   display: inline-block;
 601   padding-top: 5px;
 602   padding-bottom: 5px;
 603   -webkit-font-smoothing: antialiased;
 604   -webkit-user-select: none;
 605 }
 606
 607
 608 /* OTHER COLORS */
 609 .blue { background: #347fd0 }
 610 .blue span { background: #2c66be }
 611 .red { background: #d23435 }
 612 .red span { background: #c22b2c }
 613 .green { background: #699B67 }
 614 .green span { background: #547d52 }
 615 .magenta { background: #b63ace }
 616 .magenta span { background: #842696 }
 617
 618
 619 /*broadcast*/
 620
 621 .box-one {
 622   -webkit-transition:all linear 0.4s;
 623   transition:all linear 0.4s;
 624   height:100px; width:200px; background:white;    border: 2px solid #ccc!important;
 625     border-radius: 16px!important;
 626 }
 627 .box-one.ng-hide {
 628 display: block!important;
 629   opacity:0;
 630 }
 631
 632 .gridsterContent{
 633         height:120px;
 634 }
 635
 636 .gridster-item{
 637     z-index:0 !important;
 638 }
 639 .gridsterAppContent{
 640         height:120px;
 641
 642 }
 643
 644  .gridsterImage{
 645         height:84px;
 646         width:168px;
 647  }
 648  .grider-content-ecomp{
 649         transition: transform 0.5s ease-out;
 650  }
 651   .grider-content-ecomp:hover{
 652     transform: scale(1.1);
 653 }
 654
 655
 656 /*information section*/
 657
 658 .information-section{
 659         /*margin-top:25px;*/
 660 }
 661 .information-section-gridsterContent{
 662         /*height:300px;*/
 663 }
 664 .information-sections-gridster-header{
 665         color: #0574ac;
 666     font-family: Omnes-ECOMP-W02-Bold,Arial;
 667     font-size: 25px;
 668
 669 }
 670 /*application empty div*/
 671 .app-error-block {
 672     padding-top: 10px;
 673
 674 }
 675 /*news empty div*/
 676 .activity-error-block {
 677     padding-top: 60px;
 678
 679 }
 680
 681 .activity-error-msg1{
 682         text-align: center;
 683     margin-top: 20px;
 684     font-family: "Omnes-ECOMP-W02", Arial;
 685     color: #444;
 686     font-size: 20px;
 687
 688 }
 689
 690 .newstape {
 691   background: white;
 692   color: black;
 693   height: 400px;
 694   overflow: hidden;
 695 }
 696
 697 .newstape-content {
 698   position: relative;
 699   padding: 15px;
 700 }
 701
 702 .newstape-drag { cursor: ns-resize; }
 703
 704 .text-center { text-align: center; }
 705
 706 .text-right { text-align: right; }
 707
 708 .text-justify { text-align: justify; }
 709
 710 // #newsContainer{
 711 //   overflow:auto;
 712 //   height: 100%;
 713 // }
 714
 715 /*widget header*/
 716 .optionsMenu{
 717             position: absolute;
 718     list-style: none;
 719     top: 25px;
 720     right: 10px;
 721     border: 1px solid #067ab4;
 722     display: none;
 723     z-index: 2;
 724     border-radius: 6px 0px 6px 6px;
 725     background: #fff;
 726     width: 130px;
 727 }
 728
 729 .optionsMenuLink {
 730     position: relative;
 731     padding-left: 8px;
 732     padding-right: 2px;
 733     font-size: 12px;
 734     line-height: 30px;
 735     color: #444444;
 736 }
 737 .optionsMenu > li:hover a {
 738     color: #ffffff !important;
 739 }
 740 .optionsMenu > li {
 741     width: 100%;
 742     text-align: left;
 743 }
 744 .optionsMenu > li:hover {
 745     background-color: #0faaf7;
 746     border-color: none !important;
 747     cursor: pointer;
 748 }
 749
 750 .dashboardSortHeader{
 751    margin-top: -44px;
 752 margin-left: 735px;
 753 }
 754
 755 #dashboard-dropdown
 756 {
 757 position: absolute;
 758 margin-top: -37px;
 759 left: 80%;
 760 top: 42px;
 761 }
 762
 763 #dashboardAddWidgetPreference{
 764     display: inline-block;
 765     font-size: 14px;
 766     color: #3e3e3e;
 767     width: 69%;
 768     text-align: center;
 769     padding: 15px 0px 15px 0px;
 770     font-family: "Omnes-ECOMP-W02", Arial;
 771 }
 772
 773 #dashboardAddWidgetPreference:hover{
 774     background-color: #0568ae;
 775     color:white !important;
 776 }
 777
 778 #dashboardDefaultPreference{
 779     display: inline-block;
 780     font-size: 14px;
 781     color: #3e3e3e;
 782     width: 30%;
 783     text-align: center;
 784     padding: 15px 0px 15px 0px;
 785     font-family: "Omnes-ECOMP-W02", Arial;
 786 }
 787
 788 #dashboardDefaultPreference:hover{
 789     background-color: #0568ae;
 790     color:white !important;
 791 }
 792
 793 .simulateGridHeader{
 794         position: relative;
 795     height: 50px !important;
 796     border: 1px solid #d3d3d3;
 797     border-bottom: 0;
 798     background-color: #E5E5E5;
 799     white-space: nowrap;
 800     text-overflow: ellipsis;
 801     z-index: 1;
 802 }
 803
 804 .simulateGridHeaderTitle{
 805         line-height: 44px;
 806     margin-left: 26px;
 807     font-family: "Omnes-ECOMP-W02", Arial;
 808     font-size: 18px;
 809     color: #444444;
 810     float: left;
 811 }
 812
 813 .simulateGridHeaderHandle{
 814         cursor: move;
 815     margin: 12px;
 816     position: absolute;
 817     top: 0;
 818     left: 0;
 819     border: 0;
 820     vertical-align: middle;
 821     -ms-interpolation-mode: bicubic;
 822     display: block;
 823 }
 824
 825 /* apps gridsters */
 826 ul {
 827     list-style: none;
 828 }
 829 .gridster-box {
 830     height: 100%;
 831     border: 1px solid #ccc;
 832     background-color: #fff;
 833         transition: transform 0.5s ease-out;
 834 }
 835 .gridster-box-header {
 836     background-color: #fff;
 837     padding: 0 0px 0 10px;
 838     border-bottom: 1px solid #ccc;
 839     position: relative;
 840     height: 50px !important;
 841 }
 842 .gridster-box-header h3 {
 843     margin-top: 15px;
 844     display: inline-block;
 845     font-family: "Omnes-ECOMP-W02", Arial;
 846 }
 847
 848 .gridster-box-header i {
 849 font-size: 22px;
 850 }
 851
 852 .gridster-box-content {
 853     padding: 59px;
 854 }
 855 .gridster-box:hover{
 856     transform: scale(1.1);
 857 }
 858 .gridster-box-header-btns {
 859     top: 15px;
 860     right: 10px;
 861     position: absolute;
 862 }
 863
 864 /*** widgets ***/
 865 ul {
 866     list-style: none;
 867 }
 868 .box {
 869     height: 100%;
 870     border: 1px solid #ccc;
 871     background-color: #fff;
 872     font-family: "Omnes-ECOMP-W02", Arial;
 873 }
 874 .box-header {
 875         height : 50px;
 876     background-color: #fff;
 877     padding: 0 30px 0 10px;
 878     border-bottom: 1px solid #ccc;
 879     position: relative;
 880 }
 881 .box-header h3 {
 882     margin-top: 15px;
 883     display: inline-block;
 884     font-size: 16px;
 885 }
 886 .box-content {
 887     position: absolute;
 888     width: 100%;
 889     top: 50px;
 890     left: 0;
 891     right: 0;
 892     bottom: 29px;
 893     border: 1px solid #d3d3d3;
 894     box-sizing: border-box;
 895     overflow-y: auto;
 896     overflow-x: hidden;
 897     color: #444444;
 898     bottom: 0px;
 899 }
 900 .box-header-btns {
 901     top: 10px;
 902     right: 10px;
 903     cursor: pointer;
 904     position: absolute;
 905 }
 906
 907 #widget-boarder{
 908   background-color: #eee;
 909   border: 1px dashed white;
 910 }
 911 .icon-content-gridguide{
 912 cursor:move;
 913 }