Revision 692c5cea

b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/common.js
1 1
ui = {};
2 2

  
3 3

  
4

  
5

  
6

  
7 4
ui.closeDiv = function(closeEl, divToCloseClass) {
8 5
    closeEl.click(function(e){
9 6
        e.preventDefault();
......
79 76
    
80 77
    $('.entities li .container').mouseenter(
81 78
      function (e) {
82
        $(this).find('.img').stop(true, true).fadeOut({
83
            'duration':200,
84
        });
85 79
        $(this).find('.options, .check').stop(true, true).addClass('active');
86 80
        $(this).find('.options').stop(true, true).fadeIn(500); 
87 81
        $(this).stop(true, true).addClass('set-border');
88
        $(this).find('.visible-info em').stop(true, true).each(function(){
89
            var emLeft = $(this).position();
90
            $(this).animate({
91
            left: -emLeft.left,
92
            }, 300);        
93
        }) 
94 82
      }
95 83
    );
96 84

  
......
98 86
        function(e){
99 87
            $(this).stop(true, true).removeClass('set-border');
100 88
            $(this).find('.options').stop(true, true).fadeOut(200); 
101
            $(this).find('.img').stop(true, true).fadeIn('slow');
102 89
            $(this).find('.snf-checkbox-unchecked').parents('.check').stop(true, true).removeClass('active');
103
            $(this).find('.visible-info em').stop(true, true).each(function(){
104
                $(this).animate({
105
                 left: 0,
106
                }, 300);        
107
            }) 
108 90
         }
109 91
    );
110 92

  
b/snf-cyclades-app/synnefo/ui/new_ui/ui/network_list.html
50 50
				<ul class="items-list small-block-grid-2 large-block-grid-3 sortable">
51 51
					<li data-order="0">
52 52
						<div class="container">
53
							<div class="options">
54
								<div class="wrap">
55
									<a href="network_details.html">details</a>
56
								</div>
57
							</div>
58 53
							<div class="img-wrap">
59 54
								<div class="img running">
60
									Network									
55
									Network
61 56
								</div>
62 57
							</div>
63
							
64 58
							<p class="visible-info">
65 59
								<span><em>IPv4 83.212.97.127</em></span>
66
								<span class="title"><em>Network Name</em></span>
60
								<span class="title">
61
									<a href="network_details.html"><em>Network name</em></a>
62
								</span>
67 63
							</p>
68 64
							<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
69
							
70 65
						</div>
71 66
					</li>
72 67
					<li data-order="1">
73 68
						<div class="container">
74
							<div class="options">
75
								<div class="wrap">
76
									
77
									<a href="network_details.html">details</a>
78
									
79
								</div>
80
							</div>
81 69
							<div class="img-wrap">
82 70
								<div class="img running">
83 71
									Network
84
									
85 72
								</div>
86 73
							</div>
87
							
88 74
							<p class="visible-info">
89 75
								<span><em>IPv4 83.212.97.127</em></span>
90
								<span class="title"><em>Network Name</em></span>
76
								<span class="title">
77
									<a href="network_details.html"><em>Network name</em></a>
78
								</span>
91 79
							</p>
92 80
							<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
93
							
94 81
						</div>
95 82
					</li>
96
					
97 83
					<li data-order="2">
98 84
						<div class="container">
99
							<div class="options">
100
								<div class="wrap">
101
									
102
									<a href="network_details.html">details</a>
103
									
104
								</div>
105
							</div>
106 85
							<div class="img-wrap">
107 86
								<div class="img running">
108 87
									Network
109
									
110 88
								</div>
111 89
							</div>
112
							
113 90
							<p class="visible-info">
114 91
								<span><em>IPv4 83.212.97.127</em></span>
115
								<span class="title"><em>Network Name</em></span>
92
								<span class="title">
93
									<a href="network_details.html"><em>Network name</em></a>
94
								</span>
116 95
							</p>
117 96
							<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
118
							
119 97
						</div>
120 98
					</li>
121
					
122
					 
123 99
					<li data-order="3">
124 100
						<div class="add-new"><a href="network_create.html">NEW<br>NETWORK</a></div>	
125 101
					</li>
126
					 
127 102
				</ul>
128 103
			</div>
129 104
		</section>
b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_common.scss
258 258
	@include marginPaddingZero();
259 259
	li {
260 260
		display: inline-block;
261
		margin-right:15px;
261
		margin-right:10px;
262 262
		font-size: emCalc(24px);
263 263
		line-height: 1em;
264 264
		padding-bottom:5px;
265
		width: 30px;
266
		overflow: hidden;
265 267
		a {
266 268
			color:$black;
267
			&:hover, &.current {
269
			&:hover,&.current {
270
				font-size:30px;
268 271
				color:$third-color;
269 272
			}
270 273
		}
b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_items-list.scss
30 30
			margin-bottom: 20px;
31 31
			position: relative;
32 32
			height:58px;
33
			display: inline-block;
33 34
		}
34 35
		.container {
35 36
			&.set-bg {	background:lighten($primary-color,38%); }
b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_machines.scss
2 2

  
3 3
.vms .items-list {
4 4
	.img {
5
			//@include sprite('../images/vm-on.png', 56px, 58px);
6
			width: 60px;
7
			height: 60px; // do we prefer to put it in items_list??
8
			display: inline-block;
5
		width: 60px;
6
		span {
7
			&:hover {
8
				cursor: pointer;
9
			}
10
		}
11
		&:hover {
9 12
			.snf-PC_fill {
10
				font-size: 60px;
11
				color: $vm-active-color;
13
				color: darken($vm-active-color,10%);
12 14
			}
13
			 
14
			&.stopped {
15
				.snf-PC_fill {
16
					color: $vm-stopped-color;
17
				}				
18
				//background-image:url('../images/vm-stopped.png');
15
		}
16
		.snf-PC_fill {
17
			font-size: 60px;
18
			color: $vm-active-color;
19
		}
20
		&.stopped {
21
			.snf-PC_fill {
22
				color: $vm-stopped-color;
19 23
			}
20
			.os {
21
				@include sprite('../images/os-unknown.png', 22px, 22px);
22
				position: absolute;
23
				top:8px;
24
				left:19px;
25
				&.windows { background-image:url('../images/os-windows.png'); }
26
				&.kubuntu { background-image:url('../images/os-kubuntu.png'); }
27
				&.fedora { background-image:url('../images/os-fedora.png'); }
24
		}
25
		&.stopped:hover {
26
			.snf-PC_fill {
27
				color: darken($vm-stopped-color,10%);
28 28
			}
29
		
30 29
		}
30
		.os {
31
			@include sprite('../images/os-unknown.png', 22px, 22px);
32
			position: absolute;
33
			top:8px;
34
			left:19px;
35
			&.windows { background-image:url('../images/os-windows.png'); }
36
			&.kubuntu { background-image:url('../images/os-kubuntu.png'); }
37
			&.fedora { background-image:url('../images/os-fedora.png'); }
38
		}
39
	}
31 40
}
32 41

  
33 42
.vm {
......
37 46
			display: inline-block;
38 47
			height: 112px;
39 48
			.snf-PC_fill {
40
					font-size: 112px;
41
					color: $vm-active-color;
49
				font-size: 112px;
50
				color: $vm-active-color;
51
			}
52
			&.stopped {
53
				.snf-PC_fill {
54
					color: $vm-stopped-color;
42 55
				}
43
				 
44
				&.stopped {
45
					.snf-PC_fill {
46
						color: $vm-stopped-color;
47
					}			
48
				//background-image:url('../images/vm-stopped.png');
49 56
			}
50 57
		}
51 58
		.os {
b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_settings.scss
43 43
$vm-stopped-color: #e00e63;
44 44
$network-color: #79c79e;
45 45

  
46
//colors for main icons (icons of networks and vms)
47
$vm-active-color: #75c046;
48
$vm-stopped-color: #FF3366;
49
$network-color: #79c79e;
50

  
51

  
46 52
// We use these to make sure border radius matches unless we want it different.
47 53
$global-radius: 1px;
48 54
// $global-rounded: 1000px;
b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/icons.scss
1 1
// Global Foundation Settings
2 2
@import "settings";
3 3

  
4
//colors for main icons (icons of networks and vms)
5

  
6
$vm-active-color: #75c046;
7
$vm-stopped-color: #e00e63;
8
$network-color: #79c79e;
9

  
10

  
11 4
// menu1 is the simple menu and it is used on vm list 
12 5
.menu1  {
13 6
	ul {
b/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/app.css
7026 7026
/* line 259, ../sass/_common.scss */
7027 7027
.icons-nav li {
7028 7028
  display: inline-block;
7029
  margin-right: 15px;
7029
  margin-right: 10px;
7030 7030
  font-size: 1.5em;
7031 7031
  line-height: 1em;
7032 7032
  padding-bottom: 5px;
7033
  width: 30px;
7034
  overflow: hidden;
7033 7035
}
7034
/* line 265, ../sass/_common.scss */
7036
/* line 267, ../sass/_common.scss */
7035 7037
.icons-nav li a {
7036 7038
  color: #333333;
7037 7039
}
7038
/* line 267, ../sass/_common.scss */
7040
/* line 269, ../sass/_common.scss */
7039 7041
.icons-nav li a:hover, .icons-nav li a.current {
7042
  font-size: 30px;
7040 7043
  color: #f24e53;
7041 7044
}
7042 7045

  
7043 7046
/* Top info  ----------------------------------------------- */
7044
/* line 279, ../sass/_common.scss */
7047
/* line 282, ../sass/_common.scss */
7045 7048
.top-info {
7046 7049
  padding: 50px 100px;
7047 7050
  position: relative;
7048 7051
  z-index: 10;
7049 7052
  display: none;
7050 7053
}
7051
/* line 284, ../sass/_common.scss */
7054
/* line 287, ../sass/_common.scss */
7052 7055
.top-info .close {
7053 7056
  position: absolute;
7054 7057
  right: 2.5em;
......
7061 7064
  overflow: hidden;
7062 7065
}
7063 7066

  
7064
/* line 293, ../sass/_common.scss */
7067
/* line 296, ../sass/_common.scss */
7065 7068
.info.error {
7066 7069
  background: #ff5c58;
7067 7070
  color: #fff;
7068 7071
}
7069 7072

  
7070
/* line 299, ../sass/_common.scss */
7073
/* line 302, ../sass/_common.scss */
7071 7074
.info.alert {
7072 7075
  background: #3582ac;
7073 7076
  color: #fff;
7074 7077
}
7075 7078

  
7076
/* line 304, ../sass/_common.scss */
7079
/* line 307, ../sass/_common.scss */
7077 7080
.info.warning {
7078 7081
  background: #919194;
7079 7082
  color: #fff;
7080 7083
}
7081 7084

  
7082
/* line 309, ../sass/_common.scss */
7085
/* line 312, ../sass/_common.scss */
7083 7086
.info.success {
7084 7087
  background: #00a551;
7085 7088
  color: #fff;
7086 7089
}
7087 7090

  
7088
/* line 314, ../sass/_common.scss */
7091
/* line 317, ../sass/_common.scss */
7089 7092
.border-bottom-style1 {
7090 7093
  padding-bottom: 20px;
7091 7094
  margin-bottom: 20px;
......
7093 7096
}
7094 7097

  
7095 7098
/* Progress Bar ----------------------------------------------- */
7096
/* line 323, ../sass/_common.scss */
7099
/* line 326, ../sass/_common.scss */
7097 7100
.progress-bar {
7098 7101
  position: fixed;
7099 7102
  bottom: 0;
......
7104 7107
  padding: 20px 0 20px 310px;
7105 7108
  color: #919194;
7106 7109
}
7107
/* line 332, ../sass/_common.scss */
7110
/* line 335, ../sass/_common.scss */
7108 7111
.progress-bar span.counter {
7109 7112
  display: inline-block;
7110 7113
  margin-right: 20px;
7111 7114
  float: left;
7112 7115
}
7113
/* line 337, ../sass/_common.scss */
7116
/* line 340, ../sass/_common.scss */
7114 7117
.progress-bar div.progress-wrap {
7115 7118
  display: inline-block;
7116 7119
  float: left;
7117 7120
  width: 40%;
7118 7121
  margin-right: 60px;
7119 7122
}
7120
/* line 342, ../sass/_common.scss */
7123
/* line 345, ../sass/_common.scss */
7121 7124
.progress-bar div.progress-wrap .progress {
7122 7125
  position: relative;
7123 7126
  top: 2px;
7124 7127
}
7125
/* line 347, ../sass/_common.scss */
7128
/* line 350, ../sass/_common.scss */
7126 7129
.progress-bar span.more {
7127 7130
  display: inline-block;
7128 7131
}
......
7161 7164
  margin-bottom: 20px;
7162 7165
  position: relative;
7163 7166
  height: 58px;
7167
  display: inline-block;
7164 7168
}
7165
/* line 34, ../sass/_items-list.scss */
7169
/* line 35, ../sass/_items-list.scss */
7166 7170
.items-list li .container {
7167 7171
  border: 1px solid transparent;
7168 7172
  margin: 0 20px;
7169 7173
  padding: 25px 0;
7170 7174
  position: relative;
7171 7175
}
7172
/* line 35, ../sass/_items-list.scss */
7176
/* line 36, ../sass/_items-list.scss */
7173 7177
.items-list li .container.set-bg {
7174 7178
  background: #f3f3f4;
7175 7179
}
7176
/* line 36, ../sass/_items-list.scss */
7180
/* line 37, ../sass/_items-list.scss */
7177 7181
.items-list li .container.set-border {
7178 7182
  border-color: #3582ac;
7179 7183
}
7180
/* line 41, ../sass/_items-list.scss */
7184
/* line 42, ../sass/_items-list.scss */
7181 7185
.items-list li .container .options {
7182 7186
  width: 100%;
7183 7187
  text-align: center;
......
7186 7190
  left: 0;
7187 7191
  display: none;
7188 7192
}
7189
/* line 48, ../sass/_items-list.scss */
7193
/* line 49, ../sass/_items-list.scss */
7190 7194
.items-list li .container .options .wrap {
7191 7195
  height: 100%;
7192 7196
  padding: 25px 25px 0;
7193 7197
  text-align: left;
7194 7198
}
7195
/* line 52, ../sass/_items-list.scss */
7199
/* line 53, ../sass/_items-list.scss */
7196 7200
.items-list li .container .options .wrap a {
7197 7201
  font-size: 1.6875em;
7198 7202
  display: inline-block;
......
7201 7205
  margin-bottom: 10px;
7202 7206
  font-weight: bold;
7203 7207
}
7204
/* line 60, ../sass/_items-list.scss */
7208
/* line 61, ../sass/_items-list.scss */
7205 7209
.items-list li .container .options .wrap a:hover {
7206 7210
  color: #3582ac;
7207 7211
}
7208
/* line 70, ../sass/_items-list.scss */
7212
/* line 71, ../sass/_items-list.scss */
7209 7213
.items-list li .check {
7210 7214
  position: absolute;
7211 7215
  right: 10px;
......
7216 7220
  cursor: pointer;
7217 7221
  z-index: 10;
7218 7222
}
7219
/* line 80, ../sass/_items-list.scss */
7223
/* line 81, ../sass/_items-list.scss */
7220 7224
.items-list li .check span {
7221 7225
  position: relative;
7222 7226
  z-index: 10;
7223 7227
}
7224
/* line 81, ../sass/_items-list.scss */
7228
/* line 82, ../sass/_items-list.scss */
7225 7229
.items-list li .check.active {
7226 7230
  color: #3582ac;
7227 7231
}
7228
/* line 85, ../sass/_items-list.scss */
7232
/* line 86, ../sass/_items-list.scss */
7229 7233
.items-list li .visible-info {
7230 7234
  margin: 0 25px;
7231 7235
  position: relative;
7232 7236
  color: #919194;
7233 7237
  overflow: hidden;
7234 7238
}
7235
/* line 90, ../sass/_items-list.scss */
7239
/* line 91, ../sass/_items-list.scss */
7236 7240
.items-list li .visible-info span {
7237 7241
  display: block;
7238 7242
  position: relative;
7239 7243
}
7240
/* line 91, ../sass/_items-list.scss */
7244
/* line 92, ../sass/_items-list.scss */
7241 7245
.items-list li .visible-info span.title {
7242 7246
  white-space: nowrap;
7243 7247
}
7244
/* line 96, ../sass/_items-list.scss */
7248
/* line 97, ../sass/_items-list.scss */
7245 7249
.items-list li .visible-info span em {
7246 7250
  font-style: normal;
7247 7251
  position: relative;
7248 7252
}
7249 7253

  
7250 7254
@media only screen and (min-width: 68.75em) {
7251
  /* line 108, ../sass/_items-list.scss */
7255
  /* line 109, ../sass/_items-list.scss */
7252 7256
  .entities .items-list {
7253 7257
    display: block;
7254 7258
    padding: 0;
......
7507 7511
/* line 4, ../sass/_machines.scss */
7508 7512
.vms .items-list .img {
7509 7513
  width: 60px;
7510
  height: 60px;
7511
  display: inline-block;
7512 7514
}
7513
/* line 9, ../sass/_machines.scss */
7515
/* line 7, ../sass/_machines.scss */
7516
.vms .items-list .img span:hover {
7517
  cursor: pointer;
7518
}
7519
/* line 12, ../sass/_machines.scss */
7520
.vms .items-list .img:hover .snf-PC_fill {
7521
  color: #5e9d36;
7522
}
7523
/* line 16, ../sass/_machines.scss */
7514 7524
.vms .items-list .img .snf-PC_fill {
7515 7525
  font-size: 60px;
7516 7526
  color: #75c046;
7517 7527
}
7518
/* line 15, ../sass/_machines.scss */
7528
/* line 21, ../sass/_machines.scss */
7519 7529
.vms .items-list .img.stopped .snf-PC_fill {
7520
  color: #e00e63;
7530
  color: #ff3366;
7521 7531
}
7522
/* line 20, ../sass/_machines.scss */
7532
/* line 26, ../sass/_machines.scss */
7533
.vms .items-list .img.stopped:hover .snf-PC_fill {
7534
  color: #ff0040;
7535
}
7536
/* line 30, ../sass/_machines.scss */
7523 7537
.vms .items-list .img .os {
7524 7538
  background: url("../images/os-unknown.png") no-repeat center center;
7525 7539
  width: 22px;
......
7531 7545
  top: 8px;
7532 7546
  left: 19px;
7533 7547
}
7534
/* line 25, ../sass/_machines.scss */
7548
/* line 35, ../sass/_machines.scss */
7535 7549
.vms .items-list .img .os.windows {
7536 7550
  background-image: url("../images/os-windows.png");
7537 7551
}
7538
/* line 26, ../sass/_machines.scss */
7552
/* line 36, ../sass/_machines.scss */
7539 7553
.vms .items-list .img .os.kubuntu {
7540 7554
  background-image: url("../images/os-kubuntu.png");
7541 7555
}
7542
/* line 27, ../sass/_machines.scss */
7556
/* line 37, ../sass/_machines.scss */
7543 7557
.vms .items-list .img .os.fedora {
7544 7558
  background-image: url("../images/os-fedora.png");
7545 7559
}
7546 7560

  
7547
/* line 35, ../sass/_machines.scss */
7561
/* line 44, ../sass/_machines.scss */
7548 7562
.vm .top .img {
7549 7563
  display: inline-block;
7550 7564
  height: 112px;
7551 7565
}
7552
/* line 39, ../sass/_machines.scss */
7566
/* line 48, ../sass/_machines.scss */
7553 7567
.vm .top .img .snf-PC_fill {
7554 7568
  font-size: 112px;
7555 7569
  color: #75c046;
7556 7570
}
7557
/* line 45, ../sass/_machines.scss */
7571
/* line 53, ../sass/_machines.scss */
7558 7572
.vm .top .img.stopped .snf-PC_fill {
7559
  color: #e00e63;
7573
  color: #ff3366;
7560 7574
}
7561
/* line 51, ../sass/_machines.scss */
7575
/* line 58, ../sass/_machines.scss */
7562 7576
.vm .top .os {
7563 7577
  background: url("../images/os-unknown.png") no-repeat center center;
7564 7578
  width: 44px;
......
7571 7585
  left: 34px;
7572 7586
  top: 11px;
7573 7587
}
7574
/* line 58, ../sass/_machines.scss */
7588
/* line 65, ../sass/_machines.scss */
7575 7589
.vm .top .os.windows {
7576 7590
  background-image: url("../images/os-windows.png");
7577 7591
}
7578
/* line 59, ../sass/_machines.scss */
7592
/* line 66, ../sass/_machines.scss */
7579 7593
.vm .top .os.kubuntu {
7580 7594
  background-image: url("../images/os-kubuntu.png");
7581 7595
}
7582
/* line 60, ../sass/_machines.scss */
7596
/* line 67, ../sass/_machines.scss */
7583 7597
.vm .top .os.fedora {
7584 7598
  background-image: url("../images/os-fedora.png");
7585 7599
}
7586 7600

  
7587
/* line 68, ../sass/_machines.scss */
7601
/* line 75, ../sass/_machines.scss */
7588 7602
.create-vm .select-os li {
7589 7603
  width: 23%;
7590 7604
  padding: 20px;
......
7594 7608
  height: 200px;
7595 7609
  margin: 0 10px 10px 0;
7596 7610
}
7597
/* line 77, ../sass/_machines.scss */
7611
/* line 84, ../sass/_machines.scss */
7598 7612
.create-vm .select-os li:hover, .create-vm .select-os li.selected {
7599 7613
  background: #fff;
7600 7614
}
7601
/* line 79, ../sass/_machines.scss */
7615
/* line 86, ../sass/_machines.scss */
7602 7616
.create-vm .select-os li:hover h2, .create-vm .select-os li:hover p, .create-vm .select-os li:hover a, .create-vm .select-os li.selected h2, .create-vm .select-os li.selected p, .create-vm .select-os li.selected a {
7603 7617
  color: #3582ac;
7604 7618
}
7605
/* line 83, ../sass/_machines.scss */
7619
/* line 90, ../sass/_machines.scss */
7606 7620
.create-vm .select-os li a {
7607 7621
  color: #fff;
7608 7622
}
7609
/* line 86, ../sass/_machines.scss */
7623
/* line 93, ../sass/_machines.scss */
7610 7624
.create-vm .select-os li .os {
7611 7625
  background: url("../images/os-unknown.png") no-repeat center center;
7612 7626
  width: 30px;
......
7617 7631
  background-size: 100%;
7618 7632
  margin-bottom: 2em;
7619 7633
}
7620
/* line 90, ../sass/_machines.scss */
7634
/* line 97, ../sass/_machines.scss */
7621 7635
.create-vm .select-os li .os.windows {
7622 7636
  background-image: url("../images/os-windows.png");
7623 7637
}
7624
/* line 91, ../sass/_machines.scss */
7638
/* line 98, ../sass/_machines.scss */
7625 7639
.create-vm .select-os li .os.kubuntu {
7626 7640
  background-image: url("../images/os-kubuntu.png");
7627 7641
}
7628
/* line 92, ../sass/_machines.scss */
7642
/* line 99, ../sass/_machines.scss */
7629 7643
.create-vm .select-os li .os.fedora {
7630 7644
  background-image: url("../images/os-fedora.png");
7631 7645
}
7632
/* line 94, ../sass/_machines.scss */
7646
/* line 101, ../sass/_machines.scss */
7633 7647
.create-vm .select-os li h2 {
7634 7648
  font-size: 1em;
7635 7649
  font-weight: normal;
7636 7650
  color: #fff;
7637 7651
}
7638
/* line 99, ../sass/_machines.scss */
7652
/* line 106, ../sass/_machines.scss */
7639 7653
.create-vm .select-os li .details {
7640 7654
  font-weight: bold;
7641 7655
  font-size: 0.875em;
7642 7656
}
7643
/* line 106, ../sass/_machines.scss */
7657
/* line 113, ../sass/_machines.scss */
7644 7658
.create-vm .select-flavor dl {
7645 7659
  color: #fff;
7646 7660
  font-size: 1.25em;
7647 7661
  margin-bottom: 10px;
7648 7662
}
7649
/* line 110, ../sass/_machines.scss */
7663
/* line 117, ../sass/_machines.scss */
7650 7664
.create-vm .select-flavor dl dd {
7651 7665
  width: 23%;
7652 7666
  display: inline-block;
7653 7667
}
7654
/* line 114, ../sass/_machines.scss */
7668
/* line 121, ../sass/_machines.scss */
7655 7669
.create-vm .select-flavor dl dt {
7656 7670
  width: 70%;
7657 7671
  display: inline-block;
7658 7672
  font-weight: normal;
7659 7673
}
7660
/* line 118, ../sass/_machines.scss */
7674
/* line 125, ../sass/_machines.scss */
7661 7675
.create-vm .select-flavor dl dt span {
7662 7676
  min-width: 90px;
7663 7677
  margin: 0 10px;
7664 7678
}
7665
/* line 122, ../sass/_machines.scss */
7679
/* line 129, ../sass/_machines.scss */
7666 7680
.create-vm .select-flavor dl dt span:first-child {
7667 7681
  margin-left: 0;
7668 7682
}
7669 7683

  
7670
/* line 132, ../sass/_machines.scss */
7684
/* line 139, ../sass/_machines.scss */
7671 7685
#vm-connect .info {
7672 7686
  font-style: italic;
7673 7687
  font-size: 0.8125em;
7674 7688
  color: #9e9ea1;
7675 7689
}
7676
/* line 137, ../sass/_machines.scss */
7690
/* line 144, ../sass/_machines.scss */
7677 7691
#vm-connect .ssh {
7678 7692
  text-align: center;
7679 7693
}
7680
/* line 139, ../sass/_machines.scss */
7694
/* line 146, ../sass/_machines.scss */
7681 7695
#vm-connect .ssh span {
7682 7696
  padding: 10px 30px;
7683 7697
  background: #3582ac;
b/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/icons.css
1
/* line 14, ../sass/icons.scss */
1
/* line 7, ../sass/icons.scss */
2 2
.menu1 ul li {
3 3
  margin-right: 9px;
4 4
}
5
/* line 17, ../sass/icons.scss */
5
/* line 10, ../sass/icons.scss */
6 6
.menu1 ul li a .snf-font {
7 7
  font-size: 25px;
8 8
  color: #333333;
9 9
}
10
/* line 22, ../sass/icons.scss */
10
/* line 15, ../sass/icons.scss */
11 11
.menu1 ul li a:hover span {
12 12
  color: #3582ac;
13 13
}
14 14

  
15
/* line 37, ../sass/icons.scss */
15
/* line 30, ../sass/icons.scss */
16 16
.menu2 ul li {
17 17
  margin-right: 9px;
18 18
}
19
/* line 40, ../sass/icons.scss */
19
/* line 33, ../sass/icons.scss */
20 20
.menu2 ul li a .snf-font {
21 21
  font-size: 25px;
22 22
  font-weight: bold;
23 23
  color: #919194;
24 24
}
25
/* line 46, ../sass/icons.scss */
25
/* line 39, ../sass/icons.scss */
26 26
.menu2 ul li a:hover span {
27 27
  color: #3582ac;
28 28
}
29 29

  
30
/* line 61, ../sass/icons.scss */
30
/* line 54, ../sass/icons.scss */
31 31
.menu3 ul li a .snf-font {
32 32
  font-size: 25px;
33 33
  color: #919194;
34 34
}
35 35

  
36
/* line 75, ../sass/icons.scss */
36
/* line 68, ../sass/icons.scss */
37 37
body .items-list .img.running, body .vms .items-list .img.stopped {
38 38
  background: none;
39 39
  text-indent: 0;
......
41 41
  height: 60px;
42 42
}
43 43

  
44
/* line 82, ../sass/icons.scss */
44
/* line 75, ../sass/icons.scss */
45 45
body .img .snf-font {
46 46
  font-size: 60px;
47 47
}
48 48

  
49
/* line 86, ../sass/icons.scss */
49
/* line 79, ../sass/icons.scss */
50 50
body .networks .img .snf-font.bolding {
51 51
  font-weight: bold;
52 52
  font-size: 57px;
53 53
  top: 6px;
54 54
}
55 55

  
56
/* line 91, ../sass/icons.scss */
56
/* line 84, ../sass/icons.scss */
57 57
body .networks .img .snf-font {
58 58
  position: relative;
59 59
  top: 2px;
60 60
}
61 61

  
62
/* line 96, ../sass/icons.scss */
62
/* line 89, ../sass/icons.scss */
63 63
body .networks .running .snf-font {
64 64
  color: #79c79e;
65 65
}
66 66

  
67
/* line 100, ../sass/icons.scss */
67
/* line 93, ../sass/icons.scss */
68 68
body .running .snf-font {
69 69
  color: #75c046;
70 70
}
71 71

  
72
/* line 105, ../sass/icons.scss */
72
/* line 98, ../sass/icons.scss */
73 73
body .stopped .snf-font {
74
  color: #e00e63;
74
  color: #ff3366;
75 75
}
76 76

  
77
/* line 110, ../sass/icons.scss */
77
/* line 103, ../sass/icons.scss */
78 78
body .vms .items-list .img .os {
79 79
  left: 19px;
80 80
}
b/snf-cyclades-app/synnefo/ui/new_ui/ui/vm_list.html
74 74
				<ul class="items-list small-block-grid-2 large-block-grid-3 sortable">
75 75
					<li data-order="0">
76 76
						<div class="container">
77
							<div class="options">
78
								<div class="wrap">
79
									<a href="vm_details.html" class="details">details</a>
80
									<a href="#" data-reveal-id="vm-connect" class="connect">connect</a>
81
								</div>
82
							</div>
83 77
							<div class="img-wrap">
84 78
								<div class="img running">
85
									<span class="snf-PC_fill"></span>
86
									<span class="os windows">windows</span>
79
									<span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
80
									<span class="os" data-reveal-id="vm-connect">unknown</span>
87 81
								</div>
88 82
							</div>
89
							
90 83
							<p class="visible-info">
91 84
								<span><em>IPv4 83.212.97.127</em></span>
92
								<span class="title"><em>vm name 1 really large name</em></span>
85
								<span class="title">
86
									<a href="vm_details.html"><em>vm name 1 really large name</em></a>
87
								</span>
93 88
							</p>
94 89
							<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
95 90
						</div>
96 91
					</li>
97 92
					<li data-order="1">
98 93
						<div class="container">
99
							<div class="options">
100
								<div class="wrap">
101
									
102
									<a href="vm_details.html" class="details">details</a>
103
									<a href="#" data-reveal-id="vm-connect" class="connect">connect</a>
104
								</div>
105
							</div>
106 94
							<div class="img-wrap">
107 95
								<div class="img running">
108
									<span class="snf-PC_fill"></span>
109
									<span class="os windows">windows</span>
96
									<span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
97
									<span class="os fedora" data-reveal-id="vm-connect">fedora</span>
110 98
								</div>
111 99
							</div>
112
							
113 100
							<p class="visible-info">
114 101
								<span><em>IPv4 83.212.97.127</em></span>
115
								<span class="title"><em>vm name 2</em></span>
102
								<span class="title">
103
									<a href="vm_details.html"><em>vm name 1 really large name</em></a>
104
								</span>
116 105
							</p>
117 106
							<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
118 107
						</div>
119 108
					</li>
120 109
					<li data-order="2">
121 110
						<div class="container">
122
							<div class="options">
123
								<div class="wrap">
124
									
125
									<a href="vm_details.html" class="details">details</a>
126
									<a href="#" data-reveal-id="vm-connect" class="connect">connect</a>
127
								</div>
128
							</div>
129 111
							<div class="img-wrap">
130
								<div class="img stopped">
131
									<span class="snf-PC_fill"></span>
132
									<span class="os fedora">fedora</span>
112
								<div class="img running">
113
									<span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
114
									<span class="os" data-reveal-id="vm-connect">unknown</span>
133 115
								</div>
134 116
							</div>
135
							
136 117
							<p class="visible-info">
137 118
								<span><em>IPv4 83.212.97.127</em></span>
138
								<span class="title"><em>vm name 3</em></span>
119
								<span class="title">
120
									<a href="vm_details.html"><em>vm name 2</em></a>
121
								</span>
139 122
							</p>
140 123
							<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
141 124
						</div>
142 125
					</li>
143 126
					<li  data-order="3">
144 127
						<div class="container">
145
							<div class="options">
146
								<div class="wrap">
147
									
148
									<a href="vm_details.html" class="details">details</a>
149
									<a href="#" data-reveal-id="vm-connect" class="connect">connect</a>
150
								</div>
151
							</div>
152 128
							<div class="img-wrap">
153
								<div class="img running">
154
									<span class="snf-PC_fill"></span>
155
									<span class="os">unknown</span>
129
								<div class="img stopped">
130
									<span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
131
									<span class="os fedora" data-reveal-id="vm-connect">fedora</span>
156 132
								</div>
157 133
							</div>
158
							
159 134
							<p class="visible-info">
160 135
								<span><em>IPv4 83.212.97.127</em></span>
161
								<span class="title"><em>vm name 4</em></span>
136
								<span class="title">
137
									<a href="vm_details.html"><em>vm name 3</em></a>
138
								</span>
162 139
							</p>
163 140
							<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
164 141
						</div>
165 142
					</li>
166 143
					<li  data-order="4">
167 144
						<div class="container">
168
							<div class="options">
169
								<div class="wrap">
170
									
171
									<a href="vm_details.html" class="details">details</a>
172
									<a href="#" data-reveal-id="vm-connect" class="connect">connect</a>
173
								</div>
174
							</div>
175 145
							<div class="img-wrap">
176 146
								<div class="img running">
177
									<span class="snf-PC_fill"></span>
178
									<span class="os kubuntu">kubuntu</span>
147
									<span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
148
									<span class="os kubuntu" data-reveal-id="vm-connect">kubuntu</span>
179 149
								</div>
180 150
							</div>
181
							
182 151
							<p class="visible-info">
183 152
								<span><em>IPv4 83.212.97.127</em></span>
184
								<span class="title"><em>vm name 5</em></span>
153
								<span class="title">
154
									<a href="vm_details.html"><em>vm name 4</em></a>
155
								</span>
185 156
							</p>
186 157
							<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
187 158
						</div>

Also available in: Unified diff