Revision c9d873e8

b/snf-cyclades-app/synnefo/ui/new_ui/ui/network_create.html
1 1

  
2 2
<!DOCTYPE html>
3
  <!--[if lte IE 7]><script src="javascripts/lte-ie7.js"></script><![endif]-->
3 4
<!--[if IE 8]> 				 <html class="no-js lt-ie9" lang="en"> <![endif]-->
4 5
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
5 6

  
......
10 11
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;subset=latin,greek-ext,greek' rel='stylesheet' type='text/css'>
11 12
    <link rel="stylesheet" href="stylesheets/normalize.css" />
12 13
    <link rel="stylesheet" href="stylesheets/app.css" />
13
    <link rel="stylesheet" href="stylesheets/styles.css" />
14 14
    <link rel="stylesheet" href="stylesheets/font_custom.css" />
15
    <link rel="stylesheet" href="stylesheets/jquery.jscrollpane.css" media="all" />
15 16
    <script src="javascripts/vendor/custom.modernizr.js"></script>
16 17

  
17 18
</head>
18 19
<body>
19
	<div class="dummy-navigation">
20
		<a href="" class="close">X</a>
21
		<a href="index.html">Homepage</a><br>
22
		<a href="" class="our" data-our="questions">Show/Hide questions</a><br>
23
		<a href="" class="our" data-our="suggestions">Show/Hide suggestions</a><br>
24
		<a href="" class="our" data-our="problems">Show/Hide problems</a><br>
25
	</div>
26
		<div class="row-full">
20
	<div class="row-full">
27 21
		<header class="header">
28
			
29 22
			<div class="logo">
30 23
				<img src="images/logo_01.png" alt="software logo">
31 24
			</div>
32
			
33 25
			<nav class="top-nav icons-nav">
34
				
35 26
				<ul>
36 27
					<li><a href="pithos_list.html" data-tooltip class="has-tip" title="Storage" ><img src="images/menu-icon-storage.png" alt="vm"></a></li>
37 28
					<li><a href="vm_list.html" data-tooltip class="has-tip" title="Compute"><img src="images/menu-icon-compute.png" alt="vm"></a></li>
......
39 30
					<li><a href="" data-tooltip class="has-tip" title="Disks"><img src="images/menu-icon-disks.png" alt="vm"></a></li>
40 31
					<li><a href="network_list.html" data-tooltip class="has-tip" title="Networks"><img src="images/menu-icon-networks.png" alt="vm"></a></li>
41 32
				</ul>
42
				 
43 33
			</nav>
44
			
45 34
			<div class="login">
46 35
				<a href="">test@grnet.gr</a>
47 36
			</div>
48 37
			<div class="actions clearfix">
49
				
50 38
				<div class="lt-actions">
51 39
					<div class="new-btn"><a href="network_create.html" class="current"><span>+</span> NEW NETWORK </a></div>
52 40
				</div>
......
61 49
				</div>
62 50
			</div>
63 51
		</header>
64
		
65 52
	</div>
66 53
	<div class="row-full wrapper ">
67 54
		<div class="overlay create-vm create-network">
68 55
			<div class="lt-sidebar nav">
69 56
				tba...?
70

  
71 57
			</div>
72 58
			<div class="main">
73 59
				<a href="network_list.html" class="close close_char" title="cancel network creation"><span class="snf-font">e</span></a>
......
123 109
					</ul>
124 110
				</div>
125 111
				<div class="navigation clearfix">
126
					
127 112
					<a class="rt btn2" href="network_list.html" title="Create your private network">Create Network</a>
128 113
				</div>
129 114
			</div>
130 115
		</div>
131
		
132 116
	</div>
133 117
 
134 118
  <script src="javascripts/vendor/jquery.js"></script>
b/snf-cyclades-app/synnefo/ui/new_ui/ui/network_details.html
1 1

  
2 2
<!DOCTYPE html>
3
  <!--[if lte IE 7]><script src="javascripts/lte-ie7.js"></script><![endif]-->
3 4
<!--[if IE 8]> 				 <html class="no-js lt-ie9" lang="en"> <![endif]-->
4 5
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
5 6

  
......
10 11
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;subset=latin,greek-ext,greek' rel='stylesheet' type='text/css'>
11 12
    <link rel="stylesheet" href="stylesheets/normalize.css" />
12 13
    <link rel="stylesheet" href="stylesheets/app.css" />
13
    <link rel="stylesheet" href="stylesheets/athina.css" />
14 14
    <link rel="stylesheet" href="stylesheets/font_custom.css" />
15

  
16 15
    <link rel="stylesheet" href="stylesheets/jquery.jscrollpane.css" media="all" />
16
    <link rel="stylesheet" href="stylesheets/magnific-popup.css" />
17 17
    <script src="javascripts/vendor/custom.modernizr.js"></script>
18

  
19 18
</head>
20 19
<body>
21
	<div class="dummy-navigation">
22
		<a href="" class="close">X</a>
23
		<a href="index.html">Homepage</a><br>
24
		<a href="" class="our" data-our="questions">Show/Hide questions</a><br>
25
		<a href="" class="our" data-our="suggestions">Show/Hide suggestions</a><br>
26
		<a href="" class="our" data-our="problems">Show/Hide problems</a><br>
27
	</div>
28 20
	<div class="row-full">
29 21
		<header class="header">
30
			
31 22
			<div class="logo">
32 23
				<img src="images/logo_01.png" alt="software logo">
33 24
			</div>
34
			
35 25
			<nav class="top-nav icons-nav">
36
				
37 26
				<ul>
38 27
					<li><a href="pithos_list.html" data-tooltip class="has-tip" title="Storage" ><img src="images/menu-icon-storage.png" alt="vm"></a></li>
39 28
					<li><a href="vm_list.html" data-tooltip class="has-tip" title="Compute"><img src="images/menu-icon-compute.png" alt="vm"></a></li>
40
					
41 29
					<li><a href="" data-tooltip class="has-tip" title="Disks"><img src="images/menu-icon-disks.png" alt="vm"></a></li>
42 30
					<li><a href="network_list.html" data-tooltip class="has-tip" title="Networks"><img src="images/menu-icon-networks.png" alt="vm"></a></li>
43 31
				</ul>
44
				 
45 32
			</nav>
46
			
47 33
			<div class="login">
48 34
				<a href="">test@grnet.gr</a>
49 35
			</div>
50 36
			<div class="actions clearfix">
51
				
52 37
				<div class="lt-actions">
53 38
					<div class="new-btn"><a href="network_create.html"><span>+</span> NEW NETWORK </a></div>
54 39
				</div>
......
71 56

  
72 57
	</div>
73 58
	<div class="row-full wrapper">
74
		
75 59
		<!-- sidebar -->
76 60
		<div class="lt-sidebar networks scroll-pane">
77 61

  
b/snf-cyclades-app/synnefo/ui/new_ui/ui/network_list.html
9 9
    <meta name="viewport" content="width=device-width" />
10 10
    <title>Synnefo | Network list</title>
11 11
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;subset=latin,greek-ext,greek' rel='stylesheet' type='text/css'>
12
    <link rel="stylesheet" href="stylesheets/font_custom.css" />
13
    <link rel="stylesheet" href="stylesheets/styles.css" />
14 12
    <link rel="stylesheet" href="stylesheets/normalize.css" />
15 13
    <link rel="stylesheet" href="stylesheets/app.css" />
14
    <link rel="stylesheet" href="stylesheets/font_custom.css" />
16 15
    <link rel="stylesheet" href="stylesheets/jquery.jscrollpane.css" media="all" />
16
    <link rel="stylesheet" href="stylesheets/magnific-popup.css" />
17 17
    <script src="javascripts/vendor/custom.modernizr.js"></script>
18

  
19 18
</head>
20 19
<body>
21
	<div class="dummy-navigation">
22
		<a href="" class="close">X</a>
23
		<a href="index.html">Homepage</a><br>
24
		<a href="" class="our" data-our="questions">Show/Hide questions</a><br>
25
		<a href="" class="our" data-our="suggestions">Show/Hide suggestions</a><br>
26
		<a href="" class="our" data-our="problems">Show/Hide problems</a><br>
27
	</div>
28 20
	<div class="row-full">
29 21
		<header class="header">
30
			
31 22
			<div class="logo">
32 23
				<a href="index.html"><img src="images/logo_01.png" alt="software logo"></a>
33 24
			</div>
34
			
35 25
			<nav class="top-nav icons-nav">
36
				
37 26
				<ul>
38 27
					<li><a href="pithos_list.html" data-tooltip class="has-tip" title="Storage"><img src="images/menu-icon-storage.png" alt="vm"></a></li>
39 28
					<li><a href="vm_list.html" data-tooltip class="has-tip" title="Machines"><img src="images/menu-icon-compute.png" alt="vm"></a></li>
......
41 30
					<li><a href="" data-tooltip class="has-tip" title="Disks"><img src="images/menu-icon-disks.png" alt="vm"></a></li>
42 31
					<li><a href="" data-tooltip class="has-tip" title="Networks"><img src="images/menu-icon-networks.png" alt="vm"></a></li>
43 32
				</ul>
44
				 
45 33
			</nav>
46
			
47 34
			<div class="login">
48 35
				<a href="">test@grnet.gr</a>
49 36
			</div>
......
159 146
			</div>
160 147
		</section>
161 148
	</div>
162
	<div class="extras">
163
		<span data-tooltip class="has-tip ours suggestions" title="Μήπως να είναι λίγο πιο έντονα τα χρώματα; Μοιάζουν απενεργοποιημένα..." style="top:0;left:200px">:)</span>
164
		<span data-tooltip class="has-tip ours questions" title="Πόσο θα είναι το μέγιστο πλάτος της κύριας περιοχής" style="top:240px;left:20px">?</span>
165
		<span data-tooltip class="has-tip ours problems" title="Πώς θα έχουμε δράσεις όπως filters κτλ" style="top:140px;left:250px">!!</span>
166
	</div>
167 149
	<div id="vm-connect" class="reveal-modal medium">
168 150
  		<p>A direct connection to this machine can be established using the <a target=​"_blank" href=​"http:​/​/​en.wikipedia.org/​wiki/​Secure_Shell">​SSH Protocol</a>. To do so open a terminal and type the following at the prompt to connect to your machine:</p>
169 151
		<p class="ssh"><span>ssh user@snf-38389.vm.okeanos.grnet.gr</spam></p>
b/snf-cyclades-app/synnefo/ui/new_ui/ui/pithos_list.html
1 1

  
2 2
<!DOCTYPE html>
3
 <!--[if lte IE 7]><script src="javascripts/lte-ie7.js"></script><![endif]-->
3 4
<!--[if IE 8]> 				 <html class="no-js lt-ie9" lang="en"> <![endif]-->
4 5
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
5

  
6 6
<head>
7 7
	<meta charset="utf-8" />
8 8
    <meta name="viewport" content="width=device-width" />
......
10 10
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;subset=latin,greek-ext,greek' rel='stylesheet' type='text/css'>
11 11
    <link rel="stylesheet" href="stylesheets/normalize.css" />
12 12
    <link rel="stylesheet" href="stylesheets/app.css" />
13
    <link rel="stylesheet" href="stylesheets/styles.css" />
14 13
    <link rel="stylesheet" href="stylesheets/font_custom.css" />
15
    <link rel="stylesheet" href="stylesheets/magnific-popup.css" />
16

  
17 14
    <link rel="stylesheet" href="stylesheets/jquery.jscrollpane.css" media="all" />
15
    <link rel="stylesheet" href="stylesheets/magnific-popup.css" />
18 16
    <script src="javascripts/vendor/custom.modernizr.js"></script>
19

  
20 17
</head>
21 18
<body>
22
	
23 19
	<div class="row-full">
24 20
		<header class="header">
25
			
26 21
			<div class="logo">
27 22
				<img src="images/logo_01.png" alt="software logo">
28 23
			</div>
29
			
30 24
			<nav class="top-nav icons-nav">
31 25
				
32 26
				<ul>
......
36 30
					<li><a href="" data-tooltip class="has-tip" title="Disks"><img src="images/menu-icon-disks.png" alt="vm"></a></li>
37 31
					<li><a href="network_list.html" data-tooltip class="has-tip" title="Networks"><img src="images/menu-icon-networks.png" alt="vm"></a></li>
38 32
				</ul>
39
				 
40 33
			</nav>
41
			
42 34
			<div class="login">
43 35
				<a href="">test@grnet.gr</a>
44 36
			</div>
b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_common.scss
1
.clearfix:before,
2
.clearfix:after									{ content:" "; display:block; height:0; visibility:hidden; } /* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/ */
3
.clearfix:after									{ clear:both; }
4
// Set margin and padding to zero 
5
@mixin marginPaddingZero() {
6
	margin: 0;
7
	padding: 0;
8
}
9
 
10

  
11
// Establishes the prequisits for sprite with background-image.
12
// Background-position for normal and hover states need to 
13
// be declared separetely
14
@mixin sprite($image, $width, $height){
15
	background:url($image) no-repeat center center;
16
	width: $width;
17
	height:$height;
18
	display: inline-block;
19
	text-indent: -2000px;
20
	overflow: hidden;
21

  
22
}
23

  
24
// Transition for css properties
25
@mixin transition($transition-property, $transition-time, $method) {
26
	-webkit-transition: $transition-property $transition-time $method;
27
	-moz-transition: $transition-property $transition-time $method;
28
	-ms-transition: $transition-property $transition-time $method;
29
	-o-transition: $transition-property $transition-time $method;
30
	transition: $transition-property $transition-time $method;
31
}
32

  
33
// Box-shadow property. For no box-shadow use box-shadow(none)
34
@mixin box-shadow($shadows...) {
35
  -moz-box-shadow: $shadows;
36
  -webkit-box-shadow: $shadows;
37
  box-shadow: $shadows;
38
}
39

  
40
a {
41
	color:$secondary-color;
42
	&:hover {
43
		color:$primary-color;
44
		@include transition(background, 300ms, ease-out);
45

  
46
	}
47
}
48

  
49
// border grey, on hover $secondary-color
50
.btn1 {
51
	border:1px solid $primary-color;
52
	color:$primary-color;
53
	display:inline-block;
54
	padding:10px 20px;
55
	line-height:1em;
56
	text-align:center;
57
	&:hover,
58
	&.current {
59
		border-color:$secondary-color;
60
		background:$secondary-color;
61
		color:#fff;
62
	}
63
	&.current {
64
		cursor:default;
65
	}
66
}
67

  
68
// white background, on hover transparent
69
.btn2 {
70
	@extend .btn1;
71
	color:$secondary-color;
72
	background:#fff;
73
	border-color:$secondary-color;
74
	&:hover, 
75
	&.current {
76
		background:transparent;
77
		border-color:#fff;
78
	}
79
}
80

  
81
// reverse btn2
82
.btn3 {
83
	@extend .btn1;
84
	color:#fff; 
85
	border-color:#fff;
86
	&:hover, 
87
	&.current {
88
		color:$secondary-color;
89
		background:#fff;
90
		border-color:#fff;
91
	}
92
}
93

  
94
.btn4 {
95
	@extend .btn1;
96
	color:#fff; 
97
	border-color:#fff;
98
	background: $secondary-color;
99
	&:hover, 
100
	&.current {
101
		color: $secondary-color;
102
  		border-color:  $secondary-color;
103
  		background: white;
104
	}
105
}
106

  
107

  
108

  
109
// btn with image on the right
110
.btn-img {
111
	@extend .btn1;
112
	border-color:$secondary-color;
113
	&:hover {
114
		background:transparent;
115
	}
116
	a {
117
		img,span {
118
			margin-left:5px;
119
		}
120
	}
121
}
122

  
123

  
124
.row-full {
125
	max-width:$row-full-width;
126
	margin:0 auto;
127
}
128

  
129
.onecol {
130
	max-width:$row-width;
131
	margin:0 auto;
132
}
133

  
134
.lt-sidebar {
135
	width:250px;
136
	float:left;
137
	&.nav {
138
		margin-top:0;
139
		font-size:1em;
140
		overflow: auto;
141
	}
142
	&+.main {
143
		overflow:hidden;
144
	}
145
}
146

  
147
.main {
148
	padding:43px 40px;
149
}
150

  
151
.header {
152
	position:relative;
153
	padding:$header-padding-vertical $header-padding-horizontal;
154
	border-bottom:1px solid $primary-color;
155
	background:#fff;
156
	.logo {
157
		text-align: center;
158
		img {
159
			max-height: 30px;			
160
		}
161
	}
162
	.actions {
163
		text-align:center;
164
		height:45px;
165
		line-height:45px;
166
		position:relative;
167
		margin:2*$header-padding-vertical 0 $header-padding-vertical;
168
		.main-actions {
169
			position:relative;
170
			top:86px;
171
			margin:0 -40px;
172
			border-bottom:1px solid lighten($primary-color,20%);
173
			z-index: 1;
174
		}
175
		ul {
176
			margin:0;
177
			li {
178
				list-style: none outside none;
179
				display: inline-block;
180
				margin:0 5px;
181
				a {
182
					display: block;
183
					color:lighten($primary-color,30%);
184
					width:100%;
185
					padding:8px 20px;
186
					border:1px solid transparent;
187
					&.active {
188
						color:$primary-color;
189
						&:hover {
190
							color:$secondary-color;
191
							cursor: pointer;
192
						}
193
					}
194
					&:hover {
195
						cursor:default;
196
					}
197

  
198
				}
199
			}
200
		}
201
	}
202
	.new-btn {
203
		position: absolute;
204
		left:0;
205
		bottom:0;
206
		a {
207
			@extend .btn1;
208
			span {
209
				font-size:emCalc(20px);
210
			}
211
		}
212
	}
213
}
214
.login {
215
	position:absolute;
216
	right:$header-padding-horizontal;
217
	top:$header-padding-vertical;
218
}
219

  
220
.top-nav {
221
	position:absolute;
222
	left:$header-padding-horizontal;
223
	top:$header-padding-vertical;
224
	ul {
225
		@include marginPaddingZero();
226
		li {
227
			display: inline-block;
228
			margin-right:15px;
229
			a {
230
				padding-bottom:5px;
231
			}
232
		}
233
	}
234

  
235
}
236

  
237
// info styling
238

  
239
.top-info {
240
	padding:50px 100px;
241
	position: relative;
242
	z-index:10;
243
	display:none;
244
	.close {
245
		position: absolute;
246
		right:$header-padding-horizontal;
247
		top:50px;
248
		@include sprite('../images/info-close.png', 31px, 30px);
249
	}
250
}
251

  
252

  
253
.info.error {
254
	background:$error-color;
255
	color:#fff;
256
}
257

  
258

  
259
.info.alert {
260
	background:$alert-color;
261
	color:#fff;
262
}
263

  
264
.info.warning {
265
	background:$primary-color;
266
	color:#fff;
267
}
268

  
269
.info.success {
270
	background:$success-color;
271
	color:#fff;
272
}
273

  
274
.border-bottom-style1 {
275
	padding-bottom:20px;
276
	margin-bottom:20px;
277
	border-bottom:1px dashed $primary-color;
278
}
279

  
280

  
281
body.with-overlay {
282
	background:$secondary-color;
283
}
284

  
285
.reveal-modal {
286
	h3 {
287
		font-size:1em;
288
	}
289
	a { 
290
		color: $secondary-color;
291
		&:hover {
292
			text-decoration: underline;
293
		}
294
		&.close-reveal-modal:hover {
295
			text-decoration: none;
296
			color:$secondary-color;
297
		}
298
	}	
299
}
300

  
301

  
302
// custom modal with opaque overlay
303
.reveal-custom {
304
	position: absolute;
305
	top:100px;
306
	left:25%;
307
	z-index:99;
308
	background:yellow;
309
	width:50%;
310
	display:none;
311
}
312

  
313

  
314
.overlay-wrapper {
315
	position: relative;
316

  
317
	.overlay-area {
318
		display:none;
319
		position:absolute;
320
		left:0;
321
		right:0;
322
		top:0;
323
		width:100%;
324
		height:100%;
325
		background:$secondary-color;
326
		z-index:20;
327
	}
328
	.close {
329
		position: absolute;
330
		right:$header-padding-horizontal;
331
		top:50px;
332
		@include sprite('../images/info-close.png', 31px, 30px);
333
	}
334
	.overlay-div {
335
		display: none;
336
		z-index:100;
337
		position: relative;
338
		background:#fff;
339
		top:20%; 
340
		left:25%; 
341
		width:50%;
342
		padding:25px;
343
		.buttons {
344
			a {
345
				margin-right:20px;
346
			}
347
		}
348
		&.upload-widget {
349
			background:transparent;
350
			padding:45px 0;
351
			width:80%;
352
			left:10%;
353
			border:1px solid white;
354
		}
355

  
356
	}
357

  
358
}
359

  
360

  
361
.progress-bar {
362
	position: fixed;
363
	bottom:0;
364
	left:0;
365
	border-top:1px solid $secondary-color;
366
	width:100%;
367
	background:#fff;
368
	padding:20px 0 20px 310px;
369
	color:$primary-color;
370
	span.counter {
371
		display: inline-block;
372
		margin-right:20px;
373
		float:left;
374
	}
375
	a:hover {
376
		color:$secondary-color;
377
	}
378
	div.progress-wrap {
379
		display:inline-block;
380
		float:left;
381
		width:40%;
382
		margin-right:60px;
383
		.progress {
384
			position: relative;
385
			top:2px;
386
		}
387
	}
388
	span.more {
389
		display: inline-block;
390
	}
391
}
392

  
393

  
b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_machines.scss
1
.vms .items-list {
2
	.img {
3
			@include sprite('../images/vm-on.png', 56px, 58px);
4
			 
5
			&.stopped {
6
				background-image:url('../images/vm-stopped.png');
7
			}
8
			.os {
9
				@include sprite('../images/os-unknown.png', 22px, 22px);
10
				position: absolute;
11
				top:8px;
12
				left:18px;
13
				&.windows { background-image:url('../images/os-windows.png'); }
14
				&.kubuntu { background-image:url('../images/os-kubuntu.png'); }
15
				&.fedora { background-image:url('../images/os-fedora.png'); }
16
			}
17
		
18
		}
19
}
20

  
21
.vm {
22
	.top {
23
		.img {
24
			@include sprite('../images/vm-on.png', 112px, 116px);
25
		}
26
		&.stopped {
27
			background-image:url('../images/vm-stopped.png');
28
		}
29
		.os {
30
			@include sprite('../images/os-unknown.png', 22px, 22px);
31
			position: absolute;
32
			background-size:100%;
33
			width:44px;
34
			height:44px;
35
			left:36px;
36
			top:16px;
37
			&.windows { background-image:url('../images/os-windows.png'); }
38
			&.kubuntu { background-image:url('../images/os-kubuntu.png'); }
39
			&.fedora { background-image:url('../images/os-fedora.png'); }
40
		}
41
	}
42
}
43

  
44

  
45
.create-vm {
46
	.select-os {
47
		li {
48
			width:23%;
49
			padding:20px;
50
			list-style:none outside none;
51
			display: inline-block;
52
			float: left;
53
			height: 200px;
54
			margin:0 10px 10px 0;
55
			&:hover,
56
			&.selected {
57
				background:#fff;
58
				h2, p, a {
59
					color:$secondary-color;
60
				}
61
			}
62
			a {
63
				color:#fff;
64
			}
65
			.os {
66
				@include sprite('../images/os-unknown.png', 30px, 30px);
67
				background-size:100%;
68
				margin-bottom:2em;
69
				&.windows { background-image:url('../images/os-windows.png'); }
70
				&.kubuntu { background-image:url('../images/os-kubuntu.png'); }
71
				&.fedora { background-image:url('../images/os-fedora.png'); }
72
			}
73
			h2 {
74
				font-size:emCalc(16px);
75
				font-weight:normal;
76
				color:#fff;
77
			}
78
			.details {
79
				font-weight:bold;
80
				font-size:emCalc(14px);
81
			}
82
		}
83
	}
84
	.select-flavor {
85
		dl {
86
			color:#fff;
87
			font-size:emCalc(20px);
88
			margin-bottom:10px;
89
			dd {
90
				width:23%;
91
				display: inline-block;
92
			}
93
			dt {
94
				width:70%;
95
				display: inline-block;
96
				font-weight: normal;
97
				span {
98
					@extend .btn3;
99
					min-width: 90px;
100
					margin:0 10px;
101
					&:first-child {
102
						margin-left:0;
103
					}
104
				}
105
			}
106
		}
107
	}
108
}
109

  
110
#vm-connect {
111
	.info {
112
		font-style:italic;
113
		font-size:emCalc(13px);
114
		color: lighten($primary-color,5%);
115
	}
116
	.ssh {
117
		text-align: center;
118
		span {
119
			padding: 10px 30px;
120
			background:$secondary-color;
121
			color:#fff;
122
		}
123
	}
124
}
125

  
126

  
127

  
128

  
b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_networks.scss
1
.networks .items-list {
2
	.img {
3
			@include sprite('../images/network-green102x116.png', 51px, 58px);
4
			background-size:100%;
5
		}
6
}
7

  
8
.network {
9
	.top {
10
		.img {
11
			@include sprite('../images/network-green102x116.png', 102px, 116px);
12
		}
13
	}
14
}
15

  
16

  
17

  
18
.create-network {
19
	color: #fff;
20
	.check {
21
		color: #fff;
22
	}
23
	p {
24
		font-size: 0.8em;
25
		font-style: italic;
26
		margin: 5px 0 0;
27
		width: 545px;
28
	}
29

  
30
	li {
31
		list-style: none outside none;
32
	}
33
	.custom_checkbox {
34
		font-size: 1.3em;
35
	}
36
	.subnet_options {
37
		margin: 0;
38
		li {
39
			margin-bottom: 6px;
40
			padding-left: 155px;
41
		}
42
	}
43

  
44
	.network_options {
45
		position: relative;
46
		width: 350px;
47
		min-height: 285px;
48
		
49
		.check {
50
			position: absolute;
51
			right: 0;
52
		}
53
		
54
		li {
55
			display: block;
56
			margin-bottom: 13px;
57
		
58
			form {
59
				margin: 0;
60
				
61
				input {
62
					position: absolute;
63
					display: inline-block;
64
					right: 0;
65
					width: 200px;
66
					height: 20px;
67
					font-size: 0.9em;
68
					
69
					&.hidden {
70
						display: none;
71
					}
72
				}
73
			}
74
			&.manual form input {
75
				right: -160px;
76
				width: 150px;
77
			}
78
		}		
79
		span.sub_title {
80
			float:left;
81
		}
82
	}
83
}
84

  
b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_storage.scss
1
.storage {
2
	padding:45px 0;
3
	position:relative;
4
	.lt-sidebar {
5
		font-size: 1em;
6
		padding:0 20px 40px 40px;
7
		.sidenav {
8
			font-size: inherit;
9
		}
10
		ul {
11
			list-style: none outside none;
12
			li {
13
				padding:5px 0;
14
				&:hover {
15
					background: transparent;
16
					&>a {
17
						color:$secondary-color;
18
						&+span {
19
							display: inline;
20
						}
21
					}
22
				}
23
				span {
24
					float:right;
25
					color:$secondary-color;
26
					display: none;
27
				}
28

  
29
			}
30
		}
31
	}
32
	.files {
33
		margin:1em 0;
34
		padding:0;
35
		list-style: none outside none;
36
		li {
37
			list-style:none outside none;
38
			clear: left;
39
			padding:10px 20px;
40
			border:1px solid transparent;
41
			@extend .clearfix;
42
			text-align: left;
43
			font-weight: normal;
44
			.name-col {
45
				float:left;
46
				width:35%;
47
				padding-left:50px;
48
				&.folder { background:url(../images/icon-folder.png) no-repeat left center; }
49
				&.txt { background:url(../images/icon-txt.png) no-repeat left center; }
50
				&.pdf { background:url(../images/icon-pdf.png) no-repeat left center; }
51
				&.image { background:url(../images/icon-image.png) no-repeat left center; }
52
				font-weight: normal;
53
			}
54
			.size-col {
55
				float:left;
56
				width:10%;
57
			}
58
			.date-col {
59
				float:left;
60
				width:20%;
61
			}
62
			.actions-col {
63
				float:left;
64
				width:30%;
65
				visibility: hidden;
66

  
67
				a {
68
					color: $secondary-color;
69
					margin-right: 10px;
70
					&:hover { color:$primary-color;}
71

  
72
				}
73
			}
74
			&:hover {
75
				border-color:$secondary-color;
76
				.actions-col { visibility:visible;}
77
			}
78
			&.titles {
79
				color:$primary-color;
80
				.name-col { padding-left:0; }
81
				&:hover {
82
					border-color:transparent;
83
				}
84
			}
85
		}
86
	}
87
	.breadcrumbs {
88
		li:first-child {
89
			font-weight:bold;
90
			a {
91
				color:$black;
92
				&:hover {
93
					color:$secondary-color;
94
				}
95
			}
96
		}
97
		a:hover {
98
			color: $secondary-color;
99
		}
100
	}
101
}
102

  
103

  
104

  
105

  
106

  
107
.upload-widget {
108
	
109
	text-align:center;
110
	h2, a{
111
		color:#fff;
112
	}
113
	.btns {
114
		a {
115
			@extend .btn3;
116
			margin:0 10px;
117
		}
118
	}
119
	.breadcrumbs {
120
		*, & > *:before ,li a:first-child, a:hover, li a:first-child:hover  {
121
			color:#fff;
122
		}
123
		a:hover {
124
			text-decoration:underline;
125
		}
126

  
127
		display: inline-block;
128
	}
129
	.files {
130
		color:#fff;
131
		
132
		li {
133
			padding: 10px 120px;
134
			border: none;
135
			position: relative;
136
			.dz-success-mark {
137
				margin-left:10px;
138
			}
139
			.dz-error-mark {
140
				display: none;
141
			}
142
			.cancel-col {
143
				width: 100px;
144
				position: absolute;
145
				right: 50px;
146
				top: 9px;
147
				
148
				.cancel span {
149
					display: block;
150
					text-align: right;
151
				}
152
			}
153
		}
154
		div {
155
			display: inline-block;
156
		}
157
		.progress-bar {
158
			position: static;
159
			padding: 0;
160
			width: 25%;
161
			border: none;
162
			background-color: transparent;
163
			
164
			.progress-wrap {
165
				width: 100%;
166
				margin: 0;
167
			
168
				.progress {
169
					display: block;
170
					margin: 0;
171
					border: 2px solid white;
172
					padding: 0;
173
					background-color:  $secondary-color;
174
				
175
					.meter {
176
						background-color: white;
177
					}
178
				}
179
			}
180
		}
181
	}
182
}
183

  
184
.dz-success-mark, .dz-error-mark, .dz-error-message {
185
	display: none;
186
}
b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/app.scss
1 1
// Global Foundation Settings
2 2
@import "settings";
3

  
4 3
// Comment out this import if you are customizing you imports below
5 4
@import "foundation";
6 5

  
6
// mixins, common styles (buttons, links), overlays, bottom progress bar and header area
7
@import "common";
8

  
7 9
// Import specific parts of Foundation by commenting the import "foundation"
8 10
// and uncommenting what you want below. You must uncomment the following if customizing
9 11

  
......
44 46
// @import "foundation/components/tooltips";
45 47
// @import "foundation/components/dropdown";
46 48

  
47
.clearfix:before,
48
.clearfix:after									{ content:" "; display:block; height:0; visibility:hidden; } /* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/ */
49
.clearfix:after									{ clear:both; }
50
// Set margin and padding to zero 
51
@mixin marginPaddingZero() {
52
	margin: 0;
53
	padding: 0;
54
}
55
 
56

  
57
// Establishes the prequisits for sprite with background-image.
58
// Background-position for normal and hover states need to 
59
// be declared separetely
60
@mixin sprite($image, $width, $height){
61
	background:url($image) no-repeat center center;
62
	width: $width;
63
	height:$height;
64
	display: inline-block;
65
	text-indent: -2000px;
66
	overflow: hidden;
67

  
68
}
69

  
70
// Transition for css properties
71
@mixin transition($transition-property, $transition-time, $method) {
72
	-webkit-transition: $transition-property $transition-time $method;
73
	-moz-transition: $transition-property $transition-time $method;
74
	-ms-transition: $transition-property $transition-time $method;
75
	-o-transition: $transition-property $transition-time $method;
76
	transition: $transition-property $transition-time $method;
77
}
78

  
79
// Box-shadow property. For no box-shadow use box-shadow(none)
80
@mixin box-shadow($shadows...) {
81
  -moz-box-shadow: $shadows;
82
  -webkit-box-shadow: $shadows;
83
  box-shadow: $shadows;
84
}
85

  
86
a {
87
	color:$secondary-color;
88
	&:hover {
89
		color:$primary-color;
90
		@include transition(background, 300ms, ease-out);
91

  
92
	}
93
}
94
// border grey, on hover pink
95
.btn1 {
96
	border:1px solid $primary-color;
97
	color:$primary-color;
98
	display:inline-block;
99
	padding:10px 20px;
100
	line-height:1em;
101
	text-align:center;
102
	&:hover,
103
	&.current {
104
		border-color:$secondary-color;
105
		background:$secondary-color;
106
		color:#fff;
107
	}
108
	&.current {
109
		cursor:default;
110
	}
111
}
112

  
113
// white background, on hover transparent
114
.btn2 {
115
	@extend .btn1;
116
	color:$secondary-color;
117
	background:#fff;
118
	border-color:$secondary-color;
119
	&:hover, 
120
	&.current {
121
		background:transparent;
122
		border-color:#fff;
123
	}
124
}
125

  
126
// reverse btn2
127
.btn3 {
128
	@extend .btn1;
129
	color:#fff; 
130
	border-color:#fff;
131
	&:hover, 
132
	&.current {
133
		color:$secondary-color;
134
		background:#fff;
135
		border-color:#fff;
136
	}
137
}
138

  
139

  
140
// reverse btn2
141
.btn4 {
142
	@extend .btn1;
143
	color:#fff; 
144
	border-color:#fff;
145
	background: $secondary-color;
146
	&:hover, 
147
	&.current {
148
		color: $secondary-color;
149
  		border-color:  $secondary-color;
150
  		background: white;
151
	}
152
}
153

  
154

  
155

  
156
// btn with image on the right
157
.btn-img {
158
	@extend .btn1;
159
	border-color:$secondary-color;
160
	&:hover {
161
		background:transparent;
162
	}
163
	a {
164
		img,span {
165
			margin-left:5px;
166
		}
167
	}
168
}
169

  
170
.dummy-navigation {
171
	display:none;
172
	position: fixed;
173
	right:0;
174
	top:100px;
175
	padding:20px;
176
	background:#cc0;
177
	z-index:100;
178
	line-height:160%;
179
	a {
180
		color:$black;
181
		&:hover { color:#fff }
182
		&.open { color:#fff;}
183
		&.close {
184
			float:right;
185
			font-weight:bold;
186
			font-size:20px;
187
		}
188
	}
189
}
190

  
191
.ours {
192
	padding:8px 15px;
193
	color:#fff;
194
	font-size:20px;
195
	font-weight:bold;
196
	background:#cc0;
197
	display:none;
198
	position: absolute;
199
	&.questions { background:orange;}
200
	&.problems { background:red;}
201
	&.suggestions { background:#3EC9FF;}
202

  
203
}
204

  
205

  
206
.row-full {
207
	max-width:$row-full-width;
208
	margin:0 auto;
209
}
210

  
211
.lt-sidebar {
212
	width:250px;
213
	float:left;
214
	&.nav {
215
		margin-top:0;
216
		font-size:1em;
217
		overflow: auto;
218
	}
219
	&+.main {
220
		overflow:hidden;
221
	}
222
}
223

  
224
.main {
225
	padding:43px 40px;
226
}
227

  
228
body.with-overlay {
229
	background:$secondary-color;
230
}
231

  
232
.header {
233
	position:relative;
234
	padding:$header-padding-vertical $header-padding-horizontal;
235
	border-bottom:1px solid $primary-color;
236
	background:#fff;
237
	.logo {
238
		text-align: center;
239
		img {
240
			max-height: 30px;			
241
		}
242
	}
243
	.actions {
244
		text-align:center;
245
		height:45px;
246
		line-height:45px;
247
		position:relative;
248
		margin:2*$header-padding-vertical 0 $header-padding-vertical;
249
		.main-actions {
250
			position:relative;
251
			top:86px;
252
			margin:0 -40px;
253
			border-bottom:1px solid lighten($primary-color,20%);
254
			z-index: 1;
255
		}
256
		ul {
257
			margin:0;
258
			li {
259
				list-style: none outside none;
260
				display: inline-block;
261
				margin:0 5px;
262
				a {
263
					display: block;
264
					color:lighten($primary-color,30%);
265
					width:100%;
266
					padding:8px 20px;
267
					border:1px solid transparent;
268
					&.active {
269
						color:$primary-color;
270
						&:hover {
271
							color:$secondary-color;
272
							cursor: pointer;
273
						}
274
					}
275
					&:hover {
276
						cursor:default;
277
					}
278

  
279
				}
280
			}
281
		}
282
	}
283
	.new-btn {
284
		position: absolute;
285
		left:0;
286
		bottom:0;
287
		a {
288
			@extend .btn1;
289
			span {
290
				font-size:emCalc(20px);
291
			}
292
		}
293
	}
294
}
295
.login {
296
	position:absolute;
297
	right:$header-padding-horizontal;
298
	top:$header-padding-vertical;
299
}
300

  
301
.top-nav {
302
	position:absolute;
303
	left:$header-padding-horizontal;
304
	top:$header-padding-vertical;
305
	ul {
306
		@include marginPaddingZero();
307
		li {
308
			display: inline-block;
309
			margin-right:15px;
310
			a {
311
				padding-bottom:5px;
312
			}
313
		}
314
	}
315

  
316
}
317

  
318

  
319
// info styling
320

  
321
.top-info {
322
	padding:50px 100px;
323
	position: relative;
324
	z-index:10;
325
	display:none;
326
	.close {
327
		position: absolute;
328
		right:$header-padding-horizontal;
329
		top:50px;
330
		@include sprite('../images/info-close.png', 31px, 30px);
331
	}
332
}
333

  
334

  
335
.info.error {
336
	background:$error-color;
337
	color:#fff;
338
}
339

  
340

  
341
.info.alert {
342
	background:$alert-color;
343
	color:#fff;
344
}
345

  
346
.info.warning {
347
	background:$primary-color;
348
	color:#fff;
349
}
350

  
351
.info.success {
352
	background:$success-color;
353
	color:#fff;
354
}
355

  
356 49
.entities {
357 50
	padding-top:25px;
358 51
}
52

  
53

  
359 54
.items-list {
360 55
	li {
361 56
		text-align:center;
......
522 217

  
523 218
}
524 219

  
525
.vms .items-list {
526
	.img {
527
			@include sprite('../images/vm-on.png', 56px, 58px);
528
			 
529
			&.stopped {
530
				background-image:url('../images/vm-stopped.png');
531
			}
532
			.os {
533
				@include sprite('../images/os-unknown.png', 22px, 22px);
534
				position: absolute;
535
				top:8px;
536
				left:18px;
537
				&.windows { background-image:url('../images/os-windows.png'); }
538
				&.kubuntu { background-image:url('../images/os-kubuntu.png'); }
539
				&.fedora { background-image:url('../images/os-fedora.png'); }
540
			}
541
		
542
		}
543
}
544 220

  
545
.networks .items-list {
546
	.img {
547
			@include sprite('../images/network-green102x116.png', 51px, 58px);
548
		}
549
}
550

  
551

  
552
.vm {
553
	.top {
554
		.img {
555
			@include sprite('../images/vm-on.png', 112px, 116px);
556
		}
557
		&.stopped {
558
			background-image:url('../images/vm-stopped.png');
559
		}
560
		.os {
561
			@include sprite('../images/os-unknown.png', 22px, 22px);
562
			position: absolute;
563
			background-size:100%;
564
			width:44px;
565
			height:44px;
566
			left:36px;
567
			top:16px;
568
			&.windows { background-image:url('../images/os-windows.png'); }
569
			&.kubuntu { background-image:url('../images/os-kubuntu.png'); }
570
			&.fedora { background-image:url('../images/os-fedora.png'); }
571
		}
572
	}
573
}
574

  
575

  
576
.network {
577
	.top {
578
		.img {
579
			@include sprite('../images/network-green102x116.png', 102px, 116px);
580
		}
581
	}
582
}
583 221

  
584 222
.details {
585 223
	position:relative;
......
694 332

  
695 333

  
696 334

  
697
.border-bottom-style1 {
698
	padding-bottom:20px;
699
	margin-bottom:20px;
700
	border-bottom:1px dashed $primary-color;
701
}
335

  
702 336

  
703 337
.overlay {
704 338
	background:$secondary-color;
......
753 387
	}
754 388
}
755 389

  
... This diff was truncated because it exceeds the maximum size that can be displayed.

Also available in: Unified diff