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   .notification-header{
 201     border-bottom: 1px solid #b4b4b4;
 202     padding: 10px 40px 0px 40px;
 203   }
 204   .notification-heading{
 205   font-family: Omnes-ECOMP-W02, Arial;
 206     font-size: 24px;
 207     padding-top: 15px;
 208     margin-bottom: 1rem;
 209   }
 210   .notificationBox{
 211       border-bottom: 1px solid #b4b4b4;
 212
 213   }
 214
 215   .notification-info-icon{
 216       padding-top: 41px;
 217     font-size: 47px;
 218   }
 219   .notification-text {
 220     line-height: 15px;
 221     margin: 0;
 222     padding: 0 0 24px 0;
 223     text-align: center;
 224         font-family: Omnes-ECOMP-W02, Arial;
 225     font-size: 16px;
 226     }
 227
 228
 229
 230         .notificationBox .icon-circle-action-close {
 231             cursor: pointer;
 232             font-size: 16px;
 233             font-family: "Omnes-ECOMP-W02",Arial
 234     }
 235
 236         .notification-close {
 237             padding: 2px 2px 0px 0px;
 238             float: right;
 239     }
 240   #notification-flag{
 241         font-size: 20px;
 242         color: white;
 243         vertical-align: middle;
 244   }
 245   #notification-flag:hover{
 246         color:silver
 247   }
 248  .notifications-list
 249   {
 250     list-style: none;
 251     margin: 0;
 252     overflow: auto;
 253     height: 250px;
 254     width: 270px;
 255     padding: 0;
 256
 257
 258     .item:hover{
 259         background-color:#eee;
 260     }
 261     .item
 262     {
 263       .transition-transform(@transitionDefault);
 264       border-bottom: 1px solid @colorSilver;
 265       color: @colorAsbestos;
 266       cursor: default;
 267       display: block;
 268       padding: 10px;
 269       position: relative;
 270       white-space: nowrap;
 271       width: 250px;
 272       font-family: "Omnes-ECOMP-W02",Arial;
 273          &:before,
 274         .details,
 275         .button-dismiss
 276         {
 277                 display: inline-block;
 278                 vertical-align: middle;
 279         }
 280          .icon{
 281                 display:inline-block;
 282         .important
 283         {
 284                 .border-radius(50%);
 285                 background: red;
 286                 content: '';
 287                 height: 8px;
 288                 width: 8px;
 289                 display:block;
 290         }
 291         .normal
 292         {
 293                 .border-radius(50%);
 294                 background: @colorPeterRiver;
 295                 content: '';
 296                 height: 8px;
 297                 width: 8px;
 298                 display:block;
 299         }
 300           }
 301       .details
 302       {
 303         margin-left: 10px;
 304         white-space: normal;
 305         width: 200px;
 306         font-size:12px;
 307
 308         .title,
 309         .date
 310         {
 311           display: block;
 312           font-weight:bold;
 313         }
 314                 .message-body{
 315                         display: block;
 316                 }
 317         .date
 318         {
 319           color: @colorConcrete;
 320           font-size: .85em;
 321           margin-top: 3px;
 322         }
 323       }
 324
 325       .button-dismiss
 326       {
 327         color: @colorSilver;
 328         font-size: 15px;
 329
 330         &:hover,
 331         &:focus
 332         {
 333           color: @colorConcrete;
 334         }
 335       }
 336
 337       &.no-data
 338       {
 339         display: none;
 340         text-align: center;
 341
 342         &:before
 343         {
 344           display: none;
 345         }
 346       }
 347
 348       &.expired
 349       {
 350         color: @colorSilver;
 351
 352         &:before
 353         {
 354           background: @colorSilver;
 355         }
 356
 357         .details
 358         {
 359           .date
 360           {
 361             color: @colorSilver;
 362           }
 363         }
 364       }
 365
 366       &.dismissed
 367       {
 368         .transform(translateX(100%));
 369       }
 370     }
 371   }
 372
 373 #header-user-div{
 374     vertical-align: middle;
 375     margin-top:20px;
 376 }
 377
 378 #header-user-icon{
 379         display: inline-block;
 380     vertical-align: middle;
 381     width: 20px;
 382     cursor: pointer;
 383     font-size:22px;
 384 }
 385 .b2b-header-tabs .header__item.b2b-headermenu a.menu__item{
 386         font-family:"Omnes-ECOMP-W02", Arial;
 387 }
 388 .b2b-header-tabs .header-tertiary li a{
 389         display:inline;
 390         padding-left: 3px;
 391 }
 392 .b2b-header-tabs .header-secondary .header-subitem.active .header-tertiary{
 393         padding:20px;
 394         font-size:15px;
 395 }
 396
 397 .b2b-header-tabs .header__item.notification{
 398         float:right;
 399 }
 400
 401 .b2b-header-tabs .header__items{
 402         width:90%;
 403 }
 404
 405 .b2b-header-tabs .header-secondary, .b2b-header-tabs .header-tertiary{
 406         width:100%;
 407
 408 }
 409
 410 .third-level-menu{
 411 column-count: 4;
 412     line-height: 12px;
 413     max-height: 500px;
 414     overflow-x: hidden;
 415     overflow-y: hidden;
 416     column-gap: 13px;
 417     column-rule: 1px outset #d2d2d2;
 418     margin-left:20px;
 419 }
 420
 421
 422
 423 .third-level-menu a{
 424  color:black;
 425 }
 426
 427 .b2b-header-tabs .third-level-menu li a {
 428     color: #333;
 429     display: inline-grid;
 430     padding: 7px 15px;
 431     max-width: 228px;
 432     font-family:"Omnes-ECOMP-W02", Arial;
 433 }
 434
 435 .b2b-header-tabs .third-level-menu li{
 436     display: inline-block;
 437     width:100%;
 438     border-bottom: 1px solid #d2d2d2;
 439 }
 440
 441
 442 .b2b-header-tabs .header-secondary .header-subitem a.menu__item{
 443         font-size:16px;
 444 }
 445
 446 .third-level-title{
 447         font-size:15px;
 448         font-weight: 700;
 449 }
 450
 451 .notification-div{
 452         width:15px;
 453         font-size:23px;
 454         cursor: pointer;
 455 }
 456
 457 .notification-content{
 458         line-height: normal;
 459         right: 167px;
 460         min-height: 122px;
 461         height: auto;
 462         width: auto;
 463 }
 464
 465 .header-user-icon{
 466         color:white;
 467         font-size:20px;
 468         display:inline-block;
 469 }
 470 #reg-header-snippet .reg-profileDetails .reg-userEmail-value .reg-userEmail-value-spn,
 471 #reg-header-snippet .reg-profileDetails .reg-userRole-value .reg-userRole-value-spn,
 472 #reg-header-snippet .reg-profileDetails .reg-userLastLogin-value .reg-userLastLogin-value-spn,
 473 #reg-header-snippet .reg-profileDetails  .reg-userAppRoles-value .reg-userAppRoles-value-spn{
 474         font-family: "Omnes-ECOMP-W02",Arial !important;
 475 }
 476
 477 .reg-Details-table{
 478         list-style: none;
 479         border-bottom: 1px solid #bbb;
 480         padding-bottom: 20px;
 481 }
 482
 483 .reg-userName-table-cell{
 484         font-weight:bold;
 485         font-size:15px;
 486         line-height:1.6 !important;
 487
 488 }
 489
 490 #header-favorites ul li{
 491         width:100%;
 492 }
 493
 494 .display-userAppRoles-label span{
 495         font-family:"Omnes-ECOMP-W02", Arial;
 496 }