Projet

Général

Profil

0001-CSS-remove-vendor-prefixed-flexbox-properties-42287.patch

Thomas Jund, 30 avril 2020 09:43

Télécharger (41,9 ko)

Voir les différences:

Subject: [PATCH] CSS: remove vendor prefixed flexbox properties (#42287)

 static/alpes-maritimes-2018/_custom.scss      | 32 +++++-------
 static/amiens-metropole/_footer.scss          |  2 +-
 static/amiens-metropole/_forms.scss           | 32 ++++++------
 static/amiens-metropole/_header.scss          | 40 +++++++-------
 static/amiens-metropole/_layout.scss          | 18 +++----
 static/blois-2018/_custom.scss                |  2 -
 static/dreux/_custom.scss                     |  4 +-
 static/fontenay-sous-bois-2018/_custom.scss   |  9 ----
 static/grandlyon-sau/_categorie-demande.scss  | 42 +++++++--------
 static/grandlyon-sau/_custom.scss             | 32 ++++++------
 static/grenoble-metropole-2019/_custom.scss   | 24 ++++-----
 static/hautes-alpes-2018/_circle-steps.scss   | 20 +++----
 static/hautes-alpes-2018/_custom.scss         | 52 +++++++++----------
 .../hautes-alpes-2018/_neutral-variant.scss   | 12 ++---
 static/includes/_cells.scss                   | 12 -----
 static/includes/_forms.scss                   |  5 --
 static/includes/_layout.scss                  | 18 -------
 static/includes/wcs/_nearby-form.scss         |  7 ---
 static/includes/wcs/_steps.scss               | 16 ------
 static/metz-metropole-2019/_custom.scss       | 23 --------
 static/meyzieu-2018/_custom.scss              | 28 +++++-----
 static/montlouis-sur-loire/_custom.scss       |  2 -
 static/portal-agent/css/agent-portal.scss     |  2 -
 static/publik/_custom.scss                    |  2 -
 static/saone-et-loire-cd71-2019/_custom.scss  |  3 --
 static/toodego/_forms.scss                    |  4 --
 static/toodego/_specialpages.scss             |  4 --
 static/toodego/_tiles.scss                    |  3 --
 static/tours-metropole/_custom.scss           |  5 +-
 static/venissieux/_custom.scss                |  1 -
 static/villeurbanne-2018/_custom.scss         |  2 +-
 31 files changed, 167 insertions(+), 291 deletions(-)
static/alpes-maritimes-2018/_custom.scss
109 109

  
110 110
div#header-wrapper {
111 111
	display: flex;
112
	display: -ms-flexbox;
113 112
	padding: 0 2ex;
114 113
	background: #fff;
115 114
}
......
161 160
	}
162 161
	div.homepage-suggestions, div.events, div.homepage-prefooter-body, div.homepage-quote, div.homepage-search {
163 162
		display: flex;
164
		display: -ms-flexbox;
165
		@include vendor-prefix(justify-content, center);
166
		@include vendor-prefix(align-items, center);
167
		@include vendor-prefix(flex-wrap, wrap);
163
		justify-content: center;
164
		align-items: center;
165
		flex-wrap: wrap;
168 166
	}
169 167
	div.homepage-search {
170
		@include vendor-prefix(align-items, flex-start);
168
		align-items: flex-start;
171 169
		div.searchcell {
172 170
			padding: 0;
173 171
		}
......
533 531

  
534 532
div#social-steps ol {
535 533
	display: flex;
536
	display: -ms-flex;
537 534
	padding: 0 1em;
538
	@include vendor-prefix(justify-content, center);
535
	justify-content: center;
539 536
	li {
540 537
		min-width: 15%;
541 538
		list-style-type: none;
542 539
		margin: 0 1.5em;
543 540
		display: flex;
544
		display: -ms-flex;
545
		@include vendor-prefix(justify-content, flex-start);
546
		@include vendor-prefix(align-items, center);
547
		@include vendor-prefix(flex-direction, column);
541
		justify-content: flex-start;
542
		align-items: center;
543
		flex-direction: column;
548 544
		span {
549 545
			&.marker {
550 546
				display: flex;
551
				display: -ms-flex;
552
				@include vendor-prefix(justify-content, center);
553
				@include vendor-prefix(align-items, center);
547
				justify-content: center;
548
				align-items: center;
554 549
				@media screen and ($max-mobile-viewport) {
555 550
					font-size: 100%;
556 551
					background: #fff;
......
926 921
		div.dossiers, div.mes-dossiers {
927 922
			padding: 2ex 0;
928 923
			display: flex;
929
			display: -ms-flexbox;
930
			@include vendor-prefix(justify-content, space-around);
931
			@include vendor-prefix(align-items, center);
932
			@include vendor-prefix(flex-wrap, wrap);
924
			justify-content: space-around;
925
			align-items: center;
926
			flex-wrap: wrap;
933 927
		}
934 928
		div.mes-dossiers {
935 929
			a.dossier-autonomie, a.dossier-handicap {
static/amiens-metropole/_footer.scss
1 1
footer {
2
	@include flex(0 1 1);
2
	flex: 0 1 1;
3 3
	height: 210px;
4 4
	width: 100%;
5 5

  
static/amiens-metropole/_forms.scss
103 103
	.cell.trackingcodeinputcell .wcs-tracking-code-input {
104 104
		@extend %wcs-form;
105 105
		@extend %default-block;
106
		@include flexbox();
107
		@include justify-content(center);
108
		@include flex-direction(column);
109
		@include vendor-prefix(align-items, center);
106
		display: flex;
107
		justify-content: center;
108
		flex-direction: column;
109
		align-items: center;
110 110
		margin: 0 auto;
111 111
		overflow: auto;
112 112
		padding: 10px 20px;
......
144 144
	max-width: $width;
145 145

  
146 146
	#columns {
147
		@include flexbox();
148
		@include justify-content(space-between);
147
		display: flex;
148
		justify-content: space-between;
149 149

  
150 150
		margin: 0 auto;
151 151
		width: 100%;
......
154 154
		// inside the div resides the form and its title
155 155
		#gauche, #rub_service {
156 156
			@extend %wcs-form;
157
			@include flex(1 1 0);
157
			flex: 1 1 0;
158 158
			padding: 1em;
159 159

  
160 160
			&.has-sidebox {
161
				@include flex(2 1 0);
162
				@include order(0);
161
				flex: 2 1 0;
162
				order: 0;
163 163
				float: none;
164 164
			}
165 165
		}
......
188 188

  
189 189
		#gauche {
190 190
			@extend %one-third;
191
			@include flex(1 1 0);
192
			@include order(1);
191
			flex: 1 1 0;
192
			order: 1;
193 193
			margin: 0;
194 194
			float: none;
195 195
			background: white;
......
215 215

  
216 216
@media screen and ($min-desktop-viewport) {
217 217
	#page #main-content-wrapper #main-content #content #columns {
218
		@include flex-direction(row);
218
		flex-direction: row;
219 219
	}
220 220
}
221 221

  
222 222
@media screen and ($max-mobile-viewport) {
223 223
	#page #main-content-wrapper #main-content #content #columns {
224
		@include flex-direction(column);
224
		flex-direction: column;
225 225

  
226 226
		#gauche {
227
			@include order(0);
227
			order: 0;
228 228
			width: 100%;
229 229
			padding: 0;
230 230

  
231 231
			#tracking-code {
232
				@include order(0);
232
				order: 0;
233 233
				padding: 1em;
234 234

  
235 235
				a {
......
239 239
		}
240 240

  
241 241
		.has-sidebox {
242
			@include order(1);
242
			order: 1;
243 243
			width: 100%;
244 244
			padding: 0;
245 245
		}
static/amiens-metropole/_header.scss
2 2
$header-content-margin: 5px;
3 3

  
4 4
.site-header {
5
	@include flex(0 1 0);
5
	flex: 0 1 0;
6 6

  
7 7
	background: $primary-color;
8 8

  
......
10 10
		padding: 0;
11 11

  
12 12
		#top {
13
			@include flexbox();
14
			@include vendor-prefix(flex-wrap, nowrap);
15
			@include justify-content(space-between);
13
			display: flex;
14
			flex-wrap: nowrap;
15
			justify-content: space-between;
16 16

  
17 17
			margin: auto; // allow #top to be horizontally center within the header bar
18 18
			max-width: $column-width;
......
31 31
}
32 32

  
33 33
.top-left {
34
	@include vendor-prefix(align-self, flex-start);
35
	@include order(0);
36
	@include flexbox();
37
	@include vendor-prefix(flex-wrap, nowrap);
34
	align-self: flex-start;
35
	order: 0;
36
	display: flex;
37
	flex-wrap: nowrap;
38 38

  
39 39
	height: $header-height;
40 40
}
41 41

  
42 42
#site-title {
43
	@include flex(1 1 0);
44
	@include vendor-prefix(align-self, center);
43
	flex: 1 1 0;
44
	align-self: center;
45 45

  
46 46
	margin: $header-content-margin;
47 47

  
......
76 76
}
77 77

  
78 78
#toplinks {
79
	@include vendor-prefix(align-self, flex-end);
80
	@include order(1);
79
	align-self: flex-end;
80
	order: 1;
81 81
	position: relative;
82 82
	right: unset;
83 83
	left: unset;
......
90 90

  
91 91
	.logged-in,
92 92
	.login {
93
		@include flexbox();
94
		@include justify-content(center);
95
		@include vendor-prefix(align-items, center);
93
		display: flex;
94
		justify-content: center;
95
		align-items: center;
96 96
		text-align: center;
97 97
		// flexbug 2 on IE11 (https://github.com/philipwalton/flexbugs#flexbug-2)
98 98
		max-width: 100%;
......
107 107
		}
108 108

  
109 109
		a {
110
			@include flex(1 1 50%);
110
			flex: 1 1 50%;
111 111
			color: white;
112 112
			font-weight: bold;
113 113
			height: $header-height;
......
175 175
		height: $header-height;
176 176

  
177 177
		#header #top {
178
			@include flex-direction(row);
178
			flex-direction: row;
179 179

  
180 180
			#toplinks {
181 181
				width: (100 / 3 + 0%);
......
189 189
		height: $header-height * 2;
190 190

  
191 191
		#header #top {
192
			@include flex-direction(column);
193
			@include justify-content(space-around);
192
			flex-direction: column;
193
			justify-content: space-around;
194 194

  
195 195
			#toplinks,
196 196
			.top-left {
197
				@include vendor-prefix(align-self, stretch);
197
				align-self: stretch;
198 198
				max-width: 100%;
199 199
			}
200 200

  
static/amiens-metropole/_layout.scss
19 19
}
20 20

  
21 21
.pull-right {
22
	@include flex(1 1 0);
22
	flex: 1 1 0;
23 23
	margin-left: auto;
24 24
}
25 25

  
......
27 27
	max-width: $width;
28 28

  
29 29
	.inside-content {
30
		@include flexbox();
31
		@include justify-content(space-between);
30
		display: flex;
31
		justify-content: space-between;
32 32
		margin: 0 auto;
33 33
		max-width: $column-width;
34 34

  
35 35
		&.three-columns {
36
			@include flex-direction(row);
36
			flex-direction: row;
37 37
			margin-top: 2em;
38 38

  
39 39
			.column {
40 40
				// IE11 workaround for https://github.com/philipwalton/flexbugs#flexbug-4
41
				@include flex(1 1 100px);
41
				flex: 1 1 100px;
42 42
				width: (100/3 + 0%);
43 43
				padding: 5px 15px;
44 44
			}
......
47 47
}
48 48

  
49 49
#content {
50
	@include flex-direction(row);
50
	flex-direction: row;
51 51
}
52 52

  
53 53
body.has-picture, .page-index #content {
54
	@include flex-direction(column);
54
	flex-direction: column;
55 55
}
56 56

  
57 57
#main-content-wrapper {
58
	@include flex(1 1 0);
58
	flex: 1 1 0;
59 59

  
60 60
	#main-content {
61 61
		width: 100%;
......
74 74
	#content .wide-container .three-columns.inside-content {
75 75
		// IE11 workaround https://github.com/philipwalton/flexbugs#flexbug-14
76 76
		// avoid flex-direction: column to ignore container height to fit fit its contents
77
		@include vendor-prefix(flex-flow, wrap);
77
		flex-flow: wrap;
78 78
		.column {
79 79
			max-width: 100%;
80 80
			min-width: 100%;
static/blois-2018/_custom.scss
85 85

  
86 86
	div#top {
87 87
		background: url(img/bandeau.jpeg) top right no-repeat;
88
		-ms-flex: 1 auto;
89
		-webkit-flex-grow: 1;
90 88
		flex-grow: 1;
91 89
		height: $header-height;
92 90
		text-align: center;
static/dreux/_custom.scss
31 31
}
32 32

  
33 33
div.buttons.submit {
34
	@include flexbox();
35
	@include justify-content(space-between);
34
	display: flex;
35
	justify-content: space-between;
36 36
	div.submit-button {
37 37
		order: 3;
38 38
		flex-grow: 1;
static/fontenay-sous-bois-2018/_custom.scss
251 251
	}
252 252
	form {
253 253
		margin-left: 0;
254
		display: -ms-flexbox;
255 254
		display: flex;
256
		-ms-flex-wrap: wrap;
257 255
		flex-wrap: wrap;
258 256
		p {
259 257
			width: 100%;
260 258
		}
261 259
		input {
262
			-ms-flex: 1;
263 260
			flex: 1;
264 261
			margin-right: 2rem;
265 262
			@media screen and ($max-mobile-viewport) {
......
331 328
			background: transparent center left no-repeat;
332 329
			height: 80px;
333 330
			margin: 0;
334
			display: -ms-flexbox;
335 331
			display: flex;
336
			-ms-flex-direction: column;
337 332
			flex-direction: column;
338
			-ms-justify-content: center;
339 333
			justify-content: center;
340 334
			padding-left: 80px;
341 335
			text-align: left;
......
466 460
		text-transform: none;
467 461
	}
468 462
	form div.buttons {
469
		display: -ms-flexbox;
470 463
		display: flex;
471
		-ms-justify-content: space-between;
472 464
		justify-content: space-between;
473 465
		button {
474 466
			margin-right: 0;
475 467
		}
476 468
		.submit-button {
477
			-ms-order: 2;
478 469
			order: 2;
479 470
		}
480 471
		.cancel-button button {
static/grandlyon-sau/_categorie-demande.scss
7 7
					div > ul > li {
8 8
					display: none;
9 9
					&.selected {
10
						@include flexbox();
11
						@include flex-direction(row);
10
						display: flex;
11
						flex-direction: row;
12 12
						@media screen and ($max-mobile-viewport) {
13
							@include flex-direction(column);
13
							flex-direction: column;
14 14
						}
15 15
					}
16 16
				}
......
19 19
		div {
20 20
			// list of top level categories
21 21
			> ul {
22
				@include flexbox();
23
				@include flex-direction(column);
22
				display: flex;
23
				flex-direction: column;
24 24
				> li {
25 25
					@extend %homepage-block-color;
26 26
					margin-bottom: 4px;
......
40 40
					}
41 41
					// list of sub-categories
42 42
					ul {
43
						@include flexbox();
44
						@include flex-direction(column);
43
						display: flex;
44
						flex-direction: column;
45 45
						@extend %homepage-block-color;
46 46
						&:hover {
47 47
							@extend %homepage-block-hover;
......
109 109
			@media screen and ($min-desktop-viewport) {
110 110
				> ul {
111 111
					> li {
112
						@include flexbox();
113
						@include flex-direction(row);
112
						display: flex;
113
						flex-direction: row;
114 114
						border-left: 5px solid $body-background;
115 115

  
116 116
						&:hover {
117 117
							border-left: $menucell-hover-border;
118 118
						}
119 119
						a {
120
							@include vendor-prefix(flex-grow, 1);
120
							flex-grow: 1;
121 121
							margin-top: auto;
122 122
							margin-bottom: auto;
123 123
						}
124 124
						ul {
125
							@include vendor-prefix(flex-grow, 1);
126
							@include vendor-prefix(flex-basis, 70%);
127
							@include flex-direction(row);
128
							@include justify-content(flex-end);
129
							@include vendor-prefix(flex-wrap, nowrap);
125
							flex-grow: 1;
126
							flex-basis: 70%;
127
							flex-direction: row;
128
							justify-content: flex-end;
129
							flex-wrap: nowrap;
130 130
							margin-left: auto;
131 131
							li {
132
								@include flexbox();
133
								@include flex-direction(row);
134
								@include vendor-prefix(flex-basis, 10em);
132
								display: flex;
133
								flex-direction: row;
134
								flex-basis: 10em;
135 135
								border-left: 4px solid $cell-background;
136 136
								border-right: 0;
137 137
								border-bottom: 0;
......
167 167
		&.categorie-demandes div > ul > li {
168 168
			display: none;
169 169
			&.selected {
170
				@include flexbox();
171
				@include flex-direction(column);
170
				display: flex;
171
				flex-direction: column;
172 172
				@media screen and ($min-desktop-viewport) {
173
					@include flex-direction(row);
173
					flex-direction: row;
174 174
				}
175 175
			}
176 176
		}
static/grandlyon-sau/_custom.scss
74 74
div#main-content-wrapper {
75 75
	margin: 2ex auto;
76 76
	div#content {
77
		@include vendor-prefix(align-items, flex-start);
77
		align-items: flex-start;
78 78
	}
79 79
	div#columns {
80 80
		padding: 1em;
......
190 190
				float: none;
191 191
			}
192 192
			.buttons {
193
				@include flexbox();
194
				@include vendor-prefix(justify-content, center);
193
				display: flex;
194
				justify-content: center;
195 195
				.widget {
196 196
					padding: 1em;
197
					@include flex(1 1 1);
197
					flex: 1 1 1;
198 198
				}
199 199
			}
200 200
		}
......
220 220
				}
221 221
			}
222 222
			div.submit {
223
				@include flexbox();
223
				display: flex;
224 224
			}
225 225
			div.SubmitWidget {
226 226
				&.submit-button {
......
276 276
	}
277 277
	.menucell.urgence {
278 278
		ul {
279
			@include flexbox();
280
			@include flex-direction(row);
281
			@include vendor-prefix(flex-wrap, wrap);
282
			@include justify-content(space-around);
283
			@include vendor-prefix(align-items, stretch);
279
			display: flex;
280
			flex-direction: row;
281
			flex-wrap: wrap;
282
			justify-content: space-around;
283
			align-items: stretch;
284 284
			@media screen and ($max-mobile-viewport) {
285
				@include flex-direction(column);
285
				flex-direction: column;
286 286
			}
287 287
			li {
288 288
				@extend %homepage-block-color;
289
				@include vendor-prefix(flex-grow, 1);
289
				flex-grow: 1;
290 290
				margin: 10px;
291 291
				padding: 1em 0 0 0;
292 292
				position: relative;
......
341 341
		}
342 342
	}
343 343
	div.homepage-container {
344
		@include vendor-prefix(flex-grow, 1);
344
		flex-grow: 1;
345 345
		* {
346 346
			background-color: transparent;
347 347
		}
348 348
		div.services {
349
			@include flexbox();
350
			@include vendor-prefix(justify-content, center);
351
			@include vendor-prefix(flex-wrap, wrap);
349
			display: flex;
350
			justify-content: center;
351
			flex-wrap: wrap;
352 352
			> div {
353 353
				width: 350px;
354 354
				@media screen and ($max-mobile-viewport) {
static/grenoble-metropole-2019/_custom.scss
172 172
		margin-bottom: 20px;
173 173
		margin-right: 0;
174 174
	}
175
	@include vendor-prefix(flex-direction, column);
175
	flex-direction: column;
176 176
	div.bandeau {
177 177
		background-repeat: no-repeat;
178 178
		padding: 80px 0;
......
199 199
		}
200 200
	}
201 201
	div.content-wrapper div.columns {
202
		display: -ms-flexbox;
203 202
		display: flex;
204 203
		justify-content: space-between;
205 204
		@media screen and ($max-mobile-viewport) {
206
			@include vendor-prefix(flex-direction, column);
205
			flex-direction: column;
207 206
		}
208 207
		div.right {
209 208
			width: 30%;
......
677 676
	box-shadow: 0px 0px 5px #888888;
678 677
	min-width: 250px;
679 678
	> div {
680
		display: -ms-flexbox;
681 679
		display: flex;
682
		@include vendor-prefix(justify-content, space-between);
680
		justify-content: space-between;
683 681
	}
684 682
	div.user-profile {
685 683
		font-weight: bold;
......
704 702
		margin: 10px;
705 703
	}
706 704
	div.user-infos {
707
		@include vendor-prefix(flex-grow, 2);
705
		flex-grow: 2;
708 706
	}
709 707
	a.user-dashboard-item {
710 708
		background: $primary-color;
......
744 742
		margin: 2ex 1ex 0 150px;
745 743
		@media screen and ($max-mobile-viewport) {
746 744
			margin: 3ex 1ex 0 1ex;
747
			@include vendor-prefix(justify-content, center);
745
			justify-content: center;
748 746
		}
749 747
		@media screen and (max-width: $very-small-screen) {
750 748
			margin: 3ex 0 0 0;
751 749
		}
752
		display: -ms-flexbox;
753 750
		display: flex;
754
		@include vendor-prefix(justify-content, flex-start);
755
		@include vendor-prefix(flex-wrap, wrap);
751
		justify-content: flex-start;
752
		flex-wrap: wrap;
756 753
	}
757 754
}
758 755

  
......
1288 1285
			}
1289 1286
		}
1290 1287
		div.buttons {
1291
			display: -ms-flexbox;
1292 1288
			display: flex;
1293
			@include vendor-prefix(flex-direction, row-reverse);
1294
			@include vendor-prefix(justify-content, space-between);
1295
			@include vendor-prefix(flex-wrap, wrap);
1289
			flex-direction: row-reverse;
1290
			justify-content: space-between;
1291
			flex-wrap: wrap;
1296 1292
		}
1297 1293
	}
1298 1294
}
static/hautes-alpes-2018/_circle-steps.scss
3 3
	padding: 0 1em;
4 4

  
5 5
	ol li {
6
		@include flexbox();
7
		@include flex-direction(column);
6
		display: flex;
7
		flex-direction: column;
8 8

  
9 9
		margin: 25px 0;
10 10
		padding: 0.5ex;
......
12 12
		border: 0;
13 13

  
14 14
		span.marker {
15
			@include justify-content(center);
16
			@include vendor-prefix(align-items, center);
15
			justify-content: center;
16
			align-items: center;
17 17
			display: inline-flex;
18 18
			margin: 0 auto 0.3em auto;
19 19
			width: 4vw;
......
66 66
@media screen and ($max-mobile-viewport) {
67 67
	div#gauche div#steps {
68 68

  
69
		@include order(2);
69
		order: 2;
70 70
		padding: 0;
71 71

  
72 72
		ol {
73
			@include flexbox();
74
			@include flex-direction(row);
75
			@include vendor-prefix(flex-flow, nowrap);
76
			@include justify-content(center);
77
			@include vendor-prefix(align-items, center);
73
			display: flex;
74
			flex-direction: row;
75
			flex-flow: nowrap;
76
			justify-content: center;
77
			align-items: center;
78 78

  
79 79
			li {
80 80
				padding: 0 0.6em 1ex 0;
static/hautes-alpes-2018/_custom.scss
71 71
	}
72 72

  
73 73
	> nav {
74
		@include flexbox();
75
		@include vendor-prefix(align-items, center);
76
		@include justify-content(center);
74
		display: flex;
75
		align-items: center;
76
		justify-content: center;
77 77
		// flexbug https://github.com/philipwalton/flexbugs#flexbug-2
78 78
		max-width: 100%;
79 79
		background-color: $cell-background;
80 80
		font-size: 1.5rem;
81 81
		@media screen and ($max-mobile-viewport) {
82
			@include flex-direction(column);
82
			flex-direction: column;
83 83
		}
84 84

  
85 85
		> div {
......
89 89
		}
90 90

  
91 91
		div#nav {
92
			@include order(0);
93
			@include vendor-prefix(flex-basis, 50%);
92
			order: 0;
93
			flex-basis: 50%;
94 94
			background-color: transparent;
95 95
			height: unset;
96 96

  
97 97
			@media screen and ($max-mobile-viewport) {
98
				@include vendor-prefix(flex-basis, auto);
98
				flex-basis: auto;
99 99
				width: 100%;
100 100

  
101 101
				> ul {
102
					@include flexbox();
103
					@include justify-content(space-around);
104
					@include vendor-prefix(align-items, center);
102
					display: flex;
103
					justify-content: space-around;
104
					align-items: center;
105 105
					// flexbug https://github.com/philipwalton/flexbugs#flexbug-2
106 106
					max-width: 100%;
107 107

  
......
119 119
			}
120 120
			// first-level menu
121 121
			ul:first-child {
122
				@include flexbox();
123
				@include justify-content(center);
124
				@include vendor-prefix(flex-wrap, wrap);
122
				display: flex;
123
				justify-content: center;
124
				flex-wrap: wrap;
125 125
				height: unset;
126 126
				li {
127
					@include vendor-prefix(flex-grow, 0);
127
					flex-grow: 0;
128 128
				}
129 129
			}
130 130

  
......
148 148
		}
149 149
		// User authentication block
150 150
		.user-nav {
151
			@include vendor-prefix(flex-basis, 50%);
152
			@include order(1);
151
			flex-basis: 50%;
152
			order: 1;
153 153

  
154 154
			@media screen and ($max-mobile-viewport) {
155
				@include vendor-prefix(flex-basis, $nav-height);
155
				flex-basis: $nav-height;
156 156
				margin: 0;
157 157
				width: 100%;
158 158

  
......
166 166
			}
167 167

  
168 168
			span.login, span.logged-in {
169
				@include flexbox();
170
				@include flex-direction(row);
171
				@include vendor-prefix(align-items, center);
172
				@include justify-content(center);
169
				display: flex;
170
				flex-direction: row;
171
				align-items: center;
172
				justify-content: center;
173 173
				// flexbug https://github.com/philipwalton/flexbugs#flexbug-2
174 174
				max-width: 100%;
175 175
				padding: 0.5em;
......
311 311
	}
312 312

  
313 313
	div.buttons.submit {
314
		@include flexbox();
315
		@include justify-content(flex-start);
316
		@include flex-direction(row-reverse);
317
		@include vendor-prefix(flex-wrap, wrap);
314
		display: flex;
315
		justify-content: flex-start;
316
		flex-direction: row-reverse;
317
		flex-wrap: wrap;
318 318

  
319 319
		.cancel,
320 320
		[name="previous"] {
......
461 461
		padding: $mobile-block-padding;
462 462

  
463 463
		div#columns {
464
			@include flex-direction(column);
464
			flex-direction: column;
465 465
			padding: $mobile-block-padding;
466 466

  
467 467
			> div {
static/hautes-alpes-2018/_neutral-variant.scss
32 32

  
33 33
			#header {
34 34
				#top {
35
					@include flexbox();
36
					@include vendor-prefix(align-items, center);
37
					@include justify-content(center);
35
					display: flex;
36
					align-items: center;
37
					justify-content: center;
38 38
					margin: $margin-center;
39 39
					width: 100%;
40 40
					min-height: $custom-header-height;
41 41
					max-width: $width;
42 42

  
43 43
					> .cell {
44
						@include flex(1 1 100%);
44
						flex: 1 1 100%;
45 45

  
46 46
						&.top-logo {
47
							@include vendor-prefix(flex-basis, auto);
47
							flex-basis: auto;
48 48
						}
49 49
					}
50 50
				}
......
55 55
		}
56 56

  
57 57
		nav {
58
			@include flexbox();
58
			display: flex;
59 59

  
60 60
			.user-nav {
61 61
				margin: $margin-center;
static/includes/_cells.scss
161 161
		border-bottom: 1px solid $cell-entry-border-color;
162 162
	}
163 163
	& > li > a {
164
		display: -ms-flexbox;
165 164
		display: flex;
166
		-ms-align-items: baseline;
167 165
		align-items: baseline;
168 166

  
169
		-ms-flex-wrap: wrap;
170 167
		flex-wrap: wrap;
171 168
		padding: 1rem;
172 169
		color: $cell-entry-color;
......
262 259
	}
263 260
	@if $cell-image-position == top {
264 261
		> div {
265
			display: -ms-flexbox;
266 262
			display: flex;
267 263
			flex-direction: column;
268
			-ms-flex-direction: column;
269 264
			div {
270
				-ms-flex-order: 4;
271 265
				order: 4;
272 266
			}
273 267
			div.intro {
274
				-ms-flex-order: 2;
275 268
				order: 2;
276 269
			}
277 270
			picture {
278
				-ms-flex-order: 0;
279 271
				order: 0;
280 272
				img {
281 273
					border-radius: $cell-border-radius $cell-border-radius 0 0;
......
285 277
				}
286 278
			}
287 279
			> h2:first-child {
288
				-ms-flex-order: 1;
289 280
				order: 1;
290 281
				border-radius: 0;
291 282
			}
......
300 291

  
301 292
div.list-of-forms {
302 293
	span.form-number {
303
		-ms-flex-grow: 1;
304 294
		flex-grow: 1;
305 295

  
306 296
		margin-right: 1rem;
......
388 378
div.searchcell {
389 379
	form {
390 380
		position: relative;
391
		display: -ms-flexbox;
392 381
		display: flex;
393 382
		padding: 1em;
394 383
		input {
395
			-ms-flex: 1;
396 384
			flex: 1;
397 385
			margin-right: 1rem;
398 386
		}
static/includes/_forms.scss
566 566
// Buttons order & alignment configuration
567 567
@if $buttons-order or $buttons-alignment {
568 568
	div.buttons {
569
		display: -ms-flexbox;
570 569
		display: flex;
571
		-ms-flex-wrap: wrap;
572 570
		flex-wrap: wrap;
573
		-ms-flex-pack: $buttons-alignment;
574 571
		justify-content: $buttons-alignment;
575 572

  
576 573
		@each $btn, $grow in $buttons-order {
......
580 577
			}
581 578

  
582 579
			.#{$btn}-button {
583
				-ms-flex-order: $i;
584 580
				order: $i;
585 581
				@if ($grow == 'grow') {
586
					-ms-flex-positive: 1;
587 582
					flex-grow: 1;
588 583
				}
589 584
	 		}
static/includes/_layout.scss
29 29
}
30 30

  
31 31
div#page {
32
	display: -ms-flexbox;
33
	display: -webkit-flex;
34 32
	display: flex;
35 33
	min-height: 100vh;
36
	-ms-flex-direction: column;
37
	-webkit-direction: column;
38 34
	flex-direction: column;
39 35
}
40 36

  
41 37
div#page div#main-content-wrapper,
42 38
div#page main {
43
	-ms-flex: 1 0 auto;
44
	-webkit-flex: 1 0 auto;
45 39
	flex: 1 0 auto;
46 40
	width: 100%;
47 41
}
......
98 92
}
99 93

  
100 94
#columns {
101
	-ms-flex: 1 auto;
102
	-webkit-flex-grow: 1;
103 95
	flex-grow: 1;
104 96
	max-width: 100%;
105 97
}
106 98

  
107 99
.gru-content {
108
	display: -ms-flexbox;
109
	display: -webkit-flex;
110 100
	display: flex;
111 101
	#sidebar {
112
		-ms-flex: 0 0 $sidebar-width;
113
		-webkit-flex: 0 0 $sidebar-width;
114 102
		flex: 0 0 $sidebar-width;
115 103
		max-width: $sidebar-max-width;
116 104
		@if $sidebar-min-width != 0 {
117 105
			min-width: $sidebar-min-width;
118 106
		}
119 107
		@if $sidebar-position == right {
120
			-ms-flex-order: 1;
121
			-webkit-order: 1;
122 108
			order: 1;
123 109
		}
124 110
		div.cell {
......
144 130
	}
145 131

  
146 132
	.gru-content {
147
		-ms-flex-direction: column;
148
		-webkit-flex-direction: column;
149 133
		flex-direction: column;
150 134
		#sidebar {
151
			-ms-flex: 0 0 auto;
152
			-webkit-flex: 0 0 auto;
153 135
			flex: 0 0 auto;
154 136
			max-width: 100%;
155 137
			// don't apply min-width on mobile
static/includes/wcs/_nearby-form.scss
17 17

  
18 18
.nearby-form {
19 19
	margin: 5px auto;
20
	display: -ms-flexbox;
21 20
	display: flex;
22
	-ms-align-items: center;
23
	-ms-flex-align: center;
24 21
	align-items: center;
25
	-ms-flex-line-pack: center;
26 22
	align-content: center;
27
	-ms-flex-pack: space-between;
28
	-ms-justify-content: space-between;
29 23
	justify-content: space-between;
30 24
	border: $widget-border;
31 25
	padding: 5px;
......
59 53
	padding: 3px;
60 54
	margin: auto;
61 55
	border-radius: 3px;
62
	display: -ms-flexbox;
63 56
	display: flex;
64 57
	a {
65 58
		line-height: 1;
static/includes/wcs/_steps.scss
100 100
.wcs-step {
101 101
	border-radius: $border-radius;
102 102
	background-color: $wcs-step-background;
103
	display: -ms-flexbox;
104 103
	display: flex;
105 104

  
106 105
	&--marker {
......
110 109
		font-size: 1em;
111 110
		text-align: center;
112 111

  
113
		display: -ms-flexbox;
114 112
		display: flex;
115 113

  
116 114
		color: $wcs-step-marker-color;
......
119 117

  
120 118
		width: $wcs-step-marker-size;
121 119
		height: $wcs-step-marker-size;
122
		-ms-flex: 0 0 $wcs-step-marker-size;
123 120
		flex: 0 0 $wcs-step-marker-size;
124 121

  
125 122
		&-nb {
......
133 130

  
134 131
	&--label {
135 132
		display: block;
136
		-ms-grid-row-align: center;
137 133
		align-self: center;
138 134
		letter-spacing: 1px;
139 135
		line-height: 1.25;
......
181 177

  
182 178
			width: $size;
183 179
			height: $size;
184
			-ms-flex: 0 0 auto;
185 180
			flex: 0 0 auto;
186
			-ms-flex-align: center;
187 181
			align-items: center;
188
			-ms-flex-pack: center;
189 182
			justify-content: center;
190 183

  
191 184
			&-nb {
192 185
				margin: 0;
193 186
				transform: translateY(-0.5em);
194
				-ms-flex-order: 1;
195 187
				order: 1;
196 188
			}
197 189

  
......
200 192
				transform: translateY(0.5em);
201 193
				font-size: 0.75em;
202 194
				font-weight: normal;
203
				-ms-flex-order: 3;
204 195
				order: 3;
205 196
			}
206 197

  
......
208 199
			&::before {
209 200
				content: "";
210 201
				display: block;
211
				-ms-flex: 0 0 0.1em;
212 202
				flex: 0 0 0.1em;
213 203
				height: 2em;
214 204
				margin: 0 0.1em;
215 205
				background: currentColor;
216 206
				transform: rotate(30deg);
217
				-ms-flex-order: 2;
218 207
				order: 2;
219 208
			}
220 209
		}
......
238 227
	.wcs-steps {
239 228
		&--list {
240 229
			position: relative;
241
			display: -ms-flexbox;
242 230
			display: flex;
243
			-ms-flex-wrap: wrap;
244 231
			flex-wrap: wrap;
245 232

  
246 233
			// keep space for label
......
303 290
		}
304 291

  
305 292
		&--list {
306
			-ms-flex-wrap: nowrap;
307 293
			flex-wrap: nowrap;
308
			-ms-flex-direction: column;
309 294
			flex-direction: column;
310 295
			// remove keep space for label
311 296
			padding-bottom: 0;
......
417 402
					content: "";
418 403
					display: block;
419 404
					height: $wcs-step-marker-tie-width;
420
					-ms-flex: 0 0 calc(100% + #{$wcs-steps-spacing});
421 405
					flex: 0 0 calc(100% + #{$wcs-steps-spacing});
422 406
					background-color: $wcs-step-marker-tie-color;
423 407
					margin: auto;
static/metz-metropole-2019/_custom.scss
255 255
		margin: 0 auto;
256 256
		height: 100%;
257 257
		max-width: $width;
258
		display: -webkit-flex;
259 258
		display: flex;
260 259
		.title {
261
			-webkit-flex: 1;
262 260
			flex: 1;
263 261
			text-align: center;
264 262
			h1 {
......
289 287
			@media screen and ($max-mobile-viewport) {
290 288
				display: none;
291 289
			}
292
			-webkit-flex: 1;
293 290
			flex: 1;
294 291
			max-width: 400px;
295 292
			background: $blue;
......
743 740
	position: relative;
744 741
	@media screen and ($max-mobile-viewport) {
745 742
		margin: 0;
746
		-webkit-order: 0;
747 743
		order: 0;
748 744
		margin-left: 10px;
749 745
		width: 200px;
......
837 833
}
838 834

  
839 835
form.quixote div.buttons {
840
	display: -webkit-flex;
841 836
	display: flex;
842 837
	@media screen and (max-width: $width) {
843
		-webkit-flex-wrap: wrap;
844 838
		flex-wrap: wrap;
845 839
	}
846 840
	div.savedraft-button {
......
866 860
		}
867 861
	}
868 862
	div.previous-button {
869
		-webkit-flex: 1;
870 863
		flex: 1;
871
		-webkit-order: 0;
872 864
		order: 0;
873 865
		@media screen and (max-width: 500px) {
874
			-webkit-flex-basis: 50%;
875 866
			flex-basis: 50%;
876 867
		}
877 868
		@media screen and (max-width: 320px) {
878
			-webkit-flex-basis: 100%;
879 869
			flex-basis: 100%;
880 870
		}
881 871
	}
882 872
	div.cancel-button {
883
		-webkit-flex: 1;
884 873
		flex: 1;
885
		-webkit-order: 1;
886 874
		order: 1;
887 875
		button {
888 876
			background: #ececec;
889 877
			color: #adadad;
890 878
		}
891 879
		@media screen and (max-width: 500px) {
892
			-webkit-flex-basis: 50%;
893 880
			flex-basis: 50%;
894 881
		}
895 882
		@media screen and (max-width: 320px) {
896
			-webkit-flex-basis: 100%;
897 883
			flex-basis: 100%;
898 884
		}
899 885
	}
900 886
	div.submit-button {
901
		-webkit-flex: 1;
902 887
		flex: 1;
903
		-webkit-order: 2;
904 888
		order: 2;
905 889
		button {
906 890
			background: $green url(img/right.png) right 10px top 50% no-repeat;
907 891
			background-size: auto 60%;
908 892
		}
909 893
		@media screen and (max-width: 500px) {
910
			-webkit-flex-basis: 100%;
911 894
			flex-basis: 100%;
912 895
		}
913 896
	}
......
1120 1103
		}
1121 1104
	}
1122 1105
	#sidebar {
1123
		-ms-flex: 0 0 350px;
1124
		-webkit-flex: 0 0 350px;
1125 1106
		flex: 0 0 350px;
1126 1107
		max-width: 350px;
1127 1108
		width: 350px;
......
1231 1212
	}
1232 1213
	@media screen and ($max-mobile-viewport) {
1233 1214
		#content-top-wrapper .content-top {
1234
			display: -webkit-flex;
1235 1215
			display: flex;
1236 1216
			flex-direction: column;
1237 1217
			.cell {
1238
				-webkit-order: 1;
1239 1218
				order: 1;
1240 1219
				&.trackingcodeinputcell {
1241
					-webkit-order: 0;
1242 1220
					order: 0;
1243 1221
				}
1244 1222
				height: 150px;
......
1260 1238
					margin: 0 -1rem; // cancel padding
1261 1239
					width: calc(100% + 2rem);
1262 1240
					input {
1263
						-webkit-flex: 1;
1264 1241
						flex: 1;
1265 1242
					}
1266 1243
				}
static/meyzieu-2018/_custom.scss
31 31
	margin: 0 auto;
32 32
	> ul {
33 33
		margin: 0;
34
		@include flexbox();
35
		@include justify-content(space-between);
34
		display: flex;
35
		justify-content: space-between;
36 36
		> li {
37 37
			> a {
38 38
				font-size: 1.1em;
......
125 125
		}
126 126
	}
127 127
	div.top {
128
		@include flexbox();
129
		@include flex-direction(row);
128
		display: flex;
129
		flex-direction: row;
130 130
		margin-bottom: 2ex;
131 131
		.carrousel-wrapper {
132
			@include flexbox();
132
			display: flex;
133 133
			@include flex(0 0 calc(#{$width} - #{$sidebar-width}));
134 134
			@media screen and ($max-mobile-viewport) {
135
				@include flex-direction(column);
136
				@include flex(0);
135
				flex-direction: column;
136
				flex: 0;
137 137
			}
138 138
			div.menu {
139
				@include flexbox();
139
				display: flex;
140 140
				align-items: center;
141 141
				width: 25%;
142 142
				@media screen and ($max-mobile-viewport) {
......
169 169
			}
170 170
		}
171 171
		@media screen and ($max-mobile-viewport) {
172
			@include flex-direction(column);
172
			flex-direction: column;
173 173
		}
174 174
	}
175 175
	#sidebar {
......
350 350
			border: 0;
351 351
		}
352 352
		ul {
353
			@include flexbox();
354
			@include flex-direction(row);
355
			@include vendor-prefix(flex-wrap, wrap);
356
			@include justify-content(flex-start);
353
			display: flex;
354
			flex-direction: row;
355
			flex-wrap: wrap;
356
			justify-content: flex-start;
357 357
			@media screen and ($max-mobile-viewport) {
358
				@include justify-content(space-around);
358
				justify-content: space-around;
359 359
			}
360 360
			li {
361 361
				margin: 1ex 0.5ex;
static/montlouis-sur-loire/_custom.scss
165 165

  
166 166
div#page {
167 167
	div#main-content-wrapper {
168
		-ms-flex: unset;
169
		-webkit-flex: unset;
170 168
		flex: unset;
171 169
		max-width: unset;
172 170

  
static/portal-agent/css/agent-portal.scss
8 8
$mobile-limit: 760px;
9 9

  
10 10
div#page-content.columns {
11
	display: -ms-flexbox;
12 11
	display: flex;
13 12
	> div {
14 13
		box-sizing: border-box;
......
20 19
		}
21 20
	}
22 21
	@media screen and (max-width: $mobile-limit) {
23
		-ms-flex-direction: column;
24 22
		flex-direction: column;
25 23
	}
26 24
}
static/publik/_custom.scss
109 109
}
110 110

  
111 111
#content #sidebar {
112
	-ms-flex: 0 0 400px;
113 112
	flex: 0 0 400px;
114 113
	max-width: none;
115 114
	order: -1;
......
117 116
	margin-top: -1em; /* cancel #content padding-top */
118 117
	background: linear-gradient(to left, rgba(1, 1, 1, 0.1) 0%, rgba(0, 0, 0, 0) 20px);
119 118
	@media screen and ($max-mobile-viewport) {
120
		-ms-flex: auto;
121 119
		flex: auto;
122 120
	}
123 121
}
static/saone-et-loire-cd71-2019/_custom.scss
233 233

  
234 234
div#rub_service {
235 235
	form div.buttons {
236
		display: -ms-flexbox;
237 236
		display: flex;
238
		-ms-justify-content: space-between;
239 237
		justify-content: space-between;
240 238
		button {
241 239
			margin-right: 0;
242 240
		}
243 241
		.submit-button {
244
			-ms-order: 2;
245 242
			order: 2;
246 243
		}
247 244
		.savedraft-button {
static/toodego/_forms.scss
146 146
}
147 147

  
148 148
div.buttons {
149
	display: -ms-flexbox;
150 149
	display: flex;
151
	-ms-flex-pack: center;
152 150
	justify-content: center;
153 151
	.cancel-button {
154 152
	}
155 153
	.previous-button {
156
		-ms-flex-order: 0;
157 154
		order: 0;
158 155
	}
159 156
	.submit-button {
160
		-ms-flex-order: 1;
161 157
		order: 1;
162 158
		button {
163 159
			margin-right: 0;
static/toodego/_specialpages.scss
318 318
		}
319 319
	}
320 320
	.gru-content #sidebar {
321
		-ms-flex: 0 0 $sidebar-width + 150px;
322
		-webkit-flex: 0 0 $sidebar-width + 150px;
323 321
		flex: 0 0 $sidebar-width + 150px;
324 322
		max-width: $sidebar-width + 150px;
325 323
		margin-top: calc(0.4em + 60px);
......
503 501
				margin-right: 8rem;
504 502
			}
505 503
			.tile {
506
				-ms-justify-content: space-around;
507 504
				justify-content: space-around;
508 505
			}
509 506
			.tile-actions {
......
865 862
			flex-direction: column;
866 863
		}
867 864
		#form-status-sidebar {
868
			-ms-flex: 0 0 $sidebar-width;
869 865
			flex: 0 0 $sidebar-width;
870 866
			.cell {
871 867
				margin-left: 1rem;
static/toodego/_tiles.scss
10 10
	padding-left: $tile-picture-width + $tile-producer-circle-radius + 15px;
11 11
	min-height: $tile-min-height;
12 12
	overflow: hidden;
13
	display: -ms-flexbox;
14 13
	display: flex;
15
	-ms-flex-direction: column;
16 14
	flex-direction: column;
17
	-ms-justify-content: space-between;
18 15
	justify-content: space-between;
19 16
        transition: opacity 0.3s linear;
20 17
	@media screen and (max-width: $desktop-limit) {
static/tours-metropole/_custom.scss
44 44
		}
45 45
		div#top {
46 46
			display: flex;
47
			display: -ms-flexbox;
48
			@include vendor-prefix(justify-content, space-between);
47
			justify-content: space-between;
49 48
		}
50 49
		h1#logo-ville {
51 50
			@media screen and ($min-desktop-viewport) {
......
186 185

  
187 186
.gru-content {
188 187
	@media screen and ($max-mobile-viewport) {
189
		@include vendor-prefix(flex-direction, column-reverse);
188
		flex-direction: column-reverse;
190 189
	}
191 190
	div.cell.wcsformsofcategorycell {
192 191
		> div {
static/venissieux/_custom.scss
51 51
}
52 52

  
53 53
.page-template-homepage .gru-content {
54
	-ms-flex-wrap: wrap;
55 54
	flex-wrap: wrap;
56 55
}
57 56

  
static/villeurbanne-2018/_custom.scss
253 253
	display: flex;
254 254
	justify-content: center;
255 255
	padding: 3.75rem 0;
256
	@include vendor-prefix(flex-wrap, wrap);
256
	flex-wrap: wrap;
257 257
	> div.block {
258 258
		max-width: 26.25rem;
259 259
		width: 100%;
260
-