MINOR Added sapphire/admin/scss folder and started SCSS file architecture

admin/.gitignore

@@ -0,0 +1 @@
+.sass-cache

admin/code/LeftAndMain.php

@@ -186,6 +186,7 @@ class LeftAndMain extends Controller {
 			$htmlEditorConfig->setOption('content_css', $cssFiles);
 		}
 		
+		Requirements::css(SAPPHIRE_ADMIN_DIR . '/css/screen.css');
 		
 		Requirements::javascript(SAPPHIRE_DIR . '/javascript/prototypefix/intro.js');
 		Requirements::javascript(SAPPHIRE_DIR . '/thirdparty/prototype/prototype.js');

admin/config.rb

@@ -0,0 +1,13 @@
+# Require any additional compass plugins here.
+require 'compass-colors'
+
+project_type = :stand_alone
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "css"
+sass_dir = "scss"
+images_dir = "images"
+javascripts_dir = "javascript"
+output_style = :compact
+# To enable relative paths to assets via compass helper functions. Uncomment:
+# relative_assets = true

admin/css/screen.css

@@ -0,0 +1,46 @@
+/* line 4, ../scss/_tree.scss */
+.jstree ul { display: block; margin: 0 0 0 0; padding: 0 0 0 0; list-style-type: none; }
+/* line 9, ../scss/_tree.scss */
+.jstree li { display: block; margin: 0 0 0 0; padding: 0 0 0 0; list-style-type: none; display: block; min-height: 18px; line-height: 18px; white-space: nowrap; margin-left: 18px; min-width: 18px; }
+/* line 20, ../scss/_tree.scss */
+.jstree ins { display: inline-block; text-decoration: none; width: 18px; height: 18px; margin: 0 0 0 0; padding: 0; }
+/* line 27, ../scss/_tree.scss */
+.jstree a { display: inline-block; line-height: 16px; height: 16px; color: black; white-space: nowrap; text-decoration: none; padding: 1px 2px; margin: 0; }
+/* line 36, ../scss/_tree.scss */
+.jstree a:focus { outline: none; }
+/* line 39, ../scss/_tree.scss */
+.jstree a > ins { height: 16px; width: 16px; }
+/* line 42, ../scss/_tree.scss */
+.jstree a > .jstree-icon { margin-right: 3px; }
+/* line 45, ../scss/_tree.scss */
+.jstree li.jstree-open > ul { display: block; }
+/* line 47, ../scss/_tree.scss */
+.jstree li.jstree-closed > ul { display: none; }
+/* line 49, ../scss/_tree.scss */
+.jstree li.disabled a { color: #aaaaaa; }
+
+/* line 53, ../scss/_tree.scss */
+.jstree-rtl a > .jstree-icon { margin-left: 3px; margin-right: 0; }
+/* line 56, ../scss/_tree.scss */
+.jstree-rtl li { margin-left: 0; margin-right: 18px; }
+
+/* line 60, ../scss/_tree.scss */
+.jstree-rtl > ul > li { margin-right: 0px; }
+
+/* line 63, ../scss/_tree.scss */
+.jstree > ul > li { margin-left: 0px; }
+
+/* line 5, ../scss/screen.scss */
+.logo .version { display: none; }
+
+/* line 11, ../scss/screen.scss */
+.ss-loading-screen, .ss-loading-screen .loading-logo { width: 100%; height: 100%; overflow: hidden; position: absolute; background: #fff; background: -moz-radial-gradient(50% 50% 180deg, circle cover, white, #efefef, #c7c7c7 100%); background: -webkit-gradient(radial, 50% 50%, 350, 50% 50%, 0, from(#e3e3e3), to(white)); z-index: 100000; margin: 0; padding: 0; }
+
+/* line 25, ../scss/screen.scss */
+.ss-loading-screen .loading-logo { background-url: url(../images/logo.gif); background-repeat: no-repeat; background-color: transparent; background-position: 50% 50%; }
+/* line 31, ../scss/screen.scss */
+.ss-loading-screen p { width: 100%; text-align: center; position: absolute; bottom: 80px; }
+/* line 37, ../scss/screen.scss */
+.ss-loading-screen p span.notice { display: inline-block; font-size: 14px; padding: 10px 20px; color: #dc7f00; border: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -moz-box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.1); -o-box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.1); box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.1); }
+/* line 55, ../scss/screen.scss */
+.ss-loading-screen .loading-animation { display: none; position: absolute; left: 49%; top: 75%; }

admin/scss/_forms.scss

@@ -0,0 +1 @@
+

admin/scss/_tree.scss

@@ -0,0 +1,64 @@
+// Added through jstree.js on DOM load, but we need it earlier in order to correctly display the uninitialized tree
+
+.jstree {
+	ul {
+		display: block;
+		margin: 0 0 0 0;
+		padding: 0 0 0 0;
+		list-style-type: none; }
+	li {
+		display: block;
+		margin: 0 0 0 0;
+		padding: 0 0 0 0;
+		list-style-type: none;
+		display: block;
+		min-height: 18px;
+		line-height: 18px;
+		white-space: nowrap;
+		margin-left: 18px;
+		min-width: 18px; }
+	ins {
+		display: inline-block;
+		text-decoration: none;
+		width: 18px;
+		height: 18px;
+		margin: 0 0 0 0;
+		padding: 0; }
+	a {
+		display: inline-block;
+		line-height: 16px;
+		height: 16px;
+		color: black;
+		white-space: nowrap;
+		text-decoration: none;
+		padding: 1px 2px;
+		margin: 0;
+		&:focus {
+			outline: none; }
+		> {
+			ins {
+				height: 16px;
+				width: 16px; }
+			.jstree-icon {
+				margin-right: 3px; } } }
+	li {
+		&.jstree-open > ul {
+			display: block; }
+		&.jstree-closed > ul {
+			display: none; } }
+	li.disabled a {
+		color: #aaaaaa; } }
+
+.jstree-rtl {
+	a > .jstree-icon {
+		margin-left: 3px;
+		margin-right: 0; }
+	li {
+		margin-left: 0;
+		margin-right: 18px; } }
+
+.jstree-rtl > ul > li {
+	margin-right: 0px; }
+
+.jstree > ul > li {
+	margin-left: 0px; }

admin/scss/screen.scss

@@ -0,0 +1,61 @@
+@import "tree.scss";
+@import "forms.scss";
+
+.logo {
+	.version {
+		display: none; 
+	} 
+}
+
+.ss-loading-screen, 
+.ss-loading-screen .loading-logo {
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+	position: absolute;
+	background: #fff;
+	background: -moz-radial-gradient(50% 50% 180deg, circle cover, #FFFFFF, #EFEFEF, #C7C7C7 100%);
+	background: -webkit-gradient(radial, 50% 50%, 350, 50% 50%, 0, from(#E3E3E3), to(white));
+	z-index: 100000;
+	margin: 0;
+	padding: 0;
+}
+
+.ss-loading-screen {
+	.loading-logo {
+		background-url: url(../images/logo.gif);
+		background-repeat: no-repeat;
+		background-color: transparent;
+		background-position: 50% 50%;
+	}
+	p {
+		width: 100%;
+		text-align: center;
+		position: absolute;
+		bottom: 80px;
+		
+		span.notice {
+			display: inline-block;
+			font-size: 14px;
+			padding: 10px 20px;
+			color: #dc7f00;
+			border: none;
+
+			-moz-border-radius: 5px;
+			-webkit-border-radius: 5px;
+			-o-border-radius: 5px;
+
+			-moz-box-shadow: 1px 1px 15px rgba(0,0,0, 0.1);
+			-webkit-box-shadow: 1px 1px 15px rgba(0,0,0, 0.1);
+			-o-box-shadow: 1px 1px 15px rgba(0,0,0, 0.1);
+			box-shadow: 1px 1px 15px rgba(0,0,0, 0.1);
+		}
+	}
+	
+	.loading-animation {
+		display: none;
+		position: absolute;
+		left: 49%;
+		top: 75%;
+	}
+}