From 93e8b14a251c5b9d27d2a968ba3f55e7c6277a41 Mon Sep 17 00:00:00 2001
From: Rufus Pollock <rufus.pollock@okfn.org>
Date: Sun, 15 Apr 2012 16:46:59 +0100
Subject: [PATCH] [#81,css][xs]: split out grid css into its own css file.

---
 app/index.html        |  19 ++-
 css/data-explorer.css | 317 ------------------------------------------
 css/grid.css          | 315 +++++++++++++++++++++++++++++++++++++++++
 3 files changed, 328 insertions(+), 323 deletions(-)
 create mode 100644 css/grid.css

diff --git a/app/index.html b/app/index.html
index 0da14de7..db5b8917 100644
--- a/app/index.html
+++ b/app/index.html
@@ -11,17 +11,24 @@
     <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
   <![endif]-->
   <link rel="stylesheet" href="../vendor/bootstrap/2.0.2/css/bootstrap.css">
-  <link rel="stylesheet" href="../css/data-explorer.css">
-  <link rel="stylesheet" href="../css/graph.css">
-  <link rel="stylesheet" href="../css/map.css">
-  <link rel="stylesheet" href="style/demo.css">
-  <link rel="stylesheet" href="../vendor/bootstrap/2.0.2/css/bootstrap-responsive.css">
   <link rel="stylesheet" href="../vendor/leaflet/0.3.1/leaflet.css">
   <!--[if lte IE 8]>
   <link rel="stylesheet" href="../vendor/leaflet/0.3.1/leaflet.ie.css" />
   <![endif]-->
 
-  <!-- 3rd party libraries -->
+  <!-- Recline CSS components -->
+  <link rel="stylesheet" href="../css/data-explorer.css">
+  <link rel="stylesheet" href="../css/grid.css">
+  <link rel="stylesheet" href="../css/graph.css">
+  <link rel="stylesheet" href="../css/map.css">
+  <!-- /Recline CSS components -->
+
+  <!-- Custom CSS for the Data Explorer Online App -->
+  <link rel="stylesheet" href="style/demo.css">
+
+  <link rel="stylesheet" href="../vendor/bootstrap/2.0.2/css/bootstrap-responsive.css">
+
+  <!-- 3rd party JS libraries -->
   <script type="text/javascript" src="../vendor/jquery-1.7.1.js"></script>
   <script type="text/javascript" src="../vendor/underscore-1.1.6.js"></script>
   <script type="text/javascript" src="../vendor/backbone-0.5.1.js"></script>
diff --git a/css/data-explorer.css b/css/data-explorer.css
index 6cc5b0a8..766a91ec 100644
--- a/css/data-explorer.css
+++ b/css/data-explorer.css
@@ -78,320 +78,3 @@
   display: inline-block;
 }
 
-
-/**********************************************************
-  * Data Table
-  *********************************************************/
-
-.recline-grid .btn-group .dropdown-toggle {
-  padding: 1px 3px;
-  line-height: auto;
-}
-
-.recline-grid-container {
-  overflow: auto;
-  height: 550px;
-}
-
-.recline-grid {
-  border: 1px solid #ccc;
-  width: 100%;
-}
-
-.recline-grid td, .recline-grid th {
-  border-left: 1px solid #ccc;
-  padding: 3px 4px;
-  text-align: left;
-}
-
-.recline-grid tr td:first-child, .recline-grid tr th:first-child {
-  width: 20px;
-}
-
-/* direct borrowing from twitter buttons */
-.recline-grid th,
-.transform-column-view .expression-preview-table-wrapper th
-{
-  background-color: #e6e6e6;
-  background-repeat: no-repeat;
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
-  background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
-  background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
-  background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
-  background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
-  background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
-  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
-  color: #333;
-  border: 1px solid #ccc;
-  border-bottom-color: #bbb;
-  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-  -webkit-transition: 0.1s linear all;
-  -moz-transition: 0.1s linear all;
-  -ms-transition: 0.1s linear all;
-  -o-transition: 0.1s linear all;
-  transition: 0.1s linear all;
-}
-
-
-/**********************************************************
-  * Data Table Menus
-  *********************************************************/
-
-.column-header-menu, a.root-header-menu {
-  float: right;
-}
-
-.read-only a.row-header-menu {
-  display: none;
-}
-
-div.data-table-cell-content {
-  line-height: 1.2;
-  color: #222;
-  position: relative;
-}
-
-div.data-table-cell-content-numeric {
-  text-align: right;
-}
-
-a.data-table-cell-edit {
-  position: absolute;
-  top: 0;
-  right: 0;
-  display: block;
-  width: 25px;
-  height: 16px;
-  text-decoration: none;
-  background-image: url(images/edit-map.png);
-  background-repeat: no-repeat;
-  visibility: hidden;
-}
-
-a.data-table-cell-edit:hover {
-  background-position: -25px 0px;
-}
-
-.recline-grid td:hover .data-table-cell-edit {
-  visibility: visible;
-}
-
-div.data-table-cell-content-numeric > a.data-table-cell-edit {
-  left: 0px;
-  right: auto;
-}
-
-.data-table-value-nonstring {
-  color: #282;
-}
-
-.data-table-error {
-  color: red;
-}
-
-.data-table-cell-editor-editor {
-  overflow: hidden;
-  display: block;
-  width: 98%;
-  height: 3em;
-  font-family: monospace;
-  margin: 3px 0;
-}
-
-.data-table-cell-copypaste-editor {
-  overflow: hidden;
-  display: block;
-  width: 98%;
-  height: 10em;
-  font-family: monospace;
-  margin: 3px 0;
-}
-
-.data-table-cell-editor-action {
-  float: left;
-  vertical-align: bottom;
-  text-align: center;
-}
-
-.data-table-cell-editor-key {
-  font-size: 0.8em;
-  color: #999;
-}
-
-
-/**********************************************************
-  * Dialogs
-  *********************************************************/
-
-.dialog-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: #666;
-  opacity: 0.5;
-}
-
-.dialog {
-  position: fixed;
-  left: 0;
-  width: 100%;
-  text-align: center;
-}
-
-.dialog-frame {
-  margin: 0 auto;
-  text-align: left;
-  background: white;
-  border: 1px solid #3a5774;
-}
-
-.dialog-border {
-  border: 4px solid #c1d9ff;
-}
-
-.dialog-header {
-  background: #e0edfe;
-  padding: 10px;
-  font-weight: bold;
-  font-size: 1.6em;
-  color: #000;
-  cursor: move;
-}
-
-.dialog-body {
-  overflow: auto;
-  font-size: 1.3em;
-  padding: 15px;
-}
-
-.dialog-instruction {
-  padding: 0 0 7px;
-}
-
-.dialog-footer {
-  font-size: 1.3em;
-  background: #eee;
-  padding: 10px;
-}
-
-.dialog-busy {
-  width: 400px;
-  border: none;
-  -moz-border-radius: 5px;
-  -webkit-border-radius: 5px;
-  border-radius: 5px;
-}
-
-/**********************************************************
-  * Transform Dialog
-  *********************************************************/
-
-#expression-preview-tabs .ui-tabs-nav li a {
-  padding: 0.15em 1em;
-}
-
-textarea.expression-preview-code {
-  font-family: monospace;
-  height: 5em;
-  vertical-align: top;
-}
-
-.expression-preview-parsing-status {
-  color: #999;
-}
-
-.expression-preview-parsing-status.error {
-  color: red;
-}
-
-#expression-preview-tabs-preview,
-#expression-preview-tabs-help,
-#expression-preview-tabs-history,
-#expression-preview-tabs-starred {
-  padding: 5px;
-  overflow: hidden;
-}
-
-#expression-preview-tabs-preview > div,
-#expression-preview-tabs-help > div,
-#expression-preview-tabs-history > div,
-#expression-preview-tabs-starred {
-  height: 200px;
-  overflow: auto;
-}
-
-#expression-preview-tabs-preview td, #expression-preview-tabs-preview th,
-#expression-preview-tabs-help td, #expression-preview-tabs-help th,
-#expression-preview-tabs-history td, #expression-preview-tabs-history th,
-#expression-preview-tabs-starred td, #expression-preview-tabs-starred th {
-  padding: 5px;
-}
-
-.expression-preview-table-wrapper {
-  padding: 7px;
-}
-
-.expression-preview-container td {
-  padding: 2px 5px;
-  border-top: 1px solid #ccc;
-}
-
-td.expression-preview-heading {
-  border-top: none;
-  background: #ddd;
-  font-weight: bold;
-}
-
-td.expression-preview-value {
-  max-width: 250px !important;
-  overflow-x: hidden;
-}
-
-.expression-preview-special-value {
-  color: #aaa;
-}
-
-.expression-preview-help-container h3 {
-  margin-top: 15px;
-  margin-bottom: 7px;
-  border-bottom: 1px solid #999;
-}
-
-.expression-preview-doc-item-title {
-  font-weight: bold;
-  text-align: right;
-}
-
-.expression-preview-doc-item-params {
-}
-
-.expression-preview-doc-item-returns {
-}
-
-.expression-preview-doc-item-desc {
-  color: #666;
-}
-
-
-/**********************************************************
-  * Read-only mode
-  *********************************************************/
-
-.read-only .no-hidden .recline-grid tr td:first-child,
-.read-only .no-hidden .recline-grid tr th:first-child
-{
-  display: none;
-}
-
-
-.read-only .write-op,
-.read-only a.data-table-cell-edit
-{
-  display: none;
-}
-
diff --git a/css/grid.css b/css/grid.css
new file mode 100644
index 00000000..fd525be6
--- /dev/null
+++ b/css/grid.css
@@ -0,0 +1,315 @@
+/**********************************************************
+  * (Data) Grid
+  *********************************************************/
+
+.recline-grid .btn-group .dropdown-toggle {
+  padding: 1px 3px;
+  line-height: auto;
+}
+
+.recline-grid-container {
+  overflow: auto;
+  height: 550px;
+}
+
+.recline-grid {
+  border: 1px solid #ccc;
+  width: 100%;
+}
+
+.recline-grid td, .recline-grid th {
+  border-left: 1px solid #ccc;
+  padding: 3px 4px;
+  text-align: left;
+}
+
+.recline-grid tr td:first-child, .recline-grid tr th:first-child {
+  width: 20px;
+}
+
+/* direct borrowing from twitter buttons */
+.recline-grid th,
+.transform-column-view .expression-preview-table-wrapper th
+{
+  background-color: #e6e6e6;
+  background-repeat: no-repeat;
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
+  background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
+  background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
+  background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
+  background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
+  background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
+  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
+  color: #333;
+  border: 1px solid #ccc;
+  border-bottom-color: #bbb;
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+  -webkit-transition: 0.1s linear all;
+  -moz-transition: 0.1s linear all;
+  -ms-transition: 0.1s linear all;
+  -o-transition: 0.1s linear all;
+  transition: 0.1s linear all;
+}
+
+
+/**********************************************************
+  * Data Table Menus
+  *********************************************************/
+
+.column-header-menu, a.root-header-menu {
+  float: right;
+}
+
+.read-only a.row-header-menu {
+  display: none;
+}
+
+div.data-table-cell-content {
+  line-height: 1.2;
+  color: #222;
+  position: relative;
+}
+
+div.data-table-cell-content-numeric {
+  text-align: right;
+}
+
+a.data-table-cell-edit {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: block;
+  width: 25px;
+  height: 16px;
+  text-decoration: none;
+  background-image: url(images/edit-map.png);
+  background-repeat: no-repeat;
+  visibility: hidden;
+}
+
+a.data-table-cell-edit:hover {
+  background-position: -25px 0px;
+}
+
+.recline-grid td:hover .data-table-cell-edit {
+  visibility: visible;
+}
+
+div.data-table-cell-content-numeric > a.data-table-cell-edit {
+  left: 0px;
+  right: auto;
+}
+
+.data-table-value-nonstring {
+  color: #282;
+}
+
+.data-table-error {
+  color: red;
+}
+
+.data-table-cell-editor-editor {
+  overflow: hidden;
+  display: block;
+  width: 98%;
+  height: 3em;
+  font-family: monospace;
+  margin: 3px 0;
+}
+
+.data-table-cell-copypaste-editor {
+  overflow: hidden;
+  display: block;
+  width: 98%;
+  height: 10em;
+  font-family: monospace;
+  margin: 3px 0;
+}
+
+.data-table-cell-editor-action {
+  float: left;
+  vertical-align: bottom;
+  text-align: center;
+}
+
+.data-table-cell-editor-key {
+  font-size: 0.8em;
+  color: #999;
+}
+
+
+/**********************************************************
+  * Dialogs
+  *********************************************************/
+
+.dialog-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: #666;
+  opacity: 0.5;
+}
+
+.dialog {
+  position: fixed;
+  left: 0;
+  width: 100%;
+  text-align: center;
+}
+
+.dialog-frame {
+  margin: 0 auto;
+  text-align: left;
+  background: white;
+  border: 1px solid #3a5774;
+}
+
+.dialog-border {
+  border: 4px solid #c1d9ff;
+}
+
+.dialog-header {
+  background: #e0edfe;
+  padding: 10px;
+  font-weight: bold;
+  font-size: 1.6em;
+  color: #000;
+  cursor: move;
+}
+
+.dialog-body {
+  overflow: auto;
+  font-size: 1.3em;
+  padding: 15px;
+}
+
+.dialog-instruction {
+  padding: 0 0 7px;
+}
+
+.dialog-footer {
+  font-size: 1.3em;
+  background: #eee;
+  padding: 10px;
+}
+
+.dialog-busy {
+  width: 400px;
+  border: none;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
+}
+
+/**********************************************************
+  * Transform Dialog
+  *********************************************************/
+
+#expression-preview-tabs .ui-tabs-nav li a {
+  padding: 0.15em 1em;
+}
+
+textarea.expression-preview-code {
+  font-family: monospace;
+  height: 5em;
+  vertical-align: top;
+}
+
+.expression-preview-parsing-status {
+  color: #999;
+}
+
+.expression-preview-parsing-status.error {
+  color: red;
+}
+
+#expression-preview-tabs-preview,
+#expression-preview-tabs-help,
+#expression-preview-tabs-history,
+#expression-preview-tabs-starred {
+  padding: 5px;
+  overflow: hidden;
+}
+
+#expression-preview-tabs-preview > div,
+#expression-preview-tabs-help > div,
+#expression-preview-tabs-history > div,
+#expression-preview-tabs-starred {
+  height: 200px;
+  overflow: auto;
+}
+
+#expression-preview-tabs-preview td, #expression-preview-tabs-preview th,
+#expression-preview-tabs-help td, #expression-preview-tabs-help th,
+#expression-preview-tabs-history td, #expression-preview-tabs-history th,
+#expression-preview-tabs-starred td, #expression-preview-tabs-starred th {
+  padding: 5px;
+}
+
+.expression-preview-table-wrapper {
+  padding: 7px;
+}
+
+.expression-preview-container td {
+  padding: 2px 5px;
+  border-top: 1px solid #ccc;
+}
+
+td.expression-preview-heading {
+  border-top: none;
+  background: #ddd;
+  font-weight: bold;
+}
+
+td.expression-preview-value {
+  max-width: 250px !important;
+  overflow-x: hidden;
+}
+
+.expression-preview-special-value {
+  color: #aaa;
+}
+
+.expression-preview-help-container h3 {
+  margin-top: 15px;
+  margin-bottom: 7px;
+  border-bottom: 1px solid #999;
+}
+
+.expression-preview-doc-item-title {
+  font-weight: bold;
+  text-align: right;
+}
+
+.expression-preview-doc-item-params {
+}
+
+.expression-preview-doc-item-returns {
+}
+
+.expression-preview-doc-item-desc {
+  color: #666;
+}
+
+
+/**********************************************************
+  * Read-only mode
+  *********************************************************/
+
+.read-only .no-hidden .recline-grid tr td:first-child,
+.read-only .no-hidden .recline-grid tr th:first-child
+{
+  display: none;
+}
+
+.read-only .recline-grid .write-op,
+.read-only .recline-grid a.data-table-cell-edit
+{
+  display: none;
+}
+