@import 'colors';

// ---------------------------------------------------------------------------------------------------------------------
// layout
// ---------------------------------------------------------------------------------------------------------------------

	#top-nav.navbar {
        border-radius: 0;
		margin-bottom: 40px;

		.container-fluid {
			background: $gray-lighter;
		}

		.navbar-right a {
			color: #BBB;
			&:hover,
			&.v-link-active {
				color: #2c3e50;
			}
		}
	}

	body:after {
		padding-bottom: 100px;
		clear:both;
		content:"."
	}

	section#controllers,
	section#methods {
		height:100%;
		padding-bottom:100px;
		border-right:1px solid #eee;
	}

	section#controllers {
		border-right:0;
	}


// ---------------------------------------------------------------------------------------------------------------------
// header
// ---------------------------------------------------------------------------------------------------------------------


	#main header {
		min-height: 110px;
		cursor: default;

		h1{
			font-size: 60px;
			margin: 0;
			padding-bottom: 5px;
		}

		p {
			margin-bottom: 0;
			padding: 0;
		}
	}


// ---------------------------------------------------------------------------------------------------------------------
// navigation
// ---------------------------------------------------------------------------------------------------------------------

	#nav {
		margin-top: 113px;
	}

	#search,
	#favourites {
		margin: 0 0 0 8px;
	}

	#main #search input {
		margin-left: -27px;
		margin-bottom: 10px;
		&:focus {
			border-color: #999;
		}
	}

	#controllers{
		padding-right:5%;
	}

	#favourites .controller-list li.favourite.icon:before {
		display: none;
	}

    #search input{
	    background-color: $input-bg;
	    border:none;
    }


// ---------------------------------------------------------------------------------------------------------------------
// console
// ---------------------------------------------------------------------------------------------------------------------

	#params {

		margin-top: 2px;

		nav {
			min-height: 39px;
			padding:4px;

			li {
				padding:2px 6px;
				padding-right:10px;
				border-right:1px dotted rgba(0, 0, 0, 0.1);
				margin-right:8px;

				vertical-align: middle;
				float: none;
				display: inline-block;;

				&:last-child{
					border-right:none;
				}

				& > *{
					vertical-align: middle;
					margin:0;
				}
			}

        }

		.loader {
			position: absolute;
			right: 0;
			margin: 8px 12px;
		}

		* {
			vertical-align: baseline;
		}

		ul {
			margin: 0;
			padding: 0;
		}

		li {
			height: 31px;
		}

		label:after{
			content:' : ';
		}

		.btn-group {
			margin-left: -2px;
		}

		button {
			height: 27px;
			margin-left: 0;
		}

		button#runState {
			width: 26px;
			border-right: 1px solid darken($gray, 5%);
			text-align: right;

			&[data-run="1"] {
				background: $brand-warning;
			}
		}

		button#run {
			transition: opacity 0.5s, color 0.5s;
			&.disabled,
			&[disabled] {
				opacity: 0.2;
				&:hover {
					background: $gray-dark;
				}
			}
			&:not(:first-child) {
				transition: all 0s;
				min-width:3.5em;
			}

		}

		select.form-control {
			height: 27px;
			background: #FFF;
			padding-right:8px;
		}

		// inputs
		input{
			border-radius: 3px;
			border:none;
			padding:3px 6px;
		}

		input:focus {
			color: rgb(204, 0, 0);
			outline: none;
		}

		input[type="checkbox"]{
			width:auto;
		}

		input[type="number"]{
			min-width:65px;
		}

		input[type="date"]{
			width:155px;
		}

		input[type="color"]{
			background: none;
			height:28px;
		}

		input[type="text"],
		input[type="string"],
		input[type="email"]{
			z-index: 1;
			box-sizing: border-box;
			min-width:100px;
			max-width:300px;
			//transition: width 0.3s;
		}

		// auto input sizing
		.field {
			position: relative;
			display: inline-block;
			z-index: 0;

			.sizer {
				position: absolute;
				top:0;
				left:0;
				padding:0 5px;
				overflow-y: hidden;
				width:auto;
				box-sizing: border-box;
				white-space: nowrap;

				// debugging
				//outline: 1px solid red;
				height:0;
				transform: scaleX(0);
			}
		}

	}

// ---------------------------------------------------------------------------------------------------------------------
// output
// ---------------------------------------------------------------------------------------------------------------------

	#console iframe {
		width:100%;
		min-height:100vh;
		border:1px solid #DDD;
		border-radius: 3px;
	}

	#output{

		transition: opacity 0.2s;

		#console.transitioning & {
			opacity: 0;
		}

		#console.pending & {
			opacity: 0.3;
		}

		> .data:not(:last-child) {
			padding-bottom: 21px;
			margin-bottom: 21px;
			border-bottom: 1px solid #ecf0f1;
		}

	}

// ---------------------------------------------------------------------------------------------------------------------
// settings
// ---------------------------------------------------------------------------------------------------------------------

	@media screen and (min-width:768px) {
		#settings {
			.col-sm-offset-3 { margin-left: 15%; }
			.col-sm-3 { width: 15%}
			.col-sm-9 { width: 70%}
		}
	}

	#settings {

		margin-bottom: 50%;

	    form {
		    ul {
			    margin: 0;
			    padding: 0;
		    }

			.error {
				color: #C00;
			}

	    }

		legend {
			padding-bottom: 10px;
			border-bottom: 1px dashed #CCC;
			margin-bottom: 20px;
			line-height: 1.1;
			font-size: 26px;
		}

	    ul.control-group {
		    list-style: none;
		    margin: 0;
		    padding: 3px 0 0 15px;

		    label {
			    padding:2px 4px;
			    margin: 0;
		    }

	    }

		fieldset {
			margin-bottom: 2em;
		}

		.controllers {
			margin-bottom:28px;

			button {
				outline: none;
				background-color: lighten($gray-dark, 30%);
			}

		    ul.sortable {
			    position: relative;

			    > li{
				    list-style: none;
				    width: 100%;
				    margin: 0;
				    padding: 5px 0;

				    &[data-disabled] {
					    .field {
						    background: $input-bg-disabled;
					    }
					    input {
						    opacity: 0.3;
						    font-weight: normal;
						    // color: $brand-danger;
						    // text-decoration: line-through;
					    }
					    i.fa {
					        opacity: 0.2;
					    }
					    i.fa-eye-slash {
					        opacity: 1;
						    //color: black;
					    }
					    i.handle,
					    i.delete {
						    display: none;
					    }
				    }
			    }

			    input[name="name"] {
				    display: inline-block;
				    width:20%;
				    font-weight: bold;
			    }

			    input[name="path"] {
				    display: inline-block;
				    width:64%;
			    }

		    }

		}

	    fieldset[name="livereload"] {

		    .warning {
			    position: relative;
			    overflow: hidden;
			    height: 0;
			    transition: 0.5s all;

			    i.fa {
				    margin-right:4px;
			    }

			    &.show {
				    height:35px;
			    }

			    p {
				    margin-top: -2px;
			    }

			    p:before {
				    display: inline-block;
				    width: 17px;
				    content: "\f071";
				    font-family: FontAwesome;
				    color: $brand-warning;
			    }
		    }

	    }

	    fieldset[name="ui"] {

		    article {
			    width: 33%;
			    max-width: 210px;
			    float: left;
		    }

	    }

		textarea {
			line-height: 2;
			min-height: 9em;
		}

		ul.sortable li {
			position: relative;
		}

		ul.deletable li {
			padding-right: 20px;

			i.delete {
				display: block;
				position: absolute;
				top: 15px;
				right: -23px;
				cursor: pointer;
				opacity: 0.5;
			}

			i.delete:hover {
				opacity: 1;
				color: black;
			}
		}

		.field {
			display: block;
			background-color: $input-bg;
			border-radius: 4px;
			position: relative;

			input {
				background: none;
			}

			.icons {
				position: absolute;
				top: 0;
				right: 7px;

				i {
					line-height: 35px;
					padding: 0 3px;
					margin: 0 2px;
					color: $gray-dark;
					vertical-align: baseline;
					cursor: pointer;

					&:hover {
						color: black;
					}
				}

				i.validate-path {
					display:none;
					cursor: default;
					pointer-events: unset;
				}

			}
		}

		.fa-check {
			color: #0C0 !important;
		}

		.fa-question {
			color: $brand-info !important;
		}

		.fa-exclamation,
		.fa-exclamation-triangle{
			color: $brand-warning !important;
		}

	}
