SMMP/public_html/css/container.scss

@import 'constants';

#WRAPPER > #CONTAINER{

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


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

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

		.inline-row{
			flex: 3em 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@b1b1b1.svg') .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,
	& > section > .inline-row{
		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;
				}
			}

			/* (0) Etat des machines */
			.state{
				display: inline-block;

				width: .7em;
				height: .7em;

				margin-right: .3em;

				border-radius: 50% / 50%;
				
				background-color: #ddd;

				&[data-state='stopped']{ background-color: #ddd; }
				&[data-state='started']{ background-color: #22E07B; }
				&[data-state='signaled']{ background-color: #3897D6; }
				&[data-state='locked']{ background-color: #EA460A; }
				&[data-state='detached']{ background-color: transparent; }

			}

			/* (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:not(.ignore),
				& > span.ignore > span{
					display: inline-block;
					position: relative;
					padding: .1em .5em;
					margin-right: calc( .4em + 2em );
					margin-bottom: .5em;

					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-permission,
					&.add-group,
					&.add-member{
						border-radius: 3px;

						cursor: pointer;


						& > div.dropdown{
							
							display: flex;
							flex-direction: column;
							flex-wrap: nowrap;
							flex: 100%;
							justify-content: space-between;


							position: absolute;
								top: calc( 100% + 5px );
								left: 0;
								width: 12em;
								height: 500%;


							border-radius: 3px;

							overflow: hidden;
							overflow-y: auto;

							background: #fff;

							box-shadow: 0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15);

							z-index: 100;


							& > span{

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

								flex: 2em 1 1;
								cursor: pointer;

								&:hover{

									background-color: #F8F8F8;

								}
							}

						}
					}

					& > span.rem-group,
					& > span.icon-permission,
					& > span.rem-permission,
					& > span.rem-member{
						display: block;
						position: absolute;
							top: -1px;
							left: 100%;
							width: 1em;
							height: calc( 100% - .1em - 2px );
							padding: .12em .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@#{$rd-form-invalid-color}.svg');
						}


					}

					& > span.icon-permission,
					& > span.icon-permission:hover{
						border-color: #ddd;
						background-color: #eee;
						cursor: default;
						background-image: url('/src/static/sub-menu-side/permission.svg');
					}
				}

			}

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

	}


	/* [2-2] INLINE-ROW pour afficher des lignes
	=========================================================*/
	& > section.fstart{
		flex-direction: row;
		flex-wrap: wrap;

		justify-content: flex-start;
		align-items: center;

		.searchbar{
			flex: auto 1 1;
		}
	}

	& > section.active > .inline-row{ flex: auto 1 1; }

	& > section > .inline-row{

		width: calc( 100% - 4em - 2*1em );

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

		overflow: hidden;


		// Sur la même ligne répartis équitablement
		& > span{
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			flex: 100% 1 1;

			border-left: 1px solid #ddd;
			text-align: center;

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

		button{
			flex: auto;
			width: 5em;
		}

	}




	/* [3] Formulaires
	=========================================================*/
	& > section > form, .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@#{$rd-form-invalid-color}.svg') !important;
		background-size: 1em auto;

		color: transparent !important;
	}


	button.valid.active,
	.valid > button.active{
		background-image: url('/src/static/container/active@#{$rd-form-valid-color}.svg')   !important;
	}
	button.neutral.active,
	.neutral > button.active{
		background-image: url('/src/static/container/active@#{$rd-form-neutral-color}.svg') !important;
	}
	button.search.active,
	.search > button.active{
		background-image: url('/src/static/container/active@#{$rd-form-search-color}.svg')  !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@999999.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@007dd8.svg');
			}

		}

	}

}