spontaneous 0.2.0.alpha2 → 0.2.0.alpha3

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

@@ -18,40 +18,43 @@ $error: #f00;
 $chrome-bg: #222;
 $chrome-accent: #404040;
 
-$content-font-family:  "HelveticaNeue", "Helvetica Neue", "FrutigerLTStd-Light", "Frutiger LT Std 45 Light";
-$input-font-family:  "Lucida Grande";
-$headline-font-family:   "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "FrutigerLTStd-Light", "Frutiger LT Std";
-$interface-font-family: "HelveticaNeue", "Helvetica Neue", "FrutigerLTStd-Roman", "Frutiger LT Std";
+$content-font-family:  "HelveticaNeue", "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
+$input-font-family:  "Lucida Grande", "Lucida Sans Unicode";
+$headline-font-family:   "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial";
+$interface-font-family: "HelveticaNeue", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
 /*$interface-font-family: "Helvetica";*/
 
-$field-preview-font-size: 11px;
+$field-preview-font-size: 13px;
 
-$container-padding: 64px;
-$field-text-preview-width: 580px;
-$field-image-preview-width: 300px;
+$container-padding: 48px;
+$entry-gap: 32px;
+$field-text-preview-width: 680px;
+$field-image-preview-width: 280px;
 $field-preview-total-width: $field-text-preview-width + $field-image-preview-width + 32px;
 $title-bar-height: 16px;
 $dialogue-width: 980px;
 
-$corner-radius: 4px;
+$corner-radius: 2px;
 $radius: $corner-radius;
 
 $slot-addable-colour: #ddd;
 $entry-background-colour: #eee;
 
-@mixin rounded($radius: 4px) {
+$target-name-size: 14px;
+
+@mixin rounded($radius: $corner-radius) {
   -webkit-border-radius: $radius;
   -moz-border-radius: $radius;
   border-radius: $radius;
 }
 
-@mixin corners($radius-tl: 4px, $radius-tr: 4px, $radius-br: 4px, $radius-bl: 4px) {
+@mixin corners($radius-tl: $corner-radius, $radius-tr: $corner-radius, $radius-br: $corner-radius, $radius-bl: $corner-radius) {
   -webkit-border-radius: $radius-tl $radius-tr $radius-br $radius-bl;
   -moz-border-radius: $radius-tl $radius-tr $radius-br $radius-bl;
   border-radius: $radius-tl $radius-tr $radius-br $radius-bl;
 }
 
-@mixin rounded-top($radius: 4px) {
+@mixin rounded-top($radius: $corner-radius) {
   -webkit-border-top-right-radius: $radius;
   -moz-border-radius-topright: $radius;
   border-top-right-radius: $radius;
@@ -59,7 +62,7 @@ $entry-background-colour: #eee;
   -moz-border-radius-topleft: $radius;
   border-top-left-radius: $radius; }
 
-@mixin rounded-bottom($radius: 4px) {
+@mixin rounded-bottom($radius: $corner-radius) {
   -webkit-border-bottom-right-radius: $radius;
   -moz-border-radius-bottomright: $radius;
   border-bottom-right-radius: $radius;
@@ -67,17 +70,17 @@ $entry-background-colour: #eee;
   -moz-border-radius-bottomleft: $radius;
   border-bottom-left-radius: $radius; }
 
-@mixin rounded-top-left($radius: 4px) {
+@mixin rounded-top-left($radius: $corner-radius) {
   -webkit-border-top-left-radius: $radius;
   -moz-border-radius-topleft: $radius;
   border-top-left-radius: $radius; }
 
-@mixin rounded-top-right($radius: 4px) {
+@mixin rounded-top-right($radius: $corner-radius) {
   -webkit-border-top-right-radius: $radius;
   -moz-border-radius-topright: $radius;
   border-top-right-radius: $radius; }
 
-@mixin rounded-right($radius: 4px) {
+@mixin rounded-right($radius: $corner-radius) {
   -webkit-border-radius: 0 $radius $radius 0;
   -moz-border-radius: 0 $radius $radius 0;
   border-radius: 0 $radius $radius 0; }
@@ -124,35 +127,33 @@ $entry-background-colour: #eee;
   -webkit-box-align: $aligning;
   -moz-box-align: $aligning;
 }
-@mixin box-flex {
-	-webkit-box-flex: 1;
-	-moz-box-flex: 1;
-	box-flex: 1;
-}
-.box-flexible {
-	-webkit-box-flex: 1;
-	-moz-box-flex: 1;
-	box-flex: 1;
+@mixin box-flex($flex: 1) {
+	-webkit-box-flex: $flex;
+	-moz-box-flex: $flex;
+	box-flex: $flex;
 }
 
-.no-select {
+@mixin no-select {
   -moz-user-select: none;
   -webkit-user-select: none;
 }
 
-.interface {
+@mixin interface {
   font-family: $interface-font-family;
   -webkit-font-smoothing: antialiased;
   text-transform: uppercase;
   font-size: 10px;
-  font-weight: bold;
+  line-height: 13px;
+  //font-weight: bold;
+  font-weight: 600;
   @extend .no-select;
 }
 
 @mixin button($background-color: $action) {
   @include rounded;
   @include box-sizing;
-  @extend .interface;
+  @include interface;
+	border: none;
   margin: 0;
   cursor: pointer;
   text-align: center;
@@ -165,12 +166,14 @@ $entry-background-colour: #eee;
 	color: white !important;
 }
 
-@mixin button-color($background-color: $action) {
+@mixin button-color($background-color: $action, $hover-color: $highlight) {
   background-color: $background-color;
 	@include vertical-gradient(lighten($background-color, 5%), darken($background-color, 5%));
+	box-shadow: inset 0 0 8px darken($background-color, 8%);
 	&:hover {
-		background-color: $highlight !important;
-		@include vertical-gradient($highlight, darken($highlight, 5%));
+		background-color: $hover-color !important;
+		@include vertical-gradient($hover-color, darken($hover-color, 5%));
+		box-shadow: inset 0 0 8px darken($hover-color, 8%);
 		color: white !important;
 	}
 }
@@ -182,7 +185,7 @@ $entry-background-colour: #eee;
 }
 
 @mixin header {
-	font-weight: 100;
+	font-weight: 600;
 	font-family: $headline-font-family;
 	-webkit-font-smoothing: antialiased;
 }
@@ -210,6 +213,28 @@ $entry-background-colour: #eee;
 	transition: $transition;
 }
 
+@mixin disable-text-select {
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	-o-user-select: none;
+	user-select: none;
+}
+@mixin fullsize($top: 0, $right: 0, $bottom: 0, $left: 0) {
+	position: absolute;
+	left: $left;
+	right: $right;
+	top: $top;
+	bottom: $bottom;
+}
+
+@mixin calc($property, $calculation) {
+	#{ $property }: -webkit-calc(#{ $calculation });
+	#{ $property }: -moz-calc(#{ $calculation });
+	#{ $property }: calc(#{ $calculation });
+}
 .button {
 	@include button;
 }
@@ -250,3 +275,66 @@ ul, ol {
 a {
 	text-decoration: none;
 }
+
+@mixin awesome-icon($icon) {
+	font-family: FontAwesome;
+	font-weight: normal;
+	font-style: normal;
+	display: inline-block;
+	text-decoration: inherit;
+	content: $icon;
+}
+
+@mixin image-overlay {
+	opacity: 0.7;
+	color: black;
+	padding-left: 4px;
+	padding-top: 2px;
+	background-color: #efefef;
+}
+
+.meta-background {
+	background: url(/@spontaneous/static/texture-03f7627e8264b1d607113ab32c593a58.png) repeat;
+}
+
+.editing-background {
+  background: url(/@spontaneous/static/editing-texture-1-42b06a3439752490988f30f2a06d5e7c.png) repeat;
+}
+
+$editing-blur: rgba(0, 0, 0, 0.2);
+$editing-focus: rgba(0, 0, 0, 0.6);
+@mixin field-name {
+	@include rounded-top;
+	@include box-sizing;
+	@include interface;
+	background-color: $editing-blur;
+	color: #fff;
+	display: block;
+	height: 16px;
+	padding-left: 8px;
+	padding-top: 2px;
+
+}
+
+@mixin field-value {
+	@include rounded-bottom;
+	border: solid 2px transparent;
+	padding: 6px;
+	background-color: white;
+	opacity: 0.8;
+}
+
+@mixin text-input {
+	@include box-sizing;
+	width: 100%;
+	border: none;
+	display: block;
+	font-weight: bold;
+	outline: none;
+}
+
+@mixin input-font {
+	font-family: $input-font-family;
+	font-size: 11px;
+	line-height: 14px;
+}

data/application/css/dialogue.css.scss

@@ -0,0 +1,409 @@
+@import "definitions.css.scss";
+$dialogue-title-height: 32px;
+
+#dialogue-wrap {
+	position: fixed;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	top: 0;
+	overflow: auto;
+	z-index: 1001;
+	$dialogue-frame-width: 2px;
+	#dialogue-outer {
+		@include rounded;
+		@include display-box;
+		@include box-orient($direction: vertical);
+		@extend .shadow;
+		background-color: $chrome-bg;
+		position: absolute;
+		top: 50px;
+		bottom: 50px;
+		left: 25%;
+		right: 25%;
+
+		#dialogue-title {
+			@include box-sizing;
+			@extend .controls-gradient;
+			@include header;
+			@include rounded-top;
+			height: $dialogue-title-height;
+			color: #fff;
+			padding: 0 $unit 0 ($unit+$dialogue-frame-width);
+			padding-top: 6px;
+			font-weight: 100;
+		}
+		#dialogue-body {
+			position: absolute;
+			top: $dialogue-title-height;
+			right: 0;
+			left: 0;
+			bottom: $dialogue-title-height;
+			// min-height: 100px;
+			overflow: auto;
+			margin: 0 $dialogue-frame-width;
+			background-color: #fff;
+			// max-height: 70%;
+			// margin-top: 32px;
+			// margin-bottom: 32px;
+		}
+		#dialogue-control-wrap {
+			position: absolute;
+			bottom: 0;
+			width: 100%;
+			// z-index: 1002;
+
+			#dialogue-controls {
+				position: relative;
+				// display: block;
+				// height: 46px;
+				.dialogue-actions {
+					@include display-box;
+					.spacer {
+						@include box-flex;
+					}
+					.button {
+						display: block;
+						width: 128px;
+						margin: $unit 0;
+						& + .button {
+							margin-left: $unit;
+						}
+					}
+					.button:last-child {
+						margin-right: $unit;
+					}
+					.cancel {
+						@include button-color(#6b6b6b);
+					}
+					.save {
+						background-color: $action;
+						float: right;
+					}
+					.disabled, .disabled:hover {
+						background-color: #333333 !important;
+						color: #6b6b6b !important;
+					}
+				}
+			}
+		}
+	}
+}
+
+.dialogue-wrapper {
+	@include rounded;
+	@include box-sizing;
+	position: relative;
+	// top: 32px;
+	background-color: #cccccc;
+	width: $dialogue-width;
+	// margin: 32px auto;
+}
+
+#create-home-dialogue {
+	.instructions {
+		@include interface;
+		margin: 0;
+		background-color: #f2f2f2;
+		color: #666;
+		padding: $unit/2 $unit;
+		margin-bottom: $unit;
+		.button {
+			padding-left: 2px;
+			padding-right: 2px;
+		}
+	}
+
+	.type {
+		@include rounded;
+		@include display-box;
+		cursor: pointer;
+		padding: $unit/2 $unit;
+		background-color: #fbfbfb;
+		border: solid 1px #f2f2f2;
+		margin: $unit;
+		margin-top: 0;
+		&:hover {
+			background-color: #666;
+			color: #fff;
+		}
+		&.selected {
+			background-color: $action;
+			color: #fff;
+		}
+	}
+}
+
+
+#dialogue-wrap #dialogue-outer.publishing {
+	left: 5%;
+	right: 5%;
+}
+
+#publishing-dialogue {
+	@include fullsize;
+	@include display-box;
+	@include box-orient(horizontal);
+
+	.change-list {
+		@include box-flex;
+		position: absolute;
+		left: 0;
+		top: 0;
+		bottom: 0;
+		width: 50%;
+		&#changes {
+			border-right: solid 2px #000;
+		}
+		.actions {
+			@include interface;
+			@include display-box;
+			@include box-orient(horizontal);
+			@include box-align(center);
+			@include box-sizing;
+			position: absolute;
+			left: 0;
+			right: 0;
+			top: 0;
+			height: 25px;
+
+			color: #666;
+			background-color: #f2f2f2;
+			padding: $unit/2 $unit;
+
+			div {
+				@include box-flex;
+			}
+			.button {
+				padding-left: $unit;
+				padding-right: $unit;
+			}
+		}
+		&#to-publish {
+			position: absolute;
+			left: auto;
+			right: 0;
+			.actions {
+				left: 2px;
+			}
+		}
+		.change-sets {
+			@include fullsize(25px, 0, 0, 0);
+			overflow: auto;
+			padding-bottom: $unit;
+			padding-top: $unit;
+			.instructions {
+				font-family: $headline-font-family;
+				color: #999;
+				text-align: center;
+				position: relative;
+				padding-top: 50px;
+			}
+		}
+	}
+	// background-color: #fff;
+	// width: 600px;
+	// @extend .dialogue-wrapper;
+	// padding-top: $container-padding / 2;
+	// padding-bottom: $container-padding / 2;
+	.publish-up-to-date {
+		@include rounded;
+		@extend shadow;
+		position: absolute;
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		margin: 60px 200px 60px 200px;
+		text-align: center;
+		background-color: #333;
+		opacity: 0.95;
+		font-family: $headline-font-family;
+		font-size: 24px;
+		padding-top: 24px;
+		color: #fff;
+		// margin: $container-padding / 2;
+		// margin-top: 0;
+		// .publish-all {
+			// 	@include button(#666);
+			// 	@include interface;
+			// 	width: 128px;
+			// 	float: right;
+			// 	text-align: left;
+			// 	// background-color: #666666;
+			// 	input {
+				// 		margin: 1px 8px 0 8px;
+				// 		padding: 0;
+				// 		vertical-align: top;
+				// 		position: relative;
+			// 	}
+		// }
+		// .publish-all.checked {
+			// 	background-color: $action;
+		// }
+	}
+	.change-set {
+		cursor: pointer;
+		// padding: $unit $unit 0 $unit;
+		.inner {
+			@include rounded;
+			@include display-box;
+			// border: solid 3px transparent;
+			background-color: #fbfbfb;
+			// border: solid 1px #f2f2f2;
+			// border: solid 1px #f2f2f2;
+			margin-left: $unit;
+			margin-right: $unit;
+			margin-bottom: 2 * $unit;
+		}
+		.pages {
+			@include box-flex;
+			.title {
+				padding: $unit/2 $unit;
+				color: #333;
+				font-size: $target-name-size;
+				& + .title {
+					border-top: solid 1px #f2f2f2;
+				}
+			}
+			.title.dependent {
+				color: #666;
+				font-size: 0.7em;
+			}
+			.title:hover {
+				color: $action;
+			}
+			.url, .dates {
+				margin-top: 4px;
+				font-size: 10px;
+				color: #aaaaaa;
+				// color: transparent;
+			}
+			.dates {
+				color: transparent;
+			}
+			.url {
+				font-size: 11px;
+			}
+			.dates {
+				color: #bbb;
+			}
+			.modification-date, .publication-date {
+				display: inline-block;
+			}
+			.modification-date {
+				width: 40%;
+			}
+			.publication-date {
+				margin-left: 4px;
+				.never {
+					font-weight: bold;
+				}
+			}
+		}
+		// &:hover {
+		// 	.dates {
+		// 		color: #999;
+		// 	}
+		// }
+		.add {
+			@include rounded-right;
+			@include display-box;
+			@include no-select;
+			@include box-pack(center);
+			@include box-align(center);
+			width: $container-padding;
+			background-color: #f2f2f2;
+			position: relative;
+			color: #999;
+			span {
+				position: relative;
+				top: 1px;
+				&:before {
+					@include awesome-icon("\f054");
+				}
+				&.active {
+					top: 0px;
+					&:before {
+						@include awesome-icon("\f00d");
+					}
+				}
+
+			}
+			&:hover {
+				background-color: $action;
+				color: #fff;
+			}
+		}
+		.titles a {
+			display: block;
+			margin-bottom: 2px;
+			span {
+				font-size: 11px;
+				margin-left: 1em;
+			}
+		}
+		&.unpublished {
+			.title .page-title {
+				&:after {
+					// \00a0 is a nbsp
+					@include awesome-icon("\f005\00a0new");
+					font-size: 10px;
+					line-height: 10px;
+					text-transform: uppercase;
+					color: $highlight;
+					position: relative;
+					top: -1px;
+					margin-left: $unit/2;
+				}
+			}
+			.title.dependent .page-title {
+				&:after {
+					content: "";
+				}
+			}
+		}
+	}
+	.change-set:hover {
+		border-color: $action;
+	}
+	.change-set.selected {
+	}
+}
+
+#root-menu {
+	ul {
+		margin-bottom: 2 * $unit;
+		li {
+			@include interface;
+			font-size: 11px;
+			color: #999;
+			margin-bottom: $unit/2;
+			a {
+				font-family: $content-font-family;
+				text-transform: none;
+				color: #fff;
+				cursor: pointer;
+				&:hover {
+					color: $action;
+				}
+			}
+		}
+		.title {
+			padding-bottom: $unit/2;
+			border-bottom: solid 1px #333;
+		}
+	}
+	li.user:before {
+		@include awesome-icon("\f007");
+	}
+	.external-services li.title:before {
+		@include awesome-icon("\f013");
+	}
+	li.user:before, .external-services li.title:before {
+		position: relative;
+		top: 1px;
+		font-size: 1.3em;
+		width: 2*$unit;
+	}
+}