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.
59 lines
1.6 KiB
59 lines
1.6 KiB
12 years ago
|
/* 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;
|
||
|
|
}
|