@spark-hire/bootstrap-themes 0.5.0 → 0.6.0

package/package.json

@@ -1,29 +1,42 @@
-{
-  "name": "@spark-hire/bootstrap-themes",
-  "version": "0.5.0",
-  "description": "Custom Bootstrap 4 Themes",
-  "repository": {
-    "type": "git",
-    "url": "git@codebasehq.com:sparkhire/sparkhire/bootstrap-themes.git"
-  },
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "npm run clean && npm run compile && git push",
-    "clean": "rm -rf css/*",
-    "compile": "node scripts/build.js",
-    "prepublishOnly": "npm run build"
-  },
-  "author": "Jacob Smits <j.smits@sparkhire.com> (http://github.com/throttlehead)",
-  "license": "UNLICENSED",
-  "dependencies": {
-    "bootstrap": "^4.3.1",
-    "jquery": "^3.4.1",
-    "node-sass": "^4.12.0",
-    "popper.js": "^1.14.7"
-  },
-  "devDependencies": {
-    "colors": "^1.3.3",
-    "fs": "0.0.1-security",
-    "node-sass-package-importer": "^5.3.0"
-  }
-}
+{
+  "name": "@spark-hire/bootstrap-themes",
+  "version": "0.6.0",
+  "description": "Custom Bootstrap 4 Themes",
+  "repository": {
+    "type": "git",
+    "url": "git@codebasehq.com:sparkhire/sparkhire/bootstrap-themes.git"
+  },
+  "watch": {
+    "scss": {
+      "patterns": [
+        "scss"
+      ],
+      "extensions": "scss",
+      "quiet": false,
+      "runOnChangeOnly": false
+    }
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "npm run clean && npm run compile && git push",
+    "clean": "rm -rf css/*",
+    "compile": "node scripts/build.js",
+    "prepublishOnly": "npm run build",
+    "scss": "npm run compile",
+    "watch": "npm-watch scss"
+  },
+  "author": "Jacob Smits <j.smits@sparkhire.com> (http://github.com/throttlehead)",
+  "license": "UNLICENSED",
+  "dependencies": {
+    "bootstrap": "^4.3.1",
+    "jquery": "^3.4.1",
+    "node-sass": "^4.12.0",
+    "popper.js": "^1.14.7"
+  },
+  "devDependencies": {
+    "colors": "^1.3.3",
+    "fs": "0.0.1-security",
+    "node-sass-package-importer": "^5.3.0",
+    "npm-watch": "^0.6.0"
+  }
+}

package/project.sublime-project

@@ -1,9 +1,9 @@
-{
-	"folders":
-	[
-		{
-			"path": ".",
-      "folder_exclude_patterns": ["node_modules", "vendor", "bower_components", "dist", ".sass-cache"]
-		}
-	]
-}
+{
+	"folders":
+	[
+		{
+			"path": ".",
+      "folder_exclude_patterns": ["node_modules", "vendor", "bower_components", "dist", ".sass-cache"]
+		}
+	]
+}

package/scripts/build.js

@@ -1,43 +1,43 @@
-const sass = require('node-sass');
-const path = require('path');
-const packageImporter = require('node-sass-package-importer');
-const fs = require('fs');
-const colors = require('colors');
-
-let defaultOpts = {
-  importer: packageImporter(),
-  sourceMap: true,
-  outputStyle: 'compressed'
-}
-
-let files = {
-  'scss/dark/theme.scss': 'css/dark.css',
-  'scss/light/theme.scss': 'css/light.css'
-};
-
-let writeFile = function(out, data) {
-  fs.writeFile(out, data, function(err){
-    if (err) {
-      console.error(err);
-    } else {
-      console.log('Compiled '+out.green);
-    }
-  });
-}
-
-Object.entries(files).forEach(entry => {
-  const input = entry[0];
-  const output = path.join(__dirname, '../'+entry[1]);
-
-  sass.render(Object.assign(defaultOpts, {
-    file: input,
-    outFile: output,
-  }), function(err, result) {
-    if (err) {
-     console.error(err);
-    } else {
-      writeFile(output, result.css);
-      writeFile(output.replace('.css', '.map'), result.map);
-    }
-  });
-});
+const sass = require('node-sass');
+const path = require('path');
+const packageImporter = require('node-sass-package-importer');
+const fs = require('fs');
+const colors = require('colors');
+
+let defaultOpts = {
+  importer: packageImporter(),
+  sourceMap: true,
+  outputStyle: 'compressed'
+}
+
+let files = {
+  'scss/dark/theme.scss': 'css/dark.css',
+  'scss/light/theme.scss': 'css/light.css'
+};
+
+let writeFile = function(out, data) {
+  fs.writeFile(out, data, function(err){
+    if (err) {
+      console.error(err);
+    } else {
+      console.log('Compiled '+out.green);
+    }
+  });
+}
+
+Object.entries(files).forEach(entry => {
+  const input = entry[0];
+  const output = path.join(__dirname, '../'+entry[1]);
+
+  sass.render(Object.assign(defaultOpts, {
+    file: input,
+    outFile: output,
+  }), function(err, result) {
+    if (err) {
+     console.error(err);
+    } else {
+      writeFile(output, result.css);
+      writeFile(output.replace('.css', '.map'), result.map);
+    }
+  });
+});

package/scss/_global_variables.scss

@@ -1,35 +1,91 @@
-$enable-rounded:                        false;
-
-$white:                                 #fff;
-
-$gray-100:                              #f8f9fa;
-$gray-200:                              #e9ecef;
-$gray-300:                              #dee2e6;
-$gray-400:                              #ced4da;
-$gray-500:                              #adb5bd;
-$gray-600:                              #868e96;
-$gray-700:                              #495057;
-$gray-800:                              #343a40;
-$gray-900:                              #212529;
-$gray-1000:                             #1a1c20;
-
-$black:                                 #000;
-
-$blue:                                  #428bca;
-$indigo:                                #6610f2;
-$purple:                                #a66bbe;
-$pink:                                  #ee779b;
-$red:                                   #ea6153;
-$orange:                                #f08b1f;
-$yellow:                                #f1d748;
-$green:                                 #28a745;
-$teal:                                  #3fbd9b;
-$cyan:                                  #54c5e6;
-$dark-blue:                             #213d55;
-
-$font-size-base:                        1rem;
-$font-size-lg:                          1.10rem;
-$font-size-sm:                          .95rem;
-
-$btn-padding-y-lg:                      .70rem;
-$input-padding-y-lg:                    .70rem;
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/mixins";
+
+$enable-rounded:                        false;
+
+$white:                                 #fff;
+
+$gray-100:                              #f8f9fa;
+$gray-200:                              #e9ecef;
+$gray-300:                              #dee2e6;
+$gray-400:                              #ced4da;
+$gray-500:                              #adb5bd;
+$gray-600:                              #868e96;
+$gray-700:                              #495057;
+$gray-800:                              #343a40;
+$gray-900:                              #212529;
+$gray-1000:                             #1a1c20;
+$black:                                 #000;
+
+$blue:                                  #428bca;
+$indigo:                                #6610f2;
+$purple:                                #a66bbe;
+$pink:                                  #ee779b;
+$red:                                   #ea6153;
+$orange:                                #f08b1f;
+$yellow:                                #f7df5e;
+$green:                                 #3eb65a;
+$teal:                                  #3fbd9b;
+$cyan:                                  #8ee3fc;
+$dark-blue:                             #213d55;
+
+$primary:                               $blue;
+$secondary:                             $gray-600;
+$success:                               $green;
+$info:                                  $cyan;
+$warning:                               $yellow;
+$danger:                                $red;
+$light:                                 $gray-100 !default;
+$dark:                                  $gray-800 !default;
+
+$colors: ();
+$colors: map-merge(
+  (
+    "blue":       $blue,
+    "indigo":     $indigo,
+    "purple":     $purple,
+    "pink":       $pink,
+    "red":        $red,
+    "orange":     $orange,
+    "yellow":     $yellow,
+    "green":      $green,
+    "teal":       $teal,
+    "cyan":       $cyan,
+    "white":      $white,
+    "gray":       $gray-600,
+    "gray-dark":  $gray-800
+  ),
+  $colors
+);
+
+$theme-colors: ();
+$theme-colors: map-merge(
+  (
+    "primary":    $primary,
+    "secondary":  $secondary,
+    "success":    $success,
+    "info":       $info,
+    "warning":    $warning,
+    "danger":     $danger,
+    "light":      $light,
+    "dark":       $dark
+  ),
+  $theme-colors
+);
+
+$link-color:                            $blue;
+$link-decoration:                       none;
+$link-hover-color:                      darken($link-color, 15%);
+$link-hover-decoration:                 none;
+
+$border-width:                          1px;
+
+$font-size-base:                        1rem;
+$font-size-lg:                          1.10rem;
+$font-size-sm:                          .95rem;
+
+$input-btn-padding-y-sm:                .35rem;
+$input-btn-padding-x-sm:                .6rem;
+$input-btn-padding-y-lg:                .70rem;
+
+$component-active-bg:                   $primary;

package/scss/buttons.scss

@@ -1,8 +1,8 @@
-.btn-link {
-  cursor: pointer;
-  text-decoration: none !important;
-}
-
-.btn-lg {
-  @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
-}
+.btn-link {
+  cursor: pointer;
+  text-decoration: none !important;
+}
+
+.btn-lg {
+  @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
+}

package/scss/dark/_variables.scss

@@ -1,80 +1,70 @@
-// Required
-@import "~bootstrap/scss/functions";
-@import "~bootstrap/scss/variables";
-@import "~bootstrap/scss/mixins";
-
-@import "../global_variables";
-
-$gray-1000:     #141619;
-
-$light:         $gray-800;
-$dark:          $gray-1000;
-
-$theme-colors: ();
-$theme-colors: map-merge((
-  "primary":    $primary,
-  "secondary":  $secondary,
-  "success":    $success,
-  "info":       $info,
-  "warning":    $warning,
-  "danger":     $danger,
-  "light":      $light,
-  "dark":       $dark
-), $theme-colors);
-
-$body-bg:                               $gray-900;
-$body-color:                            $gray-100;
-
-$input-bg:                              $gray-400;
-$input-disabled-bg:                     $gray-600;
-
-$input-color:                           $black;
-$input-border-color:                    $gray-300;
-$input-btn-border-width:                $border-width;
-$input-box-shadow:                      inset 0 1px 1px rgba($black,.075);
-
-$input-focus-bg:                        $gray-400;
-$input-focus-border-color:              lighten(theme-color("primary"), 25%);
-$input-focus-color:                     $input-color;
-
-$input-placeholder-color:               $gray-700 !default;
-
-$border-color: $gray-600;
-
-$modal-content-bg:                      $gray-700;
-$modal-header-border-color:             $gray-600;
-$modal-footer-border-color:             $gray-600;
-$modal-backdrop-bg:                     rgba(2, 2, 2, 0.75);
-$modal-backdrop-opacity:                1;
-
-$close-color:                           $gray-200;
-$close-text-shadow:                     none;
-
-$breadcrumb-bg:                         $gray-1000;
-
-$pagination-bg:                         $gray-1000;
-$pagination-border-color:               $gray-900;
-$pagination-disabled-bg:                $gray-800;
-$pagination-disabled-border-color:      $gray-900;
-$pagination-hover-bg:                   $gray-800;
-$pagination-hover-border-color:         $gray-800;
-
-$jumbotron-bg:                          $gray-1000;
-
-$nav-tabs-link-active-bg:               $gray-900;
-$nav-tabs-link-active-border-color:     $gray-700;
-$nav-tabs-border-color:                 $gray-700;
-$nav-tabs-link-active-color:            $gray-200;
-
-$list-group-bg:                         $gray-1000;
-$list-group-hover-bg:                   $gray-800;
-$list-group-action-color:               $gray-200;
-$list-group-action-hover-color:         $gray-200;
-$list-group-disabled-bg:                $gray-800;
-
-$card-bg:                               $gray-900;
-$card-border-color:                     $gray-1000;
-
-$progress-bg:                           $gray-1000;
-
-$table-color:                           $gray-100;
+@import "../global_variables";
+
+$gray-1000:                             #141619;
+
+$light:                                 $gray-800;
+$dark:                                  $gray-1000;
+
+$body-bg:                               $gray-900;
+$body-color:                            $gray-100;
+
+$input-bg:                              $gray-400;
+$input-disabled-bg:                     $gray-600;
+
+$input-color:                           $black;
+$input-border-color:                    darken($gray-400, 20%);
+$input-btn-border-width:                $border-width;
+$input-box-shadow:                      inset 0 1px 1px rgba($black,.075);
+
+$input-focus-bg:                        $gray-400;
+$input-focus-border-color:              lighten($primary, 25%);
+$input-focus-color:                     $input-color;
+
+$input-placeholder-color:               $gray-700;
+
+$border-color:                          rgba(0,0,0,.25);
+@debug $border-color;
+
+$modal-content-bg:                      $gray-700;
+$modal-header-border-color:             $gray-600;
+$modal-footer-border-color:             $gray-600;
+$modal-backdrop-bg:                     rgba(2, 2, 2, 0.75);
+$modal-backdrop-opacity:                1;
+
+$close-color:                           $gray-200;
+$close-text-shadow:                     none;
+
+$breadcrumb-bg:                         $gray-1000;
+
+$pagination-color:                      $black;
+$pagination-bg:                         $gray-400;
+$pagination-border-color:               $gray-500;
+$pagination-disabled-bg:                $gray-600;
+$pagination-disabled-border-color:      $gray-300;
+$pagination-hover-bg:                   $gray-300;
+$pagination-hover-color:                $black;
+$pagination-hover-border-color:         $gray-500;
+$pagination-active-border-color:        $gray-500;
+$pagination-disabled-border-color:      $gray-500;
+
+$jumbotron-bg:                          $gray-1000;
+
+$nav-tabs-link-active-bg:               $gray-900;
+$nav-tabs-link-active-border-color:     $gray-700;
+$nav-tabs-border-color:                 $gray-700;
+$nav-tabs-link-active-color:            $gray-200;
+
+$list-group-bg:                         $gray-1000;
+$list-group-hover-bg:                   $gray-800;
+$list-group-action-color:               $gray-200;
+$list-group-action-hover-color:         $gray-200;
+$list-group-disabled-bg:                $gray-800;
+
+$card-bg:                               $gray-800;
+$card-cap-bg:                           rgba(0,0,0,.10);
+
+$progress-bg:                           $gray-1000;
+
+$table-color:                           $gray-100;
+
+@import "~bootstrap/scss/variables";

package/scss/dark/scrollbar.scss

@@ -1,29 +1,29 @@
-::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
-  border: none;
-}
-
-::-webkit-scrollbar-track {
-  -webkit-border-radius: 0;
-  background: #bbb;
-  border-radius: 0;
-}
-
-::-webkit-scrollbar-track:window-inactive {
-  -webkit-border-radius: 0;
-  background: #ccc;
-  border-radius: 0;
-}
-
-::-webkit-scrollbar-thumb {
-  border-radius: 0;
-  background: #777;
-  border: 1px solid #ddd;
-}
-
-::-webkit-scrollbar-thumb:window-inactive {
-  border-radius: 0;
-  background: #aaa;
-  border: 1px solid #ddd;
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+  border: none;
+}
+
+::-webkit-scrollbar-track {
+  -webkit-border-radius: 0;
+  background: #bbb;
+  border-radius: 0;
+}
+
+::-webkit-scrollbar-track:window-inactive {
+  -webkit-border-radius: 0;
+  background: #ccc;
+  border-radius: 0;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 0;
+  background: #777;
+  border: 1px solid #ddd;
+}
+
+::-webkit-scrollbar-thumb:window-inactive {
+  border-radius: 0;
+  background: #aaa;
+  border: 1px solid #ddd;
 }

package/scss/dark/theme.scss

@@ -1,25 +1,26 @@
-@import "variables";
-@import "~bootstrap/scss/bootstrap";
-@import "../shared";
-@import "scrollbar";
-
-// Custom style overrides
-
-@each $color, $value in $theme-colors {
-  @include table-row-variant($color, theme-color-level($color, -3));
-}
-
-.form-control-plaintext {
-  color: $gray-100;
-}
-
-.nav-tabs {
-  .nav-link.active,
-  .nav-item.show .nav-link {
-    border-bottom-color: transparent;
-  }
-}
-
-.bg-light {
-  background-color: $gray-700 !important;
-}
+@import "variables";
+@import "~bootstrap/scss/bootstrap";
+@import "../shared";
+@import "scrollbar";
+
+// Custom style overrides
+
+@each $color, $value in $theme-colors {
+  @include table-row-variant($color, theme-color-level($color, -1));
+}
+
+.form-control-plaintext {
+  color: $gray-100;
+}
+
+.nav-tabs {
+  .nav-link.active,
+  .nav-item.show .nav-link {
+    border-bottom-color: transparent;
+  }
+}
+
+.bg-light {
+  background-color: $gray-700 !important;
+}
+

package/scss/fonts.scss

@@ -1,11 +1,11 @@
-@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i,900,900i|Roboto:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i');
-
-html, body {
-  font-family: 'Source Sans Pro', sans-serif;
-  font-size: 16px;
-}
-
-h1, h2, h3, h4, h5 {
-  font-family: 'Roboto', sans-serif;
-  font-weight: 700;
+@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i,900,900i|Roboto:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i');
+
+html, body {
+  font-family: 'Source Sans Pro', sans-serif;
+  font-size: 16px;
+}
+
+h1, h2, h3, h4, h5 {
+  font-family: 'Roboto', sans-serif;
+  font-weight: 700;
 }

package/scss/light/_variables.scss

@@ -1,20 +1,8 @@
-// Required
-@import "~bootstrap/scss/functions";
-@import "~bootstrap/scss/variables";
-@import "~bootstrap/scss/mixins";
-
-@import "../global_variables";
-
-$light:         $gray-200;
-
-$theme-colors: ();
-$theme-colors: map-merge((
-  "primary":    $primary,
-  "secondary":  $secondary,
-  "success":    $success,
-  "info":       $info,
-  "warning":    $warning,
-  "danger":     $danger,
-  "light":      $light,
-  "dark":       $dark
-), $theme-colors);
+@import "../global_variables";
+
+$light:         $gray-200;
+
+$emphasized-link-hover-darken-percentage: 90%;
+
+@import "~bootstrap/scss/variables";
+