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

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