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