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;

			padding-left: 2em;

			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%); }

			// color state
			&:before{
				content: '';

				display: block;
				position: absolute;
					top: calc( 50% - .7em/2 );
					left: calc( 1em/2 + .7em/2 );
					width: .7em;
					height: .7em;

				border-radius: 50%;

				background-color: $form-invalid-color;
			}

			&[data-id='-1']:before{
				background-color: $form-valid-color;
			}


		}

		/* (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: 2em;

				background-color: #fff;

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

				cursor: pointer;

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

				// color state
				&:before{
					content: '';

					display: block;
					position: absolute;
						top: calc( 50% - .7em/2 );
						left: calc( 1em/2 + .7em/2 );
						width: .7em;
						height: .7em;

					border-radius: 50%;

					background-color: $form-invalid-color;
				}

				&[data-id='-1']:before{
					background-color: $form-valid-color;
				}

			}
		}

	}

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



}