Statistics
| Branch: | Tag: | Revision:

root / snf-cyclades-app / synnefo / ui / new_ui / ui / sass / _common.scss @ 0ef95fe4

History | View | Annotate | Download (10.9 kB)

1 673ea014 Olga Brani
/* Table of Contents
2 15948f00 Olga Brani
3 673ea014 Olga Brani
  - Clearfix
4 673ea014 Olga Brani
  - Mixins
5 15948f00 Olga Brani
  - Buttons and Links
6 673ea014 Olga Brani
  - Layout 
7 673ea014 Olga Brani
  - Header
8 e5c8c342 Olga Brani
  - Actions Bar
9 15948f00 Olga Brani
  - Icon Navigation
10 15948f00 Olga Brani
  - Top Info
11 15948f00 Olga Brani
  - Progress Bar
12 c6724224 Olga Brani
  - Responsive
13 ff9c77d4 Athina Bekakou
  - Scroll Bar
14 673ea014 Olga Brani
15 c6724224 Olga Brani
 */
16 673ea014 Olga Brani
17 673ea014 Olga Brani
/* Clearfix -------------------------------------------- */
18 673ea014 Olga Brani
19 673ea014 Olga Brani
.clearfix {
20 673ea014 Olga Brani
    zoom:1;
21 673ea014 Olga Brani
    &:before, &:after {
22 673ea014 Olga Brani
        content: "\0020";
23 673ea014 Olga Brani
        display: block;
24 673ea014 Olga Brani
        height: 0;
25 673ea014 Olga Brani
        overflow: hidden;
26 673ea014 Olga Brani
    }
27 673ea014 Olga Brani
    &:after {
28 673ea014 Olga Brani
        clear: both;
29 673ea014 Olga Brani
    }
30 673ea014 Olga Brani
}
31 673ea014 Olga Brani
32 673ea014 Olga Brani
/* Mixins ----------------------------------------------- */
33 673ea014 Olga Brani
34 c9d873e8 Olga Brani
@mixin marginPaddingZero() {
35 c9d873e8 Olga Brani
	margin: 0;
36 c9d873e8 Olga Brani
	padding: 0;
37 c9d873e8 Olga Brani
}
38 c9d873e8 Olga Brani
 
39 c9d873e8 Olga Brani
40 c9d873e8 Olga Brani
// Establishes the prequisits for sprite with background-image.
41 c9d873e8 Olga Brani
// Background-position for normal and hover states need to 
42 c9d873e8 Olga Brani
// be declared separetely
43 c9d873e8 Olga Brani
@mixin sprite($image, $width, $height){
44 c9d873e8 Olga Brani
	background:url($image) no-repeat center center;
45 c9d873e8 Olga Brani
	width: $width;
46 c9d873e8 Olga Brani
	height:$height;
47 c9d873e8 Olga Brani
	display: inline-block;
48 c9d873e8 Olga Brani
	text-indent: -2000px;
49 c9d873e8 Olga Brani
	overflow: hidden;
50 c9d873e8 Olga Brani
51 c9d873e8 Olga Brani
}
52 c9d873e8 Olga Brani
53 c9d873e8 Olga Brani
// Transition for css properties
54 c9d873e8 Olga Brani
@mixin transition($transition-property, $transition-time, $method) {
55 c9d873e8 Olga Brani
	-webkit-transition: $transition-property $transition-time $method;
56 c9d873e8 Olga Brani
	-moz-transition: $transition-property $transition-time $method;
57 c9d873e8 Olga Brani
	-ms-transition: $transition-property $transition-time $method;
58 c9d873e8 Olga Brani
	-o-transition: $transition-property $transition-time $method;
59 c9d873e8 Olga Brani
	transition: $transition-property $transition-time $method;
60 c9d873e8 Olga Brani
}
61 c9d873e8 Olga Brani
62 c9d873e8 Olga Brani
// Box-shadow property. For no box-shadow use box-shadow(none)
63 c9d873e8 Olga Brani
@mixin box-shadow($shadows...) {
64 c9d873e8 Olga Brani
  -moz-box-shadow: $shadows;
65 c9d873e8 Olga Brani
  -webkit-box-shadow: $shadows;
66 c9d873e8 Olga Brani
  box-shadow: $shadows;
67 c9d873e8 Olga Brani
}
68 c9d873e8 Olga Brani
69 e4c44fcc Olga Brani
@mixin placeholder {
70 e4c44fcc Olga Brani
	&.placeholder { @content; }
71 e4c44fcc Olga Brani
	&:-moz-placeholder { @content; }
72 e4c44fcc Olga Brani
	&::-moz-placeholder { @content; }
73 e4c44fcc Olga Brani
	&::-webkit-input-placeholder { @content; }
74 e4c44fcc Olga Brani
}
75 e4c44fcc Olga Brani
76 f66d5dd8 Olga Brani
// keyframes mixin
77 f66d5dd8 Olga Brani
@mixin keyframes($name) {
78 f66d5dd8 Olga Brani
  @-webkit-keyframes #{$name} {
79 f66d5dd8 Olga Brani
    @content;
80 f66d5dd8 Olga Brani
  }
81 f66d5dd8 Olga Brani
  @-moz-keyframes #{$name} {
82 f66d5dd8 Olga Brani
    @content;
83 f66d5dd8 Olga Brani
  }
84 f66d5dd8 Olga Brani
  @-ms-keyframes #{$name} {
85 f66d5dd8 Olga Brani
    @content;
86 f66d5dd8 Olga Brani
  }
87 f66d5dd8 Olga Brani
  @keyframes #{$name} {
88 f66d5dd8 Olga Brani
    @content;
89 f66d5dd8 Olga Brani
  }
90 f66d5dd8 Olga Brani
}
91 9a0058e2 Olga Brani
92 9a0058e2 Olga Brani
93 9a0058e2 Olga Brani
// style .lt-bar
94 9a0058e2 Olga Brani
95 9a0058e2 Olga Brani
@mixin ltbar($width:$lt-bar-width, $bgcolor: #fff ){
96 9a0058e2 Olga Brani
	position: fixed;
97 9a0058e2 Olga Brani
	width: $width;
98 9a0058e2 Olga Brani
	left:50%;
99 9a0058e2 Olga Brani
	top:$header-height + $bar-height;
100 9a0058e2 Olga Brani
	padding:8px 10px;
101 9a0058e2 Olga Brani
	margin-left:-($row-width - 2*$main-padding-horizontal)/2;
102 9a0058e2 Olga Brani
	@include box-shadow(3px -2px 8px #ccc);
103 9a0058e2 Olga Brani
	background: $bgcolor;
104 9a0058e2 Olga Brani
	z-index: 3;
105 9a0058e2 Olga Brani
}
106 9a0058e2 Olga Brani
107 ee23bc02 Olga Brani
@mixin square($side, $bgcolor) {
108 fc6bf782 Athina Bekakou
	width: $side;
109 fc6bf782 Athina Bekakou
	height: $side;
110 ee23bc02 Olga Brani
	background-color: $bgcolor;
111 ee23bc02 Olga Brani
	display: inline-block;
112 fc6bf782 Athina Bekakou
}
113 fc6bf782 Athina Bekakou
114 261ac841 Olga Brani
@mixin circle($radius, $bgcolor: $primary-color) {
115 96e399a4 Olga Brani
	display:inline-block;
116 96e399a4 Olga Brani
    -webkit-border-radius: 999px;
117 96e399a4 Olga Brani
    -moz-border-radius: 999px;
118 96e399a4 Olga Brani
    border-radius: 999px;
119 261ac841 Olga Brani
    width: $radius * 2;
120 261ac841 Olga Brani
    height: $radius * 2;
121 261ac841 Olga Brani
    background-color: $bgcolor;
122 96e399a4 Olga Brani
    behavior: url(PIE.htc);
123 96e399a4 Olga Brani
}
124 96e399a4 Olga Brani
125 261ac841 Olga Brani
@mixin stateColor($color) {
126 261ac841 Olga Brani
	.img-wrap {
127 261ac841 Olga Brani
		.snf-pc-full,
128 261ac841 Olga Brani
		.snf-network-full, .snf-font {
129 261ac841 Olga Brani
			color:$color;
130 261ac841 Olga Brani
		}
131 261ac841 Olga Brani
	}
132 261ac841 Olga Brani
	.status {
133 261ac841 Olga Brani
		color: $color;
134 261ac841 Olga Brani
	}
135 261ac841 Olga Brani
}
136 261ac841 Olga Brani
137 261ac841 Olga Brani
/* Circle and Tags ----------------------------------------------- */
138 261ac841 Olga Brani
139 261ac841 Olga Brani
140 96e399a4 Olga Brani
.tags {
141 96e399a4 Olga Brani
	text-align:center;
142 9bae51cb Athina Bekakou
	.tag {
143 261ac841 Olga Brani
		@include circle(6px);
144 96e399a4 Olga Brani
		margin:0 3px;
145 4e7c16f1 Olga Brani
		&.tag1 { background-color:$error-color;}
146 4e7c16f1 Olga Brani
		&.tag2 { background-color:$success-color;}
147 ceaaa3be Olga Brani
		&.tag3 { background-color:$alert-color;}
148 96e399a4 Olga Brani
	}
149 96e399a4 Olga Brani
}
150 96e399a4 Olga Brani
151 673ea014 Olga Brani
152 673ea014 Olga Brani
/* Buttons and Links ----------------------------------------------- */
153 673ea014 Olga Brani
154 673ea014 Olga Brani
155 c9d873e8 Olga Brani
a {
156 ceaaa3be Olga Brani
	color:$link-color;
157 ceaaa3be Olga Brani
	&:hover, &.current, &.active  {
158 ceaaa3be Olga Brani
		color:$link-color-hover;
159 c9d873e8 Olga Brani
		@include transition(background, 300ms, ease-out);
160 c9d873e8 Olga Brani
	}
161 4ff5dda5 Athina Bekakou
162 62462e34 Athina Bekakou
	
163 4ff5dda5 Athina Bekakou
}
164 4ff5dda5 Athina Bekakou
165 ceaaa3be Olga Brani
.inactive {
166 ceaaa3be Olga Brani
	color:$inactive-color!important;
167 ceaaa3be Olga Brani
	&:hover {
168 ceaaa3be Olga Brani
		color:$inactive-color;
169 ceaaa3be Olga Brani
		cursor:default;
170 ceaaa3be Olga Brani
	}
171 c9d873e8 Olga Brani
}
172 c9d873e8 Olga Brani
173 ceaaa3be Olga Brani
174 c9d873e8 Olga Brani
.btn1 {
175 c9d873e8 Olga Brani
	border:1px solid $primary-color;
176 c9d873e8 Olga Brani
	color:$primary-color;
177 c9d873e8 Olga Brani
	display:inline-block;
178 c9d873e8 Olga Brani
	padding:10px 20px;
179 c9d873e8 Olga Brani
	line-height:1em;
180 c9d873e8 Olga Brani
	text-align:center;
181 c9d873e8 Olga Brani
	&:hover,
182 1102774c Olga Brani
	&.current,
183 1102774c Olga Brani
	&:focus {
184 c9d873e8 Olga Brani
		border-color:$secondary-color;
185 c9d873e8 Olga Brani
		background:$secondary-color;
186 c9d873e8 Olga Brani
		color:#fff;
187 c9d873e8 Olga Brani
	}
188 c9d873e8 Olga Brani
	&.current {
189 c9d873e8 Olga Brani
		cursor:default;
190 c9d873e8 Olga Brani
	}
191 c9d873e8 Olga Brani
}
192 c9d873e8 Olga Brani
193 c9d873e8 Olga Brani
.btn2 {
194 c9d873e8 Olga Brani
	@extend .btn1;
195 c9d873e8 Olga Brani
	color:$secondary-color;
196 c9d873e8 Olga Brani
	background:#fff;
197 c9d873e8 Olga Brani
	border-color:$secondary-color;
198 c9d873e8 Olga Brani
	&:hover, 
199 1102774c Olga Brani
	&.current,
200 1102774c Olga Brani
	&:focus {
201 c9d873e8 Olga Brani
		background:transparent;
202 c9d873e8 Olga Brani
		border-color:#fff;
203 c9d873e8 Olga Brani
	}
204 c9d873e8 Olga Brani
}
205 c9d873e8 Olga Brani
206 c9d873e8 Olga Brani
.btn3 {
207 c9d873e8 Olga Brani
	@extend .btn1;
208 c9d873e8 Olga Brani
	color:#fff; 
209 c9d873e8 Olga Brani
	border-color:#fff;
210 c9d873e8 Olga Brani
	&:hover, 
211 1102774c Olga Brani
	&.current,
212 1102774c Olga Brani
	&:focus {
213 c9d873e8 Olga Brani
		color:$secondary-color;
214 c9d873e8 Olga Brani
		background:#fff;
215 c9d873e8 Olga Brani
		border-color:#fff;
216 c9d873e8 Olga Brani
	}
217 c9d873e8 Olga Brani
}
218 c9d873e8 Olga Brani
219 c9d873e8 Olga Brani
.btn4 {
220 c9d873e8 Olga Brani
	@extend .btn1;
221 c9d873e8 Olga Brani
	color:#fff; 
222 c9d873e8 Olga Brani
	border-color:#fff;
223 c9d873e8 Olga Brani
	background: $secondary-color;
224 c9d873e8 Olga Brani
	&:hover, 
225 1102774c Olga Brani
	&.current,
226 1102774c Olga Brani
	&:focus {
227 c9d873e8 Olga Brani
		color: $secondary-color;
228 c9d873e8 Olga Brani
  		border-color:  $secondary-color;
229 15948f00 Olga Brani
  		background: #fff;
230 c9d873e8 Olga Brani
	}
231 c9d873e8 Olga Brani
}
232 c9d873e8 Olga Brani
233 03bcb595 Olga Brani
.btn5 {
234 03bcb595 Olga Brani
	border:1px solid white;
235 03bcb595 Olga Brani
	color:white;
236 03bcb595 Olga Brani
	display:inline-block;
237 03bcb595 Olga Brani
	padding:0 20px;
238 3767076e Olga Brani
	line-height:$btn-height - 2px;
239 3767076e Olga Brani
	height:$btn-height;
240 03bcb595 Olga Brani
	text-align:center;
241 03bcb595 Olga Brani
	font-size:emCalc(12px);
242 1102774c Olga Brani
	&:hover,
243 1102774c Olga Brani
	&:focus {
244 05689a8e Olga Brani
		border-width:2px;
245 05689a8e Olga Brani
		line-height: $btn-height - 4px;
246 05689a8e Olga Brani
		padding:0 19px;
247 b3ffc710 Olga Brani
		color:white;
248 03bcb595 Olga Brani
	}
249 03bcb595 Olga Brani
	&.current {
250 03bcb595 Olga Brani
		background:white;
251 03bcb595 Olga Brani
		color:$secondary-color;
252 03bcb595 Olga Brani
	}
253 03bcb595 Olga Brani
}
254 03bcb595 Olga Brani
255 c9d873e8 Olga Brani
.btn-img {
256 c9d873e8 Olga Brani
	@extend .btn1;
257 c9d873e8 Olga Brani
	border-color:$secondary-color;
258 1102774c Olga Brani
	&:hover,
259 1102774c Olga Brani
	&:focus {
260 c9d873e8 Olga Brani
		background:transparent;
261 c9d873e8 Olga Brani
	}
262 c9d873e8 Olga Brani
	a {
263 c9d873e8 Olga Brani
		img,span {
264 c9d873e8 Olga Brani
			margin-left:5px;
265 c9d873e8 Olga Brani
		}
266 c9d873e8 Olga Brani
	}
267 c9d873e8 Olga Brani
}
268 c9d873e8 Olga Brani
269 c9d873e8 Olga Brani
270 15948f00 Olga Brani
/* Layout ----------------------------------------------- */
271 03bcb595 Olga Brani
html,body {
272 e5c8c342 Olga Brani
	height:100%;
273 e5c8c342 Olga Brani
}
274 c9d873e8 Olga Brani
275 e6a2ceea Olga Brani
body {
276 e6a2ceea Olga Brani
	padding-top:$header-height+$bar-height;
277 e6a2ceea Olga Brani
}
278 e6a2ceea Olga Brani
279 f50cc12b Olga Brani
.body-wrapper {
280 03bcb595 Olga Brani
	min-height:100%;
281 03bcb595 Olga Brani
}
282 03bcb595 Olga Brani
283 c9d873e8 Olga Brani
.main {
284 656c135b Olga Brani
	padding:0 $main-padding-horizontal;
285 c9d873e8 Olga Brani
}
286 c9d873e8 Olga Brani
287 15948f00 Olga Brani
/* Header ----------------------------------------------- */
288 15948f00 Olga Brani
289 c9d873e8 Olga Brani
.header {
290 e6a2ceea Olga Brani
	position:fixed;
291 e6a2ceea Olga Brani
	top:0;
292 e6a2ceea Olga Brani
	left:0;
293 e6a2ceea Olga Brani
	right:0;
294 e6a2ceea Olga Brani
	width:100%;
295 03bcb595 Olga Brani
	height:$header-height;
296 03bcb595 Olga Brani
	line-height:$header-height;
297 03bcb595 Olga Brani
	padding:0 $header-padding-horizontal;
298 e6a2ceea Olga Brani
	background:white;
299 e6a2ceea Olga Brani
	z-index:100;
300 673ea014 Olga Brani
	.icons-nav {
301 673ea014 Olga Brani
		position:absolute;
302 91148e7b Olga Brani
		left:$header-padding-horizontal;
303 03bcb595 Olga Brani
		height:$header-height;
304 03bcb595 Olga Brani
		line-height:$header-height;
305 03bcb595 Olga Brani
		top:0;
306 748ec3cd Olga Brani
		li {
307 748ec3cd Olga Brani
			line-height: $header-height;
308 748ec3cd Olga Brani
		}
309 673ea014 Olga Brani
	}
310 c9d873e8 Olga Brani
	.logo {
311 c9d873e8 Olga Brani
		text-align: center;
312 c6724224 Olga Brani
		a {
313 c6724224 Olga Brani
			position: relative;
314 f0498685 Athina Bekakou
			// top:-5px;
315 c6724224 Olga Brani
		}
316 c9d873e8 Olga Brani
		img {
317 f0498685 Athina Bekakou
			height: 40px;
318 c9d873e8 Olga Brani
		}
319 673ea014 Olga Brani
		h2 {
320 e5c8c342 Olga Brani
			display: none;
321 e5c8c342 Olga Brani
			margin:0;
322 673ea014 Olga Brani
			font-size: 1em;
323 673ea014 Olga Brani
			color:$primary-color;
324 673ea014 Olga Brani
			font-weight: normal;
325 673ea014 Olga Brani
		}
326 673ea014 Olga Brani
	}
327 673ea014 Olga Brani
	.login {
328 673ea014 Olga Brani
		position:absolute;
329 283f4927 Olga Brani
		top:25px;
330 673ea014 Olga Brani
		right:$header-padding-horizontal;
331 ceaaa3be Olga Brani
332 283f4927 Olga Brani
		.wrap {
333 7e201ff0 Olga Brani
			$wr-padd-top:12px;
334 ceaaa3be Olga Brani
			border:1px solid $body-font-color;
335 283f4927 Olga Brani
			background: white;
336 7e201ff0 Olga Brani
			font-size:emCalc(12px);
337 7e201ff0 Olga Brani
			padding:$wr-padd-top 30px;
338 283f4927 Olga Brani
			line-height:100%;
339 283f4927 Olga Brani
			ul {
340 283f4927 Olga Brani
				padding:0;
341 283f4927 Olga Brani
				margin:0;
342 283f4927 Olga Brani
				list-style: none outside none;
343 77d5883f Olga Brani
				display: none;
344 283f4927 Olga Brani
				li {
345 283f4927 Olga Brani
					list-style: none outside none;
346 283f4927 Olga Brani
					padding:0;
347 7e201ff0 Olga Brani
					padding-top:$wr-padd-top;
348 283f4927 Olga Brani
				}
349 283f4927 Olga Brani
			}
350 283f4927 Olga Brani
		}
351 c9d873e8 Olga Brani
	}
352 e5c8c342 Olga Brani
	
353 e5c8c342 Olga Brani
}
354 e5c8c342 Olga Brani
355 e5c8c342 Olga Brani
/* Actions Bar ----------------------------------------------- */
356 e5c8c342 Olga Brani
357 e5c8c342 Olga Brani
.actions-bar {
358 05205849 Athina Bekakou
	position:fixed;
359 05205849 Athina Bekakou
	left:0;
360 05205849 Athina Bekakou
	top:$header-height;
361 05205849 Athina Bekakou
	width:100%;
362 05205849 Athina Bekakou
	z-index:15;
363 05205849 Athina Bekakou
	text-align:center;
364 05205849 Athina Bekakou
	height:$bar-height;
365 05205849 Athina Bekakou
	line-height:$bar-height;
366 3549163d Olga Brani
	background-color: $light-bg;
367 775d43ea Athina Bekakou
	h2 {
368 8eb36b8e Athina Bekakou
		float: left;
369 df8e3f06 Athina Bekakou
		margin:0 0 0 15px;
370 283f4927 Olga Brani
		font-size: emCalc(12px);
371 283f4927 Olga Brani
		line-height: $bar-height;
372 8eb36b8e Athina Bekakou
		font-weight: normal;
373 f50cc12b Olga Brani
		a {
374 f50cc12b Olga Brani
			&:after {
375 f50cc12b Olga Brani
				content: " >";
376 f50cc12b Olga Brani
			}
377 f50cc12b Olga Brani
		}
378 775d43ea Athina Bekakou
	}
379 775d43ea Athina Bekakou
	.filter-menu {
380 8eb36b8e Athina Bekakou
		float:right;
381 8eb36b8e Athina Bekakou
		position: relative;
382 775d43ea Athina Bekakou
		.filter {
383 283f4927 Olga Brani
			padding: 0 10px;
384 283f4927 Olga Brani
			font-size:emCalc(12px);
385 283f4927 Olga Brani
			position: relative;
386 283f4927 Olga Brani
			top:-2px;
387 775d43ea Athina Bekakou
		}
388 775d43ea Athina Bekakou
		.options {
389 775d43ea Athina Bekakou
			display: none;
390 283f4927 Olga Brani
			position: absolute;
391 283f4927 Olga Brani
			right: 0;
392 283f4927 Olga Brani
			top:$bar-height;
393 775d43ea Athina Bekakou
			width: 120px;
394 775d43ea Athina Bekakou
			list-style-type: none;
395 283f4927 Olga Brani
			padding: 10px 15px 15px;
396 775d43ea Athina Bekakou
			text-align: left;
397 775d43ea Athina Bekakou
			margin:0;
398 775d43ea Athina Bekakou
		}
399 775d43ea Athina Bekakou
		&.current {
400 775d43ea Athina Bekakou
			.options {
401 775d43ea Athina Bekakou
				background-color: lighten($primary-color,10%);
402 775d43ea Athina Bekakou
				display: inline-block;
403 775d43ea Athina Bekakou
				a {
404 775d43ea Athina Bekakou
					color: white;
405 775d43ea Athina Bekakou
				}
406 775d43ea Athina Bekakou
			}
407 775d43ea Athina Bekakou
		}
408 775d43ea Athina Bekakou
409 775d43ea Athina Bekakou
410 775d43ea Athina Bekakou
	}
411 775d43ea Athina Bekakou
	
412 e5c8c342 Olga Brani
	.row {
413 e5c8c342 Olga Brani
		position: relative;
414 3767076e Olga Brani
		height: $bar-height;
415 e5c8c342 Olga Brani
	}
416 fed367f0 Athina Bekakou
417 283f4927 Olga Brani
	.hd-search {
418 283f4927 Olga Brani
		$icon-dim :24px;
419 283f4927 Olga Brani
		width: $icon-dim;
420 283f4927 Olga Brani
		overflow:hidden;
421 283f4927 Olga Brani
		position:relative;
422 283f4927 Olga Brani
		float: right;
423 283f4927 Olga Brani
		height: $bar-height;
424 d572ccc6 Athina Bekakou
		margin-right: -6px;
425 77d5883f Olga Brani
		@include transition(width, 0.3s, linear);
426 77d5883f Olga Brani
		-webkit-backface-visibility: hidden;
427 283f4927 Olga Brani
		.hd-icon-search {
428 283f4927 Olga Brani
			display: block;
429 283f4927 Olga Brani
			width: $bar-height;
430 283f4927 Olga Brani
			height: $bar-height;
431 283f4927 Olga Brani
			line-height: $bar-height;
432 104e69bf Olga Brani
			float: right;
433 ceaaa3be Olga Brani
			color: $link-color;
434 e4c44fcc Olga Brani
			&:hover {
435 ceaaa3be Olga Brani
				color: $link-color-hover;
436 283f4927 Olga Brani
				cursor:pointer;
437 e4c44fcc Olga Brani
			}
438 104e69bf Olga Brani
			z-index:1;
439 104e69bf Olga Brani
			position: relative;
440 104e69bf Olga Brani
			background: lighten($primary-color,35%);
441 fed367f0 Athina Bekakou
		}
442 283f4927 Olga Brani
		.hd-search-input {
443 283f4927 Olga Brani
			border: transparent;
444 283f4927 Olga Brani
			background-color: white;
445 283f4927 Olga Brani
			padding: 0 10px;
446 283f4927 Olga Brani
			width: 160px;
447 283f4927 Olga Brani
			font-size: emCalc(10px);
448 283f4927 Olga Brani
			box-shadow: none;
449 283f4927 Olga Brani
			height:0.7* $bar-height;
450 283f4927 Olga Brani
			line-height: 0.7* $bar-height;
451 283f4927 Olga Brani
			position: absolute;
452 283f4927 Olga Brani
			top:4px;
453 104e69bf Olga Brani
			left:0;
454 fed367f0 Athina Bekakou
		}
455 283f4927 Olga Brani
		&.hd-open {
456 283f4927 Olga Brani
			width: 190px;
457 adcfc986 Athina Bekakou
		}
458 fed367f0 Athina Bekakou
	}
459 f50cc12b Olga Brani
	.rt-actions {
460 8eb36b8e Athina Bekakou
		float: right;
461 8eb36b8e Athina Bekakou
		margin-right:15px;
462 d572ccc6 Athina Bekakou
		.current, a:hover {
463 5ffce177 Athina Bekakou
			color: $secondary-color;
464 5ffce177 Athina Bekakou
		}
465 f50cc12b Olga Brani
		a {
466 f50cc12b Olga Brani
			span {
467 f50cc12b Olga Brani
				font-size: emCalc(20px);
468 fc6bf782 Athina Bekakou
			}
469 fc6bf782 Athina Bekakou
		}
470 fc6bf782 Athina Bekakou
		.single {
471 ee23bc02 Olga Brani
			@include square(14px , $link-color);
472 ee23bc02 Olga Brani
			&.current,
473 ee23bc02 Olga Brani
			&:hover {
474 fc6bf782 Athina Bekakou
				background-color: $secondary-color;
475 fc6bf782 Athina Bekakou
			}
476 05205849 Athina Bekakou
		}
477 5ffce177 Athina Bekakou
		
478 5ffce177 Athina Bekakou
	}
479 e5c8c342 Olga Brani
}
480 c9d873e8 Olga Brani
481 fcda3fb7 Olga Brani
.no-vm {
482 fcda3fb7 Olga Brani
	.actions-bar {
483 f50cc12b Olga Brani
		.rt-actions, .hd-search, .filter {
484 fcda3fb7 Olga Brani
			display: none;
485 fcda3fb7 Olga Brani
		}
486 fcda3fb7 Olga Brani
	}
487 fcda3fb7 Olga Brani
}
488 fcda3fb7 Olga Brani
489 15948f00 Olga Brani
/* Icons Navigation ----------------------------------------------- */
490 15948f00 Olga Brani
491 673ea014 Olga Brani
.icons-nav {
492 673ea014 Olga Brani
	@include marginPaddingZero();
493 673ea014 Olga Brani
	li {
494 673ea014 Olga Brani
		display: inline-block;
495 91148e7b Olga Brani
		margin-right:$icons-nav-margin-horizontal;
496 17118c18 Athina Bekakou
		font-size: emCalc(26px);
497 673ea014 Olga Brani
		line-height: 1em;
498 c9d873e8 Olga Brani
	}
499 c9d873e8 Olga Brani
}
500 c9d873e8 Olga Brani
501 673ea014 Olga Brani
502 673ea014 Olga Brani
503 15948f00 Olga Brani
504 15948f00 Olga Brani
/* Top info  ----------------------------------------------- */
505 c9d873e8 Olga Brani
506 c9d873e8 Olga Brani
.top-info {
507 c9d873e8 Olga Brani
	padding:50px 100px;
508 c9d873e8 Olga Brani
	position: relative;
509 c9d873e8 Olga Brani
	z-index:10;
510 c9d873e8 Olga Brani
	display:none;
511 c9d873e8 Olga Brani
	.close {
512 c9d873e8 Olga Brani
		position: absolute;
513 c9d873e8 Olga Brani
		right:$header-padding-horizontal;
514 c9d873e8 Olga Brani
		top:50px;
515 c9d873e8 Olga Brani
		@include sprite('../images/info-close.png', 31px, 30px);
516 c9d873e8 Olga Brani
	}
517 c9d873e8 Olga Brani
}
518 c9d873e8 Olga Brani
519 c9d873e8 Olga Brani
520 c9d873e8 Olga Brani
.info.error {
521 c9d873e8 Olga Brani
	background:$error-color;
522 c9d873e8 Olga Brani
	color:#fff;
523 c9d873e8 Olga Brani
}
524 c9d873e8 Olga Brani
525 c9d873e8 Olga Brani
526 c9d873e8 Olga Brani
.info.alert {
527 c9d873e8 Olga Brani
	background:$alert-color;
528 c9d873e8 Olga Brani
	color:#fff;
529 c9d873e8 Olga Brani
}
530 c9d873e8 Olga Brani
531 c9d873e8 Olga Brani
.info.warning {
532 c9d873e8 Olga Brani
	background:$primary-color;
533 c9d873e8 Olga Brani
	color:#fff;
534 c9d873e8 Olga Brani
}
535 c9d873e8 Olga Brani
536 c9d873e8 Olga Brani
.info.success {
537 c9d873e8 Olga Brani
	background:$success-color;
538 c9d873e8 Olga Brani
	color:#fff;
539 c9d873e8 Olga Brani
}
540 c9d873e8 Olga Brani
541 c9d873e8 Olga Brani
.border-bottom-style1 {
542 c9d873e8 Olga Brani
	padding-bottom:20px;
543 c9d873e8 Olga Brani
	margin-bottom:20px;
544 c9d873e8 Olga Brani
	border-bottom:1px dashed $primary-color;
545 c9d873e8 Olga Brani
}
546 c9d873e8 Olga Brani
547 c9d873e8 Olga Brani
548 15948f00 Olga Brani
/* Progress Bar ----------------------------------------------- */
549 15948f00 Olga Brani
550 c9d873e8 Olga Brani
.progress-bar {
551 c9d873e8 Olga Brani
	position: fixed;
552 c9d873e8 Olga Brani
	bottom:0;
553 c9d873e8 Olga Brani
	left:0;
554 c9d873e8 Olga Brani
	border-top:1px solid $secondary-color;
555 c9d873e8 Olga Brani
	width:100%;
556 c9d873e8 Olga Brani
	background:#fff;
557 c9d873e8 Olga Brani
	padding:20px 0 20px 310px;
558 c9d873e8 Olga Brani
	color:$primary-color;
559 c9d873e8 Olga Brani
	span.counter {
560 c9d873e8 Olga Brani
		display: inline-block;
561 c9d873e8 Olga Brani
		margin-right:20px;
562 c9d873e8 Olga Brani
		float:left;
563 c9d873e8 Olga Brani
	}
564 c9d873e8 Olga Brani
	div.progress-wrap {
565 c9d873e8 Olga Brani
		display:inline-block;
566 c9d873e8 Olga Brani
		float:left;
567 c9d873e8 Olga Brani
		width:40%;
568 c9d873e8 Olga Brani
		margin-right:60px;
569 c9d873e8 Olga Brani
		.progress {
570 c9d873e8 Olga Brani
			position: relative;
571 c9d873e8 Olga Brani
			top:2px;
572 c9d873e8 Olga Brani
		}
573 c9d873e8 Olga Brani
	}
574 c9d873e8 Olga Brani
	span.more {
575 c9d873e8 Olga Brani
		display: inline-block;
576 c9d873e8 Olga Brani
	}
577 c6724224 Olga Brani
}
578 c6724224 Olga Brani
579 0ef95fe4 Olga Brani
.strorage-progress {
580 0ef95fe4 Olga Brani
	position: fixed;
581 0ef95fe4 Olga Brani
	bottom: 0;
582 0ef95fe4 Olga Brani
	left: 0;
583 0ef95fe4 Olga Brani
	right: 0;
584 0ef95fe4 Olga Brani
	background: purple;
585 0ef95fe4 Olga Brani
	color: #fff;
586 0ef95fe4 Olga Brani
	z-index: 50;
587 0ef95fe4 Olga Brani
	.wrap {
588 0ef95fe4 Olga Brani
		position: relative;
589 0ef95fe4 Olga Brani
		padding: 10px;
590 0ef95fe4 Olga Brani
	}
591 0ef95fe4 Olga Brani
	.loader {
592 0ef95fe4 Olga Brani
		position: absolute;
593 0ef95fe4 Olga Brani
		height: 3px;
594 0ef95fe4 Olga Brani
		left: 0;
595 0ef95fe4 Olga Brani
		top: 0;
596 0ef95fe4 Olga Brani
		background: orange;
597 0ef95fe4 Olga Brani
		width: 0%;
598 0ef95fe4 Olga Brani
	}
599 0ef95fe4 Olga Brani
	.summary {
600 0ef95fe4 Olga Brani
		padding-left: $lt-bar-width + $check-w;
601 0ef95fe4 Olga Brani
		margin: 0;
602 0ef95fe4 Olga Brani
		font-size: emCalc(12px);
603 0ef95fe4 Olga Brani
	}
604 0ef95fe4 Olga Brani
	.details {
605 0ef95fe4 Olga Brani
		display: none;
606 0ef95fe4 Olga Brani
	}
607 0ef95fe4 Olga Brani
}
608 0ef95fe4 Olga Brani
609 c6724224 Olga Brani
610 c6724224 Olga Brani
/* Responive ------------------------------------------------ */
611 c6724224 Olga Brani
@media only screen and (max-width: $small-mobile) {
612 c6724224 Olga Brani
}
613 c6724224 Olga Brani
614 c6724224 Olga Brani
@media only screen and (max-width: $small-screen) {
615 c6724224 Olga Brani
	body {
616 05689a8e Olga Brani
		padding-top:0
617 05689a8e Olga Brani
	}
618 05689a8e Olga Brani
	.header, .actions-bar {
619 05689a8e Olga Brani
		position:static;
620 05689a8e Olga Brani
		z-index: auto;
621 c6724224 Olga Brani
	}
622 c6724224 Olga Brani
	.actions-bar {
623 c6724224 Olga Brani
		top:2*$header-height;
624 c6724224 Olga Brani
	}
625 c6724224 Olga Brani
	.header {
626 05689a8e Olga Brani
		height: $header-height-responsive;
627 05689a8e Olga Brani
		line-height:50px;
628 c6724224 Olga Brani
		.icons-nav {
629 c6724224 Olga Brani
			position: static;
630 c6724224 Olga Brani
		}
631 c6724224 Olga Brani
	}
632 6f4b6de9 Olga Brani
}
633 ff9c77d4 Athina Bekakou
634 ff9c77d4 Athina Bekakou
/* Scroll Bar  -------------------------------------------- */
635 ff9c77d4 Athina Bekakou
636 ff9c77d4 Athina Bekakou
body .jspVerticalBar {
637 ff9c77d4 Athina Bekakou
	background-color: transparent;
638 ff9c77d4 Athina Bekakou
	width: 14px;
639 ff9c77d4 Athina Bekakou
	padding: 1px;
640 ff9c77d4 Athina Bekakou
	border-left: 1px solid #c2bebe;
641 ff9c77d4 Athina Bekakou
	border-right: 1px solid #c2bebe;
642 ff9c77d4 Athina Bekakou
	.jspTrack {
643 ff9c77d4 Athina Bekakou
		background-color: #e6e5e5;
644 ff9c77d4 Athina Bekakou
		.jspDrag {
645 ff9c77d4 Athina Bekakou
			-webkit-border-radius: 5px;
646 ff9c77d4 Athina Bekakou
			-moz-border-radius: 5px;
647 ff9c77d4 Athina Bekakou
			border-radius: 5px;
648 ff9c77d4 Athina Bekakou
			background-color: #c2bebe;
649 ff9c77d4 Athina Bekakou
		}
650 ff9c77d4 Athina Bekakou
	}
651 ff9c77d4 Athina Bekakou
	.jspArrow {
652 ff9c77d4 Athina Bekakou
		background-color: transparent;
653 ff9c77d4 Athina Bekakou
		@include sprite('../images/arrows.png', 14px, 14px);
654 ff9c77d4 Athina Bekakou
		overflow: hidden;
655 ff9c77d4 Athina Bekakou
		&.jspArrowDown{
656 ff9c77d4 Athina Bekakou
			background-position: -18px;
657 ff9c77d4 Athina Bekakou
		}
658 ff9c77d4 Athina Bekakou
659 ff9c77d4 Athina Bekakou
		&.jspArrowUp {
660 ff9c77d4 Athina Bekakou
			background-position: 0px;
661 ff9c77d4 Athina Bekakou
		}
662 ff9c77d4 Athina Bekakou
	}
663 f50cc12b Olga Brani
}