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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -7,10 +7,10 @@ $subpages: transport-en-commun, velo-partage, parking, autopartage, scooters, to
div > ul > li {
display: none;
&.selected {
@include flexbox();
@include flex-direction(row);
display: flex;
flex-direction: row;
@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 {
// list of top level categories
> ul {
@include flexbox();
@include flex-direction(column);
display: flex;
flex-direction: column;
> li {
@extend %homepage-block-color;
margin-bottom: 4px;
@ -40,8 +40,8 @@ $subpages: transport-en-commun, velo-partage, parking, autopartage, scooters, to
}
// list of sub-categories
ul {
@include flexbox();
@include flex-direction(column);
display: flex;
flex-direction: column;
@extend %homepage-block-color;
&: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) {
> ul {
> li {
@include flexbox();
@include flex-direction(row);
display: flex;
flex-direction: row;
border-left: 5px solid $body-background;
&:hover {
border-left: $menucell-hover-border;
}
a {
@include vendor-prefix(flex-grow, 1);
flex-grow: 1;
margin-top: auto;
margin-bottom: auto;
}
ul {
@include vendor-prefix(flex-grow, 1);
@include vendor-prefix(flex-basis, 70%);
@include flex-direction(row);
@include justify-content(flex-end);
@include vendor-prefix(flex-wrap, nowrap);
flex-grow: 1;
flex-basis: 70%;
flex-direction: row;
justify-content: flex-end;
flex-wrap: nowrap;
margin-left: auto;
li {
@include flexbox();
@include flex-direction(row);
@include vendor-prefix(flex-basis, 10em);
display: flex;
flex-direction: row;
flex-basis: 10em;
border-left: 4px solid $cell-background;
border-right: 0;
border-bottom: 0;
@ -167,10 +167,10 @@ $subpages: transport-en-commun, velo-partage, parking, autopartage, scooters, to
&.categorie-demandes div > ul > li {
display: none;
&.selected {
@include flexbox();
@include flex-direction(column);
display: flex;
flex-direction: column;
@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 {
margin: 2ex auto;
div#content {
@include vendor-prefix(align-items, flex-start);
align-items: flex-start;
}
div#columns {
padding: 1em;
@ -190,11 +190,11 @@ div.cell > div {
float: none;
}
.buttons {
@include flexbox();
@include vendor-prefix(justify-content, center);
display: flex;
justify-content: center;
.widget {
padding: 1em;
@include flex(1 1 1);
flex: 1 1 1;
}
}
}
@ -220,7 +220,7 @@ div.cell > div {
}
}
div.submit {
@include flexbox();
display: flex;
}
div.SubmitWidget {
&.submit-button {
@ -276,17 +276,17 @@ div.cell > div {
}
.menucell.urgence {
ul {
@include flexbox();
@include flex-direction(row);
@include vendor-prefix(flex-wrap, wrap);
@include justify-content(space-around);
@include vendor-prefix(align-items, stretch);
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: stretch;
@media screen and ($max-mobile-viewport) {
@include flex-direction(column);
flex-direction: column;
}
li {
@extend %homepage-block-color;
@include vendor-prefix(flex-grow, 1);
flex-grow: 1;
margin: 10px;
padding: 1em 0 0 0;
position: relative;
@ -341,14 +341,14 @@ div.cell > div {
}
}
div.homepage-container {
@include vendor-prefix(flex-grow, 1);
flex-grow: 1;
* {
background-color: transparent;
}
div.services {
@include flexbox();
@include vendor-prefix(justify-content, center);
@include vendor-prefix(flex-wrap, wrap);
display: flex;
justify-content: center;
flex-wrap: wrap;
> div {
width: 350px;
@media screen and ($max-mobile-viewport) {

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -109,7 +109,6 @@ div#content {
}
#content #sidebar {
-ms-flex: 0 0 400px;
flex: 0 0 400px;
max-width: none;
order: -1;
@ -117,7 +116,6 @@ div#content {
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);
@media screen and ($max-mobile-viewport) {
-ms-flex: auto;
flex: auto;
}
}

View File

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

View File

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

View File

@ -318,8 +318,6 @@ body.page-connect {
}
}
.gru-content #sidebar {
-ms-flex: 0 0 $sidebar-width + 150px;
-webkit-flex: 0 0 $sidebar-width + 150px;
flex: 0 0 $sidebar-width + 150px;
max-width: $sidebar-width + 150px;
margin-top: calc(0.4em + 60px);
@ -503,7 +501,6 @@ body.focus-in #page.search-page {
margin-right: 8rem;
}
.tile {
-ms-justify-content: space-around;
justify-content: space-around;
}
.tile-actions {
@ -865,7 +862,6 @@ body.focus-in #page.search-page {
flex-direction: column;
}
#form-status-sidebar {
-ms-flex: 0 0 $sidebar-width;
flex: 0 0 $sidebar-width;
.cell {
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;
min-height: $tile-min-height;
overflow: hidden;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-justify-content: space-between;
justify-content: space-between;
transition: opacity 0.3s linear;
@media screen and (max-width: $desktop-limit) {

View File

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

View File

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

View File

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