catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.less

   1 @import "../../../../../assets/styles/variables";
   2 @import "../../../../../assets/styles/variables-old";
   3 @import "../../../../../assets/styles/mixins_old";
   4 @import "../../../../../assets/styles/sprite";
   5
   6 .top-nav {
   7   position: fixed;
   8   top: @header_height;
   9   background-color: @main_color_p;
  10   .box-shadow(0px 1px 3px 0px rgba(0, 0, 0, 0.33));
  11   width: 100%;
  12   height: @top_nav_height;
  13   line-height: @top_nav_height;
  14   z-index: 10;
  15   display: flex;
  16   flex-direction: row;
  17   align-items: center;
  18
  19   .asdc-app-title-wrapper {
  20     flex-grow: 1;
  21     line-height: 16px;
  22     margin: 0 20px;
  23
  24     a.asdc-app-title {
  25       //.m_18_r;
  26       text-decoration: none;
  27     }
  28
  29     .asdc-version {
  30       //.m_12_r;
  31       .opacity(0.8);
  32       line-height: 14px;
  33       flex-grow: 1;
  34     }
  35
  36   }
  37
  38   ul.top-menu {
  39     list-style-type: none;
  40     margin: 0 0 0 20px;
  41     padding: 0;
  42     flex-grow: 999;
  43
  44     & > li {
  45       float: left;
  46       cursor: pointer;
  47       line-height: 50px;
  48       height: 50px;
  49       padding: 0 20px;
  50
  51       &.selected {
  52         border-bottom: solid 4px @main_color_a;
  53
  54         a {
  55           color: @func_color_s;
  56         }
  57       }
  58
  59       /*&:hover {
  60           border-bottom: solid 4px @main_color_a;
  61       }*/
  62
  63       a {
  64         font-family: @font-opensans-medium;
  65         color: @main_color_m;
  66         font-size: 16px;
  67         display: block;
  68         text-align: center;
  69         text-decoration: none;
  70       }
  71
  72       &.triangle-dropdown {
  73         padding: 0;
  74         position: relative;
  75
  76         div.triangle {
  77           margin-top: 15px;
  78           border-radius: 2px;
  79           width: 17px;
  80           height: 18px;
  81
  82           //temp use - until new triangle gets in
  83           line-height: 18px;
  84           text-align: center;
  85           font-size: 10px;
  86
  87           &:hover {
  88             background-color: rgba(156, 156, 156, 0.2);
  89
  90             span {
  91               .arrow-right-hover;
  92             }
  93           }
  94         }
  95
  96         + li a {
  97           font-size: 16px;
  98         }
  99
 100         ul.sub-menu {
 101           .perfect-scrollbar;
 102           position: absolute;
 103           left: 0;
 104           top: 40px;
 105
 106           overflow-x: hidden;
 107           overflow-y: auto;
 108           max-height: 0;
 109           -webkit-transition: max-height 200ms ease-in;
 110           -moz-transition: max-height 200ms ease-in;
 111           -o-transition: max-height 200ms ease-in;
 112           transition: max-height 200ms ease-in;
 113
 114           padding: 0;
 115           background-color: white;
 116           visibility: hidden;
 117
 118           li {
 119
 120             height: 35px;
 121             background-color: white;
 122             font-size: 13px;
 123             width: 150px;
 124             line-height: 35px;
 125             padding: 0 10px;
 126
 127             &.disabled {
 128               opacity: 1;
 129             }
 130             &.selected {
 131               background-color: @tlv_color_v;
 132               font-weight: bold;
 133             }
 134             &:hover {
 135               color: @main_color_a;
 136             }
 137             span {
 138               height: 35px;
 139               width: 130px;
 140               display: inline;
 141               white-space: nowrap;
 142               overflow: hidden;
 143             }
 144           }
 145         }
 146         &.item-click:hover ul.sub-menu,
 147         &.item-click:active ul.sub-menu {
 148           visibility: visible;
 149           z-index: 100;
 150           max-height: 500px;
 151           border: 1px solid @func_color_b;
 152           border-radius: 2px;
 153           box-shadow: 0px 2px 2px 0px rgba(24, 24, 25, 0.1);
 154
 155           div ul {
 156
 157           }
 158         }
 159       }
 160     }
 161
 162   }
 163
 164   .top-search {
 165     position: relative;
 166     flex-grow: 1;
 167     padding: 0 20px;
 168
 169     input.search-text {
 170       .border-radius(2px);
 171       width: 245px;
 172       height: 32px;
 173       line-height: 32px;
 174       border: 1px solid @main_color_o;
 175       outline: none;
 176       text-indent: 10px;
 177
 178       &::-webkit-input-placeholder { font-style: italic; } /* Safari, Chrome and Opera */
 179       &:-moz-placeholder { font-style: italic; } /* Firefox 18- */
 180       &::-moz-placeholder { font-style: italic; } /* Firefox 19+ */
 181       &:-ms-input-placeholder { font-style: italic; } /* IE 10+ */
 182       &:-ms-input-placeholder { font-style: italic; } /* Edge */
 183       /*   font-style: italic;
 184      }*/
 185       /* Firefox 18- */
 186       &::-moz-placeholder {
 187         font-style: italic;
 188       }
 189       /* Firefox 19+ */
 190       &:-ms-input-placeholder {
 191         font-style: italic;
 192       }
 193       /* IE 10+ */
 194       &:-ms-input-placeholder {
 195         font-style: italic;
 196       }
 197       /* Edge */
 198     }
 199
 200     .magnification {
 201       position: absolute;
 202       top: 19px;
 203       right: 26px;
 204     }
 205
 206   }
 207
 208   .notification-icon {
 209     cursor: pointer;
 210     flex-grow: 1;
 211     margin: 0 10px 6px 0;
 212     .sprite-new;
 213     .vsp-list-icon;
 214
 215     &:hover {
 216       .vsp-list-icon-hover;
 217     }
 218
 219     &:active {
 220       .vsp-list-icon-active;
 221     }
 222
 223   }
 224
 225 }