SMMP/css/container.scss

@import 'constants';

#WRAPPER > #CONTAINER{

	/* [1] Section (contenu)
	=========================================================*/
	& > section{
		display: none;
		flex-grow: 1;
	}

	// @active
	& > section.active{
		display: block;
	}

	// @active + .list
	& > section.active.list{
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: flex-start;
		flex-wrap: wrap;

		.inline-box{
			flex: 0 0 1;
		}

		// Barre de recherche
		.searchbar{
			display: inline-block;
			position: relative;
				// width: calc( 100% - 2*1em - 2*1em );
				flex: calc( 100% - 2*1em - 2*1em );
				height: 1em;
			margin: 1em;
			padding: .5em 1em;
			padding-left: 2em;

				border-radius: 3px;
				border: 1px solid #b1b1b1;
				// box-shadow: 0 0 1px #b7b7b7;

				background: #fff url('/src/static/sub-menu-side/search.svg?b1b1b1') .5em center no-repeat;
				background-size: 1em;

				transition: border .4s ease-in-out;

				&:hover,
				&:focus{
					border-color: $form-search-color;
				}
		}

		// Erreur
		.error{
			display: inline-block;
			position: relative;
				width: calc( 100% - 2*1em - 2*1em );
				height: 1em;
			margin: 1em;
			padding: 1em;

			border-radius: 3px;
			border: 1px solid $form-invalid-color;

			background: $form-invalid-color;

			color: #fff;
			text-shadow: 1px 1px darken($form-invalid-color, 10);
		}
	}



	/* [2] INLINE-BOX pour afficher les listes de donnees
	=========================================================*/
	& > section > .inline-box{
		display: inline-block;
		position: relative;
			// width: calc( 50% - 2*1em - 2*1em );
			flex: calc( 50% - 2*1em - 2*1em );
			margin: 1em;
			padding: 1em;

			border-radius: 3px;
			box-shadow: 0 0 1px #b7b7b7;

			background-color: #fff;

			// Lors de la recherche, quand on veut en masquer
			&.hidden{
				display: none;
			}

			a{
				text-decoration: none;
				color: inherit;
			}


			&.selected{
				border: 1px solid #7362ff;

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

				&:hover{
					box-shadow: 2px 2px 7px #aaa;
				}
			}

			/* (1) Titre de l'element */
			.title{
				display: inline-block;

				font-size: 1.15em;
				font-weight: bold;

				color: darken($theme-color, 2);
				white-space: nowrap;

				& > span{
					font-size: .8em;
					color: #333;
				}
			}

			/* (2) Code RFID */
			/* (3) Adresse mail */
			.code,
			.mail{
				display: block;
				margin: 1em;
				color: #333;
				white-space: nowrap;

				// svg (icone)
				svg{
					display: inline-block;
					position: relative;
						margin-left: .5em;
						margin-right: .5em;
						margin-bottom: -.6em;
						width: 1.5em;
						height: 2em;

					pointer-events: none;

					path#stylisable{
						fill: #333 !important;

						pointer-events: none;
					}

					path#stroke-stylisable{
						stroke: #333 !important;

						pointer-events: none;
					}
				}

			}



			/* (4) Groupes */
			.groups{
				display: block;
				margin: 1em;
				color: #333;
				// white-space: nowrap;

				// svg (icone)
				svg{
					display: inline-block;
					position: relative;
						margin-left: .5em;
						margin-right: .5em;
						margin-bottom: -.6em;
						width: 1.5em;
						height: 2em;

					pointer-events: none;

					path{
						fill: #333 !important;

						pointer-events: none;
					}
				}

				& > span{
					display: inline-block;
					position: relative;
					padding: .1em .5em;
					margin-right: calc( .4em + 2em );

					border-radius: 3px 0 0 3px;
					border: 1px solid #bdbdbd;
					box-shadow: inset 0 0 2px #fafafa;

					background-color: #f9f9f9;

					color: #333;

					cursor: default;

					&.add-group,
					&.add-member{
						border-radius: 3px;

						cursor: pointer;
					}

					& > span.rem-group,
					& > span.rem-member{
						display: block;
						position: absolute;
							top: -1px;
							left: 100%;
							width: 1em;
							height: calc( 100% - .1em - 2px );
							padding: .1em .5em;

						border-radius: 0 3px 3px 0;
						border: 1px solid #bdbdbd;
						box-shadow: inset 0 0 2px #fafafa;

						background: url('/src/static/sub-menu-side/remove.svg') center center no-repeat;
						background-size: auto 70%;
						background-color: #f9f9f9;

						color: inherit;

						cursor: pointer;

						&:hover{
							background-image: url('/src/static/sub-menu-side/remove.svg?'+$form-invalid-color);
						}


					}

				}

			}

			/* (5) Lien vers la modification */
			.link_edit,
			.link_remove{
				display: inline-block;
				float: right;
				position: relative;
					width: 1em;
					height: 1em;
				margin-left: 1em;

				cursor: pointer;

				& > svg{
					width: 100%;
					height: 100%;
					fill: #ddd !important;

					transition: fill .4s ease-in-out;

					pointer-events: none;
				}

				&:hover{
					& > svg{
						fill: $form-neutral-color !important;
					}
				}
			}

			/* (6) Lien vers la suppression */
			.link_remove{

				&:hover{
					& > svg{
						fill: $form-invalid-color !important;
					}
				}
			}

	}

	/* [3] Formulaires
	=========================================================*/
	& > section > form{
		display: inline-block;
		position: relative;
			left: 50%;
			margin: .3em 0;
			padding: 1em;

		border-radius: 3px;
		border-color: $form-invalid-color;
		box-shadow: 0 0 1px #b7b7b7;

		background-color: #fff;

		transform: translateX(-50%);



		&.valid{
			border-color: $form-valid-color;
		}

		&.neutral{
			border-color: $form-neutral-color;
		}

		&.search{
			border-color: $form-neutral-color;
		}

		// Textes centres
		.edit_search_view,
		.remove_search_view{
			display: inline-block;
				width: 100%;

			text-align: center;
			color: #aaaaaa;

			span{
				color: #888888;
			}
		}


		/* (1) Champs de texte */
		input[type=text],
		input[type=mail],
		input[type=password],
		select,
		&.invalid > input[type=text],
		&.invalid > input[type=mail],
		&.invalid > input[type=password],
		&.invalid > select,
		input.invalid[type=text],
		input.invalid[type=mail],
		input.invalid[type=password],
		select.invalid{
			display: inline-block;
			margin: 1em 0;
			padding: .7em 1em;

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

			color: #2f3033;

			transition: border .4s ease-in-out;

			&:focus,
			&:hover{
				border-color: $form-invalid-color;
			}
		}


		select{
			width: 100%;
			display: block;
			background: #fff;

			option{
				padding: .5em;
			}
		}


		// Champs valides
		&.valid > input[type=text],
		&.valid > input[type=mail],
		&.valid > input[type=password],
		&.valid > select,
		input.valid[type=text],
		input.valid[type=mail],
		input.valid[type=password],
		select.valid{
			&:focus,
			&:hover{
				border-color: $form-valid-color;
			}
		}

		// Champs neutres
		&.neutral > input[type=text],
		&.neutral > input[type=mail],
		&.neutral > input[type=password],
		&.neutral > select,
		input.neutral[type=text],
		input.neutral[type=mail],
		input.neutral[type=password],
		select.neutral{
			&:focus,
			&:hover{
				border-color: $form-neutral-color;
			}
		}

		// Champs neutres
		&.search > input[type=text],
		&.search > input[type=mail],
		&.search > input[type=password],
		&.search > select,
		input.search[type=text],
		input.search[type=mail],
		input.search[type=password]{
			&:focus,
			&:hover{
				border-color: $form-search-color;
			}
		}



		/* (2) Boutons */
		button,
		button.invalid,
		&.invalid > button{
			display: inline-block;
			position: relative;
				left: 50%;

			padding: .7em 1em;

			border-radius: 3px;
			border: 1px solid $form-invalid-color;

			background: $form-invalid-color center center no-repeat;

			color: #fff;

			transition: background .4s ease-in-out;

			transform: translateX(-50%);

			&:hover,
			&:focus,
			&:disabled{
				background-color: #fff;
				color: $form-invalid-color;
			}
		}


		// Boutons valides
		button.valid,
		&.valid > button{
			border-color: $form-valid-color;

			background-color: $form-valid-color;

			&:hover,
			&:focus,
			&:disabled{
				background-color: #fff;
				color: $form-valid-color;
			}
		}

		// Boutons neutres
		button.neutral,
		&.neutral > button{
			border-color: $form-neutral-color;

			background-color: $form-neutral-color;

			&:hover,
			&:focus,
			&:disabled{
				background-color: #fff;
				color: $form-neutral-color;
			}
		}

		// Boutons recherche
		button.search,
		&.search > button{
			border-color: $form-search-color;

			background-color: $form-search-color;

			&:hover,
			&:focus,
			&:disabled{
				background-color: #fff;
				color: $form-search-color;
			}
		}


		// Boutons quand action validee
		&.invalid > button.active,
		button.invalid.active,
		button.active{
			background-color: #fff;
			background-image: url('/src/static/container/active.svg?'+$rd-form-invalid-color) !important;
			background-size: 1em auto;

			color: transparent !important;
		}


		button.valid.active,
		&.valid > button.active{
			background-image: url('/src/static/container/active.svg?'+$rd-form-valid-color)   !important;
		}
		button.neutral.active,
		&.neutral > button.active{
			background-image: url('/src/static/container/active.svg?'+$rd-form-neutral-color) !important;
		}
		button.search.active,
		&.search > button.active{
			background-image: url('/src/static/container/active.svg?'+$rd-form-search-color)  !important;
		}



		// "OU" separant les boutons
		hr.OR[data-label]{
			display: block;
			position: relative;
				width: 100%;
				height: 0;

			border: 0;
			border-bottom: 1px dashed $form-invalid-color;

			&:before{
				content: attr(data-label);
				display: inline-block;
				position: relative;
					top: 50%;
					left: 50%;
					padding: 0 1em;

				background-color: #fff;

				color: $form-invalid-color;

				transform: translateX(-50%) translatey(-50%);
			}

		}

		// "OU" valide
		.valid > hr.OR,
		hr.OR.valid{
			border-bottom: 1px dashed $form-valid-color;
			&:before{
				color: $form-valid-color;
			}

		}

		// "OU" neutre
		.neutral > hr.OR,
		hr.OR.neutral{
			border-bottom: 1px dashed $form-neutral-color;
			&:before{
				color: $form-neutral-color;
			}

		}

		// "OU" recherche
		.search > hr.OR,
		hr.OR.search{
			border-bottom: 1px dashed $form-search-color;
			&:before{
				color: $form-search-color;
			}

		}
	}




}

/* [4] Tableau à cocher
=========================================================*/
article.check-table{

	display: flex;

	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;

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


	& > div{
		display: flex;

		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;

		flex: 100%;
		padding: .8em 0;

		color: #333;

		background: #f8f8f8;
		border-bottom: 1px solid #eee;

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

		&:nth-child(2n){
			background: #fdfdfd;
		}

		overflow: hidden;


		& > span{
			flex: 100%;
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: center;


			/* (1) Gestion du checkbox HACK */
			input[type='checkbox']{ display: none; }

			input[type='checkbox'] + label[for]{
				display: inline-block;
				position: absolute;
					width: 1.2em;
					height: 1.2em;

				// border-radius: 50% / 50%;

				background: url('/src/static/container/checkbox.svg') center center no-repeat;
				background-size: 100% auto;;

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

				cursor: pointer;
			}

			input[type='checkbox']:checked + label[for]{
				background-image: url('/src/static/container/checkbox@checked.svg');
			}

		}

	}

}