about summary refs log tree commit diff
diff options
context:
space:
mode:
authorKoala Yeung <koalay@gmail.com>2017-05-13 01:22:50 +0800
committerEugen Rochko <eugen@zeonfederated.com>2017-05-12 19:22:50 +0200
commitb535966ab57405b3f3514046056ca0022fa14397 (patch)
tree71c74db3755f3a8cf6abec501f311128e01ee574
parent02412429ab1432a1c61358dec1a162d0589573be (diff)
Allow SCSS variables to be overridden (#2987)
* Allow SCSS variables to be overridden with
  `app/javascript/pack/variables*.scss`

* Allow these SCSS variables to be overriden:
  * `$base-shadow-color`
  * `$base-overlay-background`
  * `$base-border-color`
  * `$simple-background-color`
  * `$primary-text-color`
  * `$valid-value-color
  * `$error-value-color`
-rw-r--r--app/javascript/mastodon/main.js6
-rw-r--r--app/javascript/styles/variables.scss14
2 files changed, 13 insertions, 7 deletions
diff --git a/app/javascript/mastodon/main.js b/app/javascript/mastodon/main.js
index 31bf1bff2..08845112b 100644
--- a/app/javascript/mastodon/main.js
+++ b/app/javascript/mastodon/main.js
@@ -1,3 +1,7 @@
+// allow override variables here
+require.context('../../assets/stylesheets/', false, /variables.*\.scss$/);
+
+// import default stylesheet with variables
 require('font-awesome/css/font-awesome.css');
 require('../styles/application.scss');
 
@@ -19,6 +23,8 @@ function main() {
   Rails.start();
 
   require.context('../images/', true);
+
+  // import customization styles
   require.context('../../assets/stylesheets/', false, /custom.*\.scss$/);
 
   onDomContentLoaded(() => {
diff --git a/app/javascript/styles/variables.scss b/app/javascript/styles/variables.scss
index cdf70f027..8362096e1 100644
--- a/app/javascript/styles/variables.scss
+++ b/app/javascript/styles/variables.scss
@@ -13,13 +13,13 @@ $classic-secondary-color: #d9e1e8;    // Pattens Blue
 $classic-highlight-color: #2b90d9;    // Summer Sky
 
 // Variables for defaults in UI
-$base-shadow-color: $black;
-$base-overlay-background: $black;
-$base-border-color: $white;
-$simple-background-color: $white;
-$primary-text-color: $white;
-$valid-value-color: $success-green;
-$error-value-color: $error-red;
+$base-shadow-color: $black !default;
+$base-overlay-background: $black !default;
+$base-border-color: $white !default;
+$simple-background-color: $white !default;
+$primary-text-color: $white !default;
+$valid-value-color: $success-green !default;
+$error-value-color: $error-red !default;
 
 // Tell UI to use selected colors
 $ui-base-color: $classic-base-color !default;             // Darkest