Statistics
| Branch: | Tag: | Revision:

root / snf-cyclades-app / synnefo / ui / new_ui / ui / sass / _common.scss @ 692c5cea

History | View | Annotate | Download (5.7 kB)

1
/* Table of Contents
2

    
3
  - Clearfix
4
  - Mixins
5
  - Buttons and Links
6
  - Layout 
7
  - Header
8
  - Icon Navigation
9
  - Top Info
10
  - Progress Bar
11
  
12
 */
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

    
69

    
70
/* Buttons and Links ----------------------------------------------- */
71

    
72

    
73
a {
74
	color:$secondary-color;
75
	&:hover {
76
		color:$third-color;
77
		@include transition(background, 300ms, ease-out);
78

    
79
	}
80
}
81

    
82
.btn1 {
83
	border:1px solid $primary-color;
84
	color:$primary-color;
85
	display:inline-block;
86
	padding:10px 20px;
87
	line-height:1em;
88
	text-align:center;
89
	&:hover,
90
	&.current {
91
		border-color:$secondary-color;
92
		background:$secondary-color;
93
		color:#fff;
94
	}
95
	&.current {
96
		cursor:default;
97
	}
98
}
99

    
100
.btn2 {
101
	@extend .btn1;
102
	color:$secondary-color;
103
	background:#fff;
104
	border-color:$secondary-color;
105
	&:hover, 
106
	&.current {
107
		background:transparent;
108
		border-color:#fff;
109
	}
110
}
111

    
112
.btn3 {
113
	@extend .btn1;
114
	color:#fff; 
115
	border-color:#fff;
116
	&:hover, 
117
	&.current {
118
		color:$secondary-color;
119
		background:#fff;
120
		border-color:#fff;
121
	}
122
}
123

    
124
.btn4 {
125
	@extend .btn1;
126
	color:#fff; 
127
	border-color:#fff;
128
	background: $secondary-color;
129
	&:hover, 
130
	&.current {
131
		color: $secondary-color;
132
  		border-color:  $secondary-color;
133
  		background: #fff;
134
	}
135
}
136

    
137
.btn-img {
138
	@extend .btn1;
139
	border-color:$secondary-color;
140
	&:hover {
141
		background:transparent;
142
	}
143
	a {
144
		img,span {
145
			margin-left:5px;
146
		}
147
	}
148
}
149

    
150

    
151
/* Layout ----------------------------------------------- */
152

    
153
.lt-sidebar {
154
	width:250px;
155
	float:left;
156
	&.nav {
157
		margin-top:0;
158
		font-size:1em;
159
		overflow: auto;
160
	}
161
	&+.main {
162
		overflow:hidden;
163
	}
164
}
165

    
166
.main {
167
	padding:43px 40px;
168
	overflow:hidden;
169
}
170

    
171

    
172

    
173
/* Header ----------------------------------------------- */
174

    
175
.header {
176
	position:relative;
177
	padding:$header-padding-vertical $header-padding-horizontal;
178
	border-bottom:1px solid $primary-color;
179
	background:#fff;
180
	.icons-nav {
181
		position:absolute;
182
		left:$header-padding-horizontal;
183
		top:$header-padding-vertical;
184
	}
185
	.logo {
186
		text-align: center;
187
		img {
188
			max-height: 30px;			
189
		}
190
		h2 {
191
			font-size: 1em;
192
			color:$primary-color;
193
			font-weight: normal;
194
		}
195
	}
196
	.login {
197
		position:absolute;
198
		right:$header-padding-horizontal;
199
		top:$header-padding-vertical;
200
	}
201
	.actions {
202
		text-align:center;
203
		height:45px;
204
		line-height:45px;
205
		position:relative;
206
		margin:2*$header-padding-vertical 0 $header-padding-vertical;
207
		.main-actions {
208
			position:relative;
209
			top:86px;
210
			margin:0 -40px;
211
			border-bottom:1px solid lighten($primary-color,20%);
212
			z-index: 1;
213
		}
214
		ul {
215
			margin:0;
216
			li {
217
				list-style: none outside none;
218
				display: inline-block;
219
				margin:0 5px;
220
				a {
221
					display: block;
222
					color:lighten($primary-color,30%);
223
					width:100%;
224
					padding:8px 20px;
225
					border:1px solid transparent;
226
					&.active {
227
						color:$primary-color;
228
						&:hover {
229
							color:$secondary-color;
230
							cursor: pointer;
231
						}
232
					}
233
					&:hover {
234
						cursor:default;
235
					}
236

    
237
				}
238
			}
239
		}
240
	}
241
	.new-btn {
242
		position: absolute;
243
		left:0;
244
		bottom:0;
245
		a {
246
			@extend .btn1;
247
			span {
248
				font-size:emCalc(20px);
249
			}
250
		}
251
	}
252
}
253

    
254

    
255
/* Icons Navigation ----------------------------------------------- */
256

    
257
.icons-nav {
258
	@include marginPaddingZero();
259
	li {
260
		display: inline-block;
261
		margin-right:10px;
262
		font-size: emCalc(24px);
263
		line-height: 1em;
264
		padding-bottom:5px;
265
		width: 30px;
266
		overflow: hidden;
267
		a {
268
			color:$black;
269
			&:hover,&.current {
270
				font-size:30px;
271
				color:$third-color;
272
			}
273
		}
274
	}
275
}
276

    
277

    
278

    
279

    
280
/* Top info  ----------------------------------------------- */
281

    
282
.top-info {
283
	padding:50px 100px;
284
	position: relative;
285
	z-index:10;
286
	display:none;
287
	.close {
288
		position: absolute;
289
		right:$header-padding-horizontal;
290
		top:50px;
291
		@include sprite('../images/info-close.png', 31px, 30px);
292
	}
293
}
294

    
295

    
296
.info.error {
297
	background:$error-color;
298
	color:#fff;
299
}
300

    
301

    
302
.info.alert {
303
	background:$alert-color;
304
	color:#fff;
305
}
306

    
307
.info.warning {
308
	background:$primary-color;
309
	color:#fff;
310
}
311

    
312
.info.success {
313
	background:$success-color;
314
	color:#fff;
315
}
316

    
317
.border-bottom-style1 {
318
	padding-bottom:20px;
319
	margin-bottom:20px;
320
	border-bottom:1px dashed $primary-color;
321
}
322

    
323

    
324
/* Progress Bar ----------------------------------------------- */
325

    
326
.progress-bar {
327
	position: fixed;
328
	bottom:0;
329
	left:0;
330
	border-top:1px solid $secondary-color;
331
	width:100%;
332
	background:#fff;
333
	padding:20px 0 20px 310px;
334
	color:$primary-color;
335
	span.counter {
336
		display: inline-block;
337
		margin-right:20px;
338
		float:left;
339
	}
340
	div.progress-wrap {
341
		display:inline-block;
342
		float:left;
343
		width:40%;
344
		margin-right:60px;
345
		.progress {
346
			position: relative;
347
			top:2px;
348
		}
349
	}
350
	span.more {
351
		display: inline-block;
352
	}
353
}