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

   1 .w-ecomp-tabs {
   2   //.bg_portalWhite;//white for 1702
   3   .bg_portalGray;  // gray for 1610
   4
   5   position: fixed;
   6   left: 0;
   7   right: 0;
   8   bottom: @page-main-bottom;
   9   overflow-y: hidden;
  10   top: @header-height;
  11   padding-left: 0;
  12   height:50px;
  13   z-index:101;
  14   .go-button {
  15     .btn-green;
  16     width: 96px;
  17     position: absolute;
  18     border-radius: 0px;
  19   }
  20
  21   .tabs-container {
  22     .content_justify;
  23     position: relative;
  24     padding: 15px 0 32px 0;
  25     width: 100%;
  26
  27     .tabs-title {
  28       //.a24r;
  29       .dBlue24r;  // AT&T Dark Blue
  30       margin: auto;
  31       .content_justify;
  32     }
  33     .portals-list {
  34       min-height: 70vh;
  35       //display: flex;
  36       justify-content: center;
  37       flex-flow: row wrap;
  38       width: 1170px;
  39
  40       margin: auto;
  41       margin-bottom: 63px;
  42
  43       .app-gridster-header {
  44         background-color: @portalWhite;
  45       }
  46
  47       .app-gridster-footer {
  48         background-color: @portalWhite;
  49       }
  50
  51       .portals-list-item {
  52         background-color: @portalWhite;
  53         border-radius: 2px;
  54         box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.1);
  55         display: inline-block;
  56         width: 360px;
  57         height: 300px;
  58         background-size: cover;
  59         cursor: pointer;
  60         margin: 15px;
  61         overflow: hidden;
  62
  63         .portals-item-info {
  64           background-color: @portalWhite;
  65           height: 120px;
  66           top: 180px;
  67           position: relative;
  68           box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.1);
  69           padding: 16px;
  70
  71           .info-title {
  72             //.a24r;
  73             .dBlue24r;  // AT&T Dark Blue
  74             margin-bottom: 4px;
  75
  76             text-overflow: ellipsis;
  77             overflow: hidden;
  78           }
  79           .info-description {
  80             .portalDBlue16r;
  81             text-overflow: ellipsis;
  82             white-space: nowrap;
  83             overflow: hidden;
  84           }
  85           .info-button {
  86             .btn-green;
  87             width: 96px;
  88             position: absolute;
  89             bottom: 16px;
  90             left: 16px;
  91           }
  92
  93           &:hover {
  94             opacity: .93;
  95             z-index: 3;
  96           }
  97         }
  98       }
  99     }
 100   }
 101 }
 102
 103 .w-ecomp-main-disclaimer {
 104   text-align: center;
 105   .dGray14r;
 106   bottom: -37px;
 107   width: 100%;
 108   line-height: 1.5em;
 109
 110 }
 111 //.build-number {
 112 //  .o12i;
 113 //}
 114
 115 @keyframes fadein {
 116   from {
 117     opacity: 0;
 118   }
 119   to {
 120     opacity: 1;
 121   }
 122 }
 123
 124
 125
 126 .tab-container {
 127   background: @portalLGray;
 128   margin: 0;
 129   padding: 0;
 130   max-height: 40px;
 131 }
 132 .tab-container ul.nav-tabs {
 133   margin: 0;
 134   list-style-type: none;
 135   line-height: 40px;
 136   max-height: 40px;
 137   overflow: hidden;
 138   display: inline-block;
 139   display: -webkit-flex;
 140   display: flex;
 141   padding-right: 20px;
 142   border-bottom: 5px solid @funcBkgGray;
 143 }
 144 .tab-container ul.nav-tabs > li {
 145   margin: 5px -14px 0;
 146   -moz-border-radius-topleft: 28px 145px;
 147   -webkit-border-top-left-radius: 28px 145px;
 148   border-top-left-radius: 28px 145px;
 149   -moz-border-radius-topright: 28px 145px;
 150   -webkit-border-top-right-radius: 28px 145px;
 151   border-top-right-radius: 28px 145px;
 152   padding: 0 30px 0 25px;
 153   height: 170px;
 154   background: #c3d5e6;
 155   position: relative;
 156   -moz-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
 157   -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
 158   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
 159   width: 200px;
 160   max-width: 200px;
 161   min-width: 20px;
 162   border: 1px solid @portalGray;
 163 }
 164 .tab-container ul.nav-tabs > li:first-child {
 165   margin-left: 0;
 166 }
 167 .tab-container ul.nav-tabs > li:last-of-type {
 168   margin-right: 0;
 169 }
 170 .tab-container ul.nav-tabs > li > a {
 171   display: block;
 172   max-width: 100%;
 173   text-decoration: none;
 174   color: @portalBlack;
 175   padding: 3px 7px;
 176 }
 177 .tab-container ul.nav-tabs > li > a span {
 178   overflow: hidden;
 179   white-space: nowrap;
 180   display: block;
 181 }
 182 .tab-container ul.nav-tabs > li > a:focus, .tab-container ul.nav-tabs > li > a:hover {
 183   background-color: transparent;
 184   border-color: transparent;
 185 }
 186 .tab-container ul.nav-tabs > li > a .glyphicon-remove {
 187   color: @portalDGray;
 188   display: inline-block;
 189   padding: 3px;
 190   font-size: 10px;
 191   position: absolute;
 192   z-index: 10;
 193   top: 7px;
 194   right: -10px;
 195   -moz-border-radius: 50%;
 196   -webkit-border-radius: 50%;
 197   border-radius: 50%;
 198 }
 199 .tab-container ul.nav-tabs > li > a .glyphicon-remove:hover {
 200   background: @portalLPurple;
 201   color: @portalWhite;
 202   -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25);
 203   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25);
 204   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25);
 205   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
 206 }
 207 .tab-container ul.nav-tabs > li.active {
 208   z-index: 4;
 209   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Y3ZjdmNyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
 210   background-size: 100%;
 211   background-image: -webkit-gradient(linear, 50% 0%, 50% 30, color-stop(0%, @portalWhite), color-stop(100%, @funcBkgGray));
 212   background-image: -moz-linear-gradient(@portalWhite, @funcBkgGray 30px);
 213   background-image: -webkit-linear-gradient(@portalWhite, @funcBkgGray 30px);
 214   background-image: linear-gradient(@portalWhite, @funcBkgGray 30px);
 215 }
 216 .tab-container ul.nav-tabs > li.active > a {
 217   background-color: transparent;
 218   border-color: transparent;
 219   border-bottom-color: transparent;
 220 }
 221 .tab-container ul.nav-tabs > li.active > a:focus, .tab-container ul.nav-tabs > li.active > a:hover {
 222   background-color: transparent;
 223   border-color: transparent;
 224   border-bottom-color: transparent;
 225 }
 226 .tab-container ul.nav-tabs .btn {
 227   float: left;
 228   height: 20px;
 229   width: 35px;
 230   min-width: 35px;
 231   max-width: 35px;
 232   margin: 10px 0 0 0;
 233   border-color: @portalLBlue;
 234   outline: none;
 235   -moz-transform: skew(30deg);
 236   -ms-transform: skew(30deg);
 237   -webkit-transform: skew(30deg);
 238   transform: skew(30deg);
 239 }
 240 .tab-container ul.nav-tabs .btn.btn-default {
 241   background: #c3d5e6;
 242 }
 243 .tab-container ul.nav-tabs .btn.btn-default:hover {
 244   background: #d2deeb;
 245 }
 246 .tab-container ul.nav-tabs .btn.btn-default:active {
 247   background: #9cb5cc;
 248 }
 249 .tab-container .tab-pane {
 250   padding: 0px 0px;
 251   text-align: center;
 252 }
 253 .tab-container .tab-pane.active {
 254   border-top: 1px solid #ddd;
 255 }
 256
 257 .tab-container md-content {
 258   background-color: transparent !important; }
 259   .tab-container md-content md-tabs {
 260     border: 1px solid #e1e1e1; }
 261     .tab-container md-content md-tabs md-tab-content {
 262       background: #f6f6f6; }
 263     .tab-container md-content md-tabs md-tabs-canvas {
 264       background: white; }
 265   .tab-container md-content h1:first-child {
 266     margin-top: 0; }
 267 .tab-container md-input-container {
 268   padding-bottom: 0; }
 269 .tab-container .remove-tab {
 270   margin-bottom: 40px; }
 271 .tab-container .demo-tab > div > div {
 272   padding: 25px;
 273   box-sizing: border-box; }
 274 .tab-container .edit-form input {
 275   width: 100%; }
 276 .tab-container md-tabs {
 277   border-bottom: 1px solid rgba(0, 0, 0, 0.12); }
 278 .tab-container md-tab[disabled] {
 279   opacity: 0.5; }
 280 .tab-container label {
 281   text-align: left; }
 282 .tab-container .long > input {
 283   width: 264px; }
 284 .tab-container .md-button.add-tab {
 285   transform: translateY(5px); }
 286
 287 .md-tab{
 288         font-size: 13px;
 289     line-height: 30px;
 290     margin: 5px -3px 0;
 291     border-top-left-radius: 88px 205px;
 292     border-top-right-radius: 88px 205px;
 293     padding: 0 30px 0 25px;
 294     height: 40px;
 295     background: @portalLGray;
 296     position: relative;
 297     box-shadow: 0 4px 6px rgba(0,0,0,.5);
 298     width: 180px;
 299     max-width: 200px;
 300     min-width: 20px;
 301     border: 1px solid #aaa;
 302     text-transform: capitalize;
 303     text-align: left;
 304 }
 305
 306 md-tabs .md-tab {
 307         color: #222;
 308 }
 309
 310 md-tabs-canvas {
 311     border-bottom: 5px solid #f7f7f7;
 312     height: 40px;
 313 }
 314 .md-tab.md-active {
 315         z-index: 4;
 316         background-color: #f5f5f5 !important;
 317 }
 318 .md-tab:first-child{
 319         margin-left: 10px;
 320 }
 321 md-ink-bar{
 322         z-index: 5 !important;
 323 }
 324
 325 .glyphicon {
 326       position: fixed;
 327       line-height: 4;
 328 }
 329 .close_button {
 330         font-size: x-small;width: 10px;
 331     margin-left: 130px;
 332 }
 333 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
 334         .close_button {
 335                 font-size: x-small;width: 10px;margin-left: 130px;margin-top: 55px;
 336         }
 337 }
 338
 339 *,
 340 *:after,
 341 *:before
 342 {
 343   -moz-box-sizing: border-box;
 344   -webkit-box-sizing: border-box;
 345   box-sizing: border-box;
 346 }
 347
 348
 349 .button-default
 350 {
 351   .transition(@transitionDefault color);
 352   background: transparent;
 353   border: none;
 354   cursor: pointer;
 355   margin: 0;
 356   outline: none;
 357   position: relative;
 358 }
 359
 360 .show-notifications
 361 {
 362   position: relative;
 363
 364   &:hover,
 365   &:focus,
 366   &.active
 367   {
 368     #icon-bell
 369     {
 370       fill: @colorWetAsphalt;
 371     }
 372   }
 373
 374   #icon-bell
 375   {
 376     fill: @colorAsbestos;
 377   }
 378
 379
 380
 381   &.active ~ .notifications
 382   {
 383     opacity: 1;
 384     top: 35px;
 385   }
 386 }
 387 .notifications_li{
 388     border-top: 1px solid #bdc3c7;
 389     color: #7f8c8d;
 390     cursor: default;
 391     display: block;
 392     padding: 10px;
 393     position: relative;
 394     white-space: nowrap;
 395     width: 350px;
 396 }
 397 .notifications_li:hover{
 398         background:#eee;
 399 }
 400 .notifications_detail{
 401         margin-left: 10px;
 402     white-space: normal;
 403     width: 280px;
 404     display: inline-block;
 405     vertical-align: middle;
 406 }
 407
 408 .notifications_empty{
 409     display: none;
 410     text-align: center;
 411 }
 412 .notifications_title{
 413     display: block;
 414 }
 415
 416 .notifications_date{
 417     color: #95a5a6;
 418     font-size: .85em;
 419     margin-top: 3px;
 420 }
 421 .notifications
 422 {
 423   .border-radius(@borderRadius);
 424   .transition(@transitionDefault opacity);
 425   background: @colorClouds;
 426   border: 1px solid @colorSilver;
 427   left: 10px;
 428   opacity: 0;
 429  // position: absolute;
 430   //top: -999px;
 431
 432   &:after
 433   {
 434     border: 10px solid transparent;
 435     border-bottom-color: @colorPeterRiver;
 436     content: '';
 437     display: block;
 438     height: 0;
 439     left: 10px;
 440     position: absolute;
 441     top: -20px;
 442     width: 0;
 443   }
 444
 445   h3,
 446   .show-all
 447   {
 448     background: @colorPeterRiver;
 449     color: @colorWhite;
 450     margin: 0;
 451     padding: 10px;
 452     width: 350px;
 453   }
 454
 455   h3
 456   {
 457     cursor: default;
 458     font-size: 1.05em;
 459     font-weight: normal;
 460   }
 461
 462   .show-all
 463   {
 464     display: block;
 465     text-align: center;
 466     text-decoration: none;
 467
 468     &:hover,
 469     &:focus
 470     {
 471       text-decoration: underline;
 472     }
 473   }
 474
 475   .notifications-list
 476   {
 477     list-style: none;
 478     margin: 0;
 479     overflow: hidden;
 480     padding: 0;
 481
 482     .item
 483     {
 484       .transition-transform(@transitionDefault);
 485       border-top: 1px solid @colorSilver;
 486       color: @colorAsbestos;
 487       cursor: default;
 488       display: block;
 489       padding: 10px;
 490       position: relative;
 491       white-space: nowrap;
 492       width: 350px;
 493
 494       &:before,
 495       .details,
 496       .button-dismiss
 497       {
 498         display: inline-block;
 499         vertical-align: middle;
 500       }
 501
 502       &:before
 503       {
 504         .border-radius(50%);
 505         background: @colorPeterRiver;
 506         content: '';
 507         height: 8px;
 508         width: 8px;
 509       }
 510
 511       .details
 512       {
 513         margin-left: 10px;
 514         white-space: normal;
 515         width: 280px;
 516
 517         .title,
 518         .date
 519         {
 520           display: block;
 521         }
 522
 523         .date
 524         {
 525           color: @colorConcrete;
 526           font-size: .85em;
 527           margin-top: 3px;
 528         }
 529       }
 530
 531       .button-dismiss
 532       {
 533         color: @colorSilver;
 534         font-size: 2.25em;
 535
 536         &:hover,
 537         &:focus
 538         {
 539           color: @colorConcrete;
 540         }
 541       }
 542
 543       &.no-data
 544       {
 545         display: none;
 546         text-align: center;
 547
 548         &:before
 549         {
 550           display: none;
 551         }
 552       }
 553
 554       &.expired
 555       {
 556         color: @colorSilver;
 557
 558         &:before
 559         {
 560           background: @colorSilver;
 561         }
 562
 563         .details
 564         {
 565           .date
 566           {
 567             color: @colorSilver;
 568           }
 569         }
 570       }
 571
 572       &.dismissed
 573       {
 574         .transform(translateX(100%));
 575       }
 576     }
 577   }
 578
 579   &.empty
 580   {
 581     .notifications-list
 582     {
 583       .no-data
 584       {
 585         display: block;
 586         padding: 10px;
 587       }
 588     }
 589   }
 590 }
 591
 592 /* variables */
 593 @colorClouds: #ecf0f1;
 594 @colorSilver: #bdc3c7;
 595 @colorWhite: #fefefe;
 596 @colorPeterRiver: #3498db;
 597 @colorConcrete: #95a5a6;
 598 @colorAsbestos: #7f8c8d;
 599 @colorWetAsphalt: #34495e;
 600
 601 @borderRadius: 2px;
 602
 603 @transitionDefault: 0.25s ease-out 0.10s;
 604
 605 /* mixins */
 606 .background-clip(@value: border-box)
 607 {
 608     -moz-background-clip: @value;
 609     -webkit-background-clip: @value;
 610     background-clip: @value;
 611 }
 612
 613 .border-radius(@value: 5px)
 614 {
 615     -moz-border-radius: @value;
 616     -webkit-border-radius: @value;
 617     border-radius: @value;
 618     .background-clip(padding-box);
 619 }
 620
 621 .transform(@value)
 622 {
 623   -webkit-transform: @value;
 624   -moz-transform: @value;
 625   -ms-transform: @value;
 626   -o-transform: @value;
 627   transform: @value;
 628 }
 629
 630 .transition(@value: all 0.25s ease-out)
 631 {
 632   -webkit-transition: @value;
 633   -moz-transition: @value;
 634   -o-transition: @value;
 635   transition: @value;
 636 }
 637
 638 .transition-transform(@transition: 0.25s ease-out)
 639 {
 640   -webkit-transition: -webkit-transform @transition;
 641   -moz-transition: -moz-transform @transition;
 642   -o-transition: -o-transform @transition;
 643   transition: transform @transition;
 644 }
 645
 646 .tab-cross-sign{
 647         position:relative;
 648     margin-left: 126px;
 649         top:-70px;
 650          @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
 651          top:-70px;
 652         }
 653 }
 654
 655 #tab-cross-sign-icon{
 656     margin: 48px 0px 0px 0px;
 657     width: 16.1px;
 658     border-bottom-width:0px;
 659     padding: 6px 6px 6px 3px;
 660 }