Revision ca3c8b6e

b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/vm-wizard.js
12 12
		expand_down: undefined
13 13
	},
14 14
	speed: 500,
15
	/*set_container_height: function(step) {
16
		if (step === true) {
17
			step =0;
18
		} else {
19
			step = ui.wizard.current_step;
20
		}
21
		var topHeight = $('.top').height();
22
		var stepHeight = $('.step-'+(step+1)+'').height();
23
		var res = topHeight+stepHeight;
24
		console.log('step', step);
25
		if (step == 2) {
26
			$('.wizard-content').removeAttr('style');
27
		} else {
28
			$('.wizard-content').height(res);
29
		}
30
    }, 
31
    set_container_height_back: function(step) {
32
		if (step === true) {
33
			step =1;
34
		} else {
35
			step = ui.wizard.current_step;
36
		}
37
		var topHeight = $('.top').height();
38
		var stepHeight = $('.step-'+step+'').height();
39
		var res = topHeight+stepHeight;
40
		console.log('step', step);
41
		if (step == 3) {
42
			$('.wizard-content').removeAttr('style');
43
		} else {
44
			$('.wizard-content').height(res);
45
		}
46
    },*/
47 15

  
48 16
	set_dimensions: function (){
49 17
		$('.vm-wizard-carousel').css('width', 100*ui.wizard.total_step+'%');
50 18
		$('.vm-wizard-carousel .step').css('width', 100/ui.wizard.total_step+'%');
19
		ui.wizard.set_step_height('.step', '.top', '.bottom', '.header');
51 20
	},
52 21

  
53 22
	submit_data: function (){
......
57 26
	data_next_array: ['test1','el2','el4','el7'],
58 27

  
59 28
	focus_fun: function(){
60
		$('.nav.next').attr('data-step',ui.wizard.current_step);
61
		$('.nav.next').removeAttr('data-next');
62
		$('.nav.next').attr('data-next', ui.wizard.data_next_array[ui.wizard.current_step]);
63
		$('.'+ui.wizard.data_next_array[ui.wizard.current_step]+'').first().focus();
64
		console.log('focus_fun',ui.wizard.data_next_array[ui.wizard.current_step]);
29
		// $('.nav.next').attr('data-step',ui.wizard.current_step);
30
		// $('.nav.next').removeAttr('data-next');
31
		// $('.nav.next').attr('data-next', ui.wizard.data_next_array[ui.wizard.current_step]);
32
		// $('.'+ui.wizard.data_next_array[ui.wizard.current_step]+'').first().focus();
33
		// console.log('focus_fun',ui.wizard.data_next_array[ui.wizard.current_step]);
65 34
	},
66 35

  
67 36
	move: function () {
......
96 65

  
97 66
	init_events: function(){
98 67
		ui.wizard.set_dimensions();
68

  
99 69
		$(document).keydown(function(e) {
100 70
			// right arrow keyCode == 39
101 71
			// ui.wizard.total_step+1 because current_step has not changed yet
......
155 125
		$(total_area).slideUp('slow', function(){
156 126
			ui.wizard.reset();
157 127
		});
128
		 ui.wizard.preselect_elements(bottom_area);
129
            ui.wizard.preselect_elements(main_area);
130
            ui.wizard.preselect_elements(total_area);
158 131
	},
159 132

  
160 133
	// manually sets elements to a initial state
161 134
	reset: function() {
162
		ui.wizard.current_step = 1;
163
		$('.vm-wizard-carousel').css('left',0);
164
		$('.bottom').show();
165
		$('.os li').removeClass('current');
166
		$('.os .btn-col a').removeClass('current');
167
		$('.os li.preselected').addClass('current');
168
		//$('.step-1').find('.current').removeClass('current');
169
		ui.wizard.indicate_step(ui.wizard.current_step);
170
		ui.wizard.set_movement_tags();
171
		$('.ssh-keys-area').find('.snf-checkbox-checked').addClass('snf-checkbox-unchecked');
172
		$('.ssh-keys-area').find('.snf-checkbox-checked').removeClass('snf-checkbox-checked');
173
		$('.networks-area .checkbox').find('.snf-checkbox-checked').addClass('snf-checkbox-unchecked');
174
		$('.networks-area .checkbox').find('.snf-checkbox-checked').removeClass('snf-checkbox-checked');
175
		$('.networks-area .more').hide();
176
		$('#vm-wizard').find('.snf-checkbox-checked').addClass('snf-checkbox-unchecked').removeClass('snf-checkbox-checked');
177
		$('#vm-wizard').find('.default').removeClass('snf-checkbox-unchecked').addClass('snf-checkbox-checked');
178
		$('.details').hide();
179
		$('.wizard .top .sub-menu[data-step="1"] ul li:first-child a').addClass('current');
180
		ui.pickResources('small');
181
		//$('.wizard .step-2 .options li a:contains(DRBD)').addClass('current')
182
		$('.vm-name input').val('');
183
		$('.advanced-conf-options').hide();
184
		$('.snf-color-picker').hide();
185

  
186

  
135
		  ui.wizard.current_step = 1;
136
        $('.vm-wizard-carousel').css('left',0);
137
        $('.bottom').show();
138
        ui.wizard.indicate_step(ui.wizard.current_step);
139
        ui.wizard.set_movement_tags();
140
        $('.networks-area .more').show();
141
        $('.details').hide();
142
        $('.vm-name input').val('');
143
        $('.advanced-conf-options').hide();
144
        $('.snf-color-picker').hide();
145
        $('.step').scrollTop(0);
187 146
	},
188 147

  
189 148
	expand_area: function() {
......
196 155
	focus_custom: function(el, step) {
197 156
		el.focus();
198 157
		el.attr('data-step',step);
199
	}
158
	},
159

  
160
	preselect_elements: function(area) {
161
        $(area).find('.current').not('.preselected').removeClass('current');
162
        $(area).find('.preselected').not('.current').addClass('current'); //needs improvement
163
        $(area).find('.snf-radio-checked').not('.preselected').toggleClass('snf-radio-checked snf-radio-unchecked');
164
        $(area).find('.snf-radio-unchecked.preselected').toggleClass('snf-radio-checked snf-radio-unchecked');
165
        $(area).find('.snf-checkbox-checked').not('.preselected').toggleClass('snf-checkbox-checked snf-checkbox-unchecked');
166
        $(area).find('.snf-checkbox-unchecked.preselected').toggleClass('snf-checkbox-checked snf-checkbox-unchecked');
167
        $('.expand-link').find('.snf-arrow-up').toggleClass('snf-arrow-up snf-arrow-down'); //needs improvement
168
     },
169

  
170
     set_step_height: function(stepEl, fixedTopEl, fixedBottomEl, headerEl) {
171
		topHeight = $(fixedTopEl).height();
172
		bottomHeight = $('.bottom .row').height();
173
		totalHeight	= $(window).height();
174
		headerHeight = $(headerEl).height();
175
		stepHeight = totalHeight-topHeight-bottomHeight-headerHeight;
176
		console.log('stepHeight: ', stepHeight)
177
		tt=stepEl;
178
		$(stepEl).outerHeight(stepHeight);
179
		$('.wizard-content').outerHeight(stepHeight);	
180
	},
181

  
182

  
200 183

  
201 184
}
202 185

  
......
341 324
	ui.wizard.btns.close.click(function(e) {
342 325
		ui.wizard.close('.bottom', '#vm-wizard', '.overlay-area')
343 326
	});
327

  
328
	$(window).resize(function() {
329
		ui.wizard.set_step_height('.step', '.top', '.bottom', '.header')
330
	});
344 331
});
b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_overlays.scss
1
/* 
1
/*
2 2

  
3 3
Overlays (Todo: clean up)
4 4

  
5 5
*/
6 6
// body.with-overlay {
7
// 	background:$secondary-color;
7
//     background:$secondary-color;
8 8
// }
9 9

  
10 10
.reveal-modal {
11
	h3 {
12
		font-size:1em;
13
	}
14
	a { 
15
		color: $secondary-color;
16
		&:hover {
17
			text-decoration: underline;
18
		}
19
		&.close-reveal-modal:hover {
20
			text-decoration: none;
21
			color:$secondary-color;
22
		}
23
	}	
11
    h3 {
12
        font-size:1em;
13
    }
14
    a {
15
        color: $secondary-color;
16
        &:hover {
17
            text-decoration: underline;
18
        }
19
        &.close-reveal-modal:hover {
20
            text-decoration: none;
21
            color:$secondary-color;
22
        }
23
    }   
24 24
}
25 25

  
26 26

  
27 27
// custom modal with opaque overlay
28 28
.reveal-custom {
29
	position: absolute;
30
	top:100px;
31
	left:25%;
32
	z-index:99;
33
	background:yellow;
34
	width:50%;
35
	display:none;
29
    position: absolute;
30
    top:100px;
31
    left:25%;
32
    z-index:99;
33
    background:yellow;
34
    width:50%;
35
    display:none;
36 36
}
37 37

  
38 38

  
39 39
.overlay-wrapper {
40
	position: relative;
41
	.overlay-area {
42
		display:none;
43
		position:absolute;
44
		left:0;
45
		right:0;
46
		top:-$bar-height;
47
		width:100%;
48
		height:100%;
49
		background:$overlay-color;
50
		z-index:20;
51
	}
52
	.close {
53
		position: absolute;
54
		right:$header-padding-horizontal;
55
		top:50px;
56
		font-size:32px;
57
		color:$primary-color;
58
		&:hover, &:focus {
59
			color:white;
60
		}
61
	}
62
	.row {
63
		.close {
64
			position:static;
65
			float:right;
66
		}
67
	}
68
	.overlay-div {
69
		display: none;
70
		z-index:100;
71
		position: relative;
72
		background:#fff;
73
		top:20%; 
74
		left:25%; 
75
		width:50%;
76
		padding:25px;
77
		.buttons {
78
			a {
79
				margin-right:20px;
80
			}
81
		}
82
		&.upload-widget {
83
			background:transparent;
84
			padding:45px 0;
85
			width:80%;
86
			left:10%;
87
			border:1px solid white;
88
		}
89
		&.wizard {
90
			background:$overlay-color;
91
			padding:0 ;
92
			width:100%;
93
			top:0;
94
			left:0;
95
		}
96
	}
40
    position: relative;
41
    .overlay-area {
42
        display:none;
43
        position:absolute;
44
        left:0;
45
        right:0;
46
        top:-$bar-height;
47
        width:100%;
48
        height:100%;
49
        background:$overlay-color;
50
        z-index:20;
51
    }
52
    .close {
53
        position: absolute;
54
        right:$header-padding-horizontal;
55
        top:50px;
56
        font-size:32px;
57
        color:$primary-color;
58
        &:hover, &:focus {
59
            color:white;
60
        }
61
    }
62
    .row {
63
        .close {
64
            position:static;
65
            float:right;
66
        }
67
    }
68
    .overlay-div {
69
        display: none;
70
        z-index:100;
71
        position: relative;
72
        background:#fff;
73
        top:20%;
74
        left:25%;
75
        width:50%;
76
        padding:25px;
77
        .buttons {
78
            a {
79
                margin-right:20px;
80
            }
81
        }
82
        &.upload-widget {
83
            background:transparent;
84
            padding:45px 0;
85
            width:80%;
86
            left:10%;
87
            border:1px solid white;
88
        }
89
        &.wizard {
90
            background:$overlay-color;
91
            padding:0 ;
92
            width:100%;
93
            top:0;
94
            left:0;
95
        }
96
    }
97 97
}
98 98

  
99 99

  
100 100
.overlay {
101
	background:$secondary-color;
102
	position: relative;
103
	// z-index:10;
104
	.lt-sidebar {
105
		border-right:1px solid #fff;
106
		color:#fff;
107
		ul {
108
			li {
109
				list-style:none outside none;
110
				
111
				a {
112
					display: block;
113
					color:#fff;
114
					span { float:right; display:none;}
115
					&:hover,
116
					&.current {
117
						text-decoration: none;
118
						span { 
119
							display:inline;
120
						}
121
					}
122
				}
101
    background:$secondary-color;
102
    position: relative;
103
    // z-index:10;
104
    .lt-sidebar {
105
        border-right:1px solid #fff;
106
        color:#fff;
107
        ul {
108
            li {
109
                list-style:none outside none;
110
               
111
                a {
112
                    display: block;
113
                    color:#fff;
114
                    span { float:right; display:none;}
115
                    &:hover,
116
                    &.current {
117
                        text-decoration: none;
118
                        span {
119
                            display:inline;
120
                        }
121
                    }
122
                }
123 123

  
124
			}
125
		}
124
            }
125
        }
126 126

  
127
	}
128
	.lt-sidebar, 
129
	.main {
130
		padding:100px $header-padding-horizontal;
131
		position:relative;
132
	}
133
	.navigation {
134
		.rt {
135
			float:right;
136
		}
137
	}
138
	.close {
139
		position: absolute;
140
		right:$header-padding-horizontal;
141
		top:50px;
142
		@include sprite('../images/info-close.png', 31px, 30px);
143
	}
144
	.close_char {
145
		background: none;
146
		text-indent: 0;
147
		font-size: 1.8em; /* for the the character e (for d we can put 2em) */
148
		color: white;
149
	}
127
    }
128
    .lt-sidebar,
129
    .main {
130
        padding:100px $header-padding-horizontal;
131
        position:relative;
132
    }
133
    .navigation {
134
        .rt {
135
            float:right;
136
        }
137
    }
138
    .close {
139
        position: absolute;
140
        right:$header-padding-horizontal;
141
        top:50px;
142
        @include sprite('../images/info-close.png', 31px, 30px);
143
    }
144
    .close_char {
145
        background: none;
146
        text-indent: 0;
147
        font-size: 1.8em; /* for the the character e (for d we can put 2em) */
148
        color: white;
149
    }
150 150
}
151 151

  
152 152
.wizard {
153
	position: relative;
154
	top:0;
155
	color:white;
156
	.top {
157
		background:$overlay-color-top;
158
		height:$bar-height+$bar-submenu-height;
159
		position:fixed;
160
		left:0;
161
		top:$header-height;
162
		width:100%;
163
		z-index:40;
164
		.numbers {
165
			height:$bar-height;
166
			line-height:$bar-height;
167
			background:$overlay-darker-color;
168
		}
169
		.sub-menu {
170
			display: none;
171
			&[data-step="1"] {
172
				display: block;
173
			}
174
			ul {
175
				margin:0;
176
				padding:0;
177
				list-style: none outside none;
178
				font-size:emCalc(12px);
179
				li {
180
					display: inline;
181
					margin-right:10px;
182
					line-height: $bar-submenu-height;
183
					list-style: none outside none;
184
					a {
185
						color:$black;
186
						&:hover, &:focus, &.current {
187
							color:white;
188
						}
189
						&.current {
190
							text-decoration: underline;
191
						}
192
					}
193
				}
194
			}
195
		}
196
		.nums {
197
			text-align: right;
198
			list-style:none outside none;
199
			margin:0;
200
			height: $bar-height;
201
			line-height: $bar-height;
202
			font-size:emCalc(12px);
203
			padding-right:120px;
204
			color:$secondary-color;
205
			li {
206
				list-style:none outside none;
207
				display: inline;
208
				p {
209
					display: none;
210
					position: relative;
211
					top: 1px;
212
					strong {
213
						font-size:16px;
214
						margin-right:10px;
215
					}
216
				}
217
				em {
218
					display: inline-block;
219
					border-radius:50%;
220
					border:1px solid $secondary-color;
221
					width:25px;
222
					height:25px;
223
					line-height: 21px;
224
					margin:0 3px;
225
					text-align: center;
226
					font-style: normal;
227
				}
228
				a {
229
					color:$secondary-color;
230
					display: block;
231
					&:hover {
232
						cursor: default;
233
					}
234
				}
235
				&.current{
236
					float: left;
237
					p {
238
						display: inline-block;
239
					}
240
					em {
241
						font-size:emCalc(16px);
242
						width:30px;
243
						height:30px;
244
						line-height: 27px;
245
						border-color:$secondary-color;
246
						* {
247
							color:$secondary-color;
248
						}
249
					}
250
				}
251
			}
252
		}
253
	}
254
	.middle {
255
		padding-top:$bar-height+$bar-submenu-height;
256
		.step {
257
			padding:50px 0 50px;
258
			position:relative;
259
			width:$row-width;
260
			overflow:hidden;
261
			overflow-y: scroll;
262
			
263
			.os {
264
				li {
265
					list-style: none outside none;
266
					@extend .clearfix;
267
					padding:0.5em 0;
268
					&:hover,
269
					&.hover {
270
						background:$overlay-darker-color;
271
					}
272
					&.current {
273
						background:white;
274
						color:$overlay-color;
275
						.name-col {
276
							color:$overlay-color;
277
						}
278
						.btn-col {
279
							a {
280
								@extend .btn5;
281
								border-color:$overlay-color;
282
								color:$overlay-color;
283
								&.current {
284
									color:white;
285
									background:$overlay-color;
286
								}
287
							}
288
						}
289
					}
290
					.img-col {
291
						float:left;
292
						width:10%;
293
						padding-right:10px;
294
					}
295
					.name-col {
296
						float: left;
297
						color: $wizard-base-font-color;
298
						width:65%;
299
						padding-right:10px;
300
					}
301
					.size-col {
302
						float:left;
303
						width:10%;
304
					}
305
					.btn-col {
306
						float:left;
307
						width:10%;
308
						margin-left:10px;
309
						a {
310
							@extend .btn5;
311
							&.current {
312
								color:$overlay-color;
313
							}
314
						}
315
					}
316
					.details {
317
						display: none;
318
						background:darken(white,10%);
319
						padding:30px 0;
320
						margin:20px 6px 6px;
321
						color: $body-font-color;
322
						h3 {
323
							font-size: 1em;
324
						}
325
						dl {
326
							@extend .clearfix;
327
							dt {
328
								width: 20%;
329
								float:left;
330
								font-weight:normal;
331
							}
332
							dd {
333
								margin:0 0 5px;
334
							}
335
						}
336
					}
337
				}
338
			}
339
			.flavor {
340
				list-style: none outside none;
341
				li {
342
					list-style:none outside none;
343
					margin-bottom:1.5em;
344
					.title {
345
						@extend .clearfix;
346
						margin-bottom:emCalc(5px);
347
						color:white;
348
						vertical-align: top;
349
						.icon {
350
							display: block;
351
							width:5%;
352
							font-size:emCalc(40px);
353
							float: left;
354
						}
355
						h2 {
356
							font-size:emCalc(16px);
357
							span {
358
								font-weight:normal;
359
							}
360
							float:left;
361
							width: 19%;
362
							color:white;
363
							margin-right:4%;
364
							padding-left:emCalc(10px);
365
							&:hover {
366
								& + p {
367
									visibility: visible;
368
								}
369
							}
370
						}
371
						p {
372
							visibility: hidden;
373
							float:left;
374
							width:70%;
375
							font-size:emCalc(12px);
376
						}
377
					}
378
					.options-bar {
379
						@extend .clearfix;
380
						.bar {
381
							width:24%;
382
							float: left;
383
							margin-right:4%;
384
							height: 26px;
385
							position: relative;
386
							top:2px;
387
							.wrap {
388
								border:1px solid white;
389
								padding:1px;
390
								height: 100%;
391
								&.disabled-progress-bar {
392
									border-color: #3a4046;
393
									.container{
394
										.total {
395
											background-color: #3a4046;
396
										}
397
									}
398
								}
399
								.container {
400
									height: 100%;
401
									.total {
402
										background:$primary-color;
403
										height: 100%;
404
										float:left;
405
										position: relative;
406
										.current {
407
											background:white;
408
											height: 100%;
409
											float:left;
410
										}
411
										span {
412
											position:absolute;
413
											right:10px;
414
											color:$black;
415
											font-size: emCalc(12px);
416
										}
417
										&.low {
418
											span {
419
												right:-30px;
420
												color:white;
421
											}
422
										}
423
									}
424
								}
153
    position: relative;
154
    top:0;
155
    color:white;
156
    .top {
157
        background:$overlay-color-top;
158
        height:$bar-height+$bar-submenu-height;
159
        position:fixed;
160
        left:0;
161
        top:$header-height;
162
        width:100%;
163
        z-index:40;
164
        .numbers {
165
            height:$bar-height;
166
            line-height:$bar-height;
167
            background:$overlay-darker-color;
168
        }
169
        .sub-menu {
170
            display: none;
171
            &[data-step="1"] {
172
                display: block;
173
            }
174
            ul {
175
                margin:0;
176
                padding:0;
177
                list-style: none outside none;
178
                font-size:emCalc(12px);
179
                li {
180
                    display: inline;
181
                    margin-right:10px;
182
                    line-height: $bar-submenu-height;
183
                    list-style: none outside none;
184
                    a {
185
                        color:$black;
186
                        &:hover, &:focus, &.current {
187
                            color:white;
188
                        }
189
                        &.current {
190
                            text-decoration: underline;
191
                        }
192
                    }
193
                }
194
            }
195
        }
196
        .nums {
197
            text-align: right;
198
            list-style:none outside none;
199
            margin:0;
200
            height: $bar-height;
201
            line-height: $bar-height;
202
            font-size:emCalc(12px);
203
            padding-right:120px;
204
            color:$secondary-color;
205
            li {
206
                list-style:none outside none;
207
                display: inline;
208
                p {
209
                    display: none;
210
                    position: relative;
211
                    top: 1px;
212
                    strong {
213
                        font-size:16px;
214
                        margin-right:10px;
215
                    }
216
                }
217
                em {
218
                    display: inline-block;
219
                    border-radius:50%;
220
                    border:1px solid $secondary-color;
221
                    width:25px;
222
                    height:25px;
223
                    line-height: 21px;
224
                    margin:0 3px;
225
                    text-align: center;
226
                    font-style: normal;
227
                }
228
                a {
229
                    color:$secondary-color;
230
                    display: block;
231
                    &:hover {
232
                        cursor: default;
233
                    }
234
                }
235
                &.current{
236
                    float: left;
237
                    p {
238
                        display: inline-block;
239
                    }
240
                    em {
241
                        font-size:emCalc(16px);
242
                        width:30px;
243
                        height:30px;
244
                        line-height: 27px;
245
                        border-color:$secondary-color;
246
                        * {
247
                            color:$secondary-color;
248
                        }
249
                    }
250
                }
251
            }
252
        }
253
    }
254
    .middle {
255
        padding-top:$bar-height+$bar-submenu-height;
256
        .step {
257
            padding:50px 0 50px;
258
            position:relative;
259
            width:$row-width;
260
            overflow:hidden;
261
            overflow-y: scroll;
262
           &.step-3 {
263
           	padding-bottom: 0;
264
           }
265
            .os {
266
                li {
267
                    list-style: none outside none;
268
                    @extend .clearfix;
269
                    padding:0.5em 0;
270
                    &:hover,
271
                    &.hover {
272
                        background:$overlay-darker-color;
273
                    }
274
                    &.current {
275
                        background:white;
276
                        color:$overlay-color;
277
                        .name-col {
278
                            color:$overlay-color;
279
                        }
280
                        .btn-col {
281
                            a {
282
                                @extend .btn5;
283
                                border-color:$overlay-color;
284
                                color:$overlay-color;
285
                                &.current {
286
                                    color:white;
287
                                    background:$overlay-color;
288
                                }
289
                            }
290
                        }
291
                    }
292
                    .img-col {
293
                        float:left;
294
                        width:10%;
295
                        padding-right:10px;
296
                    }
297
                    .name-col {
298
                        float: left;
299
                        color: $wizard-base-font-color;
300
                        width:65%;
301
                        padding-right:10px;
302
                    }
303
                    .size-col {
304
                        float:left;
305
                        width:10%;
306
                    }
307
                    .btn-col {
308
                        float:left;
309
                        width:10%;
310
                        margin-left:10px;
311
                        a {
312
                            @extend .btn5;
313
                            &.current {
314
                                color:$overlay-color;
315
                            }
316
                        }
317
                    }
318
                    .details {
319
                        display: none;
320
                        background:darken(white,10%);
321
                        padding:30px 0;
322
                        margin:20px 6px 6px;
323
                        color: $body-font-color;
324
                        h3 {
325
                            font-size: 1em;
326
                        }
327
                        dl {
328
                            @extend .clearfix;
329
                            dt {
330
                                width: 20%;
331
                                float:left;
332
                                font-weight:normal;
333
                            }
334
                            dd {
335
                                margin:0 0 5px;
336
                            }
337
                        }
338
                    }
339
                }
340
            }
341
            .flavor {
342
                list-style: none outside none;
343
                li {
344
                    list-style:none outside none;
345
                    margin-bottom:1.5em;
346
                    .title {
347
                        @extend .clearfix;
348
                        margin-bottom:emCalc(5px);
349
                        color:white;
350
                        vertical-align: top;
351
                        .icon {
352
                            display: block;
353
                            width:5%;
354
                            font-size:emCalc(40px);
355
                            float: left;
356
                        }
357
                        h2 {
358
                            font-size:emCalc(16px);
359
                            span {
360
                                font-weight:normal;
361
                            }
362
                            float:left;
363
                            width: 19%;
364
                            color:white;
365
                            margin-right:4%;
366
                            padding-left:emCalc(10px);
367
                            &:hover {
368
                                & + p {
369
                                    visibility: visible;
370
                                }
371
                            }
372
                        }
373
                        p {
374
                            visibility: hidden;
375
                            float:left;
376
                            width:70%;
377
                            font-size:emCalc(12px);
378
                        }
379
                    }
380
                    .options-bar {
381
                        @extend .clearfix;
382
                        .bar {
383
                            width:24%;
384
                            float: left;
385
                            margin-right:4%;
386
                            height: 26px;
387
                            position: relative;
388
                            top:2px;
389
                            .wrap {
390
                                border:1px solid white;
391
                                padding:1px;
392
                                height: 100%;
393
                                &.disabled-progress-bar {
394
                                    border-color: #3a4046;
395
                                    .container{
396
                                        .total {
397
                                            background-color: #3a4046;
398
                                        }
399
                                    }
400
                                }
401
                                .container {
402
                                    height: 100%;
403
                                    .total {
404
                                        background:$primary-color;
405
                                        height: 100%;
406
                                        float:left;
407
                                        position: relative;
408
                                        .current {
409
                                            background:white;
410
                                            height: 100%;
411
                                            float:left;
412
                                        }
413
                                        span {
414
                                            position:absolute;
415
                                            right:10px;
416
                                            color:$black;
417
                                            font-size: emCalc(12px);
418
                                        }
419
                                        &.low {
420
                                            span {
421
                                                right:-30px;
422
                                                color:white;
423
                                            }
424
                                        }
425
                                    }
426
                                }
425 427

  
426
							}
427
						}
428
						.options {
429
							overflow:hidden;
430
							list-style: none outside none;
431
							li {
432
								list-style: none outside none;
433
								display: inline-block;
434
								margin-right: 10px;
435
								a {
436
									@extend .btn5;
437
									min-width: 60px;
438
									&.current {
439
										color:$overlay-color;
440
									}
441
								}
442
							}
443
						}
444
					}
445
				}
446
			}
447
			.summary {
448
				.row {
449
					padding-top:1em;
450
					margin-top:1em;
451
					border-top:1px solid white;
452
					&:first-child {
453
						border-top:0 none;
454
					}
455
				}
456
				h2 {
457
					font-size:1em;
458
					color:white;
459
				}
460
				dl {
461
					margin-bottom:0;
462
					span {
463
						margin-right:10px;
464
						font-size:20px;
465
					}
466
					dt {
467
						display: inline-block;
468
						width: 45%;
469
						vertical-align: top;
470
					}
471
					dd {
472
						display: inline-block;
473
						width:45%;
474
					}
475
				}
476
			}
477
			.advanced-conf-step {
478
				color: $wizard-base-font-color;
479
				h2 {
480
					color: $wizard-base-font-color;
481
					font-size: 1em;
482
					margin:0 auto 1em;
483
				}
484
				p {
485
					font-size: $wizard-paragraph-font-size;
486
				}
428
                            }
429
                        }
430
                        .options {
431
                            overflow:hidden;
432
                            list-style: none outside none;
433
                            li {
434
                                list-style: none outside none;
435
                                display: inline-block;
436
                                margin-right: 10px;
437
                                a {
438
                                    @extend .btn5;
439
                                    min-width: 60px;
440
                                    &.current {
441
                                        color:$overlay-color;
442
                                    }
443
                                }
444
                            }
445
                        }
446
                    }
447
                }
448
            }
449
            .summary {
450
                .row {
451
                    padding-top:1em;
452
                    margin-top:1em;
453
                    border-top:1px solid white;
454
                    &:first-child {
455
                        border-top:0 none;
456
                    }
457
                }
458
                h2 {
459
                    font-size:1em;
460
                    color:white;
461
                }
462
                dl {
463
                    margin-bottom:0;
464
                    span {
465
                        margin-right:10px;
466
                        font-size:20px;
467
                    }
468
                    dt {
469
                        display: inline-block;
470
                        width: 45%;
471
                        vertical-align: top;
472
                    }
473
                    dd {
474
                        display: inline-block;
475
                        width:45%;
476
                    }
477
                }
478
            }
479
            .advanced-conf-step {
480
                color: $wizard-base-font-color;
481
                h2 {
482
                    color: $wizard-base-font-color;
483
                    font-size: 1em;
484
                    margin:0 auto 1em;
485
                }
486
                p {
487
                    font-size: $wizard-paragraph-font-size;
488
                }
487 489

  
488
				.snf-checkbox-checked, .snf-checkbox-unchecked {
489
					color: $wizard-base-font-color;
490
				}	
491
				.expand-btn {
492
					margin: 50px 0 30px;
493
					a {
494
						color:$wizard-base-font-color;
495
					}
490
                .snf-checkbox-checked, .snf-checkbox-unchecked {
491
                    color: $wizard-base-font-color;
492
                }   
493
                .expand-btn {
494
                    margin: 50px 0 30px;
495
                    a {
496
                        color:$wizard-base-font-color;
497
                    }
496 498

  
497
					
498
				}
499
				.adv-main {
500
					padding: 10px 0 30px;
501
					width:$row-small;
502
					.vm-name {
503
						h2 {
504
							color:white;
505
							font-size:1em;
506
							margin-bottom:0.5em;
507
						}
508
					}
509
				}
510
				.btn5 {
511
				    &:hover {
512
					    color:white;
513
				}
514
				    &.current, &.current:hover {
515
				        color:$overlay-color;
516
				    }
517
			    }
518
				.advanced-conf-options {
519
					display: none;
520
					.area {
521
						padding:30px 0;
522
						.row {
523
							width:$row-small;
524
							padding-left:0;
525
						}
526
						ul {
527
							li {
528
								position: relative;
529
								list-style:none outside none;
530
								margin-bottom:7px;
531
								&.checkbox {
532
									&:hover {
533
										cursor: pointer;
534
									}
535
								}
536
								h3 {
537
									width: $conf-area-h-width;
538
									color:white;
539
									font-size:1em;
540
									font-weight: normal;
541
									margin:0 20px 0 0;
542
									display: inline-block;
543
									//&.net-name { width: 9.063em }
544
								}
545
							}
546
						}
547
					}
548
					.ssh-keys-area {
549
						background-color: $ssh-opt-area-color;
550
					}
551
					.networks-area {
552
						background-color: $net-opt-area-color;
553
						li {
554
							.net-icons {
555
								padding-right:20px;
556
								// position:absolute;
557
								// left:-200px;
558
								// top:-12px;
559
								display: inline-block;
560
								width:145px;
561
								text-align: right;
562
								font-size:30px;
563
								margin-bottom: 0;
564
								span {
565
									margin-left:6px;
566
									&.snf-modem {
567
										position: relative;
568
										top:-6px;
569
									}
570
								}
571
							}
572
					
573
							
574
							
575
							&.more {
576
								display: none;
577
								background:$net-more-opt-area-color;
578
								margin-bottom:1em;
579
								padding:30px 0;
580
								color:$net-opt-area-color;
581
								h3 {
582
									color:$net-opt-area-color;
583
								}
584
								.btn5 {
585
									margin-top:1em;
586
									border-color:$net-opt-area-color;
587
									color:$net-opt-area-color;
588
								}
589
								.checkbox {
590
									a {
591
										span {
592
											color: $net-opt-area-color;
593
										}
594
									}
595
								}
596
							}
597
						}
499
                   
500
                }
501
                .adv-main {
502
                    padding: 10px 0 30px;
503
                    width:$row-small;
504
                    .vm-name {
505
                        h2 {
506
                            color:white;
507
                            font-size:1em;
508
                            margin-bottom:0.5em;
509
                        }
510
                    }
511
                }
512
                .btn5 {
513
                    &:hover {
514
                        color:white;
515
                }
516
                    &.current, &.current:hover {
517
                        color:$overlay-color;
518
                    }
519
                }
520
                .advanced-conf-options {
521
                    display: none;
522
                    .area {
523
                        padding:30px 0;
524
                        .row {
525
                            width:$row-small;
526
                            padding-left:0;
527
                        }
528
                        ul {
529
                            li {
530
                                position: relative;
531
                                list-style:none outside none;
532
                                margin-bottom:7px;
533
                                &.checkbox {
534
                                    &:hover {
535
                                        cursor: pointer;
536
                                    }
537
                                }
538
                                h3 {
539
                                    width: $conf-area-h-width;
540
                                    color:white;
541
                                    font-size:1em;
542
                                    font-weight: normal;
543
                                    margin:0 20px 0 0;
544
                                    display: inline-block;
545
                                    //&.net-name { width: 9.063em }
546
                                }
547
                            }
548
                        }
549
                    }
550
                    .ssh-keys-area {
551
                        background-color: $ssh-opt-area-color;
552
                    }
553
                    .networks-area {
554
                        background-color: $net-opt-area-color;
555
                        li {
556
                            .net-icons {
557
                                padding-right:20px;
558
                                // position:absolute;
559
                                // left:-200px;
560
                                // top:-12px;
561
                                display: inline-block;
562
                                width:145px;
563
                                text-align: right;
564
                                font-size:30px;
565
                                margin-bottom: 0;
566
                                span {
567
                                    margin-left:6px;
568
                                    &.snf-modem {
569
                                        position: relative;
570
                                        top:-6px;
571
                                    }
572
                                }
573
                            }
574
                   
575
                           
576
                           
577
                            &.more {
578
                                // display: none;
579
                                background:$net-more-opt-area-color;
580
                                margin-bottom:1em;
581
                                padding:30px 0;
582
                                color:$net-opt-area-color;
583
                                h3 {
584
                                    color:$net-opt-area-color;
585
                                    padding-left: 145px;
586
                                }
587
                                .btn5 {
588
                                    margin-top:1em;
589
                                    border-color:$net-opt-area-color;
590
                                    color:$net-opt-area-color;
591
                                }
592
                                .checkbox {
593
                                    a {
594
                                        span {
595
                                            color: $net-opt-area-color;
596
                                        }
597
                                    }
598
                                }
599
                            }
600
                        }
598 601

  
599
					}
600
					.tags-area {
601
						background-color: $tag-opt-area-color;
602
						.snf-color-picker {
603
							display: none;
604
						}
605
						#picker {
606
							position: relative;
607
							width: 207px;
608
							margin: 30px 5px;
609
							display: inline-block;
610
						}
611
						.form-item {
612
							//display:inline-block;
613
							// position: relative;
614
							// bottom: 20px;
615
						
616
						}
617
						.btns {
618
							// position: relative;
619
							// bottom: -45px;
620
							// margin-bottom: 45px;
621
							margin-top: 77px;
622
							margin-bottom: 30px;
623
						}
624
						.btn5 {
625
							margin-right:20px;
626
						}
602
                    }
603
                    .tags-area {
604
                        background-color: $tag-opt-area-color;
605
                        .snf-color-picker {
606
                            display: none;
607
                        }
608
                        #picker {
609
                            position: relative;
610
                            width: 207px;
611
                            margin: 30px 5px;
612
                            display: inline-block;
613
                        }
614
                        .form-item {
615
                            //display:inline-block;
616
                            // position: relative;
617
                            // bottom: 20px;
618
                       
619
                        }
620
                        .btns {
621
                            // position: relative;
622
                            // bottom: -45px;
623
                            // margin-bottom: 45px;
624
                            margin-top: 77px;
625
                            margin-bottom: 30px;
626
                        }
627
                        .btn5 {
628
                            margin-right:20px;
629
                        }
627 630

  
628
					}
631
                    }
629 632

  
630
				}
631
			}
632
		}
633
		
634
	}
635
	.bottom {
636
		position: fixed;
637
		left:0;
638
		right:0;
639
		bottom:0;
640
		border-top:1px solid $black;
641
		background:$overlay-color;
642
		.row {
643
			height: $bar-height;
644
			line-height: $bar-height;
645
		}
646
		.nav {
647
			height: $bar-height;
648
			line-height: $bar-height;
649
			color:white;
650
			display: inline-block;
651
			position: relative;
652
			font-size: emCalc(12px);
653
			top:($bar-height - 30px)/2;
654
			width: 100px;
655
			&:hover {
656
				@include transition(background, 0ms, ease-out);
657
			}
658
			span {
659
				display: inline-block;
660
				height: 30px;
661
				line-height:30px;
662
				float: left;
663
				&:hover {
664
					@include transition(background, 0ms, linear);
665
				}
666
			}
667
			&:focus {
668
				color:green;
669
			}
670
		}
671
		.prev {
672
			float:left;
673
			height:30px;
674
			padding-left:18px;
675
			background:url('../images/nav-edge-lt.png') no-repeat left top;
676
			span {
677
				padding-right:10px;
678
				background:url('../images/nav-lt.png') no-repeat right top;
679
			}
680
			&:hover,
681
			&.active {
682
				background-position:left bottom;
683
				span {
684
					background-position:right bottom;
685
				}
686
			}
687
		}
688
		.next {
689
			float:right;
690
			height:30px;
691
			padding-right:18px;
692
			background:url('../images/nav-edge-rt.png') no-repeat right top;
693
			span {
694
				padding-left:10px;
695
				background:url('../images/nav-rt.png') no-repeat left top;
696
				float: right;
697
			}
698
			&:hover,
699
			&.active {
700
				background-position:right bottom;
701
				span {
702
					background-position:left bottom;
703
					float:right;
704
				}
705
			}
706
		}
707
	}
633
                }
634
            }
635
        }
636
       
637
    }
638
    .bottom {
639
        position: fixed;
640
        left:0;
641
        right:0;
642
        bottom:0;
643
        border-top:1px solid $black;
644
        background:$overlay-color;
645
        .row {
646
            height: $bar-height;
647
            line-height: $bar-height;
648
        }
649
        .nav {
... This diff was truncated because it exceeds the maximum size that can be displayed.

Also available in: Unified diff