Statistics
| Branch: | Tag: | Revision:

root / snf-cyclades-app / synnefo / ui / new_ui / ui / sass / _common.scss @ 914e6fb5

History | View | Annotate | Download (12.3 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
  - Scroll Bar
14
  - Images from sprites
15

    
16
 */
17

    
18
/* Clearfix -------------------------------------------- */
19

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

    
33
/* Mixins ----------------------------------------------- */
34

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

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

    
52
}
53

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

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

    
70
@mixin placeholder {
71
	&.placeholder { @content; }
72
	&:-moz-placeholder { @content; }
73
	&::-moz-placeholder { @content; }
74
	&::-webkit-input-placeholder { @content; }
75
}
76

    
77
// keyframes mixin
78
@mixin keyframes($name) {
79
  @-webkit-keyframes #{$name} {
80
    @content;
81
  }
82
  @-moz-keyframes #{$name} {
83
    @content;
84
  }
85
  @-ms-keyframes #{$name} {
86
    @content;
87
  }
88
  @keyframes #{$name} {
89
    @content;
90
  }
91
}
92

    
93

    
94
// style .lt-bar
95

    
96
@mixin ltbar($width:$lt-bar-width, $bgcolor: #fff ){
97
	position: fixed;
98
	width: $width;
99
	left:50%;
100
	top:$header-height + $bar-height;
101
	padding:8px 10px;
102
	margin-left:-($row-width - 2*$main-padding-horizontal)/2;
103
	@include box-shadow(3px -2px 8px #ccc);
104
	background: $bgcolor;
105
	z-index: 3;
106
}
107

    
108
@mixin square($side, $bgcolor) {
109
	width: $side;
110
	height: $side;
111
	background-color: $bgcolor;
112
	display: inline-block;
113
}
114

    
115
@mixin circle($radius, $bgcolor: $primary-color) {
116
	display:inline-block;
117
    -webkit-border-radius: 999px;
118
    -moz-border-radius: 999px;
119
    border-radius: 999px;
120
    width: $radius * 2;
121
    height: $radius * 2;
122
    background-color: $bgcolor;
123
    behavior: url(PIE.htc);
124
}
125

    
126
@mixin stateColor($color) {
127
	.img-wrap {
128
		.snf-pc-full,
129
		.snf-network-full, .snf-font {
130
			color:$color;
131
		}
132
	}
133
	.status {
134
		color: $color;
135
	}
136
}
137

    
138
/* Circle and Tags ----------------------------------------------- */
139

    
140

    
141
.tags {
142
	text-align:center;
143
	.tag {
144
		@include circle(6px);
145
		margin:0 3px;
146
		&.tag1 { background-color:$error-color;}
147
		&.tag2 { background-color:$success-color;}
148
		&.tag3 { background-color:$alert-color;}
149
	}
150
}
151

    
152

    
153
/* Buttons and Links ----------------------------------------------- */
154

    
155

    
156
a {
157
	color:$link-color;
158
	&:hover, &.current, &.active  {
159
		color:$link-color-hover;
160
		@include transition(background, 300ms, ease-out);
161
	}
162

    
163
	
164
}
165

    
166
.inactive {
167
	color:$inactive-color!important;
168
	&:hover {
169
		color:$inactive-color;
170
		cursor:default;
171
	}
172
}
173

    
174

    
175
.btn1 {
176
	border:1px solid $primary-color;
177
	color:$primary-color;
178
	display:inline-block;
179
	padding:10px 20px;
180
	line-height:1em;
181
	text-align:center;
182
	&:hover,
183
	&.current,
184
	&:focus {
185
		border-color:$secondary-color;
186
		background:$secondary-color;
187
		color:#fff;
188
	}
189
	&.current {
190
		cursor:default;
191
	}
192
}
193

    
194
.btn2 {
195
	@extend .btn1;
196
	color:$secondary-color;
197
	background:#fff;
198
	border-color:$secondary-color;
199
	&:hover, 
200
	&.current,
201
	&:focus {
202
		background:transparent;
203
		border-color:#fff;
204
	}
205
}
206

    
207
.btn3 {
208
	@extend .btn1;
209
	color:#fff; 
210
	border-color:#fff;
211
	&:hover, 
212
	&.current,
213
	&:focus {
214
		color:$secondary-color;
215
		background:#fff;
216
		border-color:#fff;
217
	}
218
}
219

    
220
.btn4 {
221
	@extend .btn1;
222
	color:#fff; 
223
	border-color:#fff;
224
	background: $secondary-color;
225
	&:hover, 
226
	&.current,
227
	&:focus {
228
		color: $secondary-color;
229
  		border-color:  $secondary-color;
230
  		background: #fff;
231
	}
232
}
233

    
234
.btn5 {
235
	border:1px solid white;
236
	color:white;
237
	display:inline-block;
238
	padding:0 20px;
239
	line-height:$btn-height - 2px;
240
	height:$btn-height;
241
	text-align:center;
242
	font-size:emCalc(12px);
243
	&:hover,
244
	&:focus {
245
		border-width:2px;
246
		line-height: $btn-height - 4px;
247
		padding:0 19px;
248
		color:white;
249
	}
250
	&.current {
251
		background:white;
252
		color:$secondary-color;
253
	}
254
}
255

    
256
.btn-img {
257
	@extend .btn1;
258
	border-color:$secondary-color;
259
	&:hover,
260
	&:focus {
261
		background:transparent;
262
	}
263
	a {
264
		img,span {
265
			margin-left:5px;
266
		}
267
	}
268
}
269

    
270

    
271
/* Layout ----------------------------------------------- */
272
html,body {
273
	height:100%;
274
}
275

    
276
body {
277
	padding-top:$header-height+$bar-height;
278
}
279

    
280
.body-wrapper {
281
	min-height:100%;
282
}
283

    
284
.main {
285
	padding:0 $main-padding-horizontal;
286
}
287

    
288
/* Header ----------------------------------------------- */
289

    
290
.header {
291
	position:fixed;
292
	top:0;
293
	left:0;
294
	right:0;
295
	width:100%;
296
	height:$header-height;
297
	line-height:$header-height;
298
	padding:0 $header-padding-horizontal;
299
	background:white;
300
	z-index:100;
301
	.icons-nav {
302
		position:absolute;
303
		left:$header-padding-horizontal;
304
		height:$header-height;
305
		line-height:$header-height;
306
		top:0;
307
		li {
308
			line-height: $header-height;
309
		}
310
	}
311
	.logo {
312
		text-align: center;
313
		a {
314
			position: relative;
315
			// top:-5px;
316
		}
317
		img {
318
			height: 40px;
319
		}
320
		h2 {
321
			display: none;
322
			margin:0;
323
			font-size: 1em;
324
			color:$primary-color;
325
			font-weight: normal;
326
		}
327
	}
328
	.login {
329
		position:absolute;
330
		top:25px;
331
		right:$header-padding-horizontal;
332

    
333
		.wrap {
334
			$wr-padd-top:12px;
335
			border:1px solid $body-font-color;
336
			background: white;
337
			font-size:emCalc(12px);
338
			padding:$wr-padd-top 30px;
339
			line-height:100%;
340
			ul {
341
				padding:0;
342
				margin:0;
343
				list-style: none outside none;
344
				display: none;
345
				li {
346
					list-style: none outside none;
347
					padding:0;
348
					padding-top:$wr-padd-top;
349
				}
350
			}
351
		}
352
	}
353
	
354
}
355

    
356
/* Actions Bar ----------------------------------------------- */
357

    
358
.actions-bar {
359
	position:fixed;
360
	left:0;
361
	top:$header-height;
362
	width:100%;
363
	z-index:15;
364
	text-align:center;
365
	height:$bar-height;
366
	line-height:$bar-height;
367
	background-color: $light-bg;
368
	h2 {
369
		float: left;
370
		margin:0 0 0 15px;
371
		font-size: emCalc(12px);
372
		line-height: $bar-height;
373
		font-weight: normal;
374
		a {
375
			&:after {
376
				content: " >";
377
			}
378
		}
379
	}
380
	.filter-menu {
381
		float:right;
382
		position: relative;
383
		.filter {
384
			padding: 0 10px;
385
			font-size:emCalc(12px);
386
			position: relative;
387
			top:-1px;
388
		}
389
		.options {
390
			display: none;
391
			position: absolute;
392
			right: 0;
393
			top:$bar-height;
394
			width: 120px;
395
			list-style-type: none;
396
			padding: 10px 15px 15px;
397
			text-align: left;
398
			margin:0;
399
		}
400
		&.current {
401
			.options {
402
				background-color: lighten($primary-color,10%);
403
				display: inline-block;
404
				a {
405
					color: white;
406
				}
407
			}
408
		}
409

    
410

    
411
	}
412
	
413
	.row {
414
		position: relative;
415
		height: $bar-height;
416
	}
417

    
418
	.hd-search {
419
		$icon-dim :24px;
420
		width: $icon-dim;
421
		overflow:hidden;
422
		position:relative;
423
		float: right;
424
		height: $bar-height;
425
		margin-right: -6px;
426
		@include transition(width, 0.3s, linear);
427
		-webkit-backface-visibility: hidden;
428
		.hd-icon-search {
429
			display: block;
430
			width: $bar-height;
431
			height: $bar-height;
432
			line-height: $bar-height;
433
			float: right;
434
			color: $link-color;
435
			&:hover {
436
				color: $link-color-hover;
437
				cursor:pointer;
438
			}
439
			z-index:1;
440
			position: relative;
441
			background: lighten($primary-color,35%);
442
		}
443
		.hd-search-input {
444
			border: transparent;
445
			background-color: white;
446
			padding: 0 10px;
447
			width: 160px;
448
			font-size: emCalc(10px);
449
			box-shadow: none;
450
			height:0.7* $bar-height;
451
			line-height: 0.7* $bar-height;
452
			position: absolute;
453
			top:4px;
454
			left:0;
455
		}
456
		&.hd-open {
457
			width: 190px;
458
		}
459
	}
460
	.rt-actions {
461
		float: right;
462
		margin-right:15px;
463
		.current, a:hover {
464
			color: $secondary-color;
465
		}
466
		a {			
467
			float: left;
468
			span {
469
				position: relative;
470
				&.snf-listview {
471
					font-size: emCalc(18px);
472
				}
473
				&.snf-gridview {
474
					font-size: emCalc(18px);
475
				}
476
				&.snf-trash-outline {
477
				}
478
				&.snf-folder-create-outline {
479
					font-size: emCalc(18px);
480
				}
481
				&.snf-refresh-outline {
482
					font-size: emCalc(12px);
483
					top: -2px;
484
				}
485
			}
486
			&:not(:last-child) {
487
				margin-right: 10px;
488
			}
489
		}
490
		.single {
491
			@include square(12px , $link-color);
492
			margin-top: 9px;
493
			&.current,
494
			&:hover {
495
				background-color: $secondary-color;
496
			}
497
		}
498
		
499
	}
500
}
501

    
502
.no-vm {
503
	.actions-bar {
504
		.rt-actions, .hd-search, .filter {
505
			display: none;
506
		}
507
	}
508
}
509

    
510
/* Icons Navigation ----------------------------------------------- */
511

    
512
.icons-nav {
513
	@include marginPaddingZero();
514
	li {
515
		display: inline-block;
516
		margin-right:$icons-nav-margin-horizontal;
517
		font-size: emCalc(26px);
518
		line-height: 1em;
519
	}
520
}
521

    
522

    
523

    
524

    
525
/* Top info  ----------------------------------------------- */
526

    
527
.top-info {
528
	padding:50px 100px;
529
	position: relative;
530
	z-index:10;
531
	display:none;
532
	.close {
533
		position: absolute;
534
		right:$header-padding-horizontal;
535
		top:50px;
536
		@include sprite('../images/info-close.png', 31px, 30px);
537
	}
538
}
539

    
540

    
541
.info.error {
542
	background:$error-color;
543
	color:#fff;
544
}
545

    
546

    
547
.info.alert {
548
	background:$alert-color;
549
	color:#fff;
550
}
551

    
552
.info.warning {
553
	background:$primary-color;
554
	color:#fff;
555
}
556

    
557
.info.success {
558
	background:$success-color;
559
	color:#fff;
560
}
561

    
562
.border-bottom-style1 {
563
	padding-bottom:20px;
564
	margin-bottom:20px;
565
	border-bottom:1px dashed $primary-color;
566
}
567

    
568

    
569
/* Progress Bar ----------------------------------------------- */
570

    
571
.progress-bar {
572
	position: fixed;
573
	bottom:0;
574
	left:0;
575
	border-top:1px solid $secondary-color;
576
	width:100%;
577
	background:#fff;
578
	padding:20px 0 20px 310px;
579
	color:$primary-color;
580
	span.counter {
581
		display: inline-block;
582
		margin-right:20px;
583
		float:left;
584
	}
585
	div.progress-wrap {
586
		display:inline-block;
587
		float:left;
588
		width:40%;
589
		margin-right:60px;
590
		.progress {
591
			position: relative;
592
			top:2px;
593
		}
594
	}
595
	span.more {
596
		display: inline-block;
597
	}
598
}
599

    
600
.storage-progress {
601
	display: none;
602
	position: fixed;
603
	bottom: 0;
604
	left: 0;
605
	right: 0;
606
	background: $turquoise-1;
607
	color: #fff;
608
	z-index: 50;
609
	overflow-y: auto;
610
	@include transition(background-color, 500ms, linear);
611
	&.ready {
612
		background: $green-1;
613
	}
614
	.wrap {
615
		position: relative;
616
		padding: 10px;
617
	}
618
	.loader {
619
		position: absolute;
620
		height: 5px;
621
		left: 0;
622
		top: 0;
623
		background: $yellow-1;
624
		width: 0%;
625
	}
626
	.summary {
627
		padding-left: $lt-bar-width + $check-w;
628
		margin: 0;
629
		font-size: emCalc(12px);
630
		span {
631
			background-color: #fff;
632
			color: $turquoise-1;
633
			padding: 2px 6px;
634
			margin-right: 10px;
635
			@include transition(opacity, 500ms, linear);
636
			&.animated {
637
				opacity: 0;
638
			}
639
		}
640
	}
641
	.details {
642
		display: none;
643
	}
644
}
645

    
646

    
647
/* Responive ------------------------------------------------ */
648
@media only screen and (max-width: $small-mobile) {
649
}
650

    
651
@media only screen and (max-width: $small-screen) {
652
	body {
653
		padding-top:0
654
	}
655
	.header, .actions-bar {
656
		position:static;
657
		z-index: auto;
658
	}
659
	.actions-bar {
660
		top:2*$header-height;
661
	}
662
	.header {
663
		height: $header-height-responsive;
664
		line-height:50px;
665
		.icons-nav {
666
			position: static;
667
		}
668
	}
669
}
670

    
671
/* Scroll Bar  -------------------------------------------- */
672

    
673
body .jspVerticalBar {
674
	background-color: transparent;
675
	width: 14px;
676
	padding: 1px;
677
	border-left: 1px solid #c2bebe;
678
	border-right: 1px solid #c2bebe;
679
	.jspTrack {
680
		background-color: #e6e5e5;
681
		.jspDrag {
682
			-webkit-border-radius: 5px;
683
			-moz-border-radius: 5px;
684
			border-radius: 5px;
685
			background-color: #c2bebe;
686
		}
687
	}
688
	.jspArrow {
689
		background-color: transparent;
690
		@include sprite('../images/arrows.png', 14px, 14px);
691
		overflow: hidden;
692
		&.jspArrowDown{
693
			background-position: -18px;
694
		}
695

    
696
		&.jspArrowUp {
697
			background-position: 0px;
698
		}
699
	}
700
}
701

    
702
@mixin files-icon($bg-position) {
703
	background: url(../images/file-types.png) no-repeat top left;
704
	background-position: $bg-position;
705
	width: 30px;
706
	height: 35px;
707
	display: block;
708
	margin: 0 auto;
709
}
710
.folder {
711
	background: url(file-types.png) no-repeat top left;
712
	background-position: 0 -165px;
713
	width: 35px;
714
	height: 28px;
715
}
716
/* to put in use
717
.folder-open {
718
	background: url(file-types.png) no-repeat top left;
719
	background-position: 0 --243px;
720
	width: 35px;
721
	height: 28px;
722
}
723
*/
724
.txt {
725
	@include files-icon(0 -486px);
726
}
727
.pdf {
728
	@include files-icon(0 -321px);
729
}
730
.excel {
731
	@include files-icon(0 -85px);
732
}
733
.word {
734
	@include files-icon(0 -571px);
735
}
736
.powerpoint {
737
	@include files-icon(0 -406px);
738
}
739
.ai {
740
	@include files-icon(0 0);
741
}