OO-991 add CSS styles for vertical workflow visualization and example in GUI demo

src/main/java/org/olat/gui/demo/guidemo/_content/guidemo-pane1.html

@@ -11,4 +11,44 @@ varius eu, semper et, dapibus id, neque. Curabitur semper, neque vitae
 vehicula condimentum, elit purus scelerisque felis, eget tincidunt libero
 nulla molestie eros. Morbi at erat at nunc pulvinar scelerisque. Donec ac
 dolor nec diam feugiat tincidunt. Pellentesque rhoncus convallis turpis.
-</p>
\ No newline at end of file
+</p>
+
+<div class="o_process">
+	<div class="o_step o_active">
+		<div class="o_bar"></div>
+		<h4 class="o_title">
+			Step 1 of an example workflow 
+		</h4>
+		<div class="o_meta">
+			Due: 24.02.2015
+		</div>
+		<div class="o_content">
+			<br> 
+			blu bli blia
+		</div>
+	</div>
+	<div class="o_step">
+		<div class="o_bar"></div>
+		<h4 class="o_title">
+			Step 2 of an example workflow 
+		</h4>
+		<div class="o_meta">
+			Due: 24.02.2015
+		</div>
+		<div class="o_content">
+			<div style="width: 100px; height: 100px; display: inline-block; background: #eee">some content</div>
+		</div>
+	</div>
+	<div class="o_step">
+		<div class="o_bar"></div>
+		<h4 class="o_title">
+			Step 3 of an example workflow 			
+		</h4>
+		<div class="o_meta">
+			Due: 24.02.2015
+		</div>
+		<div class="o_content">
+			some other content
+		</div>
+	</div>
+</div>
\ No newline at end of file

src/main/java/org/olat/gui/demo/guidemo/_content/guidemo-pane2.html

@@ -5,4 +5,43 @@ Let's see how our form of the Form Demo is doing in a pane.
 We'll include the same form again in this pane just below this intro text.
 This also demonstrates re-usability of components.
 </p>
-$r.render("paneform")
\ No newline at end of file
+
+<div class="o_process">
+	<div class="o_step o_done">
+		<div class="o_bar"></div>
+		<h4 class="o_title">
+			Step 1 of an example workflow 
+		</h4>
+		<div class="o_meta">
+			Due: 24.02.2015
+		</div>
+		<div class="o_content">
+			<br> 
+			blu bli blia
+		</div>
+	</div>
+	<div class="o_step o_active">
+		<div class="o_bar"></div>
+		<h4 class="o_title">
+			Step 2 of an example workflow 
+		</h4>
+		<div class="o_meta">
+			Due: 24.02.2015
+		</div>
+		<div class="o_content">
+			<div style="width: 100px; height: 100px; display: inline-block; background: #eee">some content</div>
+		</div>
+	</div>
+	<div class="o_step">
+		<div class="o_bar"></div>
+		<h4 class="o_title">
+			Step 3 of an example workflow 
+		</h4>
+		<div class="o_meta">
+			Due: 24.02.2015
+		</div>
+		<div class="o_content">
+			some other content
+		</div>
+	</div>
+</div>
\ No newline at end of file

src/main/java/org/olat/gui/demo/guidemo/_content/guidemo-pane3.html

@@ -3,6 +3,46 @@
 Let's look at the code of the form in pane2 so you'll get an idea of how to assemble forms.
 </p>
 <pre>
-	
-	
-</pre>
\ No newline at end of file
+// this is a code comment
+var a = b*c;
+</pre>
+
+<div class="o_process">
+	<div class="o_step o_done">
+		<div class="o_bar"></div>
+		<h4 class="o_title">
+			Step 1 of an example workflow 
+		</h4>
+		<div class="o_meta">
+			Due: 24.02.2015
+		</div>
+		<div class="o_content">
+			<br> 
+			blu bli blia
+		</div>
+	</div>
+	<div class="o_step o_done">
+		<div class="o_bar"></div>
+		<h4 class="o_title">
+			Step 2 of an example workflow 			
+		</h4>
+		<div class="o_meta">
+			Due: 24.02.2015
+		</div>
+		<div class="o_content">
+			<div style="width: 100px; height: 100px; display: inline-block; background: #eee">some content</div>
+		</div>
+	</div>
+	<div class="o_step o_active">
+		<div class="o_bar"></div>
+		<h4 class="o_title">
+			Step 3 of an example workflow 			
+		</h4>
+		<div class="o_meta">
+			Due: 24.02.2015
+		</div>
+		<div class="o_content">
+			some other content
+		</div>
+	</div>
+</div>
\ No newline at end of file

src/main/webapp/static/themes/light/_modules.scss

@@ -44,6 +44,7 @@
 @import "modules/autocomplete";
 @import "modules/search";
 @import "modules/wizard";
+@import "modules/process";
 
 /* sites specific styles */
 @import "modules/cal";

src/main/webapp/static/themes/light/modules/_process.scss

+$o-step-border-width		: 4px !default;
+$o-step-milestone-size		: ($o-step-border-width * 4) !default;
+$o-step-padding-top			: 10px !default;
+$o-step-padding-left		: 30px !default;
+$o-step-padding-bottom		: 10px !default;
+$o-step-color				: $gray-light !default;
+$o-step-active-color		: $brand-primary !default;
+$o-step-done-color			: lighten($brand-primary,10%) !default;
+$o-step-meta-color			: $text-muted !default;
+$o-step-meta-size			: $font-size-small !default;
+
+.o_process {
+	position: relative;
+	padding-left: 25px;
+	
+	.o_step {
+		position: relative;
+		height: auto;
+		padding-top: $o-step-padding-top;
+		padding-left: $o-step-padding-left;
+		padding-bottom: $o-step-padding-bottom;
+	}
+
+	.o_bar {
+		position: absolute;
+		top: $o-step-padding-top;
+		left: floor($o-step-milestone-size / 2);
+		height: 100%;
+		border-left: $o-step-border-width solid $o-step-color;
+		
+		&:after {
+			position: absolute;
+			top: 0;
+			left: floor($o-step-milestone-size/-2 - $o-step-border-width/2);
+			height: $o-step-milestone-size;
+			width: $o-step-milestone-size;
+			border: $o-step-border-width solid $o-step-color;
+			border-radius: $o-step-milestone-size;
+			background: #fff;
+			content : " ";
+		}
+	}
+
+	.o_title {
+		margin-top: round($headings-line-height/2) * -1 + px;	
+		color: $o-step-color !important;
+	}
+
+	.o_step.o_active {
+		.o_bar,
+		.o_bar:after {
+			border-color: $o-step-active-color;
+		}
+		.o_title {
+			color: $o-step-active-color !important;
+			&:before {
+				@include fa-icon();
+				content: $fa-var-hand-o-right;			
+			}
+		}
+	}
+	.o_step.o_done {
+		.o_bar,
+		.o_bar:after {
+			border-color: $o-step-done-color;
+		}
+		.o_title {
+			color: $o-step-done-color !important;
+			&:before {
+				@include fa-icon();
+				content: $fa-var-check;			
+			}
+		}
+	}
+	.o_meta {
+		color: $o-step-meta-color;
+		font-size: $o-step-meta-size;
+		margin-top: -0.5em;
+	}
+}
+