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