catalog-ui/src/app/directives/ecomp-header/ecomp-header.less

   1 @first-level-color: #067ab4;
   2 @second-level-color: #f8f8f8;
   3
   4 @first-level-height: 60px;
   5 @second-level-height: 60px;
   6 @third-four-level-height: 370px;
   7
   8 @max-item-width: 250px;
   9
  10 .sdc-ecomp-header-wrapper {
  11
  12     position: absolute;
  13     top: 0;
  14     right: 0;
  15     left: 0;
  16     z-index: 999;
  17
  18     ul {
  19         margin: 0;
  20         padding: 0;
  21     }
  22
  23     .sdc-ecomp-header {
  24
  25         background-color: @first-level-color;
  26         height: @first-level-height;
  27         line-height: @first-level-height;
  28         vertical-align: middle;
  29         display: flex;
  30         flex-direction: row;
  31         padding: 0 20px;
  32
  33         .sdc-ecomp-menu {
  34             flex-grow: 98;
  35         }
  36
  37     }
  38
  39     /* LEVEL 1 */
  40     .sdc-ecomp-menu-top-level {
  41         list-style: none;
  42
  43         .sdc-ecomp-menu-top-level-item:first-child {
  44             margin-left: 0;
  45         }
  46
  47         .sdc-ecomp-menu-top-level-item {
  48              display: inline-block;
  49              margin: 0 20px;
  50              position: relative;
  51              a {
  52                  .p_14_m;
  53                  text-decoration: none;
  54              }
  55
  56             span {
  57                 &.selected {
  58                     position: absolute;
  59                     bottom: 0;
  60                     width: 0;
  61                     height: 0;
  62                     border-left: 15px solid transparent;
  63                     border-right: 15px solid transparent;
  64                     border-bottom: 15px solid @second-level-color;
  65                 }
  66             }
  67          }
  68     }
  69
  70     /* LEVEL 2 */
  71     .sdc-ecomp-menu-second-level {
  72         background-color: @second-level-color;
  73         box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.33);
  74         height: @second-level-height;
  75         list-style: none;
  76         line-height: @second-level-height;
  77         vertical-align: middle;
  78         display: flex;
  79         flex-direction: row;
  80         padding: 0 20px;
  81         position: fixed;
  82         left: 0;
  83         right: 0;
  84
  85         .sdc-ecomp-menu-second-level-item:first-child {
  86             margin-left: 0;
  87         }
  88
  89         .sdc-ecomp-menu-second-level-item {
  90             display: inline-block;
  91             height: @second-level-height;
  92             line-height: @second-level-height;
  93
  94             &.sdc-ecomp-menu-item-hover {
  95                 border-bottom: 4px solid #067ab4;
  96             }
  97
  98             a {
  99                 .m_14_r;
 100                 text-decoration: none;
 101                 text-align:center;
 102                 padding: 0 20px;
 103                 display: block;
 104
 105                 &:hover {
 106                     .s_14_r;
 107                     font-weight:bold;
 108                 }
 109
 110                 &:active {
 111                     font-weight: bold;
 112                 }
 113
 114                 /* fix jump when hovering text */
 115                 &:after {
 116                     display:block;
 117                     content:attr(title);
 118                     font-weight:bold;
 119                     height:1px;
 120                     color:transparent;
 121                     overflow:hidden;
 122                     visibility:hidden;
 123                 }
 124             }
 125
 126         }
 127
 128     }
 129
 130     /* LEVEL 3 */
 131     ul.sdc-ecomp-menu-third-level {
 132         background-color:  #ffffff;
 133         box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
 134         min-height: @third-four-level-height;
 135         list-style: none;
 136
 137         display: flex;
 138         flex-direction: row;
 139         /*flex-wrap: wrap;*/
 140         position: fixed;
 141         top: @first-level-height + @second-level-height;
 142         left: 0;
 143         right: 0;
 144         padding: 0 40px;
 145
 146         li.sdc-ecomp-menu-third-level-item {
 147             height: 40px;
 148             line-height: 40px;
 149             position: relative;
 150             /*width: @max-item-width;*/
 151             max-width: @max-item-width;
 152
 153             .sdc-ecomp-menu-third-level-title {
 154                 .m_14_m;
 155                 text-decoration: none;
 156                 text-align: left;
 157                 display: block;
 158                 padding: 0 20px;
 159                 line-height: 20px;
 160                 margin-top: 20px;
 161                 font-weight: bold;
 162                 cursor: pointer;
 163             }
 164
 165             .sdc-ecomp-menu-four-level-seperator {
 166                 position: absolute;
 167                 border-right: solid 1px #e5e5e5;
 168                 height: @third-four-level-height - 20;
 169                 top: 10px;
 170             }
 171         }
 172
 173         li.sdc-ecomp-menu-third-level-item:first-child {
 174             .sdc-ecomp-menu-four-level-seperator {
 175                 border: none;
 176             }
 177         }
 178     }
 179
 180     /* LEVEL 4 */
 181     ul.sdc-ecomp-menu-four-level {
 182         display: flex;
 183         flex-direction: column;
 184         margin-top: 10px;
 185
 186         li.sdc-ecomp-menu-four-level-item {
 187             display: block;
 188             /*width: @max-item-width;*/
 189             max-width: @max-item-width;
 190             line-height: 20px;
 191
 192             a {
 193                 .m_14_r;
 194                 text-decoration: none;
 195                 text-align: left;
 196                 display: block;
 197
 198                 &:hover {
 199                     .s_14_r;
 200                     font-weight: bold;
 201                 }
 202             }
 203         }
 204     }
 205
 206 }
 207
 208 .sdc-ecomp-logo-wrapper {
 209     flex-grow: 1;
 210     .p_18_m;
 211     white-space: nowrap;
 212     min-width: 210px;
 213     text-align: left;
 214     position: relative;
 215
 216     .sdc-ecomp-logo {
 217         background-image: url("/assets/styles/images/att_logo_white.png");
 218         background-repeat: no-repeat;
 219         display: inline-block;
 220         vertical-align: middle;
 221         width: 55px;
 222         height: 55px;
 223     }
 224
 225     .sdc-ecomp-header-version {
 226         .c_16;
 227         .opacity(0.8);
 228         position: absolute;
 229         top: 34px;
 230         line-height: 20px;
 231         left: 56px;
 232     }
 233
 234     a.sdc-ecomp-header-title {
 235         .p_24;
 236         text-decoration: none;
 237     }
 238 }
 239
 240
 241 .sdc-ecomp-user-wrapper {
 242
 243     flex-grow: 1;
 244     .p_14_m;
 245     white-space: nowrap;
 246     display: flex;
 247     flex-direction: row;
 248     align-items: center;
 249     height: @first-level-height;
 250
 251     .sdc-ecomp-user-icon {
 252         margin-right: 20px;
 253         .tlv-sprite;
 254         .tlv-sprite.user;
 255     }
 256
 257     .sdc-ecomp-user-details {
 258         display: flex;
 259         flex-direction: column;
 260     }
 261
 262     .sdc-ecomp-user-details-name-role {
 263         line-height: 20px;
 264
 265         .sdc-ecomp-user-details-name {
 266             max-width: 160px;
 267             overflow: hidden;
 268             text-overflow: ellipsis;
 269             white-space: nowrap;
 270             vertical-align: bottom;
 271
 272             .bold;
 273             display: inline-block;
 274         }
 275
 276         .sdc-ecomp-user-details-role {
 277             .bold;
 278             display: inline-block;
 279             margin-left: 6px;
 280
 281             &:before {
 282                 content: '';
 283                 margin-right: 8px;
 284                 border-left: 1px solid @color_m;
 285             }
 286         }
 287     }
 288
 289     .sdc-ecomp-user-details-last-login {
 290         .font-type._3;
 291         display: block;
 292         line-height: 20px;
 293         height: 20px;
 294     }
 295
 296 }