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

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