Statistics
| Branch: | Tag: | Revision:

root / snf-cyclades-app / synnefo / ui / new_ui / ui / sass / _common.scss @ 3fdc0d03

History | View | Annotate | Download (10.5 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

    
81
/* Circle and Tags ----------------------------------------------- */
82
.circle {
83
	display:inline-block;
84
    -webkit-border-radius: 999px;
85
    -moz-border-radius: 999px;
86
    border-radius: 999px;
87
    behavior: url(PIE.htc);
88
}
89

    
90
.tags {
91
	text-align:center;
92
	a {
93
		@extend .circle;
94
		width:12px;
95
		height:12px;
96
		margin:0 3px;
97
		&.tag1 { background-color:$secondary-color;}
98
		&.tag2 { background-color:$third-color;}
99
		&.tag3 { background-color:$success-color;}
100
	}
101
}
102

    
103
.tag-demo {
104
	@extend .circle;
105
	width: 18px;
106
	height: 18px;
107
	position: relative;
108
	bottom: -5px;
109
	margin-right: 20px;
110
	&.tag4 { background-color: #ff5e4d;}
111
	&.tag5 { background-color: #25bfda;}
112
	&.tag6 { background-color: #fbf7c5;}
113
	&.tag7 { background-color: #83a697;}
114
}
115

    
116

    
117

    
118
/* Buttons and Links ----------------------------------------------- */
119

    
120

    
121
a {
122
	color:$primary-color;
123
	&:hover {
124
		color:$third-color;
125
		@include transition(background, 300ms, ease-out);
126
	}
127

    
128
	
129
}
130

    
131
.more a .snf-checkbox-checked, .more a .snf-checkbox-unchecked{
132
	color: $net-opt-area-color;
133
}
134

    
135
.btn1 {
136
	border:1px solid $primary-color;
137
	color:$primary-color;
138
	display:inline-block;
139
	padding:10px 20px;
140
	line-height:1em;
141
	text-align:center;
142
	&:hover,
143
	&.current,
144
	&:focus {
145
		border-color:$secondary-color;
146
		background:$secondary-color;
147
		color:#fff;
148
	}
149
	&.current {
150
		cursor:default;
151
	}
152
}
153

    
154
.btn2 {
155
	@extend .btn1;
156
	color:$secondary-color;
157
	background:#fff;
158
	border-color:$secondary-color;
159
	&:hover, 
160
	&.current,
161
	&:focus {
162
		background:transparent;
163
		border-color:#fff;
164
	}
165
}
166

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

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

    
194
.btn5 {
195
	border:1px solid white;
196
	color:white;
197
	display:inline-block;
198
	padding:0 20px;
199
	line-height:$btn-height - 2px;
200
	height:$btn-height;
201
	text-align:center;
202
	font-size:emCalc(12px);
203
	&:hover,
204
	&:focus {
205
		border-width:2px;
206
		line-height: $btn-height - 4px;
207
		padding:0 19px;
208
		color:white;
209
	}
210
	&.current {
211
		background:white;
212
		color:$secondary-color;
213
	}
214
}
215

    
216
.btn-img {
217
	@extend .btn1;
218
	border-color:$secondary-color;
219
	&:hover,
220
	&:focus {
221
		background:transparent;
222
	}
223
	a {
224
		img,span {
225
			margin-left:5px;
226
		}
227
	}
228
}
229

    
230

    
231
/* Layout ----------------------------------------------- */
232
html,body {
233
	height:100%;
234
}
235

    
236
body {
237
	padding-top:$header-height+$bar-height;
238
}
239

    
240
.overlay-wrapper {
241
	min-height:100%;
242
}
243

    
244
.lt-sidebar {
245
	width:250px;
246
	float:left;
247
	&.nav {
248
		margin-top:0;
249
		font-size:1em;
250
		overflow: auto;
251
	}
252
	&+.main {
253
		overflow:hidden;
254
	}
255
}
256

    
257
.main {
258
	padding:0 10px;
259
}
260

    
261
/* Header ----------------------------------------------- */
262

    
263
.header {
264
	position:fixed;
265
	top:0;
266
	left:0;
267
	right:0;
268
	width:100%;
269
	height:$header-height;
270
	line-height:$header-height;
271
	padding:0 $header-padding-horizontal;
272
	background:white;
273
	z-index:100;
274
	.icons-nav {
275
		position:absolute;
276
		left:$header-padding-horizontal - $icons-nav-margin-horizontal;
277
		height:$header-height;
278
		line-height:$header-height;
279
		top:0;
280
		li {
281
			line-height: $header-height;
282
		}
283
	}
284
	.logo {
285
		text-align: center;
286
		a {
287
			position: relative;
288
			top:-5px;
289
			&:focus {
290
				border: 1px solid $secondary-color;
291
				padding: 10px;
292
			}
293
		}
294
		img {
295
			max-height: 30px;			
296
		}
297
		h2 {
298
			display: none;
299
			margin:0;
300
			font-size: 1em;
301
			color:$primary-color;
302
			font-weight: normal;
303
		}
304
	}
305
	.login {
306
		position:absolute;
307
		top:25px;
308
		right:$header-padding-horizontal;
309
		.wrap {
310
			border:1px solid $overlay-color;
311
			background: white;
312
			color:$overlay-color;
313
			font-size:emCalc(10px);
314
			padding:10px 20px;
315
			line-height:100%;
316
			ul {
317
				display: none;
318
				padding:0;
319
				margin:0;
320
				list-style: none outside none;
321
				li {
322
					list-style: none outside none;
323
					padding:0;
324
					padding-top:10px;
325

    
326
				}
327
			}
328
			&:hover {
329
				ul {
330
					display: block;
331
				}
332
			}
333
		}
334
	}
335
	
336
}
337

    
338
/* Actions Bar ----------------------------------------------- */
339

    
340
.actions-bar {
341
	position:fixed;
342
	left:0;
343
	top:$header-height;
344
	width:100%;
345
	z-index:15;
346
	text-align:center;
347
	height:$bar-height;
348
	line-height:$bar-height;
349
	color:$overlay-color;
350
	background-color: lighten($primary-color,35%);
351
	a {
352
		color:$overlay-color;
353
	}
354
	h2 {
355
		float: left;
356
		margin-left: 15px;
357
		color: $overlay-color;
358
		font-size: emCalc(12px);
359
		line-height: $bar-height;
360
		font-weight: normal;
361
	}
362
	.filter-menu {
363
		float:right;
364
		position: relative;
365
		.filter {
366
			padding: 0 10px;
367
			font-size:emCalc(12px);
368
			position: relative;
369
			top:-2px;
370
		}
371
		.options {
372
			display: none;
373
			position: absolute;
374
			right: 0;
375
			top:$bar-height;
376
			width: 120px;
377
			list-style-type: none;
378
			padding: 10px 15px 15px;
379
			text-align: left;
380
			margin:0;
381
		}
382
		&.current {
383
			.options {
384
				background-color: lighten($primary-color,10%);
385
				display: inline-block;
386
				a {
387
					color: white;
388
				}
389
			}
390
		}
391

    
392

    
393
	}
394
	
395
	.row {
396
		position: relative;
397
		height: $bar-height;
398
	}
399

    
400
	.hd-search {
401
		$icon-dim :24px;
402
		width: $icon-dim;
403
		overflow:hidden;
404
		position:relative;
405
		float: right;
406
		height: $bar-height;
407
		-webkit-transition: width 0.3s;
408
	    -moz-transition: width 0.3s;
409
	    transition: width 0.3s;
410
	    -webkit-backface-visibility: hidden;
411
		.hd-icon-search {
412
			color: $primary-color;
413
			display: block;
414
			width: $bar-height;
415
			height: $bar-height;
416
			line-height: $bar-height;
417
			float: left;
418
			&:hover {
419
				cursor:pointer;
420
			}
421
		}
422
		.hd-search-input {
423
			border: transparent;
424
			background-color: white;
425
			color: $overlay-color;
426
			padding: 0 10px;
427
			width: 160px;
428
			font-size: emCalc(10px);
429
			box-shadow: none;
430
			height:0.7* $bar-height;
431
			line-height: 0.7* $bar-height;
432
			position: absolute;
433
			top:4px;
434
			left:$bar-height;
435
			@include placeholder {
436
				color:$overlay-color;
437
			}
438
		}
439
		&.hd-open {
440
			width: 190px;
441
		}
442
	}
443

    
444
	.sb-search {
445
		$icon-dim :24px;
446
		float: right;
447
		margin-top:3px;
448
		min-width: $icon-dim;
449
		height: $icon-dim;
450
		.sb-icon-search {
451
			height: $icon-dim;
452
			width: $icon-dim;
453
			color: $primary-color;
454
		}
455
		form {
456
			display: inline-block;
457
			margin:0;
458
			.input-wrap {
459
				width:180px;
460
				overflow: hidden;
461
			}
462
			input {
463
				border: transparent;
464
				background-color: white;
465
				color: $overlay-color;
466
				padding: 0 10px;
467
				width: 160px;
468
				font-size: emCalc(10px);
469
				box-shadow: none;
470
				height:0.7* $bar-height;
471
				line-height: 0.7* $bar-height;
472
				position: relative;
473
				top:-3px;
474
				@include placeholder {
475
					color:$overlay-color;
476
				}
477
			}
478
		}
479
		&.sb-search-open {
480
			width:220px;
481
		}
482
	}
483

    
484
	.view-type {
485
		float: right;
486
		margin-right:15px;
487
		.current,
488
		a:hover {
489
			color: $secondary-color;
490
		}
491
		.snf-list {
492
				margin-right: 6px;
493
				font-size: 17px;
494
		}
495
		.snf-layout {
496
				font-size: 1.1em;
497
		}
498
		
499
	}
500
}
501
.new-btn {
502
	position: absolute;
503
	left:$header-padding-horizontal;
504
	bottom:0;
505
	height:$bar-height;
506
	a {
507
		@extend .btn1;
508
		span {
509
			font-size:emCalc(20px);
510
		}
511
	}
512
}
513

    
514
/* Icons Navigation ----------------------------------------------- */
515

    
516
.icons-nav {
517
	@include marginPaddingZero();
518
	li {
519
		display: inline-block;
520
		margin:0 $icons-nav-margin-horizontal;
521
		font-size: emCalc(26px);
522
		line-height: 1em;
523
		padding-bottom:5px;
524
		width: 30px;
525
		text-align:center;
526
		overflow: hidden;
527
		a {
528
			color:$black;
529
			&:hover,&.current {
530
				// font-size:30px;
531
				color:$third-color;
532
			}
533
		}
534
	}
535
}
536

    
537

    
538

    
539

    
540
/* Top info  ----------------------------------------------- */
541

    
542
.top-info {
543
	padding:50px 100px;
544
	position: relative;
545
	z-index:10;
546
	display:none;
547
	.close {
548
		position: absolute;
549
		right:$header-padding-horizontal;
550
		top:50px;
551
		@include sprite('../images/info-close.png', 31px, 30px);
552
	}
553
}
554

    
555

    
556
.info.error {
557
	background:$error-color;
558
	color:#fff;
559
}
560

    
561

    
562
.info.alert {
563
	background:$alert-color;
564
	color:#fff;
565
}
566

    
567
.info.warning {
568
	background:$primary-color;
569
	color:#fff;
570
}
571

    
572
.info.success {
573
	background:$success-color;
574
	color:#fff;
575
}
576

    
577
.border-bottom-style1 {
578
	padding-bottom:20px;
579
	margin-bottom:20px;
580
	border-bottom:1px dashed $primary-color;
581
}
582

    
583

    
584
/* Progress Bar ----------------------------------------------- */
585

    
586
.progress-bar {
587
	position: fixed;
588
	bottom:0;
589
	left:0;
590
	border-top:1px solid $secondary-color;
591
	width:100%;
592
	background:#fff;
593
	padding:20px 0 20px 310px;
594
	color:$primary-color;
595
	span.counter {
596
		display: inline-block;
597
		margin-right:20px;
598
		float:left;
599
	}
600
	div.progress-wrap {
601
		display:inline-block;
602
		float:left;
603
		width:40%;
604
		margin-right:60px;
605
		.progress {
606
			position: relative;
607
			top:2px;
608
		}
609
	}
610
	span.more {
611
		display: inline-block;
612
	}
613
}
614

    
615

    
616
/* Responive ------------------------------------------------ */
617
@media only screen and (max-width: $small-mobile) {
618
}
619

    
620
@media only screen and (max-width: $small-screen) {
621
	body {
622
		padding-top:0
623
	}
624
	.header, .actions-bar {
625
		position:static;
626
		z-index: auto;
627
	}
628
	.actions-bar {
629
		top:2*$header-height;
630
	}
631
	.header {
632
		height: $header-height-responsive;
633
		line-height:50px;
634
		.icons-nav {
635
			position: static;
636
		}
637
	}
638
}