Statistics
| Branch: | Tag: | Revision:

root / snf-cyclades-app / synnefo / ui / new_ui / ui / sass / _common.scss @ 8168adc5

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

    
96

    
97
/* Buttons and Links ----------------------------------------------- */
98

    
99

    
100
a {
101
	color:$secondary-color;
102
	&:hover {
103
		color:$third-color;
104
		@include transition(background, 300ms, ease-out);
105

    
106
	}
107
}
108

    
109
.btn1 {
110
	border:1px solid $primary-color;
111
	color:$primary-color;
112
	display:inline-block;
113
	padding:10px 20px;
114
	line-height:1em;
115
	text-align:center;
116
	&:hover,
117
	&.current {
118
		border-color:$secondary-color;
119
		background:$secondary-color;
120
		color:#fff;
121
	}
122
	&.current {
123
		cursor:default;
124
	}
125
}
126

    
127
.btn2 {
128
	@extend .btn1;
129
	color:$secondary-color;
130
	background:#fff;
131
	border-color:$secondary-color;
132
	&:hover, 
133
	&.current {
134
		background:transparent;
135
		border-color:#fff;
136
	}
137
}
138

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

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

    
164
.btn5 {
165
	border:1px solid white;
166
	color:white;
167
	display:inline-block;
168
	padding:0 20px;
169
	line-height:$btn-height - 2px;
170
	height:$btn-height;
171
	text-align:center;
172
	font-size:emCalc(12px);
173
	&:hover {
174
		border-width:2px;
175
		line-height: $btn-height - 4px;
176
		padding:0 19px;
177
	}
178
	&.current {
179
		background:white;
180
		color:$secondary-color;
181
	}
182
}
183

    
184
.btn-img {
185
	@extend .btn1;
186
	border-color:$secondary-color;
187
	&:hover {
188
		background:transparent;
189
	}
190
	a {
191
		img,span {
192
			margin-left:5px;
193
		}
194
	}
195
}
196

    
197

    
198
/* Layout ----------------------------------------------- */
199
html,body {
200
	height:100%;
201
}
202

    
203
.overlay-wrapper {
204
	min-height:100%;
205
}
206

    
207
.lt-sidebar {
208
	width:250px;
209
	float:left;
210
	&.nav {
211
		margin-top:0;
212
		font-size:1em;
213
		overflow: auto;
214
	}
215
	&+.main {
216
		overflow:hidden;
217
	}
218
}
219

    
220
.main {
221
	padding:0 40px;
222
	overflow:hidden;
223
}
224

    
225

    
226

    
227
/* Header ----------------------------------------------- */
228

    
229
.header {
230
	position:relative;
231
	height:$header-height;
232
	line-height:$header-height;
233
	padding:0 $header-padding-horizontal;
234
	border-bottom:1px solid $primary-color;
235
	background:#fff;
236
	.icons-nav {
237
		position:absolute;
238
		left:$header-padding-horizontal - $icons-nav-margin-horizontal;
239
		height:$header-height;
240
		line-height:$header-height;
241
		top:0;
242
	}
243
	.logo {
244
		text-align: center;
245
		img {
246
			max-height: 30px;			
247
		}
248
		h2 {
249
			display: none;
250
			margin:0;
251
			font-size: 1em;
252
			color:$primary-color;
253
			font-weight: normal;
254
		}
255
	}
256
	.login {
257
		position:absolute;
258
		top:0;
259
		right:$header-padding-horizontal;
260
		height:$header-height;
261
		line-height:$header-height;
262
	}
263
	
264
}
265

    
266
/* Actions Bar ----------------------------------------------- */
267

    
268
.actions-bar {
269
	text-align:center;
270
	height:$bar-height;
271
	line-height:$bar-height;
272
	position:relative;
273
	border-bottom:1px solid $primary-color;
274
	.row {
275
		position: relative;
276
		height: $bar-height;
277
	}
278
	ul {
279
		margin:0;
280
		li {
281
			list-style: none outside none;
282
			display: inline-block;
283
			line-height: $bar-height;
284
			a {
285
				display: block;
286
				color:lighten($primary-color,30%);
287
				width:100%;
288
				padding:0 20px;
289
				border:1px solid transparent;
290
				&.active {
291
					color:$primary-color;
292
					&:hover {
293
						color:$secondary-color;
294
						cursor: pointer;
295
					}
296
				}
297
				&:hover {
298
					cursor:default;
299
				}
300

    
301
			}
302
		}
303
	}
304
}
305
.new-btn {
306
	position: absolute;
307
	left:0;
308
	bottom:0;
309
	height:$bar-height;
310
	a {
311
		@extend .btn1;
312
		span {
313
			font-size:emCalc(20px);
314
		}
315
	}
316
}
317

    
318
/* Icons Navigation ----------------------------------------------- */
319

    
320
.icons-nav {
321
	@include marginPaddingZero();
322
	li {
323
		display: inline-block;
324
		margin:0 $icons-nav-margin-horizontal;
325
		font-size: emCalc(24px);
326
		line-height: 1em;
327
		padding-bottom:5px;
328
		width: 30px;
329
		text-align:center;
330
		overflow: hidden;
331
		a {
332
			color:$black;
333
			&:hover,&.current {
334
				font-size:30px;
335
				color:$third-color;
336
			}
337
		}
338
	}
339
}
340

    
341

    
342

    
343

    
344
/* Top info  ----------------------------------------------- */
345

    
346
.top-info {
347
	padding:50px 100px;
348
	position: relative;
349
	z-index:10;
350
	display:none;
351
	.close {
352
		position: absolute;
353
		right:$header-padding-horizontal;
354
		top:50px;
355
		@include sprite('../images/info-close.png', 31px, 30px);
356
	}
357
}
358

    
359

    
360
.info.error {
361
	background:$error-color;
362
	color:#fff;
363
}
364

    
365

    
366
.info.alert {
367
	background:$alert-color;
368
	color:#fff;
369
}
370

    
371
.info.warning {
372
	background:$primary-color;
373
	color:#fff;
374
}
375

    
376
.info.success {
377
	background:$success-color;
378
	color:#fff;
379
}
380

    
381
.border-bottom-style1 {
382
	padding-bottom:20px;
383
	margin-bottom:20px;
384
	border-bottom:1px dashed $primary-color;
385
}
386

    
387

    
388
/* Progress Bar ----------------------------------------------- */
389

    
390
.progress-bar {
391
	position: fixed;
392
	bottom:0;
393
	left:0;
394
	border-top:1px solid $secondary-color;
395
	width:100%;
396
	background:#fff;
397
	padding:20px 0 20px 310px;
398
	color:$primary-color;
399
	span.counter {
400
		display: inline-block;
401
		margin-right:20px;
402
		float:left;
403
	}
404
	div.progress-wrap {
405
		display:inline-block;
406
		float:left;
407
		width:40%;
408
		margin-right:60px;
409
		.progress {
410
			position: relative;
411
			top:2px;
412
		}
413
	}
414
	span.more {
415
		display: inline-block;
416
	}
417
}