| 提交 | 用户 | 时间 | ||
| 58d006 | 1 | .enable_collapsible_responsive_menu() when(@enable-collapsible-responsive-menu = true) { |
| A | 2 | |
| 3 | //3rd style responsive menu (the collapsible menu) | |
| 4 | ||
| 5 | @media only screen and (min-width: @grid-float-breakpoint) { | |
| 6 | .sidebar.navbar-collapse { | |
| 7 | max-height: none; | |
| 8 | } | |
| 9 | } | |
| 10 | ||
| 11 | @media only screen and (max-width: @grid-float-breakpoint-max) { | |
| 12 | .sidebar.navbar-collapse { | |
| 13 | position: relative; | |
| 14 | float: none !important;//to override .rtl's | |
| 15 | margin-top: auto !important;//to override inline h-sidebar margin-top! | |
| 16 | z-index: 1;//for box-shadow to be visible | |
| 17 | ||
| 18 | width: 100% !important; | |
| 19 | max-height: @pre-scrollable-max-height; | |
| 20 | margin-left: 0; | |
| 21 | margin-right: 0; | |
| 22 | ||
| 23 | &:before { | |
| 24 | display: none; | |
| 25 | } | |
| 26 | ||
| 27 | .nav-list > li:last-child { | |
| 28 | border-bottom-width: 0; | |
| 29 | } | |
| 30 | .nav-list > li > a { | |
| 31 | padding-top: 10px !important;//to override .compact, etc | |
| 32 | padding-bottom: 10px !important; | |
| 33 | ||
| 34 | line-height: 20px; | |
| 35 | height: @nav-item-height + 2; | |
| 36 | } | |
| 37 | .nav-list > li:before { | |
| 38 | height: @nav-item-height + 4; | |
| 39 | } | |
| 40 | .nav-list > li.active:after { | |
| 41 | display: none; | |
| 42 | } | |
| 43 | ||
| 44 | //-li > .arrow | |
| 45 | li > .arrow { | |
| 46 | display: none !important; | |
| 47 | } | |
| 48 | ||
| 49 | .nav-list li > .submenu { | |
| 50 | border-left-width: 0; | |
| 51 | } | |
| 52 | ||
| 53 | .sidebar-toggle { | |
| 54 | display: none; | |
| 55 | } | |
| 56 | .sidebar-shortcuts { | |
| 57 | padding: 3px 0 6px; | |
| 58 | max-height: none; | |
| 59 | border-bottom-width: 0; | |
| 60 | } | |
| 61 | ||
| 62 | + .main-content { | |
| 63 | margin-left: 0 !important; | |
| 64 | margin-right: 0 !important;//to override rtl's | |
| 65 | .breadcrumb { | |
| 66 | margin-left: @breadcrumb-margin-left; | |
| 67 | } | |
| 68 | } | |
| 69 | ||
| 70 | //first sidebar scroll style | |
| 71 | .nav-wrap + .ace-scroll { | |
| 72 | display: none; | |
| 73 | } | |
| 74 | ||
| 75 | &.menu-min { | |
| 76 | .nav-list > li > .submenu { | |
| 77 | position: relative; | |
| 78 | left: auto; | |
| 79 | top: auto; | |
| 80 | width: auto; | |
| 81 | z-index: auto; | |
| 82 | ||
| 83 | margin-top: auto; | |
| 84 | padding-top: 0; | |
| 85 | padding-bottom: 0; | |
| 86 | ||
| 87 | border-width: 1px 0 0 0 !important; | |
| 88 | .box-shadow(none) !important;//to override .rtl's | |
| 89 | ||
| 90 | &:before { | |
| 91 | display: block; | |
| 92 | } | |
| 93 | > li:before { | |
| 94 | display: block; | |
| 95 | } | |
| 96 | li > a { | |
| 97 | > .menu-icon { | |
| 98 | left: 10px; | |
| 99 | } | |
| 100 | } | |
| 101 | ||
| 102 | //hide the extra pixel | |
| 103 | &:after { | |
| 104 | display: none; | |
| 105 | } | |
| 106 | } | |
| 107 | ||
| 108 | .nav-list > li > .submenu li > a { | |
| 109 | padding: 7px 0 9px 37px; | |
| 110 | } | |
| 111 | .nav-list > li > .submenu li > .submenu > li > a { | |
| 112 | margin-left: 20px; | |
| 113 | padding-left: 22px; | |
| 114 | } | |
| 115 | .nav-list > li > .submenu li > .submenu > li > .submenu > li > a { | |
| 116 | margin-left: 20px; | |
| 117 | padding-left: 38px; | |
| 118 | } | |
| 119 | ||
| 120 | ||
| 121 | ||
| 122 | .nav-list > li > a:hover:before {// the left side border on hover | |
| 123 | width:3px; | |
| 124 | } | |
| 125 | ||
| 126 | .nav-list > li > a { | |
| 127 | text-align: left; | |
| 128 | padding-left: 7px; | |
| 129 | } | |
| 130 | .nav-list > li > a > .menu-icon { | |
| 131 | display: inline-block; | |
| 132 | width: auto; | |
| 133 | margin-right: 2px; | |
| 134 | } | |
| 135 | .nav-list > li > a > .menu-text { | |
| 136 | position: relative; | |
| 137 | display: inline; | |
| 138 | line-height: normal; | |
| 139 | padding-left: 0; | |
| 140 | height: auto; | |
| 141 | ||
| 142 | top: auto; | |
| 143 | left: auto; | |
| 144 | z-index: auto; | |
| 145 | width: auto; | |
| 146 | ||
| 147 | border-width: 0 !important; | |
| 148 | background-color: transparent !important; | |
| 149 | ||
| 150 | .box-shadow(none) !important; | |
| 151 | } | |
| 152 | .nav-list a > .arrow { | |
| 153 | display: block; | |
| 154 | } | |
| 155 | ||
| 156 | .nav-list > li:hover > .submenu { | |
| 157 | display: none !important; | |
| 158 | } | |
| 159 | .nav-list > li.active > .submenu { | |
| 160 | display: block !important; | |
| 161 | } | |
| 162 | .nav-list > li > .submenu.nav-show { | |
| 163 | display: block !important; | |
| 164 | } | |
| 165 | .nav-list > li > .submenu.nav-hide { | |
| 166 | display: none !important; | |
| 167 | } | |
| 168 | ||
| 169 | .sidebar-shortcuts-large { | |
| 170 | display: block; | |
| 171 | position: static; | |
| 172 | .box-shadow(none) !important;//to override .rtl's; | |
| 173 | border-width: 0 !important; | |
| 174 | background-color: transparent !important; | |
| 175 | width: auto; | |
| 176 | ||
| 177 | padding: 0;//override that of .menu-min | |
| 178 | } | |
| 179 | .sidebar-shortcuts-mini { | |
| 180 | display: none; | |
| 181 | } | |
| 182 | }//menu-min | |
| 183 | ||
| 184 | ||
| 185 | .nav-list a { | |
| 186 | .badge , .label { | |
| 187 | position: relative; | |
| 188 | top: -1px; | |
| 189 | right: auto; | |
| 190 | left: 4px; | |
| 191 | } | |
| 192 | } | |
| 193 | ||
| 194 | .nav-list > li.active:after, | |
| 195 | .nav-list li.active > a:before, | |
| 196 | .nav-list li.active > a:after { | |
| 197 | display: none !important; | |
| 198 | } | |
| 199 | ||
| 200 | ||
| 201 | //.highlight | |
| 202 | .nav-list > li.highlight.active > a { | |
| 203 | &:before, &:after { | |
| 204 | display: none !important; | |
| 205 | } | |
| 206 | } | |
| 207 | } | |
| 208 | } | |
| 209 | ||
| 210 | ||
| 211 | // | |
| 212 | @media (max-width: @grid-float-breakpoint-max) and (max-height: 400px){ | |
| 213 | .sidebar.navbar-collapse { | |
| 214 | max-height: 300px; | |
| 215 | } | |
| 216 | } | |
| 217 | @media (max-width: @grid-float-breakpoint-max) and (max-height: 350px){ | |
| 218 | .sidebar.navbar-collapse { | |
| 219 | max-height: 250px; | |
| 220 | } | |
| 221 | } | |
| 222 | @media (max-width: @grid-float-breakpoint-max) and (max-height: 300px){ | |
| 223 | .sidebar.navbar-collapse { | |
| 224 | max-height: 200px; | |
| 225 | } | |
| 226 | } | |
| 227 | @media (max-width: @grid-float-breakpoint-max) and (max-height: 250px){ | |
| 228 | .sidebar.navbar-collapse { | |
| 229 | max-height: 150px; | |
| 230 | } | |
| 231 | } | |
| 232 | ||
| 233 | ||
| 234 | .enable_hover_submenu_responsive_style_3() when(@enable-submenu-hover = true) { | |
| 235 | @media (min-width: @screen-hover-menu) and (max-width: @grid-float-breakpoint-max) { | |
| 236 | .sidebar.navbar-collapse { | |
| 237 | .nav-list > li > .submenu li.hover > .submenu > li > a, | |
| 238 | .nav-list > li > .submenu li > .submenu > li.hover > .submenu > li > a { | |
| 239 | margin-left: 20px !important; | |
| 240 | } | |
| 241 | } | |
| 242 | } | |
| 243 | } | |
| 244 | .enable_hover_submenu_responsive_style_3(); | |
| 245 | ||
| 246 | ||
| 247 | //if .sidebar is .navbar-collapse, and .navbar is fixed, make .sidebar fixed as well | |
| 248 | @media (max-width: @grid-float-breakpoint-max) { | |
| 249 | .navbar-fixed-top + .main-container .sidebar.navbar-collapse { | |
| 250 | position: fixed; | |
| 251 | z-index: @zindex-sidebar-fixed; | |
| 252 | } | |
| 253 | } | |
| 254 | @media (min-width: @screen-sm-min) and (max-width: @grid-float-breakpoint-max) { | |
| 255 | .navbar-fixed-top + .main-container.container .sidebar.navbar-collapse { | |
| 256 | width: @container-sm !important; | |
| 257 | } | |
| 258 | } | |
| 259 | ||
| 260 | } | |
| 261 | .enable_collapsible_responsive_menu(); | |
| 262 | ||
| 263 | ||
