Statistics
| Branch: | Tag: | Revision:

root / snf-cyclades-app / synnefo / ui / new_ui / ui / sass / _common.scss @ 316d2e42

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

    
17
/* Clearfix -------------------------------------------- */
18

    
19
.clearfix {
20
    zoom:1;
21
    &:before, &:after {
22
        content: "\0020";
23
        display: block;
24
        height: 0;
25
        overflow: hidden;
26
    }
27
    &:after {
28
        clear: both;
29
    }
30
}
31

    
32
/* Mixins ----------------------------------------------- */
33

    
34
@mixin marginPaddingZero() {
35
	margin: 0;
36
	padding: 0;
37
}
38
 
39

    
40
// Establishes the prequisits for sprite with background-image.
41
// Background-position for normal and hover states need to 
42
// be declared separetely
43
@mixin sprite($image, $width, $height){
44
	background:url($image) no-repeat center center;
45
	width: $width;
46
	height:$height;
47
	display: inline-block;
48
	text-indent: -2000px;
49
	overflow: hidden;
50

    
51
}
52

    
53
// Transition for css properties
54
@mixin transition($transition-property, $transition-time, $method) {
55
	-webkit-transition: $transition-property $transition-time $method;
56
	-moz-transition: $transition-property $transition-time $method;
57
	-ms-transition: $transition-property $transition-time $method;
58
	-o-transition: $transition-property $transition-time $method;
59
	transition: $transition-property $transition-time $method;
60
}
61

    
62
// Box-shadow property. For no box-shadow use box-shadow(none)
63
@mixin box-shadow($shadows...) {
64
  -moz-box-shadow: $shadows;
65
  -webkit-box-shadow: $shadows;
66
  box-shadow: $shadows;
67
}
68

    
69
@mixin padding1-0 {
70
	padding: 1px 0;
71
}
72

    
73
/* Circle and Tags ----------------------------------------------- */
74
.circle {
75
	display:inline-block;
76
    -webkit-border-radius: 999px;
77
    -moz-border-radius: 999px;
78
    border-radius: 999px;
79
    behavior: url(PIE.htc);
80
}
81

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

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

    
108

    
109

    
110
/* Buttons and Links ----------------------------------------------- */
111

    
112

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

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

    
140
.btn2 {
141
	@extend .btn1;
142
	color:$secondary-color;
143
	background:#fff;
144
	border-color:$secondary-color;
145
	&:hover, 
146
	&.current,
147
	&:focus {
148
		background:transparent;
149
		border-color:#fff;
150
	}
151
}
152

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

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

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

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

    
216

    
217
/* Layout ----------------------------------------------- */
218
html,body {
219
	height:100%;
220
}
221

    
222
body {
223
	padding-top:$header-height+$bar-height;
224
}
225

    
226
.overlay-wrapper {
227
	min-height:100%;
228
}
229

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

    
243
.main {
244
	padding:0 40px;
245
	overflow:hidden;
246
}
247

    
248

    
249
.row {
250
	padding:0 30px;
251
}
252

    
253
/* Header ----------------------------------------------- */
254

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

    
305
/* Actions Bar ----------------------------------------------- */
306

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

    
345
			}
346
		}
347
	}
348
}
349
.new-btn {
350
	position: absolute;
351
	left:0;
352
	bottom:0;
353
	height:$bar-height;
354
	a {
355
		@extend .btn1;
356
		span {
357
			font-size:emCalc(20px);
358
		}
359
	}
360
}
361

    
362
/* Icons Navigation ----------------------------------------------- */
363

    
364
.icons-nav {
365
	@include marginPaddingZero();
366
	li {
367
		display: inline-block;
368
		margin:0 $icons-nav-margin-horizontal;
369
		font-size: emCalc(24px);
370
		line-height: 1em;
371
		padding-bottom:5px;
372
		width: 30px;
373
		text-align:center;
374
		overflow: hidden;
375
		a {
376
			color:$black;
377
			&:hover,&.current {
378
				font-size:30px;
379
				color:$third-color;
380
			}
381
		}
382
	}
383
}
384

    
385

    
386

    
387

    
388
/* Top info  ----------------------------------------------- */
389

    
390
.top-info {
391
	padding:50px 100px;
392
	position: relative;
393
	z-index:10;
394
	display:none;
395
	.close {
396
		position: absolute;
397
		right:$header-padding-horizontal;
398
		top:50px;
399
		@include sprite('../images/info-close.png', 31px, 30px);
400
	}
401
}
402

    
403

    
404
.info.error {
405
	background:$error-color;
406
	color:#fff;
407
}
408

    
409

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

    
415
.info.warning {
416
	background:$primary-color;
417
	color:#fff;
418
}
419

    
420
.info.success {
421
	background:$success-color;
422
	color:#fff;
423
}
424

    
425
.border-bottom-style1 {
426
	padding-bottom:20px;
427
	margin-bottom:20px;
428
	border-bottom:1px dashed $primary-color;
429
}
430

    
431

    
432
/* Progress Bar ----------------------------------------------- */
433

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

    
463

    
464
/* Responive ------------------------------------------------ */
465
@media only screen and (max-width: $small-mobile) {
466
}
467

    
468
@media only screen and (max-width: $small-screen) {
469
	body {
470
		padding-top:2*$header-height+$bar-height;
471
	}
472
	.actions-bar {
473
		top:2*$header-height;
474
	}
475
	.header {
476
		height: 2*$header-height;
477
		.icons-nav {
478
			position: static;
479
		}
480
	}
481
}