renamed framework-with-theme.css to framework.css

2025-11-06 22:29:44 +08:00 · 2013-08-26 15:22:38 -05:00
parent fb1cb94de3
commit 7b55036fa7
29 changed files with 86 additions and 41 deletions
--- a/2
+++ b/2
@ -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
--- a/dist/framework-theme-default.css
+++ b/dist/framework-theme-default.css
--- a/dist/framework-with-theme.css
+++ b/dist/framework-with-theme.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; }
--- a/example/alerts.html
+++ b/example/alerts.html
@ -6,7 +6,7 @@
    <!-- Sets initial viewport load and disables zooming  -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
-    <link rel="stylesheet" href="../../dist/framework-with-theme.css">
+    <link rel="stylesheet" href="../../dist/framework.css">

  </head>
  <body>
--- a/example/angular/index.html
+++ b/example/angular/index.html
@ -6,7 +6,7 @@
    <!-- Sets initial viewport load and disables zooming  -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
-    <link rel="stylesheet" href="../../dist/framework-with-theme.css">
+    <link rel="stylesheet" href="../../dist/framework.css">
    <link rel="stylesheet" href="app.css">
    
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js"></script>
--- a/example/button-groups.html
+++ b/example/button-groups.html
@ -6,7 +6,7 @@
    <!-- Sets initial viewport load and disables zooming  -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
-    <link rel="stylesheet" href="../../dist/framework-with-theme.css">
+    <link rel="stylesheet" href="../../dist/framework.css">

  </head>
  <body>
--- a/example/buttons.html
+++ b/example/buttons.html
@ -6,7 +6,7 @@
    <!-- Sets initial viewport load and disables zooming  -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
-    <link rel="stylesheet" href="../../dist/framework-with-theme.css">
+    <link rel="stylesheet" href="../../dist/framework.css">
    <link rel="stylesheet" href="app.css">
    
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js"></script>
--- a/example/events.html
+++ b/example/events.html
@ -5,7 +5,7 @@

    <!-- Sets initial viewport load and disables zooming  -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
-    <link rel="stylesheet" href="../../dist/framework-with-theme.css">
+    <link rel="stylesheet" href="../../dist/framework.css">
    <link rel="stylesheet" href="app.css">
    <script>
    </script>
--- a/example/footers.html
+++ b/example/footers.html
@ -6,7 +6,7 @@
    <!-- Sets initial viewport load and disables zooming  -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
-    <link rel="stylesheet" href="../../dist/framework-with-theme.css">
+    <link rel="stylesheet" href="../../dist/framework.css">

  </head>
  <body>
--- a/example/grids.html
+++ b/example/grids.html
@ -6,7 +6,7 @@
    <!-- Sets initial viewport load and disables zooming  -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
-    <link rel="stylesheet" href="../../dist/framework-with-theme.css">
+    <link rel="stylesheet" href="../../dist/framework.css">

  </head>
  <body>
--- a/example/headers.html
+++ b/example/headers.html
@ -6,7 +6,7 @@
    <!-- Sets initial viewport load and disables zooming  -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
-    <link rel="stylesheet" href="../../dist/framework-with-theme.css">
+    <link rel="stylesheet" href="../../dist/framework.css">

  </head>
  <body>
--- a/example/image-swipe.html
+++ b/example/image-swipe.html
@ -6,7 +6,7 @@
    <!-- Sets initial viewport load and disables zooming  -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
-    <link rel="stylesheet" href="../../dist/framework-with-theme.css">
+    <link rel="stylesheet" href="../../dist/framework.css">

  </head>
  <body>
--- a/example/index.html
+++ b/example/index.html
@ -6,7 +6,7 @@
    <!-- Sets initial viewport load and disables zooming  -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
-    <link rel="stylesheet" href="../../dist/framework-with-theme.css">
+    <link rel="stylesheet" href="../../dist/framework.css">
    <link rel="stylesheet" href="app.css">
    
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js"></script>
--- a/example/input-slider.html
+++ b/example/input-slider.html
@ -6,7 +6,7 @@
    <!-- Sets initial viewport load and disables zooming  -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
-    <link rel="stylesheet" href="../../dist/framework-with-theme.css">
+    <link rel="stylesheet" href="../../dist/framework.css">

  </head>
  <body ng-app="peopleApp">
--- a/example/input-text.html
+++ b/example/input-text.html
@ -6,7 +6,7 @@
    <!-- Sets initial viewport load and disables zooming  -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
-    <link rel="stylesheet" href="../../dist/framework-with-theme.css">
+    <link rel="stylesheet" href="../../dist/framework.css">

  </head>
  <body ng-app="peopleApp">
--- a/example/input-toggle.html
+++ b/example/input-toggle.html
@ -6,7 +6,7 @@
    <!-- Sets initial viewport load and disables zooming  -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
-    <link rel="stylesheet" href="../../dist/framework-with-theme.css">
+    <link rel="stylesheet" href="../../dist/framework.css">

  </head>
  <body ng-app="peopleApp">
--- a/example/lists.html
+++ b/example/lists.html
@ -6,7 +6,7 @@
    <!-- Sets initial viewport load and disables zooming  -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
-    <link rel="stylesheet" href="../../dist/framework-with-theme.css">
+    <link rel="stylesheet" href="../../dist/framework.css">
    <link rel="stylesheet" href="app.css">
    
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js"></script>
--- a/example/modals.html
+++ b/example/modals.html
@ -6,7 +6,7 @@
    <!-- Sets initial viewport load and disables zooming  -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
-    <link rel="stylesheet" href="../../dist/framework-with-theme.css">
+    <link rel="stylesheet" href="../../dist/framework.css">

  </head>
  <body>
--- a/example/panels.html
+++ b/example/panels.html
@ -6,24 +6,25 @@
    <!-- Sets initial viewport load and disables zooming  -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
-    <link rel="stylesheet" href="../../dist/framework-with-theme.css">
+    <link rel="stylesheet" href="../../dist/framework.css">

  </head>
  <body>

-    <section>
+    <section class="panel-page-container">

      <header class="bar bar-header bar-dark">
        <h1 class="title">Panels</h1>
      </header>

-      <main class="has-header">
+      <main class="content-padded has-header">
        <p>A whole bunch of content</p>
+        <a class="button button-primary" href="#">Panel</a>
      </main>

    </section>

-    <section class="panel-content">
+    <section class="panel-content panel-reveal">
      Panel!
    </section>

--- a/example/popovers.html
+++ b/example/popovers.html
@ -6,7 +6,7 @@
    <!-- Sets initial viewport load and disables zooming  -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
-    <link rel="stylesheet" href="../../dist/framework-with-theme.css">
+    <link rel="stylesheet" href="../../dist/framework.css">

  </head>
  <body>
--- a/example/pull-to-refresh.html
+++ b/example/pull-to-refresh.html
@ -6,7 +6,7 @@
    <!-- Sets initial viewport load and disables zooming  -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
-    <link rel="stylesheet" href="../../dist/framework-with-theme.css">
+    <link rel="stylesheet" href="../../dist/framework.css">

  </head>
  <body>
--- a/example/tab-bars.html
+++ b/example/tab-bars.html
@ -6,7 +6,7 @@
    <!-- Sets initial viewport load and disables zooming  -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
-    <link rel="stylesheet" href="../../dist/framework-with-theme.css">
+    <link rel="stylesheet" href="../../dist/framework.css">

  </head>
  <body>
--- a/scss/framework-theme-default.scss
+++ b/scss/framework-theme-default.scss
@ -11,4 +11,5 @@
  "framework/theme/icon",
  "framework/theme/listview",
  "framework/theme/pull-to-refresh",
+  "framework/theme/panel",
  "framework/theme/table";
--- a/scss/framework-with-default-theme.scss
+++ b/scss/framework-with-default-theme.scss
@ -1,2 +0,0 @@
-@import "framework-structure";
-@import "framework-theme-default";
--- a/scss/framework.scss
+++ b/scss/framework.scss
@ -0,0 +1,2 @@
+@import "framework-structure";
+@import "framework-theme";
--- 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;
--- 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;
-}
--- 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 {

 }
--- a/scss/framework/theme/_panel.scss
+++ b/scss/framework/theme/_panel.scss
@ -0,0 +1,4 @@
+
+.panel-content {
+  background: #eee;
+}