Synnefo

/* Table of Contents

  - Clearfix

  - Mixins

  - Buttons and Links

  - Layout 

  - Header

  - Actions Bar

  - Icon Navigation

  - Top Info

  - Progress Bar

  - Responsive

 */

/* Clearfix -------------------------------------------- */

.clearfix {

    zoom:1;

    &:before, &:after {

        content: "\0020";

        display: block;

        height: 0;

        overflow: hidden;

    }

    &:after {

        clear: both;

    }

}

/* Mixins ----------------------------------------------- */

@mixin marginPaddingZero() {

	margin: 0;

	padding: 0;

}

// Establishes the prequisits for sprite with background-image.

// Background-position for normal and hover states need to 

// be declared separetely

@mixin sprite($image, $width, $height){

	background:url($image) no-repeat center center;

	width: $width;

	height:$height;

	display: inline-block;

	text-indent: -2000px;

	overflow: hidden;

}

// Transition for css properties

@mixin transition($transition-property, $transition-time, $method) {

	-webkit-transition: $transition-property $transition-time $method;

	-moz-transition: $transition-property $transition-time $method;

	-ms-transition: $transition-property $transition-time $method;

	-o-transition: $transition-property $transition-time $method;

	transition: $transition-property $transition-time $method;

}

// Box-shadow property. For no box-shadow use box-shadow(none)

@mixin box-shadow($shadows...) {

  -moz-box-shadow: $shadows;

  -webkit-box-shadow: $shadows;

  box-shadow: $shadows;

}

@mixin padding1-0 {

	padding: 1px 0;

}

@mixin placeholder {

	&.placeholder { @content; }

	&:-moz-placeholder { @content; }

	&::-moz-placeholder { @content; }

	&::-webkit-input-placeholder { @content; }

}

// keyframes mixin

@mixin keyframes($name) {

  @-webkit-keyframes #{$name} {

    @content;

  }

  @-moz-keyframes #{$name} {

    @content;

  }

  @-ms-keyframes #{$name} {

    @content;

  }

  @keyframes #{$name} {

    @content;

  }

}

/* Circle and Tags ----------------------------------------------- */

.circle {

	display:inline-block;

    -webkit-border-radius: 999px;

    -moz-border-radius: 999px;

    border-radius: 999px;

    behavior: url(PIE.htc);

}

.tags {

	text-align:center;

	a {

		@extend .circle;

		width:12px;

		height:12px;

		margin:0 3px;

		&.tag1 { background-color:$secondary-color;}

		&.tag2 { background-color:$third-color;}

		&.tag3 { background-color:$success-color;}

	}

}

.tag-demo {

	@extend .circle;

	width: 18px;

	height: 18px;

	position: relative;

	bottom: -5px;

	margin-right: 20px;

	&.tag4 { background-color: #ff5e4d;}

	&.tag5 { background-color: #25bfda;}

	&.tag6 { background-color: #fbf7c5;}

	&.tag7 { background-color: #83a697;}

}

/* Buttons and Links ----------------------------------------------- */

a {

	color:$primary-color;

	&:hover {

		color:$third-color;

		@include transition(background, 300ms, ease-out);

	}

}

.more a .snf-checkbox-checked, .more a .snf-checkbox-unchecked{

	color: $net-opt-area-color;

}

.btn1 {

	border:1px solid $primary-color;

	color:$primary-color;

	display:inline-block;

	padding:10px 20px;

	line-height:1em;

	text-align:center;

	&:hover,

	&.current,

	&:focus {

		border-color:$secondary-color;

		background:$secondary-color;

		color:#fff;

	}

	&.current {

		cursor:default;

	}

}

.btn2 {

	@extend .btn1;

	color:$secondary-color;

	background:#fff;

	border-color:$secondary-color;

	&:hover, 

	&.current,

	&:focus {

		background:transparent;

		border-color:#fff;

	}

}

.btn3 {

	@extend .btn1;

	color:#fff; 

	border-color:#fff;

	&:hover, 

	&.current,

	&:focus {

		color:$secondary-color;

		background:#fff;

		border-color:#fff;

	}

}

.btn4 {

	@extend .btn1;

	color:#fff; 

	border-color:#fff;

	background: $secondary-color;

	&:hover, 

	&.current,

	&:focus {

		color: $secondary-color;

  		border-color:  $secondary-color;

  		background: #fff;

	}

}

.btn5 {

	border:1px solid white;

	color:white;

	display:inline-block;

	padding:0 20px;

	line-height:$btn-height - 2px;

	height:$btn-height;

	text-align:center;

	font-size:emCalc(12px);

	&:hover,

	&:focus {

		border-width:2px;

		line-height: $btn-height - 4px;

		padding:0 19px;

		color:white;

	}

	&.current {

		background:white;

		color:$secondary-color;

	}

}

.btn-img {

	@extend .btn1;

	border-color:$secondary-color;

	&:hover,

	&:focus {

		background:transparent;

	}

	a {

		img,span {

			margin-left:5px;

		}

	}

}

/* Layout ----------------------------------------------- */

html,body {

	height:100%;

}

body {

	padding-top:$header-height+$bar-height;

}

.overlay-wrapper {

	min-height:100%;

}

.lt-sidebar {

	width:250px;

	float:left;

	&.nav {

		margin-top:0;

		font-size:1em;

		overflow: auto;

	}

	&+.main {

		overflow:hidden;

	}

}

.main {

	padding:0 10px;

}

/* Header ----------------------------------------------- */

.header {

	position:fixed;

	top:0;

	left:0;

	right:0;

	width:100%;

	height:$header-height;

	line-height:$header-height;

	padding:0 $header-padding-horizontal;

	background:white;

	z-index:100;

	.icons-nav {

		position:absolute;

		left:$header-padding-horizontal - $icons-nav-margin-horizontal;

		height:$header-height;

		line-height:$header-height;

		top:0;

		li {

			line-height: $header-height;

		}

	}

	.logo {

		text-align: center;

		a {

			position: relative;

			top:-5px;

			&:focus {

				border: 1px solid $secondary-color;

				padding: 10px;

			}

		}

		img {

			max-height: 30px;			

		}

		h2 {

			display: none;

			margin:0;

			font-size: 1em;

			color:$primary-color;

			font-weight: normal;

		}

	}

	.login {

		position:absolute;

		top:25px;

		right:$header-padding-horizontal;

		a {

			color:$overlay-color;

			&:hover {

				color:$secondary-color;

			}

		}

		.wrap {

			$wr-padd-top:12px;

			border:1px solid $overlay-color;

			background: white;

			color:$overlay-color;

			font-size:emCalc(12px);

			padding:$wr-padd-top 30px;

			line-height:100%;

			ul {

				display: none;

				padding:0;

				margin:0;

				list-style: none outside none;

				li {

					list-style: none outside none;

					padding:0;

					padding-top:$wr-padd-top;

				}

			}

			&:hover {

				ul {

					display: block;

				}

			}

		}

	}

}

/* Actions Bar ----------------------------------------------- */

.actions-bar {

	position:fixed;

	left:0;

	top:$header-height;

	width:100%;

	z-index:15;

	text-align:center;

	height:$bar-height;

	line-height:$bar-height;

	color:$overlay-color;

	background-color: lighten($primary-color,35%);

	a {

		color:$overlay-color;

	}

	h2 {

		float: left;

		margin:0 0 0 15px;

		color: $overlay-color;

		font-size: emCalc(12px);

		line-height: $bar-height;

		font-weight: normal;

	}

	.filter-menu {

		float:right;

		position: relative;

		.filter {

			padding: 0 10px;

			font-size:emCalc(12px);

			position: relative;

			top:-2px;

		}

		.options {

			display: none;

			position: absolute;

			right: 0;

			top:$bar-height;

			width: 120px;

			list-style-type: none;

			padding: 10px 15px 15px;

			text-align: left;

			margin:0;

		}

		&.current {

			.options {

				background-color: lighten($primary-color,10%);

				display: inline-block;

				a {

					color: white;

				}

			}

		}

	}

	.row {

		position: relative;

		height: $bar-height;

	}

	.hd-search {

		$icon-dim :24px;

		width: $icon-dim;

		overflow:hidden;

		position:relative;

		float: right;

		height: $bar-height;

		margin-right: -6px;

		-webkit-transition: width 0.3s;

	    -moz-transition: width 0.3s;

	    transition: width 0.3s;

	    -webkit-backface-visibility: hidden;

		.hd-icon-search {

			color: $primary-color;

			display: block;

			width: $bar-height;

			height: $bar-height;

			line-height: $bar-height;

			float: right;

			&:hover {

				cursor:pointer;

				color:$secondary-color;

			}

			z-index:1;

			position: relative;

			background: lighten($primary-color,35%);

		}

		.hd-search-input {

			border: transparent;

			background-color: white;

			color: $overlay-color;

			padding: 0 10px;

			width: 160px;

			font-size: emCalc(10px);

			box-shadow: none;

			height:0.7* $bar-height;

			line-height: 0.7* $bar-height;

			position: absolute;

			top:4px;

			left:0;

			@include placeholder {

				color:$overlay-color;

			}

		}

		&.hd-open {

			width: 190px;

		}

	}

	.view-type {

		float: right;

		margin-right:15px;

		.current, a:hover {

			color: $secondary-color;

		}

		.snf-listview {

			position: relative;

			top: 3px;

			margin-right: 3px;

			font-size: 22px;

		}

		.snf-gridview {

				font-size: 22px;

				position: relative;

				top: 3px;

				margin-right: 3px;

		}

	}

}

.new-btn {

	position: absolute;

	left:$header-padding-horizontal;

	bottom:0;

	height:$bar-height;

	a {

		@extend .btn1;

		span {

			font-size:emCalc(20px);

		}

	}

}

/* Icons Navigation ----------------------------------------------- */

.icons-nav {

	@include marginPaddingZero();

	li {

		display: inline-block;

		margin:0 $icons-nav-margin-horizontal;

		font-size: emCalc(26px);

		line-height: 1em;

		padding-bottom:5px;

		width: 30px;

		text-align:center;

		overflow: hidden;

		a {

			color:$black;

			&:hover,&.current {

				// font-size:30px;

				color:$third-color;

			}

		}

	}

}

/* Top info  ----------------------------------------------- */

.top-info {

	padding:50px 100px;

	position: relative;

	z-index:10;

	display:none;

	.close {

		position: absolute;

		right:$header-padding-horizontal;

		top:50px;

		@include sprite('../images/info-close.png', 31px, 30px);

	}

}

.info.error {

	background:$error-color;

	color:#fff;

}

.info.alert {

	background:$alert-color;

	color:#fff;

}

.info.warning {

	background:$primary-color;

	color:#fff;

}

.info.success {

	background:$success-color;

	color:#fff;

}

.border-bottom-style1 {

	padding-bottom:20px;

	margin-bottom:20px;

	border-bottom:1px dashed $primary-color;

}

/* Progress Bar ----------------------------------------------- */

.progress-bar {

	position: fixed;

	bottom:0;

	left:0;

	border-top:1px solid $secondary-color;

	width:100%;

	background:#fff;

	padding:20px 0 20px 310px;

	color:$primary-color;

	span.counter {

		display: inline-block;

		margin-right:20px;

		float:left;

	}

	div.progress-wrap {

		display:inline-block;

		float:left;

		width:40%;

		margin-right:60px;

		.progress {

			position: relative;

			top:2px;

		}

	}

	span.more {

		display: inline-block;

	}

}

/* Responive ------------------------------------------------ */

@media only screen and (max-width: $small-mobile) {

}

@media only screen and (max-width: $small-screen) {

	body {

		padding-top:0

	}

	.header, .actions-bar {

		position:static;

		z-index: auto;

	}

	.actions-bar {

		top:2*$header-height;

	}

	.header {

		height: $header-height-responsive;

		line-height:50px;

		.icons-nav {

			position: static;

		}

	}

}