Revision 3fdc0d03

b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/common.js
67 67

  
68 68
ui.entitiesActionsInit = function(){
69 69

  
70
    $('.entities li.test1 .container .img').mouseenter(function(e) {
71
        $(this).closest('.container').stop(true, true).hide();
72
        $(this).closest('.container').siblings('.overlap_options').stop(true, true).fadeIn(500);//stop().slideToggle(600);
70
    $('.entities li .img').mouseenter(function(e) {
71
        if ($(this).closest('.container').siblings('.more').length>0) {
72
            $(this).closest('.container').stop(true, true).hide();
73
            $(this).closest('.container').siblings('.more').stop(true, true).fadeIn(500);//stop().slideToggle(600);
74
        }
73 75
    });
74
    $('.entities li.test1 .overlap_options').mouseleave(function(e) {
76
    $('.entities li .more').mouseleave(function(e) {
75 77
        var self = this;
76 78
        $(this).stop(true, true).fadeOut(200, function() {
77 79
            $(this).siblings('.container').stop(true,true).fadeIn('fast');
78 80
        });
79 81
    });
80

  
81
    $('.entities li.test2 .container .img-wrap').mouseenter(function(e) {
82
        $(this).closest('.container').hide();
83
        $(this).closest('.container').siblings('.overlap_options').stop().slideToggle(600);
84
    });
85
    $('.entities li.test2 .overlap_options').mouseleave(function(e) {
86
        var self = this;
87
        $(this).stop().slideToggle(600, function(e) {
88
             $(self).siblings('.container').fadeIn();
89
        });
90
    });
91 82
}
92 83

  
93 84
/*
b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_common.scss
256 256

  
257 257
.main {
258 258
	padding:0 10px;
259
	overflow:hidden;
260 259
}
261 260

  
262 261
/* Header ----------------------------------------------- */
......
339 338
/* Actions Bar ----------------------------------------------- */
340 339

  
341 340
.actions-bar {
342
	border-bottom: 1px solid $primary-color;
343 341
	position:fixed;
344 342
	left:0;
345 343
	top:$header-height;
b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_items-list.scss
6 6
		@include block-grid(4, 0, true);
7 7
	};
8 8
	background:url(../images/dashed_atom.png) repeat-y left center;
9
	li {
9
	&>li {
10 10
		text-align:center;
11 11
		padding:20px;
12 12
		list-style:none;
13 13
		background:url(../images/dashed-bg-corner.png) no-repeat right bottom;
14
		min-height: 215px;
14 15
		.add-new {
15 16
			a {
16 17
				margin:0 20px;
......
40 41
			margin: 0 20px;
41 42
			padding:25px 0;
42 43
			position: relative;
43
		//	&:hover {
44
		//		@extend .set-border;
45
		//		.check {
46
		//			@extend .active;
47
		//		}
48
		//	}
49 44
		}
50
		.overlap_options {
45
		.more {
46
			$col-height: 200px;
51 47
			display: none;
52 48
			height:180px;
53
			background-color: lighten($primary-color,35%);
54
			margin: 0 20px;
55
			div {
49
			background: #fff;
50
			margin: -30px;
51
			height: 100%;
52
			z-index:101;
53
			position: relative;
54
			@include clearfix;
55
			-moz-box-shadow: -5px 5px 5px #ccc;
56
			-webkit-box-shadow: -5px 5px 5px #ccc;
57
			box-shadow: -5px 5px 5px #ccc;
58
			.col {
56 59
				width: 50%;
57 60
				float: left;
58
				font-size: 14px;
59
				height: 70%;
60
				padding-left: 20px;
61
				font-size: emCalc(14px);
62
				height: $col-height;
61 63
				ul {
62 64
					margin: 0;
65
					padding: 0;
66
					list-style: none outside none;
63 67
					li {
64 68
						padding: 0;
65 69
						text-align: left;
66
						line-height: 1.7em;
67 70
						a {
68
							color: #6497ce;
71
							color: $body-font-color;
72
							display: block;
73
							width:100%;
74
							&:hover {
75
								background-color: $secondary-color;
76
								color:  #fff;
77
							}
69 78
						}
70 79
					}
71 80
				}
72
				&.main_actions_list {
73
					border-right: 1px solid white;
81
				&.lt {
74 82
					ul {
75
						li:first-child {
76
							padding-top: 31px;
77
						}
78
						li:nth-child(2) {
79
							padding-top: 23px;
80
						}
83
						padding-top:10px;
81 84
						li {
82 85
							a {
83
								&:hover {
84
									background-color: white;
85
									padding: 8px 12px;
86
									position: relative;
87
									left: -12px;
88
									color:  #3e9bff;
89
									// font-weight: bold;
90
								}
86
								padding: 5px 5px 5px 30px;
91 87
							}
92 88
						}
93 89
					}
94 90
				}
95
				&.actions_list {
91
				&.rt {
96 92
					ul {
97
						padding: 8px 0;
98 93
						li {
94
							height: $col-height/2;
99 95
							a {
100
								&:hover {
101
									position: relative;
102
									left: -9px;
103
									padding: 2px 9px;
104
									background-color: white;
105
									color: #3e9bff;
106
									// font-weight: bold;
107
								}
96
								height: 100%;
97
								padding: 5px 5px 5px 30px;
98
								line-height: $col-height/2;
108 99
							}
109 100
						}
110 101
					}
111 102
				}
112
				&.vm-name {
113
					width: 100%;
114
					border-top: 1px solid white;
115
					font-size: 13px;
116
					height:30%;
117
					color: #6497ce;
118
					padding: 4px;
119
					line-height: 1.2em;
120
				}
103
			}
104
			.vm-name {
105
				background:url(../images/dashed_atom-x.png) repeat-x center top;
106
				padding: 10px;
107
				font-size: emCalc(10px);
121 108
			}
122 109
		}
123 110
		.check {
b/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/app.css
7026 7026
/* line 257, ../sass/_common.scss */
7027 7027
.main {
7028 7028
  padding: 0 10px;
7029
  overflow: hidden;
7030 7029
}
7031 7030

  
7032 7031
/* Header ----------------------------------------------- */
7033
/* line 264, ../sass/_common.scss */
7032
/* line 263, ../sass/_common.scss */
7034 7033
.header {
7035 7034
  position: fixed;
7036 7035
  top: 0;
......
7043 7042
  background: white;
7044 7043
  z-index: 100;
7045 7044
}
7046
/* line 275, ../sass/_common.scss */
7045
/* line 274, ../sass/_common.scss */
7047 7046
.header .icons-nav {
7048 7047
  position: absolute;
7049 7048
  left: 10px;
......
7051 7050
  line-height: 80px;
7052 7051
  top: 0;
7053 7052
}
7054
/* line 281, ../sass/_common.scss */
7053
/* line 280, ../sass/_common.scss */
7055 7054
.header .icons-nav li {
7056 7055
  line-height: 80px;
7057 7056
}
7058
/* line 285, ../sass/_common.scss */
7057
/* line 284, ../sass/_common.scss */
7059 7058
.header .logo {
7060 7059
  text-align: center;
7061 7060
}
7062
/* line 287, ../sass/_common.scss */
7061
/* line 286, ../sass/_common.scss */
7063 7062
.header .logo a {
7064 7063
  position: relative;
7065 7064
  top: -5px;
7066 7065
}
7067
/* line 290, ../sass/_common.scss */
7066
/* line 289, ../sass/_common.scss */
7068 7067
.header .logo a:focus {
7069 7068
  border: 1px solid #30c79e;
7070 7069
  padding: 10px;
7071 7070
}
7072
/* line 295, ../sass/_common.scss */
7071
/* line 294, ../sass/_common.scss */
7073 7072
.header .logo img {
7074 7073
  max-height: 30px;
7075 7074
}
7076
/* line 298, ../sass/_common.scss */
7075
/* line 297, ../sass/_common.scss */
7077 7076
.header .logo h2 {
7078 7077
  display: none;
7079 7078
  margin: 0;
......
7081 7080
  color: #919194;
7082 7081
  font-weight: normal;
7083 7082
}
7084
/* line 306, ../sass/_common.scss */
7083
/* line 305, ../sass/_common.scss */
7085 7084
.header .login {
7086 7085
  position: absolute;
7087 7086
  top: 25px;
7088 7087
  right: 15px;
7089 7088
}
7090
/* line 310, ../sass/_common.scss */
7089
/* line 309, ../sass/_common.scss */
7091 7090
.header .login .wrap {
7092 7091
  border: 1px solid #485057;
7093 7092
  background: white;
......
7096 7095
  padding: 10px 20px;
7097 7096
  line-height: 100%;
7098 7097
}
7099
/* line 317, ../sass/_common.scss */
7098
/* line 316, ../sass/_common.scss */
7100 7099
.header .login .wrap ul {
7101 7100
  display: none;
7102 7101
  padding: 0;
7103 7102
  margin: 0;
7104 7103
  list-style: none outside none;
7105 7104
}
7106
/* line 322, ../sass/_common.scss */
7105
/* line 321, ../sass/_common.scss */
7107 7106
.header .login .wrap ul li {
7108 7107
  list-style: none outside none;
7109 7108
  padding: 0;
7110 7109
  padding-top: 10px;
7111 7110
}
7112
/* line 330, ../sass/_common.scss */
7111
/* line 329, ../sass/_common.scss */
7113 7112
.header .login .wrap:hover ul {
7114 7113
  display: block;
7115 7114
}
7116 7115

  
7117 7116
/* Actions Bar ----------------------------------------------- */
7118
/* line 341, ../sass/_common.scss */
7117
/* line 340, ../sass/_common.scss */
7119 7118
.actions-bar {
7120
  border-bottom: 1px solid #919194;
7121 7119
  position: fixed;
7122 7120
  left: 0;
7123 7121
  top: 80px;
......
7129 7127
  color: #485057;
7130 7128
  background-color: #ebebec;
7131 7129
}
7132
/* line 353, ../sass/_common.scss */
7130
/* line 351, ../sass/_common.scss */
7133 7131
.actions-bar a {
7134 7132
  color: #485057;
7135 7133
}
7136
/* line 356, ../sass/_common.scss */
7134
/* line 354, ../sass/_common.scss */
7137 7135
.actions-bar h2 {
7138 7136
  float: left;
7139 7137
  margin-left: 15px;
......
7142 7140
  line-height: 30px;
7143 7141
  font-weight: normal;
7144 7142
}
7145
/* line 364, ../sass/_common.scss */
7143
/* line 362, ../sass/_common.scss */
7146 7144
.actions-bar .filter-menu {
7147 7145
  float: right;
7148 7146
  position: relative;
7149 7147
}
7150
/* line 367, ../sass/_common.scss */
7148
/* line 365, ../sass/_common.scss */
7151 7149
.actions-bar .filter-menu .filter {
7152 7150
  padding: 0 10px;
7153 7151
  font-size: 0.75em;
7154 7152
  position: relative;
7155 7153
  top: -2px;
7156 7154
}
7157
/* line 373, ../sass/_common.scss */
7155
/* line 371, ../sass/_common.scss */
7158 7156
.actions-bar .filter-menu .options {
7159 7157
  display: none;
7160 7158
  position: absolute;
......
7166 7164
  text-align: left;
7167 7165
  margin: 0;
7168 7166
}
7169
/* line 385, ../sass/_common.scss */
7167
/* line 383, ../sass/_common.scss */
7170 7168
.actions-bar .filter-menu.current .options {
7171 7169
  background-color: #ababad;
7172 7170
  display: inline-block;
7173 7171
}
7174
/* line 388, ../sass/_common.scss */
7172
/* line 386, ../sass/_common.scss */
7175 7173
.actions-bar .filter-menu.current .options a {
7176 7174
  color: white;
7177 7175
}
7178
/* line 397, ../sass/_common.scss */
7176
/* line 395, ../sass/_common.scss */
7179 7177
.actions-bar .row {
7180 7178
  position: relative;
7181 7179
  height: 30px;
7182 7180
}
7183
/* line 402, ../sass/_common.scss */
7181
/* line 400, ../sass/_common.scss */
7184 7182
.actions-bar .hd-search {
7185 7183
  width: 24px;
7186 7184
  overflow: hidden;
......
7192 7190
  transition: width 0.3s;
7193 7191
  -webkit-backface-visibility: hidden;
7194 7192
}
7195
/* line 413, ../sass/_common.scss */
7193
/* line 411, ../sass/_common.scss */
7196 7194
.actions-bar .hd-search .hd-icon-search {
7197 7195
  color: #919194;
7198 7196
  display: block;
......
7201 7199
  line-height: 30px;
7202 7200
  float: left;
7203 7201
}
7204
/* line 420, ../sass/_common.scss */
7202
/* line 418, ../sass/_common.scss */
7205 7203
.actions-bar .hd-search .hd-icon-search:hover {
7206 7204
  cursor: pointer;
7207 7205
}
7208
/* line 424, ../sass/_common.scss */
7206
/* line 422, ../sass/_common.scss */
7209 7207
.actions-bar .hd-search .hd-search-input {
7210 7208
  border: transparent;
7211 7209
  background-color: white;
......
7236 7234
.actions-bar .hd-search .hd-search-input::-webkit-input-placeholder {
7237 7235
  color: #485057;
7238 7236
}
7239
/* line 441, ../sass/_common.scss */
7237
/* line 439, ../sass/_common.scss */
7240 7238
.actions-bar .hd-search.hd-open {
7241 7239
  width: 190px;
7242 7240
}
7243
/* line 446, ../sass/_common.scss */
7241
/* line 444, ../sass/_common.scss */
7244 7242
.actions-bar .sb-search {
7245 7243
  float: right;
7246 7244
  margin-top: 3px;
7247 7245
  min-width: 24px;
7248 7246
  height: 24px;
7249 7247
}
7250
/* line 452, ../sass/_common.scss */
7248
/* line 450, ../sass/_common.scss */
7251 7249
.actions-bar .sb-search .sb-icon-search {
7252 7250
  height: 24px;
7253 7251
  width: 24px;
7254 7252
  color: #919194;
7255 7253
}
7256
/* line 457, ../sass/_common.scss */
7254
/* line 455, ../sass/_common.scss */
7257 7255
.actions-bar .sb-search form {
7258 7256
  display: inline-block;
7259 7257
  margin: 0;
7260 7258
}
7261
/* line 460, ../sass/_common.scss */
7259
/* line 458, ../sass/_common.scss */
7262 7260
.actions-bar .sb-search form .input-wrap {
7263 7261
  width: 180px;
7264 7262
  overflow: hidden;
7265 7263
}
7266
/* line 464, ../sass/_common.scss */
7264
/* line 462, ../sass/_common.scss */
7267 7265
.actions-bar .sb-search form input {
7268 7266
  border: transparent;
7269 7267
  background-color: white;
......
7293 7291
.actions-bar .sb-search form input::-webkit-input-placeholder {
7294 7292
  color: #485057;
7295 7293
}
7296
/* line 481, ../sass/_common.scss */
7294
/* line 479, ../sass/_common.scss */
7297 7295
.actions-bar .sb-search.sb-search-open {
7298 7296
  width: 220px;
7299 7297
}
7300
/* line 486, ../sass/_common.scss */
7298
/* line 484, ../sass/_common.scss */
7301 7299
.actions-bar .view-type {
7302 7300
  float: right;
7303 7301
  margin-right: 15px;
7304 7302
}
7305
/* line 490, ../sass/_common.scss */
7303
/* line 488, ../sass/_common.scss */
7306 7304
.actions-bar .view-type .current,
7307 7305
.actions-bar .view-type a:hover {
7308 7306
  color: #30c79e;
7309 7307
}
7310
/* line 493, ../sass/_common.scss */
7308
/* line 491, ../sass/_common.scss */
7311 7309
.actions-bar .view-type .snf-list {
7312 7310
  margin-right: 6px;
7313 7311
  font-size: 17px;
7314 7312
}
7315
/* line 497, ../sass/_common.scss */
7313
/* line 495, ../sass/_common.scss */
7316 7314
.actions-bar .view-type .snf-layout {
7317 7315
  font-size: 1.1em;
7318 7316
}
7319 7317

  
7320
/* line 503, ../sass/_common.scss */
7318
/* line 501, ../sass/_common.scss */
7321 7319
.new-btn {
7322 7320
  position: absolute;
7323 7321
  left: 15px;
7324 7322
  bottom: 0;
7325 7323
  height: 30px;
7326 7324
}
7327
/* line 510, ../sass/_common.scss */
7325
/* line 508, ../sass/_common.scss */
7328 7326
.new-btn a span {
7329 7327
  font-size: 1.25em;
7330 7328
}
7331 7329

  
7332 7330
/* Icons Navigation ----------------------------------------------- */
7333
/* line 518, ../sass/_common.scss */
7331
/* line 516, ../sass/_common.scss */
7334 7332
.icons-nav {
7335 7333
  margin: 0;
7336 7334
  padding: 0;
7337 7335
}
7338
/* line 520, ../sass/_common.scss */
7336
/* line 518, ../sass/_common.scss */
7339 7337
.icons-nav li {
7340 7338
  display: inline-block;
7341 7339
  margin: 0 5px;
......
7346 7344
  text-align: center;
7347 7345
  overflow: hidden;
7348 7346
}
7349
/* line 529, ../sass/_common.scss */
7347
/* line 527, ../sass/_common.scss */
7350 7348
.icons-nav li a {
7351 7349
  color: #1a1a1a;
7352 7350
}
7353
/* line 531, ../sass/_common.scss */
7351
/* line 529, ../sass/_common.scss */
7354 7352
.icons-nav li a:hover, .icons-nav li a.current {
7355 7353
  color: #30c79e;
7356 7354
}
7357 7355

  
7358 7356
/* Top info  ----------------------------------------------- */
7359
/* line 544, ../sass/_common.scss */
7357
/* line 542, ../sass/_common.scss */
7360 7358
.top-info {
7361 7359
  padding: 50px 100px;
7362 7360
  position: relative;
7363 7361
  z-index: 10;
7364 7362
  display: none;
7365 7363
}
7366
/* line 549, ../sass/_common.scss */
7364
/* line 547, ../sass/_common.scss */
7367 7365
.top-info .close {
7368 7366
  position: absolute;
7369 7367
  right: 15px;
......
7376 7374
  overflow: hidden;
7377 7375
}
7378 7376

  
7379
/* line 558, ../sass/_common.scss */
7377
/* line 556, ../sass/_common.scss */
7380 7378
.info.error {
7381 7379
  background: #ff5c58;
7382 7380
  color: #fff;
7383 7381
}
7384 7382

  
7385
/* line 564, ../sass/_common.scss */
7383
/* line 562, ../sass/_common.scss */
7386 7384
.info.alert {
7387 7385
  background: #30c79e;
7388 7386
  color: #fff;
7389 7387
}
7390 7388

  
7391
/* line 569, ../sass/_common.scss */
7389
/* line 567, ../sass/_common.scss */
7392 7390
.info.warning {
7393 7391
  background: #919194;
7394 7392
  color: #fff;
7395 7393
}
7396 7394

  
7397
/* line 574, ../sass/_common.scss */
7395
/* line 572, ../sass/_common.scss */
7398 7396
.info.success {
7399 7397
  background: #00a551;
7400 7398
  color: #fff;
7401 7399
}
7402 7400

  
7403
/* line 579, ../sass/_common.scss */
7401
/* line 577, ../sass/_common.scss */
7404 7402
.border-bottom-style1 {
7405 7403
  padding-bottom: 20px;
7406 7404
  margin-bottom: 20px;
......
7408 7406
}
7409 7407

  
7410 7408
/* Progress Bar ----------------------------------------------- */
7411
/* line 588, ../sass/_common.scss */
7409
/* line 586, ../sass/_common.scss */
7412 7410
.progress-bar {
7413 7411
  position: fixed;
7414 7412
  bottom: 0;
......
7419 7417
  padding: 20px 0 20px 310px;
7420 7418
  color: #919194;
7421 7419
}
7422
/* line 597, ../sass/_common.scss */
7420
/* line 595, ../sass/_common.scss */
7423 7421
.progress-bar span.counter {
7424 7422
  display: inline-block;
7425 7423
  margin-right: 20px;
7426 7424
  float: left;
7427 7425
}
7428
/* line 602, ../sass/_common.scss */
7426
/* line 600, ../sass/_common.scss */
7429 7427
.progress-bar div.progress-wrap {
7430 7428
  display: inline-block;
7431 7429
  float: left;
7432 7430
  width: 40%;
7433 7431
  margin-right: 60px;
7434 7432
}
7435
/* line 607, ../sass/_common.scss */
7433
/* line 605, ../sass/_common.scss */
7436 7434
.progress-bar div.progress-wrap .progress {
7437 7435
  position: relative;
7438 7436
  top: 2px;
7439 7437
}
7440
/* line 612, ../sass/_common.scss */
7438
/* line 610, ../sass/_common.scss */
7441 7439
.progress-bar span.more {
7442 7440
  display: inline-block;
7443 7441
}
7444 7442

  
7445 7443
/* Responive ------------------------------------------------ */
7446 7444
@media only screen and (max-width: 768px) {
7447
  /* line 623, ../sass/_common.scss */
7445
  /* line 621, ../sass/_common.scss */
7448 7446
  body {
7449 7447
    padding-top: 0;
7450 7448
  }
7451 7449

  
7452
  /* line 626, ../sass/_common.scss */
7450
  /* line 624, ../sass/_common.scss */
7453 7451
  .header, .actions-bar {
7454 7452
    position: static;
7455 7453
    z-index: auto;
7456 7454
  }
7457 7455

  
7458
  /* line 630, ../sass/_common.scss */
7456
  /* line 628, ../sass/_common.scss */
7459 7457
  .actions-bar {
7460 7458
    top: 160px;
7461 7459
  }
7462 7460

  
7463
  /* line 633, ../sass/_common.scss */
7461
  /* line 631, ../sass/_common.scss */
7464 7462
  .header {
7465 7463
    height: 120px;
7466 7464
    line-height: 50px;
7467 7465
  }
7468
  /* line 636, ../sass/_common.scss */
7466
  /* line 634, ../sass/_common.scss */
7469 7467
  .header .icons-nav {
7470 7468
    position: static;
7471 7469
  }
......
7547 7545
  }
7548 7546
}
7549 7547
/* line 9, ../sass/_items-list.scss */
7550
.items-list li {
7548
.items-list > li {
7551 7549
  text-align: center;
7552 7550
  padding: 20px;
7553 7551
  list-style: none;
7554 7552
  background: url(../images/dashed-bg-corner.png) no-repeat right bottom;
7553
  min-height: 215px;
7555 7554
}
7556
/* line 15, ../sass/_items-list.scss */
7557
.items-list li .add-new a {
7555
/* line 16, ../sass/_items-list.scss */
7556
.items-list > li .add-new a {
7558 7557
  margin: 0 20px;
7559 7558
  display: block;
7560 7559
  font-weight: bold;
7561 7560
  height: 100%;
7562 7561
  width: 100%;
7563 7562
}
7564
/* line 21, ../sass/_items-list.scss */
7565
.items-list li .add-new a:hover {
7563
/* line 22, ../sass/_items-list.scss */
7564
.items-list > li .add-new a:hover {
7566 7565
  border-color: #30c79e;
7567 7566
}
7568
/* line 26, ../sass/_items-list.scss */
7569
.items-list li .img-wrap {
7567
/* line 27, ../sass/_items-list.scss */
7568
.items-list > li .img-wrap {
7570 7569
  height: 78px;
7571 7570
  margin: 0 60px;
7572 7571
}
7573
/* line 30, ../sass/_items-list.scss */
7574
.items-list li .img {
7572
/* line 31, ../sass/_items-list.scss */
7573
.items-list > li .img {
7575 7574
  margin-bottom: 20px;
7576 7575
  position: relative;
7577 7576
  height: 58px;
7578 7577
  display: inline-block;
7579 7578
}
7580
/* line 36, ../sass/_items-list.scss */
7581
.items-list li .container {
7579
/* line 37, ../sass/_items-list.scss */
7580
.items-list > li .container {
7582 7581
  border: 1px solid transparent;
7583 7582
  margin: 0 20px;
7584 7583
  padding: 25px 0;
7585 7584
  position: relative;
7586 7585
}
7587
/* line 37, ../sass/_items-list.scss */
7588
.items-list li .container.set-bg {
7586
/* line 38, ../sass/_items-list.scss */
7587
.items-list > li .container.set-bg {
7589 7588
  background: #f3f3f4;
7590 7589
}
7591
/* line 38, ../sass/_items-list.scss */
7592
.items-list li .container.set-border {
7590
/* line 39, ../sass/_items-list.scss */
7591
.items-list > li .container.set-border {
7593 7592
  border-color: #30c79e;
7594 7593
}
7595
/* line 50, ../sass/_items-list.scss */
7596
.items-list li .overlap_options {
7594
/* line 45, ../sass/_items-list.scss */
7595
.items-list > li .more {
7597 7596
  display: none;
7598 7597
  height: 180px;
7599
  background-color: #ebebec;
7600
  margin: 0 20px;
7598
  background: #fff;
7599
  margin: -30px;
7600
  height: 100%;
7601
  z-index: 101;
7602
  position: relative;
7603
  *zoom: 1;
7604
  -moz-box-shadow: -5px 5px 5px #ccc;
7605
  -webkit-box-shadow: -5px 5px 5px #ccc;
7606
  box-shadow: -5px 5px 5px #ccc;
7607
}
7608
/* line 121, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_global.scss */
7609
.items-list > li .more:before, .items-list > li .more:after {
7610
  content: " ";
7611
  display: table;
7612
}
7613
/* line 122, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_global.scss */
7614
.items-list > li .more:after {
7615
  clear: both;
7601 7616
}
7602
/* line 55, ../sass/_items-list.scss */
7603
.items-list li .overlap_options div {
7617
/* line 58, ../sass/_items-list.scss */
7618
.items-list > li .more .col {
7604 7619
  width: 50%;
7605 7620
  float: left;
7606
  font-size: 14px;
7607
  height: 70%;
7608
  padding-left: 20px;
7621
  font-size: 0.875em;
7622
  height: 200px;
7609 7623
}
7610
/* line 61, ../sass/_items-list.scss */
7611
.items-list li .overlap_options div ul {
7624
/* line 63, ../sass/_items-list.scss */
7625
.items-list > li .more .col ul {
7612 7626
  margin: 0;
7627
  padding: 0;
7628
  list-style: none outside none;
7613 7629
}
7614
/* line 63, ../sass/_items-list.scss */
7615
.items-list li .overlap_options div ul li {
7630
/* line 67, ../sass/_items-list.scss */
7631
.items-list > li .more .col ul li {
7616 7632
  padding: 0;
7617 7633
  text-align: left;
7618
  line-height: 1.7em;
7619 7634
}
7620
/* line 67, ../sass/_items-list.scss */
7621
.items-list li .overlap_options div ul li a {
7622
  color: #6497ce;
7635
/* line 70, ../sass/_items-list.scss */
7636
.items-list > li .more .col ul li a {
7637
  color: #222222;
7638
  display: block;
7639
  width: 100%;
7623 7640
}
7624
/* line 72, ../sass/_items-list.scss */
7625
.items-list li .overlap_options div.main_actions_list {
7626
  border-right: 1px solid white;
7641
/* line 74, ../sass/_items-list.scss */
7642
.items-list > li .more .col ul li a:hover {
7643
  background-color: #30c79e;
7644
  color: #fff;
7627 7645
}
7628
/* line 75, ../sass/_items-list.scss */
7629
.items-list li .overlap_options div.main_actions_list ul li:first-child {
7630
  padding-top: 31px;
7646
/* line 82, ../sass/_items-list.scss */
7647
.items-list > li .more .col.lt ul {
7648
  padding-top: 10px;
7631 7649
}
7632
/* line 78, ../sass/_items-list.scss */
7633
.items-list li .overlap_options div.main_actions_list ul li:nth-child(2) {
7634
  padding-top: 23px;
7650
/* line 85, ../sass/_items-list.scss */
7651
.items-list > li .more .col.lt ul li a {
7652
  padding: 5px 5px 5px 30px;
7635 7653
}
7636
/* line 83, ../sass/_items-list.scss */
7637
.items-list li .overlap_options div.main_actions_list ul li a:hover {
7638
  background-color: white;
7639
  padding: 8px 12px;
7640
  position: relative;
7641
  left: -12px;
7642
  color: #3e9bff;
7654
/* line 93, ../sass/_items-list.scss */
7655
.items-list > li .more .col.rt ul li {
7656
  height: 100px;
7643 7657
}
7644
/* line 96, ../sass/_items-list.scss */
7645
.items-list li .overlap_options div.actions_list ul {
7646
  padding: 8px 0;
7658
/* line 95, ../sass/_items-list.scss */
7659
.items-list > li .more .col.rt ul li a {
7660
  height: 100%;
7661
  padding: 5px 5px 5px 30px;
7662
  line-height: 100px;
7647 7663
}
7648
/* line 100, ../sass/_items-list.scss */
7649
.items-list li .overlap_options div.actions_list ul li a:hover {
7650
  position: relative;
7651
  left: -9px;
7652
  padding: 2px 9px;
7653
  background-color: white;
7654
  color: #3e9bff;
7664
/* line 104, ../sass/_items-list.scss */
7665
.items-list > li .more .vm-name {
7666
  background: url(../images/dashed_atom-x.png) repeat-x center top;
7667
  padding: 10px;
7668
  font-size: 0.625em;
7655 7669
}
7656
/* line 112, ../sass/_items-list.scss */
7657
.items-list li .overlap_options div.vm-name {
7658
  width: 100%;
7659
  border-top: 1px solid white;
7660
  font-size: 13px;
7661
  height: 30%;
7662
  color: #6497ce;
7663
  padding: 4px;
7664
  line-height: 1.2em;
7665
}
7666
/* line 123, ../sass/_items-list.scss */
7667
.items-list li .check {
7670
/* line 110, ../sass/_items-list.scss */
7671
.items-list > li .check {
7668 7672
  position: absolute;
7669 7673
  right: 10px;
7670 7674
  top: 5px;
......
7674 7678
  cursor: pointer;
7675 7679
  z-index: 10;
7676 7680
}
7677
/* line 133, ../sass/_items-list.scss */
7678
.items-list li .check span {
7681
/* line 120, ../sass/_items-list.scss */
7682
.items-list > li .check span {
7679 7683
  position: relative;
7680 7684
  z-index: 10;
7681 7685
}
7682
/* line 134, ../sass/_items-list.scss */
7683
.items-list li .check.active {
7686
/* line 121, ../sass/_items-list.scss */
7687
.items-list > li .check.active {
7684 7688
  color: #30c79e;
7685 7689
}
7686
/* line 138, ../sass/_items-list.scss */
7687
.items-list li .visible-info {
7690
/* line 125, ../sass/_items-list.scss */
7691
.items-list > li .visible-info {
7688 7692
  margin: 0 25px;
7689 7693
  position: relative;
7690 7694
  color: #919194;
7691 7695
  overflow: hidden;
7692 7696
}
7693
/* line 143, ../sass/_items-list.scss */
7694
.items-list li .visible-info span {
7697
/* line 130, ../sass/_items-list.scss */
7698
.items-list > li .visible-info span {
7695 7699
  display: block;
7696 7700
  position: relative;
7697 7701
}
7698
/* line 144, ../sass/_items-list.scss */
7699
.items-list li .visible-info span.title {
7702
/* line 131, ../sass/_items-list.scss */
7703
.items-list > li .visible-info span.title {
7700 7704
  white-space: nowrap;
7701 7705
}
7702
/* line 149, ../sass/_items-list.scss */
7703
.items-list li .visible-info span em {
7706
/* line 136, ../sass/_items-list.scss */
7707
.items-list > li .visible-info span em {
7704 7708
  font-style: normal;
7705 7709
  position: relative;
7706 7710
}
7707
/* line 157, ../sass/_items-list.scss */
7711
/* line 144, ../sass/_items-list.scss */
7708 7712
.items-list.list-view li {
7709 7713
  width: 100%;
7710 7714
}
7711 7715

  
7712 7716
@media only screen and (min-width: 68.75em) {
7713
  /* line 167, ../sass/_items-list.scss */
7717
  /* line 154, ../sass/_items-list.scss */
7714 7718
  .entities .items-list.list-view li {
7715 7719
    width: 100%;
7716 7720
  }
b/snf-cyclades-app/synnefo/ui/new_ui/ui/vm_list.html
751 751
					<li data-order="0">
752 752
						<div class="add-new"><a href="vm_create_a.html" data-overlay-id="#vm-wizard">NEW<br>MACHINE</a></div>
753 753
					</li>
754
					<li class="test1" data-order="1">
755
						<div class="overlap_options">
756
							<div class="actions_list">
757
								<ul>
758
									<li><a href="">Start</a></li>
759
									<li><a href="">Shutdown</a></li>
760
									<li><a href="">Reboot</a></li>
761
									<li><a href="">Destroy</a></li>
762
									<li><a href="">Option i</a></li>
763
								</ul>
764
							</div>
765
							<div class="main_actions_list">
766
								<ul>
767
									<li><a href="">Connect</a></li>
768
									<li><a href="">Details</a></li>
769
								</ul>
754
					<li data-order="1">
755
						<div class="more">
756
							<div class="clearfix">
757
								<div class="col lt">
758
									<ul>
759
										<li><a href="">Start</a></li>
760
										<li><a href="">Shutdown</a></li>
761
										<li><a href="">Reboot</a></li>
762
										<li><a href="">Destroy</a></li>
763
										<li><a href="">Option i</a></li>
764
									</ul>
765
								</div>
766
								<div class="col rt">
767
									<ul>
768
										<li><a href="">Connect</a></li>
769
										<li><a href="">Details</a></li>
770
									</ul>
771
								</div>
770 772
							</div>
771
							<div class="vm-name">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo</div>
773
							<div class="vm-name">vm name 1 really large name</div>
772 774
						</div>
773 775
						<div class="container">
774 776
							<div class="img-wrap">
......
788 790
							</div>
789 791
						</div>
790 792
					</li>
791
					<li class="test2" data-order="2">
792
						<div class="overlap_options">
793
							<div class="actions_list">
794
								<ul>
795
									<li><a href="">Start</a></li>
796
									<li><a href="">Shutdown</a></li>
797
									<li><a href="">Reboot</a></li>
798
									<li><a href="">Destroy</a></li>
799
									<li><a href="">Option i</a></li>
800
								</ul>
801
							</div>
802
							<div class="main_actions_list">
803
								<ul>
804
									<li><a href="">Connect</a></li>
805
									<li><a href="">Details</a></li>
806
								</ul>
793
					<li data-order="2">
794
						<div class="more">
795
							<div class="clearfix">
796
								<div class="col lt">
797
									<ul>
798
										<li><a href="">Start</a></li>
799
										<li><a href="">Shutdown</a></li>
800
										<li><a href="">Reboot</a></li>
801
										<li><a href="">Destroy</a></li>
802
										<li><a href="">Option i</a></li>
803
									</ul>
804
								</div>
805
								<div class="col rt">
806
									<ul>
807
										<li><a href="">Connect</a></li>
808
										<li><a href="">Details</a></li>
809
									</ul>
810
								</div>
807 811
							</div>
808
							<div class="vm-name">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo</div>
812
							<div class="vm-name">vm name 1 really large name</div>
809 813
						</div>
810 814
						<div class="container">
811 815
							<div class="img-wrap">
......
825 829
						</div>
826 830
					</li>
827 831
					<li  data-order="3">
832
						<div class="more">
833
							<div class="clearfix">
834
								<div class="col lt">
835
									<ul>
836
										<li><a href="">Start</a></li>
837
										<li><a href="">Shutdown</a></li>
838
										<li><a href="">Reboot</a></li>
839
										<li><a href="">Destroy</a></li>
840
										<li><a href="">Option i</a></li>
841
									</ul>
842
								</div>
843
								<div class="col rt">
844
									<ul>
845
										<li><a href="">Connect</a></li>
846
										<li><a href="">Details</a></li>
847
									</ul>
848
								</div>
849
							</div>
850
							<div class="vm-name">vm name 1 really large name</div>
851
						</div>
828 852
						<div class="container">
829 853
							<div class="img-wrap">
830 854
								<div class="img stopped">

Also available in: Unified diff