Statistics
| Branch: | Tag: | Revision:

root / snf-cyclades-app / synnefo / ui / new_ui / ui / sass / _wizards.scss @ de9b2b51

History | View | Annotate | Download (22.7 kB)

1
.overlay-wrapper .overlay-area-custom .overlay-div.wizard {
2
				background:$overlay-bg-color;
3
				padding:0 ;
4
				width:100%;
5
				top:0;
6
				left:0;
7
				position: relative;
8
				color:white;
9
				.top {
10
					background:$overlay-color-top;
11
					height:$bar-menu-height + $bar-submenu-height;
12
					position:fixed;
13
					left:0;
14
					right:0;
15
					bottom:auto;
16
					top:$header-height;
17
					width:100%;
18
					z-index:40;
19
					.numbers {
20
						.row {
21
							max-width: 100%;
22
							padding:0 $header-padding-horizontal;
23
							.close {
24
								color:$primary-color;
25
								&:hover, &:focus {
26
									color:white;
27
								}
28
							}
29
						}
30
						height: $bar-menu-height;
31
						line-height: 50px;
32
						background:$overlay-darker-color;
33
					}
34
					.menus {
35
						height: $bar-submenu-height;
36
						.sub-menu {
37
							display: none;
38
							&[data-step="1"] {
39
								display: block;
40
							}
41
							ul {
42
								margin:0;
43
								padding:0;
44
								list-style: none outside none;
45
								font-size:emCalc(12px);
46
								li {
47
									display: inline;
48
									margin-right:10px;
49
									line-height: $bar-submenu-height;
50
									list-style: none outside none;
51
									a {
52
										color:$body-font-color;
53
										&:hover, &:focus, &.current {
54
											color:white;
55
										}
56
										&.current {
57
											text-decoration: underline;
58
										}
59
										&.disabled {
60
											color: $inactive-color;
61
											cursor: default;
62

    
63
										}
64
									}
65
								}
66
							}
67
						}
68
					}
69
					.nums {
70
						text-align: right;
71
						list-style:none outside none;
72
						margin:0;
73
						height: 50px;
74
						line-height: 50px;
75
						font-size:emCalc(9px);
76
						padding-right:120px;
77
						color:$secondary-color;
78
						li {
79
							list-style:none outside none;
80
							display: inline;
81
							p {
82
								display: none;
83
								position: relative;
84
								top: 1px;
85
								font-size:12px;
86
								margin-left:12px;
87
								strong {
88
									margin-right:5px;
89
								}
90
							}
91
							em {
92
								display: inline-block;
93
								border-radius:50%;
94
								border:1px solid $secondary-color;
95
								width:20px;
96
								height:20px;
97
								line-height: 18px;
98
								margin:0 3px;
99
								text-align: center;
100
								font-style: normal;
101
							}
102
							a {
103
								color:$secondary-color;
104
								display: block;
105
								&:hover {
106
									cursor: default;
107
								}
108
							}
109
							&.current{
110
								float: left;
111
								p {
112
									display: inline-block;
113
								}
114
								em {
115
									font-size:12px;
116
									width:30px;
117
									height:30px;
118
									line-height: 27px;
119
									border-color:$secondary-color;
120
									* {
121
										color:$secondary-color;
122
									}
123
								}
124
							}
125
						}
126
					}
127
				}
128
				.middle {
129
					padding-top:$bar-height+$bar-submenu-height;
130
					.steps {
131
						position:relative;
132
						width:100%;
133
					}
134
					.step {
135
						position: absolute;
136
						top:0;
137
						width:100%;
138
						display:none;
139
						&.current {
140
							display: block;
141
						}
142
						padding:50px 0 50px;
143
						&.step-2 {
144
							// padding-top:30px;
145
							.dropdown {
146
								margin-bottom:40px;
147
							}
148
						}
149
						&.step-3 {
150
							// padding-top: 45px;
151
						}
152
						.os {
153
							li {
154
								display: none;
155
								list-style: none outside none;
156
								font-size:emCalc(12px);
157
								@extend .clearfix;
158
								padding:15px 0;
159
								&:hover,
160
								&.hover {
161
									background:$overlay-darker-color;
162
								}
163
								&.current {
164
									background:white;
165
									color:$overlay-bg-color;
166
									.name-col {
167
										color:$overlay-bg-color;
168
									}
169
									.btn-col {
170
										a {
171
											border-color:$overlay-bg-color;
172
											color:$overlay-bg-color;
173
											&.current {
174
												color:white;
175
												background:$overlay-bg-color;
176
											}
177
										}
178
									}
179
								}
180
								&.system-images {
181
									display: list-item;
182
								}
183
								.img-col {
184
									float:left;
185
									width:50px;
186
									line-height: $btn-height;
187
								}
188
								.name-col {
189
									float: left;
190
									color: $wizard-base-font-color;
191
									width:71%;
192
									padding-right:10px;
193
									line-height: $btn-height;
194
								}
195
								.size-col {
196
									float:left;
197
									width:10%;
198
									line-height: $btn-height;
199
								}
200
								.btn-col {
201
									float:right;
202
									width:10%;
203
									margin-left:10px;
204
									a {
205
										@extend .btn5;
206

    
207
											font-size:1em;
208
										&.current {
209
											color:$overlay-bg-color;
210
										}
211
									}
212
								}
213
								.details {
214
									display: none;
215
									background:darken(white,10%);
216
									padding:22px 0;
217
									margin:20px 6px -9px;
218
									color: $body-font-color;
219
									h3 {
220
										font-size: 1em;
221
										font-weight: normal;
222
										margin-bottom:1em;
223
										padding-left:50px;
224
									}
225
									dl {
226
										margin:0;
227
										padding-left:50px;
228
										@extend .clearfix;
229
										dt {
230
											width: 20%;
231
											float:left;
232
											font-weight:normal;
233
										}
234
										dd {
235
											margin:0 0 5px;
236
										}
237
									}
238
								}
239
							}
240
						}
241
						.flavor {
242
							list-style: none outside none;
243
							li {
244
								list-style:none outside none;
245
								margin-bottom:30px;
246
								.title {
247
									@extend .clearfix;
248
									height:40px;
249
									overflow:hidden;
250
									margin-bottom:emCalc(8px);
251
									color:white;
252
									vertical-align: top;
253
									.snf-font {
254
										display: block;
255
										width:60px;
256
										font-size:38px;
257
										float: left;
258
									}
259
									h2 {
260
										font-size:emCalc(14px);
261
										span {
262
											font-weight:normal;
263
										}
264
										float:left;
265
										width: 140px;
266
										color:white;
267
										margin-right:60px;
268
										padding-left:emCalc(10px);
269
										em {
270
											display: block;
271
											margin-top:4px;
272
											font-size:11px;
273
											font-style:normal;
274
											font-weight:normal;
275
											white-space: nowrap;
276
											line-height: 13px;
277
										}
278
									}
279
									p {
280
										visibility: hidden;
281
										overflow:hidden;
282
										min-height:40px;
283
										font-size:11px;
284
										line-height:11px;
285
									}
286
								}
287
								.options-bar {
288
									@extend .clearfix;
289
									.bar {
290
										width:200px;
291
										float:left;
292
										margin-right:60px;
293
										height: 20px;
294
										position: relative;
295
										top:10px;
296
										.wrap {
297
											border:1px solid white;
298
											padding:1px;
299
											height: 100%;
300
											&.disabled-progress-bar {
301
												border-color: $disabled-resource-color;
302
												.container{
303
													.total {
304
														background-color: $disabled-resource-color;
305
													}
306
												}
307
											}
308
											.container {
309
												height: 100%;
310
												.total {
311
													background:$primary-color;
312
													height: 100%;
313
													float:left;
314
													position: relative;
315
													.current {
316
														background:white;
317
														height: 100%;
318
														float:left;
319
													}
320
													span {
321
														position:absolute;
322
														right:10px;
323
														font-size: emCalc(9px);
324
														top:2px;
325
													}
326
													&.low {
327
														span {
328
															right:-30px;
329
															color:white;
330
														}
331
													}
332
												}
333
											}
334

    
335
										}
336
									}
337
									.options {
338
										overflow:hidden;
339
										list-style: none outside none;
340
										li {
341
											list-style: none outside none;
342
											display: inline-block;
343
											margin-right: 10px;
344
											margin-bottom:0;
345
											a {
346
												@extend .btn5;
347
												min-width: 60px;
348
												&.current {
349
													color:$overlay-bg-color;
350
												}
351
												&.disabled {
352
													border-color: $disabled-resource-color;
353
													color: $disabled-resource-color;
354
													&:hover, &:active {
355
														cursor: default;
356
														border-width: 1px;
357
														line-height: 28px;
358

    
359
													}
360
												}
361
											}
362
										}
363
									}
364
								}
365
							}
366
						}
367
						.summary {
368
							padding-bottom:40px;
369
							.row {
370
								.wrap {
371
									max-width: $row-small;
372
									border-top:1px solid white;
373
									padding-top:1em;
374
									// margin-top:1em;
375
								}
376
								&:first-child {
377
									.wrap {
378
										border-top:0 none;
379
										margin-top:0;
380
									}
381
									dl {
382
										dt {
383
											font-weight: bold;
384
										}
385
									}
386
								}
387
							}
388
							h2 {
389
								font-size:1em;
390
								color:white;
391
								margin-bottom:1em;
392
							}
393
							dl {
394
								margin-bottom:0;
395
								span {
396
									width:40px;
397
									display: inline-block;
398
									font-size:20px;
399
								}
400
								dt {
401
									display: inline-block;
402
									width: 42%;
403
									vertical-align: top;
404
									font-weight:600;
405
								}
406
								dd {
407
									display: inline-block;
408
									width:45%;
409
									margin-bottom:1em;
410
								}
411
							}
412
						}
413
						.advanced-conf-step {
414
							color: $wizard-base-font-color;
415
							h2 {
416
								color: $wizard-base-font-color;
417
								font-size: 1em;
418
								margin-bottom: 10px;
419
								line-height: 1;
420
							}
421
							p {
422
								font-size: $wizard-paragraph-font-size;
423
							}
424
			                .snf-checkbox-checked, .snf-checkbox-unchecked {
425
			                    color: $wizard-base-font-color;
426
			                }
427
			                .expand-btn {
428
			                    margin: 50px 0 $step-adv-padding;
429
			                    a {
430
			                        color:$wizard-base-font-color;
431
			                        span {
432
										padding-left:24px;
433
			                        }
434
			                      }
435
			                }
436
			                .adv-main {
437
			                    .vm-name {
438
			                        h2 {
439
			                            color:white;
440
			                            font-size:1em;
441
			                            margin-bottom:0.5em;
442
			                        }
443
			                    }
444
			                }
445
			                .btn5 {
446
			                    &:hover {
447
			                        color:white;
448
			                }
449
			                    &.current, &.current:hover {
450
			                        color:$overlay-bg-color;
451
			                    }
452
			                }
453
			                .advanced-conf-options {
454
			                    display: none;
455
			                    .check {
456
									font-size: 20px;
457
			                    }
458
			                    .area {
459
			                        padding:$step-adv-padding 0;
460
			                        .row {
461
				                        p{
462
											max-width:340px;
463
											margin-bottom: 20px;
464
				                        }
465
			                        }
466
			                        ul {
467
			                            li {
468
			                                position: relative;
469
			                                list-style:none outside none;
470
			                                margin-bottom:7px;
471
			                                &.checkbox {
472
			                                    &:hover {
473
			                                        cursor: pointer;
474
			                                    }
475
			                                }
476
			                                h3 {
477
			                                    width: $conf-area-h-width;
478
			                                    color:white;
479
			                                    font-size:1em;
480
			                                    font-weight: normal;
481
			                                    margin:0 28px 0 0;
482
			                                    display: inline-block;
483
			                                    //&.net-name { width: 9.063em }
484
			                                }
485
			                            }
486
			                        }
487
			                    }
488
			                    .ssh-keys-area {
489
			                        background-color: $ssh-opt-area-color;
490
			                        .btn5 {
491
										margin-top: 3px;
492
			                        }
493

    
494
			                    }
495
			                    .networks-area {
496
			                        background-color: $net-opt-area-color;
497
			                        ul {
498
										position: relative;
499
										margin-bottom:0;
500
			                        }
501
			                        li {
502
			                            .net-icons {
503
			                                padding-right:30px;
504
			                                display: inline-block;
505
			                                width:145px;
506
			                                text-align: right;
507
			                                font-size:30px;
508
			                                margin-bottom: 0;
509
			                                position: relative;
510
			                                span {
511
												position: relative;
512
												&.snf-router-outline {
513
													top:-1px;
514
			                                    }
515
			                                    &.snf-www {
516
			                                        top:6px;
517
			                                    }
518
			                                    &.snf-network-full {
519
			                                        top:5px;
520
			                                    }
521
			                                    &.temp-line {
522
													position: absolute;
523
													height:1px;
524
													width:13px;
525
													background:white;
526
													bottom:15px;
527
													&.line1 { right:56px; }
528
													&.line2 {
529
														right:97px;
530
														width:10px;
531
													}
532
												}
533
											}
534
										}
535
			                            &.more {
536
			                                background:$net-more-opt-area-color;
537
			                                margin:$step-adv-padding 6px;
538
			                                padding:$step-adv-padding 0;
539
			                                color:#fff;
540
			                                h3 {
541
			                                    color:#fff;
542
			                                    padding-left: 145px;
543
			                                    &:hover {
544
													cursor: pointer;
545
			                                    }
546
			                                }
547
			                                .btn5 {
548
			                                    margin-top:20px;
549
			                                    border-color:#fff;
550
			                                    color:#fff;
551
			                                    margin-left:145px;
552
			                                }
553
			                                .with-checkbox {
554
			                                    a {
555
			                                        span {
556
			                                            color: #fff;
557
			                                        }
558
			                                    }
559
			                                }
560
			                            }
561
			                        }
562

    
563
			                    }
564
			                    .tags-area {
565
			                        background-color: $tag-opt-area-color;
566
			                        .snf-color-picker {
567
			                            display: none;
568
			                        }
569
			                        #picker {
570
			                            position: relative;
571
			                            width: 207px;
572
			                            margin: 30px 5px;
573
			                            display: inline-block;
574
			                        }
575
			                        .btns {
576
			                            margin-top: 77px;
577
			                            margin-bottom: 30px;
578
			                        }
579
			                        .btn5 {
580
			                            margin-right:20px;
581
			                        }
582
			                        .tag-demo {
583
										left:10px;
584
			                        }
585
			                        h3 {
586
			                            width: $conf-area-h-width;
587
			                            color:white;
588
			                            font-size:1em;
589
			                            font-weight: normal;
590
			                            margin:0 28px 0 0;
591
			                            display: inline-block;
592
			                            //&.net-name { width: 9.063em }
593
			                           }
594
			                        .list-header {
595
										position: relative;
596
										left: -14px;
597
										h3 {
598
											margin-right: 35px;
599
										}
600
									}
601
			                    }
602
			                }
603
			            }
604
			        }
605
			    }
606
			    .bottom {
607
			        position: fixed;
608
			        left:0;
609
			        right:0;
610
			        bottom:0;
611
			        border-top:1px solid $overlay-color-top;
612
			        background:$overlay-bg-color;
613
			        .row {
614
			            height: $bar-submenu-height;
615
			            line-height: $bar-submenu-height;
616
			        }
617
			        .nav {
618
			            height: $bar-submenu-height;
619
			            line-height: $bar-submenu-height;
620
			            color:white;
621
			            display: inline-block;
622
			            position: relative;
623
			            font-size: emCalc(12px);
624
			            top:($bar-submenu-height - 30px)/2;
625
			            width: 100px;
626
			            &:hover,
627
			            &:focus {
628
			                @include transition(background, 0ms, ease-out);
629
			            }
630
			            span {
631
			                display: inline-block;
632
			                height: 30px;
633
			                line-height:30px;
634
			                float: left;
635
			                &:hover,
636
			                &:focus {
637
			                    @include transition(background, 0ms, linear);
638
			                }
639
			            }
640
			        }
641
			        .prev {
642
			            float:left;
643
			            height:30px;
644
			            padding-left:18px;
645
			            background:url('../images/nav-edge-lt.png') no-repeat left top;
646
			            span {
647
			                padding-right:10px;
648
			                background:url('../images/nav-lt.png') no-repeat right top;
649
			            }
650
			            &:hover,
651
			            &.active,
652
			            &:focus {
653
			                background-position:left bottom;
654
			                span {
655
			                    background-position:right bottom;
656
			                }
657
			            }
658
			        }
659
			        .next {
660
			            float:right;
661
			            height:30px;
662
			            padding-right:18px;
663
			            background:url('../images/nav-edge-rt.png') no-repeat right top;
664
			            span {
665
			                padding-left:10px;
666
			                background:url('../images/nav-rt.png') no-repeat left top;
667
			                float: right;
668
			            }
669
			            &:hover,
670
			            &.active,
671
			            &:focus {
672
			                background-position:right bottom;
673
			                span {
674
			                    background-position:left bottom;
675
			                    float:right;
676
			                }
677
			            }
678
			        }
679
			    }
680
		} // end of .wizard
681

    
682

    
683

    
684

    
685

    
686

    
687
// for network creation wizard
688
#network-wizard {
689

    
690
	a {
691
		&.nav:focus {
692
			border: none;
693
		}
694
		&.radio_btn:focus, &.check:focus{
695
				border: 1px solid #aee7cc;
696
				padding: 2px;
697
			}
698
	}
699

    
700
	li {
701
		list-style: none outside none;
702
		position: relative;
703
	}
704

    
705
	.snf-checkbox-checked, .snf-checkbox-unchecked {
706
		font-size: 1.3em;
707
	}
708
	.subnet_options {
709
		margin: 0;
710
		li {
711
			margin-top: 20px;
712
		}
713
	}
714
	.step {
715
		a {	color: $wizard-base-font-color;}
716
		.network_options {
717
			position: relative;
718
			padding-bottom: 20px;
719
			.explanatory {
720
					font-size:emCalc(12px);
721
					margin-top:20px;
722
					margin-bottom:60px;
723
			}
724
			.check, .radio_btn {
725
				position: absolute;
726
				right: 0;
727
				&:focus {
728
					right: -3px;
729
					top: -3px;
730
				}
731
			}
732
			.network-name {
733
				margin: 40px 0;
734
				h2 {
735
					color:white;
736
					font-size: emCalc(16px);
737
				}
738
			}
739
			
740
			
741
			li{
742
				display: block;
743
				width: 360px;
744
				&.manual{
745
					position: relative;
746
					.input {
747
						position: absolute;
748
						right: -170px;
749
						width: 150px;
750
						bottom: 5px;
751
						display: none;
752
					}
753
				}
754
				&.project-selection li {
755
					width: 100%;
756
				}
757
			}
758
		}
759
	}
760
}
761

    
762
// for volume creation wizard
763
#volume-wizard {
764
	a {
765
		&.nav:focus {
766
			border: none;
767
		}
768
		&.radio_btn:focus, &.check:focus{
769
				border: 1px solid #aee7cc;
770
				padding: 2px;
771
			}
772
	}
773

    
774
	li {
775
		list-style: none outside none;
776
		position: relative;
777
	}
778

    
779
	.snf-checkbox-checked, .snf-checkbox-unchecked {
780
		font-size: 1.3em;
781
	}
782
	.step {
783
		a {
784
			color: $wizard-base-font-color;
785
		}
786
		p {
787
			font-size: $wizard-paragraph-font-size-custom;
788
			line-height: 1;
789
		}
790
		.volume_options {
791
			&>li{
792
				display: block;
793
				&.volume-name { //same with network-name and vm-name
794
					margin: 40px 0;
795
					h2 {
796
						color:white;
797
						font-size: emCalc(16px);
798
					}
799
				}
800
				list-style: none outside none;
801
				margin-bottom:30px;
802
				.title {
803
					@extend .clearfix;
804
					height:40px;
805
					overflow:hidden;
806
					margin-bottom:emCalc(8px);
807
					color:white;
808
					vertical-align: top;
809
					.snf-font {
810
						display: block;
811
						width:60px;
812
						font-size:38px;
813
						float: left;
814
					}
815
					h2 {
816
						font-size:emCalc(14px);
817
						span {
818
							font-weight:normal;
819
						}
820
						float:left;
821
						width: 140px;
822
						color:white;
823
						margin-right:60px;
824
						padding-left:emCalc(10px);
825
						em {
826
							display: block;
827
							margin-top:4px;
828
							font-size:11px;
829
							font-style:normal;
830
							font-weight:normal;
831
							white-space: nowrap;
832
							line-height: 13px;
833
						}
834
					}
835
					p {
836
						visibility: hidden;
837
						overflow:hidden;
838
						min-height:40px;
839
						font-size:11px;
840
						line-height:11px;
841
					}
842
				}
843
				.options-bar {
844
					@extend .clearfix;
845
					.bar {
846
						width:200px;
847
						float:left;
848
						margin-right:60px;
849
						height: 20px;
850
						position: relative;
851
						top:10px;
852
						.wrap {
853
							border:1px solid white;
854
							padding:1px;
855
							height: 100%;
856
							&.disabled-progress-bar {
857
								border-color: $disabled-resource-color;
858
								.container{
859
									.total {
860
										background-color: $disabled-resource-color;
861
									}
862
								}
863
							}
864
							.container {
865
								height: 100%;
866
								.total {
867
									background:$primary-color;
868
									height: 100%;
869
									float:left;
870
									position: relative;
871
									.current {
872
										background:white;
873
										height: 100%;
874
										float:left;
875
									}
876
									span {
877
										position:absolute;
878
										right:10px;
879
										font-size: emCalc(9px);
880
										top:2px;
881
									}
882
									&.low {
883
										span {
884
											right:-30px;
885
											color:white;
886
										}
887
									}
888
								}
889
							}
890
						}
891
					}
892
					.options {
893
						overflow:hidden;
894
						list-style: none outside none;
895
						li {
896
							list-style: none outside none;
897
							display: inline-block;
898
							margin-right: 10px;
899
							margin-bottom:0;
900
							a {
901
								@extend .btn5;
902
								min-width: 60px;
903
								&.current {
904
									color:$overlay-bg-color;
905
								}
906
								&.disabled {
907
									border-color: $disabled-resource-color;
908
									color: $disabled-resource-color;
909
									&:hover, &:active {
910
										cursor: default;
911
										border-width: 1px;
912
										line-height: 28px;
913

    
914
									}
915
								}
916
							}
917
						}
918
					}
919
				}
920
			}
921
		}
922
		.explain {
923
			margin-bottom: 1em;
924
		}
925
	}
926
}