diff --git a/Makefile b/Makefile
index 0fb9a11d37..c8a7b55465 100644
--- a/Makefile
+++ b/Makefile
@@ -3,4 +3,4 @@
all: release
release:
- @sass -I scss/ scss/framework-with-default-theme.scss:dist/framework-with-theme.css
+ @sass -I scss/ scss/framework.scss:dist/framework.css
diff --git a/dist/framework-theme-default.css b/dist/framework-theme-default.css
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/dist/framework-with-theme.css b/dist/framework.css
similarity index 96%
rename from dist/framework-with-theme.css
rename to dist/framework.css
index 1f896e115d..490699b004 100644
--- a/dist/framework-with-theme.css
+++ b/dist/framework.css
@@ -32,6 +32,7 @@ body {
right: 0;
bottom: 0;
left: 0;
+ margin: 0;
font: 14px/1.25 "Helvetica Neue", sans-serif; }
a {
@@ -41,6 +42,16 @@ ul {
margin: 0;
padding: 0; }
+body > section {
+ position: relative;
+ z-index: 100;
+ width: 100%;
+ min-width: 100%;
+ max-width: 100%;
+ height: 100%;
+ min-height: 100%;
+ max-height: 100%; }
+
main {
position: fixed;
top: 0;
@@ -60,12 +71,6 @@ main > * {
.content-padded {
padding: 10px; }
-.hide {
- display: none; }
-
-.show {
- display: block; }
-
.ptr-capable {
-webkit-user-drag: element; }
@@ -84,15 +89,24 @@ main > * {
.ptr-content .refreshing {
display: none; }
+/* the page content the panel should move around */
+.panel-page-container {
+ left: 100px; }
+
+/* the container of panel content to show */
.panel-content {
width: 17em;
min-height: 100%;
- max-height: none;
+ max-height: 100%;
border-width: 0;
position: absolute;
top: 0;
display: block; }
+.panel-reveal {
+ z-index: 0;
+ left: -17em; }
+
.button {
position: relative;
display: block;
@@ -517,3 +531,6 @@ a.list-item {
.ptr-content {
background: #eee; }
+
+.panel-content {
+ background: #eee; }
diff --git a/example/alerts.html b/example/alerts.html
index 7c71be2118..d4fd9d14df 100644
--- a/example/alerts.html
+++ b/example/alerts.html
@@ -6,7 +6,7 @@
-
+
diff --git a/example/angular/index.html b/example/angular/index.html
index f820fc2fec..7ea60902c0 100644
--- a/example/angular/index.html
+++ b/example/angular/index.html
@@ -6,7 +6,7 @@
-
+
diff --git a/example/button-groups.html b/example/button-groups.html
index f89338e659..f41b24d06b 100644
--- a/example/button-groups.html
+++ b/example/button-groups.html
@@ -6,7 +6,7 @@
-
+
diff --git a/example/buttons.html b/example/buttons.html
index b404857258..02232c2f6e 100644
--- a/example/buttons.html
+++ b/example/buttons.html
@@ -6,7 +6,7 @@
-
+
diff --git a/example/events.html b/example/events.html
index 0b52f9869f..b6f2538731 100644
--- a/example/events.html
+++ b/example/events.html
@@ -5,7 +5,7 @@
-
+
diff --git a/example/footers.html b/example/footers.html
index dfc2e70a06..be7d0889b7 100644
--- a/example/footers.html
+++ b/example/footers.html
@@ -6,7 +6,7 @@
-
+
diff --git a/example/grids.html b/example/grids.html
index 1b2e1d953a..3de43246ba 100644
--- a/example/grids.html
+++ b/example/grids.html
@@ -6,7 +6,7 @@
-
+
diff --git a/example/headers.html b/example/headers.html
index 57f281f61c..ff1799c6c8 100644
--- a/example/headers.html
+++ b/example/headers.html
@@ -6,7 +6,7 @@
-
+
diff --git a/example/image-swipe.html b/example/image-swipe.html
index 4995f5e1c2..88942b4c1a 100644
--- a/example/image-swipe.html
+++ b/example/image-swipe.html
@@ -6,7 +6,7 @@
-
+
diff --git a/example/index.html b/example/index.html
index 3b20b80823..d344842b2e 100644
--- a/example/index.html
+++ b/example/index.html
@@ -6,7 +6,7 @@
-
+
diff --git a/example/input-slider.html b/example/input-slider.html
index 5cc2ab84eb..adea453c98 100644
--- a/example/input-slider.html
+++ b/example/input-slider.html
@@ -6,7 +6,7 @@
-
+
diff --git a/example/input-text.html b/example/input-text.html
index e481213d10..95884968aa 100644
--- a/example/input-text.html
+++ b/example/input-text.html
@@ -6,7 +6,7 @@
-
+
diff --git a/example/input-toggle.html b/example/input-toggle.html
index 3ea80b9a21..17cc62f1c7 100644
--- a/example/input-toggle.html
+++ b/example/input-toggle.html
@@ -6,7 +6,7 @@
-
+
diff --git a/example/lists.html b/example/lists.html
index cd7a89658e..2b5c209194 100644
--- a/example/lists.html
+++ b/example/lists.html
@@ -6,7 +6,7 @@
-
+
diff --git a/example/modals.html b/example/modals.html
index 13daa4232f..55ca5e2110 100644
--- a/example/modals.html
+++ b/example/modals.html
@@ -6,7 +6,7 @@
-
+
diff --git a/example/panels.html b/example/panels.html
index c1fbf3f17e..1bdf93961e 100644
--- a/example/panels.html
+++ b/example/panels.html
@@ -6,24 +6,25 @@
-
+
-
+
-
+
diff --git a/example/popovers.html b/example/popovers.html
index a6c0e7a993..db7f3074cf 100644
--- a/example/popovers.html
+++ b/example/popovers.html
@@ -6,7 +6,7 @@
-
+
diff --git a/example/pull-to-refresh.html b/example/pull-to-refresh.html
index 673bd43dbd..9592a311b3 100644
--- a/example/pull-to-refresh.html
+++ b/example/pull-to-refresh.html
@@ -6,7 +6,7 @@
-
+
diff --git a/example/tab-bars.html b/example/tab-bars.html
index 43958a7ae6..d4c45c0229 100644
--- a/example/tab-bars.html
+++ b/example/tab-bars.html
@@ -6,7 +6,7 @@
-
+
diff --git a/scss/framework-theme-default.scss b/scss/framework-theme.scss
similarity index 91%
rename from scss/framework-theme-default.scss
rename to scss/framework-theme.scss
index ce645db0d8..d4d9399cba 100755
--- a/scss/framework-theme-default.scss
+++ b/scss/framework-theme.scss
@@ -11,4 +11,5 @@
"framework/theme/icon",
"framework/theme/listview",
"framework/theme/pull-to-refresh",
+ "framework/theme/panel",
"framework/theme/table";
diff --git a/scss/framework-with-default-theme.scss b/scss/framework-with-default-theme.scss
deleted file mode 100644
index 0ccdb5ad1d..0000000000
--- a/scss/framework-with-default-theme.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import "framework-structure";
-@import "framework-theme-default";
\ No newline at end of file
diff --git a/scss/framework.scss b/scss/framework.scss
new file mode 100644
index 0000000000..88a6629af9
--- /dev/null
+++ b/scss/framework.scss
@@ -0,0 +1,2 @@
+@import "framework-structure";
+@import "framework-theme";
\ No newline at end of file
diff --git a/scss/framework/_structure-variables.scss b/scss/framework/_structure-variables.scss
index 781bdfbd7a..4e07993a0b 100644
--- a/scss/framework/_structure-variables.scss
+++ b/scss/framework/_structure-variables.scss
@@ -28,3 +28,5 @@ $barPaddingLandscape : 5px;
// Lists
$listItemBorder: 1px solid #ddd;
+// Panels
+$panelViewWidth: 17em;
\ No newline at end of file
diff --git a/scss/framework/structure/_base.scss b/scss/framework/structure/_base.scss
index 4dff9a6253..154e982d58 100644
--- a/scss/framework/structure/_base.scss
+++ b/scss/framework/structure/_base.scss
@@ -11,6 +11,7 @@ body {
right: 0;
bottom: 0;
left: 0;
+ margin: 0;
font: 14px/1.25 "Helvetica Neue", sans-serif;
}
@@ -21,6 +22,17 @@ a {
ul { margin: 0; padding: 0; }
+body > section {
+ position: relative;
+ z-index: 100;
+ width: 100%;
+ min-width: 100%;
+ max-width: 100%;
+ height: 100%;
+ min-height: 100%;
+ max-height: 100%;
+}
+
main {
position: fixed;
top: 0;
@@ -44,9 +56,3 @@ main > * {
padding: $contentPadding;
}
-.hide {
- display: none;
-}
-.show {
- display: block;
-}
\ No newline at end of file
diff --git a/scss/framework/structure/_panel.scss b/scss/framework/structure/_panel.scss
index 5f92939b49..e29009152e 100644
--- a/scss/framework/structure/_panel.scss
+++ b/scss/framework/structure/_panel.scss
@@ -1,14 +1,28 @@
+
+/* the page content the panel should move around */
+.panel-page-container {
+
+ left: 100px;
+}
+
+
+/* the container of panel content to show */
.panel-content {
- width: 17em;
+ width: $panelViewWidth;
min-height: 100%;
- max-height: none;
+ max-height: 100%;
border-width: 0;
position: absolute;
top: 0;
display: block;
}
-.panel-content {
+.panel-reveal {
+ z-index: 0;
+ left: $panelViewWidth * -1;
+}
+
+.panel-reveal-open {
}
\ No newline at end of file
diff --git a/scss/framework/theme/_panel.scss b/scss/framework/theme/_panel.scss
new file mode 100644
index 0000000000..a7d74fc992
--- /dev/null
+++ b/scss/framework/theme/_panel.scss
@@ -0,0 +1,4 @@
+
+.panel-content {
+ background: #eee;
+}
\ No newline at end of file