From 59bedae15ea86ff027b7fd6c6aeb786259cd139b Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Wed, 9 Jan 2019 15:32:37 -0600 Subject: [PATCH] Define SCSS variable for resource dir Adds a `$res` SCSS variable set to the path from the root SCSS file to the `res` directory. This is a different base path than previously used in CSS URLs (it goes up 3 directories instead of 2), because Webpack will now be resolving images relative to the root SCSS file, so the path corresponds to a source tree location, instead of a path in the build output tree. Defining this variable has two main goals: * URLs are a bit easier to read * The path can be overridden, which is needed for riot-web themes like Status --- res/themes/status/css/_StatusLogin.scss | 4 ++-- res/themes/status/css/_paths.scss | 5 +++++ res/themes/status/css/_status.scss | 4 ++-- res/themes/status/css/status.scss | 1 + 4 files changed, 10 insertions(+), 4 deletions(-) create mode 100644 res/themes/status/css/_paths.scss diff --git a/res/themes/status/css/_StatusLogin.scss b/res/themes/status/css/_StatusLogin.scss index 6872727423..437a9a2314 100644 --- a/res/themes/status/css/_StatusLogin.scss +++ b/res/themes/status/css/_StatusLogin.scss @@ -100,8 +100,8 @@ limitations under the License. font-size: 16px; line-height: 25px; background-color: $form-bg-color; - background-image: url(../../themes/status/img/dot.svg); - box-shadow: 0px 5px 16px 0px rgba(25,12,46,0.16); + background-image: url("$(status)/img/dot.svg"); + box-shadow: 0px 5px 16px 0px rgba(25,12,46,0.16); position: relative; text-align: center; } diff --git a/res/themes/status/css/_paths.scss b/res/themes/status/css/_paths.scss new file mode 100644 index 0000000000..3a1140ecf9 --- /dev/null +++ b/res/themes/status/css/_paths.scss @@ -0,0 +1,5 @@ +// Path from root SCSS file (such as `status.scss`) to `res` dir in `matrix-react-sdk` +$res: ../../../../node_modules/matrix-react-sdk/res; + +// Path from root SCSS file (such as `status.scss`) to `status` dir in `riot-web` +$status: ..; diff --git a/res/themes/status/css/_status.scss b/res/themes/status/css/_status.scss index afca5ac0e8..c2ce5dd281 100644 --- a/res/themes/status/css/_status.scss +++ b/res/themes/status/css/_status.scss @@ -187,8 +187,8 @@ $event-redacted-border-color: #cccccc; // event timestamp $event-timestamp-color: #acacac; -$edit-button-url: "../../img/icon_context_message.svg"; -$copy-button-url: "../../img/icon_copy_message.svg"; +$edit-button-url: "$(res)/img/icon_context_message.svg"; +$copy-button-url: "$(res)/img/icon_copy_message.svg"; // e2e $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color diff --git a/res/themes/status/css/status.scss b/res/themes/status/css/status.scss index 52113fe8a6..c5fa1fe114 100644 --- a/res/themes/status/css/status.scss +++ b/res/themes/status/css/status.scss @@ -1,3 +1,4 @@ +@import "_paths.scss"; @import "_fonts.scss"; @import "../../../../node_modules/matrix-react-sdk/res/themes/light/css/_base.scss"; @import "_status.scss";