| 提交 | 用户 | 时间 | ||
| 58d006 | 1 | //side menu toggler in mobile view |
| A | 2 | @sidebar-toggler-background: #444; |
| 3 | @sidebar-toggler-color: #FFF; | |
| 4 | ||
| 5 | ||
| 6 | .main-container .menu-toggler { | |
| 7 | display: none; | |
| 8 | } | |
| 9 | ||
| 10 | .enable_responsive_menu() when(@enable-responsive-menu = true) { | |
| 11 | @duration : 0.2s; | |
| 12 | ||
| 13 | //responsive sidebar | |
| 14 | @media only screen and (max-width: @grid-float-breakpoint-max) { | |
| 15 | .sidebar.responsive:before { | |
| 16 | display: none; | |
| 17 | } | |
| 18 | ||
| 19 | .sidebar.responsive { | |
| 20 | .box-shadow(~"2px 1px 2px 0 rgba(0,0,0,0.15)"); | |
| 21 | ||
| 22 | z-index: @zindex-sidebar-fixed; | |
| 23 | ||
| 24 | overflow: hidden; | |
| 25 | max-height: 0; | |
| 26 | ||
| 27 | .transform(translateX(-@sidebar-width - 10)); | |
| 28 | //"left" or "margin-left" transition is slow on Chrome, so we use translateX | |
| 29 | -webkit-transition: -webkit-transform @duration linear 0s, max-height 0s linear @duration; | |
| 30 | -moz-transition: -moz-transform @duration linear 0s, max-height 0s linear @duration; | |
| 31 | -o-transition: -o-transform @duration linear 0s, max-height 0s linear @duration; | |
| 32 | transition: transform @duration linear 0s, max-height 0s linear @duration; | |
| 33 | ||
| 34 | ||
| 35 | position: relative; | |
| 36 | bottom: auto; | |
| 37 | //top: auto has a problem with android default browser if sidebar is fixed | |
| 38 | ||
| 39 | left: @sidebar-width; | |
| 40 | margin-left: -(@sidebar-width); | |
| 41 | //why are we doing this? | |
| 42 | //we don't use "position: absolute" so that our page's height is at least as tall as .sidebar | |
| 43 | //and therefore our page background is white when sidebar is expanded (whitened by .main-container:before) (it won't happen on position: absolute) | |
| 44 | //but "position: relative" will push ".main-content" to left | |
| 45 | //so we use negative "margin-left" on .sidebar to get more space and bring back .main-content | |
| 46 | //and then we move .sidebar again back to its place using "left" property | |
| 47 | //so it will look like the "position: absolute" alternative, but it's not | |
| 48 | } | |
| 49 | } | |
| 50 | ||
| 51 | @media (min-width: @screen-compact-menu) and (max-width: @grid-float-breakpoint-max) { | |
| 52 | .sidebar.responsive.compact { | |
| 53 | .transform(translateX(-@sidebar-compact-width - 10)); | |
| 54 | ||
| 55 | &.push_away.display + .main-content { | |
| 56 | .transform(translateX(@sidebar-compact-width)); | |
| 57 | } | |
| 58 | .navbar.navbar-fixed-top + .main-container & { | |
| 59 | &.push_away.display ~ .footer .footer-inner { | |
| 60 | .transform(translateX(@sidebar-compact-width)); | |
| 61 | } | |
| 62 | } | |
| 63 | } | |
| 64 | } | |
| 65 | ||
| 66 | @media only screen and (max-width: @grid-float-breakpoint-max) { | |
| 67 | .sidebar.responsive { | |
| 68 | &.menu-min { | |
| 69 | .transform(translateX(-@sidebar-min-width - 10)); | |
| 70 | } | |
| 71 | ||
| 72 | &.display { | |
| 73 | .transform(none) !important;//to override .rtl's | |
| 74 | overflow: visible; | |
| 75 | max-height: 2000px; | |
| 76 | ||
| 77 | -webkit-transition-delay: 0s; | |
| 78 | -moz-transition-delay: 0s; | |
| 79 | -o-transition-delay: 0s; | |
| 80 | transition-delay: 0s; | |
| 81 | } | |
| 82 | ||
| 83 | //push .main-content to left | |
| 84 | &.push_away { | |
| 85 | .box-shadow(none) !important;//to override .RTL's | |
| 86 | &:before { | |
| 87 | display: block !important; | |
| 88 | } | |
| 89 | ||
| 90 | + .main-content { | |
| 91 | -webkit-transition: -webkit-transform @duration linear 0s; | |
| 92 | -moz-transition: -moz-transform @duration linear 0s; | |
| 93 | -o-transition: -o-transform @duration linear 0s; | |
| 94 | transition: transform @duration linear 0s; | |
| 95 | } | |
| 96 | &.display + .main-content { | |
| 97 | .transform(translateX(@sidebar-width)); | |
| 98 | } | |
| 99 | &.display.menu-min + .main-content { | |
| 100 | .transform(translateX(@sidebar-min-width)); | |
| 101 | } | |
| 102 | } | |
| 103 | ||
| 104 | .navbar.navbar-fixed-top + .main-container & { | |
| 105 | &.push_away { | |
| 106 | &:before { | |
| 107 | height: 5000px; | |
| 108 | } | |
| 109 | ||
| 110 | .enable_footer_responsive_menu_push() when (@enable-footer = true) { | |
| 111 | ~ .footer .footer-inner { | |
| 112 | -webkit-transition: -webkit-transform @duration linear 0s; | |
| 113 | -moz-transition: -moz-transform @duration linear 0s; | |
| 114 | -o-transition: -o-transform @duration linear 0s; | |
| 115 | transition: transform @duration linear 0s; | |
| 116 | } | |
| 117 | &.display ~ .footer .footer-inner { | |
| 118 | .transform(translateX(@sidebar-width)); | |
| 119 | } | |
| 120 | &.display.menu-min ~ .footer .footer-inner { | |
| 121 | .transform(translateX(@sidebar-min-width)); | |
| 122 | } | |
| 123 | } | |
| 124 | .enable_footer_responsive_menu_push(); | |
| 125 | ||
| 126 | } | |
| 127 | } | |
| 128 | ||
| 129 | ||
| 130 | ||
| 131 | // &.menu-min .nav-list > li.active:after { | |
| 132 | //display: block; | |
| 133 | // } | |
| 134 | ||
| 135 | + .main-content { | |
| 136 | margin-left: 0 !important; | |
| 137 | margin-right: 0 !important;//to override rtl's | |
| 138 | } | |
| 139 | } | |
| 140 | ||
| 141 | } | |
| 142 | ||
| 143 | ||
| 144 | .enable_container_responsive_1() when(@enable-container = true) { | |
| 145 | //maybe disable transition when it is not good enough! | |
| 146 | @media only screen and (min-width: @screen-sm-min) and (max-width: @grid-float-breakpoint-max) { | |
| 147 | .main-container.container .sidebar.responsive { | |
| 148 | -webkit-transition: none; | |
| 149 | -moz-transition: none; | |
| 150 | -o-transition: none; | |
| 151 | transition: none; | |
| 152 | ||
| 153 | display: none; | |
| 154 | &:before { | |
| 155 | display: none !important; | |
| 156 | } | |
| 157 | &.display { | |
| 158 | display: block; | |
| 159 | } | |
| 160 | ||
| 161 | &.push_away { | |
| 162 | + .main-content, ~ .footer .footer-inner { | |
| 163 | -webkit-transition: none !important; | |
| 164 | -moz-transition: none !important; | |
| 165 | -o-transition: none !important; | |
| 166 | transition: none !important; | |
| 167 | ||
| 168 | .transform(none) !important; | |
| 169 | } | |
| 170 | } | |
| 171 | } | |
| 172 | } | |
| 173 | } | |
| 174 | .enable_container_responsive_1(); | |
| 175 | ||
| 176 | } | |
| 177 | .enable_responsive_menu(); | |
| 178 | ||
| 179 | ||
| 180 | ||
| 181 | //************************************************************************************ | |
| 182 | //remove the following to disable fixed sidebar (style1 - default) on smaller devices | |
| 183 | //if you also want to disable fixed breadcrumbs on smalelr devices, refer to breadcrumbs.less | |
| 184 | @media only screen and (max-width: @grid-float-breakpoint-max) { | |
| 185 | .responsive.sidebar-fixed { | |
| 186 | position: fixed; | |
| 187 | } | |
| 188 | .main-container .menu-toggler.fixed { | |
| 189 | position: fixed; | |
| 190 | left: auto; | |
| 191 | z-index: @zindex-sidebar-fixed - 1; | |
| 192 | -moz-backface-visibility: hidden; | |
| 193 | } | |
| 194 | } | |
