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;

		&.contain-check-table{
			flex-direction: column;
			flex-wrap: nowrap;
			align-items: center;
		}

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

		.inline-row{
			flex: 3em 0 0;
		}

		// 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, .in-dev{
			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);
		}


		.in-dev{
			border-color: $form-search-color;

			background: $form-search-color;

			text-shadow: 1px 1px darken($form-search-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: #2E50C0; }
				&[data-state='locked']{ background-color: #EA460A; }
				&[data-state='detached']{
					background: url('/src/static/sub-menu-side/sync@aaaaaa.svg') center center no-repeat;
					background-size: auto 100%;
				}

			}

			/* (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 */
			.motheure,
			.code,
			.option,
			.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,
			.option{
				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,
					&.add-extension{
						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,
					& > span.rem-extension{
						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');
					}
				}

			}

			.option > span.ignore > span{
				border-radius: 3px;
				margin-right: .4em;
			}

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

				// if in a list like history/view
				&.list{
					float: none;
					margin-left: 50%;
					-webkit-transform: translateX(-50%);
					transform: translateX(-50%);
				}

				& > 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: column;
		flex-wrap: nowrap;

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

		.searchbar{
			flex: 0 0 0;
			width: calc( 100% - 2*2em );
		}
	}

	& > 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;
		}

	}







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

			}

		}

	}




	/* [5] Timeline SVG
	=========================================================*/
	article.timeline.container{

		display: block;
		position: absolute;
			width: calc( 100vw - #{$menu-side-width} - #{$sub-menu-side-width} - 11em );
			flex: 1em;

		overflow: hidden;
		// overflow-x: auto;

		svg.timeline{

			/* (1) svg circles -> set right transform-origin */
			& circle.timeline{

				-webkit-transform-origin: 50% 50% 0;
				transform-origin: 50% 50% 0;

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

				/* (2) Set cursor to pointer */
				&.around{
					cursor: pointer;

					/* (3) Dispatch event to next nodes */
					&:hover + .center{ // center node

						-webkit-transform: scale(1.2);
						transform: scale(1.2);

					}

					&:hover + .center + image + .below{ // below node

						-webkit-transform: translateX(-100%);
						transform: translateX(-100%);

					}

				}

				/* (4) Remove center circle event */
				&.center{

					-webkit-pointer-events: none;
					pointer-events: none;

				}

				/* (5) Set colors according to action type */
				&.around, &.center, &.below{

					&.start{    fill: #2cde8b; }
					&.stop{     fill: #3a3a3a; }
					&.lock{     fill: #e04343; }
					&.unlock{   fill: #af1c1c; }
					&.signal{   fill: #3258d8; }
					&.unsignal{ fill: #2041ab; }

				}

				/* (6) Make around circles a bit transparent */
				&.around{ opacity: .6; }

			}

			/* (7) Avoid icons inside center circles to block :hover */
			image{

				-webkit-pointer-events: none;
				pointer-events: none;

			}

			/* (8) Default 'text' font*/
			text{
				fill: #444;
				font-size: 14px;
				font-family: 'Open Sans';

				&.bold{
					font-size: 16px;
					font-weight: bold;
				}

				&.start{    fill: #2cde8b; }
				&.stop{     fill: #3a3a3a; }
				&.lock{     fill: #e04343; }
				&.unlock{   fill: #af1c1c; }
				&.signal{   fill: #3258d8; }
				&.unsignal{ fill: #2041ab; }
			}

		}

		/* (9) Timeline infobox */
		div.timeline.infobox{
			display: none;
			position: absolute;
				top: 80px;
				left: 0;
				width: auto;
				height: auto;

			padding: .5em 1em;

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

			background: #d8deea;
			color: #444;

			&.active{
				display: block;
			}

		}



	}

}