treehouse
/
mastodon
21
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

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`
lolsob-rspec
Koala Yeung 2017-05-13 01:22:50 +08:00 committed by Eugen Rochko
parent 5f5d1d823d
commit a9a01aad32
2 changed files with 13 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/javascript/mastodon/main.js
View File

@ -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('font-awesome/css/font-awesome.css');
require('../styles/application.scss'); require('../styles/application.scss');
@ -19,6 +23,8 @@ function main() {
Rails.start(); Rails.start();
require.context('../images/', true); require.context('../images/', true);
// import customization styles
require.context('../../assets/stylesheets/', false, /custom.*\.scss$/); require.context('../../assets/stylesheets/', false, /custom.*\.scss$/);
onDomContentLoaded(() => { onDomContentLoaded(() => {

14
app/javascript/styles/variables.scss
View File

@ -13,13 +13,13 @@ $classic-secondary-color: #d9e1e8; // Pattens Blue
$classic-highlight-color: #2b90d9; // Summer Sky $classic-highlight-color: #2b90d9; // Summer Sky
// Variables for defaults in UI // Variables for defaults in UI
$base-shadow-color: $black; $base-shadow-color: $black !default;
$base-overlay-background: $black; $base-overlay-background: $black !default;
$base-border-color: $white; $base-border-color: $white !default;
$simple-background-color: $white; $simple-background-color: $white !default;
$primary-text-color: $white; $primary-text-color: $white !default;
$valid-value-color: $success-green; $valid-value-color: $success-green !default;
$error-value-color: $error-red; $error-value-color: $error-red !default;
// Tell UI to use selected colors // Tell UI to use selected colors
$ui-base-color: $classic-base-color !default; // Darkest $ui-base-color: $classic-base-color !default; // Darkest