Revision d572ccc6

b/snf-cyclades-app/synnefo/ui/new_ui/ui/network_list.html
21 21
		<header class="header">
22 22
		<nav>
23 23
			<ul class="icons-nav">
24
				<li><a href="vm_list.html" data-tooltip class="has-tip" title="Machines"><span class="snf-PC"></span></a></li>
24
				<li><a href="vm_list.html" data-tooltip class="has-tip current" title="Machines"><span class="snf-PC_fill"></span></a></li>
25 25
				<li><a href="network_list.html" data-tooltip class="has-tip current" title="Networks"><span class="snf-network_full"></span></a></li>
26 26
				<li><a href="" data-tooltip class="has-tip" title="Disks"><span class="snf-HDD"></span></a></li>
27 27
				<li><a href="pithos_list.html" data-tooltip class="has-tip" title="Storage" ><span class="snf-Pithos"></span></a></li>
28
				<li><a href="" data-tooltip class="has-tip" title="Images" ><span class="snf-images"></span></a></li>
29
				<li><a href="" data-tooltip class="has-tip" title="Snapshots" ><span class="snf-snapshot"></span></a></li>
30
				<li><a href="" data-tooltip class="has-tip" title="More" ><span class="snf-plus"></span></a></li>
28 31
			</ul>
29 32
		</nav>
30 33
		<div class="login">
......
155 158
	</div>
156 159
	<!-- overlays end -->
157 160
	
158
		<section class="actions-bar clearfix">
159
			<h2>Networks</h2>
161
				<section class="actions-bar clearfix">
162
			<h2>Virtual Machines</h2>
160 163
			<div class="view-type">
161
				<a href="" class="list"><span class="snf-list"></span></a>
162
				<a href="" class="grid"><span class="snf-layout current"></span></a>
164
				<a href="" class="list"><span class="snf-listview "></span></a>
165
				<a href="" class="grid"><span class="snf-gridview current"></span></a>
163 166
			</div>
164 167
			<div class="filter-menu">
165 168
				<a class="filter" href="">Filter</a>
b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_common.scss
427 427
		position:relative;
428 428
		float: right;
429 429
		height: $bar-height;
430
		margin-right: -6px;
430 431
		-webkit-transition: width 0.3s;
431 432
	    -moz-transition: width 0.3s;
432 433
	    transition: width 0.3s;
......
467 468
			width: 190px;
468 469
		}
469 470
	}
470

  
471
	.sb-search {
472
		$icon-dim :24px;
473
		float: right;
474
		margin-top:3px;
475
		min-width: $icon-dim;
476
		height: $icon-dim;
477
		.sb-icon-search {
478
			height: $icon-dim;
479
			width: $icon-dim;
480
			color: $primary-color;
481
		}
482
		form {
483
			display: inline-block;
484
			margin:0;
485
			.input-wrap {
486
				width:180px;
487
				overflow: hidden;
488
			}
489
			input {
490
				border: transparent;
491
				background-color: white;
492
				color: $overlay-color;
493
				padding: 0 10px;
494
				width: 160px;
495
				font-size: emCalc(10px);
496
				box-shadow: none;
497
				height:0.7* $bar-height;
498
				line-height: 0.7* $bar-height;
499
				position: relative;
500
				top:-3px;
501
				@include placeholder {
502
					color:$overlay-color;
503
				}
504
			}
505
		}
506
		&.sb-search-open {
507
			width:220px;
508
		}
509
	}
510

  
511 471
	.view-type {
512 472
		float: right;
513 473
		margin-right:15px;
514
		.current,
515
		a:hover {
474
		.current, a:hover {
516 475
			color: $secondary-color;
517 476
		}
518
		.snf-list {
519
				margin-right: 6px;
520
				font-size: 17px;
477
		.snf-listview {
478
			position: relative;
479
			top: 3px;
480
			margin-right: 3px;
481
			font-size: 22px;
521 482
		}
522
		.snf-layout {
523
				font-size: 1.1em;
483
		.snf-gridview {
484
				font-size: 22px;
485
				position: relative;
486
				top: 3px;
487
				margin-right: 3px;
524 488
		}
525 489
		
526 490
	}
b/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/app.css
7209 7209
  position: relative;
7210 7210
  float: right;
7211 7211
  height: 30px;
7212
  margin-right: -6px;
7212 7213
  -webkit-transition: width 0.3s;
7213 7214
  -moz-transition: width 0.3s;
7214 7215
  transition: width 0.3s;
7215 7216
  -webkit-backface-visibility: hidden;
7216 7217
}
7217
/* line 434, ../sass/_common.scss */
7218
/* line 435, ../sass/_common.scss */
7218 7219
.actions-bar .hd-search .hd-icon-search {
7219 7220
  color: #919194;
7220 7221
  display: block;
......
7226 7227
  position: relative;
7227 7228
  background: #ebebec;
7228 7229
}
7229
/* line 441, ../sass/_common.scss */
7230
/* line 442, ../sass/_common.scss */
7230 7231
.actions-bar .hd-search .hd-icon-search:hover {
7231 7232
  cursor: pointer;
7232 7233
  color: #30c79e;
7233 7234
}
7234
/* line 449, ../sass/_common.scss */
7235
/* line 450, ../sass/_common.scss */
7235 7236
.actions-bar .hd-search .hd-search-input {
7236 7237
  border: transparent;
7237 7238
  background-color: white;
......
7262 7263
.actions-bar .hd-search .hd-search-input::-webkit-input-placeholder {
7263 7264
  color: #485057;
7264 7265
}
7265
/* line 466, ../sass/_common.scss */
7266
/* line 467, ../sass/_common.scss */
7266 7267
.actions-bar .hd-search.hd-open {
7267 7268
  width: 190px;
7268 7269
}
7269 7270
/* line 471, ../sass/_common.scss */
7270
.actions-bar .sb-search {
7271
  float: right;
7272
  margin-top: 3px;
7273
  min-width: 24px;
7274
  height: 24px;
7275
}
7276
/* line 477, ../sass/_common.scss */
7277
.actions-bar .sb-search .sb-icon-search {
7278
  height: 24px;
7279
  width: 24px;
7280
  color: #919194;
7281
}
7282
/* line 482, ../sass/_common.scss */
7283
.actions-bar .sb-search form {
7284
  display: inline-block;
7285
  margin: 0;
7286
}
7287
/* line 485, ../sass/_common.scss */
7288
.actions-bar .sb-search form .input-wrap {
7289
  width: 180px;
7290
  overflow: hidden;
7291
}
7292
/* line 489, ../sass/_common.scss */
7293
.actions-bar .sb-search form input {
7294
  border: transparent;
7295
  background-color: white;
7296
  color: #485057;
7297
  padding: 0 10px;
7298
  width: 160px;
7299
  font-size: 0.625em;
7300
  box-shadow: none;
7301
  height: 21px;
7302
  line-height: 21px;
7303
  position: relative;
7304
  top: -3px;
7305
}
7306
/* line 74, ../sass/_common.scss */
7307
.actions-bar .sb-search form input.placeholder {
7308
  color: #485057;
7309
}
7310
/* line 75, ../sass/_common.scss */
7311
.actions-bar .sb-search form input:-moz-placeholder {
7312
  color: #485057;
7313
}
7314
/* line 76, ../sass/_common.scss */
7315
.actions-bar .sb-search form input::-moz-placeholder {
7316
  color: #485057;
7317
}
7318
/* line 77, ../sass/_common.scss */
7319
.actions-bar .sb-search form input::-webkit-input-placeholder {
7320
  color: #485057;
7321
}
7322
/* line 506, ../sass/_common.scss */
7323
.actions-bar .sb-search.sb-search-open {
7324
  width: 220px;
7325
}
7326
/* line 511, ../sass/_common.scss */
7327 7271
.actions-bar .view-type {
7328 7272
  float: right;
7329 7273
  margin-right: 15px;
7330 7274
}
7331
/* line 515, ../sass/_common.scss */
7332
.actions-bar .view-type .current,
7333
.actions-bar .view-type a:hover {
7275
/* line 474, ../sass/_common.scss */
7276
.actions-bar .view-type .current, .actions-bar .view-type a:hover {
7334 7277
  color: #30c79e;
7335 7278
}
7336
/* line 518, ../sass/_common.scss */
7337
.actions-bar .view-type .snf-list {
7338
  margin-right: 6px;
7339
  font-size: 17px;
7279
/* line 477, ../sass/_common.scss */
7280
.actions-bar .view-type .snf-listview {
7281
  position: relative;
7282
  top: 3px;
7283
  margin-right: 3px;
7284
  font-size: 22px;
7340 7285
}
7341
/* line 522, ../sass/_common.scss */
7342
.actions-bar .view-type .snf-layout {
7343
  font-size: 1.1em;
7286
/* line 483, ../sass/_common.scss */
7287
.actions-bar .view-type .snf-gridview {
7288
  font-size: 22px;
7289
  position: relative;
7290
  top: 3px;
7291
  margin-right: 3px;
7344 7292
}
7345 7293

  
7346
/* line 528, ../sass/_common.scss */
7294
/* line 492, ../sass/_common.scss */
7347 7295
.new-btn {
7348 7296
  position: absolute;
7349 7297
  left: 15px;
7350 7298
  bottom: 0;
7351 7299
  height: 30px;
7352 7300
}
7353
/* line 535, ../sass/_common.scss */
7301
/* line 499, ../sass/_common.scss */
7354 7302
.new-btn a span {
7355 7303
  font-size: 1.25em;
7356 7304
}
7357 7305

  
7358 7306
/* Icons Navigation ----------------------------------------------- */
7359
/* line 543, ../sass/_common.scss */
7307
/* line 507, ../sass/_common.scss */
7360 7308
.icons-nav {
7361 7309
  margin: 0;
7362 7310
  padding: 0;
7363 7311
}
7364
/* line 545, ../sass/_common.scss */
7312
/* line 509, ../sass/_common.scss */
7365 7313
.icons-nav li {
7366 7314
  display: inline-block;
7367 7315
  margin: 0 5px;
......
7372 7320
  text-align: center;
7373 7321
  overflow: hidden;
7374 7322
}
7375
/* line 554, ../sass/_common.scss */
7323
/* line 518, ../sass/_common.scss */
7376 7324
.icons-nav li a {
7377 7325
  color: #1a1a1a;
7378 7326
}
7379
/* line 556, ../sass/_common.scss */
7327
/* line 520, ../sass/_common.scss */
7380 7328
.icons-nav li a:hover, .icons-nav li a.current {
7381 7329
  color: #30c79e;
7382 7330
}
7383 7331

  
7384 7332
/* Top info  ----------------------------------------------- */
7385
/* line 569, ../sass/_common.scss */
7333
/* line 533, ../sass/_common.scss */
7386 7334
.top-info {
7387 7335
  padding: 50px 100px;
7388 7336
  position: relative;
7389 7337
  z-index: 10;
7390 7338
  display: none;
7391 7339
}
7392
/* line 574, ../sass/_common.scss */
7340
/* line 538, ../sass/_common.scss */
7393 7341
.top-info .close {
7394 7342
  position: absolute;
7395 7343
  right: 15px;
......
7402 7350
  overflow: hidden;
7403 7351
}
7404 7352

  
7405
/* line 583, ../sass/_common.scss */
7353
/* line 547, ../sass/_common.scss */
7406 7354
.info.error {
7407 7355
  background: #ff5c58;
7408 7356
  color: #fff;
7409 7357
}
7410 7358

  
7411
/* line 589, ../sass/_common.scss */
7359
/* line 553, ../sass/_common.scss */
7412 7360
.info.alert {
7413 7361
  background: #30c79e;
7414 7362
  color: #fff;
7415 7363
}
7416 7364

  
7417
/* line 594, ../sass/_common.scss */
7365
/* line 558, ../sass/_common.scss */
7418 7366
.info.warning {
7419 7367
  background: #919194;
7420 7368
  color: #fff;
7421 7369
}
7422 7370

  
7423
/* line 599, ../sass/_common.scss */
7371
/* line 563, ../sass/_common.scss */
7424 7372
.info.success {
7425 7373
  background: #00a551;
7426 7374
  color: #fff;
7427 7375
}
7428 7376

  
7429
/* line 604, ../sass/_common.scss */
7377
/* line 568, ../sass/_common.scss */
7430 7378
.border-bottom-style1 {
7431 7379
  padding-bottom: 20px;
7432 7380
  margin-bottom: 20px;
......
7434 7382
}
7435 7383

  
7436 7384
/* Progress Bar ----------------------------------------------- */
7437
/* line 613, ../sass/_common.scss */
7385
/* line 577, ../sass/_common.scss */
7438 7386
.progress-bar {
7439 7387
  position: fixed;
7440 7388
  bottom: 0;
......
7445 7393
  padding: 20px 0 20px 310px;
7446 7394
  color: #919194;
7447 7395
}
7448
/* line 622, ../sass/_common.scss */
7396
/* line 586, ../sass/_common.scss */
7449 7397
.progress-bar span.counter {
7450 7398
  display: inline-block;
7451 7399
  margin-right: 20px;
7452 7400
  float: left;
7453 7401
}
7454
/* line 627, ../sass/_common.scss */
7402
/* line 591, ../sass/_common.scss */
7455 7403
.progress-bar div.progress-wrap {
7456 7404
  display: inline-block;
7457 7405
  float: left;
7458 7406
  width: 40%;
7459 7407
  margin-right: 60px;
7460 7408
}
7461
/* line 632, ../sass/_common.scss */
7409
/* line 596, ../sass/_common.scss */
7462 7410
.progress-bar div.progress-wrap .progress {
7463 7411
  position: relative;
7464 7412
  top: 2px;
7465 7413
}
7466
/* line 637, ../sass/_common.scss */
7414
/* line 601, ../sass/_common.scss */
7467 7415
.progress-bar span.more {
7468 7416
  display: inline-block;
7469 7417
}
7470 7418

  
7471 7419
/* Responive ------------------------------------------------ */
7472 7420
@media only screen and (max-width: 768px) {
7473
  /* line 648, ../sass/_common.scss */
7421
  /* line 612, ../sass/_common.scss */
7474 7422
  body {
7475 7423
    padding-top: 0;
7476 7424
  }
7477 7425

  
7478
  /* line 651, ../sass/_common.scss */
7426
  /* line 615, ../sass/_common.scss */
7479 7427
  .header, .actions-bar {
7480 7428
    position: static;
7481 7429
    z-index: auto;
7482 7430
  }
7483 7431

  
7484
  /* line 655, ../sass/_common.scss */
7432
  /* line 619, ../sass/_common.scss */
7485 7433
  .actions-bar {
7486 7434
    top: 160px;
7487 7435
  }
7488 7436

  
7489
  /* line 658, ../sass/_common.scss */
7437
  /* line 622, ../sass/_common.scss */
7490 7438
  .header {
7491 7439
    height: 120px;
7492 7440
    line-height: 50px;
7493 7441
  }
7494
  /* line 661, ../sass/_common.scss */
7442
  /* line 625, ../sass/_common.scss */
7495 7443
  .header .icons-nav {
7496 7444
    position: static;
7497 7445
  }
b/snf-cyclades-app/synnefo/ui/new_ui/ui/vm_list.html
26 26
				<li><a href="network_list.html" data-tooltip class="has-tip" title="Networks"><span class="snf-network"></span></a></li>
27 27
				<li><a href="" data-tooltip class="has-tip" title="Disks"><span class="snf-HDD"></span></a></li>
28 28
				<li><a href="pithos_list.html" data-tooltip class="has-tip" title="Storage" ><span class="snf-Pithos"></span></a></li>
29
				<li><a href="" data-tooltip class="has-tip" title="Images" ><span class="snf-images"></span></a></li>
30
				<li><a href="" data-tooltip class="has-tip" title="Snapshots" ><span class="snf-snapshot"></span></a></li>
31
				<li><a href="" data-tooltip class="has-tip" title="More" ><span class="snf-plus"></span></a></li>
29 32
			</ul>
30 33
		</nav>
31 34
		<div class="login">
......
726 729
		<section class="actions-bar clearfix">
727 730
			<h2>Virtual Machines</h2>
728 731
			<div class="view-type">
729
				<a href="" class="list"><span class="snf-list"></span></a>
730
				<a href="" class="grid"><span class="snf-layout current"></span></a>
732
				<a href="" class="list"><span class="snf-listview "></span></a>
733
				<a href="" class="grid"><span class="snf-gridview current"></span></a>
731 734
			</div>
732 735
			<div class="filter-menu">
733 736
				<a class="filter" href="">Filter</a>

Also available in: Unified diff