ptut-vhost/webpack/scss/header.scss

@import 'constants';

#HEADER{

	display: flex;
	position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: calc( #{$header-height-noratio} - 1px );

	background-color: $header-bg;
	border-bottom: 1px solid #e3e7eb;

	// flex properties
	flex-direction:  row;
	justify-content: flex-start;
	align-items:     center;

	font-size: #{$header-font-size-ratio}em;

	z-index: 150;


	/* (1) Version management */
	& > div.departments,
	& > div.versions{

		/* (1.1) Version status */
		& > div.current{
			display: block;
			position: relative;

			margin-left: 1em;

			padding: .5em 1em;

			border: 1px solid #ddd;
			border-radius: 3px;
			box-shadow: 0 2px 2px #fff;

			transition: box-shadow .2s ease-in-out;

			cursor: pointer;

			// hover animation
			&:hover{ box-shadow: 0 2px 2px darken(#fff,10%); }

		}

		/* (1.2) Version dialog (to switch to another) */
		& > div.department-dialog,
		& > div.version-dialog{
			display: block;
			position: absolute;
				margin-top: 0;
				margin-left: 0;

			&.department-dialog{ margin-left: 1em; }

			// padding: 1em .5em;

			border: 1px solid #ddd;
			border-top: 0;
			border-radius: 0 0 3px 3px;

			background-color: #fff;

			// box-shadow: 0 2px 2px #ddd;

			overflow: hidden;


			/* (1.2.1) version items */
			& > span{
				display: block;
				position: relative;

				padding: .5em 1em;
				padding-left: .5em;

				background-color: #fff;

				transition: background-color .2s ease-in-out;

				cursor: pointer;

				// hover animation
				&:hover{ background-color: darken(#fff, 5%); }

				// pre-icons
				& > span.edit,
				& > span.switch,
				& > span.create{
					display: inline-block;
					position: relative;
						// top: calc( 50% - .7em/2 );
						// left: calc( 1em/2 + .7em/2 );
						width: 1em;
						height: 1em;

					padding-right: .5em;

					&.switch{
						background: url('/asset/svg/switch.svg@b8c0c8') center center no-repeat;
						background-size: 80% auto;
						&:hover{
							background-image: url('/asset/svg/switch.svg@#{$rd-form-invalid-color}');
						}
					}

					&.edit{
						background: url('/asset/svg/a.svg@b8c0c8') center center no-repeat;
						background-size: contain;
						&:hover{
							background-image: url('/asset/svg/a.svg@#{$rd-form-search-color}');
						}
					}

					&.create{
						background: url('/asset/svg/plus.svg@#{$rd-form-valid-color}') center center no-repeat;
						background-size: 60% auto;
					}


				}

				& > input{
					width: auto;
					max-width: 6em;
					padding: 0;
					margin: .25em .5em;

					border: none;
					border-radius: 0;

					background: transparent;
				}

			}
		}

	}

	/* (2) Department | Version layout */
	& > div.departments > div.current{
		margin-right: 0;
		padding-left: 1em;
		border-radius: 3px 0 0 3px;

		&:before{ content: none; }
	}

	& > div.versions > div.current{
		margin-left: 0;
		border-radius: 0 3px 3px 0;
		border-left: 0;
	}



}