From c9fb89d4540ca70505070a0795d45a01b5e1e5f6 Mon Sep 17 00:00:00 2001 From: Thomas JUND Date: Wed, 29 Apr 2020 16:17:26 +0200 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(-) diff --git a/static/alpes-maritimes-2018/_custom.scss b/static/alpes-maritimes-2018/_custom.scss index 27891751..fa20e4b9 100644 --- a/static/alpes-maritimes-2018/_custom.scss +++ b/static/alpes-maritimes-2018/_custom.scss @@ -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 { diff --git a/static/amiens-metropole/_footer.scss b/static/amiens-metropole/_footer.scss index 1bcfb9f6..73f4c6ea 100644 --- a/static/amiens-metropole/_footer.scss +++ b/static/amiens-metropole/_footer.scss @@ -1,5 +1,5 @@ footer { - @include flex(0 1 1); + flex: 0 1 1; height: 210px; width: 100%; diff --git a/static/amiens-metropole/_forms.scss b/static/amiens-metropole/_forms.scss index bf82fe7d..6be8abed 100644 --- a/static/amiens-metropole/_forms.scss +++ b/static/amiens-metropole/_forms.scss @@ -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; } diff --git a/static/amiens-metropole/_header.scss b/static/amiens-metropole/_header.scss index 08f1bd9f..b2435aef 100644 --- a/static/amiens-metropole/_header.scss +++ b/static/amiens-metropole/_header.scss @@ -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%; } diff --git a/static/amiens-metropole/_layout.scss b/static/amiens-metropole/_layout.scss index 2c610b48..faeda5ba 100644 --- a/static/amiens-metropole/_layout.scss +++ b/static/amiens-metropole/_layout.scss @@ -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%; diff --git a/static/blois-2018/_custom.scss b/static/blois-2018/_custom.scss index a6aeb26b..7fee8f0c 100644 --- a/static/blois-2018/_custom.scss +++ b/static/blois-2018/_custom.scss @@ -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; diff --git a/static/dreux/_custom.scss b/static/dreux/_custom.scss index cd640248..db028d92 100644 --- a/static/dreux/_custom.scss +++ b/static/dreux/_custom.scss @@ -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; diff --git a/static/fontenay-sous-bois-2018/_custom.scss b/static/fontenay-sous-bois-2018/_custom.scss index 3b3d4e63..4d175df8 100644 --- a/static/fontenay-sous-bois-2018/_custom.scss +++ b/static/fontenay-sous-bois-2018/_custom.scss @@ -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 { diff --git a/static/grandlyon-sau/_categorie-demande.scss b/static/grandlyon-sau/_categorie-demande.scss index c843e1be..1d1c67e0 100644 --- a/static/grandlyon-sau/_categorie-demande.scss +++ b/static/grandlyon-sau/_categorie-demande.scss @@ -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; } } } diff --git a/static/grandlyon-sau/_custom.scss b/static/grandlyon-sau/_custom.scss index 304020db..a9ca09bd 100644 --- a/static/grandlyon-sau/_custom.scss +++ b/static/grandlyon-sau/_custom.scss @@ -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) { diff --git a/static/grenoble-metropole-2019/_custom.scss b/static/grenoble-metropole-2019/_custom.scss index ee627f56..9f7b725b 100644 --- a/static/grenoble-metropole-2019/_custom.scss +++ b/static/grenoble-metropole-2019/_custom.scss @@ -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; } } } diff --git a/static/hautes-alpes-2018/_circle-steps.scss b/static/hautes-alpes-2018/_circle-steps.scss index 02401d4e..38e9a33c 100644 --- a/static/hautes-alpes-2018/_circle-steps.scss +++ b/static/hautes-alpes-2018/_circle-steps.scss @@ -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; diff --git a/static/hautes-alpes-2018/_custom.scss b/static/hautes-alpes-2018/_custom.scss index 88872d0a..d3d05bb2 100644 --- a/static/hautes-alpes-2018/_custom.scss +++ b/static/hautes-alpes-2018/_custom.scss @@ -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 { diff --git a/static/hautes-alpes-2018/_neutral-variant.scss b/static/hautes-alpes-2018/_neutral-variant.scss index e5dc28fd..4ca5c8fb 100644 --- a/static/hautes-alpes-2018/_neutral-variant.scss +++ b/static/hautes-alpes-2018/_neutral-variant.scss @@ -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; diff --git a/static/includes/_cells.scss b/static/includes/_cells.scss index d3c84381..5b1aab4a 100644 --- a/static/includes/_cells.scss +++ b/static/includes/_cells.scss @@ -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; } diff --git a/static/includes/_forms.scss b/static/includes/_forms.scss index fca3a7cc..d8971a5a 100644 --- a/static/includes/_forms.scss +++ b/static/includes/_forms.scss @@ -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; } } diff --git a/static/includes/_layout.scss b/static/includes/_layout.scss index ba2570fc..6b0a9f9e 100644 --- a/static/includes/_layout.scss +++ b/static/includes/_layout.scss @@ -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 diff --git a/static/includes/wcs/_nearby-form.scss b/static/includes/wcs/_nearby-form.scss index a7d210d3..2585a8c7 100644 --- a/static/includes/wcs/_nearby-form.scss +++ b/static/includes/wcs/_nearby-form.scss @@ -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; diff --git a/static/includes/wcs/_steps.scss b/static/includes/wcs/_steps.scss index fca2f4e4..0d84ebc3 100644 --- a/static/includes/wcs/_steps.scss +++ b/static/includes/wcs/_steps.scss @@ -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; diff --git a/static/metz-metropole-2019/_custom.scss b/static/metz-metropole-2019/_custom.scss index 33590cec..3e3c287b 100644 --- a/static/metz-metropole-2019/_custom.scss +++ b/static/metz-metropole-2019/_custom.scss @@ -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; } } diff --git a/static/meyzieu-2018/_custom.scss b/static/meyzieu-2018/_custom.scss index e0571956..4ec8e324 100644 --- a/static/meyzieu-2018/_custom.scss +++ b/static/meyzieu-2018/_custom.scss @@ -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; diff --git a/static/montlouis-sur-loire/_custom.scss b/static/montlouis-sur-loire/_custom.scss index edf2c615..6f13f4a2 100644 --- a/static/montlouis-sur-loire/_custom.scss +++ b/static/montlouis-sur-loire/_custom.scss @@ -165,8 +165,6 @@ div#nav-wrapper { div#page { div#main-content-wrapper { - -ms-flex: unset; - -webkit-flex: unset; flex: unset; max-width: unset; diff --git a/static/portal-agent/css/agent-portal.scss b/static/portal-agent/css/agent-portal.scss index 55ca34e1..54f9523e 100644 --- a/static/portal-agent/css/agent-portal.scss +++ b/static/portal-agent/css/agent-portal.scss @@ -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; } } diff --git a/static/publik/_custom.scss b/static/publik/_custom.scss index f2223a07..ce3eea8f 100644 --- a/static/publik/_custom.scss +++ b/static/publik/_custom.scss @@ -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; } } diff --git a/static/saone-et-loire-cd71-2019/_custom.scss b/static/saone-et-loire-cd71-2019/_custom.scss index fe79e2ae..4d980d2a 100644 --- a/static/saone-et-loire-cd71-2019/_custom.scss +++ b/static/saone-et-loire-cd71-2019/_custom.scss @@ -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 { diff --git a/static/toodego/_forms.scss b/static/toodego/_forms.scss index c4321258..d9d77ea4 100644 --- a/static/toodego/_forms.scss +++ b/static/toodego/_forms.scss @@ -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; diff --git a/static/toodego/_specialpages.scss b/static/toodego/_specialpages.scss index a6a06c98..b6461e02 100644 --- a/static/toodego/_specialpages.scss +++ b/static/toodego/_specialpages.scss @@ -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; diff --git a/static/toodego/_tiles.scss b/static/toodego/_tiles.scss index 4a6509ca..d83965fe 100644 --- a/static/toodego/_tiles.scss +++ b/static/toodego/_tiles.scss @@ -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) { diff --git a/static/tours-metropole/_custom.scss b/static/tours-metropole/_custom.scss index 77f2f9d3..79560aa5 100644 --- a/static/tours-metropole/_custom.scss +++ b/static/tours-metropole/_custom.scss @@ -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 { diff --git a/static/venissieux/_custom.scss b/static/venissieux/_custom.scss index e0d7a67e..5b3a901d 100644 --- a/static/venissieux/_custom.scss +++ b/static/venissieux/_custom.scss @@ -51,7 +51,6 @@ nav { } .page-template-homepage .gru-content { - -ms-flex-wrap: wrap; flex-wrap: wrap; } diff --git a/static/villeurbanne-2018/_custom.scss b/static/villeurbanne-2018/_custom.scss index 5dd32dc0..60421849 100644 --- a/static/villeurbanne-2018/_custom.scss +++ b/static/villeurbanne-2018/_custom.scss @@ -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%;