Statistics
| Branch: | Tag: | Revision:

root / snf-cyclades-app / synnefo / ui / new_ui / ui / sass / _common.scss @ 27a54f35

History | View | Annotate | Download (10.9 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 10px;
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 - $icons-nav-margin-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
		-webkit-transition: width 0.3s;
431
	    -moz-transition: width 0.3s;
432
	    transition: width 0.3s;
433
	    -webkit-backface-visibility: hidden;
434
		.hd-icon-search {
435
			color: $primary-color;
436
			display: block;
437
			width: $bar-height;
438
			height: $bar-height;
439
			line-height: $bar-height;
440
			float: right;
441
			&:hover {
442
				cursor:pointer;
443
				color:$secondary-color;
444
			}
445
			z-index:1;
446
			position: relative;
447
			background: lighten($primary-color,35%);
448
		}
449
		.hd-search-input {
450
			border: transparent;
451
			background-color: white;
452
			color: $overlay-color;
453
			padding: 0 10px;
454
			width: 160px;
455
			font-size: emCalc(10px);
456
			box-shadow: none;
457
			height:0.7* $bar-height;
458
			line-height: 0.7* $bar-height;
459
			position: absolute;
460
			top:4px;
461
			left:0;
462
			@include placeholder {
463
				color:$overlay-color;
464
			}
465
		}
466
		&.hd-open {
467
			width: 190px;
468
		}
469
	}
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
	.view-type {
512
		float: right;
513
		margin-right:15px;
514
		.current,
515
		a:hover {
516
			color: $secondary-color;
517
		}
518
		.snf-list {
519
				margin-right: 6px;
520
				font-size: 17px;
521
		}
522
		.snf-layout {
523
				font-size: 1.1em;
524
		}
525
		
526
	}
527
}
528
.new-btn {
529
	position: absolute;
530
	left:$header-padding-horizontal;
531
	bottom:0;
532
	height:$bar-height;
533
	a {
534
		@extend .btn1;
535
		span {
536
			font-size:emCalc(20px);
537
		}
538
	}
539
}
540

    
541
/* Icons Navigation ----------------------------------------------- */
542

    
543
.icons-nav {
544
	@include marginPaddingZero();
545
	li {
546
		display: inline-block;
547
		margin:0 $icons-nav-margin-horizontal;
548
		font-size: emCalc(26px);
549
		line-height: 1em;
550
		padding-bottom:5px;
551
		width: 30px;
552
		text-align:center;
553
		overflow: hidden;
554
		a {
555
			color:$black;
556
			&:hover,&.current {
557
				// font-size:30px;
558
				color:$third-color;
559
			}
560
		}
561
	}
562
}
563

    
564

    
565

    
566

    
567
/* Top info  ----------------------------------------------- */
568

    
569
.top-info {
570
	padding:50px 100px;
571
	position: relative;
572
	z-index:10;
573
	display:none;
574
	.close {
575
		position: absolute;
576
		right:$header-padding-horizontal;
577
		top:50px;
578
		@include sprite('../images/info-close.png', 31px, 30px);
579
	}
580
}
581

    
582

    
583
.info.error {
584
	background:$error-color;
585
	color:#fff;
586
}
587

    
588

    
589
.info.alert {
590
	background:$alert-color;
591
	color:#fff;
592
}
593

    
594
.info.warning {
595
	background:$primary-color;
596
	color:#fff;
597
}
598

    
599
.info.success {
600
	background:$success-color;
601
	color:#fff;
602
}
603

    
604
.border-bottom-style1 {
605
	padding-bottom:20px;
606
	margin-bottom:20px;
607
	border-bottom:1px dashed $primary-color;
608
}
609

    
610

    
611
/* Progress Bar ----------------------------------------------- */
612

    
613
.progress-bar {
614
	position: fixed;
615
	bottom:0;
616
	left:0;
617
	border-top:1px solid $secondary-color;
618
	width:100%;
619
	background:#fff;
620
	padding:20px 0 20px 310px;
621
	color:$primary-color;
622
	span.counter {
623
		display: inline-block;
624
		margin-right:20px;
625
		float:left;
626
	}
627
	div.progress-wrap {
628
		display:inline-block;
629
		float:left;
630
		width:40%;
631
		margin-right:60px;
632
		.progress {
633
			position: relative;
634
			top:2px;
635
		}
636
	}
637
	span.more {
638
		display: inline-block;
639
	}
640
}
641

    
642

    
643
/* Responive ------------------------------------------------ */
644
@media only screen and (max-width: $small-mobile) {
645
}
646

    
647
@media only screen and (max-width: $small-screen) {
648
	body {
649
		padding-top:0
650
	}
651
	.header, .actions-bar {
652
		position:static;
653
		z-index: auto;
654
	}
655
	.actions-bar {
656
		top:2*$header-height;
657
	}
658
	.header {
659
		height: $header-height-responsive;
660
		line-height:50px;
661
		.icons-nav {
662
			position: static;
663
		}
664
	}
665
}