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;

}

/* 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: 22px;

	height: 22px;

	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:$secondary-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;

	}

	&.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 40px;

	overflow:hidden;

}

.row {

	padding:0 30px;

}

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

.header {

	position:fixed;

	top:0;

	left:0;

	right:0;

	width:100%;

	height:$header-height;

	line-height:$header-height;

	padding:0 $header-padding-horizontal;

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

	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:0;

		right:$header-padding-horizontal;

		height:$header-height;

		line-height:$header-height;

	}

}

/* 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;

	background:white;

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

	.row {

		position: relative;

		height: $bar-height;

	}

	ul {

		margin:0;

		li {

			list-style: none outside none;

			display: inline-block;

			line-height: $bar-height;

			a {

				display: block;

				color:lighten($primary-color,30%);

				width:100%;

				padding:0 20px;

				border:1px solid transparent;

				&.active {

					color:$primary-color;

					&:hover {

						color:$secondary-color;

						cursor: pointer;

					}

				}

				&:hover {

					cursor:default;

				}

			}

		}

	}

}

.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(24px);

		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;

		}

	}

}