ptut-vhost/webpack/scss/container.scss

@import 'constants';


#CONTAINER{

	display: block;
	position: absolute;
		top: $header-height;
		left: $menu-width;
		height: calc( 100% - #{$header-height} );
		width: calc( 100% - #{$menu-width} );


	background-color: $bg-color;

	overflow: hidden;
	overflow-y: auto;

	z-index: 100;

}



/* [1] List style
---------------------------------*/
#CONTAINER > div.list{
	display: flex;

	// flex properties
	flex-direction: column;
	justify-content: flex-start;

	& > *:first-child{ margin-top: 1em; }
	& > *:last-child{ margin-bottom: 3em; }

	/* (1) List element */
	& > section{

		display: block;

		margin: .3em 1em;
		padding: .8em 1em;

		border-radius: 5px / 5px;

		background-color: #fff;

	}

	/* (2) List title */
	& > h1{
		display: inline-block;

		margin: 0 1.2em;
		margin-top: .8em;

		font-size: inherit;
		color: darken($secondary-color, 5%);

	}

	/* (3) List separator */
	& > hr{
		display: block;
		position: relative;

		margin: 1em 1.5em;

		border: 0;
		border-bottom: 2px solid darken($bg-color, 5%);
	}

}







/* [3] Card style -> container
---------------------------------*/
#CONTAINER > div.card.container{

	display: flex;
	position: absolute;
		top: 0;
		left: 0;
		width: calc( 100% - 20em );
		min-height: 100%;

	// flex properties
	flex-direction:  row;
	justify-content: space-between;
	align-items:     flex-start;
	align-content:   flex-start;
	flex-wrap:       wrap;

	z-index: 101;
	overflow: hidden;


	/* [3.1] Card style -> instant-search
	---------------------------------*/
	& > input.instant-search{

		display: inline-block;
		position: relative;

		//                   - marg  - padd   - [NEW] - separ
		flex: 0 1 calc( 100% - 2*1em - 2*.5em - 2em - 2*1em );

		margin: 1em .5em;
		padding: .5em 1em;

		margin-right: 0;

		border-radius: 3px / 3px;
		background-color: #fff;

		box-shadow: 0 2px 2px darken(#fff, 10%);

		& + button.card.toggle{
			display: inline-block;
			position: relative;

			flex: 0 0 calc( 2em - 2*.5em );

			margin: 1em .5em;
			margin-left: 0;

			font-weight: bold;

		}

	}

	/* (1) Card container */
	& > section{

		flex: 1 1 0;

		display: flex;
		position: relative;

		margin: 1em .5em;
		padding: 1.5em;

		border-radius: 3px / 3px;
		border: 1px solid transparent;
		box-shadow: 0 1px 1px darken(#fff, 20%);

		box-shadow: 0 1px 1px darken(#fff, 20%);
		&.invalid{ box-shadow: 0; border: 1px solid $form-invalid-color; }
		&.valid{   box-shadow: 0; border: 1px solid $form-valid-color; }

		background-color: #fff;

		color: $primary-color;

		// flex
		flex-direction: column;
		justify-content: flex-start;
		flex-wrap: nowrap;


		&[data-create]{
			border: 1px solid $form-valid-color;
		}

		// hidden mode
		&.search-hidden,
		&.filter-hidden{ display: none; }


		/* (2) REMOVE+EDIT+ADMIN button */
		& > div.remove[data-remove],
		& > div.edit[data-edit],
		& > div.admin[data-admin]{
			display: inline-block;
			position: absolute;
				top: 1.3em;
				left: calc( 100% - 2em );
				width: 1em;
				height: 1em;

			background: url('/asset/svg/remove.svg@bbbbbb') center center no-repeat;
			background-size: auto 100%;

			cursor: pointer;

			&:hover{
				background-image: url('/asset/svg/remove.svg@#{$rd-form-invalid-color}');
			}

		}

		/* (2.1) EDIT button */
		& > div.edit[data-edit]{
			left: calc( 100% - 2em - 1.3em );

			background-image: url('/asset/svg/td.svg@bbbbbb');
			background-size: 80% auto;

			&:hover{
				background-image: url('/asset/svg/td.svg@#{$rd-form-search-color}');
			}

		}

		/* (2.2) ADMIN switch */
		& > div.admin[data-admin]{
			left: calc( 100% - 2em - 1.3em - 1.3em );

			background-image: url('/asset/svg/admin.svg@bbbbbb');
			background-size: 85% auto;

			&:hover{  background-image: url('/asset/svg/admin.svg@bbbbbb'); }

			&[data-active='1']{ background-image: url('/asset/svg/admin.svg@f4bd18'); }

		}

		/* (4) Card generic title */
		& > span.category,
		& > select.category{

			display: block;
			position: relative;
			width: calc( 100% - 5em );

			margin-bottom: .5em;

			font-size: .7em;
			color: darken($secondary-color, 10%);
			text-transform: uppercase;
			letter-spacing: .05em;

		}

		/* (4-edit) Card generic title (select) */
		& > select.category{

			width: calc( 100% + 1em );
			margin:  0;
			padding: 0;
			margin-left:   -.4em; // emulate no <select>
			margin-top:    -1em; // replace as if not a select
			margin-bottom: -.3em; // fix layout for following elements

			// remove border
			border: 0;
			border-radius: 0;

			// remove arrow
			appearance:         none;
			-moz-appearance:    none; /* Firefox */
			-webkit-appearance: none; /* Safari and Chrome */

			background: transparent url('/asset/svg/down_arrow.svg@bbbbbb') right .5em center no-repeat;
			background-size: auto 80%;

		}

		/* (5) Card title */
		& > h1{

			display: flex;
			position: relative;

			color: darken($primary-color, 5%);
			font-size: 1em;

			// flex
			flex-direction:  row;
			justify-content: flex-start;
			flex-wrap:       nowrap;

			&.warning:before{
				content: '';

				display: inline-block;
				position: relative;
					width: 1em;
					height: 1em;

				margin-right: .3em;

				background: url('/asset/svg/warning_radio.svg@#{$rd-form-invalid-color}') center bottom no-repeat;
				background-size: auto 90%;

				text-anchor: center;
			}

			/* (5-edit) Card title -> edit inputs */
			& input{

				display: inline-block;
				position: relative;

				width: 10em;
				flex-shrink: 1;
				flex-grow: 1;

				margin: 0;
				padding: 0;

				border-radius: 0;
				border: 0;

				color: darken($primary-color, 5%);
				font-size: 1em;
				font-weight: bold;

				background: transparent;
			}

			/* (5.1) Sub-content */
			& > span[data-visible]{

				display: inline-block;
				color: $secondary-color;

				margin: 0;
				margin-left: .5em;

				transform: scale(.9);

				white-space: nowrap;

				&[data-visible='0']{ display: none; }

				/* (5.1-edit) input*/
				& > input{
					text-align: center;
				}

			}

		}

		/* (6) Card 2-column array */
		& > div.table{

			display: flex;
			position: relative;

			margin-top: 1em;
			padding: .5em;

			border-radius: 3px / 3px;
			border: 1px solid darken(#fff, 15%);

			// flex properties
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
			flex-wrap: nowrap;

			/* (6.1) Column */
			& > div{

				display: flex;
				position: relative;
					height: 2.3em;

				padding: 0 .4em;

				border-left: 1px solid darken(#fff, 15%);

				color: darken($secondary-color, 20%);

				&:first-child{ border-left: 0; }

				// flex properties
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				flex-wrap: nowrap;

				/* (6.1.1) Column Emphasis */
				& > span,
				& > span:first-child{
					display: block;
					position: relative;

					margin-right: .3em;

					font-size: 1.5em;
					letter-spacing: .05em;

					/* (6.1.1-edit) Editable text entry */
					& > input{
						display: inline-block;
						width: 2em;

						margin: 0;
						padding: 0;

						font-size: .9em;
						text-align: center;

						border-radius: 0;
						border:        0;
					}
				}

				/* (6.2) Column Emphasis */
				& > span:last-child{
					display: block;
					position: relative;
					min-width: 4em;
					max-width: 6em;

					font-size: .8em;
					letter-spacing: .05em;
					text-transform: uppercase;

					overflow: hidden;
				}



			}

		}

		/* (7) Card footer */
		& > div.footer{

			display: flex;
			position: relative;
				margin-top: 1.3em;
				margin-left: -1.5em;
				height: 3.5em;
				//           100% + parent.margin - padding
				width: calc( 100% + 2*1.5em - 2*2em );

			// remove card bottom padding
			margin-bottom: -1.5em;

			padding: 0 2em;

			border-top: 1px solid darken(#fff, 10%);
			border-radius: 0 0 3px 3px;
			background-color: #fafbfd;

			// flex properties
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			flex-wrap: nowrap;


			/* (7.1) Card footer element */
			& > span{

				display: flex;
				position: relative;
				height: 1.3em;

				color: darken($secondary-color, 20%);

				// center text
				flex-direction: row;
				justify-content: center;
				align-items: center;
				flex-wrap: nowrap;

				&:before{
					content: '';

					display: inline-block;
					position: relative;
						width: 1.3em;
						height: 1.3em;

					margin-right: .4em;

					background: transparent center center no-repeat;
					background-size: 80% auto;

				}

				// specific icons
				&.course:before{ background-image: url('/asset/svg/course.svg@#{$menu-item-inactive}'); }
				&.td:before{     background-image: url('/asset/svg/td.svg@#{$menu-item-inactive}'); }
				&.tp:before{     background-image: url('/asset/svg/tp.svg@#{$menu-item-inactive}'); }

				// hover icons
				&.course.active:before{ background-image: url('/asset/svg/course.svg@5bb8f0'); }
				&.td.active:before{     background-image: url('/asset/svg/td.svg@20b565'); }
				&.tp.active:before{     background-image: url('/asset/svg/tp.svg@e85456'); }

				& > span{
					display: inline;

					padding-left: .5em;
					color: #bbb;

					font-size: .9em;
					text-transform: uppercase;
				}

			}

			/* (7.1-edit) Card button submit */
			& > button{
				margin: auto;
			}

			/* (7.2) Card footer separator */
			& > hr{
				display: block;
				position: relative;
					width: 1px;
					height: 1em;

				border: 0;
				background-color: darken(#fff, 10%);
			}
		}

		/* (8) Card sub */
		& > div.sub{

			display: inline-block;
			margin-top: 1em;

			color: lighten($primary-color, 20%);

			&:before{
				content: '';

				display: inline-block;
				position: relative;
					width: 0em;
					height: 1em;

				background: center bottom -.1em no-repeat;
				background-size: auto .9em;

				text-anchor: center;
			}

			&.warning{

				color: $form-invalid-color;

				&:before{
					width: 1em;
					margin-right: .3em;
					background-image: url('/asset/svg/warning_radio.svg@#{$rd-form-invalid-color}');
				}

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

			}

		}

	}

}




/* [4] Card style -> filter
---------------------------------*/
#CONTAINER > div.card.filter{

	display: flex;
	position: fixed;
		top: #{$header-height + .5em };
		left: calc( 100% - 20em );
		//           deflt - marg - scrollBarOffset
		width: calc( 20em - 2*.5em - .5em );
		height: calc( 100% - 2*.5em - #{$header-height} );

	border-radius: 3px / 3px;
	background-color: #fff;

	box-shadow: 0 2px 2px darken(#fff, 10%);

	// flex
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	flex-wrap: nowrap;

	overflow: hidden;
	overflow-y: auto;

	/* (1) Filter Group */
	& > div[title]{

		display: block;
		position: relative;

		margin: .5em 1em;

		/* (1.1) Title content */
		& > div.fold{
			content: attr(title);

			display: inline-block;
			position: relative;

			padding-right: 1.4em;

			background: transparent url('/asset/svg/down_arrow.svg@bbbbbb') right center no-repeat;
			background-size: 1em 1em;

			font-size: .8em;
			color: darken($secondary-color, 10%);
			text-transform: uppercase;
			letter-spacing: .05em;

			cursor: pointer;


			&[data-show='1']{
				background-image: url('/asset/svg/up_arrow.svg@bbbbbb');
			}

		}



		/* (1.2) Filter element */
		& > span{

			display: none;
			position: relative;

			text-indent: 2em;
			margin-bottom: 1em;

			cursor: default;

			&:hover{ text-decoration: underline; }

			&:nth-child(2){
				margin-top: .5em;
			}

			/* (1.3) Pseudo-checkbox */
			&:before{
				content: '';

				display: block;
				position: absolute;
					margin-left: .5em;
					width: calc( 1em - 2*2px );
					height: calc( 1em - 2*2px );

				border-radius: 3px / 3px;
				border: 2px solid $secondary-color;

				background: #fff center center no-repeat;
				background-size: auto 80%;

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

				cursor: pointer;
			}

			/* (1.4) Active pseudo-checkbox */
			&.active:before{

				background-image: url('/asset/svg/checkbox.svg@ffffff');
				background-color: $form-valid-color;
				border-color: $form-valid-color;

			}

		}

		// only show items if filter_group has 'data-show'
		& > div.fold[data-show='1'] ~ span{
			display: block;
		}

	}


}