Revision 969d4e10

b/snf-cyclades-app/synnefo/ui/new_ui/ui/images_list.html
124 124
		<section class="main row">
125 125
			<div class="images entities grid-view">
126 126
				<ul class="items-list">
127
					<li data-status="add-new" class="add-new" data-overlay-id="image-wizard">
127
					<li data-status="add-new" class="add-new not-selectable" data-overlay-id="image-wizard">
128 128
						<div class="container">
129
							<div class="check">
129
							<a href="" class="check">
130 130
								<span class="snf-checkbox-unchecked"></span>
131
							</div>
131
							</a>
132 132
							<div class="img-wrap">
133 133
									<span class="snf-image-full snf-font"></span>
134 134
									<span class="os symbol">+</span>
......
162 162
							<div class="name">Image Name</div>
163 163
						</div>
164 164
						<div class="container">
165
							<div class="check">
165
							<a href="" class="check">
166 166
								<span class="snf-checkbox-unchecked"></span>
167
							</div>
167
							</a>
168 168
							<div class="img-wrap">
169 169
								<span class="snf-font snf-image-full"></span>
170 170
							</div>
......
199 199
							<div class="name">Image Name</div>
200 200
						</div>
201 201
						<div class="container">
202
							<div class="check">
202
							<a href="" class="check">
203 203
								<span class="snf-checkbox-unchecked"></span>
204
							</div>
204
							</a>
205 205
							<div class="img-wrap">
206 206
								<span class="snf-font snf-image-full"></span>						
207 207
							</div>
......
217 217
				</ul>
218 218
				<div class="lt-bar">
219 219
					<ul>
220
						<li class="select"><span class="snf-checkbox-unchecked checkbox"></span><em>Un</em>Select all</li>
220
						<li class="select trigger-checkbox">
221
							<a href="" class="check">
222
								<span class="snf-checkbox-unchecked checkbox"></span>
223
							</a>
224
							<em>Un</em>Select all
225
						</li>
221 226
						<li class="running"><a href="#" title="">Destroy</a></li>
222 227
						<!-- in case we want an action always activated
223 228
						<li class="pernament"><a href="" class="active">Action</a></li> -->
......
260 265
	
261 266
	<script type="text/javascript" src="javascripts/wizard.js"></script>
262 267
	<script type="text/javascript" src="javascripts/sshkeys-wizard.js"></script>
268
	<script type="text/javascript" src="javascripts/checkboxes-radiobuttons.js"></script>
263 269
  <script>
264 270
    $(document).foundation();
265 271
  </script>
b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/checkboxes-radiobuttons.js
1
/*
2
* functions concerning checkboxes and radiobuttons links
3
*/
4

  
5

  
6

  
7
ui.checkbox = {
8
    changeState : function(checkbox_link) {
9
        $(checkbox_link).find('.snf-checkbox-unchecked, .snf-checkbox-checked').toggleClass('snf-checkbox-unchecked snf-checkbox-checked');
10
        $(checkbox_link).closest('li').toggleClass('selected');
11
    },
12
    check : function(checkbox_link) {
13
        $(checkbox_link).find('span').removeClass('snf-checkbox-unchecked').addClass('snf-checkbox-checked');
14
        $(checkbox_link).closest('li').addClass('selected');
15
    },
16
    uncheck : function(checkbox_link) {
17
        $(checkbox_link).find('span').removeClass('snf-checkbox-checked').addClass('snf-checkbox-unchecked');
18
        $(checkbox_link).closest('li').removeClass('selected');
19
    },
20

  
21
    reset: function(area) {
22
        $(area).find('.snf-radio-checked').not('.prechecked').toggleClass('snf-radio-checked snf-radio-unchecked');
23
        $(area).find('.snf-radio-unchecked.prechecked').toggleClass('snf-radio-checked snf-radio-unchecked');
24
    }
25

  
26
}
27

  
28
ui.radiobtn = {
29
    changeState: function(radiobtn_link) {
30
        $(radiobtn_link).find('span.snf-radio-unchecked, span.snf-radio-checked').toggleClass('snf-radio-unchecked snf-radio-checked');
31
        $(radiobtn_link).closest('li').addClass('selected');
32
    },
33
    obtainOneChecked : function(radiobtn_link) {
34
        $(radiobtn_link).closest('ul').find('li').removeClass('selected');
35
        $(radiobtn_link).closest('ul').find('span.snf-radio-checked').toggleClass('snf-radio-unchecked snf-radio-checked');
36
    },
37
    reset : function(area) {
38
        $(area).find('.snf-checkbox-checked').not('.prechecked').toggleClass('snf-checkbox-checked snf-checkbox-unchecked');
39
        $(area).find('.snf-checkbox-unchecked.prechecked').toggleClass('snf-checkbox-checked snf-checkbox-unchecked');
40
    }
41

  
42
}
43

  
44
    $(document).ready(function(){
45

  
46
        // checkboxes binds
47

  
48
        $('.check').click(function(e) {
49
            e.preventDefault();
50
            e.stopPropagation();
51
            ui.checkbox.changeState(this);
52
            ui.entitiesActionsEnabled(); // ?
53
        });
54

  
55
        $('.lt-bar .select .check').click(function(e) {
56
            $(this).siblings('em').toggle();
57
            if ( $(this).find('span').hasClass('snf-checkbox-unchecked')){
58
                ui.checkbox.uncheck($('.list-view  li:not(".not-selectable") .check'));
59
            } else {
60
                ui.checkbox.check($('.list-view  li:not(".not-selectable") .check'));
61
            }
62
        });
63

  
64
        $('.trigger-checkbox.has-more .check').click(function(e) {
65
            ui.slideHiddenArea(this, $(this).parent().next('.more'));
66
        });
67

  
68
        $('.dhcp-option .check').click(function(e) {
69
            $(this).parents('li').siblings().find('ul.subnet-options').parent('li').toggle();
70
        })
71

  
72
        // for lis that we want to change the checkbox state
73
        $('.trigger-checkbox').click(function(e){
74
            $(this).find('.check').trigger('click');
75
        });
76

  
77
        $('.trigger-checkbox').find('a').click(function(e){
78
            e.stopPropagation();
79
        });
80

  
81

  
82
        // ???
83
         // for checkboxes created after document.ready
84
        $('.items-list').on('click','.check', function(e){
85
            e.preventDefault();
86
            e.stopPropagation();
87
            ui.changeCheckboxState(this);
88
        });
89

  
90
        // radiobuttons binds
91

  
92
        $('.radiobtn').click(function(e) {
93
            e.stopPropagation();
94
            e.preventDefault();
95
            if($(this).find('span').hasClass('snf-radio-unchecked')) {
96
                ui.radiobtn.obtainOneChecked(this);
97
                ui.radiobtn.changeState(this);
98
            }
99
        });
100

  
101
        $('.subnet-options .radiobtn').click(function(e) {
102
            if($(this).closest('li').hasClass('manual')) {
103
                $(this).siblings('.input').show();
104
            }
105
            else {
106
                $(this).closest('li').siblings('.manual').find('.input').hide();
107
            }
108
        });       
109

  
110
        $('.trigger-radiobtn').click(function(e) {
111
            $(this).find('.radiobtn').trigger('click');
112
        });
113

  
114
        $('.firewall .more  .radiobtn').click(function(e){
115
            $(this).parents('.firewall').removeAttr('data-firewall');
116
            $(this).parents('.firewall').data('firewall', $(this).parent().attr('class'));
117
            ui.firewallSetup();
118
        });
119

  
120
    })
b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/common.js
9 9
* here is the declaration only
10 10
*/
11 11
ui.wizard = {};
12
ui.checkbox = {};
13
ui.radiobtn = {};
12 14

  
13 15
/* when closeEl el is clicked, its parent with class divToCloseClass slidesUp */
14 16
ui.closeDiv = function(closeEl, divToCloseClass) {
......
156 158
    });
157 159
}
158 160

  
159
ui.checkedListItems = function (){
160
    $('.list-view .items-list').find('.snf-checkbox-checked').each(function(){
161
        $(this).parents('li').addClass('selected');
162
    });
163
    $('.list-view .items-list').find('.snf-checkbox-unchecked').each(function(){
164
        $(this).parents('li').removeClass('selected');
165
    });
166
};
161

  
167 162

  
168 163
/*
169 164
* In order for the editable value functionality to work, the html markup
......
287 282
}
288 283

  
289 284

  
290
/*
291
* functions concerning checkboxes and radiobuttons links
292
*/
293

  
294
ui.changeCheckboxState =function(checkbox_link) {
295
    console.log(checkbox_link);
296
    $(checkbox_link).find('.snf-checkbox-unchecked, .snf-checkbox-checked').toggleClass('snf-checkbox-unchecked snf-checkbox-checked');
297
    ui.entitiesActionsEnabled();
298
    ui.checkedListItems();
299
}
300

  
301
// to use the above functions use first the ui.checkOneRadioButton and then ui.changeRadiobuttonState
302
ui.checkOneRadioButton = function(radiobtn_link) {
303
    $(radiobtn_link).closest('ul').find('span.snf-radio-checked').toggleClass('snf-radio-unchecked snf-radio-checked');
304
}
305
ui.changeRadiobuttonState = function(radiobtn_link) {
306
    $(radiobtn_link).find('span.snf-radio-unchecked, span.snf-radio-checked').toggleClass('snf-radio-unchecked snf-radio-checked');
307
}
308

  
309

  
310

  
311
// toggle expand arrrow  and corresponding area
285
// toggle expand arrrow  and  area
312 286
// todo: one function for all the areas we reveal
313 287
ui.expandDownArea = function(arrow_link, area) {
314 288
    var arrow_link = $(arrow_link);
......
325 299
            });
326 300
}
327 301

  
328

  
302
// toggle checkbox and area
303
ui.slideHiddenArea = function(checkbox_link, area) {
304
    area.stop().slideToggle(400, function() {
305
        if (area.is(':visible')) {
306
            ui.checkbox.check(checkbox_link);
307
        } else {
308
           ui.checkbox.uncheck(checkbox_link);
309
        }
310
    });
311
};
329 312
/* Tabs functionality
330 313
* tabsEl is the div/ul with the links to the sections and the sections that
331 314
* with toggle have class sectionEl.
......
468 451
            $(this).addClass('fix-position');
469 452
           var scrollBarWidth = 14;
470 453
            var marg = parseInt($(self).css('marginLeft')) + cmarg - scrollBarWidth;
471
            tt = marg;
472 454
            setTimeout(function(){
473 455
                $(self).animate({
474 456
                    'margin-left': marg,
......
634 616
        e.preventDefault();
635 617
    });
636 618

  
637
    // checkbox: basic reaction on click (checked, unchecked)
638
    // see wizard
639
    $('.check').on('click', function(e){
640
        e.preventDefault();
641
        e.stopPropagation();
642
        ui.changeCheckboxState(this);
643
        console.log('check clicked');
644
        var parentLi = $(this).closest('li');
645
        if (parentLi.hasClass('with-checkbox') && parentLi.hasClass('has-more')) {
646
            $(this).parent().next('.more').stop().slideToggle(400, function() {
647
                if ($(this).parent().next('.more:visible').length != 0) {
648
                    $(this).find('span').removeClass('snf-checkbox-unchecked').addClass('snf-checkbox-checked');
649
                } else {
650
                    $(this).find('span').removeClass('snf-checkbox-checked').addClass('snf-checkbox-unchecked');
651
                }
652
            });
653
        }
654
    });
655

  
656
    // for checkboxes created after document.ready
657
    $('.items-list').on('click','.check', function(e){
658
        e.preventDefault();
659
        e.stopPropagation();
660
        ui.changeCheckboxState(this);
661
    })
662

  
663

  
664
    $('.with-checkbox').click(function(e){
665
        console.log('with-checkbox');
666
        $(this).find('.check').trigger('click');
667
    });
668

  
669
    $('.with-checkbox').find('a').click(function(e){
670
        e.stopPropagation();
671
    })
672
    $('.radio_btn').click(function(e) {
673
        e.preventDefault();
674
         var state = $(this).find('span');
675
         if(state.hasClass('snf-radio-unchecked')) {
676
            ui.checkOneRadioButton(this);
677
            ui.changeRadiobuttonState(this);
678
        }
679
    });
680

  
681 619
    $('.main-actions li a').click(function(e){
682 620
        if (!($(this).hasClass('active'))) {
683 621
            e.preventDefault();
......
699 637

  
700 638
    $('.browse-files').click(function(e){
701 639
        e.preventDefault();
702
    })
703

  
704
    Dropzone.options.filesDropzone = {
705
        dictDefaultMessage:'',
706
        clickable: '.browse-files',
707
        previewsContainer: '.dropzone-files',
708
        createImageThumbnails: false,
709
        dictRemoveFile: "snf-Remove file",
710
    };
711

  
640
    });
712 641

  
713 642
    $('.main .files').magnificPopup({
714 643
        delegate: 'a.show.image',
......
753 682
        }
754 683
    });
755 684

  
756
     $('.lt-bar .select').click(function(e){
757
        $(this).find('span').toggleClass('snf-checkbox-checked snf-checkbox-unchecked');
758
        $(this).find('em').toggle();
759
        $(this).toggleClass('selected');
760
        if ( $(this).find('span').hasClass('snf-checkbox-unchecked')){
761
            $('.list-view  li .check span').removeClass('snf-checkbox-checked');
762
            $('.list-view  li .check span').addClass('snf-checkbox-unchecked');
763
        } else {
764
            $('.list-view  li .check span').addClass('snf-checkbox-checked');
765
            $('.list-view  li .check span').removeClass('snf-checkbox-unchecked');
766
        }
767
        ui.entitiesActionsEnabled();
768
        ui.checkedListItems();
769
     });
685

  
770 686

  
771 687
    // set filter visible
772 688
    $('.filter-menu .filter').click(function(e) {
......
833 749
    ui.detailsCustom($('#network-connected'));
834 750
    ui.detailsCustom($('#vm-connected'));
835 751
    ui.firewallSetup();
836
    $('.firewall .more  a').click(function(e){
837
        e.preventDefault();
838
        if ($(this).find('span').hasClass('snf-radio-checked')) {
839
            return false;
840
        }
841
        $(this).parents('.firewall').removeAttr('data-firewall');
842
        $(this).parents('.firewall').data('firewall', $(this).parent().attr('class'));
843
        $(this).find('span').toggleClass('snf-radio-unchecked snf-radio-checked');
844
        $(this).parent('p').siblings('p').find('span').removeClass('snf-radio-checked');
845
        $(this).parent('p').siblings('p').find('span').addClass('snf-radio-unchecked');
846
         ui.firewallSetup();
847
    });
752

  
848 753
    $('.firewall').mouseenter(function(e){
849 754
        $(this).css('z-index',2);
850 755
        $(this).find('.more').stop(true, true).slideDown(200);
b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/dragfiles.js
234 234

  
235 235
    fileUploaded: function(file) {
236 236
      var txt = '';
237
      txt += '<li class="with-checkbox">';
237
      txt += '<li class="trigger-checkbox">';
238 238
      txt += '<div class="check"><span class="snf-checkbox-unchecked"></span></div>';
239 239
      txt += '<div class="img-wrap">';
240 240
      txt += '<span class='+ ui.mimeToExt(file.type) +'></span>';
b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/network-wizard.js
21 21
        $(area).find('.snf-checkbox-checked').not('.prechecked').toggleClass('snf-checkbox-checked snf-checkbox-unchecked');
22 22
        $(area).find('.snf-checkbox-unchecked.prechecked').toggleClass('snf-checkbox-checked snf-checkbox-unchecked');
23 23
        $(area).find('li .manual .input').hide();
24
        $(area).find('ul.subnet_options').parent('li').show();
24
        $(area).find('ul.subnet-options').parent('li').show();
25 25
    }
26 26
}
27 27

  
......
38 38

  
39 39
    $('.network_options .check').click(function(e){
40 40
        e.preventDefault();
41
        $(this).parents('li').siblings().find('ul.subnet_options').parent('li').toggle();
41
        $(this).parents('li').siblings().find('ul.subnet-options').parent('li').toggle();
42 42
    });
43 43

  
44 44
    $('.network_options .radio_btn').click(function(e){
b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/wizard.js
180 180
		}
181 181
		else if(wizardType == 'network-wizard') {
182 182
			wizard.find('li .manual .input').hide();
183
	        wizard.find('ul.subnet_options').parent('li').show();
183
	        wizard.find('ul.subnet-options').parent('li').show();
184 184
		}
185 185

  
186 186
		ui.wizard.currentStep = 1;
......
198 198
		wizard.find('.current').not('.preselected').removeClass('current');
199 199
		wizard.find('.preselected').not('.current').addClass('current');
200 200
		wizard.find('.custom.dropdown.medium a:first').addClass('current'); // to fix
201
		wizard.find('.snf-radio-checked').not('.prechecked').toggleClass('snf-radio-checked snf-radio-unchecked');
202
		wizard.find('.snf-radio-unchecked.prechecked').toggleClass('snf-radio-checked snf-radio-unchecked');
203
		wizard.find('.snf-checkbox-checked').not('.prechecked').toggleClass('snf-checkbox-checked snf-checkbox-unchecked');
204
		wizard.find('.snf-checkbox-unchecked.prechecked').toggleClass('snf-checkbox-checked snf-checkbox-unchecked');
201
		ui.radiobtn.reset(wizard);
202
		ui.checkbox.reset(wizard);
205 203
		wizard.find('.snf-arrow-up.preselected').toggleClass('snf-arrow-up snf-arrow-down');
206 204
		if(wizardType == 'vm-wizard') {
207 205
			var preselectedImgCategory = wizard.find('.top .sub-menu[data-step=1] .preselected').data('img-type');
......
465 463
				ui.expandDownArea(this, wizard.find('.advanced-conf-options'));
466 464
			});
467 465
		}
468
		else if (wizardType == 'network-wizard') {
469 466

  
470
			wizard.find('.network_options .check').click(function(e){
471
				e.preventDefault();
472
				e.stopPropagation();
473
				this.blur();
474
				$(this).parents('li').siblings().find('ul.subnet_options').parent('li').toggle();
475
			});
476

  
477
			wizard.find('.network_options .dhcp_option').click(function(e){
478
				e.preventDefault();
479
				$(this).find('.check').trigger('click');
480
			});
481

  
482
			wizard.find('.network_options .radio_btn').click(function(e){
483
		        e.preventDefault();
484
		        e.stopPropagation();
485
		        this.blur();
486
		        var state = $(this).find('span');
487
		        if(state.hasClass('snf-radio-checked')) {
488
		            if($(this).hasClass('manual')) {
489
		                $(this).siblings('.input').show();
490
		            }
491
		            else {
492
		                $(this).closest('li').siblings('.manual').find('.input').hide();
493
		            }
494
		        }
495
		    });
496

  
497
			wizard.find('.subnet_options>li').click(function(e) {
498
				$(this).find('.radio_btn').trigger('click');
499
			})
500
		}
501 467
		else if (wizardType == 'volume-wizard') {
502 468
			// step-1
503 469
			wizard.find('.volume_options .options a').hover(
......
513 479
					$(this).addClass('current');
514 480
				}
515 481
			});
516

  
517
			//step-2
518
			wizard.find('.vms-list a').click(function(e) {
519
				e.preventDefault();
520
				e.stopPropagation();
521
				ui.checkOneRadioButton(this);
522
				ui.changeRadiobuttonState(this);
523
			});
524

  
525
			wizard.find('.vms-list li').click(function(e) {
526
				e.preventDefault();
527
				$(this).find('a').trigger('click');
528
			});
529

  
530 482
		}
531 483

  
532
		else if(wizardType == 'snapshot-wizard') {
533
			wizard.find('.vms-list a').click(function(e) {
534
				e.preventDefault();
535
				e.stopPropagation();
536
				ui.checkOneRadioButton(this);
537
				ui.changeRadiobuttonState(this);
538
			});
539

  
540
			wizard.find('.vms-list li').click(function(e) {
541
				e.preventDefault();
542
				$(this).find('a').trigger('click');
543
			});
544
		}
545 484
	}
546 485

  
547 486
})
b/snf-cyclades-app/synnefo/ui/new_ui/ui/network_details.html
63 63
					</div>
64 64
				</div>
65 65
				<div class="middle">
66
					<div class="steps">
67
						<div class="step step-1 preselected current">
68
							<ul class="row network_options">
66
				<div class="steps">
67
					<div class="step step-1 preselected current">
68
						<ul class="row network-options">
69 69
								<li class="project-selection">
70 70
									<form class="custom">
71 71
									  <select class="medium">
......
81 81
										<span class="input"><input class="el1" type="text" placeholder="My Network"></span>
82 82
									</div>
83 83
								</li>
84
								<li class="dhcp_option"><span>Assign IP addresses automatically:</span>
84
								<li class="dhcp-option trigger-checkbox selected"><span>Assign IP addresses automatically:</span>
85 85
									<a href="" class="check">
86 86
										<span class="snf-checkbox-checked prechecked"></span>
87 87
									</a>
......
91 91
								</li>
92 92
								<li>
93 93
									<span class="sub_title">Network subnet:</span>
94
									<ul class="subnet_options">
95
										<li>
94
									<ul class="subnet-options">
95
										<li class="trigger-radiobtn selected">
96 96
											<span>Auto
97
												<a href="" class="radio_btn">
97
												<a href="" class="radiobtn">
98 98
													<span class="snf-radio-checked prechecked"></span>
99 99
												</a>
100 100
											</span>
101 101
										</li>
102
										<li class="manual">
102
										<li class="manual trigger-radiobtn">
103 103
											<form>
104 104
												<span>Manual
105
													<a href="" class="radio_btn manual">
105
													<a href="" class="radiobtn">
106 106
														<span class="snf-radio-unchecked"></span>
107 107
													</a>
108 108
													<span class="input"><input type="text" placeholder="192.168.32.0/24"></span>
109 109
												</span>
110 110
											</form>
111 111
										</li>
112
										<li>
112
										<li class="trigger-radiobtn">
113 113
											<span>10.0.0.0/24
114
												<a href="" class="radio_btn">
114
												<a href="" class="radiobtn">
115 115
													<span class="snf-radio-unchecked"></span>
116 116
												</a>
117 117
											</span>
118 118
										</li>
119
										<li>
119
										<li class="trigger-radiobtn">
120 120
											<span>192.168.0.0/24
121
												<a href="" class="radio_btn">
121
												<a href="" class="radiobtn">
122 122
													<span class="snf-radio-unchecked"></span>
123 123
												</a>
124 124
											</span>
......
176 176
				<div class="lt-bar">
177 177
					<div class="scroll-wrap">
178 178
						<ul class="items-list">
179
							<li data-status="add-new" class="add-new" data-overlay-id="network-wizard">
179
							<li data-status="add-new" class="add-new not-selectable" data-overlay-id="network-wizard">
180 180
								<div class="container">
181 181
									<div class="check"></div>
182 182
									<div class="img-wrap">
......
189 189
								<div class="more">
190 190
								</div>
191 191
								<div class="container">
192
									<div class="check">
192
									<a href="" class="check">
193 193
										<span class="snf-checkbox-unchecked"></span>
194
									</div>
194
									</a>
195 195
									<div class="img-wrap">
196 196
										<span class="snf-network-full snf-font"></span>
197 197
									</div>
......
214 214
								<div class="more">
215 215
								</div>
216 216
								<div class="container">
217
									<div class="check">
217
									<a href="" class="check">
218 218
										<span class="snf-checkbox-unchecked"></span>
219
									</div>
219
									</a>
220 220
									<div class="img-wrap">
221 221
										<span class="snf-network-full snf-font"></span>
222 222
									</div>
......
307 307
									</div>
308 308
									<div class="firewall" data-firewall="fully">
309 309
										<p>Firewall <em>on</em></p>
310
										<div class="more">
311
											<p class="fully">
312
												<a href="">Fully protected mode<span class="snf-radio-checked"></span></a>
313
											</p>
314
											<p class="basic">
315
												<a href="">Basically protected mode<span class="snf-radio-unchecked"></span></a>
316
											</p>
317
											<p class="unprotected">
318
												<a href="">Unprotected mode<span class="snf-radio-unchecked"></span></a>
319
											</p>
320
										</div>
310
										<ul class="more">
311
											<li class="fully selected trigger-radiobtn">
312
												<a href="" class="radiobtn">Fully protected mode<span class="snf-radio-checked"></span></a>
313
											</li>
314
											<li class="basic trigger-radiobtn">
315
												<a href="" class="radiobtn">Basically protected mode<span class="snf-radio-unchecked"></span></a>
316
											</li>
317
											<li class="unprotected trigger-radiobtn">
318
												<a href="" class="radiobtn">Unprotected mode<span class="snf-radio-unchecked"></span></a>
319
											</li>
320
										</ul>
321 321
									</div>
322 322
								</li>
323 323
							</ul>
......
346 346
									</div>
347 347
									<div class="firewall" data-firewall="unprotected">
348 348
										<p>Firewall <em>on</em></p>
349
										<div class="more">
350
											<p class="fully">
351
												<a href="">Fully protected mode<span class="snf-radio-unchecked"></span></a>
352
											</p>
353
											<p class="basic">
354
												<a href="">Basically protected mode<span class="snf-radio-unchecked"></span></a>
355
											</p>
356
											<p class="unprotected">
357
												<a href="">Unprotected mode<span class="snf-radio-checked"></span></a>
358
											</p>
359
										</div>
349
										<ul class="more">
350
											<li class="fully trigger-radiobtn">
351
												<a href="" class="radiobtn">Fully protected mode<span class="snf-radio-unchecked"></span></a>
352
											</li>
353
											<li class="basic trigger-radiobtn">
354
												<a href="" class="radiobtn">Basically protected mode<span class="snf-radio-unchecked"></span></a>
355
											</li>
356
											<li class="unprotected selected trigger-radiobtn">
357
												<a href="" class="radiobtn">Unprotected mode<span class="snf-radio-checked"></span></a>
358
											</li>
359
										</ul>
360 360
									</div>
361 361
								</li>
362 362
								<li>
......
370 370
											</li>
371 371
										</ul>
372 372
									</div>
373
									<div class="firewall" data-firewall="unprotected">
373
									<div class="firewall" data-firewall="basic">
374 374
										<p>Firewall <em>on</em></p>
375
										<div class="more">
376
											<p class="fully">
377
												<a href="">Fully protected mode<span class="snf-radio-unchecked"></span></a>
378
											</p>
379
											<p class="basic">
380
												<a href="">Basically protected mode<span class="snf-radio-unchecked"></span></a>
381
											</p>
382
											<p class="unprotected">
383
												<a href="">Unprotected mode<span class="snf-radio-checked"></span></a>
384
											</p>
385
										</div>
375
										<ul class="more">
376
											<li class="fully trigger-radiobtn">
377
												<a href="" class="radiobtn">Fully protected mode<span class="snf-radio-unchecked"></span></a>
378
											</li>
379
											<li class="basic selected trigger-radiobtn">
380
												<a href="" class="radiobtn">Basically protected mode<span class="snf-radio-checked"></span></a>
381
											</li>
382
											<li class="unprotected trigger-radiobtn">
383
												<a href="" class="radiobtn">Unprotected mode<span class="snf-radio-unchecked"></span></a>
384
											</li>
385
										</ul>
386 386
									</div>
387 387
								</li>
388 388
								<li>
......
480 480
	
481 481
	<script type="text/javascript" src="javascripts/wizard.js"></script>
482 482
	<script type="text/javascript" src="javascripts/sshkeys-wizard.js"></script>
483
	<script type="text/javascript" src="javascripts/checkboxes-radiobuttons.js"></script>
483 484
  <script>
484 485
    $(document).foundation();
485 486
  </script>
b/snf-cyclades-app/synnefo/ui/new_ui/ui/network_list.html
78 78
				<div class="middle">
79 79
				<div class="steps">
80 80
					<div class="step step-1 preselected current">
81
						<ul class="row network_options">
81
						<ul class="row network-options">
82 82
								<li class="project-selection">
83 83
									<form class="custom">
84 84
									  <select class="medium">
......
94 94
										<span class="input"><input class="el1" type="text" placeholder="My Network"></span>
95 95
									</div>
96 96
								</li>
97
								<li class="dhcp_option"><span>Assign IP addresses automatically:</span>
97
								<li class="dhcp-option trigger-checkbox selected"><span>Assign IP addresses automatically:</span>
98 98
									<a href="" class="check">
99 99
										<span class="snf-checkbox-checked prechecked"></span>
100 100
									</a>
......
104 104
								</li>
105 105
								<li>
106 106
									<span class="sub_title">Network subnet:</span>
107
									<ul class="subnet_options">
108
										<li>
107
									<ul class="subnet-options">
108
										<li class="trigger-radiobtn selected">
109 109
											<span>Auto 
110
												<a href="" class="radio_btn">
110
												<a href="" class="radiobtn">
111 111
													<span class="snf-radio-checked prechecked"></span>
112 112
												</a>
113 113
											</span>
114 114
										</li>
115
										<li class="manual">
115
										<li class="manual trigger-radiobtn">
116 116
											<form>
117 117
												<span>Manual
118
													<a href="" class="radio_btn manual">
118
													<a href="" class="radiobtn">
119 119
														<span class="snf-radio-unchecked"></span>
120 120
													</a>
121 121
													<span class="input"><input type="text" placeholder="192.168.32.0/24"></span>
122 122
												</span>
123 123
											</form>
124 124
										</li>
125
										<li>
125
										<li class="trigger-radiobtn">
126 126
											<span>10.0.0.0/24 
127
												<a href="" class="radio_btn">
127
												<a href="" class="radiobtn">
128 128
													<span class="snf-radio-unchecked"></span>
129 129
												</a>
130 130
											</span>
131 131
										</li>
132
										<li>
132
										<li class="trigger-radiobtn">
133 133
											<span>192.168.0.0/24 
134
												<a href="" class="radio_btn">
134
												<a href="" class="radiobtn">
135 135
													<span class="snf-radio-unchecked"></span>
136 136
												</a>
137 137
											</span>
......
183 183
		<section class="main row">
184 184
			<div class="networks entities grid-view">
185 185
				<ul class="items-list">
186
					<li data-status="add-new" class="add-new" data-overlay-id="network-wizard">
186
					<li data-status="add-new" class="add-new not-selectable" data-overlay-id="network-wizard">
187 187
						<div class="container">
188 188
							<div class="check"></div>
189 189
							<div class="img-wrap">
......
211 211
							<div class="name">Network Name</div>
212 212
						</div>
213 213
						<div class="container">
214
							<div class="check">
214
							<a href="" class="check">
215 215
								<span class="snf-checkbox-unchecked"></span>
216
							</div>
216
							</a>
217 217
							<div class="img-wrap">
218 218
								<span class="snf-network-full snf-font"></span>
219 219
							</div>
......
245 245
							<div class="name">Network Name</div>
246 246
						</div>
247 247
						<div class="container">
248
							<div class="check">
248
							<a href="" class="check">
249 249
								<span class="snf-checkbox-unchecked"></span>
250
							</div>
250
							</a>
251 251
							<div class="img-wrap">
252 252
								<span class="snf-network-full snf-font"></span>
253 253
							</div>
......
279 279
							<div class="name">Network Name</div>
280 280
						</div>
281 281
						<div class="container">
282
							<div class="check">
282
							<a href="" class="check">
283 283
								<span class="snf-checkbox-unchecked"></span>
284
							</div>
284
							</a>
285 285
							<div class="img-wrap">
286 286
								<span class="snf-network-full snf-font"></span>
287 287
							</div>
......
297 297
				</ul>
298 298
				<div class="lt-bar">
299 299
					<ul>
300
						<li class="select"><span class="snf-checkbox-unchecked checkbox"></span><em>Un</em>Select all</li>
300
						<li class="select trigger-checkbox">
301
							<a href="" class="check">
302
								<span class="snf-checkbox-unchecked checkbox"></span>
303
							</a>
304
							<em>Un</em>Select all
305
						</li>
301 306
						<li class="running"><a href="#" title="">Connect VM</a></li>
302 307
						<li class="permanent"><a href="#" class="active">Destroy</a></li>
303 308
						<li class="both"><a href="#" >Option i</a></li>
......
341 346
	<script src="javascripts/common.js"></script>
342 347
	<script type="text/javascript" src="javascripts/wizard.js"></script>
343 348
	<script type="text/javascript" src="javascripts/sshkeys-wizard.js"></script>
349
	<script type="text/javascript" src="javascripts/checkboxes-radiobuttons.js"></script>
344 350
	<script>
345 351
	    $(document).foundation();
346 352
    </script>
b/snf-cyclades-app/synnefo/ui/new_ui/ui/pithos_list.html
70 70
        <section class="main row all-height">
71 71
            <div class="storage entities list-view">
72 72
                <ul class="items-list" id="drop">
73
                    <li class="add-new">
74
                        <a class="check">
73
                    <li class="add-new not-selectable">
74
                        <a href="" class="check">
75 75
                        </a>
76 76
                        <div class="img-wrap">
77 77
                            <span class="rect-plus">+</span>
......
83 83
                        </form>
84 84
                    </li>
85 85
                    <li data-status="folder" class="folder" data-path="/folder1/temp/"  draggable="true">
86
                        <a class="check">
86
                        <a href="" class="check">
87 87
                            <span class="snf-checkbox-unchecked"></span>
88 88
                        </a>
89 89
                        <div class="img-wrap"></div>
......
100 100
                        </div>
101 101
                    </li>
102 102
                    <li data-status="file" class="file"  draggable="true">
103
                        <a class="check">
103
                        <a href="" class="check">
104 104
                            <span class="snf-checkbox-unchecked"></span>
105 105
                        </a>
106 106
                        <div class="img-wrap">
......
119 119
                        </div>
120 120
                    </li>
121 121
                    <li data-status="file" class="file"  draggable="true">
122
                        <a class="check">
122
                        <a href="" class="check">
123 123
                            <span class="snf-checkbox-unchecked"></span>
124 124
                        </a>
125 125
                        <div class="img-wrap">
......
138 138
                        </div>
139 139
                    </li>
140 140
                    <li data-status="file" class="file"  draggable="true">
141
                        <a class="check">
141
                        <a href="" class="check">
142 142
                            <span class="snf-checkbox-unchecked"></span>
143 143
                        </a>
144 144
                        <div class="img-wrap">
......
166 166
                </div>
167 167
                <div class="lt-bar">
168 168
                    <ul class="lt-actions">
169
                        <li class="select"><a><span class="snf-checkbox-unchecked checkbox"></span></a><em>Un</em>Select all</li>
169
                        <li class="select trigger-checkbox">
170
                            <a href="" class="check">
171
                                <span class="snf-checkbox-unchecked checkbox"></span>
172
                            </a>
173
                            <em>Un</em>Select all
174
                        </li>
170 175
                        <li class="files"><a href="#" title=""><span class="snf-link-outline"></span> Share</a></li>
171 176
                        <li class="files"><a href="#" title=""><span class="snf-download-full"></span> Download</a></li>
172 177
                        <li class="files"><a href="#"><span>x</span> Delete</a></li>
......
261 266
    <script type="text/javascript" src="javascripts/wizard.js"></script>
262 267
    <script type="text/javascript" src="javascripts/dragfiles.js"></script>
263 268
    <script type="text/javascript" src="javascripts/sshkeys-wizard.js"></script>
269
    <script type="text/javascript" src="javascripts/checkboxes-radiobuttons.js"></script>
264 270
  <script>
265 271
    $(document).foundation();
266 272
  </script>
b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_connected.scss
210 210
	}
211 211
	.more {
212 212
		margin-top: 10px;
213
		margin-left: 0;
214
		list-style: none;
213 215
		display: none;
214
		p {
216

  
217

  
218
		li {
215 219
			min-width: 200px;
216 220
			span {
217 221
				float: right;
b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_wizards.scss
611 611
			                                    color:#fff;
612 612
			                                    margin-left:145px;
613 613
			                                }
614
			                                .with-checkbox {
614
			                                .trigger-checkbox {
615 615
			                                    a {
616 616
			                                        span {
617 617
			                                            color: #fff;
......
755 755
		} // end of .wizard
756 756

  
757 757

  
758

  
759

  
760

  
761

  
762 758
// for network creation wizard
763 759
#network-wizard {
764 760

  
......
766 762
		&.nav:focus {
767 763
			border: none;
768 764
		}
769
		&.radio_btn:focus, &.check:focus{
765
		&.radiobtn:focus, &.check:focus{
770 766
				border: 1px solid #aee7cc;
771 767
				padding: 2px;
772 768
			}
......
774 770
	.snf-checkbox-checked, .snf-checkbox-unchecked {
775 771
		font-size: 1.3em;
776 772
	}
777
	.subnet_options {
773
	.subnet-options {
778 774
		margin: 0;
779 775
		li {
780 776
			margin-top: 20px;
......
782 778
	}
783 779
	.step {
784 780
		a {	color: $wizard-base-font-color;}
785
		.network_options {
781
		.network-options {
786 782
			position: relative;
787 783
			padding-bottom: 20px;
788 784
			.explanatory {
......
790 786
					margin-top:20px;
791 787
					margin-bottom:60px;
792 788
			}
793
			.check, .radio_btn {
789
			.check, .radiobtn {
794 790
				position: absolute;
795 791
				right: 0;
796 792
				&:focus {
......
834 830
		&.nav:focus {
835 831
			border: none;
836 832
		}
837
		&.radio_btn:focus, &.check:focus{
833
		&.radiobtn:focus, &.check:focus{
838 834
				border: 1px solid #aee7cc;
839 835
				padding: 2px;
840 836
			}
b/snf-cyclades-app/synnefo/ui/new_ui/ui/snapshots_list.html
82 82
						<div class="step step-1 preselected current">
83 83
							<h2 class="row">Your Archipelago Machines:</h2>
84 84
								<ul class="row vms-list">
85
									<li>
86
										<div class="img-wrap">
87
											<span class="snf-pc-outline snf-font"></span>
88
										</div>
89
										<div class="name">no machine</div>
90
										<a href=""><span class="snf-radio-checked prechecked"></span></a>
91
									</li>
92
									<li>
93
										<div class="img-wrap">
94
											<span class="snf-pc-full snf-font"></span>
95
											<span class="os">unknown</span>
96
										</div>
97
										<div class="name">Machine Name</div>
98
										<a href=""><span class="snf-radio-unchecked"></span></a>
99
									</li>
100
									<li>
101
										<div class="img-wrap">
102
											<span class="snf-pc-full snf-font"></span>
103
											<span class="os">unknown</span>
104
										</div>
105
										<div class="name">A Longer Machine Name</div>
106
										<a href=""><span class="snf-radio-unchecked"></span></a>
107
									</li>
108
									<li>
109
										<div class="img-wrap">
110
											<span class="snf-pc-full snf-font"></span>
111
											<span class="os">unknown</span>
112
										</div>
113
										<div class="name">Shorty</div>
114
										<a href=""><span class="snf-radio-unchecked"></span></a>
115
									</li>
116
								</ul>
85
								<li class="trigger-radiobtn selected">
86
									<div class="img-wrap">
87
										<span class="snf-pc-outline snf-font"></span>
88
									</div>
89
									<div class="name">no machine</div>
90
									<a href="" class="radiobtn"><span class="snf-radio-checked prechecked"></span></a>
91
								</li>
92
								<li class="trigger-radiobtn">
93
									<div class="img-wrap">
94
										<span class="snf-pc-full snf-font"></span>
95
										<span class="os">unknown</span>
96
									</div>
97
									<div class="name">Machine Name</div>
98
									<a href="" class="radiobtn"><span class="snf-radio-unchecked"></span></a>
99
								</li>
100
								<li class="trigger-radiobtn">
101
									<div class="img-wrap">
102
										<span class="snf-pc-full snf-font"></span>
103
										<span class="os">unknown</span>
104
									</div>
105
									<div class="name">A Longer Machine Name</div>
106
									<a href="" class="radiobtn"><span class="snf-radio-unchecked"></span></a>
107
								</li>
108
								<li class="trigger-radiobtn">
109
									<div class="img-wrap">
110
										<span class="snf-pc-full snf-font"></span>
111
										<span class="os">unknown</span>
112
									</div>
113
									<div class="name">Shorty</div>
114
									<a href="" class="radiobtn"><span class="snf-radio-unchecked"></span></a>
115
								</li>
116
							</ul>
117 117
						</div>
118 118
					</div>
119 119
				</div>
......
158 158
		<section class="main row">
159 159
			<div class="snapshots entities grid-view">
160 160
				<ul class="items-list">
161
					<li data-status="add-new" class="add-new" data-overlay-id="snapshot-wizard">
161
					<li data-status="add-new" class="add-new not-selectable" data-overlay-id="snapshot-wizard">
162 162
						<div class="container">
163 163
							<div class="check"></div>
164 164
							<div class="img-wrap">
......
189 189
							<div class="name">Snapshot Name</div>
190 190
						</div>
191 191
						<div class="container">
192
							<div class="check">
192
							<a href="" class="check">
193 193
								<span class="snf-checkbox-unchecked"></span>
194
							</div>
194
							</a>
195 195
							<div class="img-wrap">
196 196
								<span class="snf-font snf-snapshot-full"></span>
197 197
							</div>
......
226 226
							<div class="name">Snapshot Name</div>
227 227
						</div>
228 228
						<div class="container">
229
							<div class="check">
229
							<a href="" class="check">
230 230
								<span class="snf-checkbox-unchecked"></span>
231
							</div>
231
							</a>
232 232
							<div class="img-wrap">
233 233
								<span class="snf-font snf-snapshot-full"></span>
234 234
							</div>
......
244 244
				</ul>
245 245
				<div class="lt-bar">
246 246
					<ul>
247
						<li class="select"><span class="snf-checkbox-unchecked checkbox"></span><em>Un</em>select all</li>
247
						<li class="select trigger-checkbox">
248
							<a href="" class="check">
249
								<span class="snf-checkbox-unchecked checkbox"></span>
250
							</a>
251
							<em>Un</em>select all
252
						</li>
248 253
						<li class="running"><a href="#" title="">Destroy</a></li>
249 254
						<!-- in case we want an action always activated
250 255
						<li class="pernament"><a href="" class="active">Action</a></li> -->
......
286 291
	<script src="javascripts/common.js"></script>
287 292
	<script type="text/javascript" src="javascripts/wizard.js"></script>
288 293
	<script type="text/javascript" src="javascripts/sshkeys-wizard.js"></script>
294
	<script type="text/javascript" src="javascripts/checkboxes-radiobuttons.js"></script>
289 295
  <script>
290 296
    $(document).foundation();
291 297
  </script>
b/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/app.css
9939 9939
  margin-left: 145px;
9940 9940
}
9941 9941
/* line 616, ../sass/_wizards.scss */
9942
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .advanced-conf-options .networks-area li.more .with-checkbox a span {
9942
.body-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .advanced-conf-options .networks-area li.more .trigger-checkbox a span {
9943 9943
  color: #fff;
9944 9944
}
9945 9945
/* line 625, ../sass/_wizards.scss */
......
10102 10102
  float: right;
10103 10103
}
10104 10104

  
10105
/* line 766, ../sass/_wizards.scss */
10105
/* line 762, ../sass/_wizards.scss */
10106 10106
#network-wizard a.nav:focus {
10107 10107
  border: none;
10108 10108
}
10109
/* line 769, ../sass/_wizards.scss */
10110
#network-wizard a.radio_btn:focus, #network-wizard a.check:focus {
10109
/* line 765, ../sass/_wizards.scss */
10110
#network-wizard a.radiobtn:focus, #network-wizard a.check:focus {
10111 10111
  border: 1px solid #aee7cc;
10112 10112
  padding: 2px;
10113 10113
}
10114
/* line 774, ../sass/_wizards.scss */
10114
/* line 770, ../sass/_wizards.scss */
10115 10115
#network-wizard .snf-checkbox-checked, #network-wizard .snf-checkbox-unchecked {
10116 10116
  font-size: 1.3em;
10117 10117
}
10118
/* line 777, ../sass/_wizards.scss */
10119
#network-wizard .subnet_options {
10118
/* line 773, ../sass/_wizards.scss */
10119
#network-wizard .subnet-options {
10120 10120
  margin: 0;
10121 10121
}
10122
/* line 779, ../sass/_wizards.scss */
10123
#network-wizard .subnet_options li {
10122
/* line 775, ../sass/_wizards.scss */
10123
#network-wizard .subnet-options li {
10124 10124
  margin-top: 20px;
10125 10125
}
10126
/* line 784, ../sass/_wizards.scss */
10126
/* line 780, ../sass/_wizards.scss */
10127 10127
#network-wizard .step a {
10128 10128
  color: white;
10129 10129
}
10130
/* line 785, ../sass/_wizards.scss */
10131
#network-wizard .step .network_options {
10130
/* line 781, ../sass/_wizards.scss */
10131
#network-wizard .step .network-options {
10132 10132
  position: relative;
10133 10133
  padding-bottom: 20px;
10134 10134
}
10135
/* line 788, ../sass/_wizards.scss */
10136
#network-wizard .step .network_options .explanatory {
10135
/* line 784, ../sass/_wizards.scss */
10136
#network-wizard .step .network-options .explanatory {
10137 10137
  font-size: 0.75em;
10138 10138
  margin-top: 20px;
10139 10139
  margin-bottom: 60px;
10140 10140
}
10141
/* line 793, ../sass/_wizards.scss */
10142
#network-wizard .step .network_options .check, #network-wizard .step .network_options .radio_btn {
10141
/* line 789, ../sass/_wizards.scss */
10142
#network-wizard .step .network-options .check, #network-wizard .step .network-options .radiobtn {
10143 10143
  position: absolute;
10144 10144
  right: 0;
10145 10145
}
10146
/* line 796, ../sass/_wizards.scss */
10147
#network-wizard .step .network_options .check:focus, #network-wizard .step .network_options .radio_btn:focus {
10146
/* line 792, ../sass/_wizards.scss */
10147
#network-wizard .step .network-options .check:focus, #network-wizard .step .network-options .radiobtn:focus {
10148 10148
  right: -3px;
10149 10149
  top: -3px;
10150 10150
}
10151
/* line 801, ../sass/_wizards.scss */
10152
#network-wizard .step .network_options .network-name {
10151
/* line 797, ../sass/_wizards.scss */
10152
#network-wizard .step .network-options .network-name {
10153 10153
  margin: 40px 0;
10154 10154
}
10155
/* line 803, ../sass/_wizards.scss */
10156
#network-wizard .step .network_options .network-name h2 {
10155
/* line 799, ../sass/_wizards.scss */
10156
#network-wizard .step .network-options .network-name h2 {
10157 10157
  color: white;
10158 10158
  font-size: 1em;
10159 10159
}
10160
/* line 810, ../sass/_wizards.scss */
10161
#network-wizard .step .network_options li {
10160
/* line 806, ../sass/_wizards.scss */
10161
#network-wizard .step .network-options li {
10162 10162
  display: block;
10163 10163
  width: 360px;
10164 10164
}
10165
/* line 813, ../sass/_wizards.scss */
10166
#network-wizard .step .network_options li.manual {
10165
/* line 809, ../sass/_wizards.scss */
10166
#network-wizard .step .network-options li.manual {
10167 10167
  position: relative;
10168 10168
}
10169
/* line 815, ../sass/_wizards.scss */
10170
#network-wizard .step .network_options li.manual .input {
10169
/* line 811, ../sass/_wizards.scss */
10170
#network-wizard .step .network-options li.manual .input {
10171 10171
  position: absolute;
10172 10172
  right: -170px;
10173 10173
  width: 150px;
10174 10174
  bottom: 5px;
10175 10175
  display: none;
10176 10176
}
10177
/* line 823, ../sass/_wizards.scss */
10178
#network-wizard .step .network_options li.project-selection li {
10177
/* line 819, ../sass/_wizards.scss */
10178
#network-wizard .step .network-options li.project-selection li {
10179 10179
  width: 100%;
10180 10180
}
10181 10181

  
10182
/* line 834, ../sass/_wizards.scss */
10182
/* line 830, ../sass/_wizards.scss */
10183 10183
#volume-wizard a.nav:focus {
10184 10184
  border: none;
10185 10185
}
10186
/* line 837, ../sass/_wizards.scss */
10187
#volume-wizard a.radio_btn:focus, #volume-wizard a.check:focus {
10186
/* line 833, ../sass/_wizards.scss */
10187
#volume-wizard a.radiobtn:focus, #volume-wizard a.check:focus {
10188 10188
  border: 1px solid #aee7cc;
10189 10189
  padding: 2px;
10190 10190
}
10191
/* line 842, ../sass/_wizards.scss */
10191
/* line 838, ../sass/_wizards.scss */
10192 10192
#volume-wizard .snf-checkbox-checked, #volume-wizard .snf-checkbox-unchecked {
10193 10193
  font-size: 1.3em;
10194 10194
}
10195
/* line 846, ../sass/_wizards.scss */
10195
/* line 842, ../sass/_wizards.scss */
10196 10196
#volume-wizard .step a {
10197 10197
  color: white;
10198 10198
}
10199
/* line 849, ../sass/_wizards.scss */
10199
/* line 845, ../sass/_wizards.scss */
10200 10200
#volume-wizard .step p {
10201 10201
  font-size: 14px;
10202 10202
  line-height: 1;
10203 10203
}
10204
/* line 853, ../sass/_wizards.scss */
10204
/* line 849, ../sass/_wizards.scss */
10205 10205
#volume-wizard .step h2 {
10206 10206
  color: white;
10207 10207
  font-size: 1em;
10208 10208
}
10209
/* line 858, ../sass/_wizards.scss */
10209
/* line 854, ../sass/_wizards.scss */
10210 10210
#volume-wizard .step .volume_options > li {
10211 10211
  display: block;
10212 10212
  list-style: none outside none;
10213 10213
  margin-bottom: 30px;
10214 10214
}
10215
/* line 860, ../sass/_wizards.scss */
10215
/* line 856, ../sass/_wizards.scss */
10216 10216
#volume-wizard .step .volume_options > li.volume-name {
10217 10217
  margin: 40px 0;
10218 10218
}
10219
/* line 865, ../sass/_wizards.scss */
10219
/* line 861, ../sass/_wizards.scss */
10220 10220
#volume-wizard .step .volume_options > li .title {
10221 10221
  height: 40px;
10222 10222
  overflow: hidden;
......
10224 10224
  color: white;
10225 10225
  vertical-align: top;
10226 10226
}
10227
/* line 872, ../sass/_wizards.scss */
10227
/* line 868, ../sass/_wizards.scss */
10228 10228
#volume-wizard .step .volume_options > li .title .snf-font {
10229 10229
  display: block;
10230 10230
  width: 60px;
......
10233 10233
  position: relative;
10234 10234
  bottom: -3px;
10235 10235
}
10236
/* line 880, ../sass/_wizards.scss */
10236
/* line 876, ../sass/_wizards.scss */
10237 10237
#volume-wizard .step .volume_options > li .title h2 {
10238 10238
  font-size: 0.875em;
10239 10239
  float: left;
......
10242 10242
  margin-right: 60px;
10243 10243
  padding-left: 0.625em;
10244 10244
}
10245
/* line 882, ../sass/_wizards.scss */
10245
/* line 878, ../sass/_wizards.scss */
10246 10246
#volume-wizard .step .volume_options > li .title h2 span {
10247 10247
  font-weight: normal;
10248 10248
}
10249
/* line 890, ../sass/_wizards.scss */
10249
/* line 886, ../sass/_wizards.scss */
10250 10250
#volume-wizard .step .volume_options > li .title h2 em {
10251 10251
  display: block;
10252 10252
  margin-top: 4px;
......
10256 10256
  white-space: nowrap;
10257 10257
  line-height: 13px;
10258 10258
}
10259
/* line 900, ../sass/_wizards.scss */
10259
/* line 896, ../sass/_wizards.scss */
10260 10260
#volume-wizard .step .volume_options > li .title p {
10261 10261
  visibility: hidden;
10262 10262
  overflow: hidden;
......
10264 10264
  font-size: 11px;
10265 10265
  line-height: 11px;
10266 10266
}
10267
/* line 910, ../sass/_wizards.scss */
10267
/* line 906, ../sass/_wizards.scss */
10268 10268
#volume-wizard .step .volume_options > li .options-bar .bar {
10269 10269
  width: 200px;
10270 10270
  float: left;
......
10273 10273
  position: relative;
10274 10274
  top: 10px;
10275 10275
}
10276
/* line 917, ../sass/_wizards.scss */
10276
/* line 913, ../sass/_wizards.scss */
10277 10277
#volume-wizard .step .volume_options > li .options-bar .bar .wrap {
10278 10278
  border: 1px solid white;
10279 10279
  padding: 1px;
10280 10280
  height: 100%;
10281 10281
}
10282
/* line 921, ../sass/_wizards.scss */
10282
/* line 917, ../sass/_wizards.scss */
10283 10283
#volume-wizard .step .volume_options > li .options-bar .bar .wrap.disabled-progress-bar {
10284 10284
  border-color: #bebebe;
10285 10285
}
10286
/* line 924, ../sass/_wizards.scss */
10286
/* line 920, ../sass/_wizards.scss */
10287 10287
#volume-wizard .step .volume_options > li .options-bar .bar .wrap.disabled-progress-bar .container .total {
10288 10288
  background-color: #bebebe;
10289 10289
}
10290
/* line 929, ../sass/_wizards.scss */
10290
/* line 925, ../sass/_wizards.scss */
10291 10291
#volume-wizard .step .volume_options > li .options-bar .bar .wrap .container {
10292 10292
  height: 100%;
10293 10293
}
10294
/* line 931, ../sass/_wizards.scss */
10294
/* line 927, ../sass/_wizards.scss */
10295 10295
#volume-wizard .step .volume_options > li .options-bar .bar .wrap .container .total {
10296 10296
  background: #bebebe;
10297 10297
  height: 100%;
10298 10298
  float: left;
10299 10299
  position: relative;
10300 10300
}
10301
/* line 936, ../sass/_wizards.scss */
10301
/* line 932, ../sass/_wizards.scss */
10302 10302
#volume-wizard .step .volume_options > li .options-bar .bar .wrap .container .total .current {
10303 10303
  background: white;
10304 10304
  height: 100%;
10305 10305
  float: left;
10306 10306
}
10307
/* line 941, ../sass/_wizards.scss */
10307
/* line 937, ../sass/_wizards.scss */
10308 10308
#volume-wizard .step .volume_options > li .options-bar .bar .wrap .container .total span {
10309 10309
  position: absolute;
10310 10310
  right: 10px;
10311 10311
  font-size: 0.5625em;
10312 10312
  top: 2px;
10313 10313
}
10314
/* line 948, ../sass/_wizards.scss */
10314
/* line 944, ../sass/_wizards.scss */
10315 10315
#volume-wizard .step .volume_options > li .options-bar .bar .wrap .container .total.low span {
10316 10316
  right: -30px;
10317 10317
  color: white;
10318 10318
}
10319
/* line 957, ../sass/_wizards.scss */
10319
/* line 953, ../sass/_wizards.scss */
10320 10320
#volume-wizard .step .volume_options > li .options-bar .options {
10321 10321
  overflow: hidden;
10322 10322
  list-style: none outside none;
10323 10323
}
10324
/* line 960, ../sass/_wizards.scss */
10324
/* line 956, ../sass/_wizards.scss */
10325 10325
#volume-wizard .step .volume_options > li .options-bar .options li {
10326 10326
  list-style: none outside none;
10327 10327
  display: inline-block;
10328 10328
  margin-right: 10px;
10329 10329
  margin-bottom: 0;
10330 10330
}
10331
/* line 965, ../sass/_wizards.scss */
10331
/* line 961, ../sass/_wizards.scss */
10332 10332
#volume-wizard .step .volume_options > li .options-bar .options li a {
10333 10333
  min-width: 60px;
10334 10334
}
10335
/* line 968, ../sass/_wizards.scss */
10335
/* line 964, ../sass/_wizards.scss */
10336 10336
#volume-wizard .step .volume_options > li .options-bar .options li a.current {
10337 10337
  color: #485057;
10338 10338
}
10339
/* line 971, ../sass/_wizards.scss */
10339
/* line 967, ../sass/_wizards.scss */
10340 10340
#volume-wizard .step .volume_options > li .options-bar .options li a.disabled {
10341 10341
  border-color: #bebebe;
10342 10342
  color: #bebebe;
10343 10343
}
10344
/* line 974, ../sass/_wizards.scss */
10344
/* line 970, ../sass/_wizards.scss */
10345 10345
#volume-wizard .step .volume_options > li .options-bar .options li a.disabled:hover, #volume-wizard .step .volume_options > li .options-bar .options li a.disabled:active {
10346 10346
  cursor: default;
10347 10347
  border-width: 1px;
10348 10348
  line-height: 28px;
10349 10349
}
10350
/* line 987, ../sass/_wizards.scss */
10350
/* line 983, ../sass/_wizards.scss */
10351 10351
#volume-wizard .step .explain {
10352 10352
  margin-bottom: 1em;
10353 10353
}
......
10942 10942
/* line 211, ../sass/_connected.scss */
10943 10943
.firewall .more {
10944 10944
  margin-top: 10px;
10945
  margin-left: 0;
10946
  list-style: none;
10945 10947
  display: none;
10946 10948
}
10947
/* line 214, ../sass/_connected.scss */
10948
.firewall .more p {
10949
/* line 218, ../sass/_connected.scss */
10950
.firewall .more li {
10949 10951
  min-width: 200px;
10950 10952
}
10951
/* line 216, ../sass/_connected.scss */
10952
.firewall .more p span {
10953
/* line 220, ../sass/_connected.scss */
10954
.firewall .more li span {
10953 10955
  float: right;
10954 10956
  font-size: 0.875em;
10955 10957
  height: 14px;
10956 10958
  line-height: 22px;
10957 10959
}
10958
/* line 222, ../sass/_connected.scss */
... This diff was truncated because it exceeds the maximum size that can be displayed.

Also available in: Unified diff