funky-framadate-front/src/styles/dev-utilities/_debug.scss

.debug {
	font-size: 1rem;
	background: $grey-dark;
	margin: 0.5em;
	padding: 0.5em;

	ul {
		list-style-type: none;
	}

	pre {
		font-size: 1rem;
		padding: 0.5em;
	}
}

label {
	color: $font_color;
	font-weight: bold;
	font-size: 14px;
	line-height: 16px;

	&[for] {
		cursor: pointer;
	}

	&:not([for]) {
		color: $dusty-orange;

		&:before {
			content: "### debug: ce label n'a pas d'attribut for, c'est mal. ### ";
			color: $violet;
		}
	}
}

input {
	&:not([id]) {
		color: $dusty-orange;

		&:before {
			content: "### debug: cet input n'a pas d'attribut id, c'est mal. ###";
			color: $violet;
			display: block;
			padding: 1em;
			background: yellow;
			position: relative;
			top: -1em;
			z-index: 2;
			margin-right: 0.5em;
			right: 0;
			border: solid red 2px;
			box-shadow: 0 0 10px orange;
		}
	}
}

.ng-pristine,
.ng-dirty {
	//border-left: #ccc 3px solid;
	//padding-left: 1em;
}

.ng-touched.ng-invalid {
	//border-left: $danger 3px solid;
	//padding-left: 1em;
}

.theme-dark-crystal {
	.ng-touched.ng-valid {
		//border-left: $success 3px solid;
		//padding-left: 1em;
	}
}