Revision 5c4713f8

b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/common.js
265 265
    }
266 266
}
267 267
    
268

  
268
function goToByScroll(id){
269
      // Remove "link" from the ID
270
    id = id.replace("link", "");
271
      // Scroll
272
    $('html,body').animate({
273
        scrollTop: $("#"+id).offset().top},
274
        'slow');
275
}
269 276
$(document).ready(function(){
270 277

  
271 278
    ui.setSidebarHeight();
......
400 407
    })
401 408

  
402 409
    $('#picker').farbtastic('#color');
410
    $('.show-add-tag').click(function(e){
411
        e.preventDefault();
412
        $(this).parents('.tags-area').find('.snf-color-picker').slideDown();
413
        goToByScroll('hide-add-tag');
414
    })
415
    $('.hide-add-tag').click(function(e){
416
        e.preventDefault();
417
        $(this).parents('.snf-color-picker').slideUp();
418
    })
403 419

  
404 420
})
405 421

  
b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_common.scss
93 93
}
94 94

  
95 95
.tag-demo {
96

  
97 96
	@extend .circle;
98 97
	width: 22px;
99 98
	height: 22px;
b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_overlays.scss
193 193
	.middle {
194 194
		padding-top:$bar-height;
195 195
		.step {
196
			padding:50px 0 (50px + $bar-height);
196
			padding:50px 0 50px;
197 197
			float:left;
198 198
			position:relative;
199 199
			width:$row-width;
......
409 409
							margin-bottom:0.5em;
410 410
						}
411 411
					}
412
					// .btn5 {
413
					// 	&:hover {
414
					// 		color:white;
415
					// 	}
416
					// 	&.current, &.current:hover {
417
					// 		color:$overlay-color;
418
					// 	}
419
					// }
420 412
				}
413
				.btn5 {
414
				    &:hover {
415
					    color:white;
416
				}
417
				    &.current, &.current:hover {
418
				        color:$overlay-color;
419
				    }
420
			    }
421 421
				.advanced-conf-options {
422 422
					display: none;
423 423
					.area {
......
425 425
						.row {
426 426
							width:$row-small;
427 427
						}
428
						// .btn5{
429
						// 	&:hover {
430
						// 		color:white;
431
						// 	}
432
						// }
433 428
						ul {
434 429
							li {
435 430
								position: relative;
......
493 488
					}
494 489
					.tags-area {
495 490
						background-color: $tag-opt-area-color;
496
						dt, dd { 
497
							display:inline-block;
498
							font-weight: normal;
499
						}
500
						dt {
501
							width:45%;
502
						}
503
						dd {
504
							width:30%;
505
							padding-right: 25%;
506
						}
507
						.title {
508
							position: relative;
509
							left: -11px;
510
							font-weight: bold;
491
						.snf-color-picker {
492
							display: none;
511 493
						}
512
						p {
513
							position:relative;
514
							left:-11px;
515
						}
516
						
517 494
						#picker {
518 495
							position: relative;
519
							border: 1px solid $wizard-base-font-color;
520
							padding: 6px;
521 496
							width: 207px;
522 497
							margin: 30px 5px;
523 498
							display: inline-block;
524
							// width: 195px;
525
							// margin: auto;
526 499
						}
527

  
528 500
						.form-item {
529
							// margin: auto;
530
							//width: 108px;
531 501
							display:inline-block;
532 502
							position: relative;
533 503
							bottom: 40px;
534 504
						}
535

  
536

  
505
						.btn5 {
506
							margin-right:20px;
507
						}
537 508

  
538 509
					}
539 510

  
b/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/app.css
6901 6901
  bottom: -5px;
6902 6902
  margin-right: 20px;
6903 6903
}
6904
/* line 103, ../sass/_common.scss */
6904
/* line 102, ../sass/_common.scss */
6905 6905
.tag-demo.tag4, .advanced-conf-step .tag4#color {
6906 6906
  background-color: #ff5e4d;
6907 6907
}
6908
/* line 104, ../sass/_common.scss */
6908
/* line 103, ../sass/_common.scss */
6909 6909
.tag-demo.tag5, .advanced-conf-step .tag5#color {
6910 6910
  background-color: #25bfda;
6911 6911
}
6912
/* line 105, ../sass/_common.scss */
6912
/* line 104, ../sass/_common.scss */
6913 6913
.tag-demo.tag6, .advanced-conf-step .tag6#color {
6914 6914
  background-color: #fbf7c5;
6915 6915
}
6916
/* line 106, ../sass/_common.scss */
6916
/* line 105, ../sass/_common.scss */
6917 6917
.tag-demo.tag7, .advanced-conf-step .tag7#color {
6918 6918
  background-color: #83a697;
6919 6919
}
6920 6920

  
6921 6921
/* Buttons and Links ----------------------------------------------- */
6922
/* line 114, ../sass/_common.scss */
6922
/* line 113, ../sass/_common.scss */
6923 6923
a {
6924 6924
  color: #3582ac;
6925 6925
}
6926
/* line 116, ../sass/_common.scss */
6926
/* line 115, ../sass/_common.scss */
6927 6927
a:hover {
6928 6928
  color: #30c79e;
6929 6929
  -webkit-transition: background 300ms ease-out;
......
6933 6933
  transition: background 300ms ease-out;
6934 6934
}
6935 6935

  
6936
/* line 123, ../sass/_common.scss */
6936
/* line 122, ../sass/_common.scss */
6937 6937
.btn1, .btn2, .btn3, .upload-widget .btns a, .btn4, .btn-img, .new-btn a, .details .top .actions ul li a {
6938 6938
  border: 1px solid #919194;
6939 6939
  color: #919194;
......
6942 6942
  line-height: 1em;
6943 6943
  text-align: center;
6944 6944
}
6945
/* line 131, ../sass/_common.scss */
6945
/* line 130, ../sass/_common.scss */
6946 6946
.btn1:hover, .btn2:hover, .btn3:hover, .upload-widget .btns a:hover, .btn4:hover, .btn-img:hover, .new-btn a:hover, .details .top .actions ul li a:hover, .btn1.current, .current.btn2, .current.btn3, .upload-widget .btns a.current, .current.btn4, .current.btn-img, .new-btn a.current, .details .top .actions ul li a.current {
6947 6947
  border-color: #3582ac;
6948 6948
  background: #3582ac;
6949 6949
  color: #fff;
6950 6950
}
6951
/* line 136, ../sass/_common.scss */
6951
/* line 135, ../sass/_common.scss */
6952 6952
.btn1.current, .current.btn2, .current.btn3, .upload-widget .btns a.current, .current.btn4, .current.btn-img, .new-btn a.current, .details .top .actions ul li a.current {
6953 6953
  cursor: default;
6954 6954
}
6955 6955

  
6956
/* line 141, ../sass/_common.scss */
6956
/* line 140, ../sass/_common.scss */
6957 6957
.btn2 {
6958 6958
  color: #3582ac;
6959 6959
  background: #fff;
6960 6960
  border-color: #3582ac;
6961 6961
}
6962
/* line 147, ../sass/_common.scss */
6962
/* line 146, ../sass/_common.scss */
6963 6963
.btn2:hover, .btn2.current {
6964 6964
  background: transparent;
6965 6965
  border-color: #fff;
6966 6966
}
6967 6967

  
6968
/* line 153, ../sass/_common.scss */
6968
/* line 152, ../sass/_common.scss */
6969 6969
.btn3, .upload-widget .btns a {
6970 6970
  color: #fff;
6971 6971
  border-color: #fff;
6972 6972
}
6973
/* line 158, ../sass/_common.scss */
6973
/* line 157, ../sass/_common.scss */
6974 6974
.btn3:hover, .upload-widget .btns a:hover, .btn3.current, .upload-widget .btns a.current {
6975 6975
  color: #3582ac;
6976 6976
  background: #fff;
6977 6977
  border-color: #fff;
6978 6978
}
6979 6979

  
6980
/* line 165, ../sass/_common.scss */
6980
/* line 164, ../sass/_common.scss */
6981 6981
.btn4 {
6982 6982
  color: #fff;
6983 6983
  border-color: #fff;
6984 6984
  background: #3582ac;
6985 6985
}
6986
/* line 171, ../sass/_common.scss */
6986
/* line 170, ../sass/_common.scss */
6987 6987
.btn4:hover, .btn4.current {
6988 6988
  color: #3582ac;
6989 6989
  border-color: #3582ac;
6990 6990
  background: #fff;
6991 6991
}
6992 6992

  
6993
/* line 178, ../sass/_common.scss */
6993
/* line 177, ../sass/_common.scss */
6994 6994
.btn5, .wizard .middle .step .os li .btn-col a, .wizard .middle .step .flavor li .options-bar .options li a {
6995 6995
  border: 1px solid white;
6996 6996
  color: white;
......
7001 7001
  text-align: center;
7002 7002
  font-size: 0.75em;
7003 7003
}
7004
/* line 187, ../sass/_common.scss */
7004
/* line 186, ../sass/_common.scss */
7005 7005
.btn5:hover, .wizard .middle .step .os li .btn-col a:hover, .wizard .middle .step .flavor li .options-bar .options li a:hover {
7006 7006
  border-width: 2px;
7007 7007
  line-height: 26px;
7008 7008
  padding: 0 19px;
7009 7009
}
7010
/* line 192, ../sass/_common.scss */
7010
/* line 191, ../sass/_common.scss */
7011 7011
.btn5.current, .wizard .middle .step .os li .btn-col a.current, .wizard .middle .step .flavor li .options-bar .options li a.current {
7012 7012
  background: white;
7013 7013
  color: #3582ac;
7014 7014
}
7015 7015

  
7016
/* line 198, ../sass/_common.scss */
7016
/* line 197, ../sass/_common.scss */
7017 7017
.btn-img {
7018 7018
  border-color: #3582ac;
7019 7019
}
7020
/* line 201, ../sass/_common.scss */
7020
/* line 200, ../sass/_common.scss */
7021 7021
.btn-img:hover {
7022 7022
  background: transparent;
7023 7023
}
7024
/* line 205, ../sass/_common.scss */
7024
/* line 204, ../sass/_common.scss */
7025 7025
.btn-img a img, .btn-img a span {
7026 7026
  margin-left: 5px;
7027 7027
}
7028 7028

  
7029 7029
/* Layout ----------------------------------------------- */
7030
/* line 213, ../sass/_common.scss */
7030
/* line 212, ../sass/_common.scss */
7031 7031
html, body {
7032 7032
  height: 100%;
7033 7033
}
7034 7034

  
7035
/* line 217, ../sass/_common.scss */
7035
/* line 216, ../sass/_common.scss */
7036 7036
body {
7037 7037
  padding-top: 130px;
7038 7038
}
7039 7039

  
7040
/* line 221, ../sass/_common.scss */
7040
/* line 220, ../sass/_common.scss */
7041 7041
.overlay-wrapper {
7042 7042
  min-height: 100%;
7043 7043
}
7044 7044

  
7045
/* line 225, ../sass/_common.scss */
7045
/* line 224, ../sass/_common.scss */
7046 7046
.lt-sidebar {
7047 7047
  width: 250px;
7048 7048
  float: left;
7049 7049
}
7050
/* line 228, ../sass/_common.scss */
7050
/* line 227, ../sass/_common.scss */
7051 7051
.lt-sidebar.nav {
7052 7052
  margin-top: 0;
7053 7053
  font-size: 1em;
7054 7054
  overflow: auto;
7055 7055
}
7056
/* line 233, ../sass/_common.scss */
7056
/* line 232, ../sass/_common.scss */
7057 7057
.lt-sidebar + .main {
7058 7058
  overflow: hidden;
7059 7059
}
7060 7060

  
7061
/* line 238, ../sass/_common.scss */
7061
/* line 237, ../sass/_common.scss */
7062 7062
.main {
7063 7063
  padding: 0 40px;
7064 7064
  overflow: hidden;
7065 7065
}
7066 7066

  
7067 7067
/* Header ----------------------------------------------- */
7068
/* line 247, ../sass/_common.scss */
7068
/* line 246, ../sass/_common.scss */
7069 7069
.header {
7070 7070
  position: fixed;
7071 7071
  top: 0;
......
7079 7079
  background: white;
7080 7080
  z-index: 100;
7081 7081
}
7082
/* line 259, ../sass/_common.scss */
7082
/* line 258, ../sass/_common.scss */
7083 7083
.header .icons-nav {
7084 7084
  position: absolute;
7085 7085
  left: 2.1875em;
......
7087 7087
  line-height: 70px;
7088 7088
  top: 0;
7089 7089
}
7090
/* line 266, ../sass/_common.scss */
7090
/* line 265, ../sass/_common.scss */
7091 7091
.header .logo {
7092 7092
  text-align: center;
7093 7093
}
7094
/* line 268, ../sass/_common.scss */
7094
/* line 267, ../sass/_common.scss */
7095 7095
.header .logo img {
7096 7096
  max-height: 30px;
7097 7097
}
7098
/* line 271, ../sass/_common.scss */
7098
/* line 270, ../sass/_common.scss */
7099 7099
.header .logo h2 {
7100 7100
  display: none;
7101 7101
  margin: 0;
......
7103 7103
  color: #919194;
7104 7104
  font-weight: normal;
7105 7105
}
7106
/* line 279, ../sass/_common.scss */
7106
/* line 278, ../sass/_common.scss */
7107 7107
.header .login {
7108 7108
  position: absolute;
7109 7109
  top: 0;
......
7113 7113
}
7114 7114

  
7115 7115
/* Actions Bar ----------------------------------------------- */
7116
/* line 291, ../sass/_common.scss */
7116
/* line 290, ../sass/_common.scss */
7117 7117
.actions-bar {
7118 7118
  position: fixed;
7119 7119
  left: 0;
......
7126 7126
  background: white;
7127 7127
  border-bottom: 1px solid #919194;
7128 7128
}
7129
/* line 302, ../sass/_common.scss */
7129
/* line 301, ../sass/_common.scss */
7130 7130
.actions-bar .row {
7131 7131
  position: relative;
7132 7132
  height: 60px;
7133 7133
}
7134
/* line 306, ../sass/_common.scss */
7134
/* line 305, ../sass/_common.scss */
7135 7135
.actions-bar ul {
7136 7136
  margin: 0;
7137 7137
}
7138
/* line 308, ../sass/_common.scss */
7138
/* line 307, ../sass/_common.scss */
7139 7139
.actions-bar ul li {
7140 7140
  list-style: none outside none;
7141 7141
  display: inline-block;
7142 7142
  line-height: 60px;
7143 7143
}
7144
/* line 312, ../sass/_common.scss */
7144
/* line 311, ../sass/_common.scss */
7145 7145
.actions-bar ul li a {
7146 7146
  display: block;
7147 7147
  color: #dfdfdf;
......
7149 7149
  padding: 0 20px;
7150 7150
  border: 1px solid transparent;
7151 7151
}
7152
/* line 318, ../sass/_common.scss */
7152
/* line 317, ../sass/_common.scss */
7153 7153
.actions-bar ul li a.active, .actions-bar ul .items-list li .container:hover a.check, .items-list .actions-bar ul li .container:hover a.check {
7154 7154
  color: #919194;
7155 7155
}
7156
/* line 320, ../sass/_common.scss */
7156
/* line 319, ../sass/_common.scss */
7157 7157
.actions-bar ul li a.active:hover, .actions-bar ul .items-list li .container:hover a.check:hover, .items-list .actions-bar ul li .container:hover a.check:hover {
7158 7158
  color: #3582ac;
7159 7159
  cursor: pointer;
7160 7160
}
7161
/* line 325, ../sass/_common.scss */
7161
/* line 324, ../sass/_common.scss */
7162 7162
.actions-bar ul li a:hover {
7163 7163
  cursor: default;
7164 7164
}
7165 7165

  
7166
/* line 333, ../sass/_common.scss */
7166
/* line 332, ../sass/_common.scss */
7167 7167
.new-btn {
7168 7168
  position: absolute;
7169 7169
  left: 0;
7170 7170
  bottom: 0;
7171 7171
  height: 60px;
7172 7172
}
7173
/* line 340, ../sass/_common.scss */
7173
/* line 339, ../sass/_common.scss */
7174 7174
.new-btn a span {
7175 7175
  font-size: 1.25em;
7176 7176
}
7177 7177

  
7178 7178
/* Icons Navigation ----------------------------------------------- */
7179
/* line 348, ../sass/_common.scss */
7179
/* line 347, ../sass/_common.scss */
7180 7180
.icons-nav {
7181 7181
  margin: 0;
7182 7182
  padding: 0;
7183 7183
}
7184
/* line 350, ../sass/_common.scss */
7184
/* line 349, ../sass/_common.scss */
7185 7185
.icons-nav li {
7186 7186
  display: inline-block;
7187 7187
  margin: 0 0.3125em;
......
7192 7192
  text-align: center;
7193 7193
  overflow: hidden;
7194 7194
}
7195
/* line 359, ../sass/_common.scss */
7195
/* line 358, ../sass/_common.scss */
7196 7196
.icons-nav li a {
7197 7197
  color: #333333;
7198 7198
}
7199
/* line 361, ../sass/_common.scss */
7199
/* line 360, ../sass/_common.scss */
7200 7200
.icons-nav li a:hover, .icons-nav li a.current {
7201 7201
  font-size: 30px;
7202 7202
  color: #30c79e;
7203 7203
}
7204 7204

  
7205 7205
/* Top info  ----------------------------------------------- */
7206
/* line 374, ../sass/_common.scss */
7206
/* line 373, ../sass/_common.scss */
7207 7207
.top-info {
7208 7208
  padding: 50px 100px;
7209 7209
  position: relative;
7210 7210
  z-index: 10;
7211 7211
  display: none;
7212 7212
}
7213
/* line 379, ../sass/_common.scss */
7213
/* line 378, ../sass/_common.scss */
7214 7214
.top-info .close {
7215 7215
  position: absolute;
7216 7216
  right: 2.5em;
......
7223 7223
  overflow: hidden;
7224 7224
}
7225 7225

  
7226
/* line 388, ../sass/_common.scss */
7226
/* line 387, ../sass/_common.scss */
7227 7227
.info.error {
7228 7228
  background: #ff5c58;
7229 7229
  color: #fff;
7230 7230
}
7231 7231

  
7232
/* line 394, ../sass/_common.scss */
7232
/* line 393, ../sass/_common.scss */
7233 7233
.info.alert {
7234 7234
  background: #3582ac;
7235 7235
  color: #fff;
7236 7236
}
7237 7237

  
7238
/* line 399, ../sass/_common.scss */
7238
/* line 398, ../sass/_common.scss */
7239 7239
.info.warning {
7240 7240
  background: #919194;
7241 7241
  color: #fff;
7242 7242
}
7243 7243

  
7244
/* line 404, ../sass/_common.scss */
7244
/* line 403, ../sass/_common.scss */
7245 7245
.info.success {
7246 7246
  background: #00a551;
7247 7247
  color: #fff;
7248 7248
}
7249 7249

  
7250
/* line 409, ../sass/_common.scss */
7250
/* line 408, ../sass/_common.scss */
7251 7251
.border-bottom-style1 {
7252 7252
  padding-bottom: 20px;
7253 7253
  margin-bottom: 20px;
......
7255 7255
}
7256 7256

  
7257 7257
/* Progress Bar ----------------------------------------------- */
7258
/* line 418, ../sass/_common.scss */
7258
/* line 417, ../sass/_common.scss */
7259 7259
.progress-bar {
7260 7260
  position: fixed;
7261 7261
  bottom: 0;
......
7266 7266
  padding: 20px 0 20px 310px;
7267 7267
  color: #919194;
7268 7268
}
7269
/* line 427, ../sass/_common.scss */
7269
/* line 426, ../sass/_common.scss */
7270 7270
.progress-bar span.counter {
7271 7271
  display: inline-block;
7272 7272
  margin-right: 20px;
7273 7273
  float: left;
7274 7274
}
7275
/* line 432, ../sass/_common.scss */
7275
/* line 431, ../sass/_common.scss */
7276 7276
.progress-bar div.progress-wrap {
7277 7277
  display: inline-block;
7278 7278
  float: left;
7279 7279
  width: 40%;
7280 7280
  margin-right: 60px;
7281 7281
}
7282
/* line 437, ../sass/_common.scss */
7282
/* line 436, ../sass/_common.scss */
7283 7283
.progress-bar div.progress-wrap .progress {
7284 7284
  position: relative;
7285 7285
  top: 2px;
7286 7286
}
7287
/* line 442, ../sass/_common.scss */
7287
/* line 441, ../sass/_common.scss */
7288 7288
.progress-bar span.more {
7289 7289
  display: inline-block;
7290 7290
}
......
8360 8360
}
8361 8361
/* line 195, ../sass/_overlays.scss */
8362 8362
.wizard .middle .step {
8363
  padding: 50px 0 110px;
8363
  padding: 50px 0 50px;
8364 8364
  float: left;
8365 8365
  position: relative;
8366 8366
  width: 75em;
......
8600 8600
  font-size: 1em;
8601 8601
  margin-bottom: 0.5em;
8602 8602
}
8603
/* line 414, ../sass/_overlays.scss */
8604
.wizard .middle .step .advanced-conf-step .btn5:hover, .wizard .middle .step .advanced-conf-step .os li .btn-col a:hover, .wizard .middle .step .os li .btn-col .advanced-conf-step a:hover, .wizard .middle .step .advanced-conf-step .flavor li .options-bar .options li a:hover, .wizard .middle .step .flavor li .options-bar .options li .advanced-conf-step a:hover {
8605
  color: white;
8606
}
8607
/* line 417, ../sass/_overlays.scss */
8608
.wizard .middle .step .advanced-conf-step .btn5.current, .wizard .middle .step .advanced-conf-step .os li .btn-col a.current, .wizard .middle .step .os li .btn-col .advanced-conf-step a.current, .wizard .middle .step .advanced-conf-step .flavor li .options-bar .options li a.current, .wizard .middle .step .flavor li .options-bar .options li .advanced-conf-step a.current, .wizard .middle .step .advanced-conf-step .btn5.current:hover, .wizard .middle .step .advanced-conf-step .os li .btn-col a.current:hover, .wizard .middle .step .os li .btn-col .advanced-conf-step a.current:hover, .wizard .middle .step .advanced-conf-step .flavor li .options-bar .options li a.current:hover, .wizard .middle .step .flavor li .options-bar .options li .advanced-conf-step a.current:hover {
8609
  color: #485057;
8610
}
8603 8611
/* line 421, ../sass/_overlays.scss */
8604 8612
.wizard .middle .step .advanced-conf-step .advanced-conf-options {
8605 8613
  display: none;
......
8612 8620
.wizard .middle .step .advanced-conf-step .advanced-conf-options .area .row {
8613 8621
  width: 37.5em;
8614 8622
}
8615
/* line 434, ../sass/_overlays.scss */
8623
/* line 429, ../sass/_overlays.scss */
8616 8624
.wizard .middle .step .advanced-conf-step .advanced-conf-options .area ul li {
8617 8625
  position: relative;
8618 8626
  list-style: none outside none;
8619 8627
  margin-bottom: 7px;
8620 8628
}
8621
/* line 439, ../sass/_overlays.scss */
8629
/* line 434, ../sass/_overlays.scss */
8622 8630
.wizard .middle .step .advanced-conf-step .advanced-conf-options .area ul li.checkbox:hover {
8623 8631
  cursor: pointer;
8624 8632
}
8625
/* line 443, ../sass/_overlays.scss */
8633
/* line 438, ../sass/_overlays.scss */
8626 8634
.wizard .middle .step .advanced-conf-step .advanced-conf-options .area ul li h3 {
8627 8635
  width: 18.75em;
8628 8636
  color: white;
......
8631 8639
  margin: 0 20px 0 0;
8632 8640
  display: inline-block;
8633 8641
}
8634
/* line 454, ../sass/_overlays.scss */
8642
/* line 449, ../sass/_overlays.scss */
8635 8643
.wizard .middle .step .advanced-conf-step .advanced-conf-options .ssh-keys-area {
8636 8644
  background-color: #ff7049;
8637 8645
}
8638
/* line 457, ../sass/_overlays.scss */
8646
/* line 452, ../sass/_overlays.scss */
8639 8647
.wizard .middle .step .advanced-conf-step .advanced-conf-options .networks-area {
8640 8648
  background-color: #ff948c;
8641 8649
}
8642
/* line 460, ../sass/_overlays.scss */
8650
/* line 455, ../sass/_overlays.scss */
8643 8651
.wizard .middle .step .advanced-conf-step .advanced-conf-options .networks-area li .net-icons {
8644 8652
  padding-right: 20px;
8645 8653
  position: absolute;
......
8649 8657
  text-align: right;
8650 8658
  font-size: 30px;
8651 8659
}
8652
/* line 468, ../sass/_overlays.scss */
8660
/* line 463, ../sass/_overlays.scss */
8653 8661
.wizard .middle .step .advanced-conf-step .advanced-conf-options .networks-area li .net-icons span {
8654 8662
  margin-left: 6px;
8655 8663
}
8656
/* line 470, ../sass/_overlays.scss */
8664
/* line 465, ../sass/_overlays.scss */
8657 8665
.wizard .middle .step .advanced-conf-step .advanced-conf-options .networks-area li .net-icons span.snf-modem {
8658 8666
  position: relative;
8659 8667
  top: -6px;
8660 8668
}
8661
/* line 476, ../sass/_overlays.scss */
8669
/* line 471, ../sass/_overlays.scss */
8662 8670
.wizard .middle .step .advanced-conf-step .advanced-conf-options .networks-area li.more {
8663 8671
  display: none;
8664 8672
  background: #fff4f3;
......
8666 8674
  padding: 30px 0;
8667 8675
  color: #ff948c;
8668 8676
}
8669
/* line 482, ../sass/_overlays.scss */
8677
/* line 477, ../sass/_overlays.scss */
8670 8678
.wizard .middle .step .advanced-conf-step .advanced-conf-options .networks-area li.more h3 {
8671 8679
  color: #ff948c;
8672 8680
}
8673
/* line 485, ../sass/_overlays.scss */
8681
/* line 480, ../sass/_overlays.scss */
8674 8682
.wizard .middle .step .advanced-conf-step .advanced-conf-options .networks-area li.more .btn5, .wizard .middle .step .advanced-conf-step .advanced-conf-options .networks-area .os li.more .btn-col a, .wizard .middle .step .os .advanced-conf-step .advanced-conf-options .networks-area li.more .btn-col a, .wizard .middle .step .advanced-conf-step .advanced-conf-options .networks-area .flavor li.more .options-bar .options li a, .wizard .middle .step .flavor .advanced-conf-step .advanced-conf-options .networks-area li.more .options-bar .options li a {
8675 8683
  margin-top: 1em;
8676 8684
  border-color: #ff948c;
8677 8685
  color: #ff948c;
8678 8686
}
8679
/* line 494, ../sass/_overlays.scss */
8687
/* line 489, ../sass/_overlays.scss */
8680 8688
.wizard .middle .step .advanced-conf-step .advanced-conf-options .tags-area {
8681 8689
  background-color: #4c71ff;
8682 8690
}
8683
/* line 496, ../sass/_overlays.scss */
8684
.wizard .middle .step .advanced-conf-step .advanced-conf-options .tags-area dt, .wizard .middle .step .advanced-conf-step .advanced-conf-options .tags-area dd {
8685
  display: inline-block;
8686
  font-weight: normal;
8687
}
8688
/* line 500, ../sass/_overlays.scss */
8689
.wizard .middle .step .advanced-conf-step .advanced-conf-options .tags-area dt {
8690
  width: 45%;
8691
}
8692
/* line 503, ../sass/_overlays.scss */
8693
.wizard .middle .step .advanced-conf-step .advanced-conf-options .tags-area dd {
8694
  width: 30%;
8695
  padding-right: 25%;
8696
}
8697
/* line 507, ../sass/_overlays.scss */
8698
.wizard .middle .step .advanced-conf-step .advanced-conf-options .tags-area .title {
8699
  position: relative;
8700
  left: -11px;
8701
  font-weight: bold;
8702
}
8703
/* line 512, ../sass/_overlays.scss */
8704
.wizard .middle .step .advanced-conf-step .advanced-conf-options .tags-area p {
8705
  position: relative;
8706
  left: -11px;
8691
/* line 491, ../sass/_overlays.scss */
8692
.wizard .middle .step .advanced-conf-step .advanced-conf-options .tags-area .snf-color-picker {
8693
  display: none;
8707 8694
}
8708
/* line 517, ../sass/_overlays.scss */
8695
/* line 494, ../sass/_overlays.scss */
8709 8696
.wizard .middle .step .advanced-conf-step .advanced-conf-options .tags-area #picker {
8710 8697
  position: relative;
8711
  border: 1px solid white;
8712
  padding: 6px;
8713 8698
  width: 207px;
8714 8699
  margin: 30px 5px;
8715 8700
  display: inline-block;
8716 8701
}
8717
/* line 528, ../sass/_overlays.scss */
8702
/* line 500, ../sass/_overlays.scss */
8718 8703
.wizard .middle .step .advanced-conf-step .advanced-conf-options .tags-area .form-item {
8719 8704
  display: inline-block;
8720 8705
  position: relative;
8721 8706
  bottom: 40px;
8722 8707
}
8723
/* line 544, ../sass/_overlays.scss */
8708
/* line 505, ../sass/_overlays.scss */
8709
.wizard .middle .step .advanced-conf-step .advanced-conf-options .tags-area .btn5, .wizard .middle .step .advanced-conf-step .advanced-conf-options .tags-area .os li .btn-col a, .wizard .middle .step .os li .btn-col .advanced-conf-step .advanced-conf-options .tags-area a, .wizard .middle .step .advanced-conf-step .advanced-conf-options .tags-area .flavor li .options-bar .options li a, .wizard .middle .step .flavor li .options-bar .options li .advanced-conf-step .advanced-conf-options .tags-area a {
8710
  margin-right: 20px;
8711
}
8712
/* line 515, ../sass/_overlays.scss */
8724 8713
.wizard .bottom {
8725 8714
  position: fixed;
8726 8715
  left: 0;
......
8729 8718
  border-top: 1px solid #333333;
8730 8719
  background: #485057;
8731 8720
}
8732
/* line 551, ../sass/_overlays.scss */
8721
/* line 522, ../sass/_overlays.scss */
8733 8722
.wizard .bottom .row {
8734 8723
  height: 60px;
8735 8724
  line-height: 60px;
8736 8725
}
8737
/* line 555, ../sass/_overlays.scss */
8726
/* line 526, ../sass/_overlays.scss */
8738 8727
.wizard .bottom .nav {
8739 8728
  height: 60px;
8740 8729
  line-height: 60px;
......
8744 8733
  font-size: 0.75em;
8745 8734
  top: 15px;
8746 8735
}
8747
/* line 563, ../sass/_overlays.scss */
8736
/* line 534, ../sass/_overlays.scss */
8748 8737
.wizard .bottom .nav span {
8749 8738
  display: inline-block;
8750 8739
  height: 30px;
8751 8740
  line-height: 30px;
8752 8741
  float: left;
8753 8742
}
8754
/* line 570, ../sass/_overlays.scss */
8743
/* line 541, ../sass/_overlays.scss */
8755 8744
.wizard .bottom .prev {
8756 8745
  float: left;
8757 8746
  height: 30px;
8758 8747
  padding-left: 19px;
8759 8748
  background: url("../images/nav-edge-lt.png") no-repeat left top;
8760 8749
}
8761
/* line 575, ../sass/_overlays.scss */
8750
/* line 546, ../sass/_overlays.scss */
8762 8751
.wizard .bottom .prev span {
8763 8752
  padding-right: 10px;
8764 8753
  background: url("../images/nav-lt.png") no-repeat right top;
8765 8754
}
8766
/* line 579, ../sass/_overlays.scss */
8755
/* line 550, ../sass/_overlays.scss */
8767 8756
.wizard .bottom .prev:hover {
8768 8757
  background-position: left bottom;
8769 8758
  -webkit-transition: background 0 ease-out;
......
8772 8761
  -o-transition: background 0 ease-out;
8773 8762
  transition: background 0 ease-out;
8774 8763
}
8775
/* line 582, ../sass/_overlays.scss */
8764
/* line 553, ../sass/_overlays.scss */
8776 8765
.wizard .bottom .prev:hover span {
8777 8766
  background-position: right bottom;
8778 8767
  -webkit-transition: background 0 ease-out;
......
8781 8770
  -o-transition: background 0 ease-out;
8782 8771
  transition: background 0 ease-out;
8783 8772
}
8784
/* line 588, ../sass/_overlays.scss */
8773
/* line 559, ../sass/_overlays.scss */
8785 8774
.wizard .bottom .next {
8786 8775
  float: right;
8787 8776
  height: 30px;
8788 8777
  padding-right: 19px;
8789 8778
  background: url("../images/nav-edge-rt.png") no-repeat right top;
8790 8779
}
8791
/* line 593, ../sass/_overlays.scss */
8780
/* line 564, ../sass/_overlays.scss */
8792 8781
.wizard .bottom .next span {
8793 8782
  padding-left: 10px;
8794 8783
  background: url("../images/nav-rt.png") no-repeat left top;
8795 8784
}
8796
/* line 597, ../sass/_overlays.scss */
8785
/* line 568, ../sass/_overlays.scss */
8797 8786
.wizard .bottom .next:hover {
8798 8787
  background-position: right bottom;
8799 8788
  -webkit-transition: background 0 ease-out;
......
8802 8791
  -o-transition: background 0 ease-out;
8803 8792
  transition: background 0 ease-out;
8804 8793
}
8805
/* line 600, ../sass/_overlays.scss */
8794
/* line 571, ../sass/_overlays.scss */
8806 8795
.wizard .bottom .next:hover span {
8807 8796
  background-position: left bottom;
8808 8797
  -webkit-transition: background 0 ease-out;
......
8811 8800
  -o-transition: background 0 ease-out;
8812 8801
  transition: background 0 ease-out;
8813 8802
}
8814
/* line 606, ../sass/_overlays.scss */
8803
/* line 577, ../sass/_overlays.scss */
8815 8804
.wizard .bottom .nums {
8816 8805
  text-align: center;
8817 8806
  list-style: none outside none;
......
8820 8809
  line-height: 60px;
8821 8810
  font-size: 0.75em;
8822 8811
}
8823
/* line 613, ../sass/_overlays.scss */
8812
/* line 584, ../sass/_overlays.scss */
8824 8813
.wizard .bottom .nums li {
8825 8814
  list-style: none outside none;
8826 8815
  display: inline-block;
......
8831 8820
  line-height: 21px;
8832 8821
  margin: 0 3px;
8833 8822
}
8834
/* line 622, ../sass/_overlays.scss */
8823
/* line 593, ../sass/_overlays.scss */
8835 8824
.wizard .bottom .nums li a {
8836 8825
  color: #919194;
8837 8826
  display: block;
8838 8827
}
8839
/* line 625, ../sass/_overlays.scss */
8828
/* line 596, ../sass/_overlays.scss */
8840 8829
.wizard .bottom .nums li a:hover {
8841 8830
  cursor: default;
8842 8831
}
8843
/* line 629, ../sass/_overlays.scss */
8832
/* line 600, ../sass/_overlays.scss */
8844 8833
.wizard .bottom .nums li.current {
8845 8834
  border-color: white;
8846 8835
}
8847
/* line 631, ../sass/_overlays.scss */
8836
/* line 602, ../sass/_overlays.scss */
8848 8837
.wizard .bottom .nums li.current a {
8849 8838
  color: white;
8850 8839
}
8851
/* line 636, ../sass/_overlays.scss */
8840
/* line 607, ../sass/_overlays.scss */
8852 8841
.wizard .bottom .nums li.current {
8853 8842
  font-size: 1em;
8854 8843
  width: 30px;
......
8856 8845
  line-height: 27px;
8857 8846
}
8858 8847

  
8859
/* line 647, ../sass/_overlays.scss */
8848
/* line 618, ../sass/_overlays.scss */
8860 8849
.wizard-content {
8861 8850
  overflow: hidden;
8862 8851
  width: 100%;
8863 8852
}
8864 8853

  
8865
/* line 652, ../sass/_overlays.scss */
8854
/* line 623, ../sass/_overlays.scss */
8866 8855
.vm-wizard-carousel {
8867 8856
  width: 90000px;
8868 8857
  position: relative;
b/snf-cyclades-app/synnefo/ui/new_ui/ui/vm_list.html
484 484
									<div class="adv-main row">
485 485
										<div class="vm-name">
486 486
											<h2>Machine name</h2>
487
											<span class="input"><input type="text" value="My Ubuntu Server"></span>
487
											<span class="input"><input type="text" placeholder="My Ubuntu Server"></span>
488 488
										</div>
489 489
										<div class="expand-btn">
490 490
											<a class="expand-link" href="">
......
569 569
											<div class="row">
570 570
												<h2>Tags</h2>
571 571
												<p>Dude use your tags like you eat your cereal.<br>You can color code them as well</p>
572
												<dl>
573
													<dt class="title">My tags</dt> <dd class="title">select</dd>
574
													<dt><span class="tag-demo tag4"></span>Operating system</dt> <dd class="snf-checkbox-unchecked"></dd>
575
													<dt><span class="tag-demo tag5"></span>Pirate PC 1</dt> <dd class="snf-checkbox-unchecked"></dd>
576
													<dt><span class="tag-demo tag6"></span>Pirate PC 2</dt> <dd class="snf-checkbox-unchecked"></dd>
577
													<dt><span class="tag-demo tag7"></span>Pirate PC 3</dt> <dd class="snf-checkbox-unchecked"></dd>				
578
												</dl>
579
												<div ><a class="btn5" href="">add Tag</a></div>
572
												<ul>
573
													<li class="checkbox">
574
														<h3>
575
															<span class="tag-demo tag4"></span>
576
															Operating system
577
														</h3>
578
														<span class="snf-checkbox-unchecked"></span>
579
													</li>
580
													<li class="checkbox">
581
														<h3>
582
															<span class="tag-demo tag5"></span>
583
															Pirate PC1
584
														</h3>
585
														<span class="snf-checkbox-unchecked"></span>
586
													</li>
587
													<li class="checkbox">
588
														<h3>
589
															<span class="tag-demo tag6"></span>
590
															Pirate PC1
591
														</h3>
592
														<span class="snf-checkbox-unchecked"></span>
593
													</li>
594
												</ul>
595
												<div ><a class="btn5 show-add-tag" href="">add Tag</a></div>
580 596
												<div class="snf-color-picker">
581 597
													<form action="" style="width: 400px;">
582 598
														<div id="picker">
......
590 606
														</div>
591 607
														<div class="form-item">
592 608
															<input type="text" id="color" name="color" value="#16C1E9" disabled>
593
															<span class="input"><input class="tag_name" type="text" value="My Tag"></span>
609
															<span class="input"><input class="tag_name" type="text" placeholder="My Tag"></span>
594 610
														</div>
595 611
													</form>									
596

  
612
													<div>
613
														<a class="btn5" href="">OK</a>
614
														<a class="btn5 hide-add-tag" href="" id="hide-add-tag">CANCEL</a>
615
													</div>
597 616

  
598 617
												</div>
599 618
											</div> <!-- end of row -->

Also available in: Unified diff