spontaneous 0.2.0.alpha2 → 0.2.0.alpha3

data/application/css/{editing.scss → editing.css.scss}

@@ -1,3 +1,4 @@
+@import "definitions.css.scss";
 $editing-0: #ede9e4;
 $editing-1: #444444;
 $editing-2: #ccc;
@@ -5,17 +6,15 @@ $editing-3: darken($editing-2, 20%);
 $editing-4: darken($editing-3, 20%);
 
 // $editing-focus: #8ac551;
-$editing-blur: rgba(0, 0, 0, 0.2);
-$editing-focus: rgba(0, 0, 0, 0.6);
 
 $text-edit-width: 621px;
 
 .editing-panel {
 
+	@extend .editing-background;
 	z-index: 1001;
 	// background-color: $editing-0;
-  background: url(/@spontaneous/static/editing-texture-1.png) repeat;
-	// background: $editing-0 url(/@spontaneous/static/editing-0-noise.png) 0 0 repeat;
+  // background: url(/@spontaneous/static/editing-texture-1-42b06a3439752490988f30f2a06d5e7c.png) repeat;
 
 	.editing-fields {
 		@extend .clearfix;
@@ -26,13 +25,10 @@ $text-edit-width: 621px;
 	}
 	.editing-toolbar {
 		@include rounded($radius $radius 0 0);
-		// background-color: $editing-1;
-		// background: $editing-1 url(/@spontaneous/static/editing-1-noise.png) 0 0 repeat;
     background-color: rgba(0, 0, 0, 0.2);
 		padding: $unit/2 $unit*2;
 		.indent {
 
-			// background: url(/@spontaneous/static/editing-toolbar-shadow-top.png) 0 0 repeat-x;
 			position: absolute;
 			top: 0;
 			right: 0;
@@ -47,9 +43,6 @@ $text-edit-width: 621px;
 			@include display-box;
 			@include box-orient(horizontal);
 			@include box-pack(justify);
-			// @include box-pack(end); // for right aligned buttons
-			// @include box-align(end); // for right aligned buttons
-			// padding-top: $unit/2;
 			width: $text-edit-width;
 			.save, .cancel {
 				@include button($action);
@@ -106,16 +99,7 @@ $text-edit-width: 621px;
 			margin-top: 8px;
 		}
 		.name {
-			@include rounded-top;
-			@include box-sizing;
-			@extend .interface;
-			background-color: $editing-blur;
-			// background-image: url(/@spontaneous/static/paper-texture-dark.png);
-      color: #fff;
-			display: block;
-			height: 16px;
-			padding-left: 8px;
-			padding-top: 2px;
+			@include field-name;
 			.comment {
 				font-weight: normal;
 				text-transform: none;
@@ -124,15 +108,9 @@ $text-edit-width: 621px;
 			}
 		}
 		.value {
-			@include rounded-bottom;
-			border: solid 2px transparent;
-			padding: 6px;
-      background-color: white;
-      opacity: 0.8;
+			@include field-value;
 			textarea, input[type="text"] {
-				font-family: $input-font-family;
-				font-size: 11px;
-				line-height: 14px;
+				@include input-font;
 				outline: none;
 			}
 			input[type="file"] {
@@ -145,15 +123,13 @@ $text-edit-width: 621px;
 				@include box-sizing;
 				border: none;
 				width: 100%;
-				padding-right: 64px;
+				// padding-right: 64px;
+				padding-left: 0;
+				padding-right: 0;
 				resize:vertical;
 			}
 			input[type="text"] {
-				@include box-sizing;
-				width: 100%;
-				border: none;
-				display: block;
-				font-weight: bold;
+				@include text-input;
 			}
 		}
 
@@ -202,7 +178,7 @@ $text-edit-width: 621px;
 	}
 	.field-group.image {
 		@include box-sizing;
-    @extend .box-flexible;
+		@include box-flex(1);
 		display: block;
 		padding: $unit 0;
 		.field {
@@ -279,7 +255,7 @@ $text-edit-width: 621px;
 				bottom: 0;
 				padding: $unit;
 				@include image-overlay;
-				@extend .interface;
+				@include interface;
 				text-transform: none;
 				@include display-box;
 				@include box-orient(vertical);
@@ -319,225 +295,6 @@ $text-edit-width: 621px;
 		}
 	}
 }
-@import "variables";
-
-#editing {
-	position: absolute;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	#url-panel {
-		@extend .bar;
-		background-color: $level1;
-		padding-left: $padding;
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-	}
-	#function-panel {
-		position: absolute;
-		top: $bar-height;
-		left: 0;
-		right: 0;
-		height: 34px;
-	}
-	#content-panel {
-		position: absolute;
-		top: $bar-height * 2.5;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		overflow: auto;
-		padding: 0 $padding;
-		padding-bottom: 100px;
-		.tabs {
-			@include rounded-top;
-			background-color: $level2;
-			list-style: none;
-			height: $bar-height;
-			@extend .clearfix;
-			.tab:first-child {
-				@include rounded-top-left;
-			}
-			.tab {
-				@extend .bar;
-				display: block;
-				float: left;
-				padding-left: $padding;
-				min-width: 130px;
-				border-right: solid 1px $level4;
-				cursor: pointer;
-				&:hover {
-					background-color: $blue;
-				}
-			}
-			.tab.active {
-				background-color: $level4;
-				font-weight: bold;
-			}
-		}
-		#content-wrapper {
-			border-top: solid 1px $level3;
-			background-color: $level1;
-			.field-wrap {
-				.edit, .preview {
-					padding: $padding;
-					background-color: $level3;
-				}
-				.field {
-					@include rounded;
-					width: 100%;
-					.name, .value {
-						display: table-cell;
-					}
-					.name {
-						@include rounded-left;
-						vertical-align: top;
-						font-weight: bold;
-						width: 150px;
-						padding-right: $padding;
-						text-align: right;
-					}
-					.value {
-						@include rounded-right;
-						padding-left: $padding;
-					}
-				}
-				.field.edit {
-					.name {
-						@extend .bar;
-					}
-					.name {
-						background-color: $level7;
-					}
-					.name.active {
-						background-color: $blue;
-						color: $white;
-					}
-					.value {
-						padding-top: 0;
-						padding-bottom: 0;
-						padding-right: 0;
-						padding-left: 0px;
-						position: relative;
-						input.input {
-							@extend .bar;
-							@include rounded-right;
-							@extend .border-box;
-							display: block;
-							position: relative;
-							left: 0;
-							width: 100%;
-							height: $bar-height;
-							border: solid 2px $blue;
-							outline: none;
-							padding-left: $padding;
-							vertical-align: top;
-							&:focus {
-								border-color: $blue;
-							}
-						}
-					}
-				}
-				.field + .field {
-					margin-top: $padding;
-				}
-			}
-			.facet-contents-wrap .facet-contents-wrap .facet-drag-bar {
-				display: none;
-			}
-			.facet-contents-wrap .editing .facet-contents-wrap .facet-drag-bar {
-				display: block;
-			}
-			.facet.depth-1 .facet-contents-wrap {
-				background-color: $level2;
-			}
-			.facet.depth-2 {
-				background-color: $level1;
-				.field-wrap .preview {
-					background-color: $white;
-				}
-				.field-wrap .edit {
-					background-color: $level1;
-				}
-				.facet-contents-wrap {
-					background-color: $level1;
-				}
-			}
-			.facet.depth-1 > .facet-bottom-bar {
-				@include rounded-bottom;
-				background-color: $level1;
-			}
-			.field-wrap + .facet-allowed {}
-			.facet-allowed {
-				background-color: $level3;
-				padding: 0;
-				.type-list {
-					@include rounded-top;
-					@extend .clearfix;
-					padding-left: $padding;
-					padding-right: $padding;
-					padding-bottom: 6px;
-					$a-height: $bar-height - 6;
-					$a-pad: ($a-height - $line-height) / 2 - 1;
-					a {
-						@include rounded;
-						display: block;
-						float: left;
-						min-width: 95px;
-						padding: $a-pad 6px 0 6px;
-						height: $a-height - $a-pad;
-						background-color: $level2;
-						margin-top: 6px;
-						&:hover {
-							background-color: $blue;
-							color: $white;
-						}
-					}
-					a + a {
-						margin-left: 6px;
-					}
-				}
-			}
-			.page-entry-link h3 {
-				@extend .bar;
-				@include rounded;
-				background-color: $level1;
-				margin-bottom: $padding;
-				font-size: 150%;
-				padding-left: $padding;
-				a {
-					font-weight: normal;
-				}
-			}
-			.facet-contents-wrap {
-				padding: $padding;
-				.facet-drag-bar {
-					@include rounded-top;
-					height: $bar-height - $padding;
-					background-color: $level4;
-				}
-				.facet {
-					margin-top: 2 * $padding;
-				}
-				.field-wrap {}
-				.page .field-wrap {
-					padding-bottom: $padding;
-				}
-			}
-			.depth-2 .facet-contents-wrap {
-				background-color: $level3;
-			}
-			.facet-bottom-bar {
-				@include rounded-bottom;
-				height: $padding;
-				background-color: $level2;
-			}
-		}
-	}
-}
 
 #page-fields .editing-panel,
 .box-fields .editing-panel {
@@ -560,8 +317,8 @@ $text-edit-width: 621px;
     @include box-orient;
     background-color: $editing-blur;
     a {
-      @extend .interface;
-      @extend .no-select;
+      @include interface;
+      @include no-select;
       color: $editing-3;
       display: block;
       border: solid 1px transparent;
@@ -592,7 +349,7 @@ $text-edit-width: 621px;
 
 #conflicted-fields-dialogue {
   .instructions {
-		@extend .interface;
+		@include interface;
 		text-transform: none;
 		margin: 0;
 		background-color: #f2f2f2;
@@ -632,10 +389,10 @@ $text-edit-width: 621px;
 		.diff {
 			border: none;
 			background-color: #fbfbfb;
-      @extend .interface;
-      @extend .no-select;
-			padding-top: $padding/2;
-			padding-bottom: $padding/2;
+      @include interface;
+      @include no-select;
+			padding-top: $unit/2;
+			padding-bottom: $unit/2;
 		}
 	}
 	.image-field-conflict.changes {
@@ -652,3 +409,9 @@ $text-edit-width: 621px;
 		}
 	}
 }
+.ui-resizable-handle.ui-resizable-s {
+	width: 100%;
+	height: 9px;
+	background: url(/@spontaneous/static/editing-textarea-resize-s-b5af62365eb7e19ea4beccf7242d508e.png) repeat-x;
+	cursor: ns-resize;
+}

data/application/css/font.css.scss

@@ -0,0 +1,8 @@
+@font-face {
+    font-family: 'FontAwesome';
+    src:  url('/@spontaneous/static/font/fontawesome-webfont-5c5c21100a346972a82c34c5e96ffcfe.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+// @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic&subset=latin,latin-ext);