status-im
/
embark-area-51
mirror of https://github.com/status-im/embark-area-51.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

change colors and add command to process scss

This commit is contained in:
Jonathan Rainville 2018-10-12 17:06:54 -04:00 committed by Pascal Precht
parent f41e9ad1ce
commit 12b3411ee2
No known key found for this signature in database
GPG Key ID: 0EE28D8D6FD85D7D
10 changed files with 83 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
embark-ui/package.json
View File

@ -40,6 +40,7 @@
"keccakjs": "0.2.1",
"monaco-editor": "^0.14.3",
"monaco-editor-webpack-plugin": "^1.5.4",
"node-sass": "^4.9.3",
"object-assign": "4.1.1",
"postcss-flexbugs-fixes": "3.2.0",
"postcss-loader": "2.0.8",
@ -73,7 +74,8 @@
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js --env=jsdom"
"test": "node scripts/test.js --env=jsdom",
"css-compile": "node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 src/dark-theme/coreui.scss src/coreui.css"
},
"homepage": "http://localhost:8000/embark",
"jest": {

23
embark-ui/src/dark-theme/_variables.scss
View File

@ -5,8 +5,8 @@
@import "variables/bootstrap/variables";
// Import Bootstrap variables after customization for use below
@import "node_modules/bootstrap/scss/functions"; // from bootstrap node_modules
@import "node_modules/bootstrap/scss/variables"; // from bootstrap node_modules
@import "../../node_modules/bootstrap/scss/functions"; // from bootstrap node_modules
@import "../../node_modules/bootstrap/scss/variables"; // from bootstrap node_modules
// CoreUI Variables
@ -17,7 +17,7 @@ $layout-transition-speed: .25s !default;
// Navbar
$navbar-height: 55px !default;
$navbar-bg: #fff !default;
$navbar-bg: $dark-border-color !default;
$navbar-border: (
bottom: (
size: 1px,
@ -33,9 +33,9 @@ $navbar-brand-minimized-width: 50px !default;
$navbar-brand-minimized-bg: $navbar-brand-bg !default;
$navbar-brand-minimized-border: $navbar-brand-border !default;
$navbar-color: $gray-600 !default;
$navbar-hover-color: $gray-800 !default;
$navbar-active-color: $gray-800 !default;
$navbar-color: $gray-300 !default;
$navbar-hover-color: $gray-200 !default;
$navbar-active-color: $gray-200 !default;
$navbar-disabled-color: $gray-300 !default;
$navbar-toggler-icon: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-color}' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
@ -49,8 +49,8 @@ $sidebar-minimized-width: 50px !default;
$sidebar-minimized-height: $sidebar-minimized-width !default;
$sidebar-compact-width: 150px !default;
$sidebar-compact-height: $sidebar-compact-width !default;
$sidebar-color: #fff !default;
$sidebar-bg: $gray-800 !default;
$sidebar-color: #f3f4f5 !default;
$sidebar-bg: $dark-border-color !default;
$sidebar-borders: none !default;
$mobile-sidebar-width: 220px !default;
@ -70,6 +70,7 @@ $sidebar-form-placeholder-color: rgba(255,255,255,.7) !default;
// Sidebar Navigation
// Not used
$sidebar-nav-color: #fff !default;
$sidebar-nav-title-padding-y: .75rem !default;
$sidebar-nav-title-padding-x: 1rem !default;
@ -130,8 +131,8 @@ $breadcrumb-borders: (
// Aside
$aside-menu-width: 250px !default;
$aside-menu-color: $gray-800 !default;
$aside-menu-bg: #fff !default;
$aside-menu-color: #f3f4f5 !default;
$aside-menu-bg: $dark-border-color !default;
$aside-menu-borders: (
left: (
size: 1px,
@ -146,7 +147,7 @@ $aside-menu-nav-padding-x: 1rem !default;
// Footer
$footer-height: 50px !default;
$footer-bg: $gray-100 !default;
$footer-bg: $dark-border-color !default;
$footer-color: $body-color !default;
$footer-borders: (
top: (

2
embark-ui/src/dark-theme/bootstrap.scss vendored
View File

@ -1,4 +1,4 @@
// Override Boostrap variables
@import "variables";
// Import Bootstrap source files
@import "node_modules/bootstrap/scss/bootstrap";
@import "../../node_modules/bootstrap/scss/bootstrap";

76
embark-ui/src/dark-theme/bootstrap/_variables.scss
View File

@ -158,8 +158,8 @@ $sizes: map-merge(
//
// Settings for the `<body>` element.
$body-bg: $white !default;
$body-color: $gray-900 !default;
$body-bg: $gray-800 !default;
$body-color: $gray-200 !default;
// Links
//
@ -223,7 +223,7 @@ $line-height-lg: 1.5 !default;
$line-height-sm: 1.5 !default;
$border-width: 1px !default;
$border-color: $gray-300 !default;
$border-color: $gray-900 !default;
$border-radius: .25rem !default;
$border-radius-lg: .3rem !default;
@ -583,16 +583,16 @@ $form-feedback-invalid-color: theme-color("danger") !default;
$dropdown-min-width: 10rem !default;
$dropdown-padding-y: .5rem !default;
$dropdown-spacer: .125rem !default;
$dropdown-bg: $white !default;
$dropdown-border-color: rgba($black, .15) !default;
$dropdown-bg: $dark-border-color !default;
$dropdown-border-color: $gray-900 !default;
$dropdown-border-radius: $border-radius !default;
$dropdown-border-width: $border-width !default;
$dropdown-divider-bg: $gray-200 !default;
$dropdown-box-shadow: 0 .5rem 1rem rgba($black, .175) !default;
$dropdown-link-color: $gray-900 !default;
$dropdown-link-hover-color: darken($gray-900, 5%) !default;
$dropdown-link-hover-bg: $gray-100 !default;
$dropdown-link-color: $gray-200 !default;
$dropdown-link-hover-color: lighten($gray-200, 5%) !default;
$dropdown-link-hover-bg: $gray-800 !default;
$dropdown-link-active-color: $component-active-color !default;
$dropdown-link-active-bg: $component-active-bg !default;
@ -602,7 +602,7 @@ $dropdown-link-disabled-color: $gray-600 !default;
$dropdown-item-padding-y: .25rem !default;
$dropdown-item-padding-x: 1.5rem !default;
$dropdown-header-color: $gray-600 !default;
$dropdown-header-color: $gray-200 !default;
// Z-index master list
@ -624,13 +624,13 @@ $nav-link-padding-y: .5rem !default;
$nav-link-padding-x: 1rem !default;
$nav-link-disabled-color: $gray-600 !default;
$nav-tabs-border-color: $gray-300 !default;
$nav-tabs-border-color: $gray-900 !default;
$nav-tabs-border-width: $border-width !default;
$nav-tabs-border-radius: $border-radius !default;
$nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color !default;
$nav-tabs-link-active-color: $gray-700 !default;
$nav-tabs-link-hover-border-color: $gray-900 $gray-900 $nav-tabs-border-color !default;
$nav-tabs-link-active-color: $blue !default;
$nav-tabs-link-active-bg: $body-bg !default;
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;
$nav-tabs-link-active-border-color: $gray-900 $gray-900 $nav-tabs-link-active-bg !default;
$nav-pills-border-radius: $border-radius !default;
$nav-pills-link-active-color: $component-active-color !default;
@ -684,28 +684,28 @@ $pagination-line-height: 1.25 !default;
$pagination-color: $link-color !default;
$pagination-bg: $white !default;
$pagination-border-width: $border-width !default;
$pagination-border-color: $gray-300 !default;
$pagination-border-color: $gray-900 !default;
$pagination-focus-box-shadow: $input-btn-focus-box-shadow !default;
$pagination-focus-outline: 0 !default;
$pagination-hover-color: $link-hover-color !default;
$pagination-hover-bg: $gray-200 !default;
$pagination-hover-border-color: $gray-300 !default;
$pagination-hover-bg: $gray-800 !default;
$pagination-hover-border-color: $gray-900 !default;
$pagination-active-color: $component-active-color !default;
$pagination-active-bg: $component-active-bg !default;
$pagination-active-border-color: $pagination-active-bg !default;
$pagination-disabled-color: $gray-600 !default;
$pagination-disabled-bg: $white !default;
$pagination-disabled-border-color: $gray-300 !default;
$pagination-disabled-bg: $gray-900 !default;
$pagination-disabled-border-color: $gray-900 !default;
// Jumbotron
$jumbotron-padding: 2rem !default;
$jumbotron-bg: $gray-200 !default;
$jumbotron-bg: $gray-600 !default;
// Cards
@ -714,10 +714,10 @@ $card-spacer-y: .75rem !default;
$card-spacer-x: 1.25rem !default;
$card-border-width: $border-width !default;
$card-border-radius: $border-radius !default;
$card-border-color: rgba($black, .125) !default;
$card-border-color: $gray-900 !default;
$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default;
$card-cap-bg: rgba($black, .03) !default;
$card-bg: $white !default;
$card-cap-bg: $dark-accent !default;
$card-bg: $dark-border-color !important;
$card-img-overlay-padding: 1.25rem !default;
@ -749,10 +749,10 @@ $tooltip-arrow-color: $tooltip-bg !default;
// Popovers
$popover-font-size: $font-size-sm !default;
$popover-bg: $white !default;
$popover-bg: $dark-border-color !default;
$popover-max-width: 276px !default;
$popover-border-width: $border-width !default;
$popover-border-color: rgba($black, .2) !default;
$popover-border-color: $gray-900 !default;
$popover-border-radius: $border-radius-lg !default;
$popover-box-shadow: 0 .25rem .5rem rgba($black, .2) !default;
@ -796,8 +796,8 @@ $modal-dialog-margin-y-sm-up: 1.75rem !default;
$modal-title-line-height: $line-height-base !default;
$modal-content-bg: $white !default;
$modal-content-border-color: rgba($black, .2) !default;
$modal-content-bg: $dark-border-color !default;
$modal-content-border-color: $gray-900 !default;
$modal-content-border-width: $border-width !default;
$modal-content-border-radius: $border-radius-lg !default;
$modal-content-box-shadow-xs: 0 .25rem .5rem rgba($black, .5) !default;
@ -805,7 +805,7 @@ $modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .5) !default;
$modal-backdrop-bg: $black !default;
$modal-backdrop-opacity: .5 !default;
$modal-header-border-color: $gray-200 !default;
$modal-header-border-color: $dark-accent !default;
$modal-footer-border-color: $modal-header-border-color !default;
$modal-header-border-width: $modal-content-border-width !default;
$modal-footer-border-width: $modal-header-border-width !default;
@ -838,7 +838,7 @@ $alert-color-level: 6 !default;
$progress-height: 1rem !default;
$progress-font-size: ($font-size-base * .75) !default;
$progress-bg: $gray-200 !default;
$progress-bg: $dark-progress-bg !default;
$progress-border-radius: $border-radius !default;
$progress-box-shadow: inset 0 .1rem .1rem rgba($black, .1) !default;
$progress-bar-color: $white !default;
@ -848,15 +848,15 @@ $progress-bar-transition: width .6s ease !default;
// List group
$list-group-bg: $white !default;
$list-group-border-color: rgba($black, .125) !default;
$list-group-bg: $dark-accent !default;
$list-group-border-color: $gray-900 !default;
$list-group-border-width: $border-width !default;
$list-group-border-radius: $border-radius !default;
$list-group-item-padding-y: .75rem !default;
$list-group-item-padding-x: 1.25rem !default;
$list-group-hover-bg: $gray-100 !default;
$list-group-hover-bg: $gray-800 !default;
$list-group-active-color: $component-active-color !default;
$list-group-active-bg: $component-active-bg !default;
$list-group-active-border-color: $list-group-active-bg !default;
@ -864,11 +864,11 @@ $list-group-active-border-color: $list-group-active-bg !default;
$list-group-disabled-color: $gray-600 !default;
$list-group-disabled-bg: $list-group-bg !default;
$list-group-action-color: $gray-700 !default;
$list-group-action-color: $gray-200 !default;
$list-group-action-hover-color: $list-group-action-color !default;
$list-group-action-active-color: $body-color !default;
$list-group-action-active-bg: $gray-200 !default;
$list-group-action-active-bg: $gray-400 !default;
// Image thumbnails
@ -876,7 +876,7 @@ $list-group-action-active-bg: $gray-200 !default;
$thumbnail-padding: .25rem !default;
$thumbnail-bg: $body-bg !default;
$thumbnail-border-width: $border-width !default;
$thumbnail-border-color: $gray-300 !default;
$thumbnail-border-color: $gray-500 !default;
$thumbnail-border-radius: $border-radius !default;
$thumbnail-box-shadow: 0 1px 2px rgba($black, .075) !default;
@ -884,7 +884,7 @@ $thumbnail-box-shadow: 0 1px 2px rgba($black, .075) !default;
// Figures
$figure-caption-font-size: 90% !default;
$figure-caption-color: $gray-600 !default;
$figure-caption-color: $gray-400 !default;
// Breadcrumbs
@ -895,9 +895,9 @@ $breadcrumb-item-padding: .5rem !default;
$breadcrumb-margin-bottom: 1rem !default;
$breadcrumb-bg: $gray-200 !default;
$breadcrumb-divider-color: $gray-600 !default;
$breadcrumb-active-color: $gray-600 !default;
$breadcrumb-bg: $dark-border-color !default;
$breadcrumb-divider-color: #f3f4f5 !default;
$breadcrumb-active-color: $gray-200 !default;
$breadcrumb-divider: quote("/") !default;
$breadcrumb-border-radius: $border-radius !default;

8
embark-ui/src/dark-theme/coreui-standalone.scss
View File

@ -10,9 +10,9 @@
@import "variables";
// Import Bootstrap source files
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";
@import "../../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/variables";
@import "../../node_modules/bootstrap/scss/mixins";
// Import core styles
@import "mixins";
@ -62,4 +62,4 @@
@import "rtl";
// Custom Properties support for Internet Explorer
@import "ie-custom-properties"
@import "ie-custom-properties";

2
embark-ui/src/dark-theme/coreui.scss
View File

@ -10,7 +10,7 @@
@import "variables";
// Import Bootstrap source files
@import "node_modules/bootstrap/scss/bootstrap"; // from bootstrap node_modules
@import "../../node_modules/bootstrap/scss/bootstrap"; // from bootstrap node_modules
// Mixins
@import "mixins";

5
embark-ui/src/dark-theme/variables/_colors.scss
View File

@ -14,6 +14,11 @@ $gray-800: #2f353a !default; // lighten($gray-base, 10%);
$gray-900: #23282c !default; // lighten($gray-base, 5%);
$black: #000 !default;
$dark-border-color: #3a4149;
$dark-bg-color: #30353b;
$dark-progress-bg: #515b65;
$dark-accent: #343b41;
$grays: () !default;
$grays: map-merge(
(

30
embark-ui/src/dark-theme/variables/bootstrap/_variables.scss
View File

@ -11,13 +11,13 @@ $enable-transitions: true !default;
//
// Settings for the `<body>` element.
$body-bg: #e4e5e6 !default;
$body-bg: $gray-800 !default;
// Components
//
// Define common padding and border radius sizes and more.
$border-color: $gray-300 !default;
$border-color: $gray-900 !default;
// Typography
//
@ -27,36 +27,36 @@ $font-size-base: .875rem !default;
// Breadcrumbs
$breadcrumb-bg: #fff !default;
$breadcrumb-bg: $dark-border-color !default;
$breadcrumb-margin-bottom: 1.5rem !default;
$breadcrumb-border-radius: 0 !default;
// Cards
$card-border-color: $gray-300 !default;
$card-cap-bg: $gray-100 !default;
$card-border-color: $gray-900 !default;
$card-cap-bg: #343b41 !default;
// Dropdowns
$dropdown-padding-y: 0 !default;
$dropdown-border-color: $gray-300 !default;
$dropdown-divider-bg: $gray-200 !default;
$dropdown-border-color: $dark-border-color !default;
$dropdown-divider-bg: $dark-border-color !default;
// Buttons
$btn-secondary-border: $gray-300 !default;
$btn-secondary-border: $gray-600 !default;
// Progress bars
$progress-bg: $gray-100 !default;
$progress-bg: $dark-progress-bg !default;
// Tables
$table-bg-accent: $gray-100 !default;
$table-bg-hover: $gray-100 !default;
// Not used right now
$table-bg-accent: $dark-accent !default;
$table-bg-hover: $dark-accent !default;
// Forms
$input-group-addon-bg: $gray-100 !default;
$input-border-color: $gray-200 !default;
$input-group-addon-border-color: $gray-200 !default;
$input-group-addon-bg: $dark-accent !default;
$input-border-color: $gray-900 !default;
$input-group-addon-border-color: $gray-900 !default;

4
embark-ui/src/index.js
View File

@ -4,7 +4,9 @@ import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import 'font-awesome/css/font-awesome.min.css';
import '@coreui/coreui/dist/css/coreui.min.css';
import './coreui.css';
// import './dark-theme/coreui-standalone.scss';
// import '@coreui/coreui/dist/css/coreui.min.css';
import './index.css';
import AppContainer from './containers/AppContainer';

2
lib/core/logger.js
View File

@ -59,7 +59,7 @@ class Logger {
logs.slice(limit * -1);
}
return logs;
};
}
}
Logger.logLevels = {