Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (24.1 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 {
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-color-top;
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
						padding:50px 0 50px;
140
						&.current {
141
							display: block;
142
						}
143
						h2 {
144
							color: white;
145
							font-size: 1em;
146
						}
147
						li {
148
							list-style: none outside none;
149
							position: relative;
150
						}
151

    
152
						a {
153
							color: white;
154
						}
155
						.vms-list {
156
							margin-top: emCalc(16px);
157
							&>li {
158
								margin-bottom: emCalc(8px);
159
								margin-left: emCalc(24px);
160
								&:first-child {
161
									.img-wrap .snf-font{
162
										color: white;
163
									}
164
								}
165
								&>div, &>a {
166
									display: inline-block;
167
									margin-right: 15px;
168
								}
169
								.img-wrap {
170
									position: relative;
171
									width: emCalc(30px);
172
									.snf-font {
173
										font-size: emCalc(30px);
174
										color: $vm-active-color;
175
										line-height: 120%
176
									}
177
									.os{
178
										@include sprite('../images/os-unknown.png', 14px, 14px);
179
										background-size: 14px;
180
										top: 5px;
181
										left: 18px;
182
									}
183
								}
184
								.name {
185
									width: $conf-area-h-width;
186
								}
187
							}
188
						}
189

    
190

    
191

    
192
						&.step-2 {
193
							// padding-top:30px;
194
							.dropdown {
195
								margin-bottom:40px;
196
							}
197
						}
198
						&.step-3 {
199
							// padding-top: 45px;
200
						}
201
						.os {
202
							li {
203
								display: none;
204
								list-style: none outside none;
205
								font-size:emCalc(12px);
206
								@extend .clearfix;
207
								padding:15px 0;
208
								&:hover,
209
								&.hover {
210
									background:$gray-0;
211
								}
212
								&.current {
213
									background:white;
214
									color:$overlay-bg-color;
215
									.name-col {
216
										color:$overlay-bg-color;
217
									}
218
									.btn-col {
219
										a {
220

    
221
											border-color:$overlay-bg-color;
222
											color:$overlay-bg-color;
223
											&:hover {
224
												span {
225
													border-color:$overlay-bg-color; 
226
												}
227
											}
228
											&.current {
229
												color:white;
230
												span {
231
													background:$overlay-bg-color;
232
												}
233
											}
234
										}
235
									}
236
								}
237
								&.system-images {
238
									display: list-item;
239
								}
240
								.img-col {
241
									float:left;
242
									width:50px;
243
									line-height: $btn-height;
244
								}
245
								.name-col {
246
									float: left;
247
									color: $wizard-base-font-color;
248
									width:71%;
249
									padding-right:10px;
250
									line-height: $btn-height;
251
								}
252
								.size-col {
253
									float:left;
254
									width:10%;
255
									line-height: $btn-height;
256
								}
257
								.btn-col {
258
									float:right;
259
									width:10%;
260
									margin-left:10px;
261
									a {
262
										@extend .btn5;
263

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

    
394
										}
395
									}
396
									.options {
397
										overflow:hidden;
398
										list-style: none outside none;
399
										li {
400
											list-style: none outside none;
401
											display: inline-block;
402
											margin-right: 10px;
403
											margin-bottom:0;
404
											a {
405
												@extend .btn5;
406
												min-width: 60px;
407
												&.current {
408
													color:$overlay-bg-color;
409
												}
410
												&.disabled {
411
													border-color: $disabled-resource-color;
412
													color: $disabled-resource-color;
413
													&:hover, &:active {
414
														cursor: default;
415
														border-width: 1px;
416
														line-height: 28px;
417

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

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

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

    
757

    
758
// for network creation wizard
759
#network-wizard {
760

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

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

    
975
									}
976
								}
977
							}
978
						}
979
					}
980
				}
981
			}
982
		}
983
		.explain {
984
			margin-bottom: 1em;
985
		}
986
	}
987
}