ecomp-portal-FE-common/client/app/views/header/header.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  *
  37  */
  38 .header-section {
  39   position: relative;
  40   z-index: 999;
  41 }
  42
  43 .language {
  44     float: left;
  45     margin-top: -8px;
  46 }
  47
  48
  49 .logo-image {
  50           .portal-logo;
  51           display: inline-block;
  52           vertical-align: middle;
  53           margin-top: -3px;
  54       }
  55
  56 .portal-title {
  57   font-weight: 400;
  58   font-family: "Omnes-ECOMP-W02",Arial !important;
  59   font-size: 18px;
  60   margin-left: 10px;
  61   //.c18b;
  62 }
  63
  64 .parentmenu-tabs {
  65   height: 55px;
  66 }
  67
  68 .menu-section {
  69   float: left;
  70 }
  71
  72 /* Logout control*/
  73 .controlCls{
  74   font-size: .975rem;
  75   color: @portalDGray;
  76   display: inline-block;
  77   cursor: pointer;
  78   height: 37px;
  79   line-height: 37px;
  80   padding-bottom: 10px;
  81   vertical-align: middle;
  82   width: 100%;
  83 }
  84
  85
  86 .controlCls:hover{
  87   color:@portalLBlue !important;
  88 }
  89
  90 .login-section {
  91   float:  right;
  92   margin-top:15px;
  93   min-width:150px;
  94 }
  95
  96 .login-snippet-text {
  97   display: inline-block;
  98   font-size:  12px;
  99   font-weight: bold;
 100   margin-left:  5px;
 101   overflow: hidden;
 102   max-height: 31px;
 103   max-width:  120px;
 104   padding-top: 0;
 105   margin-top: 0;
 106   font-family: "Omnes-ECOMP-W02",Arial;
 107   white-space: nowrap;
 108 }
 109
 110
 111 .newrow {
 112   clear: left;
 113 }
 114
 115 .header-columns{
 116   -webkit-column-count:4;
 117   -moz-column-rule: 1px outset @portalLGray;
 118   -moz-column-count:4;
 119   column-count: 4;
 120   line-height: 12px;
 121   max-height: 500px;
 122   overflow-x: hidden;
 123   overflow-y:hidden;
 124   column-gap: 13px;
 125   column-rule: 1px outset @portalLGray;
 126
 127
 128 }
 129
 130 .header-columns li{
 131   -webkit-column-break-inside: avoid;
 132   break-inside: avoid;
 133   //-webkit-page-break-inside: avoid;
 134   page-break-inside: avoid;
 135
 136   margin-top: 0px !important;
 137
 138 }
 139
 140 .header-columns-div{
 141   width:100%;
 142   margin-left: 12px;
 143   margin-top: 12px
 144 }
 145
 146
 147 //.favorites-icon li [class*=icon]:hover {
 148 .favorites-icon-active {
 149   position: relative;
 150   margin-top: 5px;
 151   margin-left: 5px;
 152   top: 3px;
 153   color: @funcYellow;
 154 }
 155
 156 .favorites-icon-inactive {
 157   position: relative;
 158   margin-top: 5px;
 159   margin-left: 5px;
 160   top: 3px;
 161   color: @portalDGray;
 162 }
 163
 164 .favorites-window-empty {
 165   width: 100%;
 166   height: auto;
 167   justify-content:center;
 168   align-items:center;
 169   margin: auto;
 170   text-align: center;
 171
 172   .no-fav-icon{
 173         font-weight: 400;
 174     font-size: 50px;
 175     text-align: center;
 176     color: rgb(255, 155, 0);
 177   }
 178   .largeText {
 179     font-weight: 400;
 180     font-family: Omnes-ECOMP-W02-Bold,Arial !important;
 181     font-size: 18px;
 182     text-align: center;
 183     color: @portalDGray;
 184   }
 185
 186   .normal {
 187     color: @portalDGray;
 188     font-size: 14px;
 189     text-align: center;
 190   }
 191
 192
 193 }
 194 .favorites-window {
 195   width: 100%;
 196   height: auto;
 197   //margin: auto;
 198   font-size: 14px !important;
 199   display: flex;
 200   margin-top: 25px;
 201   margin-left: 25px;
 202   z-index: 1000;
 203
 204   .fav-links {
 205     margin-right: 25px;
 206   }
 207
 208   .largeText {
 209     font-weight: 400;
 210     font-family: Omnes-ECOMP-W02-Bold,Arial !important;
 211     font-size: 18px;
 212     text-align: center;
 213     color: @portalDGray;
 214   }
 215
 216   a:link, a:active, a:hover {
 217     margin-left: 3px;
 218     margin-right: 20px;
 219     text-decoration: none;
 220   }
 221
 222   a:hover {
 223     color: @portalLBlue;
 224   }
 225 }
 226
 227
 228
 229  .notifications-count
 230   {
 231     .border-radius(50%);
 232     background:#db3434;
 233     color: @colorWhite;
 234     font-size: 10px;
 235     padding-top: 2px;
 236     height: 16px;
 237     position: absolute;
 238     right: -7px;
 239     text-align: center;
 240     top: -8px;
 241     width: 16px;
 242   }
 243
 244   .recommendations-count
 245   {
 246     .border-radius(50%);
 247     background:#db3434;
 248     color: @colorWhite;
 249     font-size: 10px;
 250     padding-top: 2px;
 251     height: 16px;
 252     position: absolute;
 253     right: -7px;
 254     text-align: center;
 255     top: -8px;
 256     width: 16px;
 257   }
 258
 259   .notification-header{
 260     border-bottom: 1px solid #b4b4b4;
 261     padding: 10px 40px 0px 40px;
 262   }
 263   .notification-heading{
 264   font-family: Omnes-ECOMP-W02, Arial;
 265     font-size: 24px;
 266     padding-top: 15px;
 267     margin-bottom: 1rem;
 268   }
 269   .notificationBox{
 270       border-bottom: 1px solid #b4b4b4;
 271
 272   }
 273
 274   .notification-info-icon{
 275       padding-top: 41px;
 276     font-size: 47px;
 277   }
 278   .notification-text {
 279     line-height: 15px;
 280     margin: 0;
 281     padding: 0 0 24px 0;
 282     text-align: center;
 283         font-family: Omnes-ECOMP-W02, Arial;
 284     font-size: 16px;
 285     }
 286
 287
 288
 289         .notificationBox .icon-circle-action-close {
 290             cursor: pointer;
 291             font-size: 16px;
 292             font-family: "Omnes-ECOMP-W02",Arial
 293     }
 294
 295         .notification-close {
 296             padding: 2px 2px 0px 0px;
 297             float: right;
 298     }
 299   #notification-flag{
 300         font-size: 20px;
 301         color: white;
 302         vertical-align: middle;
 303   }
 304   #notification-flag:hover{
 305         color:silver
 306   }
 307  .notifications-list
 308   {
 309     list-style: none;
 310     margin: 0;
 311     overflow: auto;
 312     height: 250px;
 313     width: 270px;
 314     padding: 0;
 315
 316
 317     .item:hover{
 318         background-color:#eee;
 319     }
 320     .item
 321     {
 322       .transition-transform(@transitionDefault);
 323       border-bottom: 1px solid @colorSilver;
 324       color: @colorAsbestos;
 325       cursor: default;
 326       display: block;
 327       padding: 10px;
 328       position: relative;
 329       white-space: nowrap;
 330       width: 250px;
 331       font-family: "Omnes-ECOMP-W02",Arial;
 332          &:before,
 333         .details,
 334         .button-dismiss
 335         {
 336                 display: inline-block;
 337                 vertical-align: middle;
 338         }
 339          .icon{
 340                 display:inline-block;
 341         .important
 342         {
 343                 .border-radius(50%);
 344                 background: red;
 345                 content: '';
 346                 height: 8px;
 347                 width: 8px;
 348                 display:block;
 349         }
 350         .normal
 351         {
 352                 .border-radius(50%);
 353                 background: steelblue;
 354                 content: '';
 355                 height: 8px;
 356                 width: 8px;
 357                 display:block;
 358         }
 359           }
 360       .details
 361       {
 362         margin-left: 10px;
 363         white-space: normal;
 364         width: 200px;
 365         font-size:12px;
 366
 367         .title,
 368         .date
 369         {
 370           display: block;
 371           font-weight:bold;
 372         }
 373                 .message-body{
 374                         display: block;
 375                 }
 376         .date
 377         {
 378           color: @colorConcrete;
 379           font-size: .85em;
 380           margin-top: 3px;
 381         }
 382       }
 383
 384       .button-dismiss
 385       {
 386         color: black;
 387         font-size: 15px;
 388
 389         &:hover,
 390         &:focus
 391         {
 392           color: @colorConcrete;
 393         }
 394       }
 395
 396       &.no-data
 397       {
 398         display: none;
 399         text-align: center;
 400
 401         &:before
 402         {
 403           display: none;
 404         }
 405       }
 406
 407       &.expired
 408       {
 409         color: @colorSilver;
 410
 411         &:before
 412         {
 413           background: @colorSilver;
 414         }
 415
 416         .details
 417         {
 418           .date
 419           {
 420             color: @colorSilver;
 421           }
 422         }
 423       }
 424
 425       &.dismissed
 426       {
 427         .transform(translateX(100%));
 428       }
 429     }
 430   }
 431
 432 #header-user-div{
 433     vertical-align: middle;
 434     margin-top:20px;
 435 }
 436
 437 #header-user-icon{
 438         display: inline-block;
 439     vertical-align: middle;
 440     width: 20px;
 441     cursor: pointer;
 442     font-size:22px;
 443 }
 444 .b2b-header-tabs .header__item.b2b-headermenu a.menu__item{
 445         font-family:"Omnes-ECOMP-W02", Arial;
 446 }
 447 .b2b-header-tabs .header-tertiary li a{
 448         display:inline;
 449         padding-left: 3px;
 450 }
 451 .b2b-header-tabs .header-secondary .header-subitem.active .header-tertiary{
 452         padding:20px;
 453         font-size:15px;
 454 }
 455
 456 .b2b-header-tabs .header__item.notification{
 457         float:right;
 458 }
 459
 460 .b2b-header-tabs .header__items{
 461         width:98%;
 462 }
 463
 464 .b2b-header-tabs .header-secondary, .b2b-header-tabs .header-tertiary{
 465         width:100%;
 466
 467 }
 468
 469 .b2b-header-tabs .header__item.profile{
 470         margin-right:70px;
 471         float:right;
 472         position: static;
 473 }
 474
 475 .third-level-menu{
 476 column-count: 4;
 477     line-height: 12px;
 478     overflow-x: hidden;
 479     overflow-y: hidden;
 480     column-gap: 13px;
 481     column-rule: 1px outset #d2d2d2;
 482     margin-left:20px;
 483 }
 484
 485
 486
 487 .third-level-menu a{
 488  color:black;
 489 }
 490
 491 .b2b-header-tabs .third-level-menu li a {
 492     color: #333;
 493     display: inline-flex;
 494     padding: 7px 15px;
 495     font-family:"Omnes-ECOMP-W02", Arial;
 496     margin-top:5px;
 497         margin-bottom:5px;
 498 }
 499
 500 .b2b-header-tabs .third-level-menu li{
 501     width:100%;
 502     border-bottom: 1px solid #d2d2d2;
 503 }
 504
 505
 506 .b2b-header-tabs .header-secondary .header-subitem a.menu__item{
 507         font-size:16px;
 508 }
 509
 510 .third-level-title{
 511         font-size:15px;
 512         font-weight: 700;
 513 }
 514
 515 .notification-div{
 516         width:15px;
 517         font-size:23px;
 518         cursor: pointer;
 519 }
 520
 521 .notification-content{
 522         line-height: normal;
 523         right: 167px;
 524         min-height: 122px;
 525         height: auto;
 526         width: auto;
 527 }
 528
 529 .header-user-icon{
 530         color:white;
 531         font-size:20px;
 532         display:inline-block;
 533 }
 534 #reg-header-snippet .reg-profileDetails .reg-userEmail-value .reg-userEmail-value-spn,
 535 #reg-header-snippet .reg-profileDetails .reg-userRole-value .reg-userRole-value-spn,
 536 #reg-header-snippet .reg-profileDetails .reg-userLastLogin-value .reg-userLastLogin-value-spn,
 537 #reg-header-snippet .reg-profileDetails  .reg-userAppRoles-value .reg-userAppRoles-value-spn{
 538         font-family: "Omnes-ECOMP-W02",Arial !important;
 539 }
 540
 541 .reg-Details-table{
 542         list-style: none;
 543         border-bottom: 1px solid #bbb;
 544         padding-bottom: 20px;
 545 }
 546
 547 .reg-userName-table-cell{
 548         font-weight:bold;
 549         font-size:15px;
 550         line-height:1.6 !important;
 551
 552 }
 553
 554 #header-favorites{
 555         height:200px;
 556         overflow:auto;
 557         overflow-x:hidden;
 558         -ms-overflow-x:hidden;
 559 }
 560
 561 #header-favorites ul li{
 562         width:100%;
 563 }
 564
 565 .display-userAppRoles-label{
 566         font-family:"Omnes-ECOMP-W02", Arial;
 567         white-space:nowrap;
 568 }
 569
 570 .profile-detail-extension{
 571         display:inline-block;
 572 }
 573
 574 .logout-btn-div{
 575         display:inline-block;
 576         padding-top: 8px;
 577
 578 }
 579
 580 .onap-title-logo{
 581     position: relative;
 582     top: 7px;
 583         width: 126.8px;
 584     height: 28px;
 585 }
 586
 587 .header-position {
 588         position:fixed;
 589         width: 100%;
 590         top: 0px;
 591         left: 0;
 592         background-color: #222;
 593         z-index:9999;
 594 }
 595   .reg-common-label-spn-txt {
 596         font-weight:bold;
 597 }
 598   .display-userAppRoles-label-txt{
 599         height:200px;
 600         overflow-y:auto;
 601 }
 602   .notification-history-link-txt {
 603         font-size: 14px;
 604   }
 605   .notification-common-position {
 606         float:left;
 607   }
 608   .notification-common-space {
 609         clear:both;
 610   }
 611   .notification-main-ht {
 612         height:113px;
 613   }
 614   .recommendation-bulb-txt {
 615         font-size: 22px;
 616   }
 617   .business-card-app-role{
 618         font-size: 18px;
 619         font-family: Omnes-ECOMP-W02, Arial;
 620   }