NxTIC/css/panel-list.scss

@import 'constants';

/* [1] Panneau d'ajout/suppression d'elements
=========================================================*/
#WRAPPER > #CONTAINER section[data-panel-list]{
	display: block;
	position: relative;

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

	background-color: #fff;

	font-size: .9em;
	color: #000;


	/* (1) Header (titre + ajout) */
	& > div[data-header]{
		display: flex;
		position: relative;

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

		padding: .5em .7em;

		border-radius: 3px 3px 0 0;
		border-bottom: 1px solid #ccc;

		background-color: #f5f5f5;
		box-shadow: inset 0 0 5px #eee;

		// Libelle du panel
		& > span,
		& > button{
			color: #333;
			font-weight: bold;
			line-height: 2em;
		}

		// Bouton ajouter
		& > button{
			padding: .1em .7em;

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

			background: #ecf0f1;

			transition: all .1s ease-in-out;

			color: #777;

			// Animation de @hover
			&:hover{
				background: $theme-fg-primary;
				border-color: darken($theme-fg-primary, 10);
				color: #fff;
			}
		}

	}


	/* (2) Description (sous le header) */
	& > div[data-description]{
		display: block;
		position: relative;

		border-bottom: 1px solid #ccc;

		padding: .7em .7em;

		color: #555;
	}



	/* (3) Liste des elements */
	& > ul[data-list]{
		display: flex;
		position: relative;

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

		margin: 0;
		padding: 0;

		list-style: none;


		/* (4) Chaque element de la liste */
		& > li[data-element]{
			display: flex;

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

			padding: 1em;

			// rebord en bas sauf dernier
			&:not(:last-child){
				border-bottom: 1px solid #ccc;
			}

			/* (4.1) Logo et type d'element */
			& > div:nth-child(1){
				display: flex;
					width: 10em;
					height: 6em;

				// flex properties
				flex-direction: column;
				justify-content: flex-end;
				align-items: center;

				// Image pour token
				&[data-token]{
					background: url('/f/svg/token/st/container/666666') center 1em no-repeat;
					// Si le token est actif
					&.active{
						background-image: url('/f/svg/token/st/container/399ced');
					}
				}


				// Image pour utilisateur
				&[data-user]{
					background: url('/f/svg/user/st/container/666666') center 1em no-repeat;
					// Si le token est actif
					&.active{
						background-image: url('/f/svg/user/st/container/399ced');
					}
				}


				// Image pour utilisateur
				&[data-number]{
					background: url('/f/svg/phone_number/st/container/666666') center 1em no-repeat;
					// Si le token est actif
					&.active{
						background-image: url('/f/svg/phone_number/st/container/399ced');
					}
				}

				background-size: auto 50%;



				// Texte pour le type d'element
				& > span{
					display: block;

					padding: 0 .4em;

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

					font-size: .8em;
					color: #555;
					text-transform: uppercase;
					font-weight: bold;
				}

			}

			/* (4.2) Donnees descriptives */
			& > div:nth-child(n+2){
				display: flex;
				position: relative;

				flex: 10em;

				padding: 1em;

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

				font-size: 1em;
				color: #000;
				font-weight: bold;

				// On prefixe chaque donnee
				& > span[data-prefix]:before{
					content: attr(data-prefix) ": ";
					font-weight: normal;
				}
			}

			/* (4.3) Bouton de suppression */
			& > button{
				padding: .1em .7em;
					height: 2em;

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

				background: #fff;

				color: #de2b08;
				font-weight: bold;

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

				// Animation de @hover
				&:hover{
					background: #de2b08;
					color: #fff;
				}
			}

		}
	}


	/* (5) Formulaire d'ajout d'un nouvel element */
	& > div[data-add]{
		display: none;

		// Affichage quand .active
		&.active{
			display: block;
		}

		position: relative;

		padding: 1em;

		border-bottom: 1px solid #ccc;

		background-color: #ecf0f1;

		// font-weight: bold;

		/* (5.1) Description du champ de texte */
		& > .label{
			display: inline-block;
			width: 18em;
			padding-right: 2em;
			text-align: right;
			color: #3b494c;
		}


		/* (5.2) Champs de texte */
		& > input[type='text'],
		& > input[type='email'],
		& > input[type='password']{
			margin: 1em 0;
			padding: .5em .7em;

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

			background-color: #fff;

			color: #000;
			font-weight: normal;

			// Animation de @focus
			&:focus{
				border-color: $theme-fg-primary;
				box-shadow: inset 0 0 2px #ddd;
			}
		}


		/* (5.3) Bouton de creation animation de @hover*/
		& > input[type='submit']:hover{
			background: $theme-fg-primary;
			border-color: darken($theme-fg-primary, 10);
			color: #fff;
		}
	}

}