intégration des mixins CSS minXYZp, minwXYZp et wXYZ pour faciliter les classes sur les colonnes des Gamutables

css/gamutable.css

@@ -147,4 +147,457 @@ td.icone i {
   margin-right: 1rem;
 }
 
+/* blocks widths (percentage and pixels) */
+.w100 {
+  width: 100%;
+}
+
+.w95 {
+  width: 95%;
+}
+
+.w90 {
+  width: 90%;
+}
+
+.w85 {
+  width: 85%;
+}
+
+.w80 {
+  width: 80%;
+}
+
+.w75 {
+  width: 75%;
+}
+
+.w70 {
+  width: 70%;
+}
+
+.w65 {
+  width: 65%;
+}
+
+.w60 {
+  width: 60%;
+}
+
+.w55 {
+  width: 55%;
+}
+
+.w50 {
+  width: 50%;
+}
+
+.w45 {
+  width: 45%;
+}
+
+.w40 {
+  width: 40%;
+}
+
+.w35 {
+  width: 35%;
+}
+
+.w30 {
+  width: 30%;
+}
+
+.w25 {
+  width: 25%;
+}
+
+.w20 {
+  width: 20%;
+}
+
+.w15 {
+  width: 15%;
+}
+
+.w10 {
+  width: 10%;
+}
+
+.w5 {
+  width: 5%;
+}
+
+.w1000p {
+  width: 1000px;
+}
+
+.minw1000p {
+  min-width: 1000px;
+}
+
+.maxw1000p {
+  max-width: 1000px;
+}
+
+.w950p {
+  width: 950px;
+}
+
+.minw950p {
+  min-width: 950px;
+}
+
+.maxw950p {
+  max-width: 950px;
+}
+
+.w900p {
+  width: 900px;
+}
+
+.minw900p {
+  min-width: 900px;
+}
+
+.maxw900p {
+  max-width: 900px;
+}
+
+.w850p {
+  width: 850px;
+}
+
+.minw850p {
+  min-width: 850px;
+}
+
+.maxw850p {
+  max-width: 850px;
+}
+
+.w800p {
+  width: 800px;
+}
+
+.minw800p {
+  min-width: 800px;
+}
+
+.maxw800p {
+  max-width: 800px;
+}
+
+.w750p {
+  width: 750px;
+}
+
+.minw750p {
+  min-width: 750px;
+}
+
+.maxw750p {
+  max-width: 750px;
+}
+
+.w700p {
+  width: 700px;
+}
+
+.minw700p {
+  min-width: 700px;
+}
+
+.maxw700p {
+  max-width: 700px;
+}
+
+.w650p {
+  width: 650px;
+}
+
+.minw650p {
+  min-width: 650px;
+}
+
+.maxw650p {
+  max-width: 650px;
+}
+
+.w600p {
+  width: 600px;
+}
+
+.minw600p {
+  min-width: 600px;
+}
+
+.maxw600p {
+  max-width: 600px;
+}
+
+.w550p {
+  width: 550px;
+}
+
+.minw550p {
+  min-width: 550px;
+}
+
+.maxw550p {
+  max-width: 550px;
+}
+
+.w500p {
+  width: 500px;
+}
+
+.minw500p {
+  min-width: 500px;
+}
+
+.maxw500p {
+  max-width: 500px;
+}
+
+.w450p {
+  width: 450px;
+}
+
+.minw450p {
+  min-width: 450px;
+}
+
+.maxw450p {
+  max-width: 450px;
+}
+
+.w400p {
+  width: 400px;
+}
+
+.minw400p {
+  min-width: 400px;
+}
+
+.maxw400p {
+  max-width: 400px;
+}
+
+.w350p {
+  width: 350px;
+}
+
+.minw350p {
+  min-width: 350px;
+}
+
+.maxw350p {
+  max-width: 350px;
+}
+
+.w300p {
+  width: 300px;
+}
+
+.minw300p {
+  min-width: 300px;
+}
+
+.maxw300p {
+  max-width: 300px;
+}
+
+.w250p {
+  width: 250px;
+}
+
+.minw250p {
+  min-width: 250px;
+}
+
+.maxw250p {
+  max-width: 250px;
+}
+
+.w200p {
+  width: 200px;
+}
+
+.minw200p {
+  min-width: 200px;
+}
+
+.maxw200p {
+  max-width: 200px;
+}
+
+.w150p {
+  width: 150px;
+}
+
+.minw150p {
+  min-width: 150px;
+}
+
+.maxw150p {
+  max-width: 150px;
+}
+
+.w100p {
+  width: 100px;
+}
+
+.minw100p {
+  min-width: 100px;
+}
+
+.maxw100p {
+  max-width: 100px;
+}
+
+.w90p {
+  width: 90px;
+}
+
+.minw90p {
+  min-width: 90px;
+}
+
+.maxw90p {
+  max-width: 90px;
+}
+
+.w80p {
+  width: 80px;
+}
+
+.minw80p {
+  min-width: 80px;
+}
+
+.maxw80p {
+  max-width: 80px;
+}
+
+.w70p {
+  width: 70px;
+}
+
+.minw70p {
+  min-width: 70px;
+}
+
+.maxw70p {
+  max-width: 70px;
+}
+
+.w60p {
+  width: 60px;
+}
+
+.minw60p {
+  min-width: 60px;
+}
+
+.maxw60p {
+  max-width: 60px;
+}
+
+.w50p {
+  width: 50px;
+}
+
+.minw50p {
+  min-width: 50px;
+}
+
+.maxw50p {
+  max-width: 50px;
+}
+
+.w40p {
+  width: 40px;
+}
+
+.minw40p {
+  min-width: 40px;
+}
+
+.maxw40p {
+  max-width: 40px;
+}
+
+.w30p {
+  width: 30px;
+}
+
+.minw30p {
+  min-width: 30px;
+}
+
+.maxw30p {
+  max-width: 30px;
+}
+
+.w20p {
+  width: 20px;
+}
+
+.minw20p {
+  min-width: 20px;
+}
+
+.maxw20p {
+  max-width: 20px;
+}
+
+.w10p {
+  width: 10px;
+}
+
+.minw10p {
+  min-width: 10px;
+}
+
+.maxw10p {
+  max-width: 10px;
+}
+
+.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;
+}
+
 /*# sourceMappingURL=gamutable.css.map */

css/gamutable.scss

@@ -131,3 +131,68 @@ td.icone i {
 	margin-bottom: 1rem;
 	margin-right: 1rem;
 }
+
+
+/* blocks widths (percentage and pixels) */
+$i: 100;
+@while $i > 0 {
+	.w#{$i} {
+		width: $i * 1%;
+	}
+	$i: $i - 5;
+}
+
+$i: 1000;
+@while $i > 100 {
+	.w#{$i}p {
+		width: $i * 1px;
+	}
+	.minw#{$i}p {
+		min-width: $i * 1px;
+	}
+	.maxw#{$i}p {
+		max-width: $i * 1px;
+	}
+	$i: $i - 50;
+}
+$i: 100;
+@while $i > 0 {
+	.w#{$i}p {
+		width: $i * 1px;
+	}
+	.minw#{$i}p {
+		min-width: $i * 1px;
+	}
+	.maxw#{$i}p {
+		max-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;
+}

js/gamutable.js

@@ -20,7 +20,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 jQuery(function () {
   $('#app').on('click', '.url_action', function (e) {