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;


	// card container
	&.card{
		display: flex;

		flex-direction: row;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

}



/* [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.card > div.card.container{

	order: 2;
	flex: 1 0 calc( 100% - 20em );

	display: flex;
	min-height: 100%;

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

	z-index: 101;
	overflow: auto;


	/* [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;

			font-weight: bold;

		}

	}

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

		flex: 1 1 20em;

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

		&.invalid{ box-shadow: 0; border: 1px solid $form-invalid-color; }
		&.valid{   box-shadow: 0; border: 1px solid $form-valid-color; }
		&.search{  box-shadow: 0; border: 1px solid $form-search-color; }

		// animation for incoming element
		@keyframes incoming{
			from{ transform: translateY(-2em);  opacity: 0; }
			to{ transform: translateY(0); opacity: 1; }
		}

		// animation for outgoing element
		@keyframes outgoing{
			from{ transform: translateY(0);  opacity: 1; }
			to{ transform: translateY(2em); opacity: 0; }
		}

		// animation to nav in
		&[data-anim-outgoing='1']{ animation: outgoing .4s ease-in-out; }
		&[data-anim-incoming='1']{ animation: incoming .4s ease-in-out; }


		background-color: #fff;

		color: $primary-color;

		// flex
		flex-direction:  column;
		justify-content: space-between;
		flex-wrap:       nowrap;

		z-index: 102;


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

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


		/* (2) REMOVE+EDIT+ADMIN button */
		& > div.goo-menu{

			$btn-size:  1.8em;
			$btn-space: 0em;
			$nb-btn:    3;
			$nb-spc:    $nb-btn - 1;

			$cont-w: $btn-size * $nb-btn + $nb-spc * $btn-space;

			display: inline-block;
			position: absolute;
				top:    1em;
				left:   calc( 100% - 1em - #{$btn-size} - .5em );
				width:  $btn-size;
				height: $btn-size;

			-webkit-filter: url('/asset/svg/filter.svg#goo-menu') drop-shadow(-5px 0 0 #fff);
			filter: url('/asset/svg/filter.svg#goo-menu') drop-shadow(-5px 0 0 #fff);

			cursor: pointer;

			z-index: 103;

			/* (2.1) Pan all on hover */
			&:hover{
				left:   calc( 100% - 1em - #{$cont-w} - .5em - 1em );
				width:  calc( #{$cont-w} + 1em );

				/* (2.1.1) lighter color on hover */
				& > div.remove[data-remove],
				& > div.edit[data-edit],
				& > div.enabled[data-enabled],
				& > div.admin[data-admin]{
					background-color: darken(#fff, 12%);

					/* (2.1.2) displace all but 1st element */
					&.edit[data-edit]{   left: calc( 100% - #{$btn-size * 2 + $btn-space} ); }
					&.remove[data-remove]{ left: calc( 100% - #{$btn-size * 3 + $btn-space * 2} ); }

				}

			}

			/* (2.2) Design elements */
			& > div.remove[data-remove],
			& > div.edit[data-edit],
			& > div.enabled[data-enabled],
			& > div.admin[data-admin]{
				display: inline-block;
				position: absolute;
					top:    0;
					left:   calc( 100% - #{$btn-size} );
					width:  $btn-size;
					height: $btn-size;


				border-radius: 50%;

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

				background: #fff url('/asset/svg/cross.svg@aaaaaa') center center no-repeat;
				background-size:  auto 50%;

				cursor: pointer;

				z-index: 103;

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

				/* (2.2) EDIT button */
				&.edit[data-edit]{
					background-image: url('/asset/svg/a.svg@aaaaaa');
					background-size: auto 60%;
					z-index: 104;

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

				/* (2.3) ADMIN switch */
				&.admin[data-admin]{
					background-image: url('/asset/svg/admin.svg@aaaaaa');
					z-index: 105;

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

				/* (2.3) DISABLED switch */
				&.enabled[data-enabled]{
					background-image: url('/asset/svg/bell.svg@aaaaaa');
					z-index: 105;

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

			}




		}

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

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

			margin-bottom: .5em;

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

			z-index: 102;

		}

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

			width: calc( 100% + 1em );
			height: 3em;
			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
			-webkit-appearance: none; /* Safari and Chrome */
			-moz-appearance:    none; /* Firefox */
			appearance:         none;

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

			font-size: .7em;
			letter-spacing: .05em;
			font-family: inherit;


		}

		/* (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: 1.2em;
					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;
				font-family: inherit;


				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%);
			&:last-of-type{ border-radius: 0 0 3px 3px; }
			background-color: #fafbfd;

			// flex properties
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			align-content: 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 footer input */
				& > input{
					width: 2.5em;

					margin: 0;
					padding: 0;

					border: 0;
				}


			}

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

			}

		}

		/* (9) Card tag list */
		& > div.taglist{

			display: flex;
			margin-top: 1em;

			flex-direction:  row;
			justify-content: flex-start;
			align-items:     flex-start;
			flex-wrap:       wrap;


			/* (9.1) inner tags */
			& > span{
				padding: .2em .5em;
				margin-right: .5em;

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

				background-color: #f9f9f9;

				color: #999;
				font-size: .8em;

			}

		}

	}

}




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

	order: 1;
	flex: 1 0 calc( 90% );

	display: flex;
	min-height: calc( 4em - 2*.5em - 2*.5em );

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

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

	// background-color: #0f0;

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

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

	z-index: 110;

	overflow: visible;
	// overflow-y: visible;

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

		flex: 0 1 5em;

		display: block;
		position: relative;

		margin: .5em 1em;

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

			display: inline-block;
			position: relative;

			padding-right: 1em;

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

			cursor: pointer;

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

			&:hover{
				color: $primary-color;
			}

			&[data-count]:after{
				content: attr(data-count);

				display: inline-block;
				position: absolute;
					margin-top: -.1em;
					margin-left: .5em;
					width:  1em;
					height: clac( 1.5em - 2*.2em );

				padding: .2em .5em;

				border-radius: 3px;

				background: $form-valid-color;

				color: #fff;
				font-size: .8em;
				text-align: center;

			}

			// greyed when 0
			&[data-count='0']:after{ background-color: #ddd; }

		}



		/* (1.2) Filter box */
		& > div.fold{

			display: none;
			position: absolute;
				width: 15em;
				height: 15em;
				margin-top: 2em;

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

			background-color: #fff;

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

			overflow: hidden;
			overflow-y: auto;

			/* (1.3) Filter item */
			& > span{

				display: block;
				position: relative;

				padding: .5em 0;
				padding-left: 2em;

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

				&:nth-child(2n){
					background-color: #f9f9f9;
					&:hover{ background-color: darken(#f9f9f9,5%); }
				}


				-moz-user-select:    none;
				-ms-user-select:     none;
				-webkit-user-select: none;
				user-select:         none;

				cursor: pointer;

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

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

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

					border-radius: 50%;
					background: $form-valid-color;

					transform: scale(0);
					transition: transform .1s ease-in-out;

					cursor: pointer;
				}

				/* (1.3.2) Active pseudo-checkbox */
				&.active:before{
					transform: scale(1);
				}

			}

		}

		// only show item box if filter_group has 'data-show'
		& > div.fold-toggle[data-show='1'] + div.fold{
			display: flex;
		}

	}


}