playground
/
ratchet
mirror of https://github.com/twbs/ratchet.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

Initial CSS additions for Shelf Nav Item

pull/120/head
Peter Cottle 12 years ago
parent
cf8b87d059
commit
c023bcfb2e
5 changed files with 158 additions and 15 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      Makefile
  2. 85
      dist/ratchet.css
  3. 14
      lib/css/bars.css
  4. 12
      lib/css/base.css
  5. 58
      lib/css/shelf.css

4
Makefile
Unescape View File

@ -4,7 +4,7 @@
build:
mkdir -p dist
cat lib/css/base.css lib/css/bars.css lib/css/lists.css lib/css/forms.css lib/css/buttons.css lib/css/chevrons.css lib/css/counts.css lib/css/segmented-controllers.css lib/css/popovers.css lib/css/sliders.css lib/css/toggles.css lib/css/push.css > ./dist/ratchet.tmp.css
cat lib/css/base.css lib/css/bars.css lib/css/lists.css lib/css/forms.css lib/css/buttons.css lib/css/chevrons.css lib/css/counts.css lib/css/segmented-controllers.css lib/css/popovers.css lib/css/sliders.css lib/css/toggles.css lib/css/push.css lib/css/shelf.css > ./dist/ratchet.tmp.css
cat lib/js/*.js > ./dist/ratchet.tmp.js
@echo "/**\n * ==================================\n * Ratchet v1.0.0\n * Licensed under The MIT License\n * http://opensource.org/licenses/MIT\n * ==================================\n */\n" > ./dist/copywrite.txt
cat ./dist/copywrite.txt ./dist/ratchet.tmp.js > ./dist/ratchet.js
@ -66,4 +66,4 @@ test:
python -m SimpleHTTPServer
.PHONY: docs demo test gh-pages
.PHONY: docs demo test gh-pages

85
dist/ratchet.css vendored
Unescape View File

@ -127,12 +127,12 @@ a {
left: 0;
overflow: auto;
background-color: #fff;
-webkit-transition-property: top, bottom;
transition-property: top, bottom;
-webkit-transition-duration: .2s, .2s;
transition-duration: .2s, .2s;
-webkit-transition-timing-function: linear, linear;
transition-timing-function: linear, linear;
-webkit-transition-property: top, bottom, translate3d;
transition-property: top, bottom, translate3d;
-webkit-transition-duration: .2s, .2s, .2s;
transition-duration: .2s, .2s, .2s;
-webkit-transition-timing-function: linear, linear, ease-out;
transition-timing-function: linear, linear, ease-out;
-webkit-overflow-scrolling: touch;
}
@ -212,6 +212,13 @@ a {
box-shadow: inset 0 1px 1px -1px rgba(255, 255, 255, .8);
-webkit-box-orient: horizontal;
box-orient: horizontal;
-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;
}
/* Centered text in the .bar-title */
@ -255,6 +262,13 @@ a {
border-top: 1px solid #000;
border-bottom-width: 0;
box-shadow: inset 0 1px 1px -1px rgba(255, 255, 255, .6);
-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;
}
/* Wrapper for individual tab */
@ -1257,4 +1271,61 @@ select {
.content.slide.right {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}/* 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;
}

14
lib/css/bars.css
Unescape View File

@ -52,6 +52,13 @@
box-shadow: inset 0 1px 1px -1px rgba(255, 255, 255, .8);
-webkit-box-orient: horizontal;
box-orient: horizontal;
-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;
}
/* Centered text in the .bar-title */
@ -95,6 +102,13 @@
border-top: 1px solid #000;
border-bottom-width: 0;
box-shadow: inset 0 1px 1px -1px rgba(255, 255, 255, .6);
-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;
}
/* Wrapper for individual tab */

12
lib/css/base.css
Unescape View File

@ -119,12 +119,12 @@ a {
left: 0;
overflow: auto;
background-color: #fff;
-webkit-transition-property: top, bottom;
transition-property: top, bottom;
-webkit-transition-duration: .2s, .2s;
transition-duration: .2s, .2s;
-webkit-transition-timing-function: linear, linear;
transition-timing-function: linear, linear;
-webkit-transition-property: top, bottom, translate3d;
transition-property: top, bottom, translate3d;
-webkit-transition-duration: .2s, .2s, .2s;
transition-duration: .2s, .2s, .2s;
-webkit-transition-timing-function: linear, linear, ease-out;
transition-timing-function: linear, linear, ease-out;
-webkit-overflow-scrolling: touch;
}

58
lib/css/shelf.css
Unescape View File

@ -0,0 +1,58 @@
/* 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;
}
Write Preview
Loading…
Cancel
Save