Statistics
| Branch: | Tag: | Revision:

root / snf-cyclades-app / synnefo / ui / new_ui / ui / sass / _common.scss @ 656c135b

History | View | Annotate | Download (10.2 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
				display: none;
339
				padding:0;
340
				margin:0;
341
				list-style: none outside none;
342
				li {
343
					list-style: none outside none;
344
					padding:0;
345
					padding-top:$wr-padd-top;
346

    
347

    
348
				}
349
			}
350
			&:hover {
351
				ul {
352
					display: block;
353
				}
354
			}
355
		}
356
	}
357
	
358
}
359

    
360
/* Actions Bar ----------------------------------------------- */
361

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

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

    
415

    
416
	}
417
	
418
	.row {
419
		position: relative;
420
		height: $bar-height;
421
	}
422

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

    
505
/* Icons Navigation ----------------------------------------------- */
506

    
507
.icons-nav {
508
	@include marginPaddingZero();
509
	li {
510
		display: inline-block;
511
		margin-right:$icons-nav-margin-horizontal;
512
		font-size: emCalc(26px);
513
		line-height: 1em;
514
		a {
515
			color:$black;
516
			&:hover,&.current {
517
				color:$third-color;
518
			}
519
		}
520
	}
521
}
522

    
523

    
524

    
525

    
526
/* Top info  ----------------------------------------------- */
527

    
528
.top-info {
529
	padding:50px 100px;
530
	position: relative;
531
	z-index:10;
532
	display:none;
533
	.close {
534
		position: absolute;
535
		right:$header-padding-horizontal;
536
		top:50px;
537
		@include sprite('../images/info-close.png', 31px, 30px);
538
	}
539
}
540

    
541

    
542
.info.error {
543
	background:$error-color;
544
	color:#fff;
545
}
546

    
547

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

    
553
.info.warning {
554
	background:$primary-color;
555
	color:#fff;
556
}
557

    
558
.info.success {
559
	background:$success-color;
560
	color:#fff;
561
}
562

    
563
.border-bottom-style1 {
564
	padding-bottom:20px;
565
	margin-bottom:20px;
566
	border-bottom:1px dashed $primary-color;
567
}
568

    
569

    
570
/* Progress Bar ----------------------------------------------- */
571

    
572
.progress-bar {
573
	position: fixed;
574
	bottom:0;
575
	left:0;
576
	border-top:1px solid $secondary-color;
577
	width:100%;
578
	background:#fff;
579
	padding:20px 0 20px 310px;
580
	color:$primary-color;
581
	span.counter {
582
		display: inline-block;
583
		margin-right:20px;
584
		float:left;
585
	}
586
	div.progress-wrap {
587
		display:inline-block;
588
		float:left;
589
		width:40%;
590
		margin-right:60px;
591
		.progress {
592
			position: relative;
593
			top:2px;
594
		}
595
	}
596
	span.more {
597
		display: inline-block;
598
	}
599
}
600

    
601

    
602
/* Responive ------------------------------------------------ */
603
@media only screen and (max-width: $small-mobile) {
604
}
605

    
606
@media only screen and (max-width: $small-screen) {
607
	body {
608
		padding-top:0
609
	}
610
	.header, .actions-bar {
611
		position:static;
612
		z-index: auto;
613
	}
614
	.actions-bar {
615
		top:2*$header-height;
616
	}
617
	.header {
618
		height: $header-height-responsive;
619
		line-height:50px;
620
		.icons-nav {
621
			position: static;
622
		}
623
	}
624
}