mirror of https://github.com/twbs/ratchet.git
Build mobile apps with simple HTML, CSS, and JS components.
http://goratchet.com/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
58 lines
1.6 KiB
58 lines
1.6 KiB
/* Shelf |
|
-------------------------------------------------- */ |
|
/* Exposable shelf docked to the left for primary app navigation */ |
|
.shelf { |
|
position: fixed; |
|
z-index: 10; |
|
box-sizing: border-box; |
|
|
|
top: 0px; |
|
left: 0px; |
|
|
|
/* it would be great to use a percentage here for the width, but our |
|
hide and show animations are based on -webkit-transform which needs |
|
a pixel translation amount */ |
|
width: 200px; |
|
height: 100%; |
|
|
|
background-color: #393939; |
|
background-image: -webkit-linear-gradient(top, #393939 0, #2b2b2b 100%); |
|
background-image: linear-gradient(to bottom, #393939 0, #2b2b2b 100%); |
|
border-top: 1px solid #000; |
|
border-bottom-width: 0; |
|
box-shadow: inset 0 0px 20px 0px rgba(0, 0, 0, .6); |
|
|
|
/* hide it normally */ |
|
-webkit-transform: translate3d(-200px, 0, 0); |
|
transform: translate3d(-200px, 0, 0); |
|
|
|
-webkit-transition-property: translate3d; |
|
transition-property: translate3d; |
|
-webkit-transition-duration: .2s; |
|
transition-duration: .2s; |
|
-webkit-transition-timing-function: ease-out; |
|
transition-timing-function: ease-out; |
|
} |
|
|
|
.shelf.exposed { |
|
-webkit-transform: translate3d(0px, 0, 0); |
|
transform: translate3d(0px, 0, 0); |
|
} |
|
|
|
body.shelf_exposed .bar-title, body.shelf_exposed .content, body.shelf_exposed .bar-tab { |
|
-webkit-transform: translate3d(200px, 0, 0); |
|
transform: translate3d(200px, 0, 0); |
|
} |
|
|
|
/* Overrides when items are in the shelf */ |
|
.shelf .tab-inner { |
|
width: 100%; |
|
height: auto; |
|
-webkit-box-orient: vertical; |
|
box-orient: vertical; |
|
} |
|
|
|
/* Padding all around is now needed when tab items are in a shelf */ |
|
.shelf .tab-item { |
|
padding: 20px; |
|
}
|
|
|