Statistics
| Branch: | Tag: | Revision:

root / snf-cyclades-app / synnefo / ui / new_ui / ui / sass / _common.scss @ 77d5883f

History | View | Annotate | Download (10.1 kB)

1
/* Table of Contents
2

    
3
  - Clearfix
4
  - Mixins
5
  - Buttons and Links
6
  - Layout 
7
  - Header
8
  - Actions Bar
9
  - Icon Navigation
10
  - Top Info
11
  - Progress Bar
12
  - Responsive
13

    
14
 */
15

    
16
/* Clearfix -------------------------------------------- */
17

    
18
.clearfix {
19
    zoom:1;
20
    &:before, &:after {
21
        content: "\0020";
22
        display: block;
23
        height: 0;
24
        overflow: hidden;
25
    }
26
    &:after {
27
        clear: both;
28
    }
29
}
30

    
31
/* Mixins ----------------------------------------------- */
32

    
33
@mixin marginPaddingZero() {
34
	margin: 0;
35
	padding: 0;
36
}
37
 
38

    
39
// Establishes the prequisits for sprite with background-image.
40
// Background-position for normal and hover states need to 
41
// be declared separetely
42
@mixin sprite($image, $width, $height){
43
	background:url($image) no-repeat center center;
44
	width: $width;
45
	height:$height;
46
	display: inline-block;
47
	text-indent: -2000px;
48
	overflow: hidden;
49

    
50
}
51

    
52
// Transition for css properties
53
@mixin transition($transition-property, $transition-time, $method) {
54
	-webkit-transition: $transition-property $transition-time $method;
55
	-moz-transition: $transition-property $transition-time $method;
56
	-ms-transition: $transition-property $transition-time $method;
57
	-o-transition: $transition-property $transition-time $method;
58
	transition: $transition-property $transition-time $method;
59
}
60

    
61
// Box-shadow property. For no box-shadow use box-shadow(none)
62
@mixin box-shadow($shadows...) {
63
  -moz-box-shadow: $shadows;
64
  -webkit-box-shadow: $shadows;
65
  box-shadow: $shadows;
66
}
67

    
68
@mixin padding1-0 {
69
	padding: 1px 0;
70
}
71

    
72

    
73
@mixin placeholder {
74
	&.placeholder { @content; }
75
	&:-moz-placeholder { @content; }
76
	&::-moz-placeholder { @content; }
77
	&::-webkit-input-placeholder { @content; }
78
}
79

    
80
// keyframes mixin
81
@mixin keyframes($name) {
82
  @-webkit-keyframes #{$name} {
83
    @content;
84
  }
85
  @-moz-keyframes #{$name} {
86
    @content;
87
  }
88
  @-ms-keyframes #{$name} {
89
    @content;
90
  }
91
  @keyframes #{$name} {
92
    @content;
93
  }
94
}
95
/* Circle and Tags ----------------------------------------------- */
96
.circle {
97
	display:inline-block;
98
    -webkit-border-radius: 999px;
99
    -moz-border-radius: 999px;
100
    border-radius: 999px;
101
    behavior: url(PIE.htc);
102
}
103

    
104
.tags {
105
	text-align:center;
106
	a {
107
		@extend .circle;
108
		width:12px;
109
		height:12px;
110
		margin:0 3px;
111
		&.tag1 { background-color:$secondary-color;}
112
		&.tag2 { background-color:$third-color;}
113
		&.tag3 { background-color:$success-color;}
114
	}
115
}
116

    
117
.tag-demo {
118
	@extend .circle;
119
	width: 18px;
120
	height: 18px;
121
	position: relative;
122
	bottom: -5px;
123
	margin-right: 20px;
124
	&.tag4 { background-color: #ff5e4d;}
125
	&.tag5 { background-color: #25bfda;}
126
	&.tag6 { background-color: #fbf7c5;}
127
	&.tag7 { background-color: #83a697;}
128
}
129

    
130

    
131

    
132
/* Buttons and Links ----------------------------------------------- */
133

    
134

    
135
a {
136
	color:$primary-color;
137
	&:hover {
138
		color:$third-color;
139
		@include transition(background, 300ms, ease-out);
140
	}
141

    
142
	
143
}
144

    
145
.more a .snf-checkbox-checked, .more a .snf-checkbox-unchecked{
146
	color: $net-opt-area-color;
147
}
148

    
149
.btn1 {
150
	border:1px solid $primary-color;
151
	color:$primary-color;
152
	display:inline-block;
153
	padding:10px 20px;
154
	line-height:1em;
155
	text-align:center;
156
	&:hover,
157
	&.current,
158
	&:focus {
159
		border-color:$secondary-color;
160
		background:$secondary-color;
161
		color:#fff;
162
	}
163
	&.current {
164
		cursor:default;
165
	}
166
}
167

    
168
.btn2 {
169
	@extend .btn1;
170
	color:$secondary-color;
171
	background:#fff;
172
	border-color:$secondary-color;
173
	&:hover, 
174
	&.current,
175
	&:focus {
176
		background:transparent;
177
		border-color:#fff;
178
	}
179
}
180

    
181
.btn3 {
182
	@extend .btn1;
183
	color:#fff; 
184
	border-color:#fff;
185
	&:hover, 
186
	&.current,
187
	&:focus {
188
		color:$secondary-color;
189
		background:#fff;
190
		border-color:#fff;
191
	}
192
}
193

    
194
.btn4 {
195
	@extend .btn1;
196
	color:#fff; 
197
	border-color:#fff;
198
	background: $secondary-color;
199
	&:hover, 
200
	&.current,
201
	&:focus {
202
		color: $secondary-color;
203
  		border-color:  $secondary-color;
204
  		background: #fff;
205
	}
206
}
207

    
208
.btn5 {
209
	border:1px solid white;
210
	color:white;
211
	display:inline-block;
212
	padding:0 20px;
213
	line-height:$btn-height - 2px;
214
	height:$btn-height;
215
	text-align:center;
216
	font-size:emCalc(12px);
217
	&:hover,
218
	&:focus {
219
		border-width:2px;
220
		line-height: $btn-height - 4px;
221
		padding:0 19px;
222
		color:white;
223
	}
224
	&.current {
225
		background:white;
226
		color:$secondary-color;
227
	}
228
}
229

    
230
.btn-img {
231
	@extend .btn1;
232
	border-color:$secondary-color;
233
	&:hover,
234
	&:focus {
235
		background:transparent;
236
	}
237
	a {
238
		img,span {
239
			margin-left:5px;
240
		}
241
	}
242
}
243

    
244

    
245
/* Layout ----------------------------------------------- */
246
html,body {
247
	height:100%;
248
}
249

    
250
body {
251
	padding-top:$header-height+$bar-height;
252
}
253

    
254
.overlay-wrapper {
255
	min-height:100%;
256
}
257

    
258
.lt-sidebar {
259
	width:250px;
260
	float:left;
261
	&.nav {
262
		margin-top:0;
263
		font-size:1em;
264
		overflow: auto;
265
	}
266
	&+.main {
267
		overflow:hidden;
268
	}
269
}
270

    
271
.main {
272
	padding:0 $main-padding-horizontal;
273
}
274

    
275
/* Header ----------------------------------------------- */
276

    
277
.header {
278
	position:fixed;
279
	top:0;
280
	left:0;
281
	right:0;
282
	width:100%;
283
	height:$header-height;
284
	line-height:$header-height;
285
	padding:0 $header-padding-horizontal;
286
	background:white;
287
	z-index:100;
288
	.icons-nav {
289
		position:absolute;
290
		left:$header-padding-horizontal;
291
		height:$header-height;
292
		line-height:$header-height;
293
		top:0;
294
		li {
295
			line-height: $header-height;
296
		}
297
	}
298
	.logo {
299
		text-align: center;
300
		a {
301
			position: relative;
302
			top:-5px;
303
			&:focus {
304
				border: 1px solid $secondary-color;
305
				padding: 10px;
306
			}
307
		}
308
		img {
309
			max-height: 30px;			
310
		}
311
		h2 {
312
			display: none;
313
			margin:0;
314
			font-size: 1em;
315
			color:$primary-color;
316
			font-weight: normal;
317
		}
318
	}
319
	.login {
320
		position:absolute;
321
		top:25px;
322
		right:$header-padding-horizontal;
323
		a {
324
			color:$overlay-color;
325
			&:hover {
326
				color:$secondary-color;
327
			}
328
		}
329
		.wrap {
330
			$wr-padd-top:12px;
331
			border:1px solid $overlay-color;
332
			background: white;
333
			color:$overlay-color;
334
			font-size:emCalc(12px);
335
			padding:$wr-padd-top 30px;
336
			line-height:100%;
337
			ul {
338
				padding:0;
339
				margin:0;
340
				list-style: none outside none;
341
				display: none;
342
				li {
343
					list-style: none outside none;
344
					padding:0;
345
					padding-top:$wr-padd-top;
346
				}
347
			}
348
		}
349
	}
350
	
351
}
352

    
353
/* Actions Bar ----------------------------------------------- */
354

    
355
.actions-bar {
356
	position:fixed;
357
	left:0;
358
	top:$header-height;
359
	width:100%;
360
	z-index:15;
361
	text-align:center;
362
	height:$bar-height;
363
	line-height:$bar-height;
364
	color:$overlay-color;
365
	background-color: lighten($primary-color,35%);
366
	a {
367
		color:$overlay-color;
368
	}
369
	h2 {
370
		float: left;
371
		margin:0 0 0 15px;
372
		color: $overlay-color;
373
		font-size: emCalc(12px);
374
		line-height: $bar-height;
375
		font-weight: normal;
376

    
377
	}
378
	.filter-menu {
379
		float:right;
380
		position: relative;
381
		.filter {
382
			padding: 0 10px;
383
			font-size:emCalc(12px);
384
			position: relative;
385
			top:-2px;
386
		}
387
		.options {
388
			display: none;
389
			position: absolute;
390
			right: 0;
391
			top:$bar-height;
392
			width: 120px;
393
			list-style-type: none;
394
			padding: 10px 15px 15px;
395
			text-align: left;
396
			margin:0;
397
		}
398
		&.current {
399
			.options {
400
				background-color: lighten($primary-color,10%);
401
				display: inline-block;
402
				a {
403
					color: white;
404
				}
405
			}
406
		}
407

    
408

    
409
	}
410
	
411
	.row {
412
		position: relative;
413
		height: $bar-height;
414
	}
415

    
416
	.hd-search {
417
		$icon-dim :24px;
418
		width: $icon-dim;
419
		overflow:hidden;
420
		position:relative;
421
		float: right;
422
		height: $bar-height;
423
		margin-right: -6px;
424
		@include transition(width, 0.3s, linear);
425
		-webkit-backface-visibility: hidden;
426
		.hd-icon-search {
427
			color: $primary-color;
428
			display: block;
429
			width: $bar-height;
430
			height: $bar-height;
431
			line-height: $bar-height;
432
			float: right;
433
			&:hover {
434
				cursor:pointer;
435
				color:$secondary-color;
436
			}
437
			z-index:1;
438
			position: relative;
439
			background: lighten($primary-color,35%);
440
		}
441
		.hd-search-input {
442
			border: transparent;
443
			background-color: white;
444
			color: $overlay-color;
445
			padding: 0 10px;
446
			width: 160px;
447
			font-size: emCalc(10px);
448
			box-shadow: none;
449
			height:0.7* $bar-height;
450
			line-height: 0.7* $bar-height;
451
			position: absolute;
452
			top:4px;
453
			left:0;
454
			@include placeholder {
455
				color:$overlay-color;
456
			}
457
		}
458
		&.hd-open {
459
			width: 190px;
460
		}
461
	}
462
	.view-type {
463
		float: right;
464
		margin-right:15px;
465
		.current, a:hover {
466
			color: $secondary-color;
467
		}
468
		.snf-listview {
469
			position: relative;
470
			top: 3px;
471
			margin-right: 3px;
472
			font-size: 22px;
473
		}
474
		.snf-gridview {
475
				font-size: 22px;
476
				position: relative;
477
				top: 3px;
478
				margin-right: 3px;
479
		}
480
		
481
	}
482
}
483
.new-btn {
484
	position: absolute;
485
	left:$header-padding-horizontal;
486
	bottom:0;
487
	height:$bar-height;
488
	a {
489
		@extend .btn1;
490
		span {
491
			font-size:emCalc(20px);
492
		}
493
	}
494
}
495

    
496
/* Icons Navigation ----------------------------------------------- */
497

    
498
.icons-nav {
499
	@include marginPaddingZero();
500
	li {
501
		display: inline-block;
502
		margin-right:$icons-nav-margin-horizontal;
503
		font-size: emCalc(26px);
504
		line-height: 1em;
505
		a {
506
			color:$black;
507
			&:hover,&.current {
508
				color:$third-color;
509
			}
510
		}
511
	}
512
}
513

    
514

    
515

    
516

    
517
/* Top info  ----------------------------------------------- */
518

    
519
.top-info {
520
	padding:50px 100px;
521
	position: relative;
522
	z-index:10;
523
	display:none;
524
	.close {
525
		position: absolute;
526
		right:$header-padding-horizontal;
527
		top:50px;
528
		@include sprite('../images/info-close.png', 31px, 30px);
529
	}
530
}
531

    
532

    
533
.info.error {
534
	background:$error-color;
535
	color:#fff;
536
}
537

    
538

    
539
.info.alert {
540
	background:$alert-color;
541
	color:#fff;
542
}
543

    
544
.info.warning {
545
	background:$primary-color;
546
	color:#fff;
547
}
548

    
549
.info.success {
550
	background:$success-color;
551
	color:#fff;
552
}
553

    
554
.border-bottom-style1 {
555
	padding-bottom:20px;
556
	margin-bottom:20px;
557
	border-bottom:1px dashed $primary-color;
558
}
559

    
560

    
561
/* Progress Bar ----------------------------------------------- */
562

    
563
.progress-bar {
564
	position: fixed;
565
	bottom:0;
566
	left:0;
567
	border-top:1px solid $secondary-color;
568
	width:100%;
569
	background:#fff;
570
	padding:20px 0 20px 310px;
571
	color:$primary-color;
572
	span.counter {
573
		display: inline-block;
574
		margin-right:20px;
575
		float:left;
576
	}
577
	div.progress-wrap {
578
		display:inline-block;
579
		float:left;
580
		width:40%;
581
		margin-right:60px;
582
		.progress {
583
			position: relative;
584
			top:2px;
585
		}
586
	}
587
	span.more {
588
		display: inline-block;
589
	}
590
}
591

    
592

    
593
/* Responive ------------------------------------------------ */
594
@media only screen and (max-width: $small-mobile) {
595
}
596

    
597
@media only screen and (max-width: $small-screen) {
598
	body {
599
		padding-top:0
600
	}
601
	.header, .actions-bar {
602
		position:static;
603
		z-index: auto;
604
	}
605
	.actions-bar {
606
		top:2*$header-height;
607
	}
608
	.header {
609
		height: $header-height-responsive;
610
		line-height:50px;
611
		.icons-nav {
612
			position: static;
613
		}
614
	}
615
}