From 5a6ae2930af8e442218b5917b36411fa698c79f2 Mon Sep 17 00:00:00 2001 From: Simon Ser Date: Thu, 3 Oct 2024 10:14:02 +0200 Subject: [PATCH] front: upgrade sass Resolve these three deprecation warnings: - https://sass-lang.com/documentation/breaking-changes/mixed-decls/ - https://sass-lang.com/documentation/breaking-changes/color-functions/ - https://sass-lang.com/documentation/breaking-changes/legacy-js-api/ Signed-off-by: Simon Ser --- .../conflict/styles/_conflictList.scss | 2 +- front/src/styles/scss/_body.scss | 8 ++--- front/src/styles/scss/_variables.scss | 5 ++- .../rollingStockEditor/_rollingStockForm.scss | 8 ++--- front/vite.config.mts | 7 ++++ front/yarn.lock | 36 ++++++++++++------- 6 files changed, 44 insertions(+), 22 deletions(-) diff --git a/front/src/modules/conflict/styles/_conflictList.scss b/front/src/modules/conflict/styles/_conflictList.scss index 6dfaf8d48bc..6c22f0d0302 100644 --- a/front/src/modules/conflict/styles/_conflictList.scss +++ b/front/src/modules/conflict/styles/_conflictList.scss @@ -28,10 +28,10 @@ align-items: center; height: 43px; .icons-arrow-up { + transition: all 0.2s ease-in-out; @media screen and (max-width: 1023px) { transform: rotate(180deg); } - transition: all 0.2s ease-in-out; &.expanded { transition: all 0.2s ease-in-out; transform: rotate(180deg); diff --git a/front/src/styles/scss/_body.scss b/front/src/styles/scss/_body.scss index 8d1238f68ad..5dc40cdae82 100644 --- a/front/src/styles/scss/_body.scss +++ b/front/src/styles/scss/_body.scss @@ -197,6 +197,10 @@ body { } .btn-map-infras-blinking { + animation-name: blinking; + animation-duration: 0.5s; + animation-direction: alternate; + animation-iteration-count: infinite; @keyframes blinking { from { background-color: var(--orange); @@ -207,10 +211,6 @@ body { color: var(--orange); } } - animation-name: blinking; - animation-duration: 0.5s; - animation-direction: alternate; - animation-iteration-count: infinite; } .maplibregl-map { diff --git a/front/src/styles/scss/_variables.scss b/front/src/styles/scss/_variables.scss index d6240668c6c..8f065600b20 100644 --- a/front/src/styles/scss/_variables.scss +++ b/front/src/styles/scss/_variables.scss @@ -1,3 +1,5 @@ +@use 'sass:color'; + $colors: ( 'oldblue': #0088ce, 'blue': #303383, @@ -70,7 +72,8 @@ $colors: ( --breakpoint-lg: 1024px; @each $color, $value in $colors { --#{$color}: #{$value}; - --#{$color}-rgb: #{red($value)}, #{green($value)}, #{blue($value)}; + --#{$color}-rgb: #{color.channel($value, 'red')}, #{color.channel($value, 'green')}, + #{color.channel($value, 'blue')}; } --modal-gray-transparent-background: rgba(0, 0, 0, 0.1); diff --git a/front/src/styles/scss/applications/rollingStockEditor/_rollingStockForm.scss b/front/src/styles/scss/applications/rollingStockEditor/_rollingStockForm.scss index b434e2e920c..5650746adc1 100644 --- a/front/src/styles/scss/applications/rollingStockEditor/_rollingStockForm.scss +++ b/front/src/styles/scss/applications/rollingStockEditor/_rollingStockForm.scss @@ -29,6 +29,10 @@ max-height: 88vh; overflow-y: scroll; + width: 100%; + align-self: center; + overflow: auto; + > .rollingstock-card-header { @media screen and (min-width: 1140px) { height: 3rem; @@ -92,10 +96,6 @@ cursor: default; } - width: 100%; - align-self: center; - overflow: auto; - @media screen and (min-width: 767px) { &-text { *td, diff --git a/front/vite.config.mts b/front/vite.config.mts index 8bd5bd507b1..972c2439595 100644 --- a/front/vite.config.mts +++ b/front/vite.config.mts @@ -50,6 +50,13 @@ export default defineConfig(({ mode }) => { outDir: 'build', sourcemap: true, }, + css: { + preprocessorOptions: { + scss: { + api: 'modern', + }, + }, + }, server: { open: false, port: +env.OSRD_VITE_PORT || 3000, diff --git a/front/yarn.lock b/front/yarn.lock index 7ad97731fcd..4bd668e7e1a 100644 --- a/front/yarn.lock +++ b/front/yarn.lock @@ -6350,7 +6350,7 @@ cheerio@^1.0.0: undici "^6.19.5" whatwg-mimetype "^4.0.0" -"chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.1, chokidar@^3.5.3, chokidar@^3.6.0: +chokidar@^3.5.1, chokidar@^3.5.3, chokidar@^3.6.0: version "3.6.0" resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b" integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw== @@ -6365,6 +6365,13 @@ cheerio@^1.0.0: optionalDependencies: fsevents "~2.3.2" +chokidar@^4.0.0: + version "4.0.1" + resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-4.0.1.tgz#4a6dff66798fb0f72a94f616abbd7e1a19f31d41" + integrity sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA== + dependencies: + readdirp "^4.0.1" + chownr@^1.1.1: version "1.1.4" resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b" @@ -9605,7 +9612,12 @@ immer@^10.0.3: resolved "https://registry.yarnpkg.com/immer/-/immer-10.1.1.tgz#206f344ea372d8ea176891545ee53ccc062db7bc" integrity sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw== -immutable@^4.0.0, immutable@^4.3.4: +immutable@^4.0.0: + version "4.3.7" + resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.7.tgz#c70145fc90d89fb02021e65c84eb0226e4e5a381" + integrity sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw== + +immutable@^4.3.4: version "4.3.5" resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.5.tgz#f8b436e66d59f99760dc577f5c99a4fd2a5cc5a0" integrity sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw== @@ -13255,6 +13267,11 @@ readable-stream@^3.1.1, readable-stream@^3.4.0, readable-stream@^3.6.0: string_decoder "^1.1.1" util-deprecate "^1.0.1" +readdirp@^4.0.1: + version "4.0.1" + resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-4.0.1.tgz#b2fe35f8dca63183cd3b86883ecc8f720ea96ae6" + integrity sha512-GkMg9uOTpIWWKbSsgwb5fA4EavTR+SG/PMPoAY8hkhHfEEY0/vqljY+XHqtDf2cr2IJtoNRDbrrEpZUiZCkYRw== + readdirp@~3.6.0: version "3.6.0" resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7" @@ -13670,11 +13687,11 @@ sass-loader@^14.1.0: neo-async "^2.6.2" sass@^1.70.0: - version "1.75.0" - resolved "https://registry.yarnpkg.com/sass/-/sass-1.75.0.tgz#91bbe87fb02dfcc34e052ddd6ab80f60d392be6c" - integrity sha512-ShMYi3WkrDWxExyxSZPst4/okE9ts46xZmJDSawJQrnte7M1V9fScVB+uNXOVKRBt0PggHOwoZcn8mYX4trnBw== + version "1.79.4" + resolved "https://registry.yarnpkg.com/sass/-/sass-1.79.4.tgz#f9c45af35fbeb53d2c386850ec842098d9935267" + integrity sha512-K0QDSNPXgyqO4GZq2HO5Q70TLxTH6cIT59RdoCHMivrC8rqzaTw5ab9prjz9KUN1El4FLXrBXJhik61JR4HcGg== dependencies: - chokidar ">=3.0.0 <4.0.0" + chokidar "^4.0.0" immutable "^4.0.0" source-map-js ">=0.6.2 <2.0.0" @@ -14020,12 +14037,7 @@ sort-object@^3.0.3: sort-desc "^0.2.0" union-value "^1.0.1" -"source-map-js@>=0.6.2 <2.0.0": - version "1.2.0" - resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af" - integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg== - -source-map-js@^1.2.0, source-map-js@^1.2.1: +"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.2.0, source-map-js@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46" integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==