Statistics
| Branch: | Tag: | Revision:

root / snf-cyclades-app / synnefo / ui / new_ui / ui / sass / _common.scss @ 5ffce177

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

    
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 40px;
259
	overflow:hidden;
260
}
261

    
262

    
263
.row {
264
	padding:0 70px;
265
}
266

    
267
/* Header ----------------------------------------------- */
268

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

    
323
/* Actions Bar ----------------------------------------------- */
324

    
325
.actions-bar {
326
	position:fixed;
327
	left:0;
328
	top:$header-height;
329
	width:100%;
330
	z-index:15;
331
	text-align:center;
332
	height:$bar-height;
333
	line-height:$bar-height;
334
	background:white;
335
	.border-dashed {
336
		background-image: url("../images/border-dashes.png");
337
		background-repeat: repeat-x;
338
		height: 4px;
339
		position: relative;
340
		top: -3px;
341
	}
342
	.row {
343
		position: relative;
344
		height: $bar-height;
345
	}
346
	ul {
347
		margin:0;
348
		li {
349
			list-style: none outside none;
350
			display: inline-block;
351
			line-height: $bar-height;
352
			a {
353
				display: block;
354
				color:lighten($primary-color,30%);
355
				width:100%;
356
				padding:0 20px;
357
				border:1px solid transparent;
358
				&.active {
359
					color:$primary-color;
360
					&:hover {
361
						color:$secondary-color;
362
						cursor: pointer;
363
					}
364
				}
365
				&:hover {
366
					cursor:default;
367
				}
368

    
369
			}
370
		}
371
	}
372

    
373
	#sb-search {
374
		height: 50px;
375
		position: absolute;
376
		right: 75px;
377
		top: -10px;
378
		.sb-icon-search {
379
			background-color: white;
380
			color: $primary-color;
381
			top: -6px;
382
			font-size: 20px;
383
			width:50px;
384
			&:hover {
385
				color: $secondary-color;
386
			}
387
		}
388
		.sb-search-input {
389
			background:transparent;
390
			border:0 none;
391
			width: 300px;
392
			margin-right: 51px;
393
			margin: 0;
394
			height: 52px;
395
			&:focus {
396
				outline: 0 none;
397
				border:0 none;
398
				@include box-shadow(none);
399
			}
400
			@include placeholder {
401
			    color:$secondary-color;
402
			}
403
		}
404
	}
405

    
406
	.view-type {
407
		display:inline-block;
408
		position: absolute;
409
		right: 15px;
410
		top: 0px;
411
		.current {
412
			color: $secondary-color;
413
		}
414
		.snf-list {
415
				margin-right: 4px;
416
				font-size: 24px;
417
			}
418
		.snf-layout {
419
				font-size: 25px;
420
			}
421
		
422
	}
423
}
424
.new-btn {
425
	position: absolute;
426
	left:$header-padding-horizontal;
427
	bottom:0;
428
	height:$bar-height;
429
	a {
430
		@extend .btn1;
431
		span {
432
			font-size:emCalc(20px);
433
		}
434
	}
435
}
436

    
437
/* Icons Navigation ----------------------------------------------- */
438

    
439
.icons-nav {
440
	@include marginPaddingZero();
441
	li {
442
		display: inline-block;
443
		margin:0 $icons-nav-margin-horizontal;
444
		font-size: emCalc(26px);
445
		line-height: 1em;
446
		padding-bottom:5px;
447
		width: 30px;
448
		text-align:center;
449
		overflow: hidden;
450
		a {
451
			color:$black;
452
			&:hover,&.current {
453
				// font-size:30px;
454
				color:$third-color;
455
			}
456
		}
457
	}
458
}
459

    
460

    
461

    
462

    
463
/* Top info  ----------------------------------------------- */
464

    
465
.top-info {
466
	padding:50px 100px;
467
	position: relative;
468
	z-index:10;
469
	display:none;
470
	.close {
471
		position: absolute;
472
		right:$header-padding-horizontal;
473
		top:50px;
474
		@include sprite('../images/info-close.png', 31px, 30px);
475
	}
476
}
477

    
478

    
479
.info.error {
480
	background:$error-color;
481
	color:#fff;
482
}
483

    
484

    
485
.info.alert {
486
	background:$alert-color;
487
	color:#fff;
488
}
489

    
490
.info.warning {
491
	background:$primary-color;
492
	color:#fff;
493
}
494

    
495
.info.success {
496
	background:$success-color;
497
	color:#fff;
498
}
499

    
500
.border-bottom-style1 {
501
	padding-bottom:20px;
502
	margin-bottom:20px;
503
	border-bottom:1px dashed $primary-color;
504
}
505

    
506

    
507
/* Progress Bar ----------------------------------------------- */
508

    
509
.progress-bar {
510
	position: fixed;
511
	bottom:0;
512
	left:0;
513
	border-top:1px solid $secondary-color;
514
	width:100%;
515
	background:#fff;
516
	padding:20px 0 20px 310px;
517
	color:$primary-color;
518
	span.counter {
519
		display: inline-block;
520
		margin-right:20px;
521
		float:left;
522
	}
523
	div.progress-wrap {
524
		display:inline-block;
525
		float:left;
526
		width:40%;
527
		margin-right:60px;
528
		.progress {
529
			position: relative;
530
			top:2px;
531
		}
532
	}
533
	span.more {
534
		display: inline-block;
535
	}
536
}
537

    
538

    
539
/* Responive ------------------------------------------------ */
540
@media only screen and (max-width: $small-mobile) {
541
}
542

    
543
@media only screen and (max-width: $small-screen) {
544
	body {
545
		padding-top:0
546
	}
547
	.header, .actions-bar {
548
		position:static;
549
		z-index: auto;
550
	}
551
	.actions-bar {
552
		top:2*$header-height;
553
	}
554
	.header {
555
		height: $header-height-responsive;
556
		line-height:50px;
557
		.icons-nav {
558
			position: static;
559
		}
560
	}
561
}