Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (7.2 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
  
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
		border-color:$secondary-color;
131
		background:$secondary-color;
132
		color:#fff;
133
	}
134
	&.current {
135
		cursor:default;
136
	}
137
}
138

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

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

    
163
.btn4 {
164
	@extend .btn1;
165
	color:#fff; 
166
	border-color:#fff;
167
	background: $secondary-color;
168
	&:hover, 
169
	&.current {
170
		color: $secondary-color;
171
  		border-color:  $secondary-color;
172
  		background: #fff;
173
	}
174
}
175

    
176
.btn5 {
177
	border:1px solid white;
178
	color:white;
179
	display:inline-block;
180
	padding:0 20px;
181
	line-height:$btn-height - 2px;
182
	height:$btn-height;
183
	text-align:center;
184
	font-size:emCalc(12px);
185
	&:hover {
186
		border-width:2px;
187
		line-height: $btn-height - 4px;
188
		padding:0 19px;
189
	}
190
	&.current {
191
		background:white;
192
		color:$secondary-color;
193
	}
194
}
195

    
196
.btn-img {
197
	@extend .btn1;
198
	border-color:$secondary-color;
199
	&:hover {
200
		background:transparent;
201
	}
202
	a {
203
		img,span {
204
			margin-left:5px;
205
		}
206
	}
207
}
208

    
209

    
210
/* Layout ----------------------------------------------- */
211
html,body {
212
	height:100%;
213
}
214

    
215
body {
216
	padding-top:$header-height+$bar-height;
217
}
218

    
219
.overlay-wrapper {
220
	min-height:100%;
221
}
222

    
223
.lt-sidebar {
224
	width:250px;
225
	float:left;
226
	&.nav {
227
		margin-top:0;
228
		font-size:1em;
229
		overflow: auto;
230
	}
231
	&+.main {
232
		overflow:hidden;
233
	}
234
}
235

    
236
.main {
237
	padding:0 40px;
238
	overflow:hidden;
239
}
240

    
241

    
242

    
243
/* Header ----------------------------------------------- */
244

    
245
.header {
246
	position:fixed;
247
	top:0;
248
	left:0;
249
	right:0;
250
	width:100%;
251
	height:$header-height;
252
	line-height:$header-height;
253
	padding:0 $header-padding-horizontal;
254
	border-bottom:1px solid $primary-color;
255
	background:white;
256
	z-index:100;
257
	.icons-nav {
258
		position:absolute;
259
		left:$header-padding-horizontal - $icons-nav-margin-horizontal;
260
		height:$header-height;
261
		line-height:$header-height;
262
		top:0;
263
	}
264
	.logo {
265
		text-align: center;
266
		img {
267
			max-height: 30px;			
268
		}
269
		h2 {
270
			display: none;
271
			margin:0;
272
			font-size: 1em;
273
			color:$primary-color;
274
			font-weight: normal;
275
		}
276
	}
277
	.login {
278
		position:absolute;
279
		top:0;
280
		right:$header-padding-horizontal;
281
		height:$header-height;
282
		line-height:$header-height;
283
	}
284
	
285
}
286

    
287
/* Actions Bar ----------------------------------------------- */
288

    
289
.actions-bar {
290
	position:fixed;
291
	left:0;
292
	top:$header-height;
293
	width:100%;
294
	z-index:15;
295
	text-align:center;
296
	height:$bar-height;
297
	line-height:$bar-height;
298
	background:white;
299
	border-bottom:1px solid $primary-color;
300
	.row {
301
		position: relative;
302
		height: $bar-height;
303
	}
304
	ul {
305
		margin:0;
306
		li {
307
			list-style: none outside none;
308
			display: inline-block;
309
			line-height: $bar-height;
310
			a {
311
				display: block;
312
				color:lighten($primary-color,30%);
313
				width:100%;
314
				padding:0 20px;
315
				border:1px solid transparent;
316
				&.active {
317
					color:$primary-color;
318
					&:hover {
319
						color:$secondary-color;
320
						cursor: pointer;
321
					}
322
				}
323
				&:hover {
324
					cursor:default;
325
				}
326

    
327
			}
328
		}
329
	}
330
}
331
.new-btn {
332
	position: absolute;
333
	left:0;
334
	bottom:0;
335
	height:$bar-height;
336
	a {
337
		@extend .btn1;
338
		span {
339
			font-size:emCalc(20px);
340
		}
341
	}
342
}
343

    
344
/* Icons Navigation ----------------------------------------------- */
345

    
346
.icons-nav {
347
	@include marginPaddingZero();
348
	li {
349
		display: inline-block;
350
		margin:0 $icons-nav-margin-horizontal;
351
		font-size: emCalc(24px);
352
		line-height: 1em;
353
		padding-bottom:5px;
354
		width: 30px;
355
		text-align:center;
356
		overflow: hidden;
357
		a {
358
			color:$black;
359
			&:hover,&.current {
360
				font-size:30px;
361
				color:$third-color;
362
			}
363
		}
364
	}
365
}
366

    
367

    
368

    
369

    
370
/* Top info  ----------------------------------------------- */
371

    
372
.top-info {
373
	padding:50px 100px;
374
	position: relative;
375
	z-index:10;
376
	display:none;
377
	.close {
378
		position: absolute;
379
		right:$header-padding-horizontal;
380
		top:50px;
381
		@include sprite('../images/info-close.png', 31px, 30px);
382
	}
383
}
384

    
385

    
386
.info.error {
387
	background:$error-color;
388
	color:#fff;
389
}
390

    
391

    
392
.info.alert {
393
	background:$alert-color;
394
	color:#fff;
395
}
396

    
397
.info.warning {
398
	background:$primary-color;
399
	color:#fff;
400
}
401

    
402
.info.success {
403
	background:$success-color;
404
	color:#fff;
405
}
406

    
407
.border-bottom-style1 {
408
	padding-bottom:20px;
409
	margin-bottom:20px;
410
	border-bottom:1px dashed $primary-color;
411
}
412

    
413

    
414
/* Progress Bar ----------------------------------------------- */
415

    
416
.progress-bar {
417
	position: fixed;
418
	bottom:0;
419
	left:0;
420
	border-top:1px solid $secondary-color;
421
	width:100%;
422
	background:#fff;
423
	padding:20px 0 20px 310px;
424
	color:$primary-color;
425
	span.counter {
426
		display: inline-block;
427
		margin-right:20px;
428
		float:left;
429
	}
430
	div.progress-wrap {
431
		display:inline-block;
432
		float:left;
433
		width:40%;
434
		margin-right:60px;
435
		.progress {
436
			position: relative;
437
			top:2px;
438
		}
439
	}
440
	span.more {
441
		display: inline-block;
442
	}
443
}