gamutable/css/gamutable.scss

// ----------------------------
// Surcharge de vue-next-select
// ----------------------------
.gamutable__input--rechercher {
	padding: 0.25rem 1rem;
}
.vue-tags .vue-tag.selected {
	font-size: 1.2rem;
}
div.vue-input > input {
	font-size: 1.2rem;
}
.tag--ub {
	display: inline-block;
}
.gamutable__input--filtrer {
	font-size: 1.2rem;
	//box-shadow: 0 0 0 1px rgb(153, 153, 153) inset;
	padding: 5px 5px !important;
	&:valid {
		font-size: 1.2rem;
		background-color: rgb(153, 153, 153);
		color: #000;
	}
}
.gamutable__input--filtrer:placeholder-shown {
	background-color: transparent;
	color: inherit;
}
// ----------------------------
// Fin de la surcharge de vue-next-select
// ----------------------------
.gamutable--surTable {
	select,
	input {
		margin-bottom: 0;
	}
	.gamutable-nbrMax {
		margin-left: 2rem;
	}
	.includespip {
		margin-left: 2rem;
	}
}
.gamutable--sousTable {
	display: flex;
	justify-content: space-between;
}
.gamutable--pagination {
	display: flex;
	.page-item {
		display: flex;
	}
	.page-link {
		margin: 0 0.2rem;
		background-color: #eee;
		cursor: pointer;
	}
}

.h2-like.titregamutable,
.h2-like.titregamutable_deux {
	font-weight: bold;
}
.gamutable table {
	// patch provisoire
	// .vue-dropdown-item > span {
	// 	display: inline-block;
	// 	min-height: 1rem;
	// }

	font-size: 1rem;
	table-layout: auto;
	thead {
		border: 1px solid rgb(119, 119, 119);
	}
	.gt_labels {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	th > div {
		display: flex;
	}
	.label_tete_colonne {
		flex-grow: 1;
	}
	.iconeTri {
		float: right;
		width: calc(1rem + 4px);
		//position: relative;
		.fa {
			padding: 2px 5px;
			cursor: pointer;
		}
	}
	.tri_col {
		cursor: pointer;
		fill: #cecece;
	}
	.iconeTri > .active {
		fill: rgb(220, 53, 69);
		color: rgb(220, 53, 69);
	}
	tbody tr:hover {
		background-color: rgba(179, 209, 67, 0.27);
	}
}
#app .select {
	background-color: rgba(179, 209, 67, 0.47);
}

td.id {
	cursor: pointer;
}

th.icone {
	width: 30px;
	text-align: center;
}

tr.filtreColonne th {
	padding: 0;
	select {
		margin: 0;
	}
}

td.icone > * {
	width: 100%;
	display: block;
	padding: 0.5rem;
	text-align: center;
}
div.gamutable .url_action {
	padding: 0.2rem;
	display: inline-block;
	background-color: #f5f5f5;
	border: 1px solid #cecece;
	border-radius: 5px;
	&:hover {
		background-color: #cecece;
	}
}

td.icone i {
	font-size: 1.8rem;
}

.vueBlocs {
	display: flex;
	flex-wrap: wrap;
}
.vueBlocs-unbloc {
	width: 23%;
	border: 1px solid #cecece;
	margin-bottom: 1rem;
	margin-right: 1rem;
}

.viderInputSearch {
	color: #ff0000;
}

/* blocks widths (percentage and pixels) */
$i: 100;
@while $i > 0 {
	.w#{$i} {
		width: $i * 1%;
	}
	$i: $i - 5;
}

$i: 1000;
@while $i > 200 {
	.w#{$i}p {
		width: $i * 1px;
	}
	.minw#{$i}p {
		min-width: $i * 1px;
	}
	.maxw#{$i}p {
		max-width: $i * 1px;
	}
	.w#{$i}p input {
		width: $i * 1px;
	}
	$i: $i - 50;
}
$i: 200;
@while $i > 0 {
	.w#{$i}p {
		width: $i * 1px;
	}
	.minw#{$i}p {
		min-width: $i * 1px;
	}
	.maxw#{$i}p {
		max-width: $i * 1px;
	}
	.w#{$i}p input {
		width: $i * 1px;
	}
	$i: $i - 10;
}

.w66 {
	width: calc(100% / 3 * 2);
}
.w33 {
	width: calc(100% / 3);
}
.wauto {
	width: auto;
}
.w960p {
	width: 960px;
}
.minw960p {
	min-width: 960px;
}
.maxw960p {
	max-width: 960px;
}
.w1140p {
	width: 1140px;
}
.minw1140p {
	min-width: 1140px;
}
.maxw1140p {
	max-width: 1140px;
}