Logger

// Core
//
// Core modules are modules which is already integrated in tavarn
// and can be used with no sweat in the app
//
// Styleguide 1.0.0

// Logger
//
// Core directive that can be used from within controllers and other.
//
// .toast-info 			- info
// .toast-alert 		- alert
// .toast-warning 		- warning
//
// markup:
// <div id="toast-container" class="{$modifiers}" style="position: absolute">
// 	<div class="toast info">
// 		<a class="toast-close toast-close-button" role="button">×</a>
// 		<div class="toast-title">Updates ready to install</div>
// 		<div class="toast-message">Some apps could not be updated automatically.</div>
// 	</div>
// </div>
//
// sg-wrapper:
// <div style="position:relative; height: 200px; width: 100%;">
// 		<sg-wrapper-content/>
// </div>
//
// Styleguide 1.1.0

// Logger Position
//
// .top-right 			- Position Top right
// .top-center 			- Position Top center
// .top-left 			- Position Top left
// .middle-right 		- Position middle right
// .middle-center 		- Position middle center
// .middle-left 		- Position middle left
// .bottom-right 		- Position bottom right
// .bottom-center 		- Position bottom center
// .bottom-left 		- Position bottom left
//
// markup:
// <div id="toast-container" class="{$modifiers}" style="position: absolute">
// 	<div class="toast info">
// 		<a class="toast-close toast-close-button" role="button">×</a>
// 		<div class="toast-title">Updates ready to install</div>
// 		<div class="toast-message">Some apps could not be updated automatically.</div>
// 	</div>
// </div>
//
// Styleguide 1.1.1


//
// Toast container
//

// Variables
$toast-container-padding: 10px !default;

#toast-container {
	position: fixed;
	z-index: 100;

	padding: $toast-container-padding;

	// Position
	&.top-left {
		top: 0;
		left: 0;
	}

	&.top-right {
		top: 0;
		right: 0;
	}

	&.top-center {
		top: 0;
		left: 50%;
		transform: translateX(-50%);
	}

	&.bottom-left {
		bottom: 0;
		left: 0;
	}

	&.bottom-right {
		bottom: 0;
		right: 0;
	}

	&.bottom-center {
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
	}

	&.middle-left {
		top: 50%;
		transform: translateY(-50%);
		left: 0;
	}

	&.middle-right {
		top: 50%;
		transform: translateY(-50%);
		right: 0;
	}

	&.middle-center {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
}


//
// Toast
//

// Variables

// Toast dimensions
$toast-width: 300px !default;
$toast-padding: 15px 30px 15px 20px !default;
$toast-margin-bottom: 10px !default;

// Toast style
$toast-bg: #f7f7f7 !default;
$toast-border: 1px solid #d8d8d8 !default;
$toast-border-radius: 8px !default;
$toast-shadow: 0px 1px 16px rgba(0, 0, 0, 0.12) !default;

$toast-title-color: #454545 !default;
$toast-title-font-size: 16px !default;
$toast-title-weight: 500 !default;

$toast-message-color: #454545 !default;
$toast-message-font-size: 14px !default;
$toast-message-font-line-height: 1.3 !default;


.toast {

	width: $toast-width;
	padding: $toast-padding;

	margin-bottom: $toast-margin-bottom;

	background-color: $toast-bg;
	border: $toast-border;
	border-radius: $toast-border-radius;
	box-shadow: $toast-shadow;
	line-height: $toast-message-font-line-height;


	.toast-title {

		margin-bottom: 3px;
		font-size: $toast-title-font-size;
		font-weight: $toast-title-weight;
		color: $toast-title-color;

	}


	.toast-message {

		font-size: $toast-message-font-size;
		color: $toast-message-color;

	}


	.toast-close {
		display: none;
	}

}