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         display: inline-block;
 218         vertical-align: middle;
 219         width: 55px;
 220         height: 55px;
 221     }
 222
 223     .sdc-ecomp-header-version {
 224         .c_16;
 225         .opacity(0.8);
 226         position: absolute;
 227         top: 34px;
 228         line-height: 20px;
 229         left: 56px;
 230     }
 231
 232     a.sdc-ecomp-header-title {
 233         .p_24;
 234         text-decoration: none;
 235     }
 236 }
 237
 238
 239 .sdc-ecomp-user-wrapper {
 240
 241     flex-grow: 1;
 242     .p_14_m;
 243     white-space: nowrap;
 244     display: flex;
 245     flex-direction: row;
 246     align-items: center;
 247     height: @first-level-height;
 248
 249     .sdc-ecomp-user-icon {
 250         margin-right: 20px;
 251         .tlv-sprite;
 252         .tlv-sprite.user;
 253     }
 254
 255     .sdc-ecomp-user-details {
 256         display: flex;
 257         flex-direction: column;
 258     }
 259
 260     .sdc-ecomp-user-details-name-role {
 261         line-height: 20px;
 262
 263         .sdc-ecomp-user-details-name {
 264             max-width: 160px;
 265             overflow: hidden;
 266             text-overflow: ellipsis;
 267             white-space: nowrap;
 268             vertical-align: bottom;
 269
 270             .bold;
 271             display: inline-block;
 272         }
 273
 274         .sdc-ecomp-user-details-role {
 275             .bold;
 276             display: inline-block;
 277             margin-left: 6px;
 278
 279             &:before {
 280                 content: '';
 281                 margin-right: 8px;
 282                 border-left: 1px solid @color_m;
 283             }
 284         }
 285     }
 286
 287     .sdc-ecomp-user-details-last-login {
 288         .font-type._3;
 289         display: block;
 290         line-height: 20px;
 291         height: 20px;
 292     }
 293
 294 }