CSS: remove vendor prefixed flexbox properties (#42287)

This commit is contained in:
Thomas Jund 2020-04-29 16:17:26 +02:00
parent 18d850bd1c
commit c9fb89d454
31 changed files with 167 additions and 291 deletions

View File

@ -109,7 +109,6 @@ div.departement {
div#header-wrapper { div#header-wrapper {
display: flex; display: flex;
display: -ms-flexbox;
padding: 0 2ex; padding: 0 2ex;
background: #fff; background: #fff;
} }
@ -161,13 +160,12 @@ div.homepage-container {
} }
div.homepage-suggestions, div.events, div.homepage-prefooter-body, div.homepage-quote, div.homepage-search { div.homepage-suggestions, div.events, div.homepage-prefooter-body, div.homepage-quote, div.homepage-search {
display: flex; display: flex;
display: -ms-flexbox; justify-content: center;
@include vendor-prefix(justify-content, center); align-items: center;
@include vendor-prefix(align-items, center); flex-wrap: wrap;
@include vendor-prefix(flex-wrap, wrap);
} }
div.homepage-search { div.homepage-search {
@include vendor-prefix(align-items, flex-start); align-items: flex-start;
div.searchcell { div.searchcell {
padding: 0; padding: 0;
} }
@ -533,24 +531,21 @@ div#social-steps ol {
div#social-steps ol { div#social-steps ol {
display: flex; display: flex;
display: -ms-flex;
padding: 0 1em; padding: 0 1em;
@include vendor-prefix(justify-content, center); justify-content: center;
li { li {
min-width: 15%; min-width: 15%;
list-style-type: none; list-style-type: none;
margin: 0 1.5em; margin: 0 1.5em;
display: flex; display: flex;
display: -ms-flex; justify-content: flex-start;
@include vendor-prefix(justify-content, flex-start); align-items: center;
@include vendor-prefix(align-items, center); flex-direction: column;
@include vendor-prefix(flex-direction, column);
span { span {
&.marker { &.marker {
display: flex; display: flex;
display: -ms-flex; justify-content: center;
@include vendor-prefix(justify-content, center); align-items: center;
@include vendor-prefix(align-items, center);
@media screen and ($max-mobile-viewport) { @media screen and ($max-mobile-viewport) {
font-size: 100%; font-size: 100%;
background: #fff; background: #fff;
@ -926,10 +921,9 @@ div.cell {
div.dossiers, div.mes-dossiers { div.dossiers, div.mes-dossiers {
padding: 2ex 0; padding: 2ex 0;
display: flex; display: flex;
display: -ms-flexbox; justify-content: space-around;
@include vendor-prefix(justify-content, space-around); align-items: center;
@include vendor-prefix(align-items, center); flex-wrap: wrap;
@include vendor-prefix(flex-wrap, wrap);
} }
div.mes-dossiers { div.mes-dossiers {
a.dossier-autonomie, a.dossier-handicap { a.dossier-autonomie, a.dossier-handicap {

View File

@ -1,5 +1,5 @@
footer { footer {
@include flex(0 1 1); flex: 0 1 1;
height: 210px; height: 210px;
width: 100%; width: 100%;

View File

@ -103,10 +103,10 @@
.cell.trackingcodeinputcell .wcs-tracking-code-input { .cell.trackingcodeinputcell .wcs-tracking-code-input {
@extend %wcs-form; @extend %wcs-form;
@extend %default-block; @extend %default-block;
@include flexbox(); display: flex;
@include justify-content(center); justify-content: center;
@include flex-direction(column); flex-direction: column;
@include vendor-prefix(align-items, center); align-items: center;
margin: 0 auto; margin: 0 auto;
overflow: auto; overflow: auto;
padding: 10px 20px; padding: 10px 20px;
@ -144,8 +144,8 @@
max-width: $width; max-width: $width;
#columns { #columns {
@include flexbox(); display: flex;
@include justify-content(space-between); justify-content: space-between;
margin: 0 auto; margin: 0 auto;
width: 100%; width: 100%;
@ -154,12 +154,12 @@
// inside the div resides the form and its title // inside the div resides the form and its title
#gauche, #rub_service { #gauche, #rub_service {
@extend %wcs-form; @extend %wcs-form;
@include flex(1 1 0); flex: 1 1 0;
padding: 1em; padding: 1em;
&.has-sidebox { &.has-sidebox {
@include flex(2 1 0); flex: 2 1 0;
@include order(0); order: 0;
float: none; float: none;
} }
} }
@ -188,8 +188,8 @@
#gauche { #gauche {
@extend %one-third; @extend %one-third;
@include flex(1 1 0); flex: 1 1 0;
@include order(1); order: 1;
margin: 0; margin: 0;
float: none; float: none;
background: white; background: white;
@ -215,21 +215,21 @@
@media screen and ($min-desktop-viewport) { @media screen and ($min-desktop-viewport) {
#page #main-content-wrapper #main-content #content #columns { #page #main-content-wrapper #main-content #content #columns {
@include flex-direction(row); flex-direction: row;
} }
} }
@media screen and ($max-mobile-viewport) { @media screen and ($max-mobile-viewport) {
#page #main-content-wrapper #main-content #content #columns { #page #main-content-wrapper #main-content #content #columns {
@include flex-direction(column); flex-direction: column;
#gauche { #gauche {
@include order(0); order: 0;
width: 100%; width: 100%;
padding: 0; padding: 0;
#tracking-code { #tracking-code {
@include order(0); order: 0;
padding: 1em; padding: 1em;
a { a {
@ -239,7 +239,7 @@
} }
.has-sidebox { .has-sidebox {
@include order(1); order: 1;
width: 100%; width: 100%;
padding: 0; padding: 0;
} }

View File

@ -2,7 +2,7 @@
$header-content-margin: 5px; $header-content-margin: 5px;
.site-header { .site-header {
@include flex(0 1 0); flex: 0 1 0;
background: $primary-color; background: $primary-color;
@ -10,9 +10,9 @@ $header-content-margin: 5px;
padding: 0; padding: 0;
#top { #top {
@include flexbox(); display: flex;
@include vendor-prefix(flex-wrap, nowrap); flex-wrap: nowrap;
@include justify-content(space-between); justify-content: space-between;
margin: auto; // allow #top to be horizontally center within the header bar margin: auto; // allow #top to be horizontally center within the header bar
max-width: $column-width; max-width: $column-width;
@ -31,17 +31,17 @@ $header-content-margin: 5px;
} }
.top-left { .top-left {
@include vendor-prefix(align-self, flex-start); align-self: flex-start;
@include order(0); order: 0;
@include flexbox(); display: flex;
@include vendor-prefix(flex-wrap, nowrap); flex-wrap: nowrap;
height: $header-height; height: $header-height;
} }
#site-title { #site-title {
@include flex(1 1 0); flex: 1 1 0;
@include vendor-prefix(align-self, center); align-self: center;
margin: $header-content-margin; margin: $header-content-margin;
@ -76,8 +76,8 @@ $header-content-margin: 5px;
} }
#toplinks { #toplinks {
@include vendor-prefix(align-self, flex-end); align-self: flex-end;
@include order(1); order: 1;
position: relative; position: relative;
right: unset; right: unset;
left: unset; left: unset;
@ -90,9 +90,9 @@ $header-content-margin: 5px;
.logged-in, .logged-in,
.login { .login {
@include flexbox(); display: flex;
@include justify-content(center); justify-content: center;
@include vendor-prefix(align-items, center); align-items: center;
text-align: center; text-align: center;
// flexbug 2 on IE11 (https://github.com/philipwalton/flexbugs#flexbug-2) // flexbug 2 on IE11 (https://github.com/philipwalton/flexbugs#flexbug-2)
max-width: 100%; max-width: 100%;
@ -107,7 +107,7 @@ $header-content-margin: 5px;
} }
a { a {
@include flex(1 1 50%); flex: 1 1 50%;
color: white; color: white;
font-weight: bold; font-weight: bold;
height: $header-height; height: $header-height;
@ -175,7 +175,7 @@ $header-content-margin: 5px;
height: $header-height; height: $header-height;
#header #top { #header #top {
@include flex-direction(row); flex-direction: row;
#toplinks { #toplinks {
width: (100 / 3 + 0%); width: (100 / 3 + 0%);
@ -189,12 +189,12 @@ $header-content-margin: 5px;
height: $header-height * 2; height: $header-height * 2;
#header #top { #header #top {
@include flex-direction(column); flex-direction: column;
@include justify-content(space-around); justify-content: space-around;
#toplinks, #toplinks,
.top-left { .top-left {
@include vendor-prefix(align-self, stretch); align-self: stretch;
max-width: 100%; max-width: 100%;
} }

View File

@ -19,7 +19,7 @@
} }
.pull-right { .pull-right {
@include flex(1 1 0); flex: 1 1 0;
margin-left: auto; margin-left: auto;
} }
@ -27,18 +27,18 @@
max-width: $width; max-width: $width;
.inside-content { .inside-content {
@include flexbox(); display: flex;
@include justify-content(space-between); justify-content: space-between;
margin: 0 auto; margin: 0 auto;
max-width: $column-width; max-width: $column-width;
&.three-columns { &.three-columns {
@include flex-direction(row); flex-direction: row;
margin-top: 2em; margin-top: 2em;
.column { .column {
// IE11 workaround for https://github.com/philipwalton/flexbugs#flexbug-4 // IE11 workaround for https://github.com/philipwalton/flexbugs#flexbug-4
@include flex(1 1 100px); flex: 1 1 100px;
width: (100/3 + 0%); width: (100/3 + 0%);
padding: 5px 15px; padding: 5px 15px;
} }
@ -47,15 +47,15 @@
} }
#content { #content {
@include flex-direction(row); flex-direction: row;
} }
body.has-picture, .page-index #content { body.has-picture, .page-index #content {
@include flex-direction(column); flex-direction: column;
} }
#main-content-wrapper { #main-content-wrapper {
@include flex(1 1 0); flex: 1 1 0;
#main-content { #main-content {
width: 100%; width: 100%;
@ -74,7 +74,7 @@ body.has-picture, .page-index #content {
#content .wide-container .three-columns.inside-content { #content .wide-container .three-columns.inside-content {
// IE11 workaround https://github.com/philipwalton/flexbugs#flexbug-14 // IE11 workaround https://github.com/philipwalton/flexbugs#flexbug-14
// avoid flex-direction: column to ignore container height to fit fit its contents // avoid flex-direction: column to ignore container height to fit fit its contents
@include vendor-prefix(flex-flow, wrap); flex-flow: wrap;
.column { .column {
max-width: 100%; max-width: 100%;
min-width: 100%; min-width: 100%;

View File

@ -85,8 +85,6 @@ div#header {
div#top { div#top {
background: url(img/bandeau.jpeg) top right no-repeat; background: url(img/bandeau.jpeg) top right no-repeat;
-ms-flex: 1 auto;
-webkit-flex-grow: 1;
flex-grow: 1; flex-grow: 1;
height: $header-height; height: $header-height;
text-align: center; text-align: center;

View File

@ -31,8 +31,8 @@ div#toplinks {
} }
div.buttons.submit { div.buttons.submit {
@include flexbox(); display: flex;
@include justify-content(space-between); justify-content: space-between;
div.submit-button { div.submit-button {
order: 3; order: 3;
flex-grow: 1; flex-grow: 1;

View File

@ -251,15 +251,12 @@ div#sidebar {
} }
form { form {
margin-left: 0; margin-left: 0;
display: -ms-flexbox;
display: flex; display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap; flex-wrap: wrap;
p { p {
width: 100%; width: 100%;
} }
input { input {
-ms-flex: 1;
flex: 1; flex: 1;
margin-right: 2rem; margin-right: 2rem;
@media screen and ($max-mobile-viewport) { @media screen and ($max-mobile-viewport) {
@ -331,11 +328,8 @@ div#content {
background: transparent center left no-repeat; background: transparent center left no-repeat;
height: 80px; height: 80px;
margin: 0; margin: 0;
display: -ms-flexbox;
display: flex; display: flex;
-ms-flex-direction: column;
flex-direction: column; flex-direction: column;
-ms-justify-content: center;
justify-content: center; justify-content: center;
padding-left: 80px; padding-left: 80px;
text-align: left; text-align: left;
@ -466,15 +460,12 @@ div#rub_service {
text-transform: none; text-transform: none;
} }
form div.buttons { form div.buttons {
display: -ms-flexbox;
display: flex; display: flex;
-ms-justify-content: space-between;
justify-content: space-between; justify-content: space-between;
button { button {
margin-right: 0; margin-right: 0;
} }
.submit-button { .submit-button {
-ms-order: 2;
order: 2; order: 2;
} }
.cancel-button button { .cancel-button button {

View File

@ -7,10 +7,10 @@ $subpages: transport-en-commun, velo-partage, parking, autopartage, scooters, to
div > ul > li { div > ul > li {
display: none; display: none;
&.selected { &.selected {
@include flexbox(); display: flex;
@include flex-direction(row); flex-direction: row;
@media screen and ($max-mobile-viewport) { @media screen and ($max-mobile-viewport) {
@include flex-direction(column); flex-direction: column;
} }
} }
} }
@ -19,8 +19,8 @@ $subpages: transport-en-commun, velo-partage, parking, autopartage, scooters, to
div { div {
// list of top level categories // list of top level categories
> ul { > ul {
@include flexbox(); display: flex;
@include flex-direction(column); flex-direction: column;
> li { > li {
@extend %homepage-block-color; @extend %homepage-block-color;
margin-bottom: 4px; margin-bottom: 4px;
@ -40,8 +40,8 @@ $subpages: transport-en-commun, velo-partage, parking, autopartage, scooters, to
} }
// list of sub-categories // list of sub-categories
ul { ul {
@include flexbox(); display: flex;
@include flex-direction(column); flex-direction: column;
@extend %homepage-block-color; @extend %homepage-block-color;
&:hover { &:hover {
@extend %homepage-block-hover; @extend %homepage-block-hover;
@ -109,29 +109,29 @@ $subpages: transport-en-commun, velo-partage, parking, autopartage, scooters, to
@media screen and ($min-desktop-viewport) { @media screen and ($min-desktop-viewport) {
> ul { > ul {
> li { > li {
@include flexbox(); display: flex;
@include flex-direction(row); flex-direction: row;
border-left: 5px solid $body-background; border-left: 5px solid $body-background;
&:hover { &:hover {
border-left: $menucell-hover-border; border-left: $menucell-hover-border;
} }
a { a {
@include vendor-prefix(flex-grow, 1); flex-grow: 1;
margin-top: auto; margin-top: auto;
margin-bottom: auto; margin-bottom: auto;
} }
ul { ul {
@include vendor-prefix(flex-grow, 1); flex-grow: 1;
@include vendor-prefix(flex-basis, 70%); flex-basis: 70%;
@include flex-direction(row); flex-direction: row;
@include justify-content(flex-end); justify-content: flex-end;
@include vendor-prefix(flex-wrap, nowrap); flex-wrap: nowrap;
margin-left: auto; margin-left: auto;
li { li {
@include flexbox(); display: flex;
@include flex-direction(row); flex-direction: row;
@include vendor-prefix(flex-basis, 10em); flex-basis: 10em;
border-left: 4px solid $cell-background; border-left: 4px solid $cell-background;
border-right: 0; border-right: 0;
border-bottom: 0; border-bottom: 0;
@ -167,10 +167,10 @@ $subpages: transport-en-commun, velo-partage, parking, autopartage, scooters, to
&.categorie-demandes div > ul > li { &.categorie-demandes div > ul > li {
display: none; display: none;
&.selected { &.selected {
@include flexbox(); display: flex;
@include flex-direction(column); flex-direction: column;
@media screen and ($min-desktop-viewport) { @media screen and ($min-desktop-viewport) {
@include flex-direction(row); flex-direction: row;
} }
} }
} }

View File

@ -74,7 +74,7 @@ div#header-wrapper {
div#main-content-wrapper { div#main-content-wrapper {
margin: 2ex auto; margin: 2ex auto;
div#content { div#content {
@include vendor-prefix(align-items, flex-start); align-items: flex-start;
} }
div#columns { div#columns {
padding: 1em; padding: 1em;
@ -190,11 +190,11 @@ div.cell > div {
float: none; float: none;
} }
.buttons { .buttons {
@include flexbox(); display: flex;
@include vendor-prefix(justify-content, center); justify-content: center;
.widget { .widget {
padding: 1em; padding: 1em;
@include flex(1 1 1); flex: 1 1 1;
} }
} }
} }
@ -220,7 +220,7 @@ div.cell > div {
} }
} }
div.submit { div.submit {
@include flexbox(); display: flex;
} }
div.SubmitWidget { div.SubmitWidget {
&.submit-button { &.submit-button {
@ -276,17 +276,17 @@ div.cell > div {
} }
.menucell.urgence { .menucell.urgence {
ul { ul {
@include flexbox(); display: flex;
@include flex-direction(row); flex-direction: row;
@include vendor-prefix(flex-wrap, wrap); flex-wrap: wrap;
@include justify-content(space-around); justify-content: space-around;
@include vendor-prefix(align-items, stretch); align-items: stretch;
@media screen and ($max-mobile-viewport) { @media screen and ($max-mobile-viewport) {
@include flex-direction(column); flex-direction: column;
} }
li { li {
@extend %homepage-block-color; @extend %homepage-block-color;
@include vendor-prefix(flex-grow, 1); flex-grow: 1;
margin: 10px; margin: 10px;
padding: 1em 0 0 0; padding: 1em 0 0 0;
position: relative; position: relative;
@ -341,14 +341,14 @@ div.cell > div {
} }
} }
div.homepage-container { div.homepage-container {
@include vendor-prefix(flex-grow, 1); flex-grow: 1;
* { * {
background-color: transparent; background-color: transparent;
} }
div.services { div.services {
@include flexbox(); display: flex;
@include vendor-prefix(justify-content, center); justify-content: center;
@include vendor-prefix(flex-wrap, wrap); flex-wrap: wrap;
> div { > div {
width: 350px; width: 350px;
@media screen and ($max-mobile-viewport) { @media screen and ($max-mobile-viewport) {

View File

@ -172,7 +172,7 @@ img#hautDePage {
margin-bottom: 20px; margin-bottom: 20px;
margin-right: 0; margin-right: 0;
} }
@include vendor-prefix(flex-direction, column); flex-direction: column;
div.bandeau { div.bandeau {
background-repeat: no-repeat; background-repeat: no-repeat;
padding: 80px 0; padding: 80px 0;
@ -199,11 +199,10 @@ img#hautDePage {
} }
} }
div.content-wrapper div.columns { div.content-wrapper div.columns {
display: -ms-flexbox;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@media screen and ($max-mobile-viewport) { @media screen and ($max-mobile-viewport) {
@include vendor-prefix(flex-direction, column); flex-direction: column;
} }
div.right { div.right {
width: 30%; width: 30%;
@ -677,9 +676,8 @@ div.configjsoncell.user {
box-shadow: 0px 0px 5px #888888; box-shadow: 0px 0px 5px #888888;
min-width: 250px; min-width: 250px;
> div { > div {
display: -ms-flexbox;
display: flex; display: flex;
@include vendor-prefix(justify-content, space-between); justify-content: space-between;
} }
div.user-profile { div.user-profile {
font-weight: bold; font-weight: bold;
@ -704,7 +702,7 @@ div.configjsoncell.user {
margin: 10px; margin: 10px;
} }
div.user-infos { div.user-infos {
@include vendor-prefix(flex-grow, 2); flex-grow: 2;
} }
a.user-dashboard-item { a.user-dashboard-item {
background: $primary-color; background: $primary-color;
@ -744,15 +742,14 @@ div.configjsoncell.user {
margin: 2ex 1ex 0 150px; margin: 2ex 1ex 0 150px;
@media screen and ($max-mobile-viewport) { @media screen and ($max-mobile-viewport) {
margin: 3ex 1ex 0 1ex; margin: 3ex 1ex 0 1ex;
@include vendor-prefix(justify-content, center); justify-content: center;
} }
@media screen and (max-width: $very-small-screen) { @media screen and (max-width: $very-small-screen) {
margin: 3ex 0 0 0; margin: 3ex 0 0 0;
} }
display: -ms-flexbox;
display: flex; display: flex;
@include vendor-prefix(justify-content, flex-start); justify-content: flex-start;
@include vendor-prefix(flex-wrap, wrap); flex-wrap: wrap;
} }
} }
@ -1288,11 +1285,10 @@ div#login-page {
} }
} }
div.buttons { div.buttons {
display: -ms-flexbox;
display: flex; display: flex;
@include vendor-prefix(flex-direction, row-reverse); flex-direction: row-reverse;
@include vendor-prefix(justify-content, space-between); justify-content: space-between;
@include vendor-prefix(flex-wrap, wrap); flex-wrap: wrap;
} }
} }
} }

View File

@ -3,8 +3,8 @@ div#steps {
padding: 0 1em; padding: 0 1em;
ol li { ol li {
@include flexbox(); display: flex;
@include flex-direction(column); flex-direction: column;
margin: 25px 0; margin: 25px 0;
padding: 0.5ex; padding: 0.5ex;
@ -12,8 +12,8 @@ div#steps {
border: 0; border: 0;
span.marker { span.marker {
@include justify-content(center); justify-content: center;
@include vendor-prefix(align-items, center); align-items: center;
display: inline-flex; display: inline-flex;
margin: 0 auto 0.3em auto; margin: 0 auto 0.3em auto;
width: 4vw; width: 4vw;
@ -66,15 +66,15 @@ div#steps {
@media screen and ($max-mobile-viewport) { @media screen and ($max-mobile-viewport) {
div#gauche div#steps { div#gauche div#steps {
@include order(2); order: 2;
padding: 0; padding: 0;
ol { ol {
@include flexbox(); display: flex;
@include flex-direction(row); flex-direction: row;
@include vendor-prefix(flex-flow, nowrap); flex-flow: nowrap;
@include justify-content(center); justify-content: center;
@include vendor-prefix(align-items, center); align-items: center;
li { li {
padding: 0 0.6em 1ex 0; padding: 0 0.6em 1ex 0;

View File

@ -71,15 +71,15 @@ div#main-content-wrapper {
} }
> nav { > nav {
@include flexbox(); display: flex;
@include vendor-prefix(align-items, center); align-items: center;
@include justify-content(center); justify-content: center;
// flexbug https://github.com/philipwalton/flexbugs#flexbug-2 // flexbug https://github.com/philipwalton/flexbugs#flexbug-2
max-width: 100%; max-width: 100%;
background-color: $cell-background; background-color: $cell-background;
font-size: 1.5rem; font-size: 1.5rem;
@media screen and ($max-mobile-viewport) { @media screen and ($max-mobile-viewport) {
@include flex-direction(column); flex-direction: column;
} }
> div { > div {
@ -89,19 +89,19 @@ div#main-content-wrapper {
} }
div#nav { div#nav {
@include order(0); order: 0;
@include vendor-prefix(flex-basis, 50%); flex-basis: 50%;
background-color: transparent; background-color: transparent;
height: unset; height: unset;
@media screen and ($max-mobile-viewport) { @media screen and ($max-mobile-viewport) {
@include vendor-prefix(flex-basis, auto); flex-basis: auto;
width: 100%; width: 100%;
> ul { > ul {
@include flexbox(); display: flex;
@include justify-content(space-around); justify-content: space-around;
@include vendor-prefix(align-items, center); align-items: center;
// flexbug https://github.com/philipwalton/flexbugs#flexbug-2 // flexbug https://github.com/philipwalton/flexbugs#flexbug-2
max-width: 100%; max-width: 100%;
@ -119,12 +119,12 @@ div#main-content-wrapper {
} }
// first-level menu // first-level menu
ul:first-child { ul:first-child {
@include flexbox(); display: flex;
@include justify-content(center); justify-content: center;
@include vendor-prefix(flex-wrap, wrap); flex-wrap: wrap;
height: unset; height: unset;
li { li {
@include vendor-prefix(flex-grow, 0); flex-grow: 0;
} }
} }
@ -148,11 +148,11 @@ div#main-content-wrapper {
} }
// User authentication block // User authentication block
.user-nav { .user-nav {
@include vendor-prefix(flex-basis, 50%); flex-basis: 50%;
@include order(1); order: 1;
@media screen and ($max-mobile-viewport) { @media screen and ($max-mobile-viewport) {
@include vendor-prefix(flex-basis, $nav-height); flex-basis: $nav-height;
margin: 0; margin: 0;
width: 100%; width: 100%;
@ -166,10 +166,10 @@ div#main-content-wrapper {
} }
span.login, span.logged-in { span.login, span.logged-in {
@include flexbox(); display: flex;
@include flex-direction(row); flex-direction: row;
@include vendor-prefix(align-items, center); align-items: center;
@include justify-content(center); justify-content: center;
// flexbug https://github.com/philipwalton/flexbugs#flexbug-2 // flexbug https://github.com/philipwalton/flexbugs#flexbug-2
max-width: 100%; max-width: 100%;
padding: 0.5em; padding: 0.5em;
@ -311,10 +311,10 @@ div#content {
} }
div.buttons.submit { div.buttons.submit {
@include flexbox(); display: flex;
@include justify-content(flex-start); justify-content: flex-start;
@include flex-direction(row-reverse); flex-direction: row-reverse;
@include vendor-prefix(flex-wrap, wrap); flex-wrap: wrap;
.cancel, .cancel,
[name="previous"] { [name="previous"] {
@ -461,7 +461,7 @@ div.ui-dialog {
padding: $mobile-block-padding; padding: $mobile-block-padding;
div#columns { div#columns {
@include flex-direction(column); flex-direction: column;
padding: $mobile-block-padding; padding: $mobile-block-padding;
> div { > div {

View File

@ -32,19 +32,19 @@ $margin-center: 0 auto;
#header { #header {
#top { #top {
@include flexbox(); display: flex;
@include vendor-prefix(align-items, center); align-items: center;
@include justify-content(center); justify-content: center;
margin: $margin-center; margin: $margin-center;
width: 100%; width: 100%;
min-height: $custom-header-height; min-height: $custom-header-height;
max-width: $width; max-width: $width;
> .cell { > .cell {
@include flex(1 1 100%); flex: 1 1 100%;
&.top-logo { &.top-logo {
@include vendor-prefix(flex-basis, auto); flex-basis: auto;
} }
} }
} }
@ -55,7 +55,7 @@ $margin-center: 0 auto;
} }
nav { nav {
@include flexbox(); display: flex;
.user-nav { .user-nav {
margin: $margin-center; margin: $margin-center;

View File

@ -161,12 +161,9 @@ div.wcscurrentformscell ul {
border-bottom: 1px solid $cell-entry-border-color; border-bottom: 1px solid $cell-entry-border-color;
} }
& > li > a { & > li > a {
display: -ms-flexbox;
display: flex; display: flex;
-ms-align-items: baseline;
align-items: baseline; align-items: baseline;
-ms-flex-wrap: wrap;
flex-wrap: wrap; flex-wrap: wrap;
padding: 1rem; padding: 1rem;
color: $cell-entry-color; color: $cell-entry-color;
@ -261,20 +258,15 @@ div.wcscurrentformscell ul {
} }
@if $cell-image-position == top { @if $cell-image-position == top {
> div { > div {
display: -ms-flexbox;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
-ms-flex-direction: column;
div { div {
-ms-flex-order: 4;
order: 4; order: 4;
} }
div.intro { div.intro {
-ms-flex-order: 2;
order: 2; order: 2;
} }
picture { picture {
-ms-flex-order: 0;
order: 0; order: 0;
img { img {
border-radius: $cell-border-radius $cell-border-radius 0 0; border-radius: $cell-border-radius $cell-border-radius 0 0;
@ -284,7 +276,6 @@ div.wcscurrentformscell ul {
} }
} }
> h2:first-child { > h2:first-child {
-ms-flex-order: 1;
order: 1; order: 1;
border-radius: 0; border-radius: 0;
} }
@ -299,7 +290,6 @@ div.wcscurrentformscell ul {
div.list-of-forms { div.list-of-forms {
span.form-number { span.form-number {
-ms-flex-grow: 1;
flex-grow: 1; flex-grow: 1;
margin-right: 1rem; margin-right: 1rem;
@ -387,11 +377,9 @@ div.menucell li li {
div.searchcell { div.searchcell {
form { form {
position: relative; position: relative;
display: -ms-flexbox;
display: flex; display: flex;
padding: 1em; padding: 1em;
input { input {
-ms-flex: 1;
flex: 1; flex: 1;
margin-right: 1rem; margin-right: 1rem;
} }

View File

@ -566,11 +566,8 @@ div.select2-search {
// Buttons order & alignment configuration // Buttons order & alignment configuration
@if $buttons-order or $buttons-alignment { @if $buttons-order or $buttons-alignment {
div.buttons { div.buttons {
display: -ms-flexbox;
display: flex; display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap; flex-wrap: wrap;
-ms-flex-pack: $buttons-alignment;
justify-content: $buttons-alignment; justify-content: $buttons-alignment;
@each $btn, $grow in $buttons-order { @each $btn, $grow in $buttons-order {
@ -580,10 +577,8 @@ div.select2-search {
} }
.#{$btn}-button { .#{$btn}-button {
-ms-flex-order: $i;
order: $i; order: $i;
@if ($grow == 'grow') { @if ($grow == 'grow') {
-ms-flex-positive: 1;
flex-grow: 1; flex-grow: 1;
} }
} }

View File

@ -29,19 +29,13 @@ html, body {
} }
div#page { div#page {
display: -ms-flexbox;
display: -webkit-flex;
display: flex; display: flex;
min-height: 100vh; min-height: 100vh;
-ms-flex-direction: column;
-webkit-direction: column;
flex-direction: column; flex-direction: column;
} }
div#page div#main-content-wrapper, div#page div#main-content-wrapper,
div#page main { div#page main {
-ms-flex: 1 0 auto;
-webkit-flex: 1 0 auto;
flex: 1 0 auto; flex: 1 0 auto;
width: 100%; width: 100%;
} }
@ -98,27 +92,19 @@ div#main-content {
} }
#columns { #columns {
-ms-flex: 1 auto;
-webkit-flex-grow: 1;
flex-grow: 1; flex-grow: 1;
max-width: 100%; max-width: 100%;
} }
.gru-content { .gru-content {
display: -ms-flexbox;
display: -webkit-flex;
display: flex; display: flex;
#sidebar { #sidebar {
-ms-flex: 0 0 $sidebar-width;
-webkit-flex: 0 0 $sidebar-width;
flex: 0 0 $sidebar-width; flex: 0 0 $sidebar-width;
max-width: $sidebar-max-width; max-width: $sidebar-max-width;
@if $sidebar-min-width != 0 { @if $sidebar-min-width != 0 {
min-width: $sidebar-min-width; min-width: $sidebar-min-width;
} }
@if $sidebar-position == right { @if $sidebar-position == right {
-ms-flex-order: 1;
-webkit-order: 1;
order: 1; order: 1;
} }
div.cell { div.cell {
@ -144,12 +130,8 @@ div#main-content {
} }
.gru-content { .gru-content {
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column; flex-direction: column;
#sidebar { #sidebar {
-ms-flex: 0 0 auto;
-webkit-flex: 0 0 auto;
flex: 0 0 auto; flex: 0 0 auto;
max-width: 100%; max-width: 100%;
// don't apply min-width on mobile // don't apply min-width on mobile

View File

@ -17,15 +17,9 @@
.nearby-form { .nearby-form {
margin: 5px auto; margin: 5px auto;
display: -ms-flexbox;
display: flex; display: flex;
-ms-align-items: center;
-ms-flex-align: center;
align-items: center; align-items: center;
-ms-flex-line-pack: center;
align-content: center; align-content: center;
-ms-flex-pack: space-between;
-ms-justify-content: space-between;
justify-content: space-between; justify-content: space-between;
border: $widget-border; border: $widget-border;
padding: 5px; padding: 5px;
@ -59,7 +53,6 @@
padding: 3px; padding: 3px;
margin: auto; margin: auto;
border-radius: 3px; border-radius: 3px;
display: -ms-flexbox;
display: flex; display: flex;
a { a {
line-height: 1; line-height: 1;

View File

@ -100,7 +100,6 @@ $mq-min--wcs-steps-horizontal-layout: "min-width: #{$wcs-steps-small-layout-limi
.wcs-step { .wcs-step {
border-radius: $border-radius; border-radius: $border-radius;
background-color: $wcs-step-background; background-color: $wcs-step-background;
display: -ms-flexbox;
display: flex; display: flex;
&--marker { &--marker {
@ -110,7 +109,6 @@ $mq-min--wcs-steps-horizontal-layout: "min-width: #{$wcs-steps-small-layout-limi
font-size: 1em; font-size: 1em;
text-align: center; text-align: center;
display: -ms-flexbox;
display: flex; display: flex;
color: $wcs-step-marker-color; color: $wcs-step-marker-color;
@ -119,7 +117,6 @@ $mq-min--wcs-steps-horizontal-layout: "min-width: #{$wcs-steps-small-layout-limi
width: $wcs-step-marker-size; width: $wcs-step-marker-size;
height: $wcs-step-marker-size; height: $wcs-step-marker-size;
-ms-flex: 0 0 $wcs-step-marker-size;
flex: 0 0 $wcs-step-marker-size; flex: 0 0 $wcs-step-marker-size;
&-nb { &-nb {
@ -133,7 +130,6 @@ $mq-min--wcs-steps-horizontal-layout: "min-width: #{$wcs-steps-small-layout-limi
&--label { &--label {
display: block; display: block;
-ms-grid-row-align: center;
align-self: center; align-self: center;
letter-spacing: 1px; letter-spacing: 1px;
line-height: 1.25; line-height: 1.25;
@ -181,17 +177,13 @@ $mq-min--wcs-steps-horizontal-layout: "min-width: #{$wcs-steps-small-layout-limi
width: $size; width: $size;
height: $size; height: $size;
-ms-flex: 0 0 auto;
flex: 0 0 auto; flex: 0 0 auto;
-ms-flex-align: center;
align-items: center; align-items: center;
-ms-flex-pack: center;
justify-content: center; justify-content: center;
&-nb { &-nb {
margin: 0; margin: 0;
transform: translateY(-0.5em); transform: translateY(-0.5em);
-ms-flex-order: 1;
order: 1; order: 1;
} }
@ -200,7 +192,6 @@ $mq-min--wcs-steps-horizontal-layout: "min-width: #{$wcs-steps-small-layout-limi
transform: translateY(0.5em); transform: translateY(0.5em);
font-size: 0.75em; font-size: 0.75em;
font-weight: normal; font-weight: normal;
-ms-flex-order: 3;
order: 3; order: 3;
} }
@ -208,13 +199,11 @@ $mq-min--wcs-steps-horizontal-layout: "min-width: #{$wcs-steps-small-layout-limi
&::before { &::before {
content: ""; content: "";
display: block; display: block;
-ms-flex: 0 0 0.1em;
flex: 0 0 0.1em; flex: 0 0 0.1em;
height: 2em; height: 2em;
margin: 0 0.1em; margin: 0 0.1em;
background: currentColor; background: currentColor;
transform: rotate(30deg); transform: rotate(30deg);
-ms-flex-order: 2;
order: 2; order: 2;
} }
} }
@ -238,9 +227,7 @@ $mq-min--wcs-steps-horizontal-layout: "min-width: #{$wcs-steps-small-layout-limi
.wcs-steps { .wcs-steps {
&--list { &--list {
position: relative; position: relative;
display: -ms-flexbox;
display: flex; display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap; flex-wrap: wrap;
// keep space for label // keep space for label
@ -303,9 +290,7 @@ $mq-min--wcs-steps-horizontal-layout: "min-width: #{$wcs-steps-small-layout-limi
} }
&--list { &--list {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap; flex-wrap: nowrap;
-ms-flex-direction: column;
flex-direction: column; flex-direction: column;
// remove keep space for label // remove keep space for label
padding-bottom: 0; padding-bottom: 0;
@ -417,7 +402,6 @@ $mq-min--wcs-steps-horizontal-layout: "min-width: #{$wcs-steps-small-layout-limi
content: ""; content: "";
display: block; display: block;
height: $wcs-step-marker-tie-width; height: $wcs-step-marker-tie-width;
-ms-flex: 0 0 calc(100% + #{$wcs-steps-spacing});
flex: 0 0 calc(100% + #{$wcs-steps-spacing}); flex: 0 0 calc(100% + #{$wcs-steps-spacing});
background-color: $wcs-step-marker-tie-color; background-color: $wcs-step-marker-tie-color;
margin: auto; margin: auto;

View File

@ -255,10 +255,8 @@ div.gru-nav .gru-nav-button {
margin: 0 auto; margin: 0 auto;
height: 100%; height: 100%;
max-width: $width; max-width: $width;
display: -webkit-flex;
display: flex; display: flex;
.title { .title {
-webkit-flex: 1;
flex: 1; flex: 1;
text-align: center; text-align: center;
h1 { h1 {
@ -289,7 +287,6 @@ div.gru-nav .gru-nav-button {
@media screen and ($max-mobile-viewport) { @media screen and ($max-mobile-viewport) {
display: none; display: none;
} }
-webkit-flex: 1;
flex: 1; flex: 1;
max-width: 400px; max-width: 400px;
background: $blue; background: $blue;
@ -743,7 +740,6 @@ div#gauche div#tracking-code {
position: relative; position: relative;
@media screen and ($max-mobile-viewport) { @media screen and ($max-mobile-viewport) {
margin: 0; margin: 0;
-webkit-order: 0;
order: 0; order: 0;
margin-left: 10px; margin-left: 10px;
width: 200px; width: 200px;
@ -837,10 +833,8 @@ div#gauche div#tracking-code {
} }
form.quixote div.buttons { form.quixote div.buttons {
display: -webkit-flex;
display: flex; display: flex;
@media screen and (max-width: $width) { @media screen and (max-width: $width) {
-webkit-flex-wrap: wrap;
flex-wrap: wrap; flex-wrap: wrap;
} }
div.savedraft-button { div.savedraft-button {
@ -866,48 +860,37 @@ form.quixote div.buttons {
} }
} }
div.previous-button { div.previous-button {
-webkit-flex: 1;
flex: 1; flex: 1;
-webkit-order: 0;
order: 0; order: 0;
@media screen and (max-width: 500px) { @media screen and (max-width: 500px) {
-webkit-flex-basis: 50%;
flex-basis: 50%; flex-basis: 50%;
} }
@media screen and (max-width: 320px) { @media screen and (max-width: 320px) {
-webkit-flex-basis: 100%;
flex-basis: 100%; flex-basis: 100%;
} }
} }
div.cancel-button { div.cancel-button {
-webkit-flex: 1;
flex: 1; flex: 1;
-webkit-order: 1;
order: 1; order: 1;
button { button {
background: #ececec; background: #ececec;
color: #adadad; color: #adadad;
} }
@media screen and (max-width: 500px) { @media screen and (max-width: 500px) {
-webkit-flex-basis: 50%;
flex-basis: 50%; flex-basis: 50%;
} }
@media screen and (max-width: 320px) { @media screen and (max-width: 320px) {
-webkit-flex-basis: 100%;
flex-basis: 100%; flex-basis: 100%;
} }
} }
div.submit-button { div.submit-button {
-webkit-flex: 1;
flex: 1; flex: 1;
-webkit-order: 2;
order: 2; order: 2;
button { button {
background: $green url(img/right.png) right 10px top 50% no-repeat; background: $green url(img/right.png) right 10px top 50% no-repeat;
background-size: auto 60%; background-size: auto 60%;
} }
@media screen and (max-width: 500px) { @media screen and (max-width: 500px) {
-webkit-flex-basis: 100%;
flex-basis: 100%; flex-basis: 100%;
} }
} }
@ -1120,8 +1103,6 @@ body.authentic-page {
} }
} }
#sidebar { #sidebar {
-ms-flex: 0 0 350px;
-webkit-flex: 0 0 350px;
flex: 0 0 350px; flex: 0 0 350px;
max-width: 350px; max-width: 350px;
width: 350px; width: 350px;
@ -1231,14 +1212,11 @@ div#up {
} }
@media screen and ($max-mobile-viewport) { @media screen and ($max-mobile-viewport) {
#content-top-wrapper .content-top { #content-top-wrapper .content-top {
display: -webkit-flex;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.cell { .cell {
-webkit-order: 1;
order: 1; order: 1;
&.trackingcodeinputcell { &.trackingcodeinputcell {
-webkit-order: 0;
order: 0; order: 0;
} }
height: 150px; height: 150px;
@ -1260,7 +1238,6 @@ div#up {
margin: 0 -1rem; // cancel padding margin: 0 -1rem; // cancel padding
width: calc(100% + 2rem); width: calc(100% + 2rem);
input { input {
-webkit-flex: 1;
flex: 1; flex: 1;
} }
} }

View File

@ -31,8 +31,8 @@ div#nav {
margin: 0 auto; margin: 0 auto;
> ul { > ul {
margin: 0; margin: 0;
@include flexbox(); display: flex;
@include justify-content(space-between); justify-content: space-between;
> li { > li {
> a { > a {
font-size: 1.1em; font-size: 1.1em;
@ -125,18 +125,18 @@ div#nav {
} }
} }
div.top { div.top {
@include flexbox(); display: flex;
@include flex-direction(row); flex-direction: row;
margin-bottom: 2ex; margin-bottom: 2ex;
.carrousel-wrapper { .carrousel-wrapper {
@include flexbox(); display: flex;
@include flex(0 0 calc(#{$width} - #{$sidebar-width})); @include flex(0 0 calc(#{$width} - #{$sidebar-width}));
@media screen and ($max-mobile-viewport) { @media screen and ($max-mobile-viewport) {
@include flex-direction(column); flex-direction: column;
@include flex(0); flex: 0;
} }
div.menu { div.menu {
@include flexbox(); display: flex;
align-items: center; align-items: center;
width: 25%; width: 25%;
@media screen and ($max-mobile-viewport) { @media screen and ($max-mobile-viewport) {
@ -169,7 +169,7 @@ div#nav {
} }
} }
@media screen and ($max-mobile-viewport) { @media screen and ($max-mobile-viewport) {
@include flex-direction(column); flex-direction: column;
} }
} }
#sidebar { #sidebar {
@ -350,12 +350,12 @@ div#nav {
border: 0; border: 0;
} }
ul { ul {
@include flexbox(); display: flex;
@include flex-direction(row); flex-direction: row;
@include vendor-prefix(flex-wrap, wrap); flex-wrap: wrap;
@include justify-content(flex-start); justify-content: flex-start;
@media screen and ($max-mobile-viewport) { @media screen and ($max-mobile-viewport) {
@include justify-content(space-around); justify-content: space-around;
} }
li { li {
margin: 1ex 0.5ex; margin: 1ex 0.5ex;

View File

@ -165,8 +165,6 @@ div#nav-wrapper {
div#page { div#page {
div#main-content-wrapper { div#main-content-wrapper {
-ms-flex: unset;
-webkit-flex: unset;
flex: unset; flex: unset;
max-width: unset; max-width: unset;

View File

@ -8,7 +8,6 @@ $cell-entry-hover-background: #eee;
$mobile-limit: 760px; $mobile-limit: 760px;
div#page-content.columns { div#page-content.columns {
display: -ms-flexbox;
display: flex; display: flex;
> div { > div {
box-sizing: border-box; box-sizing: border-box;
@ -20,7 +19,6 @@ div#page-content.columns {
} }
} }
@media screen and (max-width: $mobile-limit) { @media screen and (max-width: $mobile-limit) {
-ms-flex-direction: column;
flex-direction: column; flex-direction: column;
} }
} }

View File

@ -109,7 +109,6 @@ div#content {
} }
#content #sidebar { #content #sidebar {
-ms-flex: 0 0 400px;
flex: 0 0 400px; flex: 0 0 400px;
max-width: none; max-width: none;
order: -1; order: -1;
@ -117,7 +116,6 @@ div#content {
margin-top: -1em; /* cancel #content padding-top */ margin-top: -1em; /* cancel #content padding-top */
background: linear-gradient(to left, rgba(1, 1, 1, 0.1) 0%, rgba(0, 0, 0, 0) 20px); background: linear-gradient(to left, rgba(1, 1, 1, 0.1) 0%, rgba(0, 0, 0, 0) 20px);
@media screen and ($max-mobile-viewport) { @media screen and ($max-mobile-viewport) {
-ms-flex: auto;
flex: auto; flex: auto;
} }
} }

View File

@ -233,15 +233,12 @@ div#sidebar {
div#rub_service { div#rub_service {
form div.buttons { form div.buttons {
display: -ms-flexbox;
display: flex; display: flex;
-ms-justify-content: space-between;
justify-content: space-between; justify-content: space-between;
button { button {
margin-right: 0; margin-right: 0;
} }
.submit-button { .submit-button {
-ms-order: 2;
order: 2; order: 2;
} }
.savedraft-button { .savedraft-button {

View File

@ -146,18 +146,14 @@ input[readonly], select[readonly], textarea[readonly] {
} }
div.buttons { div.buttons {
display: -ms-flexbox;
display: flex; display: flex;
-ms-flex-pack: center;
justify-content: center; justify-content: center;
.cancel-button { .cancel-button {
} }
.previous-button { .previous-button {
-ms-flex-order: 0;
order: 0; order: 0;
} }
.submit-button { .submit-button {
-ms-flex-order: 1;
order: 1; order: 1;
button { button {
margin-right: 0; margin-right: 0;

View File

@ -318,8 +318,6 @@ body.page-connect {
} }
} }
.gru-content #sidebar { .gru-content #sidebar {
-ms-flex: 0 0 $sidebar-width + 150px;
-webkit-flex: 0 0 $sidebar-width + 150px;
flex: 0 0 $sidebar-width + 150px; flex: 0 0 $sidebar-width + 150px;
max-width: $sidebar-width + 150px; max-width: $sidebar-width + 150px;
margin-top: calc(0.4em + 60px); margin-top: calc(0.4em + 60px);
@ -503,7 +501,6 @@ body.focus-in #page.search-page {
margin-right: 8rem; margin-right: 8rem;
} }
.tile { .tile {
-ms-justify-content: space-around;
justify-content: space-around; justify-content: space-around;
} }
.tile-actions { .tile-actions {
@ -865,7 +862,6 @@ body.focus-in #page.search-page {
flex-direction: column; flex-direction: column;
} }
#form-status-sidebar { #form-status-sidebar {
-ms-flex: 0 0 $sidebar-width;
flex: 0 0 $sidebar-width; flex: 0 0 $sidebar-width;
.cell { .cell {
margin-left: 1rem; margin-left: 1rem;

View File

@ -10,11 +10,8 @@ $actions: (goto, more-info, call, login);
padding-left: $tile-picture-width + $tile-producer-circle-radius + 15px; padding-left: $tile-picture-width + $tile-producer-circle-radius + 15px;
min-height: $tile-min-height; min-height: $tile-min-height;
overflow: hidden; overflow: hidden;
display: -ms-flexbox;
display: flex; display: flex;
-ms-flex-direction: column;
flex-direction: column; flex-direction: column;
-ms-justify-content: space-between;
justify-content: space-between; justify-content: space-between;
transition: opacity 0.3s linear; transition: opacity 0.3s linear;
@media screen and (max-width: $desktop-limit) { @media screen and (max-width: $desktop-limit) {

View File

@ -44,8 +44,7 @@ body.authentic-page, body.registration-page {
} }
div#top { div#top {
display: flex; display: flex;
display: -ms-flexbox; justify-content: space-between;
@include vendor-prefix(justify-content, space-between);
} }
h1#logo-ville { h1#logo-ville {
@media screen and ($min-desktop-viewport) { @media screen and ($min-desktop-viewport) {
@ -186,7 +185,7 @@ div#footer-wrapper {
.gru-content { .gru-content {
@media screen and ($max-mobile-viewport) { @media screen and ($max-mobile-viewport) {
@include vendor-prefix(flex-direction, column-reverse); flex-direction: column-reverse;
} }
div.cell.wcsformsofcategorycell { div.cell.wcsformsofcategorycell {
> div { > div {

View File

@ -51,7 +51,6 @@ nav {
} }
.page-template-homepage .gru-content { .page-template-homepage .gru-content {
-ms-flex-wrap: wrap;
flex-wrap: wrap; flex-wrap: wrap;
} }

View File

@ -253,7 +253,7 @@ div#login-page {
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: 3.75rem 0; padding: 3.75rem 0;
@include vendor-prefix(flex-wrap, wrap); flex-wrap: wrap;
> div.block { > div.block {
max-width: 26.25rem; max-width: 26.25rem;
width: 100%; width: 100%;