Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (8 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
/* Circle and Tags ----------------------------------------------- */
73
.circle {
74
	display:inline-block;
75
    -webkit-border-radius: 999px;
76
    -moz-border-radius: 999px;
77
    border-radius: 999px;
78
    behavior: url(PIE.htc);
79
}
80

    
81
.tags {
82
	text-align:center;
83
	a {
84
		@extend .circle;
85
		width:12px;
86
		height:12px;
87
		margin:0 3px;
88
		&.tag1 { background-color:$secondary-color;}
89
		&.tag2 { background-color:$third-color;}
90
		&.tag3 { background-color:$success-color;}
91
	}
92
}
93

    
94
.tag-demo {
95
	@extend .circle;
96
	width: 22px;
97
	height: 22px;
98
	position: relative;
99
	bottom: -5px;
100
	margin-right: 20px;
101
	&.tag4 { background-color: #ff5e4d;}
102
	&.tag5 { background-color: #25bfda;}
103
	&.tag6 { background-color: #fbf7c5;}
104
	&.tag7 { background-color: #83a697;}
105
}
106

    
107

    
108

    
109
/* Buttons and Links ----------------------------------------------- */
110

    
111

    
112
a {
113
	color:$secondary-color;
114
	&:hover {
115
		color:$third-color;
116
		@include transition(background, 300ms, ease-out);
117
	}
118

    
119
	
120
}
121

    
122
.more a .snf-checkbox-checked, .more a .snf-checkbox-unchecked{
123
	color: $net-opt-area-color;
124
}
125

    
126
.btn1 {
127
	border:1px solid $primary-color;
128
	color:$primary-color;
129
	display:inline-block;
130
	padding:10px 20px;
131
	line-height:1em;
132
	text-align:center;
133
	&:hover,
134
	&.current,
135
	&:focus {
136
		border-color:$secondary-color;
137
		background:$secondary-color;
138
		color:#fff;
139
	}
140
	&.current {
141
		cursor:default;
142
	}
143
}
144

    
145
.btn2 {
146
	@extend .btn1;
147
	color:$secondary-color;
148
	background:#fff;
149
	border-color:$secondary-color;
150
	&:hover, 
151
	&.current,
152
	&:focus {
153
		background:transparent;
154
		border-color:#fff;
155
	}
156
}
157

    
158
.btn3 {
159
	@extend .btn1;
160
	color:#fff; 
161
	border-color:#fff;
162
	&:hover, 
163
	&.current,
164
	&:focus {
165
		color:$secondary-color;
166
		background:#fff;
167
		border-color:#fff;
168
	}
169
}
170

    
171
.btn4 {
172
	@extend .btn1;
173
	color:#fff; 
174
	border-color:#fff;
175
	background: $secondary-color;
176
	&:hover, 
177
	&.current,
178
	&:focus {
179
		color: $secondary-color;
180
  		border-color:  $secondary-color;
181
  		background: #fff;
182
	}
183
}
184

    
185
.btn5 {
186
	border:1px solid white;
187
	color:white;
188
	display:inline-block;
189
	padding:0 20px;
190
	line-height:$btn-height - 2px;
191
	height:$btn-height;
192
	text-align:center;
193
	font-size:emCalc(12px);
194
	&:hover,
195
	&:focus {
196
		border-width:2px;
197
		line-height: $btn-height - 4px;
198
		padding:0 19px;
199
	}
200
	&.current {
201
		background:white;
202
		color:$secondary-color;
203
	}
204
}
205

    
206
.btn-img {
207
	@extend .btn1;
208
	border-color:$secondary-color;
209
	&:hover,
210
	&:focus {
211
		background:transparent;
212
	}
213
	a {
214
		img,span {
215
			margin-left:5px;
216
		}
217
	}
218
}
219

    
220

    
221
/* Layout ----------------------------------------------- */
222
html,body {
223
	height:100%;
224
}
225

    
226
body {
227
	padding-top:$header-height+$bar-height;
228
}
229

    
230
.overlay-wrapper {
231
	min-height:100%;
232
}
233

    
234
.lt-sidebar {
235
	width:250px;
236
	float:left;
237
	&.nav {
238
		margin-top:0;
239
		font-size:1em;
240
		overflow: auto;
241
	}
242
	&+.main {
243
		overflow:hidden;
244
	}
245
}
246

    
247
.main {
248
	padding:0 40px;
249
	overflow:hidden;
250
}
251

    
252

    
253
.row {
254
	padding:0 40px;
255
}
256

    
257
/* Header ----------------------------------------------- */
258

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

    
312
/* Actions Bar ----------------------------------------------- */
313

    
314
.actions-bar {
315
	position:fixed;
316
	left:0;
317
	top:$header-height;
318
	width:100%;
319
	z-index:15;
320
	text-align:center;
321
	height:$bar-height;
322
	line-height:$bar-height;
323
	background:white;
324
	border-bottom:1px solid $primary-color;
325
	.row {
326
		position: relative;
327
		height: $bar-height;
328
	}
329
	ul {
330
		margin:0;
331
		li {
332
			list-style: none outside none;
333
			display: inline-block;
334
			line-height: $bar-height;
335
			a {
336
				display: block;
337
				color:lighten($primary-color,30%);
338
				width:100%;
339
				padding:0 20px;
340
				border:1px solid transparent;
341
				&.active {
342
					color:$primary-color;
343
					&:hover {
344
						color:$secondary-color;
345
						cursor: pointer;
346
					}
347
				}
348
				&:hover {
349
					cursor:default;
350
				}
351

    
352
			}
353
		}
354
	}
355
}
356
.new-btn {
357
	position: absolute;
358
	left:$header-padding-horizontal;
359
	bottom:0;
360
	height:$bar-height;
361
	a {
362
		@extend .btn1;
363
		span {
364
			font-size:emCalc(20px);
365
		}
366
	}
367
}
368

    
369
/* Icons Navigation ----------------------------------------------- */
370

    
371
.icons-nav {
372
	@include marginPaddingZero();
373
	li {
374
		display: inline-block;
375
		margin:0 $icons-nav-margin-horizontal;
376
		font-size: emCalc(23px);
377
		line-height: 1em;
378
		padding-bottom:5px;
379
		width: 30px;
380
		text-align:center;
381
		overflow: hidden;
382
		a {
383
			color:$black;
384
			&:hover,&.current {
385
				font-size:30px;
386
				color:$third-color;
387
			}
388
		}
389
	}
390
}
391

    
392

    
393

    
394

    
395
/* Top info  ----------------------------------------------- */
396

    
397
.top-info {
398
	padding:50px 100px;
399
	position: relative;
400
	z-index:10;
401
	display:none;
402
	.close {
403
		position: absolute;
404
		right:$header-padding-horizontal;
405
		top:50px;
406
		@include sprite('../images/info-close.png', 31px, 30px);
407
	}
408
}
409

    
410

    
411
.info.error {
412
	background:$error-color;
413
	color:#fff;
414
}
415

    
416

    
417
.info.alert {
418
	background:$alert-color;
419
	color:#fff;
420
}
421

    
422
.info.warning {
423
	background:$primary-color;
424
	color:#fff;
425
}
426

    
427
.info.success {
428
	background:$success-color;
429
	color:#fff;
430
}
431

    
432
.border-bottom-style1 {
433
	padding-bottom:20px;
434
	margin-bottom:20px;
435
	border-bottom:1px dashed $primary-color;
436
}
437

    
438

    
439
/* Progress Bar ----------------------------------------------- */
440

    
441
.progress-bar {
442
	position: fixed;
443
	bottom:0;
444
	left:0;
445
	border-top:1px solid $secondary-color;
446
	width:100%;
447
	background:#fff;
448
	padding:20px 0 20px 310px;
449
	color:$primary-color;
450
	span.counter {
451
		display: inline-block;
452
		margin-right:20px;
453
		float:left;
454
	}
455
	div.progress-wrap {
456
		display:inline-block;
457
		float:left;
458
		width:40%;
459
		margin-right:60px;
460
		.progress {
461
			position: relative;
462
			top:2px;
463
		}
464
	}
465
	span.more {
466
		display: inline-block;
467
	}
468
}
469

    
470

    
471
/* Responive ------------------------------------------------ */
472
@media only screen and (max-width: $small-mobile) {
473
}
474

    
475
@media only screen and (max-width: $small-screen) {
476
	body {
477
		padding-top:0
478
	}
479
	.header, .actions-bar {
480
		position:static;
481
		z-index: auto;
482
	}
483
	.actions-bar {
484
		top:2*$header-height;
485
	}
486
	.header {
487
		height: $header-height-responsive;
488
		line-height:50px;
489
		.icons-nav {
490
			position: static;
491
		}
492
	}
493
}