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`
This commit is contained in:
parent
02412429ab
commit
b535966ab5
|
@ -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(() => {
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in New Issue