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