diff options
| author | Koala Yeung <koalay@gmail.com> | 2017-05-13 01:22:50 +0800 |
|---|---|---|
| committer | Eugen Rochko <eugen@zeonfederated.com> | 2017-05-12 19:22:50 +0200 |
| commit | b535966ab57405b3f3514046056ca0022fa14397 (patch) | |
| tree | 71c74db3755f3a8cf6abec501f311128e01ee574 | |
| parent | 02412429ab1432a1c61358dec1a162d0589573be (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.js | 6 | ||||
| -rw-r--r-- | app/javascript/styles/variables.scss | 14 |
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 |