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

   1 /*-
   2  * ================================================================================
   3  * eCOMP Portal
   4  * ================================================================================
   5  * Copyright (C) 2017 AT&T Intellectual Property
   6  * ================================================================================
   7  * Licensed under the Apache License, Version 2.0 (the "License");
   8  * you may not use this file except in compliance with the License.
   9  * You may obtain a copy of the License at
  10  *
  11  *      http://www.apache.org/licenses/LICENSE-2.0
  12  *
  13  * Unless required by applicable law or agreed to in writing, software
  14  * distributed under the License is distributed on an "AS IS" BASIS,
  15  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16  * See the License for the specific language governing permissions and
  17  * limitations under the License.
  18  * ================================================================================
  19  */
  20  .header-section {
  21   position: relative;
  22   z-index: 999;
  23 }
  24
  25 .logo-image {
  26           .ecomp-logo;
  27           display: inline-block;
  28           vertical-align: middle;
  29           margin-top: -3px;
  30       }
  31
  32 .portal-title {
  33   font-weight: 400;
  34   font-family: arial !important;
  35   font-size: 18px;
  36 }
  37
  38
  39 .megamenu-tabs .megamenu__item {
  40         padding: 0 0;
  41 }
  42 .megamenu-tabs .megamenu__item span {
  43     font-size: 18px;
  44 }
  45
  46 .submenu-tabs {
  47    line-height:50px;
  48 }
  49 .submenu-tabs .sub__menu{
  50   top:54px;
  51   padding-top: 10px;
  52
  53   padding-left: 20px;
  54
  55   .third-level-title{
  56     padding-left: 10px;
  57     margin-bottom: 10px;
  58   }
  59 }
  60
  61 .submenu-tabs .sub__menu .tabsbid__item{
  62   width:100%
  63 }
  64
  65 .top-megamenu .megamenu-tabs ul{
  66         width:98%;
  67         list-style: none;
  68 }
  69
  70 .megaMenuContainer {
  71   margin-top: 0;
  72   min-height: 50px;
  73   overflow: visible;
  74 }
  75
  76 .megaMenuDataObject {
  77   float:  left;
  78   width:  100%;
  79 }
  80
  81 .parentmenu-tabs {
  82   height: 55px;
  83 }
  84
  85 .menu-section {
  86   float: left;
  87 }
  88
  89 .controlCls{
  90   font-size: .975rem;
  91   color: #666;
  92   display: inline-block;
  93   font-family: arial;
  94   cursor: pointer;
  95   height: 37px;
  96   line-height: 37px;
  97   padding-bottom: 10px;
  98   vertical-align: middle;
  99   width: 100%;
 100 }
 101
 102
 103 .controlCls:hover{
 104   color:#199DDF !important;
 105 }
 106
 107 .login-section {
 108   float:  right;
 109   min-width:150px;
 110 }
 111
 112 .login-snippet-text {
 113   display: inline-block;
 114   font-size:  12px;
 115   font-weight: bold;
 116   margin-left:  5px;
 117   overflow: hidden;
 118   max-height: 60px;
 119   max-width:  120px;
 120   padding-top: 20px;
 121   margin-top: 0;
 122   white-space: nowrap;
 123 }
 124
 125 .megamenu__item {
 126   width: 100px;
 127 }
 128
 129 .megamenu-item-top {
 130   line-height:55px;
 131 }
 132
 133
 134 .newrow {
 135   clear: left;
 136 }
 137
 138 .header-columns{
 139   -webkit-column-count:4;
 140   -moz-column-rule: 1px outset #D3D3D3;
 141   -moz-column-count:4;
 142   column-count: 4;
 143   line-height: 12px;
 144   max-height: 500px;
 145   overflow-x: hidden;
 146   overflow-y:hidden;
 147   column-gap: 13px;
 148   column-rule: 1px outset #D3D3D3;
 149
 150
 151 }
 152
 153 .header-columns li{
 154   -webkit-column-break-inside: avoid;
 155   break-inside: avoid;
 156   //-webkit-page-break-inside: avoid;
 157   page-break-inside: avoid;
 158
 159   margin-top: 0px !important;
 160
 161 }
 162
 163 .header-columns-div{
 164   width:100%;
 165   margin-left: 12px;
 166   margin-top: 12px;
 167   &:hover{
 168     .level3-favorites-icon-inactive {
 169       opacity: 1;
 170       -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 171       filter: alpha(opacity=100);
 172       -moz-opacity: 1;
 173       -khtml-opacity: 1;
 174     }
 175   }
 176 }
 177
 178
 179 .header-level4-div{
 180   width:100%;
 181   margin-left: 12px;
 182   margin-top: 12px;
 183   &:hover{
 184     .level4-favorites-icon-inactive {
 185       opacity: 1;
 186       -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 187       filter: alpha(opacity=100);
 188       -moz-opacity: 1;
 189       -khtml-opacity: 1;
 190     }
 191   }
 192 }
 193
 194 .favorites-icon-active {
 195   position: relative;
 196   margin-top: 5px;
 197   margin-left: 5px;
 198   top: 3px;
 199   color: @i;
 200 }
 201
 202 .level3-favorites-icon-inactive {
 203   .favorites-icon-inactive;
 204   opacity: 0;
 205   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 206   filter: alpha(opacity=0);
 207   -moz-opacity: 0;
 208   -khtml-opacity: 0;
 209 }
 210
 211 .level4-favorites-icon-inactive {
 212   .favorites-icon-inactive;
 213   opacity: 0;
 214   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 215   filter: alpha(opacity=0);
 216   -moz-opacity: 0;
 217   -khtml-opacity: 0;
 218 }
 219
 220 .favorites-icon-inactive {
 221   position: relative;
 222   margin-top: 5px;
 223   margin-left: 5px;
 224   top: 3px;
 225   color: @o;
 226 }
 227
 228 .favorites-window-empty {
 229   width: 100%;
 230   height: auto;
 231   display:flex;
 232   justify-content:center;
 233   align-items:center;
 234   margin: auto;
 235   text-align: center;
 236
 237   .largeText {
 238     font-weight: 400;
 239     font-family: arial !important;
 240     font-size: 18px;
 241     text-align: center;
 242     color: @o;
 243   }
 244
 245   .normal {
 246     color: @o;
 247     font-size: 14px;
 248     text-align: center;
 249   }
 250
 251
 252 }
 253 .favorites-window {
 254   width: 100%;
 255   height: auto;
 256   //margin: auto;
 257   font-size: 14px !important;
 258   display: flex;
 259   font-family: arial;
 260   margin-top: 25px;
 261   margin-left: 25px;
 262   z-index: 1000;
 263
 264   .fav-links {
 265     margin-right: 25px;
 266   }
 267
 268   .largeText {
 269     font-weight: 400;
 270     font-family: arial !important;
 271     font-size: 18px;
 272     text-align: center;
 273     color: @o;
 274   }
 275
 276   a:link, a:active, a:hover {
 277     margin-left: 3px;
 278     margin-right: 20px;
 279     text-decoration: none;
 280   }
 281
 282   a:hover {
 283     color: @z;
 284   }
 285 }
 286
 287
 288
 289  .notifications-count
 290   {
 291     .border-radius(50%);
 292     background:#db3434;
 293     color: @colorWhite;
 294     font: normal .85em 'Lato';
 295     height: 16px;
 296
 297     position: absolute;
 298     right: -7px;
 299     text-align: center;
 300     top: -8px;
 301     width: 16px;
 302   }
 303
 304   .notification-header{
 305     border-bottom: 1px solid #b4b4b4;
 306     padding: 10px 40px 0px 40px;
 307   }
 308   .notification-heading{
 309   font-family: arial;
 310     font-size: 24px;
 311     padding-top: 15px;
 312     margin-bottom: 1rem;
 313   }
 314   .notificationBox{
 315       border-bottom: 1px solid #b4b4b4;
 316
 317   }
 318
 319   .notification-info-icon{
 320       padding-top: 41px;
 321     font-size: 47px;
 322   }
 323   .notification-text {
 324     line-height: 15px;
 325     margin: 0;
 326     padding: 0 0 24px 0;
 327     text-align: center;
 328         font-family: arial;
 329     font-size: 16px;
 330     }
 331
 332 #icon-user-small{
 333         display: inline-block;
 334     vertical-align: middle;
 335     width: 20px;
 336     padding-top: 20px;
 337 }
 338
 339 .notificationBox .icon-circle-action-close {
 340     cursor: pointer;
 341     font-size: 16px;
 342     }
 343
 344     .notification-close {
 345     padding: 2px 2px 0px 0px;
 346     float: right;
 347     }
 348
 349  #fav-icon{
 350         color: #ffb81c;
 351         font-size: 80px;
 352  }
 353
 354  .edit-user-button{
 355     margin-top:5px;
 356     display: inline;
 357     margin-left:2px;
 358     width: 20px;
 359  }
 360
 361  .log-out-button{
 362     margin-top:5px;
 363     display: inline;
 364     margin-left:10px;
 365     width: 20px;
 366  }
 367
 368  .new-button {
 369     margin-left:5px;
 370     float: left;
 371     display: block;
 372     width: 80px;
 373     height: 25px;
 374     background: #0574ac!important;
 375     padding: 6px;
 376     text-align: center;
 377     border-radius: 5px;
 378     color: white;
 379     font-size:13px;
 380 }