actions
/
mdBook
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
mdBook/src/theme/stylus/nav-icons.styl

39 lines
779 B
Stylus
Raw Normal View History

Converted all css to stylus
2015-09-19 04:13:55 +08:00
.nav-chapters {
font-size: 2.5em
text-align: center
text-decoration: none
On iOS, allow scrolling to the top of the page by tapping the top of the screen * This is a built-in function of iOS Safari that didn't work because the page content was inside absolutely-positioned, scrollable divs. * The fix is to stop using absolute positioning on `.page-wrapper` and `.page`, so that the content uses static positioning and flows naturally down the page. * Consequently, `.sidebar` and `.nav-chapter` now have to use `position: fixed` in order to be positioned relative to the viewport. * This fix also enables Safari's built-in behavior of automatically hiding the top and bottom toolbars when scrolling down the page.
2017-06-05 10:58:51 +08:00
position: fixed
Converted all css to stylus
2015-09-19 04:13:55 +08:00
top: 50px /* Height of menu-bar */
bottom: 0
margin: 0
max-width: 150px
min-width: 90px
display: flex
justify-content: center
align-content: center
flex-direction: column
transition: color 0.5s
}
.mobile-nav-chapters { display: none }
.nav-chapters:hover { text-decoration: none }
On iOS, allow scrolling to the top of the page by tapping the top of the screen * This is a built-in function of iOS Safari that didn't work because the page content was inside absolutely-positioned, scrollable divs. * The fix is to stop using absolute positioning on `.page-wrapper` and `.page`, so that the content uses static positioning and flows naturally down the page. * Consequently, `.sidebar` and `.nav-chapter` now have to use `position: fixed` in order to be positioned relative to the viewport. * This fix also enables Safari's built-in behavior of automatically hiding the top and bottom toolbars when scrolling down the page.
2017-06-05 10:58:51 +08:00
.previous {
left: $sidebar-width + $page-padding
transition: left 0.5s
@media only screen and (max-width: $max-page-width-with-hidden-sidebar) {
left: $page-padding
}
}
.next { right: $page-padding }
.sidebar-hidden .previous {
left: $page-padding
}
.sidebar-visible .previous {
left: $sidebar-width + $page-padding
}