| 提交 | 用户 | 时间 | ||
| 58d006 | 1 | .sidebar.sidebar-fixed { |
| A | 2 | position: fixed; |
| 3 | top: auto; | |
| 4 | float: none !important; | |
| 5 | ||
| 6 | z-index: @zindex-sidebar-fixed;//???! | |
| 7 | ||
| 8 | &:before { | |
| 9 | height: 5000px; | |
| 10 | top: auto; | |
| 11 | bottom: auto; | |
| 12 | } | |
| 13 | } | |
| 14 | ||
| 15 | //for sidebar scroll style 2, touch device | |
| 16 | .sidebar-scroll-native { | |
| 17 | overflow-y: scroll !important; | |
| 18 | overflow-x: hidden; | |
| 19 | } | |
| 20 | ||
| 21 | //android's default browser has a problem with "top: auto" when fixed | |
| 22 | body.mob-safari { | |
| 23 | .sidebar.sidebar-fixed { | |
| 24 | top: @navbar-min-height; | |
| 25 | } | |
| 26 | @media (max-width: @screen-topbar-down) { | |
| 27 | .navbar-fixed-top:not(.navbar-collapse) + .main-container .sidebar-fixed { | |
| 28 | top: (@navbar-min-height * 2); | |
| 29 | } | |
| 30 | } | |
| 31 | //also when .navbar is fixed, .responsive sidebar becomes automatically fixed | |
| 32 | @media (max-width: @grid-float-breakpoint-max) { | |
| 33 | .navbar-fixed-top + .main-container .sidebar.responsive { | |
| 34 | top: @navbar-min-height; | |
| 35 | } | |
| 36 | } | |
| 37 | @media (max-width: @screen-topbar-down) { | |
| 38 | .navbar-fixed-top + .main-container .sidebar.responsive { | |
| 39 | top: (@navbar-min-height * 2); | |
| 40 | } | |
| 41 | } | |
| 42 | } | |
| 43 | ||
| 44 | /** | |
| 45 | //http://updates.html5rocks.com/2012/09/Stacking-Changes-Coming-to-position-fixed-elements | |
| 46 | //webkit & Chrome22+ special case | |
| 47 | //webkit is not following the standard specs as of Chrome22+ | |
| 48 | @media screen and (-webkit-min-device-pixel-ratio:0) { | |
| 49 | //like it happens in Firefox&IE, we expect when we set "z-index:auto" for fixed position .sidebar, | |
| 50 | //the child .submenu elements "z-index" is independent | |
| 51 | //and for example a "z-index:1031" .submenu appears on top of a fixed .navbar with "z-index:1030" | |
| 52 | //and a "z-index:1010" .popover appears on top of ".sidebar" but below ".submenu" | |
| 53 | //but webkit defines a new stacking context on "fixed" position elements(.sidebar here) | |
| 54 | //and the above doesn't happen, in fact .submenu inside fixed .sidebar with "z-index:auto" will appear below everything | |
| 55 | //so we set a good(?) "z-index" for .sidebar, but still it's not as good as standard specs (such as in Firefox) | |
| 56 | //and we may need other workarounds! | |
| 57 | //and you may change it based on your needs | |
| 58 | ||
| 59 | //it's possible have standard functionality in Chrome by going to: | |
| 60 | //chrome://flags/#fixed-position-creates-stacking-context | |
| 61 | //changing "Fixed position elements create stacking contexts" to "Disabled" | |
| 62 | //and removing the following rules | |
| 63 | //and assignning a higher "@submenu-zindex" | |
| 64 | ||
| 65 | .sidebar.sidebar-fixed { | |
| 66 | z-index: @zindex-sidebar-fixed;//???! | |
| 67 | ||
| 68 | &::before { | |
| 69 | height: 5000px; | |
| 70 | top: auto; | |
| 71 | bottom: auto; | |
| 72 | } | |
| 73 | } | |
| 74 | } | |
| 75 | */ | |
| 76 | ||
| 77 | ||
| 78 | ||
| 79 | ||
| 80 | //************************************************************************************ | |
| 81 | //remove the following to disable fixed sidebar (style1 - default) on smaller devices | |
| 82 | //if you also want to disable fixed breadcrumbs on smalelr devices, refer to breadcrumbs.less | |
| 83 | ||
| 84 | @media only screen and (max-width: @grid-float-breakpoint-max) { | |
| 85 | .responsive.sidebar-fixed { | |
| 86 | left: auto; | |
| 87 | margin-left: auto; | |
| 88 | } | |
| 89 | ||
| 90 | //if `.menu-toggler` button is inside `fixed .navbar` let sidebar become fixed as well | |
| 91 | .navbar-fixed-top + .main-container > .responsive { | |
| 92 | position: fixed; | |
| 93 | left: auto; | |
| 94 | margin-left: auto; | |
| 95 | //-moz-backface-visibility: hidden; | |
| 96 | } | |
| 97 | //but if `.menu-toggler` button is inside .main-container, then `fixed .navbar` should have no effect | |
| 98 | .navbar-fixed-top + .main-container > .menu-toggler + .responsive { | |
| 99 | position: absolute; | |
| 100 | left: (@sidebar-width); | |
| 101 | margin-left: -(@sidebar-width); | |
| 102 | //-moz-backface-visibility: visible; | |
| 103 | } | |
| 104 | //unless specified as fixed | |
| 105 | .navbar-fixed-top + .main-container > .menu-toggler + .responsive.sidebar-fixed { | |
| 106 | position: fixed; | |
| 107 | left: auto; | |
| 108 | margin-left: auto; | |
| 109 | //-moz-backface-visibility: hidden; | |
| 110 | } | |
| 111 | } | |
| 112 | ||
| 113 | @media only screen and (max-width: @grid-float-breakpoint-max) { | |
| 114 | .sidebar.responsive.sidebar-fixed { | |
| 115 | position: fixed; | |
| 116 | left: auto; | |
| 117 | margin-left: auto; | |
| 118 | } | |
| 119 | .main-container .menu-toggler.fixed { | |
| 120 | position: fixed; | |
| 121 | left: auto; | |
| 122 | z-index: @zindex-sidebar-fixed - 1; | |
| 123 | //-moz-backface-visibility: hidden; | |
| 124 | } | |
| 125 | ||
| 126 | //for responsive style # 2 | |
| 127 | //becuase ".sidebar.responsive-max" is "position: relative" & "margin-left: -190px" | |
| 128 | .sidebar.sidebar-fixed.responsive-max { | |
| 129 | position: fixed; | |
| 130 | left: auto; | |
| 131 | margin-left: auto; | |
| 132 | } | |
| 133 | } | |
