/*
 * 
 *   Copyright 2016 RIFT.IO Inc
 *
 *   Licensed under the Apache License, Version 2.0 (the "License");
 *   you may not use this file except in compliance with the License.
 *   You may obtain a copy of the License at
 *
 *       http://www.apache.org/licenses/LICENSE-2.0
 *
 *   Unless required by applicable law or agreed to in writing, software
 *   distributed under the License is distributed on an "AS IS" BASIS,
 *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *   See the License for the specific language governing permissions and
 *   limitations under the License.
 *
 */

@import "main";
@import "ColorGroups";

.EditDescriptorModelProperties {

	$field-border-radius: 3px;
	$field-background-color: white;
	$child-indent-left-right-margin: 5px;

	font-size: smaller;

	h1 {
		text-align: left;
		span:last-child {
			i {
				display: none;
			}
		}
	}

	h2 {
		@extend h1;

	}

	.basic-properties-group {
		> h1 {
			display: none;
		}
	}

	.advanced-properties-group {
	}

	/* label is used as list item headers */
	h3 {
		@extend h2;
		display: inline-block;
		.name {
			color: #586e75;
		}
		.value {
			display: none;
			color: #002b36;
		}
		.info {
			margin: 4px;
		}
	}

	val {
		display: inline-block;
		color: #073642;
	}

	a {
		&.simple-list-item {
			display: inline-block;
			width: 230px;
			padding: 4px 16px 4px 4px;
			white-space: nowrap;
		}
		&.vld-list-item,
		&.internal-vld-list-item{
			border: 1px solid $vld-primary-color;
			border-radius: 24px;
			background: white linear-gradient(to right, $vld-primary-color 34px, white 34px);;
		}
		&.vnfd-list-item,
		&.constituent-vnfd-list-item{
			border: 1px solid $vnfd-primary-color;
			border-radius: 11px;
			background: white linear-gradient(to right, $vnfd-primary-color 34px, white 34px);;
		}
		&.vdu-list-item {
			border: 1px solid $vdu-primary-color;
			border-radius: 11px;
			background: white linear-gradient(to right, $vdu-primary-color 34px, white 34px);;
		}
		&.vnffgd-list-item {
			border: 1px solid $vnffgd-primary-color;
			border-radius: 11px;
			background: white linear-gradient(to right, $vnffgd-primary-color 34px, white 34px);;
		}
	}

	&.-is-tree-view {
		.property {

			position: relative;
			overflow: hidden;

			margin: 8px 8px;

			background-color: rgba(147, 161, 161, 0.5);
			border-radius: $field-border-radius;

			> h3 {
				position: absolute;
				top: 2px;
				right: 18px;
				height: 21px;
				pointer-events: none;
				border-radius: $field-border-radius;
				padding: 3px 0;
			}

			> val {
				width: 100%;
				> .property-content {
					width: 100%;
				}

			}

			&.-is-focused {
				> h3 {
					//z-index: -1;
				}
			}

			&.leaf-property {
				overflow: hidden;
				min-height: 25px;
				> h3 {
					background: linear-gradient(to right, transparent, $field-background-color 21px);
					padding-left: 25px;
				}
				> val {
					border-radius: $field-border-radius;
					> .property-content {
						border-radius: $field-border-radius;
					}
				}
			}

			&.property:not(.leaf-property) {

				padding: 7px $child-indent-left-right-margin 0 $child-indent-left-right-margin;

				&.list-property {
					> h3 {
						padding: 4px 8px;
					}
				}

				> h3 {
					right: auto;
					top: 0;
					left: 0;
					width: 100%;
					height: 25px;
					z-index: 1;
					padding: 8px;
					//background: red;
					pointer-events: all;
				}
				> val {
					margin: 28px 0 8px 0;
					> .property-content {
						position: relative;
						border-radius: $field-border-radius;
						margin-top: 4px;
						padding: 4px;
						&:first-of-type {
							margin-top: 0;
						}
						&.simple-list {
							min-height: 15px;
							margin: 11px;
							.simple-list-item {
								img,
								span {
									margin: 0 5px;
									vertical-align: middle;
								}
							}
						}
					}
					> .property-content:not(.simple-list) {
						&:nth-of-type(odd) {
							background-color: rgba(238, 232, 213, 0.33);
						}
						&:nth-of-type(even) {
							background-color: rgba(147, 161, 161, 0.33);
						}
					}
					.tip {
						font-style: italic;
						font-size: small;
						color: #93a1a1;
					}
				}
			}

			.actions {
				span {
					vertical-align: middle;
					padding: 0 5px;
				}
			}

		}

	}

	.description {
		display: none;
	}

	input,
	select,
	textarea {
		height: 25px;
		line-height: 25px;
		max-width: 100%;
		min-width: 100%;
		margin: 0;
		padding: 0 0px 4px 8px;
		border: 1px solid $field-background-color;
		border-radius: $field-border-radius;
		color: #002b36;
		background-color: $field-background-color;
		vertical-align: top;
		&:focus {
			color: #002b36;
			background-color: white !important;
		}
		&::-webkit-input-placeholder {
			color: #eee8d5 !important;
		}

		&:-moz-placeholder { /* Firefox 18- */
			color: #eee8d5 !important;
		}

		&::-moz-placeholder {  /* Firefox 19+ */
			color: #eee8d5 !important;
		}

		&:-ms-input-placeholder {
			color: #eee8d5 !important;
		}
	}

	select {
		padding-right: 0;
		margin-right: 0;
		-webkit-appearance: none;
		-webkit-border-radius: $field-border-radius;
		&.-value-not-set {
			color: #eee8d5;
		}
	}

	select {
		appearance: none; // using -prefix-free http://leaverou.github.io/prefixfree/
        background: $field-background-color url(../../../node_modules/open-iconic/svg/caret-bottom.svg) no-repeat right 8px center;
		background-size: 10px;
		border: {
			color: $field-background-color;
			radius: $field-border-radius;
			style: solid;
			width: 1px;
		}
	}

	// Removes default arrow for IE10+
	// IE 8/9 get dafault arrow which covers caret image
	// as long as caret image is small than and positioned
	// behind default arrow
	select::-ms-expand {
		display: none;
	}

	textarea {
		height: 50px;
	}

	input {
		padding: 0 20px 0 8px;
		line-height: 25px;
	}

	input[name$="id"],
	input.-is-guid {
		font-size: 10px;
		font-family: monospace;
	}

}
