Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (24.5 kB)

1
.body-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-header;
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.row {
20
							max-width: 100%;
21
							padding:0 $header-padding-horizontal;
22
							.close {
23
								color:$primary-color;
24
								&:hover, &:focus {
25
									color:white;
26
								}
27
							}
28
						height: $bar-menu-height;
29
						line-height: 50px;
30
						background:$overlay-color-top;
31
					}
32
					.menus {
33
						height: $bar-submenu-height;
34
						.sub-menu {
35
							display: none;
36
							&.current {
37
								display: block;
38
								animation: fadeIn 0.7s;
39
								-webkit-animation: fadeIn 0.7s;
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
									&.current {
52
										text-decoration: underline;
53
										a {
54
											color: white;
55
										}
56
									}
57
									a {
58
										color:$body-font-color;
59
										&:hover, &:focus, {
60
											color:white;
61
										}
62
										&.disabled {
63
											color: $inactive-color;
64
											cursor: default;
65

    
66
										}
67
									}
68
								}
69
							}
70
						}
71
					}
72
					.nums {
73
						text-align: right;
74
						list-style:none outside none;
75
						margin:0;
76
						height: 50px;
77
						line-height: 50px;
78
						font-size:emCalc(9px);
79
						padding-right:120px;
80
						color:$secondary-color;
81
						li {
82
							list-style:none outside none;
83
							display: inline;
84
							p {
85
								display: none;
86
								position: relative;
87
								top: 1px;
88
								font-size:12px;
89
								margin-left:12px;
90
								strong {
91
									margin-right:5px;
92
								}
93
							}
94
							em {
95
								display: inline-block;
96
								border-radius:50%;
97
								border:1px solid $secondary-color;
98
								width:20px;
99
								height:20px;
100
								line-height: 18px;
101
								margin:0 3px;
102
								text-align: center;
103
								font-style: normal;
104
							}
105
							a {
106
								color:$secondary-color;
107
								display: block;
108
								&:hover {
109
									cursor: default;
110
								}
111
							}
112
							&.current{
113
								float: left;
114
								animation: fadeIn 0.7s;
115
								-webkit-animation: fadeIn 0.7s;
116
								p {
117
									display: inline-block;
118
								}
119
								em {
120
									font-size:12px;
121
									width:30px;
122
									height:30px;
123
									line-height: 27px;
124
									border-color:$secondary-color;
125
									* {
126
										color:$secondary-color;
127
									}
128
								}
129
							}
130
							&.past {
131
								display: none;
132
							}
133
						}
134
					}
135
				}
136
				.middle {
137
					padding-top:$bar-height+$bar-submenu-height;
138
					.steps {
139
						position:relative;
140
						width:100%;
141
					}
142
					.step {
143
						&.moveLeft {
144
							left: 100%;
145
							top: 0
146
						}
147
						// background-color: cyan;
148
						border: 1px solid white;
149
						position: absolute;
150
						// top:0;
151
						width:100%;
152
						display:none;
153
						padding:50px 0 50px;
154
						&.current {
155
							display: block;
156
						}
157
						h2 {
158
							color: white;
159
							font-size: 1em;
160
						}
161
						li {
162
							list-style: none outside none;
163
							position: relative;
164
						}
165

    
166
						a {
167
							color: white;
168
						}
169
						.vms-list {
170
							margin-top: emCalc(16px);
171
							&>li {
172
								margin-bottom: emCalc(8px);
173
								margin-left: emCalc(24px);
174
								&:first-child {
175
									.img-wrap .snf-font{
176
										color: white;
177
									}
178
								}
179
								&>div, &>a {
180
									display: inline-block;
181
									margin-right: 15px;
182
								}
183
								.img-wrap {
184
									position: relative;
185
									width: emCalc(30px);
186
									.snf-font {
187
										font-size: emCalc(30px);
188
										color: $vm-active-color;
189
										line-height: 120%
190
									}
191
									.os{
192
										@include sprite('../images/os-unknown.png', 14px, 14px);
193
										background-size: 14px;
194
										top: 5px;
195
										left: 18px;
196
									}
197
								}
198
								.name {
199
									width: $conf-area-h-width;
200
								}
201
							}
202
						}
203

    
204

    
205

    
206
						&.step-2 {
207
							// padding-top:30px;
208
							.dropdown {
209
								margin-bottom:40px;
210
							}
211
						}
212
						&.step-3 {
213
							// padding-top: 45px;
214
						}
215
						.os {
216
							li {
217
								display: none;
218
								list-style: none outside none;
219
								font-size:emCalc(12px);
220
								@extend .clearfix;
221
								padding:15px 0;
222
								&:hover,
223
								&.hover {
224
									background:$gray-0;
225
								}
226
								&.current {
227
									background:white;
228
									color:$overlay-bg-color;
229
									.name-col {
230
										color:$overlay-bg-color;
231
									}
232
									.btn-col {
233
										a {
234

    
235
											border-color:$overlay-bg-color;
236
											color:$overlay-bg-color;
237
											&:hover {
238
												span {
239
													border-color:$overlay-bg-color; 
240
												}
241
											}
242
											&.current {
243
												color:white;
244
												span {
245
													background:$overlay-bg-color;
246
												}
247
											}
248
										}
249
									}
250
								}
251
								&.system-images {
252
									display: list-item;
253
								}
254
								.img-col {
255
									float:left;
256
									width:50px;
257
									line-height: $btn-height;
258
								}
259
								.name-col {
260
									float: left;
261
									color: $wizard-base-font-color;
262
									width:71%;
263
									padding-right:10px;
264
									line-height: $btn-height;
265
								}
266
								.size-col {
267
									float:left;
268
									width:10%;
269
									line-height: $btn-height;
270
								}
271
								.btn-col {
272
									float:right;
273
									width:10%;
274
									margin-left:10px;
275
									a {
276
										@extend .btn5;
277

    
278
											font-size:1em;
279
										&.current {
280
											color:$overlay-bg-color;
281
										}
282
									}
283
								}
284
								.details {
285
									display: none;
286
									background:darken(white,10%);
287
									padding:22px 0;
288
									margin:20px 6px -9px;
289
									color: $body-font-color;
290
									h3 {
291
										font-size: 1em;
292
										font-weight: normal;
293
										margin-bottom:1em;
294
										padding-left:50px;
295
									}
296
									dl {
297
										margin:0;
298
										padding-left:50px;
299
										@extend .clearfix;
300
										dt {
301
											width: 20%;
302
											float:left;
303
											font-weight:normal;
304
										}
305
										dd {
306
											margin:0 0 5px;
307
										}
308
									}
309
								}
310
							}
311
						}
312
						.flavor {
313
							list-style: none outside none;
314
							li {
315
								list-style:none outside none;
316
								margin-bottom:30px;
317
								.title {
318
									@extend .clearfix;
319
									height:40px;
320
									overflow:hidden;
321
									margin-bottom:emCalc(8px);
322
									color:white;
323
									vertical-align: top;
324
									.snf-font {
325
										display: block;
326
										width:60px;
327
										font-size:38px;
328
										float: left;
329
										position: relative;
330
										bottom: -3px;
331
									}
332
									h2 {
333
										font-size:emCalc(14px);
334
										span {
335
											font-weight:normal;
336
										}
337
										float:left;
338
										width: 140px;
339
										color:white;
340
										margin-right:60px;
341
										padding-left:emCalc(10px);
342
										em {
343
											display: block;
344
											margin-top:4px;
345
											font-size:11px;
346
											font-style:normal;
347
											font-weight:normal;
348
											white-space: nowrap;
349
											line-height: 13px;
350
										}
351
									}
352
									p {
353
										visibility: hidden;
354
										overflow:hidden;
355
										min-height:40px;
356
										font-size:11px;
357
										line-height:11px;
358
									}
359
								}
360
								.options-bar {
361
									@extend .clearfix;
362
									.bar {
363
										width:200px;
364
										float:left;
365
										margin-right:60px;
366
										height: 20px;
367
										position: relative;
368
										top:10px;
369
										.wrap {
370
											border:1px solid white;
371
											padding:1px;
372
											height: 100%;
373
											&.disabled-progress-bar {
374
												border-color: $disabled-resource-color;
375
												.container{
376
													.total {
377
														background-color: $disabled-resource-color;
378
													}
379
												}
380
											}
381
											.container {
382
												height: 100%;
383
												.total {
384
													background:$primary-color;
385
													height: 100%;
386
													float:left;
387
													position: relative;
388
													.current {
389
														background:white;
390
														height: 100%;
391
														float:left;
392
													}
393
													span {
394
														position:absolute;
395
														right:10px;
396
														font-size: emCalc(9px);
397
														top:2px;
398
													}
399
													&.low {
400
														span {
401
															right:-30px;
402
															color:white;
403
														}
404
													}
405
												}
406
											}
407

    
408
										}
409
									}
410
									.options {
411
										overflow:hidden;
412
										list-style: none outside none;
413
										li {
414
											list-style: none outside none;
415
											display: inline-block;
416
											margin-right: 10px;
417
											margin-bottom:0;
418
											a {
419
												@extend .btn5;
420
												min-width: 60px;
421
												&.current {
422
													color:$overlay-bg-color;
423
												}
424
												&.disabled {
425
													border-color: $disabled-resource-color;
426
													color: $disabled-resource-color;
427
													&:hover, &:active {
428
														cursor: default;
429
														border-width: 1px;
430
														line-height: 28px;
431

    
432
													}
433
												}
434
											}
435
										}
436
									}
437
								}
438
							}
439
						}
440
						.summary {
441
							padding-bottom:40px;
442
							.row {
443
								.wrap {
444
									max-width: $row-small;
445
									border-top:1px solid white;
446
									padding-top:1em;
447
									// margin-top:1em;
448
								}
449
								&:first-child {
450
									.wrap {
451
										border-top:0 none;
452
										margin-top:0;
453
									}
454
									dl {
455
										dt {
456
											font-weight: bold;
457
										}
458
									}
459
								}
460
							}
461
							h2 {
462
								font-size:1em;
463
								color:white;
464
								margin-bottom:1em;
465
							}
466
							dl {
467
								margin-bottom:0;
468
								span {
469
									width:40px;
470
									display: inline-block;
471
									font-size:20px;
472
									position: relative;
473
									bottom: -2px;
474
								}
475
								dt {
476
									display: inline-block;
477
									width: 42%;
478
									vertical-align: top;
479
									font-weight:600;
480
								}
481
								dd {
482
									display: inline-block;
483
									width:45%;
484
									margin-bottom:1em;
485
								}
486
							}
487
						}
488
						.advanced-conf-step {
489
							color: $wizard-base-font-color;
490
							h2 {
491
								color: $wizard-base-font-color;
492
								font-size: 1em;
493
								margin-bottom: 10px;
494
								line-height: 1;
495
							}
496
							p {
497
								font-size: $wizard-paragraph-font-size;
498
							}
499
			                .snf-checkbox-checked, .snf-checkbox-unchecked {
500
			                    color: $wizard-base-font-color;
501
			                }
502
			                .expand-btn {
503
			                    margin: 50px 0 $step-adv-padding;
504
			                    a {
505
			                        color:$wizard-base-font-color;
506
			                        span {
507
										padding-left:24px;
508
			                        }
509
			                      }
510
			                }
511
			                .adv-main {
512
			                    .vm-name {
513
			                        h2 {
514
			                            color:white;
515
			                            font-size:1em;
516
			                            margin-bottom:0.5em;
517
			                        }
518
			                    }
519
			                }
520
			                .btn5 {
521
			                    &:hover {
522
			                        color:white;
523
			                }
524
			                    &.current, &.current:hover {
525
			                        color:$overlay-bg-color;
526
			                    }
527
			                }
528
			                .advanced-conf-options {
529
			                    display: none;
530
			                    .check {
531
									font-size: 20px;
532
			                    }
533
			                    .area {
534
			                        padding:$step-adv-padding 0;
535
			                        .row {
536
				                        p{
537
											max-width:340px;
538
											margin-bottom: 20px;
539
				                        }
540
			                        }
541
			                        ul {
542
			                            li {
543
			                                position: relative;
544
			                                list-style:none outside none;
545
			                                margin-bottom:7px;
546
			                                &.checkbox {
547
			                                    &:hover {
548
			                                        cursor: pointer;
549
			                                    }
550
			                                }
551
			                                h3 {
552
			                                    width: $conf-area-h-width;
553
			                                    color:white;
554
			                                    font-size:1em;
555
			                                    font-weight: normal;
556
			                                    margin:0 28px 0 0;
557
			                                    display: inline-block;
558
			                                    //&.net-name { width: 9.063em }
559
			                                }
560
			                            }
561
			                        }
562
			                    }
563
			                    .ssh-keys-area {
564
			                        background-color: $ssh-opt-area-color;
565
			                        .btn5 {
566
										margin-top: 3px;
567
			                        }
568

    
569
			                    }
570
			                    .networks-area {
571
			                        background-color: $net-opt-area-color;
572
			                        ul {
573
										position: relative;
574
										margin-bottom:0;
575
			                        }
576
			                        li {
577
			                            .net-icons {
578
			                                padding-right:30px;
579
			                                display: inline-block;
580
			                                width:145px;
581
			                                text-align: right;
582
			                                font-size:30px;
583
			                                margin-bottom: 0;
584
			                                position: relative;
585
			                                span {
586
												position: relative;
587
												&.snf-router-outline {
588
													top:-1px;
589
			                                    }
590
			                                    &.snf-www {
591
			                                        top:5px;
592
			                                    }
593
			                                    &.snf-network-full {
594
			                                        top:5px;
595
			                                    }
596
			                                    &.temp-line {
597
													position: absolute;
598
													height:1px;
599
													width:13px;
600
													background:white;
601
													bottom:15px;
602
													&.line1 { right:56px; }
603
													&.line2 {
604
														right:97px;
605
														width:10px;
606
													}
607
												}
608
											}
609
										}
610
			                            &.more {
611
			                                background:$net-more-opt-area-color;
612
			                                margin:$step-adv-padding 6px;
613
			                                padding:$step-adv-padding 0;
614
			                                color:#fff;
615
			                                h3 {
616
			                                    color:#fff;
617
			                                    padding-left: 145px;
618
			                                    &:hover {
619
													cursor: pointer;
620
			                                    }
621
			                                }
622
			                                .btn5 {
623
			                                    margin-top:20px;
624
			                                    border-color:#fff;
625
			                                    color:#fff;
626
			                                    margin-left:145px;
627
			                                }
628
			                                .trigger-checkbox {
629
			                                    a {
630
			                                        span {
631
			                                            color: #fff;
632
			                                        }
633
			                                    }
634
			                                }
635
			                            }
636
			                        }
637

    
638
			                    }
639
			                    .tags-area {
640
			                        background-color: $tag-opt-area-color;
641
			                        .snf-color-picker {
642
			                            display: none;
643
			                        }
644
			                        #picker {
645
			                            position: relative;
646
			                            width: 207px;
647
			                            margin: 30px 5px;
648
			                            display: inline-block;
649
			                        }
650
			                        .btns {
651
			                            margin-top: 77px;
652
			                            margin-bottom: 30px;
653
			                        }
654
			                        .btn5 {
655
			                            margin-right:20px;
656
			                        }
657
			                        .tag-demo {
658
										@include circle(9px);
659
										margin: 0 15px 0 10px;
660
										vertical-align: text-bottom;
661
										border-color:transparent;
662
										color: transparent;
663
										// temporary
664
										&.tag4 {
665
											background-color: $red-1;
666
										}
667
										&.tag5 {
668
											background-color: $yellow-1;
669
										}
670
										&.tag6 {
671
											background-color: $orange-1;
672
										}
673
			                        }
674
			                        h3 {
675
			                            width: $conf-area-h-width;
676
			                            color:white;
677
			                            font-size:1em;
678
			                            font-weight: normal;
679
			                            margin:0 28px 0 0;
680
			                            display: inline-block;
681
			                            //&.net-name { width: 9.063em }
682
			                           }
683
			                        .list-header {
684
										position: relative;
685
										left: -14px;
686
										h3 {
687
											margin-right: 35px;
688
										}
689
									}
690
			                    }
691
			                }
692
			            }
693
			        }
694
			    }
695
			    .bottom {
696
			        position: fixed;
697
			        left:0;
698
			        right:0;
699
			        bottom:0;
700
			        border-top:1px solid $overlay-color-top;
701
			        background:$overlay-bg-color;
702
			        .row {
703
			            height: $bar-submenu-height;
704
			            line-height: $bar-submenu-height;
705
			        }
706
			        .nav {
707
			            height: $bar-submenu-height;
708
			            line-height: $bar-submenu-height;
709
			            color:white;
710
			            display: inline-block;
711
			            position: relative;
712
			            font-size: emCalc(12px);
713
			            top:($bar-submenu-height - 30px)/2;
714
			            width: 100px;
715
			            &:hover,
716
			            &:focus {
717
			                @include transition(background, 0ms, ease-out);
718
			            }
719
			            span {
720
			                display: inline-block;
721
			                height: 30px;
722
			                line-height:30px;
723
			                float: left;
724
			                &:hover,
725
			                &:focus {
726
			                    @include transition(background, 0ms, linear);
727
			                }
728
			            }
729
			        }
730
			        .prev {
731
			            float:left;
732
			            height:30px;
733
			            padding-left:18px;
734
			            background:url('../images/nav-edge-lt.png') no-repeat left top;
735
			            span {
736
			                padding-right:10px;
737
			                background:url('../images/nav-lt.png') no-repeat right top;
738
			            }
739
			            &:hover,
740
			            &.active,
741
			            &:focus {
742
			                background-position:left bottom;
743
			                span {
744
			                    background-position:right bottom;
745
			                }
746
			            }
747
			        }
748
			        .next {
749
			            float:right;
750
			            height:30px;
751
			            padding-right:18px;
752
			            background:url('../images/nav-edge-rt.png') no-repeat right top;
753
			            span {
754
			                padding-left:10px;
755
			                background:url('../images/nav-rt.png') no-repeat left top;
756
			                float: right;
757
			            }
758
			            &:hover,
759
			            &.active,
760
			            &:focus {
761
			                background-position:right bottom;
762
			                span {
763
			                    background-position:left bottom;
764
			                    float:right;
765
			                }
766
			            }
767
			        }
768
			    }
769
		} // end of .wizard
770

    
771

    
772
// for network creation wizard
773
#network-wizard {
774

    
775
	a {
776
		&.nav:focus {
777
			border: none;
778
		}
779
		&.radiobtn:focus, &.check:focus{
780
				border: 1px solid #aee7cc;
781
				padding: 2px;
782
			}
783
	}
784
	.snf-checkbox-checked, .snf-checkbox-unchecked {
785
		font-size: 1.3em;
786
	}
787
	.subnet-options {
788
		margin: 0;
789
		li {
790
			margin-top: 20px;
791
		}
792
	}
793
	.step {
794
		a {	color: $wizard-base-font-color;}
795
		.network-options {
796
			position: relative;
797
			padding-bottom: 20px;
798
			.explanatory {
799
					font-size:emCalc(12px);
800
					margin-top:20px;
801
					margin-bottom:60px;
802
			}
803
			.check, .radiobtn {
804
				position: absolute;
805
				right: 0;
806
				&:focus {
807
					right: -3px;
808
					top: -3px;
809
				}
810
			}
811
			.network-name {
812
				margin: 40px 0;
813
				h2 {
814
					color:white;
815
					font-size: emCalc(16px);
816
				}
817
			}
818
			
819
			
820
			li{
821
				display: block;
822
				width: 360px;
823
				&.manual{
824
					position: relative;
825
					.input {
826
						position: absolute;
827
						right: -170px;
828
						width: 150px;
829
						bottom: 5px;
830
						display: none;
831
					}
832
				}
833
				&.project-selection li {
834
					width: 100%;
835
				}
836
			}
837
		}
838
	}
839
}
840

    
841
// for volume creation wizard
842
#volume-wizard {
843
	a {
844
		&.nav:focus {
845
			border: none;
846
		}
847
		&.radiobtn:focus, &.check:focus{
848
				border: 1px solid #aee7cc;
849
				padding: 2px;
850
			}
851
	}
852
	.snf-checkbox-checked, .snf-checkbox-unchecked {
853
		font-size: 1.3em;
854
	}
855
	.step {
856
		a {
857
			color: $wizard-base-font-color;
858
		}
859
		p {
860
			font-size: $wizard-paragraph-font-size-custom;
861
			line-height: 1;
862
		}
863
		h2 {
864
			color:white;
865
			font-size: emCalc(16px);
866
		}
867
		.volume_options {
868
			&>li{
869
				display: block;
870
				&.volume-name { //same with network-name and vm-name
871
					margin: 40px 0;
872
				}
873
				list-style: none outside none;
874
				margin-bottom:30px;
875
				.title {
876
					@extend .clearfix;
877
					height:40px;
878
					overflow:hidden;
879
					margin-bottom:emCalc(8px);
880
					color:white;
881
					vertical-align: top;
882
					.snf-font {
883
						display: block;
884
						width:60px;
885
						font-size:38px;
886
						float: left;
887
						position: relative;
888
						bottom: -3px;
889
					}
890
					h2 {
891
						font-size:emCalc(14px);
892
						span {
893
							font-weight:normal;
894
						}
895
						float:left;
896
						width: 140px;
897
						color:white;
898
						margin-right:60px;
899
						padding-left:emCalc(10px);
900
						em {
901
							display: block;
902
							margin-top:4px;
903
							font-size:11px;
904
							font-style:normal;
905
							font-weight:normal;
906
							white-space: nowrap;
907
							line-height: 13px;
908
						}
909
					}
910
					p {
911
						visibility: hidden;
912
						overflow:hidden;
913
						min-height:40px;
914
						font-size:11px;
915
						line-height:11px;
916
					}
917
				}
918
				.options-bar {
919
					@extend .clearfix;
920
					.bar {
921
						width:200px;
922
						float:left;
923
						margin-right:60px;
924
						height: 20px;
925
						position: relative;
926
						top:10px;
927
						.wrap {
928
							border:1px solid white;
929
							padding:1px;
930
							height: 100%;
931
							&.disabled-progress-bar {
932
								border-color: $disabled-resource-color;
933
								.container{
934
									.total {
935
										background-color: $disabled-resource-color;
936
									}
937
								}
938
							}
939
							.container {
940
								height: 100%;
941
								.total {
942
									background:$primary-color;
943
									height: 100%;
944
									float:left;
945
									position: relative;
946
									.current {
947
										background:white;
948
										height: 100%;
949
										float:left;
950
									}
951
									span {
952
										position:absolute;
953
										right:10px;
954
										font-size: emCalc(9px);
955
										top:2px;
956
									}
957
									&.low {
958
										span {
959
											right:-30px;
960
											color:white;
961
										}
962
									}
963
								}
964
							}
965
						}
966
					}
967
					.options {
968
						overflow:hidden;
969
						list-style: none outside none;
970
						li {
971
							list-style: none outside none;
972
							display: inline-block;
973
							margin-right: 10px;
974
							margin-bottom:0;
975
							a {
976
								@extend .btn5;
977
								min-width: 60px;
978
								&.current {
979
									color:$overlay-bg-color;
980
								}
981
								&.disabled {
982
									border-color: $disabled-resource-color;
983
									color: $disabled-resource-color;
984
									&:hover, &:active {
985
										cursor: default;
986
										border-width: 1px;
987
										line-height: 28px;
988

    
989
									}
990
								}
991
							}
992
						}
993
					}
994
				}
995
			}
996
		}
997
		.explain {
998
			margin-bottom: 1em;
999
		}
1000
	}
1001
}