gerrit.onap Code Review - ccsdk/apps.git/blob

   1 .menu_min() {
   2         &.sidebar {
   3                 width:@sidebar-min-width;
   4                 &:before {
   5                         width:@sidebar-min-width;
   6                 }
   7                 + .main-content {
   8                         margin-left:(@sidebar-min-width);
   9                         .breadcrumbs.fixed , .breadcrumbs.breadcrumbs-fixed { left:(@sidebar-min-width); }
  10                 }
  11         }
  12
  13         .nav-list a {
  14           .badge , .label {
  15                 position:relative;
  16                 top:-1px;
  17                 right:auto;
  18                 left:4px;
  19           }
  20         }
  21
  22         .nav-list .submenu .submenu a {
  23                 .badge , .label {
  24                 top:0;
  25                 }
  26         }
  27
  28
  29         .nav-list > li {
  30           > a {
  31                 position:relative;
  32                  > .menu-text {
  33                         display:none;
  34
  35                         position:absolute;
  36                         left:(@sidebar-min-width - 1);
  37                         top:-2px;
  38                         width:(@sidebar-width - 16);
  39                         height:40px;
  40
  41                         line-height:38px;
  42                         background-color:@menumin-bg;
  43                         z-index:121;
  44
  45                         .box-shadow(@menumin-shadow);
  46                         border:1px solid @menumin-border;
  47
  48                         padding-left:12px;
  49                 }
  50                 &.dropdown-toggle > .menu-text {
  51                         .box-shadow(none);
  52                         border:none;
  53                         top:-1px; left:@sidebar-min-width;
  54                         width:(@sidebar-width - 16);
  55                         border-bottom:1px solid @menumin-text-border;
  56                 }
  57                 .arrow {
  58                         display:none;
  59                 }
  60
  61                 &:hover:before {/* the right side border on hover */
  62                         width:2px;
  63                 }
  64           }
  65
  66          &:hover > a {
  67                 color:@menu-focus-color;
  68                 > .menu-text {
  69                         display:block;
  70            }
  71          }
  72          &.active > a > .menu-text {
  73                 border-left-color:@menu-focus-color;
  74          }
  75          &.open > a  {
  76                 background-color:@menu-open-bg;
  77                 color:@menu-color;
  78          }
  79          &.open.active > a  {
  80                 background-color:@menu-active-bg;
  81          }
  82          &.open:hover > a {
  83                 color:@menu-focus-color;
  84          }
  85          &.active > a  {
  86                 color:@menu-active-color;
  87          }
  88
  89          &.active > a:after  { /* the caret */
  90                 border-width:10px 6px;
  91                 top:8px;
  92          }
  93          &.active.open > a:after {
  94                 display:block;
  95          }
  96          &.active.open li.active > a:after {
  97                 display:none;
  98          }
  99
 100
 101
 102          > .submenu {
 103                 background:@submenu-bg;
 104                 position:absolute; z-index:120;
 105                 left:(@sidebar-min-width - 1); top:-2px;
 106
 107                 width:(@sidebar-width - 14);
 108                 border:1px solid @menumin-border;
 109
 110                 .box-shadow(@menumin-shadow);
 111
 112                 padding-top:40px;
 113                 padding-bottom:2px;
 114
 115                 display:none !important;
 116
 117                 &:before {
 118                          /* hide the tree like submenu in minimized mode */
 119                         display:none;
 120                 }
 121
 122                 li {
 123                   &:before {
 124                         display:none;
 125                   }
 126
 127                   > a {
 128                         //border-left:none;
 129                         margin-left:0;
 130                         padding-left:24px;
 131                         > [class*="icon-"]:first-child {
 132                                 left:4px;
 133                         }
 134                   }
 135
 136                 }
 137          }
 138
 139
 140
 141          &:hover > .submenu {
 142                 display:block !important;
 143          }
 144          &.active > .submenu {
 145                 border-left-color:@menu-active-color;
 146          }
 147   }
 148
 149
 150
 151
 152
 153   //sidebar shortcuts
 154   .sidebar-shortcuts {
 155         position:relative;
 156   }
 157   .sidebar-shortcuts-mini {
 158         display:block;
 159   }
 160
 161   .sidebar-shortcuts-large {
 162         display:none;
 163         position:absolute;
 164         z-index:20;
 165         top:-1px;
 166         left:@sidebar-min-width - 1;
 167
 168         width:(@sidebar-width - 8);
 169
 170         padding:0 2px 1px;
 171
 172         background-color:@submenu-bg;
 173         .box-shadow(@menumin-shadow);
 174         border:1px solid @menumin-border;
 175   }
 176   .sidebar-shortcuts:hover .sidebar-shortcuts-large{
 177         display:block;
 178   }
 179
 180   .sidebar-collapse { /* minimized collapse button */
 181         &:before {
 182                 left:5px; right:5px;
 183         }
 184         > [class*="icon-"] {
 185                 font-size:13px;
 186                 padding:0 4px;
 187                 line-height:15px;
 188
 189                 border-width:1px;
 190                 border-color:darken(@menumin-icon-border, 5%);
 191         }
 192   }
 193
 194
 195
 196
 197   .nav-list > li > .submenu {
 198         li > .submenu > li {
 199                 > a {/*3rd level*/
 200                         margin-left:0px;
 201                         padding-left:30px;
 202                 }
 203                 > .submenu > li > a {/*4th level*/
 204                         margin-left:0px;
 205                         padding-left:45px;
 206                 }
 207         }
 208
 209         li.active > a:after {
 210                 display:none;
 211         }
 212  }
 213
 214
 215  .nav-list li.active.open > .submenu > li.active > a:after {
 216         display: none;
 217  }
 218 }
 219
 220
 221
 222
 223 .menu-min {
 224         .menu_min();
 225 }